/* ==========================================================================
   Easy2Join — אתר תדמית
   טוקנים: שמנת זהובה לרקע, כחול אוקיינוס לטקסט, כחול נייבי לברים/כפתורים, זהב מעודן להדגשות
   (--green-soft/--sand נשארו כשמות משתנים היסטוריים, אך הערכים בגוון שמנת/זהב כעת)
   ========================================================================== */

:root{
  --bg: #FAF3E3;
  --paper: #FAF3E3;
  --ink: #14415A;
  --ink-soft: #4C7488;
  --primary: #0F2740;
  --primary-dark: #081728;
  --gold: #AD8A4E;
  /* WAVE accessibility audit (Sept 27 2026): white text on the original
     lighter rose (#C6546B) - used as .day-human's circle background -
     read at only ~4.3:1, under WCAG's 4.5:1 for this small bold text.
     Darkened so white stays readable (~6.4:1); .legend-human's dot uses
     the same token and has no text of its own, so it just gets a
     slightly deeper shade too, staying visually matched to the chip. */
  --rose: #9E3F53;
  --rose-soft: #F3DEE2;
  --sand: #E4D8B9;
  --sand-dark: #CBB98C;
  --green-soft: #F0E3C4;
  --gold-soft: #F6EEDB;
  /* Muted "not included" text (price-table "–", excluded-feature icons) -
     var(--sand-dark) alone is ~1.75:1 against the cream backgrounds it
     sits on, well under WCAG's 4.5:1 for normal text. This keeps the same
     muted, de-emphasized feel while actually being readable. */
  --muted-no: #5c4a30;
  /* Keyboard-focus outline colour (WCAG 2.4.7). var(--primary) reads at
     ~10:1 on the light sections; .site-header/.site-footer sit on a dark
     background where that would nearly disappear, so they swap it to
     var(--gold) (~4.7:1 there) below. */
  --focus-color: var(--primary);

  --font-display: "Heebo", Arial, sans-serif;
  --font-body: "Assistant", "Segoe UI", Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 12px 30px -12px rgba(15, 39, 64, 0.22);
  --shadow-soft: 0 4px 14px -6px rgba(15, 39, 64, 0.2);

  --wrap: 1160px;
}

*{ box-sizing: border-box; }
/* Ofer's request (Oct 2 2026): "זה יפה אבל לא החלון לא מגיע למקום הנכון" -
   .site-header is position:sticky (top:0), so a plain anchor jump scrolls
   the target to y:0, landing it right behind the header instead of below
   it. scroll-padding-top applies to every in-page anchor on the site (the
   nav links, #faq, and the new #feat-* links from the track-card bullets
   alike), not just the new ones - ~68px header (14px top/bottom padding +
   a 40px logo) plus a bit of breathing room. */
html{ scroll-behavior: smooth; scroll-padding-top: 88px; font-size: 18px; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

/* Always-on keyboard focus ring (WCAG 2.4.7) - :focus-visible only
   triggers for keyboard/AT focus, never a mouse click, so it adds no
   visual noise for mouse users. --focus-color is swapped per-section
   below so it stays legible on both the light body and the dark header. */
:focus-visible{ outline: 3px solid var(--focus-color); outline-offset: 2px; border-radius: 4px; }

/* WAVE accessibility audit (Sept 27 2026): standard screen-reader-only
   utility - visually invisible, still read by AT. Used for the price
   table's empty corner header cell (see .price-table th:first-child's
   markup in index.html), which WAVE flagged as an "Empty table header". */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: absolute;
  top: -60px;
  right: 12px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus{ top: 12px; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0; }

ul{ margin: 0; padding: 0; list-style: none; }

.wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

section{ padding-block: clamp(56px, 8vw, 96px); }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--sand-dark);
}
.btn-ghost:hover{
  border-color: var(--primary);
  color: var(--primary-dark);
}
.btn-lg{ padding: 14px 28px; font-size: 1rem; }

.section-title{
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  text-align: center;
}
.section-sub{
  text-align: center;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 10px auto 0;
  font-size: 1.02rem;
}

/* ============================== Header ============================== */

.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--primary);
  --focus-color: var(--gold);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
}
/* Ofer's request (Oct 3 2026): first tried the full uploaded logo (rings +
   wordmark baked into one image) as a single asset, but at header/footer
   size the "Easy2Join" text inside the image read too small ("קטן יוצא
   לא רואים את השם"). Then pulled "Easy2Join" out as real HTML text next
   to the icon, on the dark header/footer background directly - still
   hard to read, so it went inside a white card with the icon - but a
   plain white rectangle with a drop shadow read as a pasted-on sticker/
   badge ("המלבן הלבן נראה כמו מדבקה/באדג' מנותק"). Fix: no more shadow,
   a full pill shape instead of a boxy rounded-rect, and the site's own
   cream tone (var(--bg)) instead of stark white, so it reads as part of
   the brand instead of a UI chip glued onto the header. The blue text
   is also lightened from the logo artwork's original shade - that
   darker blue only had ~2.2:1 contrast against the navy header/footer,
   which is why it was unreadable directly on the dark background. */
.brand-logo-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  padding: 4px 14px;
  background: var(--bg);
  border-radius: 999px;
  flex-shrink: 0;
}
.brand-logo{
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-wordmark{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  white-space: nowrap;
}
/* Ofer's request (Oct 3 2026, follow-up chain): "את Easy Join צריך להיות
   יותר כהה כמו הצבע של הרינג" (x2) - each round went darker: first the
   ring's real hue instead of a lightened contrast-safe tint, then the
   median color sampled across the whole ring icon, then one more pass
   darker still ("רוצה את השם יותר כהה"). Kept in sync with
   eventflow-app's BrandWordmark, which uses the same two values. */
.brand-wordmark .wm-blue{ color: #0b386a; }
.brand-wordmark .wm-green{ color: #2f7f6f; }
.main-nav{
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.95rem;
  font-weight: 500;
}
.main-nav a{
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.15s ease;
}
.main-nav a:hover{ color: #fff; }

.btn-nav{
  flex-shrink: 0;
  background: #fff;
  color: var(--primary-dark);
}
.btn-nav:hover{
  background: var(--sand);
  color: var(--primary-dark);
}

/* "כניסה למערכת" - a secondary action next to "התחילו עכשיו", so it needs
   its own look rather than .btn-ghost's (that variant assumes a light
   background, and .btn-nav above would otherwise paint it solid white
   too, same as the primary button). Declared after .btn-nav so it wins
   at equal specificity. */
.nav-login{
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
}
.nav-login:hover{
  color: #fff;
  border-color: #fff;
}

/* Mirrors .nav-login but for inside the mobile dropdown (which sits on a
   light background, so it follows .main-nav a's usual light-mode
   colours instead) - hidden on desktop, where .nav-login already covers
   the same action. */
.nav-login-mobile{ display: none; }

/* Ofer's request (Sept 30 2026): "אני רוצה גם את מספר הוואצאפ גם בבנר
   העליון עם אייקון של ווצאפ" - desktop-only icon+number link, same
   show/hide split as .nav-login/.nav-login-mobile above (hidden ≤860px,
   where .nav-whatsapp-mobile inside the dropdown takes over instead so
   the number stays reachable on mobile too). */
.nav-whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: 500;
  direction: ltr;
}
.nav-whatsapp:hover{ color: #fff; }
.nav-whatsapp-mobile{ display: none; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

@media (max-width: 860px){
  .main-nav{
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--sand);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    display: none;
  }
  .main-nav.open{ display: flex; }
  .main-nav{
    /* This dropdown itself sits on var(--paper) (light), unlike the rest
       of .site-header, so its links need the light-background focus
       colour back rather than the header's gold. */
    --focus-color: var(--primary);
  }
  .main-nav a{
    color: var(--ink-soft);
    padding: 12px 0;
    border-bottom: 1px solid var(--sand);
  }
  .main-nav a:hover{ color: var(--primary-dark); }
  .main-nav a.nav-login-mobile{ display: block; color: var(--primary); font-weight: 700; }
  .main-nav a.nav-whatsapp-mobile{ display: flex; align-items: center; gap: 7px; justify-content: flex-end; direction: ltr; color: var(--ink-soft); }
  .nav-whatsapp{ display: none; }
  .btn-nav{ display: none; }
  .nav-toggle{ display: flex; }
  .site-header{ position: sticky; }
  .header-inner{ position: relative; }
}

/* ============================== Hero ============================== */

.hero{ padding-block: clamp(48px, 8vw, 88px) clamp(40px, 6vw, 72px); }
.hero-inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-title-block{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.eyebrow{
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  color: var(--ink);
}
.hero-sub{
  margin-top: 20px;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-note{
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.hero-visual{ display: flex; justify-content: center; }
.phone-card{
  width: min(340px, 100%);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--sand);
}
.phone-card-top{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
}
.phone-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary);
}
.phone-title{ font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }

.chat-bubble{
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.chat-bubble-out{
  align-self: flex-start;
  background: var(--sand);
  color: var(--ink);
  border-radius: 16px 16px 16px 4px;
}
.chat-bubble-in{
  align-self: flex-end;
  background: var(--green-soft);
  color: var(--primary-dark);
  border-radius: 16px 4px 16px 16px;
  font-weight: 600;
}

.status-row{ display: flex; justify-content: flex-end; }
.status-pill{
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #8a5f22;
  transition: background 0.4s ease, color 0.4s ease;
}
.status-pill.is-confirmed{
  background: var(--green-soft);
  color: var(--primary-dark);
}

.guest-mini-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--sand);
}
.guest-mini{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.guest-mini-dot{
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-yes{ background: var(--primary); }
.dot-wait{ background: var(--sand-dark); }

/* ============================== Hero: כרטיס טכנולוגי ============================== */
.phone-card-tech{
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1E4462 0%, var(--primary) 55%, var(--primary-dark) 100%);
  border: 1px solid rgba(173, 138, 78, 0.25);
  box-shadow: 0 20px 44px -20px rgba(8, 23, 40, 0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.phone-card-tech::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}
.phone-card-tech::after{
  content: "";
  position: absolute;
  top: -60%;
  right: -30%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, rgba(173,138,78,0.16), transparent 70%);
  pointer-events: none;
}
.phone-card-tech > *{ position: relative; z-index: 1; }

.phone-card-tech .phone-card-top{
  border-bottom-color: rgba(255,255,255,0.14);
  gap: 10px;
  align-items: flex-start;
}
.tech-avatar{
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(173,138,78,0.18);
  overflow: hidden;
  padding: 5px;
}
.tech-avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.phone-title-group{ display: flex; flex-direction: column; gap: 1px; }
.phone-card-tech .phone-title{ color: #fff; font-size: 0.88rem; }
.tech-subtitle{ font-size: 0.72rem; color: rgba(255,255,255,0.55); font-family: "Courier New", monospace; letter-spacing: 0.01em; }
.tech-live-dot{
  margin-right: auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #5FD48A;
  box-shadow: 0 0 0 0 rgba(95,212,138,0.6);
  animation: tech-pulse 1.8s ease-out infinite;
}
@keyframes tech-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(95,212,138,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(95,212,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(95,212,138,0); }
}

.tech-invite{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border-inline-start: 3px solid var(--gold);
}
.tech-invite-line{
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.tech-invite-line:last-of-type{ margin-bottom: 0; }
.tech-invite-couple{
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  font-family: "Courier New", monospace;
}

.tech-buttons{ display: flex; flex-direction: column; gap: 8px; }
.tech-btn{
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  cursor: default;
}
.tech-btn-yes{
  background: rgba(95,212,138,0.14);
  border-color: rgba(95,212,138,0.4);
  color: #DFF7E6;
}

.phone-card-tech .status-row{ justify-content: flex-start; }
.phone-card-tech .guest-mini-list{ border-top-color: rgba(255,255,255,0.14); }
.phone-card-tech .guest-mini{ color: rgba(255,255,255,0.75); }
.phone-card-tech .dot-yes{ background: #5FD48A; }
.phone-card-tech .dot-wait{ background: rgba(255,255,255,0.35); }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hero-actions{ justify-content: center; }
  .hero-sub{ margin-inline: auto; }
  /* Oct 11 2026 (Ofer): on a phone the text comes first, the phone mockup
     after it (was order:-1 = picture first). */
  .hero-visual{ order: 1; margin-top: 8px; }
}

/* ============================== הבעיה ============================== */

.problem{ background: var(--paper); border-block: 1px solid var(--sand); }
.problem-inner{
  max-width: 760px;
  text-align: center;
}
.problem h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 22px; }
.lede{
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.lede-strong{
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 1.12rem;
}

/* ============================== איך זה עובד ============================== */

.steps{
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step{
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}
.step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.step h3{ font-size: 1.15rem; margin-bottom: 8px; }
.step p{ color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 780px){
  .steps{ grid-template-columns: 1fr; }
}

/* ============================== מסלולים ============================== */

.tracks{ background: var(--paper); border-block: 1px solid var(--sand); }

/* Spacing above the second heading in this section ("שלושה מסלולי אישור
   הגעה"), now that the guest-communication addon card has its own heading
   right above it (Ofer's request, Oct 2 2026) - keeps the two blocks
   visually distinct instead of running together. */
.tracks-rsvp-title{ margin-top: 48px; }

.track-cards{
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.track-card{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 38px 24px 28px;
  display: flex;
  flex-direction: column;
}
.track-card-highlight{
  background: var(--green-soft);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}
/* WAVE accessibility audit (Sept 27 2026): .track-desc's usual ink-soft is
   fine on the other two cards' --bg background, but this card's own
   green-soft background drops it to ~3.96:1 - same kind of fix as
   .track-addon .track-desc below. */
.track-card-highlight .track-desc{ color: var(--ink); }
.track-badge{
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.track-eyebrow{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-dark);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.track-card h3{ font-size: 1.3rem; margin-bottom: 4px; }
/* Static per-record / flat price line (Ofer's request, Oct 2 2026 - "לרשום
   את חבילת התקשורת בהתחלה 99 ש"ח ואח"כ את 3 המסלולים... עם מחיר לרשומה"),
   shared by the 3 track cards and the .track-addon card below. */
.track-price{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 12px;
}
.track-price-unit{
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-inline-start: 4px;
}
.track-desc{ color: var(--ink-soft); font-size: 0.95rem; min-height: 5.4em; }

.track-features{
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--sand);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.track-features li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
}
/* Ofer's request (Oct 2 2026): "צריך קשר ישיר בין הבולטים בתוכנית מסלולים
   לבין ההסברים שנמצאים אחרי ועוד סיבות לעבוד איתנו" - every checkmark line
   in the 3 track cards and the addon card is now a link (#feat-* in
   index.html) to its matching explanation further down the page. Styled as
   plain text with just a dotted underline, not a conventional blue link -
   these read as feature labels first, links second. */
.track-features a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-soft);
}
.track-features a:hover,
.track-features a:focus-visible{
  color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
}
.track-features li.is-no{ color: var(--ink-soft); }
/* Ofer's request (Sept 26 2026): so a skimming reader can't mistake a
   greyed-out "–" row for included, every excluded RSVP-track feature now
   spells it out in words too, not just via icon/color. */
/* WAVE accessibility audit (Sept 27 2026): the 0.85 opacity this used to
   carry on top of the already-borderline ink-soft/paper pairing (~4.56:1)
   dropped it to ~3.47:1, under WCAG's 4.5:1. The smaller font-size alone
   already gives it the de-emphasized feel this was going for, so the
   opacity reduction (which only hurt contrast, not readability) is gone. */
.tf-note{ font-size: 0.82em; }
/* A feature line with a muted breakdown nested under its main text (Ofer's
   request, Oct 2 2026 - the addon card's "1,000 הודעות" line and its
   message-type breakdown, merged into one grouped item instead of two
   separate checkmark rows). The icon stays top-aligned since the text
   block is now two lines tall. */
.track-features li.track-feature-grouped{ align-items: flex-start; }
.track-feature-text{ display: flex; flex-direction: column; gap: 2px; }
.track-feature-detail{ font-size: 0.82em; font-weight: 400; color: var(--ink-soft); }
.tf-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.track-features li.is-yes .tf-icon{ background: var(--green-soft); color: var(--primary); }
.track-card-highlight .track-features li.is-yes .tf-icon{ background: #fff; }
.track-features li.is-no .tf-icon{ background: var(--sand); color: var(--muted-no); }

.track-days{
  display: flex;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.day-chip{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.day-wa{ background: var(--primary); }
/* White text on --gold here was only ~3.2:1 (fails WCAG's 4.5:1 for this
   small, bold size) - swapped to a dark ink for real contrast. */
.day-ai{ background: var(--gold); color: var(--primary-dark); }
.day-human{ background: var(--rose); }
/* Same WAVE-audit fix as .day-ai above (Sept 27 2026): white on this blue-
   grey was only ~3.2:1, under WCAG's 4.5:1 for this small bold size. */
.day-manage{ background: #7C93A3; color: var(--primary-dark); font-size: 0.95rem; }

.track-legend{
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.legend-dot{
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.legend-wa{ background: var(--primary); }
.legend-ai{ background: var(--gold); }
.legend-human{ background: var(--rose); }
.legend-manage{ background: #7C93A3; }

.tracks-included{
  margin: 22px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.92rem;
  /* WAVE accessibility audit (Sept 27 2026): ink-soft on this box's own
     green-soft background (not the page's usual paper/bg) was only
     ~3.96:1 - matches .tracks-included b's existing ink, so the bold
     word no longer needs its own separate rule for contrast (kept below
     anyway so a future edit that changes just one of these doesn't
     silently reintroduce the gap). */
  color: var(--ink);
  background: var(--green-soft);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
}
.tracks-included b{ color: var(--ink); }

@media (max-width: 900px){
  .track-cards{ grid-template-columns: 1fr; }
  .track-desc{ min-height: 0; }
}

/* Guest-communication add-on card - deliberately gold (not the green/navy
   used by the three RSVP tracks above) and outside the 3-column grid, since
   it isn't a fourth competing track: it's an optional add-on to any one of
   the three, same as the "+ חבילת תקשורת" column in the price table below. */
.track-addon{
  position: relative;
  margin-top: 32px;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 34px 28px 28px;
}
/* WAVE accessibility audit (Sept 27 2026): .track-desc's usual ink-soft
   reads fine on the tracks section's cream backgrounds (~4.56:1), but
   this card's warmer gold-soft background drops that same color to
   ~4.37:1, just under WCAG's 4.5:1. Scoped to this card only - the RSVP
   track cards above still use the lighter ink-soft, which is correct on
   their own background. */
.track-addon .track-desc{ color: var(--ink); }
.track-addon-badge{
  position: absolute;
  top: -15px;
  inset-inline-start: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Solid gold, not a gradient - white text on this gold reads at only
     ~3.2:1 (like .day-ai below), so it needs the same dark-ink fix; a
     gradient would drop even the dark ink under 4.5:1 at its darker end. */
  background: var(--gold);
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.track-addon-body{
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.track-addon-text{ flex: 1 1 320px; }
.track-addon-text h3{ font-size: 1.3rem; margin-bottom: 4px; }
.track-addon-features{
  flex: 1 1 280px;
  margin: 0;
  padding: 0;
  border-top: none;
}
@media (max-width: 700px){
  .track-addon-features{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sand-dark);
  }
}

/* ============================== יתרונות נוספים ============================== */

.feature-groups{
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-group{
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.feature-group-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.feature-group-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green-soft);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.feature-group h3{ font-size: 1.1rem; }
.feature-list li{
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}
.feature-list li:last-child{ margin-bottom: 0; }
/* Landing spot for a click from one of the track-card bullets above
   (Ofer's request, Oct 2 2026 - see .track-features a in this file and the
   matching #feat-* ids/links in index.html). The page already scrolls here
   smoothly (html{scroll-behavior:smooth}); this just makes the arrival
   obvious once it's on screen. */
.feature-list li:target{
  background: var(--gold-soft);
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}
.feature-list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.feature-list b{ color: var(--ink); font-weight: 600; }

@media (max-width: 780px){
  .feature-groups{ grid-template-columns: 1fr; }
}

/* ============================== מחירים ============================== */

.pricing{ background: var(--paper); border-block: 1px solid var(--sand); }

.price-table-wrap{
  margin-top: 40px;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--sand);
}
.price-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  min-width: 640px;
}
.price-table th, .price-table td{
  padding: 16px 18px;
  text-align: center;
  font-size: 0.95rem;
}
.price-table thead th{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid var(--sand-dark);
}
.price-table td:first-child, .price-table th:first-child{
  text-align: right;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9rem;
}
.price-table tbody tr:not(:last-child) td{
  border-bottom: 1px solid var(--sand);
}
.price-table .yes{ color: var(--primary); font-weight: 700; }
.price-table .no{ color: var(--muted-no); }
.col-highlight{ background: var(--green-soft); }

.col-addon-sub{
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.pricing-cta{ text-align: center; margin-top: 36px; }
.pricing-note{
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.pricing-note a{ color: var(--primary-dark); font-weight: 600; text-decoration: underline; }

/* ============================== FAQ ============================== */

.faq-list{
  margin-top: 36px;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item{
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: right;
}
.faq-icon{
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--primary-dark);
  font-weight: 700;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-a p{
  padding: 0 20px 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ============================== CTA סופי ============================== */

.final-cta{
  background: var(--bg);
  color: var(--ink);
}
.final-cta-inner{
  text-align: center;
  max-width: 640px;
}
.final-cta h2{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--ink);
  margin-bottom: 18px;
}
.final-cta p{
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 30px;
}

/* ============================== פוטר ============================== */

.site-footer{ background: var(--primary); color: rgba(255,255,255,0.72); --focus-color: var(--gold); }
.footer-inner{
  display: flex;
  /* Ofer's request (Oct 3 2026): the new .footer-legal column below is
     several lines tall (a heading + 3 stacked links) while .footer-brand
     and .footer-contact stay one line - align-items:center used to work
     fine when every column was a single row, but would now vertically
     center the short columns against the tall one. flex-start keeps every
     column's top edge level instead, the usual multi-column footer look. */
  align-items: flex-start;
  /* Ofer's request (Oct 3 2026, follow-up): "תצופף את שאר האייטמים הם
     רחוקים אחד מהשני" - space-between used to stretch the 3 columns to the
     full row width, which read as "far apart" once .footer-brand became a
     narrow single column (logo+name, with contact stacked under it)
     instead of a wide one. Next follow-up: "לא סימטרי בדף, תמרכז ותרווח
     קצת" - flex-start alone then left the whole cluster hugging the right
     edge, which is its own kind of lopsided; centering the group on the
     page and giving the columns a bit more breathing room than the tight
     first pass answers both requests at once. */
  justify-content: center;
  flex-wrap: wrap;
  /* row-gap column-gap: tighter vertically (mobile, once columns wrap onto
     separate lines) than horizontally (desktop, columns side by side). */
  gap: 28px 72px;
  padding-block: 36px;
}
/* Ofer's request (Oct 3 2026, second follow-up): "שים את זה מתחת ללוגו" -
   back to a stacked column (logo+name row, contact row right under it),
   not beside the logo. */
.footer-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand-row{ display: flex; align-items: center; gap: 10px; }
.footer-brand-contact{ display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.footer-brand-contact a:hover{ color: #fff; }
.footer-nav{ display: flex; gap: 22px; font-size: 0.92rem; }
.footer-nav a:hover{ color: #fff; }
/* Ofer's request (Oct 3 2026): "תקנון/פרטיות/נגישות... אחד מתחת לשני ומעל
   צריך להיות איזה כותרת משפטי" - its own stacked column, separate from
   .footer-nav's single horizontal row of links. */
.footer-legal{ display: flex; flex-direction: column; gap: 9px; font-size: 0.92rem; }
.footer-legal-title{
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.footer-legal a:hover{ color: #fff; }
/* Ofer's request (Sept 30 2026): "איקון של וואצאפ בבנר התחתון עם המספר,
   לא כמו שיש עכשיו" - was a plain text link, now icon + number together. */
.footer-whatsapp{ display: inline-flex; align-items: center; gap: 7px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 18px;
  text-align: center;
  font-size: 0.82rem;
}

/* ============================== Dashboard preview ============================== */
.dashboard-preview{ background: var(--paper); border-block: 1px solid var(--sand); }

.dash-mock{
  margin-top: 40px;
  background: var(--bg);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dash-mock-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--sand);
  border-bottom: 1px solid var(--sand-dark);
}
.dash-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sand-dark);
}
.dash-mock-title{
  margin-right: auto;
  font-size: 0.88rem;
  /* WAVE accessibility audit (Sept 27 2026): ink-soft on this bar's own
     --sand background (not the page's usual paper/bg) was only ~3.56:1. */
  color: var(--ink);
  font-weight: 600;
}

.dash-screenshot{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 560px){
  .dash-mock-title{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== ווידג'ט נגישות ============================== */
/* Manual on/off twin of the media query above (the widget's "עצירת
   אנימציות" checkbox), plus strong-focus and high-contrast, applied via
   classes on <html> - same mechanism the app itself uses. */
html.ef-a11y-reduce-motion, html.ef-a11y-reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.ef-a11y-strong-focus :focus-visible{
  outline: 4px solid #FFB000 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #000 !important;
}

/* Scoped to <main> only - .site-header/.site-footer are already dark
   navy with white text (~11-15:1), forcing this palette onto them would
   make things worse, not better. .hero-visual is the decorative phone
   mockup (already aria-hidden) - excluded so its own dark theme survives. */
html.ef-a11y-contrast main{ background-color: #ffffff !important; }
html.ef-a11y-contrast main :is(div, span, p, li, label, h1, h2, h3, td, th):not(.hero-visual, .hero-visual *){
  color: #000000 !important;
}
html.ef-a11y-contrast main a:not(.hero-visual, .hero-visual *){ color: #0000EE !important; }
html.ef-a11y-contrast main button:not(.hero-visual, .hero-visual *){
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
/* These badges keep a dark/saturated-enough background even in
   high-contrast mode (day-wa's navy, track-badge's navy gradient,
   day-human's rose) that forcing the rule above's black text would read
   WORSE, not better, than their normal white text - restore white for
   these specifically. WAVE audit (Sept 27 2026) added day-human: with
   the darker rose this file's contrast fix above gives it, forced black
   text here read at only ~3.29:1. */
html.ef-a11y-contrast main .day-wa,
html.ef-a11y-contrast main .track-badge,
html.ef-a11y-contrast main .day-human{ color: #ffffff !important; }

.a11y-widget-btn{
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  /* This button's own background is the same dark navy as the header, so
     it needs the header's gold focus ring, not the page-default dark one -
     a dark outline on a dark button would be invisible. */
  --focus-color: var(--gold);
}
.a11y-widget-panel{
  /* display:none is the real default; the visible layout only kicks in
     via :not([hidden]) below, so this never fights the `hidden` attribute
     the widget toggles in JS (an author-stylesheet `display` on this same
     specificity would otherwise beat the UA's own [hidden] rule). */
  display: none;
  position: fixed;
  bottom: 68px;
  left: 16px;
  z-index: 90;
  width: 256px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px;
  font-size: 0.85rem;
  color: var(--ink);
  flex-direction: column;
  gap: 12px;
}
.a11y-widget-panel:not([hidden]){ display: flex; }
.a11y-panel-title{ font-weight: 700; }
.a11y-field-label{ font-size: 0.78rem; margin-bottom: 6px; color: var(--ink-soft); }
.a11y-font-buttons{ display: flex; gap: 8px; }
.a11y-font-btn{
  flex: 1;
  padding: 7px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sand-dark);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
}
/* WAVE accessibility audit (Sept 27 2026): 0.4 opacity on this button's own
   ink-on-white text read at only ~2.17:1 - the "disabled" look for the
   very widget meant to HELP with accessibility was itself unreadable to
   a low-vision visitor. 0.75 keeps a visibly faded/disabled look while
   staying above WCAG's 4.5:1 (~5.25:1). */
.a11y-font-btn:disabled{ opacity: 0.75; cursor: default; }
.a11y-checkbox-row{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.a11y-reset-btn{
  padding: 7px 0;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--sand);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}

/* ============================== כפתור וואטסאפ צף ============================== */
.whatsapp-float-btn{
  position: fixed;
  /* Raised from 16px (Ofer, Oct 12 2026) - sat too low, close to the screen
     edge; the safe-area part keeps it clear of the iPhone home bar. */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #ffffff;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease;
  /* white on WhatsApp green is only ~2:1 (fails 3:1 for a UI-component
     ring) - primary-dark reads ~9:1 against this same green instead. */
  --focus-color: var(--primary-dark);
}
.whatsapp-float-btn:hover{ transform: translateY(-2px); }

/* Ofer's request (Oct 18 2026): a QR code pops up when the mouse rests on ANY
   WhatsApp link of the site (header, footer, floating button, inline links),
   desktop with a mouse only - script.js (initWhatsAppQr) builds and places this
   one shared popup next to the hovered link. Never takes the pointer, so it
   can't flicker or block clicks; the link itself still opens WhatsApp. */
.wa-qr-float{
  position: fixed;
  z-index: 205;
  display: none;
  width: 240px;
  padding: 12px 12px 10px;
  background: #ffffff;
  border: 1px solid var(--sand-dark, #CBB98C);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-card);
  text-align: center;
  pointer-events: none;
}
.wa-qr-float.is-open{ display: block; animation: wa-qr-in 0.15s ease; }
.wa-qr-float img{ display: block; width: 100%; height: auto; border-radius: 6px; }
.wa-qr-float p{ margin: 8px 0 0; font-size: 0.8rem; line-height: 1.35; color: var(--ink); }
@keyframes wa-qr-in{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .wa-qr-float.is-open{ animation: none; }
}

@media (max-width: 860px){
  /* Room for the fixed skip-link/accessibility button + this one without
     overlapping the mobile nav toggle. */
  .whatsapp-float-btn{ width: 48px; height: 48px; }
}

/* ============================== שאלון "קבלת הצעת מחיר" ============================== */
.quote-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 23, 40, 0.55);
}
/* Same [hidden]-cascade fix used by .a11y-widget-panel: an author rule at
   equal specificity to the UA's [hidden]{display:none} would otherwise win
   regardless of source order and keep this permanently visible. */
.quote-modal-overlay:not([hidden]){ display: flex; }

.quote-modal{
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
  --focus-color: var(--primary);
}

.quote-modal-close{
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.quote-modal-close:hover{ background: var(--sand); color: var(--primary-dark); }

.quote-modal h3{
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--primary-dark);
  padding-inline-end: 30px;
  margin-bottom: 6px;
}
.quote-modal-sub{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 20px; }

.quote-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.92rem;
}
.quote-field input,
.quote-field select,
.quote-field textarea{
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--sand-dark);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
.quote-field input:focus-visible,
.quote-field select:focus-visible,
.quote-field textarea:focus-visible{
  outline-color: var(--primary);
}

.quote-submit{ width: 100%; margin-top: 4px; }

.quote-modal-success{ text-align: center; padding: 8px 0 4px; }
.quote-success-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--primary);
  font-size: 1.6rem;
}
.quote-success-title{ font-family: var(--font-display); font-size: 1.2rem; color: var(--primary-dark); margin-bottom: 8px; }

/* Desktop hand-off after the quote form (Ofer, Oct 18 2026): a QR code that
   opens WhatsApp with the filled-in message, plus a button for this computer. */
.quote-qr{
  width: 320px;
  max-width: 100%;
  margin: 12px auto;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-sm);
}
.quote-qr svg{ display: block; width: 100%; height: auto; }
.quote-qr-note{ font-size: 0.85rem; color: var(--ink-soft); }
.quote-qr-or{ margin: 4px 0 10px; color: var(--ink-soft); font-size: 0.9rem; }
.quote-modal-success p:not(.quote-success-title){ margin-bottom: 16px; color: var(--ink-soft); }
.quote-modal-success .btn{ margin-top: 4px; }

html.ef-a11y-contrast .quote-modal :is(h3, p, span, label){ color: #000000 !important; }
html.ef-a11y-contrast .quote-modal button.btn-ghost{ background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; }

/* ==========================================================================
   עמודי מסמכים משפטיים (תקנון/פרטיות/נגישות) - Ofer's request (Oct 3 2026):
   "תכניס את המסמכים המשפטיים לאתר, תאפשר קריאה דרך הבאנר התחתון באתר".
   נבנו מתוכן ה-Word המקורי (pandoc docx→html, אז הניסוח זהה אות-באות
   למסמך המקור) ועטופים באותו header/footer של שאר האתר, כולל script.js
   (תפריט/שנה בפוטר/ווידג'ט הנגישות - כל הפונקציות שם בודקות querySelector
   לפני שהן נוגעות באלמנט, אז הן לא נשברות כשחסרים אלמנטים ספציפיים
   ל-index.html כמו ה-hero או ה-FAQ).
   ========================================================================== */
.legal-doc-section{ padding-block: clamp(32px, 6vw, 64px); }

.legal-breadcrumb{
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.legal-breadcrumb a{ color: var(--primary); font-weight: 600; }
.legal-breadcrumb a:hover{ text-decoration: underline; }

.legal-doc h1{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.legal-doc h2{
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--primary-dark);
  margin-top: 36px;
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--sand-dark);
}
.legal-doc h2:first-of-type{ border-top: none; padding-top: 0; margin-top: 24px; }
.legal-doc h2.legal-chapter{
  font-size: 1.05rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: none;
  margin-top: 44px;
  margin-bottom: 4px;
  padding-top: 0;
}
/* A chapter heading ("פרק א'...") is immediately followed by the first real
   section h2 - no extra gap between the two, just the gap above the pair. */
.legal-doc h2.legal-chapter + h2{ margin-top: 4px; border-top: none; padding-top: 0; }

.legal-doc p{
  margin-bottom: 14px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 76ch;
}

.legal-doc ol, .legal-doc ul{
  margin: 0 0 14px;
  padding-inline-start: 1.4em;
  max-width: 76ch;
}
.legal-doc ol{ list-style: decimal; }
.legal-doc ul{ list-style: disc; }
.legal-doc li{
  margin-bottom: 10px;
  line-height: 1.75;
  color: var(--ink);
}
.legal-doc li p{ margin-bottom: 0; }
.legal-doc li > ol, .legal-doc li > ul{ margin-top: 10px; }

.legal-doc strong{ color: var(--primary-dark); }

.legal-updated-footer{
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--sand-dark);
  font-size: 0.85rem;
  color: var(--ink-soft);
}