/* Katri self-hosted additions: hide Webflow badge, legal footer, cookie
   banner, and readable legal pages. Loaded after webflow.css on every page. */

/* Remove the "Made in Webflow" badge (this is now a self-hosted site). */
.w-webflow-badge { display: none !important; }

/* Preserve the bottom margin that .w-form gave the form wrapper (we renamed
   the wrapper to .wform to disable Webflow's form hijacking). */
.wform { margin: 0 0 15px; }

/* --- Legal footer --- */
.katri-footer {
  background: #000;
  color: #cbd5e1;
  text-align: center;
  padding: 30px 16px;
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: 15px;
  line-height: 2;
  direction: rtl;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.katri-footer a { color: #a7d1ff; text-decoration: none; margin: 0 6px; }
.katri-footer a:hover { text-decoration: underline; }
.katri-footer .muted { color: #7b8794; font-size: 13px; }

/* --- Cookie banner --- */
.katri-cookie {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 99999;
  max-width: 680px;
  margin: 0 auto;
  background: #111418;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  direction: rtl;
  display: none;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.katri-cookie a { color: #a7d1ff; }
.katri-cookie .katri-cookie-txt { flex: 1; min-width: 220px; }
.katri-cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.katri-cookie button {
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
/* Accept and decline must be equally prominent: a decline styled as a
   throwaway link is exactly the "dark pattern" the regulator calls out. Same
   size, same weight, same hit area - only the fill differs. */
.katri-cookie .katri-cookie-yes { background: #1a6fc4; color: #fff; }
.katri-cookie .katri-cookie-yes:hover { background: #1565b8; }
.katri-cookie .katri-cookie-no {
  background: transparent;
  color: #e5e7eb;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.katri-cookie .katri-cookie-no:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 520px) {
  .katri-cookie-actions { width: 100%; }
  .katri-cookie-actions button { flex: 1; }
}

/* Revoke-consent button inside the privacy policy prose. */
.legal-inline-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: #a7d1ff;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.legal-inline-btn:disabled { color: #7b8794; text-decoration: none; cursor: default; }

/* Price / market-range disclaimer on the pricing articles. */
.zb-price-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-right: 3px solid #1a6fc4;
  background: rgba(26, 111, 196, 0.07);
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4a5560;
}
.section.zb-dark .zb-price-note { color: #d7e3ee; background: rgba(255, 255, 255, 0.06); }

/* The Webflow accent (#39f) is 2.94:1 on white - it fails AA even as large
   text. #1a6fc4 is 5.10:1. Dark bands are untouched: `.section.zb-dark h2`
   (0-2-1) already outranks `.text-color-primary` (0-1-0) and paints white. */
.text-color-primary { color: #1a6fc4; }

/* --- Legal pages (accessibility / privacy) --- */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 100px 20px 40px;
  font-family: 'Noto Sans Hebrew', sans-serif;
  color: #e5e7eb;
  line-height: 1.9;
  direction: rtl;
}
.legal-page h1 { font-size: 34px; margin: 0 0 8px; color: #fff; }
.legal-page .updated { color: #7b8794; font-size: 14px; margin: 0 0 26px; }
.legal-page h2 { font-size: 22px; margin: 30px 0 10px; color: #fff; }
.legal-page p, .legal-page li { font-size: 17px; color: #cbd5e1; }
.legal-page a { color: #a7d1ff; }
.legal-page ul { padding-right: 22px; }
.legal-page .todo { background: rgba(255, 196, 0, 0.12); border: 1px solid rgba(255, 196, 0, 0.4); border-radius: 8px; padding: 2px 8px; color: #ffd76a; }
.legal-topbar { padding: 20px; text-align: center; }
.legal-topbar img { height: 40px; }

/* ============================================================
   Wave 1 additions (design, a11y, security, mobile perf)
   ============================================================ */

/* --- Honeypot (anti-spam): visually gone, still in the DOM for bots ---
   NOTE: no left:-9999px here! The body is direction:rtl, so an element pushed
   far left EXTENDS the page scroll area leftward (huge white horizontal
   scroll). Hide with the clip pattern instead — zero layout footprint. */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Safety net: the page never scrolls sideways, whatever overflows. */
html, body { overflow-x: hidden; }

/* --- Form consent note under the submit button --- */
.form-consent {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  direction: rtl;
}
.form-consent a {
  color: #a7d1ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover { color: #cfe6ff; }

/* --- Consent checkbox (required tick, not just static text) --- */
.form-consent-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  direction: rtl;
}
.form-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  direction: rtl;
}
.consent-checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #1a6fc4;
  cursor: pointer;
}
.form-consent-check label {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.form-consent-check label a {
  color: #a7d1ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent-check label a:hover { color: #cfe6ff; }
.consent-checkbox:focus-visible {
  outline: 2px solid #a7d1ff;
  outline-offset: 2px;
}
/* Breathing room now that the checkbox sits directly above the submit button. */
.form-consent-check + input[type="submit"] {
  margin-top: 14px;
}

/* --- Footer social links --- */
.katri-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.katri-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.katri-social svg { display: block; }
@media (hover: hover) {
  .katri-social a:hover {
    color: #fff;
    border-color: rgba(51, 153, 255, 0.65);
    background: rgba(51, 153, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(51, 153, 255, 0.25);
    text-decoration: none;
  }
}

/* --- Buttons: radius, depth, spring hover, active press, CTA glow --- */
.button {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 136, 255, 0.35);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background-color .2s ease, color .2s ease;
}
.button.secondary {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.button.outline,
.button.secondary.outline {
  box-shadow: none;
}
@media (hover: hover) {
  .button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 28px rgba(0, 136, 255, 0.5);
  }
  .button.secondary:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  }
  .button.outline:hover,
  .button.secondary.outline:hover {
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.12);
  }
}
.button:active {
  transform: scale(.98);
  transition-duration: .1s;
}
@media (prefers-reduced-motion: reduce) {
  .button, .button:hover, .button:active { transform: none; }
}

/* --- Form fields: radius + focus ring --- */
.text-field {
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.text-field:focus {
  border-color: #3399ff;
  box-shadow: 0 0 0 4px rgba(51, 153, 255, 0.18);
  outline: none;
}

/* --- Focus-visible rings (keyboard navigation) --- */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.nav-link:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid #3399ff;
  outline-offset: 3px;
  border-radius: 6px;
}
.button:focus-visible,
input[type="submit"]:focus-visible { border-radius: 14px; }
.text-field:focus-visible { outline: none; }

/* --- Mobile hero: video autoplays (owner's request); a translucent scrim
   sits over it so the headline stays readable on bright frames. --- */
@media (max-width: 767px) {
  .section.hero {
    background-image: linear-gradient(180deg, #11111126, #111111a6 88%) !important;
  }
  /* background-attachment: fixed is janky/broken on mobile -> scroll */
  .section.cta,
  .section.contact {
    background-attachment: scroll, scroll !important;
  }
}

/* --- Scroll-reveal (classes are added by JS; nothing hidden without JS) --- */
@media (prefers-reduced-motion: no-preference) {
  /* NOTE: no will-change/persistent transform here — a transformed (or
     will-change:transform) ancestor breaks background-attachment:fixed
     (the parallax sections .cta/.contact), turning them white. */
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* --- Hero: staggered text reveal on load --- */
@media (prefers-reduced-motion: no-preference) {
  .container.hero h1 {
    animation: katri-hero-in .8s cubic-bezier(.22, 1, .36, 1) .1s backwards;
  }
  .container.hero p {
    animation: katri-hero-in .8s cubic-bezier(.22, 1, .36, 1) .3s backwards;
  }
  .container.hero .buttons-wrapper {
    animation: katri-hero-in .8s cubic-bezier(.22, 1, .36, 1) .5s backwards;
  }
}
@keyframes katri-hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* --- Hero scroll cue (bobbing chevron) --- */
.section.hero { position: relative; }
.hero-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover: hover) {
  .hero-scroll-cue:hover {
    color: #fff;
    border-color: rgba(51, 153, 255, 0.8);
    background: rgba(51, 153, 255, 0.25);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue {
    animation: katri-cue-bob 2.2s ease-in-out 1.4s infinite;
  }
  @keyframes katri-cue-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
  }
}

/* ============================================================
   Wave 3 additions (performance: font subset + AVIF backgrounds)
   ============================================================ */

/* --- Hebrew+Latin subset as woff2 (55KB vs 184KB TTF). Declared here (after
   webflow.css) so this @font-face wins for the same family/weight/style.
   webflow.css itself is never edited. TTF kept as fallback source. --- */
@font-face {
  font-family: 'Noto Sans Hebrew';
  src: url("../assets/fonts/NotoSansHebrew.woff2") format("woff2"),
       url("../assets/fonts/NotoSansHebrew.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- CTA/Contact backgrounds: AVIF with WebP fallback via image-set().
   Only background-image is overridden; position/repeat/size/attachment stay
   as declared in webflow.css (fixed on desktop) and in the mobile block above
   (scroll,scroll). Browsers without image-set()+type() drop this declaration
   entirely and fall back to webflow.css's plain WebP rule. --- */
.section.cta {
  background-image: linear-gradient(#00000080, #00000080),
    image-set(
      url("../assets/64a966503bb29577389d55d0_Cta.avif") type("image/avif"),
      url("../assets/64a966503bb29577389d55d0_Cta.webp") type("image/webp")
    );
}
.section.contact {
  background-image: linear-gradient(#00000080, #00000080),
    image-set(
      url("../assets/64aaedfc69e238fde334aa5a_Contact.avif") type("image/avif"),
      url("../assets/64aaedfc69e238fde334aa5a_Contact.webp") type("image/webp")
    );
}
/* Lighter 1280w CTA variant for mobile (55KB vs 124KB full). */
@media (max-width: 767px) {
  .section.cta {
    background-image: linear-gradient(#00000080, #00000080),
      image-set(
        url("../assets/64a966503bb29577389d55d0_Cta-1280w.avif") type("image/avif"),
        url("../assets/64a966503bb29577389d55d0_Cta.webp") type("image/webp")
      );
  }
}

/* ============================================================
   Content pages (zb-*) — first page: /zamar-bat-mitzvah.
   Additions only; nothing above this line was modified.
   ============================================================ */

/* --- Top bar: logo + back-home pill, dark like the hero --- */
.zb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: #111;
}
.zb-topbar img { height: 40px; display: block; }
.zb-home-link {
  color: #cbd5e1;
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.zb-home-link:hover {
  color: #fff;
  border-color: rgba(51, 153, 255, 0.65);
  background: rgba(51, 153, 255, 0.12);
}

/* --- Compact hero (no video): dark with soft brand glows --- */
.zb-hero {
  color: #fff;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(51, 153, 255, 0.22), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(190, 74, 165, 0.16), transparent 60%),
    #111;
  padding: 64px 0 76px;
}
.zb-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.zb-hero h1 { color: #fff; }
.zb-kicker {
  display: inline-block;
  color: #8ec5ff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid rgba(51, 153, 255, 0.4);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
  background: rgba(51, 153, 255, 0.1);
}
.zb-sub { font-size: 22px; line-height: 1.55; color: #d7dee8; }
.zb-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: #aab7c6;
  font-size: 15px;
}
.zb-trust li { display: flex; align-items: center; gap: 7px; }
.zb-trust li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.zb-hero-pic {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.zb-hero-pic img { width: 100%; height: auto; display: block; }
.zb-hero-pic video { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }

/* --- Mobile: floating section icons (star/crown) overlap long RTL titles.
   Below 768px put them in the flow, above the heading, aligned to the
   right (RTL start) - no more overlap on any page. --- */
@media (max-width: 767px) {
  .header-icon.tilt-left,
  .header-icon.tilt-right {
    position: static;
    display: block;
    height: 40px;
    margin: 0 0 12px;
  }
}

/* --- 5-star row on text testimonials --- */
.zb-stars {
  color: #ffc531;
  font-size: 19px;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(255, 197, 49, 0.35);
}

/* --- Hero stats: big animated trust numbers --- */
.zb-stats { gap: 18px 42px; margin-top: 30px; }
.zb-stats li { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.zb-stats li::before { display: none; }
.zb-stat-num {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 26px rgba(51, 153, 255, 0.5);
}
.zb-stat-label { font-size: 14.5px; color: #aab7c6; }
@media (prefers-reduced-motion: no-preference) {
  .zb-stats li {
    opacity: 0;
    transform: translateY(16px) scale(.94);
    animation: zb-stat-in .7s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .zb-stats li:nth-child(1) { animation-delay: .5s; }
  .zb-stats li:nth-child(2) { animation-delay: .68s; }
  .zb-stats li:nth-child(3) { animation-delay: .86s; }
}
@keyframes zb-stat-in { to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .zb-stat-num { font-size: 27px; }
  .zb-stats { gap: 14px 26px; }
}
@media (hover: hover) { .zb-hero-pic:hover { transform: rotate(0); } }

/* --- Differentiator cards (accent top border, alternating brand colors) --- */
.zb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.zb-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-top: 4px solid var(--primary);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.06);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.zb-card:nth-child(even) { border-top-color: var(--secondary); }
@media (hover: hover) {
  .zb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1); }
}
.zb-card h3 { font-size: 21px; margin-bottom: 8px; }
.zb-card p { font-size: 17px; line-height: 1.65; color: #444; margin: 0; }
.zb-card.zb-card-cta {
  background: var(--dark);
  border-color: #111;
  border-top-color: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.zb-card.zb-card-cta h3 { color: #fff; }
.zb-card.zb-card-cta p { color: #d7dee8; }

/* --- Alternating light band --- */
.zb-alt { background: var(--light-gray); }

/* --- Bold dark section band (hero-like): white text, glowing gold accents.
   Used on the homepage "3 steps" + testimonials sections. --- */
.section.zb-dark {
  background-color: #16283a;
  background-image:
    radial-gradient(55% 75% at 12% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(70% 90% at 88% 8%, rgba(56, 189, 248, 0.30), transparent 62%),
    radial-gradient(60% 70% at 50% 108%, rgba(103, 232, 249, 0.22), transparent 70%);
}
.section.zb-dark h2,
.section.zb-dark h3 { color: #ffffff; }
.section.zb-dark p,
.section.zb-dark .big-text { color: #d7e3ee; }
.section.zb-dark a:not(.button) { color: #7dd3fc; }
.section.zb-dark .zb-step p,
.section.zb-dark .zb-card p { color: #d7cce4; }
.section.zb-dark .zb-step,
.section.zb-dark .zb-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.section.zb-dark .zb-step-num {
  background: #38bdf8;
  color: #0b2233;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55);
}
/* Written testimonials sit on a WHITE card (webflow.css). Inside a dark band the
   light body text would vanish on it, so the card itself becomes glass. */
.section.zb-dark .testimonial-message {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.section.zb-dark .testimonial-message p { color: #e8eff7; }
.section.zb-dark .author-name { color: #ffffff; opacity: 0.85; }
/* Comparison tables and numbered tip lists inherit dark body text - lift them
   so a dark band never swallows a table cell or a tip heading. */
.section.zb-dark .zb-cmp,
.section.zb-dark .zb-cmp th,
.section.zb-dark .zb-cmp td {
  color: #d7e3ee;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.section.zb-dark .zb-cmp thead th,
.section.zb-dark .zb-cmp tbody th { color: #ffffff; }
.section.zb-dark .zb-tips b { color: #ffffff; }
.section.zb-dark .zb-tips .n {
  background: rgba(56, 189, 248, 0.25);
  color: #e0f2fe;
}

/* --- Two columns: text + picture --- */
.zb-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* --- 3 steps --- */
.zb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.zb-step {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  padding: 30px 24px 26px;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.06);
}
.zb-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 14px;
  box-shadow: 0 6px 16px rgba(51, 153, 255, 0.35);
}
.zb-step h3 { font-size: 21px; margin-bottom: 8px; }
.zb-step p { font-size: 17px; line-height: 1.65; color: #444; margin: 0; }

/* --- FAQ: native details/summary (no webflow.js needed) --- */
.zb-faq { margin-top: 30px; text-align: right; }
.zb-faq details {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.zb-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 19px;
}
.zb-faq summary::-webkit-details-marker { display: none; }
.zb-faq summary img { height: 12px; flex: none; transition: transform .3s ease; }
.zb-faq details[open] summary img { transform: rotate(180deg); }
.zb-faq-a { padding: 0 22px 20px; font-size: 17px; line-height: 1.7; color: #444; }
.zb-faq-a a { color: var(--primary); }

/* --- Embedded testimonial video --- */
.zb-video { max-width: 760px; margin: 30px auto 0; }
.zb-video-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 20px 10px #1111111a;
  background: #111;
}
.zb-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Back-to-home line above the footer --- */
.zb-backline {
  background: #000;
  text-align: center;
  padding: 30px 16px 0;
  font-family: 'Noto Sans Hebrew', sans-serif;
}
.zb-backline a { color: #a7d1ff; text-decoration: none; font-size: 16px; }
.zb-backline a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 991px) {
  .zb-cards, .zb-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .zb-hero { padding: 44px 0 56px; }
  .zb-hero-grid, .zb-2col { grid-template-columns: 1fr; gap: 30px; }
  .zb-hero-pic { transform: none; max-width: 420px; margin: 0 auto; }
  .zb-cards, .zb-steps { grid-template-columns: 1fr; }
  .zb-sub { font-size: 19px; }
  .zb-topbar { padding: 14px 16px; }
  .zb-topbar img { height: 34px; }
}

/* ============================================================
   Wave 4 additions (lite YouTube facades, sticky mobile CTA,
   CTA shine sweep, zamar hero + steps polish). Additions only;
   nothing above this line was modified.
   ============================================================ */

/* --- Lite YouTube embed: thumbnail + play button. The real iframe is
   injected only on click (saves 1MB+ of YouTube scripts per player on
   page load). Lives inside the exact same padded wrappers the iframes
   used, so dimensions and layout are identical. --- */
.yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.yt-facade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 46px;
  /* centered via margins so transform stays free for press feedback */
  margin: -23px 0 0 -33px;
  pointer-events: none;
}
.yt-facade-play svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.yt-facade-play .yt-facade-bg {
  fill: #212121;
  fill-opacity: 0.82;
  transition: fill 200ms ease, fill-opacity 200ms ease;
}
@media (hover: hover) {
  .yt-facade:hover .yt-facade-play .yt-facade-bg,
  .yt-facade:focus-visible .yt-facade-play .yt-facade-bg {
    fill: #f00;
    fill-opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .yt-facade-play { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
  .yt-facade:active .yt-facade-play { transform: scale(0.94); }
}
.yt-facade:focus-visible {
  outline: 2px solid #3399ff;
  outline-offset: -3px;
}

/* --- Shine sweep on primary CTA anchors (solid buttons only, outline
   ghosts excluded). A single diagonal light pass on hover-enter; the
   reset on leave is instant (no return transition), so it never loops.
   Desktop pointers only, and only when motion is welcome. --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.button:not(.outline) {
    position: relative;
    overflow: hidden;
  }
  a.button:not(.outline)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45) 50%, transparent);
    transform: translateX(-240%) skewX(-18deg);
    pointer-events: none;
  }
  a.button:not(.outline):hover::before {
    transform: translateX(420%) skewX(-18deg);
    transition: transform 650ms ease;
  }
  /* white/secondary buttons get a soft brand-blue sweep instead of white */
  a.button.secondary:not(.outline)::before {
    background: linear-gradient(105deg, transparent, rgba(51, 153, 255, 0.28) 50%, transparent);
  }
}

/* --- Sticky mobile CTA pill: fades in after ~600px of scroll and hides
   while the contact form is on screen (never covers the form). Mobile
   only. Centered at the bottom, clear of UserWay's bottom-left widget;
   z-index sits under the cookie banner (99999). --- */
.katri-sticky-cta { display: none; }
@media (max-width: 767px) {
  .katri-sticky-cta {
    display: inline-block;
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 99990;
    background: var(--primary, #39f);
    color: #fff;
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(17, 17, 17, 0.35), 0 2px 10px rgba(51, 153, 255, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(14px);
    transition: opacity 250ms ease, transform 300ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 300ms;
  }
  .katri-sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 250ms ease, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .katri-sticky-cta:active { transform: translateX(-50%) translateY(0) scale(0.96); }
  @media (prefers-reduced-motion: reduce) {
    .katri-sticky-cta,
    .katri-sticky-cta.is-visible,
    .katri-sticky-cta:active {
      transform: translateX(-50%);
      transition: opacity 200ms ease, visibility 0s linear 200ms;
    }
    .katri-sticky-cta.is-visible { transition: opacity 200ms ease; }
  }
}

/* --- zamar H1: soft blue-to-white gradient on the name itself (the text
   is unchanged; plain blue fallback when background-clip:text is
   unsupported). --- */
.zb-name-hl { color: #9ecfff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .zb-name-hl {
    background-image: linear-gradient(115deg, #6db5ff 5%, #f2f9ff 55%, #9ecfff 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* --- zamar step numbers: small scale pop + gentle glow as each step is
   revealed by the existing scroll-reveal (classes come from JS, so
   nothing is hidden without it). --- */
@media (prefers-reduced-motion: no-preference) {
  .zb-step.reveal .zb-step-num {
    transform: scale(0.8);
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1) 250ms, box-shadow 600ms ease 250ms;
  }
  .zb-step.reveal.is-revealed .zb-step-num {
    transform: scale(1);
    box-shadow: 0 6px 16px rgba(51, 153, 255, 0.35), 0 0 22px rgba(51, 153, 255, 0.45);
  }
}


/* ============================================================
   Lead-form reassurance line (wave 3 copy pass, 2026-07-10)
   Sits between the form heading and the form itself, on the two
   photo-backed sections (.cta / .contact) where text is white.
   ============================================================ */
.zb-form-note {
  margin: -4px 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  direction: rtl;
}

/* The value band before the last form. No transform/will-change here:
   it is a sibling of .contact, whose fixed background breaks if a
   containing block is created nearby. */
.zb-worth .big-text {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============================================================
   CTA button ground (2026-07-10, accessibility)
   White text on the brand blue #39f measures 2.94:1, under the
   4.5:1 AA floor. #1a6fc4 measures 5.10:1. Only the *button
   background* moves: #39f stays the brand colour wherever it is
   used as text, where it already clears AA (5.11:1 on the dark band).
   .button.secondary is untouched - higher specificity, and its
   dark-on-white already passes.
   ============================================================ */
:root {
  --cta-blue: #1a6fc4;
}
.button {
  background-color: var(--cta-blue);
  border-color: var(--cta-blue);
}
.katri-sticky-cta {
  background: var(--cta-blue);
}

/* ============================================================
   Conversion colour (2026-07-10)
   The submit button is the one control on the site that means "this
   happens": blue moves you somewhere, green does the thing.

   White text forces a deep fill (5.37:1), and a fill that deep no longer
   separates from the photo behind it (2.63:1, under the 3:1 floor for UI
   components). So the *ring* carries the boundary instead of the fill -
   which is exactly what WCAG 1.4.11 allows. #6ee7b7 is the lightest ring
   that still clears 3:1 on both sides: 9.25:1 against the section ground
   (measured: photo under a 50% black overlay, #262c32 / #342045) and
   3.52:1 against the fill it sits on.
   ============================================================ */
:root {
  --cta-green: #0f7a4d;
  --cta-green-hover: #14724a;
  --cta-ring: #6ee7b7;
}
.button.secondary.zb-submit {
  background-color: var(--cta-green);
  border-color: var(--cta-ring);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.button.secondary.zb-submit:hover {
  background-color: var(--cta-green-hover);
  border-color: var(--cta-ring);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), 0 0 22px rgba(110, 231, 183, 0.45);
}
/* The submit handler disables the button while the lead is in flight. */
.button.secondary.zb-submit:disabled {
  opacity: 0.72;
  cursor: progress;
}



/* Lead-form heading breaks onto two lines on phones only; on desktop the
   heading has room and the break reads as a typo. */
.zb-brk {
  display: none;
}
@media (max-width: 767px) {
  .zb-brk {
    display: inline;
  }
}


/* Homepage hero centered, matching the institutional page (/mofaim-le-iriyot).
   webflow.css lays the hero as a two-column grid with the text on the right and
   a side gradient; here the text block is centered over a uniform overlay. */
.section.hero {
  background-image: linear-gradient(rgba(17, 17, 17, 0.62), rgba(17, 17, 17, 0.62));
}
.container.hero {
  grid-template-columns: 1fr;
  justify-items: center;
}
.container.hero > div {
  max-width: 760px;
  text-align: center;
}
.container.hero .buttons-wrapper {
  justify-content: center;
}