*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #faf9f6;
  color: #1a2a3a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.ld-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ld-narrow { max-width: 720px; }

.ld-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #c89000;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.ld-h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -1.5px;
  color: #1a2a3a;
}
.ld-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #f4c447 0%, #e8b830 100%);
  color: #2a1f00;
  padding: 0 14px 4px;
  border-radius: 12px;
  display: inline-block;
}
.ld-h2 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.8px;
  color: #1a2a3a;
}
.ld-h2 em {
  font-style: normal;
  background: #f4c447;
  color: #2a1f00;
  padding: 0 12px 3px;
  border-radius: 8px;
}
.ld-lead {
  font-size: 17px;
  color: #5a6878;
  line-height: 1.7;
  margin: 0 0 14px;
}

/* Buttons */
.ld-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .12s, box-shadow .12s;
  border: none;
  white-space: nowrap;
}
.ld-btn:active { transform: scale(0.97); }
.ld-btn-primary {
  background: linear-gradient(135deg, #f4c447, #e89e30);
  color: #2a1f00;
  box-shadow: 0 6px 20px rgba(244,196,71,.35);
}
.ld-btn-primary:hover { box-shadow: 0 10px 28px rgba(244,196,71,.45); transform: translateY(-1px); }
.ld-btn-ghost {
  /* Outlined pill — every ellipse-shaped button must read as clickable */
  background: #fff;
  color: #1a2a3a;
  font-weight: 700;
  border: 1.5px solid #d4dae2;
}
.ld-btn-ghost:hover { background: rgba(0,0,0,.04); border-color: #b9c2cd; }

/* Instagram CTA (about section) — the one trust-building external link.
   Soft brand-pink pill; SVG glyph, no emoji. */
.ld-about-ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 100%; }
.ld-btn-insta {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  border: 1.5px solid #e6b8d0;
  color: #b0246e;
  font-weight: 700;
  /* The long label must WRAP on narrow phones — an unbreakable pill wider
     than the viewport widened the whole page (left-side gutter in RTL). */
  max-width: 100%;
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}
.ld-btn-insta svg { width: 19px; height: 19px; flex: 0 0 auto; }
.ld-btn-insta:hover { background: rgba(214,58,140,.06); border-color: #d63a8c; }
@media (max-width: 480px) {
  /* Full-width two-line card-button (a shrunk-to-fit pill wrapped to 3 cramped
     lines); softened radius so the multi-line shape reads as a card. */
  .ld-about-ctas { width: 100%; }
  .ld-btn-insta { width: 100%; border-radius: 18px; }
}
/* Footer icon-link */
.ld-footer-insta { display: inline-flex; align-items: center; gap: 6px; }
.ld-footer-insta svg { width: 15px; height: 15px; }

/* "קנו עכשיו" buttons — deep navy so the purchase action stands out from
   every other (gold) action on the page. */
.ld-btn-buy {
  background: #1a2a3a;
  color: #f4c447;
  box-shadow: 0 6px 20px rgba(26, 42, 58, .35);
}
.ld-btn-buy:hover {
  background: #24354a;
  box-shadow: 0 10px 28px rgba(26, 42, 58, .45);
  transform: translateY(-1px);
}
.ld-btn-buy .ld-btn-price {
  background: rgba(244, 196, 71, .18);
  color: #f4c447;
}
.ld-btn-sm { padding: 9px 16px; font-size: 13px; }
.ld-btn-lg { padding: 18px 32px; font-size: 17px; width: 100%; justify-content: center; }
.ld-btn-price {
  background: rgba(0,0,0,.12);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
}

/* DESIGN TOGGLE — small floating link to alternative demo */
.ld-design-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  background: #1a2a3a;
  color: #f4c447;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.3);
  transition: transform .15s, background .2s;
}
.ld-design-toggle:hover {
  background: #2a3a4f;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .ld-design-toggle {
    bottom: 14px;
    left: 14px;
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* GREETING STRIP — Japanese & Korean hello above header */
.ld-greeting-strip {
  background: linear-gradient(90deg, #1a2a3a 0%, #2a3a4f 50%, #1a2a3a 100%);
  color: #f4c447;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  position: relative;
}
.ld-greeting-strip::before,
.ld-greeting-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ld-greeting-strip::before {
  right: 0;
  background: linear-gradient(270deg, #1a2a3a, transparent);
}
.ld-greeting-strip::after {
  left: 0;
  background: linear-gradient(90deg, #1a2a3a, transparent);
}
.ld-greeting-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  animation: ldMarquee 28s linear infinite;
}
.ld-greeting-track span {
  display: inline-block;
}
/* The track holds TWO identical copies of the greetings; sliding by exactly
   half its width loops seamlessly — the roller is never empty. */
@keyframes ldMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-greeting-track { animation: none; }
}

/* HEADER */
/* Anchor deep-links (e.g. /#pricing from the demo's buy CTA) must land with the
   section title visible below the sticky header, not hidden under it. */
.ld-section { scroll-margin-top: 72px; }

.ld-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,249,246,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.ld-header .ld-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}
.ld-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  color: #1a2a3a;
  letter-spacing: -0.3px;
}
.ld-brand img { width: 36px; height: 36px; border-radius: 10px; }
.ld-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
}
.ld-nav a { color: #5a6878; transition: color .12s; }
.ld-nav a:hover { color: #1a2a3a; }
@media (max-width: 768px) {
  .ld-nav { display: none; }
}

/* HERO */
.ld-hero {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}
.ld-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(244,196,71,.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(80,150,200,.12) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.ld-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}
.ld-hero-text { max-width: 580px; }
.ld-hero-sub {
  font-size: 19px;
  color: #5a6878;
  line-height: 1.7;
  margin: 0 0 32px;
}
.ld-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.ld-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: #5a6878;
  font-weight: 600;
}
.ld-trust span { white-space: nowrap; }

.ld-hero-mockup {
  display: flex;
  justify-content: center;
}
.ld-phone {
  /* Slim frame — a hairline 1px dark border, no chunky iPhone bezel or notch */
  width: 320px;
  height: 640px;
  background: #1a1a1a;
  border-radius: 40px;
  padding: 1px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.15);
  position: relative;
}
.ld-phone-screen {
  width: 100%;
  height: 100%;
  background: #faf9f6;
  border-radius: 39px;
  overflow: hidden;
  position: relative;
}
.ld-phone-screen iframe {
  /* The app renders at real phone width (430px) and is scaled down to fit the
     INNER screen, not the phone's outer width. The screen is the phone width
     minus its 12px padding each side: 320-24 = 296px (desktop), 280-24 = 256px
     (mobile, override below). Scale = screen ÷ 430, so nothing is clipped
     horizontally: 296/430 = 0.68837. */
  position: absolute;
  top: 0; left: 0;
  width: 430px;
  height: 860px;
  transform: scale(0.68837);
  transform-origin: top left;
  border: 0;
  display: block;
  /* Visual only — block clicks, scroll, taps inside preview */
  pointer-events: none;
}
/* Transparent overlay above the iframe — catches any stray events
   (and intercepts touch on iOS where pointer-events may not block scroll). */
.ld-phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: default;
}
@media (max-width: 900px) {
  .ld-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .ld-hero-text { margin: 0 auto; }
  .ld-hero-cta { justify-content: center; }
  .ld-trust { justify-content: center; }
  .ld-h1 { font-size: 38px; }
  .ld-phone { width: 280px; height: 560px; }
  .ld-phone-screen iframe { transform: scale(0.59535); } /* inner screen 256/430 */
}
@media (max-width: 480px) {
  .ld-hero { padding: 50px 0 60px; }
  .ld-h1 { font-size: 32px; }
  .ld-h2 { font-size: 28px; }
  .ld-hero-sub { font-size: 16px; }
}

/* STATS */
.ld-stats-bar {
  background: linear-gradient(135deg, #1a2a3a, #2c4a78);
  padding: 36px 0;
  color: #fff;
}
.ld-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.ld-stat b {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: #f4c447;
  letter-spacing: -1px;
  line-height: 1;
}
.ld-stat small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
@media (max-width: 600px) {
  .ld-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 100%; }
  .ld-stat b { font-size: 22px; }
  .ld-stat small { font-size: 10px; margin-top: 4px; }
}

/* SECTIONS */
.ld-section {
  padding: 90px 0;
}
@media (max-width: 600px) {
  .ld-section { padding: 60px 0; }
}
.ld-why { background: transparent; }

/* ===== ROUTE MAP (Claude Design handoff — illustrated 1600×1000 SVG) ===== */
.ld-routemap { background: transparent; padding-top: 40px; }
.rm-card {
  position: relative; /* anchors the .rm-labels overlay */
  background: #ffffff;
  border: 1px solid #f1e4c9;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 50px 120px -50px rgba(120,90,30,0.45);
}
#routeMapSvg { display: block; width: 100%; height: auto; }
/* HTML label layer over the SVG — labels are plain divs positioned in % of
   the card and sized via --rms (see routemap.js txt()); iOS-safe. */
.rm-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* taps fall through to the card (lightbox) */
}
.rm-zoom-hint { display: none; }

/* Cities-in-the-route list under the map — an explicit, scannable version of
   what the map shows visually (Michal). */
/* Spans the same width as the map above (both fill .ld-container) so the two
   read as one block instead of a narrow centered island under a wide map. */
.rm-cities { margin: 34px 0 0; }
.rm-cities-title {
  text-align: center; font-size: 20px; font-weight: 800; color: #1a2a3a;
  margin: 0 0 22px; letter-spacing: -0.3px;
}
/* Each country group carries --acc (accent) + --tint (light fill) inline. */
.rm-cities-group { margin: 0 0 22px; text-align: center; }
.rm-cities-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; color: var(--acc, #5a6878); margin: 0 0 12px;
}
.rm-cities-flag .rm-sym {
  font-size: 20px; line-height: 1;
  display: inline-flex; transition: transform .3s ease;
}
.rm-cities-group:hover .rm-sym { transform: scale(1.15) rotate(-4deg); }
.rm-cities-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.rm-cities-list li {
  background: #fff; border: 1.5px solid var(--tint, #e6dcc4); border-radius: 999px;
  padding: 8px 16px; font-size: 15px; font-weight: 600; color: #2a2418;
  box-shadow: 0 1px 3px rgba(26,42,58,.05);
  cursor: default; user-select: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
/* Interactive: lift + fill with the country accent on hover/tap */
.rm-cities-list li:hover, .rm-cities-list li:active {
  background: var(--acc, #1a2a3a); border-color: var(--acc, #1a2a3a); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(26,42,58,.18);
}
@media (prefers-reduced-motion: reduce) {
  .rm-cities-list li, .rm-cities-flag .rm-sym { transition: none; }
  .rm-cities-list li:hover, .rm-cities-list li:active { transform: none; }
}
@media (max-width: 700px) {
  .rm-cities { margin-top: 22px; }
  .rm-cities-title { font-size: 18px; }
  .rm-cities-list li { font-size: 14px; padding: 7px 14px; }
}
/* On small screens: fit to width (no side-scroll); tap opens a rotated fullscreen view */
@media (max-width: 700px) {
  /* cursor:pointer (not zoom-in) — iOS Safari only delivers click events
     to non-interactive elements that look clickable */
  .rm-card { border-radius: 20px; cursor: pointer; -webkit-tap-highlight-color: rgba(244,196,71,.2); }
  .rm-zoom-hint {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #8a6d1c;
  }
}
/* Fullscreen rotated lightbox (mobile) */
.rm-lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(135deg, #fbf4e6 0%, #fdfaf3 60%, #ffffff 100%);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.rm-lb-inner {
  /* Rotated 90°: the wrapper's width becomes the on-screen height and its
     height (width × 1000/1600) becomes the on-screen width. Fit both:
     width ≤ 96vh (screen height) AND width × 0.625 ≤ 96vw → width ≤ 153.6vw.
     svh (small viewport) instead of vh where supported — on iOS Safari vh
     includes the collapsed URL-bar area, which would overflow the screen. */
  position: relative;
  width: min(96vh, 153vw);
  width: min(96svh, 153vw);
  aspect-ratio: 1600 / 1000;
  transform: rotate(90deg);
  flex: none;
}
.rm-lb-inner svg {
  display: block;
  width: 100%;
  height: auto;
}
.rm-lightbox-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0));
  left: 14px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid #f1e4c9;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  color: #1a2a3a;
  box-shadow: 0 4px 14px rgba(120,90,30,.25);
  cursor: pointer;
  z-index: 2;
}

/* FEATURES */
.ld-features { background: #fff; }
.ld-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.ld-feature {
  background: #faf9f6;
  border: 1px solid #ecedf0;
  border-radius: 22px;
  padding: 24px 22px;
  transition: transform .18s, box-shadow .18s;
}
.ld-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  border-color: #f4c447;
}
.ld-feature-ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff8e0, #ffe9a8);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 14px;
}
.ld-feature h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #1a2a3a;
  line-height: 1.3;
}
.ld-feature p {
  font-size: 13px;
  color: #6a7888;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) { .ld-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ld-features-grid { grid-template-columns: 1fr; } }

/* PREVIEW */
.ld-preview { text-align: center; background: linear-gradient(180deg, #faf9f6 0%, #fff 100%); }
.ld-preview-cta { margin-top: 30px; }

/* PRICING */
.ld-pricing {
  background: linear-gradient(180deg, #fff 0%, #faf9f6 100%);
  text-align: center;
}
/* Pricing grid — 3 cards */
.ld-price-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 18px;
  align-items: stretch;
  margin: 32px auto 0;
  max-width: 1100px;
}
.ld-price-card {
  background: #fff;
  border: 2px solid #ecedf0;
  border-radius: 24px;
  padding: 30px 26px;
  text-align: right;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ld-price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.ld-price-flag {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
}
.ld-price-card.ld-price-featured {
  border: 2.5px solid #f4c447;
  box-shadow: 0 30px 70px rgba(244,196,71,.22), 0 10px 30px rgba(0,0,0,.06);
  transform: translateY(-8px);
  background: linear-gradient(180deg, #fffaf0 0%, #fff 50%);
}
.ld-price-card.ld-price-featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 36px 80px rgba(244,196,71,.28), 0 14px 36px rgba(0,0,0,.08);
}
.ld-price-badge {
  position: absolute;
  top: -14px;
  right: 50%;
  transform: translateX(50%);
  background: #1a2a3a;
  color: #f4c447;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}
.ld-price-card-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ecedf0;
}
.ld-price-card-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #1a2a3a;
}
.ld-price-countries {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #c89000;
  letter-spacing: -0.3px;
  margin-top: 4px;
}
.ld-price-tagline {
  font-size: 13px;
  color: #6a7888;
  font-weight: 500;
}
.ld-price-amount { margin-bottom: 18px; text-align: center; }
.ld-price-num {
  font-size: 56px;
  font-weight: 900;
  color: #1a2a3a;
  letter-spacing: -2px;
  line-height: 1;
}
.ld-price-card.ld-price-featured .ld-price-num { font-size: 64px; }
.ld-price-sub {
  display: block;
  font-size: 12px;
  color: #6a7888;
  font-weight: 600;
  margin-top: 6px;
}
.ld-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid #ecedf0;
  padding-top: 16px;
  flex: 1;
}
.ld-price-features li {
  font-size: 13.5px;
  color: #1a2a3a;
  padding: 6px 0;
  font-weight: 500;
  line-height: 1.5;
}
/* Buy buttons on the single-country cards: outlined pill so they read as
   clearly clickable, matching the featured card's filled CTA. */
.ld-price-card .ld-btn-ghost {
  border: 2px solid #e89e30;
  color: #b3701a;
}
.ld-price-card .ld-btn-ghost:hover {
  background: rgba(232,158,48,.08);
  border-color: #e89e30;
}
/* Responsive — 2 cols then 1 col */
@media (max-width: 980px) {
  .ld-price-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 18px;
  }
  .ld-price-card.ld-price-featured { transform: none; order: -1; }
  .ld-price-card.ld-price-featured:hover { transform: translateY(-3px); }
}
/* Phones: a swipeable carousel instead of a tall vertical stack.
   Featured plan (₪89) shows first; the next card peeks to signal swipe. */
@media (max-width: 768px) {
  .ld-price-grid {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 22px 4px 18px;            /* top room for the "המומלץ" badge */
    scroll-padding-inline: 12px;
  }
  .ld-price-grid::-webkit-scrollbar { display: none; }
  .ld-price-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }
}
.ld-price-note {
  font-size: 11px;
  color: #8a98a8;
  text-align: center;
  margin: 14px 0 0;
}

/* FAQ */
.ld-faq { background: #fff; }
.ld-faq-item {
  background: #faf9f6;
  border: 1px solid #ecedf0;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: all .15s;
}
.ld-faq-item[open] {
  background: #fff8e0;
  border-color: #f4dca0;
  box-shadow: 0 6px 18px rgba(244,196,71,.1);
}
.ld-faq-item summary {
  font-size: 16px;
  font-weight: 700;
  color: #1a2a3a;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ld-faq-item summary::-webkit-details-marker { display: none; }
.ld-faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 900;
  color: #c89000;
  transition: transform .2s;
}
.ld-faq-item[open] summary::after { transform: rotate(45deg); }
.ld-faq-item p {
  margin: 14px 0 0;
  font-size: 14px;
  color: #5a6878;
  line-height: 1.7;
}

/* ABOUT */
.ld-about { background: #faf9f6; text-align: right; }

/* FOOTER */
.ld-footer {
  background: #1a2a3a;
  color: #fff;
  padding: 36px 0;
}
.ld-footer .ld-brand { color: #fff; }
.ld-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.ld-footer p {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin: 0;
}
.ld-footer-nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
}
.ld-footer-nav a {
  color: rgba(255,255,255,.7);
  font-weight: 500;
}
.ld-footer-nav a:hover { color: #f4c447; }

/* Desktop shows the live phone mockup; on mobile we show a light hero photo instead. */
.ld-hero-mobile-pic { display: none; }

/* Live phone inside the "הצצה" section — mobile only (desktop has the hero phone).
   Its iframe src is injected lazily as the section approaches the viewport. */
.ld-preview-phone { display: none; }
@media (max-width: 768px) {
  .ld-preview-phone {
    display: flex;
    justify-content: center;
    margin: 26px 0 22px;
  }
}

/* ============ MOBILE OPTIMIZATIONS ============ */
@media (max-width: 768px) {
  /* Tighter hero — hide phone mockup, simpler layout */
  .ld-hero {
    padding: 36px 0 50px;
  }
  /* The demo is a lightweight static snapshot now, so mobile gets the phone
     mockup right at the top of the hero (the old photo fallback is gone). */
  .ld-hero-mockup {
    display: flex;
    margin-top: 18px;
  }
  .ld-hero-mobile-pic { display: none; }
  .ld-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ld-h1 { font-size: 30px; line-height: 1.1; }
  .ld-h1 em { padding: 0 10px 3px; border-radius: 8px; }
  .ld-h2 { font-size: 24px; }
  .ld-hero-sub { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
  .ld-hero-cta { gap: 8px; flex-direction: column; align-items: stretch; }
  .ld-hero-cta .ld-btn { justify-content: center; }
  .ld-trust {
    gap: 12px;
    font-size: 11px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Header: shrink */
  .ld-header {
    padding-top: max(8px, env(safe-area-inset-top, 0));
  }
  .ld-header .ld-header-inner { padding-top: 16px; padding-bottom: 16px; gap: 10px; }
  .ld-brand { font-size: 18px; }
  .ld-brand img { width: 34px; height: 34px; border-radius: 9px; }
  .ld-btn-sm { padding: 9px 14px; font-size: 13px; }

  /* Sections */
  .ld-section { padding: 50px 0; }
  .ld-container { padding: 0 18px; }
  .ld-eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .ld-lead { font-size: 15px; line-height: 1.65; }

  /* Stats — 3 cols already, just shrink */
  .ld-stats-bar { padding: 24px 0; }
  .ld-stat b { font-size: 26px; }
  .ld-stat small { font-size: 11px; }

  /* Features */
  .ld-features-grid { gap: 12px; margin-top: 26px; }
  .ld-feature { padding: 18px 18px; border-radius: 16px; }
  .ld-feature-ico { width: 44px; height: 44px; font-size: 22px; margin-bottom: 10px; border-radius: 12px; }
  .ld-feature h3 { font-size: 15px; margin-bottom: 4px; }
  .ld-feature p { font-size: 12.5px; }

  /* Price card */
  .ld-price-card {
    margin: 26px auto 0;
    padding: 24px 22px;
    border-radius: 22px;
  }
  .ld-price-num { font-size: 52px; }
  .ld-price-features li { font-size: 13.5px; padding: 6px 0; }
  .ld-btn-lg { padding: 16px 22px; font-size: 16px; }

  /* FAQ */
  .ld-faq-item { padding: 14px 18px; }
  .ld-faq-item summary { font-size: 14px; }
  .ld-faq-item p { font-size: 13px; }

  /* Footer */
  .ld-footer { padding: 26px 0; }
  .ld-footer-inner { flex-direction: column; gap: 14px; text-align: center; }
  .ld-footer-nav { gap: 18px; }
}

/* Sticky mobile bottom CTA */
@media (max-width: 768px) {
  body { padding-bottom: 76px; }
  .ld-mobile-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    z-index: 60;
    display: block;
    box-shadow: 0 -8px 22px rgba(0,0,0,.08);
  }
  .ld-mobile-cta .ld-btn { width: 100%; justify-content: center; padding: 14px; }
}
@media (min-width: 769px) {
  .ld-mobile-cta { display: none; }
}

/* Smaller phone screens */
@media (max-width: 360px) {
  .ld-h1 { font-size: 26px; }
  .ld-h2 { font-size: 22px; }
  .ld-price-num { font-size: 44px; }
}

/* ============================================================== */
/* ============ UI/UX PRO MAX REFINEMENTS ====================== */
/* ============================================================== */

/* Smooth scroll for anchors */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Better focus states (a11y) */
.ld-btn:focus-visible,
.ld-nav a:focus-visible,
.ld-faq-item summary:focus-visible {
  outline: 3px solid #f4c447;
  outline-offset: 3px;
  border-radius: 12px;
}

/* SVG icons in feature cards */
.ld-feature-ico {
  color: #c89000;
}
.ld-feature-ico svg {
  width: 28px;
  height: 28px;
  display: block;
}
.ld-feature:hover .ld-feature-ico { transform: scale(1.08); transition: transform .25s ease; }

/* Cursor pointer on all clickables */
.ld-btn, .ld-faq-item summary, .ld-feature, .ld-price-card, .ld-social-card { cursor: default; }
a.ld-btn, button.ld-btn, .ld-faq-item summary { cursor: pointer; }

/* Count-up animation on stats (when scrolled into view) */
.ld-stat b {
  display: inline-block;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.ld-stats-bar.is-visible .ld-stat b {
  animation: countPop .6s cubic-bezier(.4,0,.2,1) both;
}
@keyframes countPop {
  0% { opacity: 0; transform: translateY(12px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ld-stats-bar.is-visible .ld-stat:nth-child(1) b { animation-delay: 0s; }
.ld-stats-bar.is-visible .ld-stat:nth-child(2) b { animation-delay: 0.08s; }
.ld-stats-bar.is-visible .ld-stat:nth-child(3) b { animation-delay: 0.16s; }
.ld-stats-bar.is-visible .ld-stat:nth-child(4) b { animation-delay: 0.24s; }

/* Subtle entrance for sections */
.ld-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.ld-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Refined header on scroll */
.ld-header {
  transition: box-shadow .2s, background .2s;
}
.ld-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  background: rgba(250,249,246,.98);
}

/* Better hero CTA hover */
.ld-btn-primary { transform: translateY(0); transition: all .2s cubic-bezier(.4,0,.2,1); }
.ld-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(244,196,71,.5);
}
.ld-btn-primary:active { transform: translateY(0) scale(0.97); }

/* Price card "popular" badge — keep clean */
.ld-price-card { transition: transform .25s; }
.ld-price-card:hover { transform: translateY(-2px); }

/* Subtle gradient on stats label */
.ld-stat small { letter-spacing: 0.5px; }

/* ============ GALLERY — "מה תראו לאורך 43 הימים" ============ */
.ld-gallery { background: linear-gradient(180deg, #faf9f6 0%, #fff 100%); }

.ld-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.ld-gallery-item {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: default;
  background: #ecedf0;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1.05), box-shadow .25s;
}
.ld-gallery-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}
.ld-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ld-gallery-item:hover img { transform: scale(1.04); }

/* Soft gradient on the bottom for caption legibility */
.ld-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}
.ld-gallery-item figcaption {
  position: absolute;
  bottom: 14px;
  right: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.ld-gal-tag {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.ld-gal-day {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}

/* Asymmetric layout — first card is tall, two are wide */
.ld-gallery-tall { grid-row: span 2; }
.ld-gallery-wide { grid-column: span 2; }

.ld-gallery-foot {
  text-align: center;
  font-size: 14px;
  color: #6a7888;
  margin: 28px 0 0;
  font-weight: 500;
}

/* Tablet */
@media (max-width: 900px) {
  .ld-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .ld-gallery-tall { grid-row: span 2; }
  .ld-gallery-wide { grid-column: span 2; }
}

/* Mobile */
@media (max-width: 560px) {
  .ld-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    gap: 12px;
  }
  .ld-gallery-tall, .ld-gallery-wide {
    grid-row: auto;
    grid-column: auto;
  }
  .ld-gallery-tall { grid-row: span 1; }
  .ld-gal-tag { font-size: 15px; }
}

/* =========================================================
   PHOTO INTEGRATION — embedded throughout the page
   ========================================================= */

/* HERO — floating polaroid accents around the phone */
.ld-hero-mockup { position: relative; }
.ld-hero-pic {
  position: absolute;
  margin: 0;
  background: #fff;
  padding: 8px 8px 12px;
  border-radius: 4px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.1);
  overflow: hidden;
  z-index: 3;
  transition: transform .4s cubic-bezier(.2,.8,.2,1.05);
  pointer-events: none;
}
.ld-hero-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.ld-hero-pic-1 {
  width: 160px; height: 200px;
  top: -22px; right: -28px;
  transform: rotate(7deg);
}
.ld-hero-pic-2 {
  width: 140px; height: 175px;
  bottom: 30px; left: -36px;
  transform: rotate(-9deg);
}
.ld-hero-mockup:hover .ld-hero-pic-1 { transform: rotate(4deg) translateY(-4px); }
.ld-hero-mockup:hover .ld-hero-pic-2 { transform: rotate(-6deg) translateY(-4px); }
@media (max-width: 900px) {
  .ld-hero-pic-1 { width: 120px; height: 150px; right: -10px; top: -10px; }
  .ld-hero-pic-2 { width: 110px; height: 140px; left: -10px; bottom: 40px; }
}
@media (max-width: 480px) {
  .ld-hero-pic { display: none; }
}

/* PRICING CARDS — photo banner at the top of each card.
   We DO NOT set overflow:hidden on the card itself (the .ld-price-badge sits
   at top: -14px and would get clipped). Instead the photo rounds its top
   corners to match the card and clips itself. */
.ld-price-photo {
  height: 140px;
  margin: -30px -26px 18px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.ld-price-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, #fff 100%);
}
.ld-price-featured .ld-price-photo {
  height: 160px;
  margin-bottom: 12px;
}
.ld-price-featured .ld-price-photo::after {
  background: linear-gradient(180deg, transparent 30%, #fffaf0 100%);
}
/* Re-style the flag emoji as a circular medallion floating over the photo */
.ld-price-card .ld-price-flag {
  position: relative;
  z-index: 2;
  margin-top: -50px;
  margin-bottom: 14px;
  background: #fff;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.18);
}
.ld-price-featured .ld-price-flag {
  background: #fffaf0;
  border: 2px solid #f4c447;
}

/* ABOUT SECTION — text + 3 polaroid grid */
.ld-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ld-about-text { max-width: 560px; }
.ld-about-pics {
  position: relative;
  height: 480px;
}
.ld-about-pic-main {
  width: 240px; height: 320px;
  top: 60px;
  right: 50%;
  transform: translateX(50%) rotate(-2deg);
  z-index: 5;
  background: #fff;
}
.ld-about-pic-main:hover {
  transform: translateX(50%) rotate(0) scale(1.04);
}
.ld-about-pic {
  position: absolute;
  margin: 0;
  background: #fff;
  padding: 10px 10px 14px;
  border-radius: 4px;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1.05), box-shadow .25s;
}
.ld-about-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.ld-about-pic-1 {
  width: 180px; height: 220px;
  top: 0; right: 0;
  transform: rotate(-6deg);
  z-index: 1;
}
.ld-about-pic-2 {
  width: 170px; height: 200px;
  top: 30px; left: 0;
  transform: rotate(6deg);
  z-index: 2;
}
.ld-about-pic-3 {
  width: 160px; height: 190px;
  bottom: 0; right: 20px;
  transform: rotate(-4deg);
  z-index: 3;
}
.ld-about-pic:hover {
  transform: rotate(0) scale(1.04);
  box-shadow: 0 28px 50px -10px rgba(0,0,0,.28);
  z-index: 10;
}
@media (max-width: 900px) {
  .ld-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ld-about-pics {
    height: 420px;
    max-width: 480px;
    margin: 0 auto;
  }
  .ld-about-pic-main { width: 220px; height: 290px; top: 40px; }
  .ld-about-pic-1 { width: 160px; height: 200px; }
  .ld-about-pic-2 { width: 150px; height: 180px; }
  .ld-about-pic-3 { width: 140px; height: 165px; }
}
@media (max-width: 560px) {
  .ld-about-pics { height: 380px; }
  .ld-about-pic-main { width: 190px; height: 250px; top: 30px; }
  .ld-about-pic-1 { width: 130px; height: 165px; right: 0; }
  .ld-about-pic-2 { width: 125px; height: 150px; left: 0; top: 20px; }
  .ld-about-pic-3 { width: 120px; height: 140px; right: 10px; bottom: 0; }
}

/* Static demo snapshot inside the phone mockups — replaces the live iframe */
.ld-phone-screen .demo-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ===== 2026-07-13 batch: Michal's landing notes ===== */

/* Pricing headline on phones: the highlighted part drops to its own line */
@media (max-width: 768px) {
  .ld-pricing .ld-h2 em {
    display: block;
    width: fit-content;
    margin: 8px auto 0;
  }
}

/* Pricing cards carousel: bleed to the screen edges */
@media (max-width: 768px) {
  .ld-price-grid {
    margin-inline: -18px;
    padding-inline: 18px;
  }
}

/* Card photos read sharper — the white fade starts lower */
.ld-price-photo::after {
  background: linear-gradient(180deg, transparent 62%, #fff 100%);
}

/* Flags: slightly larger, crisper ring against the busy photo */
.ld-price-card .ld-price-flag {
  font-size: 34px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .28);
}