/* ==========================================================================
   Nativ Finansim — Hero
   Build stamp + color contract: see comment block in index.html <body>.
   Font: Assistant (single family / weight-scale roles — non-Latin-script
   model; matches the client's existing site). Accent phrase: Gveret Levin.
   Spacing/type scale: Tailwind-equivalent steps, per landing-page-design B1/B2.
   ========================================================================== */

:root{
  /* brand (sampled from client swatch, verified) */
  --bg:      #FAFAFA;
  --surface: #FFFFFF;
  --purple:  #605BE5;
  --purple-600: #4F49D6;
  --orange:  #FD9F01;
  --orange-600: #E58F00;

  /* text */
  --ink:      #16151F;
  --ink-soft: #4B4A57;
  --ink-mute: #6B6A76;

  --border: rgba(22,21,31,.08);
  --purple-tint: #EDECFC;

  /* spacing scale (12-step, landing-page-design B2) */
  --sp-25:2px; --sp-50:4px; --sp-75:8px; --sp-100:12px; --sp-200:16px;
  --sp-300:24px; --sp-400:32px; --sp-500:40px; --sp-600:48px;
  --sp-700:64px; --sp-800:80px; --sp-900:96px;

  --ease: cubic-bezier(0.32,0.72,0,1);
  --font: "Assistant", -apple-system, "Segoe UI", system-ui, sans-serif; /* matches the client's existing site (nativ-fin.co.il uses Assistant site-wide) */
  --font-accent: "Gveret Levin", var(--font); /* hand-written accent, explicitly requested for the hero's second line */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:96px; } /* scroll-padding-top keeps
  anchor jumps (#about etc, fired from the sticky header) clear of the pill — bumped under the
  nav's wrap breakpoint below.
  overflow-x:CLIP, not hidden: `hidden` forces the other axis to compute as `auto`, turning
  html/body into scroll containers — which breaks `position:sticky` on .site-nav (it would
  resolve against a non-scrolling <body> box and just scroll away). `clip` still clips the
  horizontal overflow a rotating/blurred decorative element (e.g. .podcast-glow) can produce,
  without creating a scroll container, so sticky keeps working. */

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

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

/* Hebrew text: no aggressive negative tracking, no italics (per skill + non-Latin guidance) */
em{
  font-style:normal; /* skill forbids italics; Gveret Levin is a script face, not a slant */
  font-family:var(--font-accent);
  color:var(--purple);
  font-weight:400; /* Gveret Levin ships one weight — forcing 700 would synthetically fake-bold a script face */
  font-size:1.18em; /* script glyphs read smaller than sans at the same nominal size */
}

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

/* bidi isolation for embedded LTR runs — phone numbers (pure digits+hyphens,
   direction:ltr is correct and needed there). */
.ltr-num{ unicode-bidi:isolate; direction:ltr; display:inline-block; }

/* Digit-only isolation for numbers followed by Hebrew words (e.g. "450 מיליון
   ש״ח"). Empirically verified (scripts/bidi test, three renders compared):
   forcing direction:ltr on the WHOLE phrase — fine for a single symbol like
   ₪ — scrambles the order of two adjacent Hebrew words ("ש״ח" ends up before
   "מיליון"). Isolating only the digit run and letting the Hebrew text flow
   naturally gives the correct "450 מיליון ש״ח" reading order every time. */
.num-isolate{ unicode-bidi:isolate; display:inline-block; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Ambient ground: flat background + two soft drifting radial blobs (canvas)
   + very-low-opacity outline triangles echoing the logo mark.
   Honest substitute for a licensed video loop — real motion, zero asset cost.
   ========================================================================== */
.bg-field{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
#bgCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.bg-tris{ position:absolute; inset:0; width:100%; height:100%; }
.bg-tris polygon{ fill:none; stroke:var(--purple); stroke-width:1.5; opacity:.06; }
.bg-tris polygon:nth-child(2){ stroke:var(--orange); opacity:.08; }
.bg-tris polygon:nth-child(3){ stroke:var(--purple); opacity:.05; }

/* ==========================================================================
   Nav — quiet, floating, does not compete with the hero CTA (hero-guidelines)
   ========================================================================== */
.nav-sentinel{ height:0; }
.site-nav{
  position:sticky; top:0; z-index:50;
  padding:var(--sp-200) var(--sp-300) 0; /* constant small gap — the pill floats the same at rest and stuck */
}
.nav-inner{
  position:relative; /* hosts the ::after stuck-shadow layer + the mobile dropdown */
  max-width:1320px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-200);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:999px;
  padding:var(--sp-100) var(--sp-200);
  transition:background .35s var(--ease); /* colour only — the elevation is an opacity-faded
    ::after layer (same pattern as .cta-btn::after), never an animated box-shadow */
}
.nav-inner::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 10px 30px -14px rgba(22,21,31,.28);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.site-nav.is-stuck .nav-inner{ background:rgba(255,255,255,.92); }
.site-nav.is-stuck .nav-inner::after{ opacity:1; }

.nav-brand{
  display:flex; align-items:center; gap:var(--sp-100);
  flex:none;
}
.nav-brand-icon{ width:auto; height:34px; } /* transparent PNG of the pyramid mark */
.nav-brand-wordmark{ width:auto; height:26px; } /* transparent PNG of the real "נתיב פיננסים"
  lockup (name + tagline), in the brand's own lettering — not a substitute font */
@media (min-width:560px){
  .nav-brand-icon{ height:38px; }
  .nav-brand-wordmark{ height:30px; }
}

/* Hamburger — hidden on desktop, shown once the nav collapses (media query below). */
.nav-toggle{
  display:none;
  width:40px; height:40px; flex:none;
  align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--ink); border-radius:999px;
}
.nav-toggle:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.nav-toggle-bars{ position:relative; width:20px; height:14px; }
.nav-toggle-bars span{
  position:absolute; inset-inline:0; top:6px; height:2px;
  background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease); /* transform-only morph, no layout */
}
.nav-toggle-bars span:nth-child(1){ transform:translateY(-6px); }
.nav-toggle-bars span:nth-child(3){ transform:translateY(6px); }
.site-nav.menu-open .nav-toggle-bars span:nth-child(1){ transform:rotate(45deg); }
.site-nav.menu-open .nav-toggle-bars span:nth-child(2){ opacity:0; }
.site-nav.menu-open .nav-toggle-bars span:nth-child(3){ transform:rotate(-45deg); }

/* Desktop: the wrapper dissolves so links + actions become direct flex items
   of .nav-inner (brand at the start edge, links centred, actions at the end). */
.nav-collapse{ display:contents; }

.nav-links{ display:flex; align-items:center; gap:var(--sp-50); min-width:0; }
.nav-link{
  padding:var(--sp-75) var(--sp-100);
  font-size:.9375rem; font-weight:600;
  color:var(--ink-soft);
  border-radius:999px;
  white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{ color:var(--ink); background:var(--purple-tint); }
}
.nav-link:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.nav-link.is-current{ color:var(--purple); background:var(--purple-tint); }
@media (min-width:1280px){ .nav-links{ flex:0 1 auto; justify-content:center; } }

.nav-actions{ display:flex; align-items:center; gap:var(--sp-100); flex:none; }

.nav-phone{
  display:flex; align-items:center; gap:var(--sp-75);
  background:var(--ink); color:var(--surface);
  padding:var(--sp-75) var(--sp-200);
  border-radius:999px;
  font-size:.875rem; font-weight:600;
  white-space:nowrap;
  transition:background .5s var(--ease); /* marketing-hero timing, not app-UI — earned per audit_motion's own carve-out */
}
@media (hover: hover) and (pointer: fine){
  .nav-phone:hover{ background:var(--purple); }
}
.nav-phone:active{ transform:scale(.97); }
.nav-phone:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.nav-phone .icon{ width:16px; height:16px; flex:none; }

/* Header CTA — always visible alongside the phone (both buttons, from the top). */
.nav-cta{
  display:flex;
  align-items:center; justify-content:center;
  background:var(--orange); color:var(--ink);
  padding:var(--sp-75) var(--sp-200);
  border-radius:999px;
  font-size:.875rem; font-weight:700;
  white-space:nowrap;
  transition:background .3s var(--ease), transform .15s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{ background:var(--orange-600); }
}
.nav-cta:active{ transform:scale(.97); }
.nav-cta:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }

/* Desktop: the whole pill scales up a notch — the buttons and CTA were hard to
   read at the mobile-first sizes once they all sit inline together.
   Breakpoint raised from 900px to 1280px: at the old 900px threshold the
   5 nav-links + brand + phone + CTA didn't actually fit at their bumped-up
   desktop sizes, and with nothing able to wrap, the links row silently
   overflowed its own shrunk flex box and overlapped the logo — invisible
   in isolated dev testing, only visible once real nav item text was long
   enough. 1280px leaves >100px of margin past where that overlap starts. */
@media (min-width:1280px){
  html{ scroll-padding-top:112px; }
  .nav-inner{ gap:var(--sp-300); padding:var(--sp-100) var(--sp-300); }
  .nav-brand{ gap:var(--sp-200); }
  .nav-brand-icon{ height:46px; }
  .nav-brand-wordmark{ height:37px; }
  .nav-link{ font-size:1rem; padding:var(--sp-100) var(--sp-200); }
  .nav-phone{ font-size:1rem; padding:var(--sp-100) var(--sp-300); }
  .nav-phone .icon{ width:18px; height:18px; }
  .nav-cta{ font-size:1rem; padding:var(--sp-100) var(--sp-300); }
}

/* ---- Mobile / tablet: links + actions collapse into a hamburger dropdown ---- */
@media (max-width:1279px){
  html{ scroll-padding-top:92px; }
  .nav-toggle{ display:flex; }
  .nav-collapse{
    display:flex; flex-direction:column; gap:var(--sp-100);
    position:absolute;
    top:calc(100% + var(--sp-75)); inset-inline:0;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
    border:1px solid var(--border);
    border-radius:20px;
    padding:var(--sp-200);
    box-shadow:0 24px 48px -18px rgba(22,21,31,.32);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .site-nav.menu-open .nav-collapse{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-collapse .nav-links{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-collapse .nav-link{ padding:var(--sp-200); font-size:1rem; border-radius:12px; }
  .nav-collapse .nav-actions{
    flex-direction:column; align-items:stretch; gap:var(--sp-100);
    margin-top:var(--sp-75); padding-top:var(--sp-200);
    border-top:1px solid var(--border);
  }
  .nav-collapse .nav-phone,
  .nav-collapse .nav-cta{
    display:flex; justify-content:center; width:100%;
    padding:var(--sp-200); font-size:1rem;
  }

  /* Once the page scrolls, the floating pill becomes a full-bleed bar: edge to
     edge, flush with the top, a touch taller and fully opaque — so nothing
     shows in the gaps around it any more. Snaps rather than eases (it crosses
     the threshold once, fast) while the background/shadow already fade in. */
  .site-nav.is-stuck{ padding:0; }
  .site-nav.is-stuck .nav-inner{
    max-width:none;
    border-inline:none; border-top:none;
    border-radius:0 0 18px 18px;
    padding:var(--sp-200) var(--sp-300);
    background:var(--surface);
  }
}

/* ==========================================================================
   Hero layout
   DOM order text-then-media = correct RTL flex order (first child = right)
   and correct mobile stack order (text first) with zero extra rules.
   ========================================================================== */
.hero{
  position:relative; z-index:1;
  padding:var(--sp-600) var(--sp-300) var(--sp-900);
}
.hero-inner{
  max-width:1320px; margin-inline:auto;
  display:flex; flex-direction:column; /* mobile: text first (DOM order), media second */
  gap:var(--sp-700);
}
@media (min-width:960px){
  .hero-inner{
    flex-direction:row;
    align-items:center;
    gap:var(--sp-800);
  }
  .hero-text{ flex:1 1 55%; }
  .hero-form{ flex:1 1 45%; }
}

.hero-text{ max-width:680px; }

.hero-h1{
  margin:0 0 var(--sp-300);
  max-width:100%;
  font-weight:800;
  font-size:clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  line-height:1.18;
  letter-spacing:0;
  color:var(--ink);
  text-wrap:balance;
  overflow-wrap:anywhere; /* hard safety net: the Gveret Levin run must never be able to push a line past its box, at any viewport or font-load timing */
}
.hero-h1 .line{ max-width:100%; display:block; overflow:hidden; }
.hero-h1 .line span{ display:block; transform:translateY(110%); }
.hero-h1 .line-main{ text-wrap:balance; } /* auto-wraps to however many lines it naturally needs — no manual per-word breaks */
.hero-h1 .line-accent{
  display:block;
  overflow:visible; /* deliberately NOT part of the .line mask system — a script face's real
    glyph bounds aren't fully predictable across browsers/font-loading, so instead of tuning
    padding to out-guess an overflow:hidden box (tried, still clipped the lamed in "להמשיך" for
    some viewers), this line reveals with a plain fade (see [data-reveal] + js/hero.js) that
    has no clipping box to escape at all. */
  margin-top:var(--sp-200); /* a real gap below the main line, not sharing a line with it */
  line-height:1.35; /* tighter now that overflow:visible removes any clipping risk — 1.7 was sized for the old clipping fix, no longer needed */
}
@media (min-width:960px){
  .hero-h1 .line-accent{ padding-inline-start:var(--sp-400); } /* nudged left, away from the screen's right edge — desktop only */
}
@media (max-width:959px){
  .hero-h1{ text-align:center; }
  /* mobile: every supporting paragraph centers to match the headline —
     chips are the one deliberate exception (see .hero-chips below): the
     PILL moves to center, but text inside it stays right-aligned RTL */
  .hero-sub, .hero-lead{
    text-align:center;
    margin-inline:auto;
  }
  .hero-chips{ align-items:center; }
  .chip{ background:#DEDCFA; } /* client feedback: the pale desktop tint read as almost
    invisible on phone screens — same color role, bumped saturation for mobile only */
  .cta-btn{ margin-inline:auto; } /* the button itself is width:88% — without this it sat
    flush to one side (RTL default), same class of miss the founder CTA already had fixed */
  .hero{ padding-bottom:var(--sp-600); } /* base --sp-900 (96px) was sized for desktop and had
    no mobile override; stacked with .proof's own top padding it read as a large dead void
    between the trust-bar numbers and the section 2 tagline */
}

.hero-sub{
  margin:0 0 var(--sp-100);
  font-size:clamp(1.125rem, 1rem + .5vw, 1.5rem);
  line-height:1.5;
  font-weight:600;
  color:var(--ink);
  max-width:680px;
}

.hero-lead{
  margin:0 0 var(--sp-300);
  font-size:1.125rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:620px;
}

.hero-chips{
  list-style:none; margin:0 0 var(--sp-400); padding:0;
  display:flex; flex-direction:column; gap:var(--sp-100);
}
.chip{
  display:flex; align-items:center; gap:var(--sp-100);
  background:var(--purple-tint);
  border-radius:999px;
  padding:var(--sp-75) var(--sp-200) var(--sp-75) var(--sp-75);
  font-size:.9375rem; font-weight:600;
  color:var(--ink);
  width:fit-content;
  max-width:100%;
}
.chip-icon{
  flex:none;
  width:24px; height:24px;
  border-radius:999px;
  background:var(--surface);
  color:var(--purple);
  display:flex; align-items:center; justify-content:center;
}
.chip-icon svg{ width:14px; height:14px; }

.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-75);
  width:88%; max-width:400px; /* prominent but a touch narrower than the question line above it */
  background:var(--orange); color:var(--ink);
  font-size:1.0625rem; font-weight:700;
  padding:var(--sp-200) var(--sp-300);
  border-radius:999px;
  border:none; cursor:pointer;
  transition:background .5s var(--ease), transform .15s var(--ease); /* box-shadow dropped from transition: layout-adjacent property, animate via opacity below instead */
  box-shadow:0 1px 2px rgba(22,21,31,.08);
  position:relative;
}
.cta-btn::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 8px 24px -8px rgba(253,159,1,.55);
  opacity:0;
  transition:opacity .5s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .cta-btn:hover{ background:var(--orange-600); }
  .cta-btn:hover::after{ opacity:1; }
}
.cta-btn:active{ transform:scale(.98); }
.cta-btn:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; }
.cta-btn .icon{ width:18px; height:18px; } /* path already points left = "forward" in RTL reading direction */


/* ==========================================================================
   Trust bar — full-width stat strip below the hero columns (not squeezed
   into the text column). One proof signal, but given room to read as one.
   ========================================================================== */
.trust-bar{
  max-width:1320px; margin-inline:auto;
  margin-top:var(--sp-800);
  padding-top:var(--sp-500);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.trust-bar .trust-item{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-50);
  text-align:center;
  padding-inline:var(--sp-200);
}
.trust-bar .trust-item + .trust-item{
  border-inline-start:1px solid var(--border);
}
.trust-bar .trust-num,
.trust-bar .trust-num-wrap{
  font-size:clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* sized to fit "450 מיליון ש״ח" on one line without breaking */
  font-weight:800;
  color:var(--purple);
  line-height:1.15;
  white-space:nowrap;
}
.trust-bar .trust-label{
  font-size:.9375rem;
  color:var(--ink-mute);
  font-weight:600;
}
@media (max-width:640px){
  .trust-bar{ grid-template-columns:1fr; gap:var(--sp-400); margin-top:var(--sp-400); padding-top:var(--sp-300); }
  .trust-bar .trust-item + .trust-item{ border-inline-start:none; border-top:1px solid var(--border); padding-top:var(--sp-300); }
  .trust-bar .trust-num,
  .trust-bar .trust-num-wrap{ font-size:2.25rem; } /* stacked single-column layout has room the
    3-up grid didn't, so the clamp's mobile-width floor no longer has to apply here */
}

/* Full-bleed dark numbers band right under the hero (client mockup, Oct 2026).
   Same --ink as .stories / the founder points band; numbers flip to --bg. */
.stats-band{
  position:relative; z-index:1;
  background:var(--ink);
  padding:var(--sp-700) var(--sp-300);
}
.stats-band .trust-bar{
  max-width:920px;
  margin:0 auto; padding:0; border:none;
  gap:var(--sp-200);
}
.stats-band .trust-bar .trust-item + .trust-item{ border-inline-start-color:rgba(255,255,255,.14); }
.stats-band .trust-bar .trust-num,
.stats-band .trust-bar .trust-num-wrap{ color:var(--bg); }
.stats-band .trust-bar .trust-label{ color:#A5A3B0; } /* same muted-on-ink tone as .story-desc */
@media (min-width:960px){
  .stats-band .trust-bar .trust-num,
  .stats-band .trust-bar .trust-num-wrap{ font-size:3rem; }
}
@media (max-width:640px){
  .stats-band{ padding:var(--sp-600) var(--sp-300); }
  .stats-band .trust-bar{ gap:var(--sp-400); }
  .stats-band .trust-bar .trust-item + .trust-item{ border-top-color:rgba(255,255,255,.14); }
}

/* ==========================================================================
   Media card — vertical 9:16 video, single proof visual
   ========================================================================== */
/* .media-wrap is exactly the card's width (fit-content), so .media-hint's
   inset-inline-start offset is always measured from the card edge, at every
   viewport — no per-breakpoint repositioning needed. */
.media-wrap{ position:relative; width:fit-content; margin-inline:auto; }

/* Hand-drawn "click me" hint — points at the play button, fades away once
   playback actually starts (per B7: motion should reveal, not linger). */
.media-hint{
  position:absolute;
  top:-34px; inset-inline-start:-38px; /* nudged further right — arrow now clears the dark video frame instead of losing contrast over it */
  z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  color:var(--purple);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.media-hint.is-hidden{ opacity:0; transform:translateY(-6px); pointer-events:none; }
.media-hint-label{
  font-size:1.0625rem; font-weight:700;
  transform:rotate(-4deg);
  white-space:nowrap;
  margin-inline-start:6px;
}
.media-hint-arrow{
  width:64px; height:auto;
  /* hint sits at the card's top inline-start corner (physical top-right, since
     card sits in its own column); path already curves from there
     down into the card toward the play button — no mirroring needed. */
}
@media (max-width:420px){
  /* Push the hint OUT past the card's right edge so the dashed arrow reads
     against the page, not against the dark video — while leaving a safe
     viewport margin: at 320px the card ends ~35px from the edge, so a 26px
     outward offset still keeps ~9px clear. */
  .media-hint{ top:-30px; inset-inline-start:-26px; }
  .media-hint-label{ font-size:.9375rem; }
  .media-hint-arrow{ width:48px; }
}

@keyframes hint-bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}
.media-hint:not(.is-hidden){ animation:hint-bob 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .media-hint{ animation:none !important; }
}

.media-card{
  position:relative;
  width:min(340px, 78vw);
  aspect-ratio:9/16;
  border-radius:28px;
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 30px 60px -20px rgba(22,21,31,.28), 0 1px 1px rgba(22,21,31,.06);
  border:1px solid var(--border);
}
.media-video{
  width:100%; height:100%; object-fit:cover; display:block; background:var(--ink);
}
.media-play{
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:none; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.media-play svg{ width:26px; height:26px; margin-inline-start:3px; } /* optical centering of play triangle */
@media (hover: hover) and (pointer: fine){
  .media-play:hover{ transform:scale(1.06); background:var(--surface); }
}
.media-play:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.media-play.is-hidden{ opacity:0; pointer-events:none; transform:scale(.9); }

.media-caption{
  position:absolute; inset-inline:0; bottom:0;
  padding:var(--sp-300) var(--sp-200) var(--sp-200);
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  display:flex; flex-direction:column; gap:2px;
  color:#fff;
  pointer-events:none;
}
.media-caption-name{ font-weight:700; font-size:.9375rem; }
.media-caption-role{ font-size:.8125rem; opacity:.85; }

/* YouTube player, swapped in on click (js/hero.js wireVideoCard) — covers the
   poster image + caption at full size so the visitor gets the native player
   with its own pause / fullscreen / scrubber controls. */
.media-embed{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:none; display:block;
  z-index:3;
}

/* ==========================================================================
   Section 2 — proof / tagline reveal (landing-page-design B11) + partner
   logo marquee. Symmetric, centered, full-bleed marquee — deliberately the
   opposite rhythm of the hero's left-dominant asymmetric split, so the two
   sections read as one considered page rather than a repeated template.
   ========================================================================== */
/* Shape divider — the flat seam between hero and section 2 gets a real cut
   instead of a straight edge. Filled with the same tint .proof uses, so it
   reads as one continuous shape rather than a decorative sliver. */
.shape-divider{
  display:block; width:100%; height:56px;
  position:relative; z-index:1;
  margin-bottom:-1px; /* close any subpixel seam with .proof below */
}
.shape-divider path{ fill:var(--purple-tint); }
@media (min-width:960px){
  .shape-divider{ height:72px; }
}

.proof{
  position:relative; z-index:1; overflow:hidden;
  background:var(--purple-tint); /* flat surface, distinct from the hero's ambient bg (B4: no gradient backgrounds) */
  padding:var(--sp-500) var(--sp-300) var(--sp-500); /* base (mobile) top trimmed from --sp-900 —
    that value was meant for desktop only and had never been scoped out of the shared base rule */
}
@media (max-width:520px){
  .proof{ padding-bottom:var(--sp-400); } /* the panel's own margin-top already carries most of the
    gap on narrow screens; stacking full desktop-scale spacing on both sides read as a big void */
}
@media (min-width:960px){
  .proof{ padding-top:var(--sp-500); padding-bottom:var(--sp-800); } /* raised — desktop only, per request */
}
.proof-inner{
  position:relative;
  max-width:720px; margin-inline:auto;
  text-align:center;
}

/* Large illustrated bulb, off to the side — desktop only (needs real side
   margin to sit in; below that width it would collide with the centered
   text, so it steps aside rather than shrinking into another cute icon). */
.proof-bulb{
  display:none;
  width:150px; height:auto;
}
@media (min-width:1200px){
  .proof-bulb{
    display:block;
    position:absolute;
    top:88px; inset-inline-start:-26%; /* px anchor (proof padding-top is fixed here) —
      centred low enough (via GSAP yPercent:-50 in idleFloatBulb) that its base tucks
      a little behind the logo panel, with headroom above for the float */
  }
}
.bulb-glow{ fill:var(--orange); opacity:.22; filter:blur(16px); }
.bulb-rays line{ stroke:var(--orange); stroke-width:4; stroke-linecap:round; opacity:.6; }
.bulb-glass{ fill:rgba(253,159,1,.14); stroke:var(--purple); stroke-width:4; stroke-linejoin:round; }
.bulb-filament{ fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; }
.bulb-base{ fill:var(--ink); opacity:.82; }
.bulb-base-line{ fill:none; stroke:var(--purple-tint); stroke-width:2; }

.proof-tagline{
  margin:0;
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* same scale as every other section heading */
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  text-wrap:balance;
}
.tw-break{ display:none; } /* the two sentences flow together and text-wrap:balance
  evens the lines; the manual break only comes back on wide screens where it
  makes a clean two-line lockup */
@media (min-width:600px){ .tw-break{ display:inline; } }
.tword{ color:var(--ink); } /* fallback: fully legible if JS never runs */
.js .tword{
  color:rgba(22,21,31,.28);
  transition:color .5s var(--ease);
}

/* ---- partner logo marquee — bounded panel, drag + auto-scroll (js/hero.js) ---- */
.logos-panel{
  position:relative;
  max-width:1120px; margin:var(--sp-700) auto 0;
  padding-block:var(--sp-300);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:0 24px 48px -28px rgba(22,21,31,.16);
}
.logos-marquee{
  position:relative;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  touch-action:pan-y; /* a vertical swipe over the strip still scrolls the page */
}
.logos-marquee.dragging{ cursor:grabbing; }
.logos-track{
  display:flex; align-items:center; gap:var(--sp-600);
  width:max-content;
  will-change:transform;
  backface-visibility:hidden;
}
.logos-set{
  display:flex; align-items:center; gap:var(--sp-600);
  flex-shrink:0;
}
.logo-chip{
  flex:0 0 auto;
  width:140px; height:56px;
  display:flex; align-items:center; justify-content:center;
  opacity:.7;
  transition:opacity .3s var(--ease);
}
.logo-chip img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; -webkit-user-drag:none; pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .logo-chip:hover{ opacity:1; }
}
.logos-fade{
  position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.logos-fade-start{ inset-inline-start:0; background:linear-gradient(to left, var(--surface), transparent); }
.logos-fade-end{ inset-inline-end:0; background:linear-gradient(to right, var(--surface), transparent); }
@media (max-width:520px){
  .logos-fade{ width:48px; }
  .logo-chip{ width:110px; height:46px; }
  .logos-panel{ border-radius:20px; margin-top:var(--sp-400); } /* was sp-700 (64px) — too much void on a narrow screen */
}

/* ==========================================================================
   Section 3 — founder / about. Shares section 2's flat tint with no seam
   between them — the "clean, elegant connection" the brief asked for; the
   one divider on the page lives between the hero and section 2, not here.
   DOM order is photo-then-copy, so the photo lands on the RTL-start side
   (right) and copy on the end side (left) — the mirror of the hero's
   text-first/media-second order: a third distinct rhythm for the page.
   ========================================================================== */
.founder{
  position:relative; z-index:1;
  background:var(--purple-tint);
  padding:var(--sp-800) var(--sp-300) var(--sp-900);
}
@media (max-width:959px){
  .founder{ padding-top:var(--sp-600); padding-bottom:var(--sp-600); } /* base top/bottom (80/96)
    was sized for desktop and never scoped down — stacked with the section 3→4 divider's own
    height it read as an oversized void on mobile, same class of miss already fixed on .hero/.proof */
}
.founder-inner{
  max-width:1200px; margin-inline:auto;
  display:flex; flex-direction:column;
  gap:var(--sp-700);
}
@media (min-width:960px){
  .founder-inner{
    flex-direction:row;
    align-items:center;
    gap:var(--sp-900);
  }
  .founder-media{ flex:0 0 38%; }
  .founder-copy{ flex:1 1 auto; }
}

/* Alon's video card (moved here from the hero, Oct 2026) — same .media-wrap /
   .media-card / .media-hint styling the hero used. */
.founder-media{ display:flex; justify-content:center; }

.founder-copy{ max-width:640px; }
.founder-open{
  position:relative;
  margin:0 0 var(--sp-300);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight:800;
  color:var(--ink); /* not --purple: fails contrast on this tint (4.36:1, documented) */
  width:fit-content;
}
.founder-quote{
  position:absolute;
  top:-.35em; inset-inline-start:-.2em;
  font-size:3.2em;
  font-weight:800;
  color:var(--purple);
  opacity:.18; /* purely decorative, aria-hidden — not held to text contrast */
  line-height:1;
  z-index:0;
  pointer-events:none;
}

.founder-body{
  position:relative; z-index:1;
  margin:0 0 var(--sp-300);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:600px;
}
.founder-body-lead{ color:var(--ink); font-weight:600; }
.founder-body-strong{ color:var(--ink); font-weight:700; }

.founder-cta{ width:auto; max-width:none; margin-top:var(--sp-200); }

@media (max-width:959px){
  .founder-copy{ max-width:100%; text-align:center; margin-inline:auto; }
  .founder-open{ margin-inline:auto; }
  .founder-body{ margin-inline:auto; }
  .founder-cta{ width:88%; max-width:400px; margin-inline:auto; }
}

/* Full-width 3-up "how we work" row — opens the section, above the photo+copy
   grid: the first thing you see under the logos strip, before you even reach
   Alon's photo. Reuses the trust-bar's grid/collapse pattern. Sits on its own
   full-bleed --ink band (the same near-black already used for .stories'
   dark surface elsewhere on the page) — deliberately its own dark section,
   not just a tinted card floating in .founder's pale purple background. The
   icon badge goes back to the white-circle+purple-icon language every other
   chip/badge on the page already uses, now read against that dark band. */
.founder-points-band{
  background:var(--ink);
  /* Full-bleed by cancelling .founder's own known, fixed inline padding
     (var(--sp-300) each side) rather than a width:100vw + margin/transform
     trick — those depend on vw vs. layout-viewport width, which disagree by
     the scrollbar's width, and on an RTL page (direction:rtl) an explicit
     physical margin-left is *silently recalculated* by the browser per
     CSS2.1 §10.3.3's over-constrained rule, so the first two things tried
     here both landed the band tens to hundreds of px off-position. Logical
     margin-inline/padding-inline with one equal value on both sides has
     neither problem. */
  margin-inline:calc(-1 * var(--sp-300));
  margin-bottom:var(--sp-800);
  padding:var(--sp-700) var(--sp-300);
}
.founder-points{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-500);
}
.founder-point{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-100);
  text-align:center;
}
.founder-point-icon{
  width:72px; height:72px; margin-bottom:var(--sp-100);
  border-radius:999px;
  background:var(--surface); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.4);
}
.founder-point-icon svg{ width:34px; height:34px; }
.founder-point-title{
  margin:0; font-size:1.125rem; font-weight:800; color:var(--bg);
}
.founder-point-body{
  margin:0; max-width:300px;
  font-size:1rem; line-height:1.6;
  color:#A5A3B0; /* same muted-on-dark body tone as .story-desc, for the same reason */
}
.founder-point-body strong{ color:var(--orange); font-weight:700; } /* orange, not purple:
  the established accent-on-dark color on this page (see .story-quote's quote marks) —
  purple reads fine on light backgrounds but is the weaker of the two against --ink */
@media (max-width:959px){
  .founder-points-band{ margin-bottom:var(--sp-600); padding:var(--sp-500) var(--sp-300); }
  .founder-points{
    grid-template-columns:1fr; gap:var(--sp-400);
  }
}

/* ==========================================================================
   Section 4 — client stories / video testimonials. Dark surface (a real,
   deliberate departure from every pale section before it — video content
   reads best against dark), so the divider here needs an actual visible
   seam, unlike section 2→3's shared, unbroken purple-tint background.
   ========================================================================== */
.shape-divider-dark{
  height:110px; /* taller than the base .shape-divider — a hard flat-to-flat cut read as
    abrupt even with a wavy edge; height + a gradient fill (below) give the color itself
    room to actually graduate, not just the outline */
  background:var(--purple-tint); /* the SVG's own box is taller than the wave paths fill — without
    this, the sliver above the curves is transparent and shows the page's pale ambient canvas
    instead of continuing section 3's own background, which read as a stray white seam line */
}
@media (min-width:960px){
  .shape-divider-dark{ height:150px; }
}
/* second, higher, softer wave behind the main gradient one — a hint of depth before the
   real transition, rather than one single hard-edged shape doing all the work */
.shape-divider-dark .divider-echo{ fill:var(--purple-tint); opacity:.55; }
.shape-divider-dark .divider-main{ fill:url(#storiesDividerFade); } /* must be a class rule, not the SVG fill attribute —
  the generic ".shape-divider path" rule above (CSS) beats a plain presentation attribute regardless of specificity math */

.stories{
  position:relative; z-index:1; overflow:hidden;
  background:var(--ink);
  padding:var(--sp-800) var(--sp-300) var(--sp-900);
}
@media (max-width:959px){
  .stories{ padding-top:var(--sp-600); padding-bottom:var(--sp-600); } /* same unscoped
    desktop-sized top/bottom miss as .founder above */
}

/* "אלמנטים זזים" — soft ambient glow orbs, slow drift, brand colors.
   Same honest-substitute-for-a-video-background language as the hero's
   ambient canvas, just CSS-only since this section doesn't need canvas's
   per-frame control. */
.stories-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orb{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.32; }
.orb-1{ width:26rem; height:26rem; background:var(--purple); top:-8%; inset-inline-start:-10%; animation:orb-drift-a 24s ease-in-out infinite; }
/* the orange orb was removed — clipped at the section's bottom edge it drew a
   hard line against the section below */
.orb-3{ width:16rem; height:16rem; background:var(--purple); top:38%; inset-inline-end:22%; animation:orb-drift-a 32s ease-in-out infinite reverse; }
@keyframes orb-drift-a{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(2.5rem,-2rem); } }
@media (prefers-reduced-motion: reduce){ .orb{ animation:none !important; } }

.stories-inner{ position:relative; z-index:1; max-width:1240px; margin-inline:auto; }
.stories-head{ text-align:center; max-width:640px; margin-inline:auto; margin-bottom:var(--sp-800); }
.stories-title{
  margin:0 0 var(--sp-200);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* unified with the other section headings */
  font-weight:800; color:var(--bg);
}
.stories-sub{ margin:0; font-size:1.125rem; line-height:1.6; color:#A5A3B0; }

.stories-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-500); }
@media (min-width:700px){ .stories-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .stories-grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-600); } }

.story-card{
  display:flex; flex-direction:column; gap:var(--sp-200);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:var(--sp-300);
}
.story-media{ position:relative; } /* hosts the glow (below) sitting outside the frame's own clip */
.story-media-frame{
  position:relative; z-index:1;
  aspect-ratio:16/9; /* the testimonial clips are all 16:9 landscape (and the thumbnails are
    natively 16:9 too) — a 4:5 portrait frame letterboxed the video with big black bars once
    it played; matching the real ratio means no bars and no size jump on play */
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.story-media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-media-frame iframe{ width:100%; height:100%; display:block; border:none; }

/* Soft rotating aurora glow, one per video — the "elements that move,
   pleasant to look at" around each testimonial. Sits behind the frame
   (z-index:0) and pokes out past its edges, so the clipped video itself
   never has to also clip its own glow. */
.story-media::before{
  content:"";
  position:absolute; inset:-10px;
  z-index:0;
  border-radius:22px;
  background:conic-gradient(from 0deg, var(--purple), var(--orange), var(--purple) 60%, var(--orange) 85%, var(--purple));
  filter:blur(16px);
  opacity:.55;
  animation:story-glow-spin 10s linear infinite;
}
@keyframes story-glow-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
/* gentle per-card variation so six cards don't all pulse in lockstep */
.story-card:nth-child(2n) .story-media::before{ animation-duration:13s; animation-direction:reverse; }
.story-card:nth-child(3n) .story-media::before{ animation-duration:16s; }
@media (prefers-reduced-motion: reduce){
  .story-media::before{ animation:none !important; }
}
.story-play{
  position:absolute; inset:0; margin:auto;
  width:60px; height:60px;
  background:var(--orange); color:var(--ink);
  border:none; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease);
  box-shadow:0 12px 28px -10px rgba(0,0,0,.55);
}
.story-play svg{ width:24px; height:24px; margin-inline-start:3px; }
@media (hover:hover) and (pointer:fine){
  .story-play:hover{ transform:scale(1.08); background:var(--orange-600); }
}
.story-play:focus-visible{ outline:2px solid var(--bg); outline-offset:3px; }

.story-quote{
  margin:0; padding:0; border:none;
  font-size:1rem; line-height:1.6; font-weight:600; color:var(--bg);
}
.story-quote::before{ content:"\201C"; color:var(--orange); font-weight:800; }
.story-quote::after{ content:"\201D"; color:var(--orange); font-weight:800; }

.story-who{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:var(--sp-100); }
.story-name{ font-weight:700; font-size:1.1875rem; color:var(--bg); }
.story-desc{ font-size:1rem; color:#A5A3B0; }

/* ==========================================================================
   Section 5 — stats / "the numbers speak". The hero's own trust-bar strip
   moved here wholesale (identical markup, so the count-up + reveal JS keeps
   working untouched — both select by class, not by position in the DOM).
   Light surface again after section 4's dark stage, mirroring the hero's
   own tone and book-ending the page's rhythm so far.
   ========================================================================== */
.shape-divider-light{
  height:110px;
  background:var(--ink); /* continues section 4's dark tone above the curve */
}
@media (min-width:960px){
  .shape-divider-light{ height:150px; }
}
.shape-divider-light .divider-echo{ fill:var(--ink); opacity:.55; }
.shape-divider-light .divider-main{ fill:url(#statsDividerFade); } /* class rule, not the SVG fill
  attribute — the generic ".shape-divider path" rule always beats a presentation attribute */

.stats{
  position:relative; z-index:1;
  background:var(--bg);
  padding:var(--sp-800) var(--sp-300) var(--sp-900);
}
@media (max-width:959px){
  .stats{ padding-top:var(--sp-600); padding-bottom:var(--sp-600); } /* same unscoped
    desktop-sized top/bottom miss as .founder/.stories above */
}
.stats-inner{
  max-width:720px; margin-inline:auto;
  text-align:center;
}
@media (min-width:960px){
  .stats-inner{ max-width:920px; }
}
.stats-eyebrow{
  margin:0 0 var(--sp-300);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight:800;
  color:var(--ink);
}
.stats-body{
  margin:0;
  font-size:1.125rem;
  line-height:1.7;
  color:var(--ink-soft);
}
.stats-question{
  margin:var(--sp-400) 0 var(--sp-400);
  font-size:1.25rem;
  font-weight:700;
  color:var(--ink);
}
.stats-cta{ margin-inline:auto; } /* .stats-inner centers by text-align, but the button
  itself is a width:88% flex item — needs its own centering, same class of fix the
  hero and founder CTAs already needed on mobile. */

/* ==========================================================================
   Section 6 — podcast clips. Light purple-tint again (echoes proof/founder,
   distinct from .stats' plain --bg right above it, so two light sections
   don't sit back to back looking identical). Divider reuses the plain
   .shape-divider (no gradient) — both sides are light tones, the same
   family as the hero→proof seam, not the dark-stage transitions elsewhere.
   ========================================================================== */
.podcast{
  position:relative; z-index:1;
  overflow:hidden; /* mobile: contains the decorative strip (which is display:none there anyway) */
  background:var(--purple-tint);
  padding:var(--sp-800) var(--sp-300) var(--sp-900);
}
@media (max-width:959px){
  .podcast{ padding-top:var(--sp-600); padding-bottom:var(--sp-600); } /* same unscoped
    desktop-sized top/bottom miss as the sections above */
}

/* Mobile / tablet: ordinary dividers — a normal 1px seam between the sections,
   NO overlap, so the bottom wave can't ride up over the podcast CTA that sits
   just above it. Each carries a box background in the podcast tone, so above /
   below the wave curve reads as a clean colour change.
   (The lie-on-top treatment further down is desktop-only, for the film strip.) */
.shape-divider-podtop{ background:var(--purple-tint); }
.shape-divider-podtop path{ fill:var(--bg); } /* = .stats above; fills upward from the curve */
.shape-divider-tint{ margin-top:-1px; background:var(--purple-tint); }

/* Desktop (>=1080px): the two waves lie ON TOP of the podcast section (a full
   negative margin equal to their own height) with NO box background — only the
   wave path is painted. That's what keeps the film strip visible right up to
   the curve instead of cut at a straight box edge. .podcast drops to z-index:0
   so every neighbouring section masks the strip's ends however long it gets.
   (.podcast still paints above .bg-field: same z-index, later in DOM.) */
@media (min-width:1080px){
  .podcast{
    overflow:visible; z-index:0;
    padding-bottom:calc(var(--sp-900) + var(--sp-700)); /* clears the 140px wave that
      now lies over the section's bottom, so the CTA above it isn't scalloped */
  }
  .shape-divider-podtop{ height:140px; margin-bottom:-140px; z-index:3; background:none; }
  .shape-divider-tint{ height:140px; margin-top:-140px; z-index:3; background:none; }
}

/* Decorative 35mm film strip in the left margin — a parallax layer (Subtle
   tier): drifts vertically with scroll (js/hero.js wirePodcastFilmstrip,
   ScrollTrigger scrub) to read as film feeding through a projector. A plain
   <div> with a CSS film texture — an <svg> here rendered its pattern only
   partway down a tall/vh-sized box, which read as a hard cut. Behind
   everything, non-interactive, desktop-only, off under reduced motion. It is
   long enough that its real ends always sit inside .stats (above) / #results
   (below), whose opaque backgrounds are lifted over it, so it looks like one
   continuous reel the neighbouring sections perfectly overlap. */
.podcast-filmstrip{
  position:absolute;
  left:clamp(6px, 1.6vw, 32px); /* sits properly on the page so more of the reel reads */
  top:-100vh;
  width:150px; height:320vh; /* far longer than the section, and still centred on it
    (-100 + 320/2 = 60vh ≈ the section's own mid-line) so the -7deg rotation barely
    shifts it sideways in the visible window while the ends run way out of sight */
  rotate:-7deg;
  opacity:.7;
  z-index:0;
  pointer-events:none;
  will-change:transform;
  /* Frames alternate between two tones on a 176px cycle. A perfectly uniform
     repeat has no landmarks, so scrolling it looked almost static however far
     it actually travelled — the alternation is what makes the motion read. */
  background:
    repeating-linear-gradient(180deg, #000 0 26px, #060510 26px 58px) left top / 20px 100% no-repeat,
    repeating-linear-gradient(180deg, #000 0 26px, #060510 26px 58px) right top / 20px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.11) 0 2px, transparent 2px 88px) center top / 62px 100% no-repeat,
    repeating-linear-gradient(180deg, #2c2339 0 88px, #1c1627 88px 176px) center top / 62px 100% no-repeat,
    #08070d;
}
@media (max-width:1079px){ .podcast-filmstrip{ display:none; } }
@media (prefers-reduced-motion:reduce){ .podcast-filmstrip{ display:none; } }

.podcast-inner{ position:relative; z-index:1; max-width:980px; margin-inline:auto; text-align:center; }
.podcast-eyebrow{
  margin:0 0 var(--sp-200);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* matches every other section's
    title size — was a small uppercase label before, read as too quiet */
  font-weight:800;
  color:var(--purple);
}
.podcast-title{
  margin:0 0 var(--sp-700);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight:800;
  color:var(--ink);
  text-wrap:balance;
}

.podcast-grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--sp-500);
  max-width:340px; margin:0 auto var(--sp-700);
}
@media (min-width:640px){
  .podcast-grid{ grid-template-columns:repeat(2,1fr); max-width:680px; }
}

.podcast-card{ position:relative; }
/* A static frame with a bright line traveling around inside it — deliberately
   a different technique from section 4's soft blurred halo (not a smaller/
   quieter version of it, an actual different effect). No filter:blur at all:
   .podcast-glow is a thin padded frame (nested-radius formula: inner 24px +
   3px gap = outer 27px). Its ::before is a conic-gradient, mostly a dim flat
   brand-purple (the always-visible frame) with one short bright orange→purple
   arc (the "line") that sweeps around as it spins. .podcast-media sits on
   top at full opacity and covers everything but the 3px ring, so only the
   frame + traveling line show — never a rotating shape behind the card. */
.podcast-glow{
  position:relative;
  overflow:hidden; /* clips the rotating square to the frame's own rect — without this the
    conic-gradient's corners swing far outside the card at 45°-ish angles instead of reading
    as a thin border */
  border-radius:27px;
  padding:3px;
  isolation:isolate;
}
.podcast-glow::before{
  content:"";
  position:absolute;
  /* oversized (double the box, centered) so the rotated square still fully
     covers the frame's corners at every angle — a same-size square would
     leave the wrapper's own corners uncovered partway through the spin */
  top:-50%; inset-inline-start:-50%;
  width:200%; height:200%;
  z-index:0;
  background:conic-gradient(from 0deg,
    rgba(96,91,229,.4) 0%, rgba(96,91,229,.4) 84%,
    var(--orange) 91%, var(--purple) 100%);
  animation:story-glow-spin 6s linear infinite;
}
.podcast-card:nth-child(2n) .podcast-glow::before{ animation-duration:7.5s; animation-direction:reverse; }
@media (prefers-reduced-motion: reduce){ .podcast-glow::before{ animation:none !important; } }

.podcast-media{
  position:relative; z-index:1;
  aspect-ratio:9/16;
  border-radius:24px;
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 24px 48px -24px rgba(22,21,31,.32);
}
.podcast-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* YouTube player, swapped in on click (js/hero.js wirePodcastCards) */
.podcast-media iframe{
  position:relative; z-index:1;
  width:100%; height:100%; display:block; border:none;
}
.podcast-media::after{
  /* darkens the lower third so the play glyph stays legible over any photo */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 42%);
  pointer-events:none;
}
.podcast-media:has(iframe)::after{ display:none; } /* no tint once the real player is in */
.podcast-play{
  position:absolute; inset:0; margin:auto;
  z-index:2;
  width:56px; height:56px;
  background:var(--orange); color:var(--ink);
  border:none; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease);
  box-shadow:0 12px 28px -10px rgba(22,21,31,.55);
}
.podcast-play svg{ width:22px; height:22px; margin-inline-start:3px; }
@media (hover:hover) and (pointer:fine){
  .podcast-play:hover{ transform:scale(1.08); background:var(--orange-600); }
}
.podcast-play:focus-visible{ outline:2px solid var(--bg); outline-offset:3px; }

.podcast-cta{ margin-inline:auto; }

/* ==========================================================================
   Section 7 — additional client gallery. Light --bg again after .podcast's
   purple-tint (a fourth distinct surface in the rotation: bg → tint → tint →
   ink → bg → tint → bg). Divider needs an explicit background this time
   (unlike the plain hero→proof one) because .podcast is opaque, not the
   hero's transparent-over-canvas look — same reasoning as .shape-divider-dark.
   ========================================================================== */
/* background deliberately NOT set here — this wave lies on top of .podcast
   (see the .shape-divider-tint rules in the section-6 block above), so the
   tone above the curve comes from .podcast itself. An opaque box background
   would slice the film strip off at a straight edge. */
.shape-divider-tint path{ fill:var(--bg); } /* matches .gallery below */

.gallery{
  position:relative; z-index:1;
  background:var(--bg);
  padding:var(--sp-800) var(--sp-300) var(--sp-500); /* bottom eased back up from --sp-200 —
    that left too little room for the notebook panel's own shadow to finish fading before the
    divider started, so the shadow's dark trail was getting cut off right against the curve */
}
@media (max-width:959px){
  .gallery{ padding-top:var(--sp-600); padding-bottom:var(--sp-400); }
}
.gallery-inner{ max-width:1200px; margin-inline:auto; }
.gallery-title{
  margin:0 0 var(--sp-700);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight:800;
  color:var(--ink);
  text-align:center;
  text-wrap:balance;
}

/* Section 7 — the three cropped result photos. No notebook panel here (that
   belongs to the letters wall below); just the three cards spaced out, each
   keeping the shared .gallery-card tilt + float + lightbox behaviour. */
.results-row{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:flex-start;
  gap:var(--sp-500);
  max-width:1160px; margin-inline:auto;
  padding-block:var(--sp-300); /* room for each card's tilt + hover lift not to clip */
}
.results-row .gallery-card{
  width:auto; flex:0 1 320px;
  margin:0;
}
@media (max-width:760px){
  .results-row{ gap:var(--sp-600); }
  .results-row .gallery-card{ flex:0 1 clamp(240px, 78vw, 340px); }
}

/* Multi-column "scatter" — each card keeps its own natural aspect ratio
   (nothing here crops a letter's own text), and CSS columns pack mixed
   heights far better than a grid would without leaving ragged gaps. The
   per-card rotation (--rot, set inline) is what turns an ordinary column
   layout into "letters dropped on a table" instead of a tidy 3-up grid. */
/* Faded graph-paper grid — the letters read as pinned to an actual notebook
   page rather than floating on the plain section background. Two repeating
   linear-gradients (one horizontal, one vertical) at very low opacity, not
   an image, so it stays crisp at any zoom and needs no asset. */
.gallery-scatter{
  columns:1;
  column-gap:var(--sp-600);
  position:relative;
  padding:var(--sp-600) var(--sp-500);
  border-radius:20px;
  background-color:var(--surface);
  background-image:
    linear-gradient(rgba(22,21,31,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,21,31,.07) 1px, transparent 1px);
  background-size:28px 28px;
  /* Elevation shadow built from several progressively larger, progressively
     fainter layers (each blending into the next) rather than one or two
     big-blur layers, so there's no single sharp cutoff. Sized to fully
     complete its fade within .gallery's own bottom padding (--sp-500,
     40px) — a shadow whose blur reach is LONGER than the flat space left
     for it doesn't fade at all, it just gets sliced off mid-fade by the
     divider's opaque edge sitting on top of it, which is its own kind of
     hard line (this is what earlier, larger-blur attempts were doing). */
  box-shadow:
    0 1px 2px rgba(22,21,31,.05) inset,
    0 2px 3px rgba(22,21,31,.05),
    0 4px 6px rgba(22,21,31,.05),
    0 7px 9px rgba(22,21,31,.045),
    0 12px 12px rgba(22,21,31,.035),
    0 16px 10px rgba(22,21,31,.025);
}
@media (max-width:520px){
  .gallery-scatter{ padding:var(--sp-400) var(--sp-300); border-radius:16px; background-size:22px 22px; }
}
@media (min-width:640px){ .gallery-scatter{ columns:2; } }
@media (min-width:960px){ .gallery-scatter{ columns:3; column-gap:var(--sp-700); } }

.gallery-card{
  display:block; width:100%;
  break-inside:avoid;
  margin:0 0 var(--sp-600);
  position:relative;
  background:var(--surface);
  padding:var(--sp-100);
  border:none; border-radius:6px;
  box-shadow:0 16px 32px -18px rgba(22,21,31,.32), 0 2px 6px rgba(22,21,31,.1);
  transform:rotate(var(--rot,0deg));
  transition:transform .35s var(--ease); /* box-shadow deliberately not here — see ::after below */
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
/* Three transforms, three elements — each fights the others if shared:
   [data-reveal]'s entrance transform has HIGHER specificity than a plain
   .gallery-card rule (0,2,0 once .is-visible lands, vs 0,1,0), so it would
   silently overwrite the card's own transform:rotate() the moment it
   reveals; GSAP's idle float (floatGalleryCards) writes its own inline
   transform, which likewise beats any stylesheet rule outright. So the
   tilt lives on .gallery-card itself (static, CSS, hover-reset), the
   entrance fade-up lives on .gallery-card-reveal ([data-reveal]), and the
   float lives on .gallery-card-float (GSAP) — three separate elements,
   zero clobbering. */
.gallery-card-reveal{ display:block; }
.gallery-card-float{ display:block; }
.gallery-card img{ width:100%; height:auto; display:block; border-radius:2px; }
/* Hover's deeper shadow is a separate layer at opacity:0 rather than an
   animated box-shadow value — transform/opacity only keeps this off the
   layout/paint path (the same reasoning as .cta-btn::after above). */
.gallery-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 28px 56px -20px rgba(22,21,31,.4), 0 6px 14px rgba(22,21,31,.14);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .gallery-card:hover{
    transform:rotate(0deg) scale(1.035);
    z-index:2;
  }
  .gallery-card:hover::after{ opacity:1; }
  .gallery-card:hover .gallery-zoom{ background:var(--purple); }
}
.gallery-card:focus-visible{
  outline:2px solid var(--purple); outline-offset:3px;
  transform:rotate(0deg);
  z-index:2;
}
.gallery-zoom{
  position:absolute;
  bottom:calc(var(--sp-100) + 10px); inset-inline-end:calc(var(--sp-100) + 10px);
  width:36px; height:36px;
  background:var(--ink);
  color:var(--bg);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(22,21,31,.3);
  pointer-events:none; /* the whole card is the click target */
  transition:background .3s var(--ease);
}
.gallery-zoom svg{ width:17px; height:17px; }

/* Idle float (js/hero.js floatGalleryCards) rotates each card's own resting
   angle around Y translation only — X/rotation never animate, so RTL is
   unaffected and the per-card --rot tilt stays put while it drifts. */
@media (prefers-reduced-motion: reduce){ .gallery-card{ transition:none; } }

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-400);
  background:rgba(22,21,31,.9);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:min(720px,92vw); max-height:88vh;
  width:auto; height:auto; display:block;
  border-radius:8px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.55);
  background:var(--surface);
}
.lightbox-close{
  position:absolute; top:var(--sp-300); inset-inline-end:var(--sp-300);
  width:44px; height:44px;
  background:rgba(255,255,255,.12);
  color:var(--bg);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lightbox-close svg{ width:20px; height:20px; }
@media (hover:hover) and (pointer:fine){
  .lightbox-close:hover{ background:rgba(255,255,255,.22); }
}
.lightbox-close:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* ==========================================================================
   Section 8 — lead form. Every CTA on the page (#form) ends here, so it
   gets the strongest surface on the page: dark like .stories, but this
   time the destination itself, not a stage for other content. The card
   floating on top is deliberately the page's brightest, highest-contrast
   object — the one thing left to do.
   ========================================================================== */
.shape-divider-close{
  height:110px; /* was inheriting the base .shape-divider's 56/72px — too short for a
    1440x160 viewBox curve to read as graduated, it just came out compressed/flat */
  background:var(--bg); /* continues .gallery's own tone above the curve */
}
@media (min-width:960px){
  .shape-divider-close{ height:150px; }
}
.shape-divider-close .divider-echo{ fill:url(#closeEchoFade); } /* a gradient fill (transparent
  to tinted), not a flat color at flat opacity — a flat opacity has a hard edge at the path's
  own boundary, which read as an abrupt line; fading the fill itself removes that edge entirely */
.shape-divider-close .divider-main{ fill:url(#closeDividerFade); }

.lead-form{
  position:relative; z-index:1; overflow:hidden;
  background:var(--purple); /* solid brand purple — a section tone not used anywhere
    else on the page (proof/founder/podcast use the pale tint, stories uses ink),
    so the closing CTA reads as its own distinct destination without going dark */
  padding:var(--sp-800) var(--sp-300) var(--sp-900);
}
@media (max-width:959px){
  .lead-form{ padding-top:var(--sp-600); padding-bottom:var(--sp-600); }
}
.lead-inner{ max-width:720px; margin-inline:auto; }
.lead-head{ text-align:center; margin-bottom:var(--sp-700); }
.lead-title{
  margin:0 0 var(--sp-200);
  font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight:800;
  color:var(--bg);
  text-wrap:balance;
}
.lead-sub{ margin:0; font-size:1.125rem; line-height:1.6; color:var(--bg); } /* #A5A3B0 (tuned for
  --ink) failed contrast on --purple at 2.05:1 — verified via check_contrast.py; --bg passes at 4.88:1 */

.lead-card{
  position:relative;
  background:var(--surface);
  color:var(--ink);
  border-radius:24px;
  padding:var(--sp-600) var(--sp-500);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.4);
  text-align:start;
}
@media (max-width:520px){
  .lead-card{ padding:var(--sp-400) var(--sp-300); border-radius:18px; }
}

/* Single-screen lead form (client mockup, Oct 2026) — replaces the old 3-step
   quiz. One markup pattern, used twice: in the hero card and in #form below.
   Placeholders carry the visible prompt; each field still has a real <label>
   (.sr-only) for screen readers. */
.lead-banner{
  margin:0 0 var(--sp-300);
  padding:var(--sp-200) var(--sp-300);
  border-radius:12px;
  background:var(--purple-tint);
  color:var(--ink);
  font-size:1rem; font-weight:700; line-height:1.5;
}
.lead-quick{ display:flex; flex-direction:column; gap:var(--sp-200); }
/* An author `display` beats the UA's [hidden]{display:none} — without this the
   form stays on screen after it's "hidden" on submit / close-out. */
.lead-quick[hidden]{ display:none; }
.lead-quick input,
.lead-quick select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--bg);
  border:2px solid var(--border); border-radius:12px;
  padding:var(--sp-200) var(--sp-300);
  text-align:right; /* type="tel" otherwise auto-aligns its all-digit content left,
    even inside dir="rtl" — browsers treat phone-number input direction independently */
  transition:border-color .2s var(--ease);
}
.lead-quick input::placeholder{ color:var(--ink-mute); opacity:1; }
.lead-quick input:focus,
.lead-quick select:focus{ outline:none; border-color:var(--purple); }
.lead-quick input:focus-visible,
.lead-quick select:focus-visible{ box-shadow:0 0 0 3px rgba(96,91,229,.18); }

.lead-select{ position:relative; }
.lead-quick select{
  -webkit-appearance:none; appearance:none;
  padding-inline-end:var(--sp-600); /* room for the chevron at the (physical left) end */
  cursor:pointer;
}
.lead-quick select:invalid{ color:var(--ink-mute); } /* still on the placeholder option */
.lead-quick option{ color:var(--ink); }
.lead-select-chevron{
  position:absolute; inset-inline-end:var(--sp-300); top:50%;
  width:16px; height:16px; margin-top:-8px;
  color:var(--ink); pointer-events:none;
}

.lead-error{
  margin:0;
  padding:var(--sp-100) var(--sp-200);
  border-radius:10px;
  background:rgba(192,57,43,.1);
  color:#C0392B; /* verified 5.44:1 on --surface / 5.21:1 on --bg via check_contrast.py */
  font-size:.9375rem; font-weight:700;
}
.lead-submit{ width:100%; max-width:none; margin-top:var(--sp-100); }
.lead-submit:disabled{ opacity:.7; cursor:default; }

/* Step-by-step quiz (Oct 28 2026): one question per screen, answer to advance,
   contact details last. Steps are <fieldset data-step>, toggled by hero.js. */
.lead-progress{ display:flex; flex-direction:column; gap:var(--sp-75); }
.lead-progress-text{ font-size:.875rem; font-weight:700; color:var(--ink-soft); }
.lead-progress-bar{
  display:block; height:6px; border-radius:999px;
  background:var(--purple-tint); overflow:hidden;
}
.lead-progress-fill{
  display:block; height:100%; width:20%;
  border-radius:inherit; background:var(--purple);
  transition:width .35s var(--ease);
}
.lead-step{
  min-width:0; margin:0; padding:0; border:0;
  display:flex; flex-direction:column; gap:var(--sp-200);
}
.lead-step[hidden]{ display:none; }
.lead-q{
  padding:0; margin:0 0 var(--sp-100);
  font-size:1.25rem; font-weight:800; line-height:1.35; color:var(--ink);
}
.lead-options{ display:flex; flex-direction:column; gap:var(--sp-100); }
.lead-choice{ position:relative; display:block; cursor:pointer; }
.lead-choice input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.lead-choice span{
  position:relative; display:block;
  padding:var(--sp-200) var(--sp-300);
  border:2px solid var(--border); border-radius:12px;
  background:var(--bg);
  font-size:1.0625rem; font-weight:700; color:var(--ink);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.lead-choice:hover span{ border-color:rgba(96,91,229,.45); }
.lead-choice input:checked + span{ border-color:var(--purple); background:var(--purple-tint); }
.lead-choice input:focus-visible + span{ box-shadow:0 0 0 3px rgba(96,91,229,.25); }
.lead-back{
  align-self:flex-start;
  padding:var(--sp-50) 0; border:0; background:none;
  font:inherit; font-size:.9375rem; font-weight:700; color:var(--purple-600);
  cursor:pointer;
}
.lead-back[hidden]{ display:none; }
.lead-back:hover{ text-decoration:underline; }
@media (prefers-reduced-motion: reduce){
  .lead-progress-fill, .lead-choice span{ transition:none; }
}

/* Hero instance: sits on the light hero background, so a softer shadow + hairline
   than the bottom card (which floats on solid purple). */
.hero-form{ display:flex; justify-content:center; }
.lead-card-hero{
  width:100%; max-width:520px;
  padding:var(--sp-500) var(--sp-400);
  box-shadow:0 30px 60px -28px rgba(22,21,31,.28), 0 0 0 1px var(--border);
}
.lead-card-title{
  margin:0 0 var(--sp-200);
  font-size:1.375rem; font-weight:800; line-height:1.35;
  color:var(--ink);
}
.lead-card-sub{
  margin:calc(-1 * var(--sp-100)) 0 var(--sp-300);
  font-size:.9375rem; color:var(--ink-soft);
}
@media (max-width:520px){
  .lead-card-hero{ padding:var(--sp-400) var(--sp-300); }
}
/* A <select> can't wrap: the longest prompt ("האם יש לך הלוואות נוספות מלבד
   המשכנתא?") needs ~264px at 16px. Phones get slimmer card/select padding so it
   fits whole at 375px+ while staying at 16px (iOS Safari zooms the page when a
   field under 16px is focused); only sub-375 screens (Android, no zoom issue)
   step down to 15px. */
@media (max-width:420px){
  .lead-form{ padding-inline:var(--sp-200); }
  .lead-card,
  .lead-card-hero{ padding-inline:var(--sp-100); }
  .lead-quick select{ padding-inline-start:var(--sp-100); padding-inline-end:34px; }
  .lead-select-chevron{ inset-inline-end:var(--sp-100); }
}
@media (max-width:374px){
  .lead-quick select{ font-size:.9375rem; }
}

.lead-success{ text-align:center; padding:var(--sp-500) 0; }
.lead-success-icon{
  width:64px; height:64px; margin:0 auto var(--sp-300);
  border-radius:999px;
  background:var(--purple-tint); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
}
.lead-success-icon svg{ width:30px; height:30px; }
.lead-success h3{ margin:0 0 var(--sp-100); font-size:1.375rem; font-weight:800; color:var(--ink); }
.lead-success p{ margin:0; color:var(--ink-soft); font-size:1.0625rem; }
.lead-closed h3{ margin:0; line-height:1.5; text-wrap:balance; } /* no icon/subline — the whole message is the headline */

.lead-confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }

/* ==========================================================================
   Section 9 — closing letters wall. Comes back out of the purple form into
   the page's base --bg, so this divider is the mirror of .shape-divider-close
   (purple at the top, --bg at the bottom). Reuses .gallery / .gallery-scatter
   / .gallery-card wholesale (the notebook pile), with .letters only nudging
   the end-of-page spacing.
   ========================================================================== */
.shape-divider-reopen{
  height:110px;
  background:var(--purple); /* continues .lead-form's own tone above the curve */
}
@media (min-width:960px){
  .shape-divider-reopen{ height:150px; }
}
.shape-divider-reopen .divider-echo{ fill:url(#reopenEchoFade); }
.shape-divider-reopen .divider-main{ fill:url(#reopenDividerFade); }

.letters{ padding-bottom:var(--sp-900); } /* last thing on the page — a bit more floor room */
@media (max-width:959px){
  .letters{ padding-bottom:var(--sp-700); }
}
.letters-cta{ margin:var(--sp-700) auto 0; } /* closing CTA under the wall of letters -> #form */

/* ==========================================================================
   Reveal state (JS toggles .is-visible; see js/hero.js)
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(16px); filter:blur(6px); }
[data-reveal].is-visible{
  opacity:1; transform:translateY(0); filter:blur(0);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}

/* ==========================================================================
   Reduced motion — everything final-state immediately, ambient canvas static
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  .hero-h1 .line span{ transform:none; }
  .tword{ color:var(--ink) !important; }
  /* marquee auto-scroll is stopped from js/hero.js under this same preference;
     manual drag stays available since it's user-initiated, not automatic */
}

@media (max-width:400px){
  .hero{ padding-inline:var(--sp-200); }
  .nav-inner{ padding-inline:var(--sp-100); }
}