/* ── פונטים מקומיים (self-hosted, variable woff2, subset עברי+לטיני) ── */
  @font-face{
    font-family:'Heebo';
    src:url('fonts/heebo.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Fredoka';
    src:url('fonts/fredoka.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  :root{
    /* ── Brand colors (from logo) ── */
    --cream:        #F4EDE1;
    --cream-deep:   #ECE2D1;
    --paper:        #FBF7EF;
    --ink:          #233645;
    --ink-soft:     #4d6172;
    --blue:         #2E8BC9;
    --blue-deep:    #1B6EA8;
    --coral:        #E9573F;
    /* darker coral for TEXT + white-on-coral buttons - passes WCAG AA 4.5:1 both ways
       (white-on: 5.46 · on-cream: 4.69). brand --coral stays for decorative/large fills. */
    --coral-deep:   #BE3B27;
    --amber:        #F4A623;

    /* watercolor washes */
    --wash-blue:   rgba(46,139,201,.20);
    --wash-coral:  rgba(233,87,63,.18);
    --wash-amber:  rgba(244,166,35,.20);

    --shadow-sm: 0 2px 10px rgba(35,54,69,.08);
    --shadow-md: 0 14px 40px -12px rgba(35,54,69,.22);
    --shadow-lg: 0 30px 70px -24px rgba(35,54,69,.30);

    --radius: 22px;
    --maxw: 1140px;
    --ease: cubic-bezier(.22,.61,.36,1);
    /* stronger ease-out for UI interactions (press/enter) */
    --ease-out: cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  section[id]{scroll-margin-top:72px}
  body{
    font-family:'Heebo',system-ui,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Fredoka',sans-serif;line-height:1.12;font-weight:600;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  /* a11y: visible keyboard focus */
  :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
  .field input:focus-visible,.contact-form .field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
  /* a11y: skip to content link */
  .skip-link{position:absolute;right:-9999px;top:0;background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:0 0 12px 0;z-index:1000;font-weight:600}
  .skip-link:focus{right:0}
  main:focus{outline:none}/* skip-link target is a landmark, not an interactive control */
  /* a11y: כותרת מקטע לקוראי מסך בלבד. גל ביקש מקטעים בלי כותרת נראית (ביקורות, ציטוט,
     כרטיס המחיר); ה-h2 המוסתר שומר על היררכיה תקינה ועל ניווט-כותרות בלי לשנות את התצוגה. */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
  section{position:relative}

  /* ───────── Buttons ───────── */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.02rem;
    padding:.85em 1.6em;border-radius:999px;cursor:pointer;border:none;
    transition:transform .16s var(--ease-out),box-shadow .2s var(--ease),background .2s;
    line-height:1;white-space:nowrap;
  }
  .btn svg{width:1.15em;height:1.15em}
  .btn-primary{background:var(--coral-deep);color:#fff;box-shadow:0 10px 24px -8px rgba(233,87,63,.6)}
  .btn-primary:hover{box-shadow:0 16px 30px -8px rgba(233,87,63,.65)}
  .btn-blue{background:var(--blue-deep);color:#fff;box-shadow:0 10px 24px -8px rgba(46,139,201,.55)}
  .btn-blue:hover{box-shadow:0 16px 30px -8px rgba(46,139,201,.6)}
  .btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1.5px solid rgba(35,54,69,.14)}
  .btn-ghost:hover{background:#fff;box-shadow:var(--shadow-sm)}
  /* press feedback - placed after hovers so :active wins on press.
     ההרמה (translateY) חיה בבלוק hover:hover בסוף הקובץ: במגע :hover נדבק אחרי נגיעה
     והכפתור נשאר מורם. שם גם :hover:active, אחרת הלחיצה בדסקטופ מבטלת את ההרמה
     והכפתור "נופל" 3px במקום להילחץ. */
  .btn:active{transform:scale(.96)}
  .btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

  /* ───────── Header ───────── */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(244,237,225,.82);
    backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid rgba(35,54,69,.07);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
  .brand{display:flex;align-items:center;gap:.3rem;font-family:'Fredoka';font-weight:600;font-size:1.45rem;color:var(--ink)}
  .brand .mark{height:40px;width:auto;flex:none}
  .nav-links{display:flex;align-items:center;gap:2rem;font-weight:500;font-size:1rem}
  .nav-links a{color:var(--ink-soft);transition:color .2s;position:relative;padding:.2em 0}
  .nav-links a:hover{color:var(--blue-deep)}
  .nav-links a::after{content:"";position:absolute;bottom:-2px;right:0;left:0;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .nav-cta{display:flex;align-items:center;gap:.5rem}
  .burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center}
  .burger svg{width:24px;height:24px;color:var(--ink)}

  /* ───────── Aperture motif (SVG reused) ───────── */
  .aperture{display:block}

  /* watercolor blob */
  .blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.85;pointer-events:none;z-index:0}

  /* ───────── Hero ───────── */
  .hero{position:relative;padding:clamp(48px,8vw,96px) 0 clamp(60px,9vw,110px);overflow:hidden}
  .hero-grid{position:relative;z-index:2}
  /* scale/rotate כתכונות נפרדות: ה-rotate של כל פולורואיד יושב ב-transform, ו-scale נערם עליו
     בלי לשכתב אותו לכל וריאנט (a/b/c/d) בנפרד */
  .hero-pola{position:absolute;z-index:3;background:#fff;padding:7px 7px 20px;border-radius:6px;box-shadow:var(--shadow-md);cursor:pointer;width:clamp(112px,11vw,150px);transition:box-shadow .2s var(--ease),scale .16s var(--ease-out)}
  .hero-pola:active{scale:.96}
  .hero-pola img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px}
  /* עיגון לשולי תוכן (1140px) — הפולורואידים נשארים ב-gutter ולא נכנסים לטקסט בכל רוחב */
  .hero-pola.a{top:10%;left:min(1.5%,calc(50% - 710px));transform:rotate(-7deg)}   /* שמאל-עליון */
  .hero-pola.b{top:9%;right:min(1.5%,calc(50% - 710px));transform:rotate(7deg)}    /* ימין-עליון */
  .hero-pola.c{bottom:6%;left:min(5%,calc(50% - 710px));transform:rotate(6deg)}    /* שמאל-תחתון */
  .hero-pola.d{bottom:10%;right:min(2.5%,calc(50% - 710px));transform:rotate(-6deg)} /* ימין-תחתון */
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.5em;
    background:var(--wash-amber);color:#7a5106;
    font-weight:500;font-size:.8rem;padding:.45em 1em;border-radius:999px;margin-bottom:1.3rem;
  }
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
  .hero h1{font-size:clamp(2.6rem,6.2vw,4.5rem);font-weight:600}
  .hero h1 .h1-topic{display:block;font-size:clamp(1.25rem,2.9vw,1.85rem);font-weight:600;color:var(--ink);margin-bottom:.6rem;line-height:1.3}
  .hero h1 .h1-slogan{display:block}
  .hero h1 .hl{position:relative;color:var(--blue-deep);white-space:nowrap}
  .hero h1 .hl svg{position:absolute;right:-2%;bottom:-14px;width:104%;height:18px;color:var(--coral)}
  .hero .micro{font-size:1.05rem;color:var(--ink-soft);margin:1.7rem 0 2rem;max-width:38ch}
  .hero .micro strong{color:var(--ink);font-weight:600}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
  .hero-logo{display:flex;justify-content:center;align-items:center}
  .hero-logo img{width:100%;max-width:430px;height:auto}
  .hero-mobrand{display:none}

  /* ───────── Landing hero (kurs/sadna): ממורכז, תגית מותג, שורת משנה, פעולה אחת ─────────
     עמודי נחיתה בלבד (section.hero.landing-hero). השמות הגנריים (.hero-brand-tag, .hero-subtitle,
     .hero-form*, .hero-action, .hero-price, .section-cta) לא נמצאים ב-index — אל תשתמש בהם שם
     בלי לבדוק את שני העמודים. הכללים שדורסים base scoped ל-.landing-hero כדי לא לדלוף ל-index. */
  .landing-hero{padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,116px)}
  .landing-hero h1{font-size:clamp(3rem,6.5vw,5rem);font-weight:600;letter-spacing:-.035em;max-width:13ch;margin-inline:auto}
  .landing-hero .hero-grid{display:block;max-width:820px}
  .landing-hero .hero-copy{text-align:center}
  .hero-brand-tag{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.78);border:1px solid rgba(35,54,69,.1);box-shadow:var(--shadow-sm);border-radius:999px;padding:.52rem 1rem;margin-bottom:1.25rem;font-family:'Fredoka';font-weight:600;color:var(--blue-deep)}
  .hero-brand-tag::before{content:"";width:30px;height:30px;background:url('logo-icon.svg') center/contain no-repeat;flex:none}
  .hero-subtitle{font-family:'Fredoka';font-size:clamp(1.35rem,2.7vw,1.8rem);font-weight:500;color:var(--ink-soft);line-height:1.4;margin:1.45rem 0 2.15rem}
  .hero-subtitle .hl{position:relative;display:inline-block;color:var(--blue-deep);white-space:nowrap}
  .hero-subtitle .hl svg{position:absolute;right:-3%;bottom:-10px;width:108%;height:18px;color:var(--coral);transform:rotate(-1deg)}
  .landing-hero .hero-subtitle{margin-inline:auto}
  .hero-form{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem;text-align:start}
  .hero-form-row{display:flex;gap:.6rem;align-items:stretch}
  .hero-form-row .field{flex:1;min-width:0}
  .hero-form > .btn{align-self:center}
  .hero-form input[type=tel]::placeholder,
  .hero-form input[type=email]::placeholder{direction:rtl;text-align:right}
  .hero-action{display:flex;flex-direction:column;align-items:center;gap:.7rem}
  .hero-price{font-size:1rem;color:var(--ink-soft)}
  .section-cta{text-align:center;margin-top:clamp(28px,4vw,44px)}

  /* hero collage */
  .collage{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
  .collage .ring{position:absolute;inset:6%;z-index:1;animation:spin 60s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .polaroid{
    position:absolute;background:#fff;padding:10px 10px 38px;border-radius:6px;
    box-shadow:var(--shadow-md);z-index:2;
  }
  .polaroid .ph{border-radius:3px;aspect-ratio:1/1;width:100%;position:relative;overflow:hidden;background:var(--cream-deep)}
  .polaroid .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .polaroid .cap{position:absolute;bottom:10px;right:0;left:0;text-align:center;font-family:'Fredoka';font-size:.9rem;color:var(--ink-soft)}
  .polaroid.p1{width:46%;top:2%;right:4%;transform:rotate(-7deg)}
  .polaroid.p2{width:42%;bottom:6%;right:18%;transform:rotate(5deg);z-index:3}
  .polaroid.p3{width:40%;top:24%;left:2%;transform:rotate(8deg)}
  .ph-blue{background:linear-gradient(135deg,#bfe0f4,#7cc0e8)}
  .ph-coral{background:linear-gradient(135deg,#f7c2b6,#ef8a76)}
  .ph-amber{background:linear-gradient(135deg,#fbe0a8,#f6c45a)}
  .ph svg{width:34px;height:34px;color:rgba(255,255,255,.95)}

  /* decorative polaroids inside sections — mobile only */
  .pola-host{position:relative;overflow:hidden}
  .pola-host > .wrap{position:relative;z-index:1}
  .sec-pola{display:none;position:absolute;z-index:2;background:#fff;padding:6px 6px 18px;border-radius:6px;box-shadow:var(--shadow-md);cursor:pointer;transition:scale .16s var(--ease-out)}
  .sec-pola:active{scale:.96}
  .sec-pola img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px}
  /* polaroid lightbox */
  .lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(35,54,69,.82);opacity:0;transition:opacity .18s var(--ease-out)}
  .lightbox.open{display:flex}
  .lightbox.show{opacity:1;transition:opacity .25s var(--ease-out)}
  .lightbox-img{max-width:min(92vw,620px);max-height:86vh;width:auto;height:auto;background:#fff;padding:14px 14px 46px;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:scale(.9);transition:transform .18s var(--ease-out)}/* exit: snappy */
  .lightbox.show .lightbox-img{transform:scale(1);transition:transform .28s var(--ease-out)}/* enter: deliberate */
  .lightbox-close{position:absolute;top:16px;left:16px;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .16s var(--ease-out)}
  .lightbox-close:active{transform:scale(.92)}
  .lightbox-close:hover{background:#fff}
  .lightbox-close svg{width:22px;height:22px}
  @media(max-width:920px){
    .sec-pola{display:block}
    .sec-pola.p-kl{top:clamp(0px,1vw,8px);left:-5%;width:clamp(94px,25vw,118px);transform:rotate(-9deg)}
    .sec-pola.p-kr{top:clamp(22px,6vw,40px);right:-4%;width:clamp(74px,18vw,94px);transform:rotate(5deg)}
    /* polaroid anchored to a sec-head, flanking its kicker (behind text) */
    .pola-head{position:relative}
    .sec-pola.kp-l{top:-40px;left:-6%;width:clamp(86px,22vw,108px);transform:rotate(-8deg)}
    .sec-pola.kp-r{top:-34px;right:-6%;width:clamp(84px,21vw,104px);transform:rotate(6deg)}
  }

  /* ───────── Section heading helper ───────── */
  .sec-head{text-align:center;max-width:42rem;margin:0 auto clamp(34px,5vw,56px)}
  .kicker{display:inline-flex;align-items:center;gap:.4em;font-family:'Fredoka';font-weight:600;color:var(--coral-deep);background:var(--wash-coral);font-size:1rem;letter-spacing:.03em;padding:.4em 1.05em;border-radius:999px;margin-bottom:1rem}
  .sec-head h2{font-size:clamp(2rem,4.4vw,3rem)}
  .sec-head p{color:var(--ink-soft);font-size:1.12rem;margin-top:1rem}
  .pad{padding:clamp(64px,9vw,110px) 0}

  /* ───────── "יצרתם משהו יחד" ───────── */
  .together{background:var(--paper)}
  .together .card-wrap{max-width:760px;margin-inline:auto;text-align:center}
  .neg-list{display:inline-flex;flex-direction:column;gap:.4rem;margin:0 auto 2rem;text-align:right}
  .neg-list li{list-style:none;color:var(--ink-soft);font-size:1.12rem;display:flex;align-items:center;gap:.7rem}
  .neg-list li svg{width:20px;height:20px;color:var(--coral);flex:none}
  .swap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
  .swap .pill{background:var(--cream);border-radius:var(--radius);padding:1.6rem;text-align:right;box-shadow:var(--shadow-sm)}
  .swap .pill h3{font-family:'Fredoka';font-size:1.15rem;margin-bottom:.4rem}
  .swap .pill p{color:var(--ink-soft);font-size:1rem}
  .swap .pill.is-kid{border-top:4px solid var(--coral)}
  .swap .pill.is-parent{border-top:4px solid var(--blue)}

  /* ───────── Why photography ───────── */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.4rem);margin-top:clamp(2.6rem,4vw,3.2rem)}
  .why-card{background:#fff;padding:12px 12px 0;border-radius:7px;box-shadow:var(--shadow-md);transition:box-shadow .2s var(--ease),rotate .2s var(--ease)}
  .why-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--cream-deep)}
  .why-card:nth-child(1) img{object-position:center 42%}
  .why-card:nth-child(2) img{object-position:center 28%}
  .why-card .why-cap{padding:1rem .7rem 1.5rem;text-align:center}
  .why-card:nth-child(1){rotate:-3deg}
  .why-card:nth-child(2){rotate:2deg}
  .why-card:nth-child(3){rotate:-2deg}
  /* hover של .why-card חי בבלוק hover:hover בסוף הקובץ — במגע הוא נדבק (rotate לא מתאפס) */
  .why-card h3{font-size:1.3rem;margin-bottom:.4rem}
  .why-card p{color:var(--ink-soft);font-size:.97rem}
  .why-note{text-align:center;margin-top:2.6rem;font-family:'Fredoka';font-size:1.25rem;color:var(--ink)}
  .why-note span{color:var(--blue-deep)}

  /* ───────── Gallery (masonry - צילומי המשתתפים בקומפוזיציה מקורית) ───────── */
  .gallery{background:var(--paper)}
  .gal-grid{column-count:3;column-gap:1rem}
  .gal-item{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--cream-deep);break-inside:avoid;margin-bottom:1rem}
  .gal-item img{width:100%;height:auto;display:block;transition:transform .3s var(--ease)}
  .gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(35,54,69,.28));opacity:0;transition:opacity .3s}
  /* hover של .gal-item חי בבלוק hover:hover בסוף הקובץ */
  .gal-item.gal-more{display:none}
  .gal-item.just-in{animation:galIn .45s var(--ease-out) both}
  @keyframes galIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
  .gal-more-wrap{text-align:center;margin-top:1.6rem}
  .gal-more-wrap.hidden{display:none}
  @media(max-width:980px){.gal-grid{column-count:2}}
  @media(max-width:520px){.gal-grid{column-count:2;column-gap:.7rem}.gal-item{margin-bottom:.7rem}}

  /* ───────── Course (main offer) ───────── */
  .course{background:linear-gradient(180deg,var(--cream) 0%, #efe6d6 100%)}
  .offer-tag{display:flex;width:100%;justify-content:center;align-items:center;gap:.5em;background:var(--blue-deep);color:#fff;font-family:'Fredoka';font-weight:500;padding:.55em 1.1em;border-radius:999px;font-size:.95rem;margin-bottom:1rem}
  .offer-tag svg{width:1.1em;height:1.1em;flex:none}
  .course-card{
    background:var(--paper);border-radius:30px;box-shadow:var(--shadow-lg);
    overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;
  }
  .course-main{padding:clamp(28px,4vw,48px)}
  .course-main h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.4rem}
  .course-main .sub{color:var(--ink-soft);font-size:1.1rem;margin-bottom:1.8rem}
  .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.8rem}
  .detail{background:var(--cream);border-radius:16px;padding:1.1rem 1.2rem}
  .detail .lbl{display:flex;align-items:center;gap:.5em;font-size:.9rem;color:var(--ink-soft);margin-bottom:.3rem}
  .detail .lbl svg{width:17px;height:17px;color:var(--blue)}
  .detail .val{font-family:'Fredoka';font-weight:500;font-size:1.05rem;color:var(--ink)}
  .course-side{
    /* gradient starts at blue-deep so white panel text clears AA 4.5:1 (was --blue → 3.72) */
    background:linear-gradient(160deg,var(--blue-deep) 0%,#155d8f 100%);
    color:#fff;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden
  }
  .course-side .ap{position:absolute;left:-30px;bottom:-30px;width:170px;opacity:.16}
  .price-label{font-size:1rem;opacity:.9;margin-bottom:.3rem}
  .price-now{font-family:'Fredoka';font-weight:700;font-size:clamp(2.6rem,6vw,3.4rem);line-height:1;position:relative;z-index:1}
  .price-now small{font-size:1.1rem;font-weight:500}
  .price-old{opacity:.75;text-decoration:line-through;margin-top:.4rem;font-size:1.15rem}
  .price-sub{font-size:.95rem;opacity:.85;margin:.4rem 0 1.6rem}
  .course-side .btn{position:relative;z-index:1;justify-content:center}
  .course-side .btn-amber{background:var(--amber);color:#3a2700;box-shadow:0 10px 24px -8px rgba(0,0,0,.3)}
  .course-side .btn-amber:hover{transform:translateY(-3px)}

  /* what we do grid */
  .do-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,3vw,2.6rem) clamp(2.2rem,4vw,3.4rem);margin-top:clamp(40px,5vw,60px)}
  .do-card{position:relative;background:none;box-shadow:none;border-radius:0;padding:1.2rem 0 0;border-top:3px solid var(--accent);display:flex;gap:1.1rem;align-items:flex-start}
  .do-card:nth-child(1){--accent:var(--blue);--accent-ink:var(--blue-deep)}
  .do-card:nth-child(2){--accent:var(--coral);--accent-ink:var(--coral-deep)}
  .do-card:nth-child(3){--accent:var(--amber);--accent-ink:#9a6608}
  .do-card:nth-child(4){--accent:var(--blue);--accent-ink:var(--blue-deep)}
  .do-card:nth-child(5){--accent:var(--coral);--accent-ink:var(--coral-deep)}
  .do-card .num{flex:none;width:auto;height:auto;background:none;border-radius:0;font-family:'Fredoka';font-weight:700;font-size:clamp(2.3rem,4vw,3rem);line-height:.85;color:var(--accent-ink)}
  .do-card h3{font-size:1.22rem;margin-bottom:.35rem}
  .do-card p{color:var(--ink-soft);font-size:1rem}
  .do-card.span2{grid-column:1 / -1;background:var(--cream);border-radius:0 0 14px 14px;padding:1.2rem clamp(1.4rem,3vw,2rem) clamp(1.5rem,3vw,2rem);align-items:center}

  /* outcome strip */
  .outcome{background:var(--paper)}
  .outcome-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:center}
  .outcome ul{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem}
  .outcome ul li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.08rem}
  .outcome ul li svg{width:24px;height:24px;color:var(--blue);flex:none;margin-top:2px}
  .frame-card{background:#fff;padding:18px 18px 56px;border-radius:8px;box-shadow:var(--shadow-lg);transform:rotate(-2deg);max-width:360px;margin-inline:auto;position:relative}
  .frame-card .inner{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--cream-deep)}
  .frame-card .inner img{width:100%;height:100%;object-fit:cover;display:block}
  .frame-card .cap{position:absolute;bottom:18px;right:0;left:0;text-align:center;font-family:'Fredoka';color:var(--ink-soft)}
  .frame-tape{position:absolute;top:-14px;right:50%;transform:translateX(50%) rotate(-3deg);width:120px;height:30px;background:rgba(244,166,35,.55);border-radius:3px}

  /* ───────── Workshop (smaller offer) ───────── */
  .workshop-card{
    background:linear-gradient(160deg,#fff 0%, var(--paper) 100%);
    border:2px dashed rgba(233,87,63,.3);
    border-radius:30px;padding:clamp(28px,4vw,52px);
    display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,52px);align-items:center;box-shadow:var(--shadow-md)
  }
  .workshop-card h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:.4rem}
  .workshop-card .sub{color:var(--ink-soft);font-size:1.08rem;margin-bottom:1.6rem}
  .ws-details{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem}
  .ws-chip{background:var(--cream);border-radius:14px;padding:.7rem 1rem;font-size:.95rem;display:flex;align-items:center;gap:.5em}
  .ws-chip svg{width:16px;height:16px;color:var(--coral)}
  .ws-chip b{font-family:'Fredoka';font-weight:600}
  .ws-price{text-align:center;background:var(--cream);border-radius:24px;padding:2.2rem 1.6rem;box-shadow:var(--shadow-sm)}
  .ws-price .big{font-family:'Fredoka';font-weight:700;font-size:clamp(2.4rem,5vw,3rem);color:var(--coral);line-height:1}
  .ws-price .lbl{color:var(--ink-soft);margin:.4rem 0 1.4rem}
  .ws-price .btn{width:100%;justify-content:center}
  .ws-note{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin-top:1rem}
  /* מועדים קרובים — מוצגים בסקשן עצמו (נטענים מ-sessions.php), כל שורה פותחת את המודאל עם המועד מסומן */
  .ws-dates{margin-top:1.6rem;display:flex;flex-direction:column;gap:.6rem}
  .ws-dates:empty{display:none}
  .ws-dates-title{font-family:'Fredoka';font-weight:600;font-size:1.02rem;color:var(--ink);display:flex;align-items:center;gap:.45em;margin-bottom:.1rem}
  .ws-dates-title svg{width:18px;height:18px;color:var(--coral)}
  .ws-date{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;font-family:inherit;cursor:pointer;background:var(--cream);border:2px solid transparent;border-radius:14px;padding:.8rem 1rem;transition:border-color .2s,background .2s,transform .15s var(--ease-out)}
  .ws-date:hover{background:#fff;border-color:var(--blue)}
  .ws-date:active{transform:scale(.99)}
  .ws-date .wsd-main{flex:1;min-width:0}
  .ws-date .wsd-date{display:block;font-family:'Fredoka';font-weight:500;font-size:1.02rem;color:var(--ink)}
  .ws-date .wsd-place{display:flex;align-items:center;gap:.35em;color:var(--ink-soft);font-size:.9rem;margin-top:.2rem}
  .ws-date .wsd-place svg{width:14px;height:14px;color:var(--coral);flex:none}
  .ws-date .wsd-spots{font-size:.82rem;color:var(--coral-deep);font-weight:600;margin-top:.25rem;display:block}
  .ws-date .wsd-go{flex:none;color:var(--blue-deep);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.25em}
  .ws-date .wsd-go svg{width:16px;height:16px}
  .ws-dates-empty{background:var(--cream);border-radius:14px;padding:.9rem 1.1rem;color:var(--ink-soft);font-size:.95rem}
  .ws-dates-empty a{color:var(--blue-deep);font-weight:600;text-decoration:none}
  .ws-dates-empty a:hover{text-decoration:underline}
  .ws-date-hidden{display:none}
  /* מועד שאזל: הכרטיס מעומעם ולא אינטראקטיבי, עם תג "אזל" בולט */
  .ws-date.sold{cursor:default;background:var(--cream)}
  .ws-date.sold:hover{background:var(--cream);border-color:transparent}
  .ws-date.sold:active{transform:none}
  .ws-date.sold .wsd-main{opacity:.55}
  .ws-date .wsd-sold{flex:none;font-family:'Fredoka';font-weight:600;font-size:.82rem;color:#fff;background:var(--coral-deep);border-radius:999px;padding:.28em .9em;letter-spacing:.02em}
  .ws-more{align-self:stretch;justify-content:center;background:var(--cream);border:2px dashed var(--blue);border-radius:14px;cursor:pointer;font-family:'Fredoka';font-weight:600;color:var(--blue-deep);font-size:.98rem;padding:.72rem 1rem;display:inline-flex;align-items:center;gap:.4em;transition:background .2s,border-color .2s,transform .16s var(--ease-out)}
  .ws-more:active{transform:scale(.98)}
  .ws-more::after{content:"";width:0;height:0;border-inline:5px solid transparent;border-top:6px solid currentColor;margin-top:1px}
  .ws-more:hover{background:#fff;border-color:var(--blue-deep)}

  /* ───────── Testimonials ───────── */
  .greviews{background:linear-gradient(180deg,#efe6d6,var(--cream))}
  .video-block{text-align:center;margin-bottom:clamp(48px,7vw,80px)}
  .video-title{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-bottom:clamp(20px,3vw,32px)}
  .video-frame{position:relative;width:100%;max-width:340px;margin-inline:auto;aspect-ratio:9/16;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);background:linear-gradient(160deg,var(--blue),var(--blue-deep));border:6px solid #fff}
  .video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
  /* facade: poster אמיתי + רצועת ערוץ + כפתור play; ה-<video> המקומי נטען רק בלחיצה (לא מוריד את ה-MP4 לפני כוונה) */
  .video-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;background:#000 center/cover no-repeat;color:#fff;font-family:'Fredoka';transition:filter .2s,transform .2s var(--ease-out)}
  .video-play::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.05) 26%,rgba(0,0,0,0) 55%,rgba(0,0,0,.32))}
  .video-play:hover,.video-play:focus-visible{filter:brightness(1.06)}
  .video-play:active{transform:scale(.985)}
  /* רצועת ערוץ עליונה — מחליפה את ה-chrome של יוטיוב */
  .vp-head{position:absolute;top:0;inset-inline:0;display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;text-align:start;z-index:1}
  .vp-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);flex:none}
  .vp-meta{display:flex;flex-direction:column;line-height:1.18}
  .vp-meta b{font-size:.98rem;font-weight:700}
  .vp-meta small{font-size:.78rem;opacity:.85;font-family:'Heebo'}
  .video-play .vp-icon{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .2s}
  /* hover של .vp-icon חי בבלוק hover:hover בסוף הקובץ */
  .video-play .vp-icon svg{width:34px;height:34px;color:var(--blue-deep);margin-inline-start:4px}
  .video-play .vp-label{position:relative;z-index:1;font-size:1.05rem;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.45)}
  /* loading state after click: play icon → spinner (perceived performance) */
  .video-play.is-loading{cursor:default}
  .video-play.is-loading .vp-icon svg{display:none}
  .video-play.is-loading .vp-icon::after{content:"";width:32px;height:32px;border-radius:50%;border:3px solid rgba(46,139,201,.25);border-top-color:var(--blue-deep);animation:vpSpin .7s linear infinite}
  @keyframes vpSpin{to{transform:rotate(360deg)}}

  /* ───────── כרטיס אינסטגרם: CTA לעקוב + רילס אחרונים (עמוד תודה, מוזן מ-ig.php) ───────── */
  /* mobile-first: הערכים הבסיסיים = טלפון (3 כרטיסים ~105px ברוחב 375), ההגדלה ב-min-width */
  .reels{padding:.5rem 0 3.5rem}
  .reels .sec-head{margin-bottom:clamp(18px,3vw,32px)}
  /* הזמנה משנית בעמוד תודה, לא כותרת סקשן ראשית: יורדת מ-3rem כדי שהאישור ("הפרטים אצלי")
     יישאר האלמנט הדומיננטי בעמוד. */
  .reels .sec-head h2{font-size:clamp(1.5rem,3vw,1.9rem)}
  .ig-card{max-width:640px;margin-inline:auto;background:#fff;border-radius:18px;box-shadow:var(--shadow-md);padding:1rem}
  .reels .ig-card.reveal{transition-delay:.06s}/* סטגר: הכותרת ואז הכרטיס, לא שניהם באותו פריים */
  /* שורה אחת גם בטלפון: אווטאר · שם+handle · כפתור קצר ("עקבו אחרינו") */
  .ig-head{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem .7rem;align-items:center;margin-bottom:.9rem}
  /* דיסקית קרם מאחורי הלוגו: הסמל עצמו פוליירואיד לבן, ובלי רקע נגדי הוא נבלע ברקע הכרטיס הלבן */
  /* אווטאר = אייקון המותג מההדר, עם טבעת בסגנון סטורי */
  .ig-avatar{width:48px;height:48px;border-radius:50%;display:block;object-fit:cover;background:var(--cream);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--coral)} /* ה-SVG לא ריבועי (1012×650) — cover ממלא את העיגול */
  /* flex-start = הצד הימני ב-RTL; ה-handle עם dir=ltr אחרת נצמד לשמאל העמודה */
  .ig-id{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0}
  .ig-name{font-family:'Fredoka';font-size:1.15rem;color:var(--ink)}
  .ig-handle{color:var(--ink-soft);font-size:.92rem}
  .ig-follow{gap:.45em;padding:.6rem .95rem;font-size:.95rem;white-space:nowrap}
  .ig-follow svg{width:17px;height:17px;flex:none}
  .reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;max-width:none;margin:0}
  .reel-grid:empty{display:none} /* כשל fetch: app.js מרוקן את ה-grid ולא משאירים חלל ריק בכרטיס */
  /* שלד עד שהרילס מגיעים: אותו יחס וקימור כמו .reel-card, כדי שהחלפה לא תזיז כלום (CLS) */
  .reel-skel{aspect-ratio:9/16;border-radius:10px;background:var(--cream);animation:skelPulse 1.4s ease-in-out infinite}
  @keyframes skelPulse{50%{opacity:.55}}
  /* הכרטיס: רק transform מונפש (GPU); הצל קבוע. לחיצה = scale(.97) כמו הכפתורים באתר.
     fill-mode=backwards ולא both: אנימציה עם fill קדימה נשארת ב-"animation origin" וגוברת על
     כל הצהרה רגילה — כלומר transform:none של ה-to היה מנטרל לצמיתות את ה-hover/active של הכרטיס.
     backwards מחיל רק את מצב ה-from במהלך ההשהיה, ומשחרר בסיום.
     הסטגר נקבע ב-app.js לפי הסדר בפועל: כרטיס שנשמט (decode נכשל) לא נספר, ולכן nth-child היה
     מחלק דיליי שגוי לכרטיסים ששרדו. */
  .reel-card{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:var(--shadow-md);transition:transform .16s var(--ease-out);-webkit-tap-highlight-color:transparent;animation:reelIn .3s var(--ease-out) backwards}
  @keyframes reelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .reel-card:active{transform:scale(.97)}
  .reel-card img{width:100%;height:100%;object-fit:cover;display:block}
  .reel-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);display:grid;place-items:center;pointer-events:none;box-shadow:0 2px 8px rgba(35,54,69,.18)}
  .reel-badge svg{width:14px;height:14px;margin-left:2px} /* מרכוז אופטי של משולש שמצביע ימינה, לא תלוי-כיוון */
  @media(min-width:521px){
    .ig-card{padding:1.2rem 1.4rem 1.4rem}
    .ig-follow{padding:.7rem 1.2rem;font-size:1rem}
    .ig-avatar{width:56px;height:56px}
    .reel-grid{gap:clamp(.8rem,2vw,1.3rem)}
    .reel-card{border-width:4px;border-radius:14px}
    .reel-badge{width:44px;height:44px}
    .reel-badge svg{width:18px;height:18px}
  }
  @media(prefers-reduced-motion:reduce){
    .reel-card{animation:reelFade .2s ease backwards}
    .reel-card{animation-delay:0ms!important}/* גובר על ה-inline delay שמזריק app.js */
    @keyframes reelFade{from{opacity:0}to{opacity:1}}
    .reel-card:active{transform:none}
    .reel-skel{animation:none}
  }

  /* Google-style reviews */
  .greviews-summary{display:flex;align-items:center;justify-content:center;gap:.8rem 1rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
  .greviews-summary .g-logo{width:38px;height:38px;flex:none}
  .greviews-score{font-family:'Fredoka';font-weight:600;font-size:1.7rem;color:var(--ink);line-height:1}
  .greviews-summary .stars{display:inline-flex;gap:2px;color:var(--amber)}
  .greviews-summary .stars svg{width:20px;height:20px}
  .greviews-summary .g-sub{color:var(--ink-soft);font-size:.95rem}
  .greviews-summary .g-sub a{color:var(--blue-deep);font-weight:600;text-decoration:none}
  .greviews-summary .g-sub a:hover{text-decoration:underline}
  .greviews-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .greviews-viewport::-webkit-scrollbar{display:none}
  .greviews-viewport.is-marquee{overflow:hidden;scroll-snap-type:none}
  .greviews-track{display:flex;align-items:stretch;gap:1.4rem;padding-bottom:.5rem}
  .greviews-track.is-marquee{width:max-content;padding-bottom:0;will-change:transform}
  .greview{flex:0 0 min(320px,82vw);background:var(--paper);border-radius:18px;padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.9rem;scroll-snap-align:start}
  .greview-head{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;border-radius:10px}
  .greview-head:hover .greview-name{text-decoration:underline}
  .greview-head:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .greview-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fredoka';font-weight:600;font-size:1.2rem;overflow:hidden}
  .greview-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .greview-meta{flex:1;min-width:0}
  .greview-name{font-weight:600;color:var(--ink);font-size:.98rem}
  .greview .stars{display:flex;gap:2px;color:var(--amber);margin-top:3px}
  .greview .stars svg{width:15px;height:15px}
  .greview-head .g-mark{width:20px;height:20px;flex:none;opacity:.8;transition:opacity .15s}
  .greview-head:hover .g-mark{opacity:1}
  .greview-text{color:var(--ink);font-size:1.02rem;line-height:1.6;margin:0}

  /* ───────── About Gal ───────── */
  .about-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:center}
  .about-photo{position:relative;max-width:380px;margin-inline:auto}
  .about-photo img{border-radius:24px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--cream-deep)}
  .about-photo .badge{position:absolute;bottom:-18px;right:-14px;background:#fff;border-radius:18px;padding:.8rem 1.1rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.6rem;font-family:'Fredoka';font-weight:500}
  .about-photo .badge svg{width:30px;height:30px;color:var(--coral)}
  .about h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:1rem}
  .about p{color:var(--ink-soft);font-size:1.1rem;margin-bottom:1rem}
  .about .accent{font-family:'Fredoka';font-size:1.3rem;color:var(--ink);line-height:1.5;margin-top:1.4rem}
  .about .accent span{color:var(--blue-deep)}

  /* ───────── FAQ ───────── */
  .faq{background:var(--paper)}
  .faq-list{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:.9rem}
  .faq-item{background:var(--cream);border-radius:18px;overflow:hidden;border:1px solid rgba(35,54,69,.06)}
  .faq-q{width:100%;text-align:right;background:none;border:none;cursor:pointer;padding:1.3rem 1.5rem;font-family:'Fredoka';font-weight:500;font-size:1.15rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .faq-q .chev{width:24px;height:24px;flex:none;color:var(--blue);transition:transform .24s var(--ease)}
  .faq-item.open .chev{transform:rotate(180deg)}
  /* grid 0fr→1fr פותח לגובה התוכן האמיתי בלי לחשב scrollHeight ידנית ובלי layout-thrash */
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
  .faq-item.open .faq-a{grid-template-rows:1fr}
  .faq-a p{overflow:hidden;min-height:0;padding:0 1.5rem;color:var(--ink-soft);font-size:1.05rem;opacity:0;visibility:hidden;transition:padding .3s var(--ease-out),opacity .2s var(--ease-out)}
  .faq-item.open .faq-a p{padding-bottom:1.4rem;opacity:1;visibility:visible}

  /* ───────── Final CTA ───────── */
  .final{padding:clamp(70px,10vw,120px) 0;text-align:center;position:relative;overflow:hidden}
  .final h2{font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:1rem}
  .final p{color:var(--ink-soft);font-size:1.2rem;max-width:34rem;margin:0 auto 1rem}
  .final .mini{font-family:'Fredoka';color:var(--ink);font-size:1.15rem;margin-bottom:2.2rem}
  .final-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

  /* ───────── Footer ───────── */
  footer{background:var(--ink);color:#cdd8e0;padding:clamp(40px,6vw,64px) 0 32px}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
  .foot-brand{display:flex;align-items:center;gap:.6rem;font-family:'Fredoka';font-weight:600;font-size:1.5rem;color:#fff}
  .foot-brand .mark{width:40px;height:40px}
  footer .tag{margin-top:.6rem;max-width:32ch;color:#9fb0bd}
  .foot-links{display:flex;flex-direction:column;gap:.6rem}
  .foot-links a{color:#cdd8e0;transition:color .2s}
  .foot-links a:hover{color:var(--amber)}
  .foot-social{display:flex;gap:.7rem;margin-top:.4rem}
  .foot-social a{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.08);color:#cdd8e0;
    transition:background .2s,color .2s,transform .2s var(--ease);
  }
  .foot-social a:hover{background:var(--amber);color:var(--ink);transform:translateY(-3px)}
  .foot-social svg{width:20px;height:20px}
  .foot-bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.9rem;color:#8da0ad}
  .foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .foot-legal a{color:#cdd8e0;transition:color .2s}
  .foot-legal a:hover{color:var(--amber);text-decoration:underline}
  .foot-legal .sep{color:#8da0ad;pointer-events:none}

  /* ───────── Modal (join → date/place → demo payment) ───────── */
  .modal-overlay{
    position:fixed;inset:0;z-index:200;display:none;
    align-items:center;justify-content:center;padding:20px;
    background:rgba(35,54,69,.55);backdrop-filter:blur(4px);
    opacity:0;transition:opacity .16s var(--ease-out);/* exit: snappy */
  }
  .modal-overlay.open{display:flex}
  .modal-overlay.show{opacity:1;transition:opacity .24s var(--ease-out)}/* enter: a touch slower */
  .modal{
    background:var(--paper);border-radius:26px;box-shadow:var(--shadow-lg);
    width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
    position:relative;padding:clamp(20px,3.4vw,32px);
    transform:translateY(14px) scale(.98);opacity:0;
    transition:transform .16s var(--ease-out),opacity .16s var(--ease-out);/* exit: snappy */
  }
  .modal-overlay.show .modal{transform:none;opacity:1;transition:transform .26s var(--ease-out),opacity .26s var(--ease-out)}/* enter: deliberate */
  .modal:focus{outline:none}/* dialog receives focus programmatically on open - no visible ring needed */
  .modal-close{
    position:absolute;top:14px;left:14px;width:38px;height:38px;border:none;cursor:pointer;z-index:1;
    background:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s;
  }
  .modal-close:hover{background:var(--cream-deep)}
  .modal-close svg{width:20px;height:20px}
  .modal-eyebrow{font-family:'Fredoka';font-weight:600;color:var(--coral-deep);font-size:.95rem;margin-bottom:.3rem}
  .modal h3{font-size:1.4rem;margin-bottom:.3rem}
  .modal-sub{color:var(--ink-soft);font-size:1rem;margin-bottom:.9rem}
  .session-list{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.4rem}
  .session{
    display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;
    background:var(--cream);border:2px solid transparent;border-radius:16px;padding:1rem 1.1rem;transition:border-color .2s,background .2s;
  }
  .session:hover{background:#fff}
  .session input{margin-top:.25rem;accent-color:var(--blue);width:18px;height:18px;flex:none}
  .session.sel{border-color:var(--blue);background:#fff}
  .session .s-main{flex:1}
  .session .s-date{display:block;font-family:'Fredoka';font-weight:500;font-size:1.06rem;color:var(--ink)}
  .session .s-place{display:flex;align-items:center;gap:.4em;color:var(--ink-soft);font-size:.94rem;margin-top:.25rem}
  .session .s-place svg{width:15px;height:15px;color:var(--coral);flex:none}
  .session a.s-place-link{color:var(--blue-deep);text-decoration:none}
  .session a.s-place-link:hover{text-decoration:underline}
  .session .s-spots{display:block;font-size:.85rem;color:var(--coral-deep);font-weight:600;margin-top:.3rem}
  /* מועד שאזל במודאל: השורה מעומעמת וחסומה, עם תג "אזל" בולט */
  .session.sold{cursor:default;background:var(--cream)}
  .session.sold:hover{background:var(--cream)}
  .session.sold .s-main{opacity:.55}
  .session .s-sold{display:inline-block;color:#fff;background:var(--coral-deep);border-radius:999px;padding:.2em .8em;font-family:'Fredoka'}
  .modal .btn{width:100%;justify-content:center}
  .modal .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
  .modal-foot-note{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:.9rem}
  .gate-actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
  .gate-actions .btn{width:100%;justify-content:center}
  .order-summary{background:var(--cream);border-radius:16px;padding:.85rem 1.1rem;margin-bottom:.9rem}
  .order-summary .row{display:flex;justify-content:space-between;gap:1rem;padding:.22rem 0;font-size:.98rem}
  .order-summary .row .lbl{color:var(--ink-soft);flex:none}
  .order-summary .row a{color:var(--blue-deep);text-decoration:none}
  .order-summary .row a:hover{text-decoration:underline}
  .order-summary .row.total{border-top:1px dashed rgba(35,54,69,.2);margin-top:.35rem;padding-top:.5rem;font-family:'Fredoka';font-weight:600;font-size:1.15rem}
  .demo-badge{display:flex;align-items:center;gap:.5em;justify-content:center;background:var(--wash-amber);color:#7a5106;font-size:.86rem;font-weight:600;padding:.6em 1em;border-radius:12px;margin-bottom:1.2rem;text-align:center}
  .demo-badge svg{width:16px;height:16px;flex:none}
  .pay-trust{display:flex;flex-wrap:wrap;gap:.45rem .9rem;justify-content:center;margin:-.5rem 0 1.4rem}
  .pay-trust span,.pay-trust a{display:inline-flex;align-items:center;gap:.4em;font-size:.82rem;color:var(--ink-soft);font-weight:500}
  .pay-trust a{color:var(--blue-deep);text-decoration:none}
  .pay-trust a:hover{text-decoration:underline}
  .pay-trust svg{width:15px;height:15px;flex:none;color:#2e9e5b}
  /* אופציית תשלום חלופית (מזומן/ביט/העברה) — משנית, מתחת לטופס האשראי */
  .pay-alt{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(35,54,69,.1);text-align:center}
  .pay-alt-sep{display:block;font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.7rem}
  .pay-alt-link{display:inline-flex;align-items:center;gap:.5em;justify-content:center;flex-wrap:wrap;width:100%;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--blue-deep);background:var(--wash-blue,rgba(46,139,201,.08));border:1.5px solid rgba(46,139,201,.25);border-radius:12px;padding:.8em 1em;cursor:pointer;transition:background .2s,border-color .2s;line-height:1.4}
  .pay-alt-link:hover{background:rgba(46,139,201,.14);border-color:var(--blue)}
  .pay-alt-link svg{width:18px;height:18px;flex:none}
  .pay-form{display:flex;flex-direction:column;gap:.6rem}
  .field{display:flex;flex-direction:column;gap:.28rem}
  /* [hidden] חייב לגבור על display:flex — אחרת `el.hidden = true` על .field לא מסתיר כלום.
     בלי זה בורר "עם מי מגיעים" נשאר גלוי בקורס גם כשהמחיר לא אושר בשרת (10/08). */
  .field[hidden]{display:none}
  .field label{font-size:.9rem;color:var(--ink-soft);font-weight:500}
  /* כוכבית לשדה חובה — נגזרת מ-required, לא מסומנת ידנית ב-HTML. alt ריק = קורא-מסך לא מקריא "*" (required כבר מוכרז).
     \200F (RLM) לפני הכוכבית מקבע אותה בקצה השמאלי גם אחרי טקסט לטיני (CVV) ובכל דפדפן; ב-kurs hero (placeholder בשדה dir=ltr) אותו תיקון: &rlm; אחרי הכוכבית */
  .field:has(> :required) > label::after{content:" \200F*" / "";color:var(--coral);font-weight:700}
  .field input{min-width:0;font-family:inherit;font-size:1rem;padding:.78em 1em;border-radius:12px;border:1.5px solid rgba(35,54,69,.15);background:#fff;color:var(--ink);transition:border-color .2s}
  .field input:focus{outline:none;border-color:var(--blue)}
  .field-row{display:flex;gap:.9rem}
  .field-row .field{flex:1;min-width:0}/* min-width:0 מאפשר לשדות (CVV) להתכווץ במובייל במקום לדחוף את השורה החוצה */
  .coupon-row{display:flex;gap:.5rem;align-items:stretch}
  .coupon-row input{flex:1;text-transform:uppercase}
  .coupon-row .btn{flex:0 0 auto;width:auto;padding:.6em 1.2em;white-space:nowrap}
  /* בורר "עם מי מגיעים" (סדנה בלבד): שני ילדים = וריאנט בתוספת מחיר; הדיסקליימר מוצג רק כשנבחר */
  .field .field-label{font-size:.9rem;color:var(--ink-soft);font-weight:500}
  .who-options{display:flex;flex-direction:column;gap:.5rem}
  .who-opt{display:flex;gap:.6rem;align-items:center;cursor:pointer;background:var(--cream);border:2px solid transparent;border-radius:12px;padding:.65rem .9rem;transition:border-color .2s,background .2s,transform .16s var(--ease-out)}
  .who-opt:hover{background:#fff}
  .who-opt:active{transform:scale(.99)}
  .who-opt:has(input:checked){border-color:var(--blue);background:#fff}
  .who-opt input{flex:0 0 auto;width:17px;height:17px;min-width:0;padding:0;border:0;border-radius:0;margin:0;accent-color:var(--blue);cursor:pointer}
  .who-opt span{font-size:.95rem;color:var(--ink)}
  .who-note{background:var(--wash-amber);color:#7a5106;font-size:.85rem;line-height:1.5;border-radius:12px;padding:.6em .9em}
  #whoField{margin-bottom:1.4rem}/* מרווח מכפתור ההמשך במסך בחירת המועד */
  .consent-opt{flex-direction:row;align-items:flex-start;gap:.55rem}
  .consent-opt input[type=checkbox]{flex:0 0 auto;width:1.15em;height:1.15em;min-width:0;padding:0;border:0;border-radius:0;margin-top:.2em;accent-color:var(--blue);cursor:pointer}
  .consent-opt label{flex:1;min-width:0;font-size:.84rem;line-height:1.45;cursor:pointer}
  .order-summary .row.discount span:last-child{color:var(--blue-deep);font-weight:600}
  .order-summary .row .was{text-decoration:line-through;opacity:.6;margin-inline-end:.5em;font-weight:400}
  .modal-back{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-family:inherit;font-size:.95rem;display:inline-flex;align-items:center;gap:.3em;margin-top:.55rem;padding:.4em}
  .modal-back:hover{color:var(--ink)}
  .modal-back svg{width:16px;height:16px}
  .modal-done{text-align:center;padding:.6rem 0}
  /* עמוד התודה מחזיר את .modal-done ככותרת עמוד. בלי הגודל המפורש ה-h1 יורש 2rem מברירת המחדל
     של הדפדפן, בעוד .sec-head h2 של סקשן האינסטגרם מגיע עד 3rem — היררכיה הפוכה בדסקטופ. */
  .thanks-hero{padding:3rem 0}
  .thanks-hero .modal-done{max-width:520px;margin-inline:auto}
  .thanks-hero .modal-done h1{font-size:clamp(2.2rem,5vw,3rem)}
  .modal-done .check{width:70px;height:70px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;animation:checkPop .5s var(--ease-out) both}
  .modal-done .check svg{width:36px;height:36px;color:#fff}
  /* rare/celebration moment - the ✓ pops in then draws itself */
  .modal-done .check svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:checkDraw .38s var(--ease-out) .16s both}
  @keyframes checkPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
  @keyframes checkDraw{to{stroke-dashoffset:0}}
  .modal-done p{color:var(--ink-soft);margin:.6rem 0 1.4rem}

  /* ───────── Contact ───────── */
  .contact{background:var(--paper)}
  .contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,56px);align-items:start}
  .contact-copy h2{font-size:clamp(1.9rem,3.8vw,2.6rem);margin-bottom:1rem}
  .contact-copy p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:1.5rem}
  .contact-methods{display:flex;flex-direction:column;gap:1rem}
  .contact-methods a{display:inline-flex;align-items:center;gap:.7rem;font-family:'Fredoka';font-weight:500;color:var(--ink)}
  .contact-methods a:hover{color:var(--blue-deep)}
  .contact-methods .ic{width:42px;height:42px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex:none}
  .contact-methods .ic svg{width:20px;height:20px;color:var(--blue)}
  .contact-form{background:var(--cream);border-radius:24px;padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.9rem}
  .contact-form .field textarea{font-family:inherit;font-size:1rem;padding:.78em 1em;border-radius:12px;border:1.5px solid rgba(35,54,69,.15);background:#fff;color:var(--ink);transition:border-color .2s;resize:vertical;min-height:96px}
  .contact-form .field textarea:focus{outline:none;border-color:var(--blue)}
  .contact-form .btn{width:100%;justify-content:center;margin-top:.3rem}
  .form-status{text-align:center;font-weight:600;padding:.7rem;border-radius:12px;display:none}
  .form-status.ok{display:block;background:rgba(46,139,201,.12);color:var(--blue-deep)}
  .form-status.err{display:block;background:var(--wash-coral);color:#b33824}
  .pay-wa{display:block;text-align:center;margin:.2rem 0 .5rem;color:var(--blue-deep);font-weight:600;text-decoration:underline}
  .pay-wa[hidden]{display:none}
  @media(max-width:760px){.contact-inner{grid-template-columns:1fr}}

  /* ───────── Floating WhatsApp ───────── */
  .wa-float{
    position:fixed;bottom:22px;right:22px;z-index:150;
    width:58px;height:58px;border-radius:50%;background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px -6px rgba(37,211,102,.55);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  }
  .wa-float:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 16px 36px -8px rgba(37,211,102,.6)}
  .wa-float svg{width:32px;height:32px;color:#fff}
  .wa-float::after{
    content:"דברו איתי";position:absolute;right:70px;white-space:nowrap;font-family:'Heebo';
    background:var(--ink);color:#fff;font-size:.85rem;font-weight:500;padding:.4em .8em;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;
  }
  /* hover של הטולטיפ חי בבלוק hover:hover בסוף הקובץ (במגע הוא נדבק אחרי נגיעה) */
  @media(max-width:560px){.wa-float{width:54px;height:54px;bottom:16px;right:16px}.wa-float::after{display:none}}

  /* ───────── Reveal animation ───────── */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
  .reveal.in{opacity:1;transform:none}
  /* stagger cards in a grid - each enters ~50ms after the previous */
  .why-grid .reveal:nth-child(2),.do-grid .reveal:nth-child(2){transition-delay:.05s}
  .why-grid .reveal:nth-child(3),.do-grid .reveal:nth-child(3){transition-delay:.1s}
  .do-grid .reveal:nth-child(4){transition-delay:.15s}
  .do-grid .reveal:nth-child(5){transition-delay:.2s}

  /* ───────── Interaction polish ───────── */
  /* press feedback on non-button pressables (Emil: every pressable must respond) */
  .faq-q{transition:transform .16s var(--ease-out)}
  .faq-q:active{transform:scale(.99)}
  .session{transition:border-color .2s,background .2s,transform .16s var(--ease-out)}
  .session:active{transform:scale(.985)}
  .modal-close:active{transform:scale(.92)}
  .burger:active{transform:scale(.92)}
  .wa-float:active{transform:scale(.94)}
  .foot-social a:active{transform:scale(.92)}
  /* touch devices fire :hover on tap → reset the lift so it doesn't stick */
  @media (hover:none){
    .btn-primary:hover,.btn-blue:hover,.btn-ghost:hover,
    .why-card:hover,.do-card:hover,.wa-float:hover,
    .foot-social a:hover{transform:none}
  }
  /* hover-only polish. חייב לחיות כאן ולא בבסיס: אלה אפקטים ש-:hover במגע מפעיל בנגיעה
     ומשאיר תקועים, ואי-אפשר לאפס אותם בבלוק hover:none (rotate/opacity של ::after/scale
     על צאצא) בלי לשכתב את הערך המקורי של כל וריאנט. */
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover,.btn-blue:hover,.btn-ghost:hover{transform:translateY(-3px)}
    .btn:hover:active{transform:translateY(-3px) scale(.96)}
    .why-card:hover{rotate:0deg;box-shadow:var(--shadow-lg)}
    .hero-pola:hover{box-shadow:0 20px 50px -12px rgba(35,54,69,.4)}
    .gal-item:hover img{transform:scale(1.04)}
    .gal-item:hover::after{opacity:1}
    .video-play:hover .vp-icon{transform:scale(1.08)}
    .wa-float:hover::after{opacity:1}
    .reel-card:hover{transform:translateY(-3px) scale(1.02);transition-duration:.2s}
    .reel-card:hover:active{transform:translateY(-3px) scale(.97)}
  }

  /* ───────── Responsive ───────── */
  @media(max-width:920px){
    .hero-grid,.course-card,.outcome-inner,.workshop-card,.about-inner{grid-template-columns:1fr}
    .course-side{order:-1}
    .collage{max-width:420px}
    .why-grid,.do-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .burger{display:flex}
    .nav-cta .btn-ghost{display:none}
    /* מובייל: המבורגר בימין, מותג במרכז, CTA בשמאל (grid RTL: עמודה 1 = ימין) */
    .nav{display:grid;grid-template-columns:1fr auto 1fr}
    .burger{justify-self:start}
    .nav-cta{justify-self:end}
    /* בלי אלה עמודת ה-auto נדחסת, המילה "פוטוקידס" נשפכת מחוץ ל-.brand ורוכבת על ה-CTA
       (375px: 30.8px חפיפה · 320px: 46.3px + גלישה אופקית של העמוד). הסמל נשאר, והמילה
       ממילא מופיעה גדולה ב-hero מיד מתחת. */
    .brand span{display:none}
    .nav-cta .btn{font-size:.9rem;padding:.72em 1.2em}
    .about-photo{order:-1}
    .hero-logo{display:none}
    .hero-mobrand{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-bottom:1.3rem;text-align:center}
    .hero-mobrand img{width:clamp(112px,30vw,150px);height:auto}
    .hero-mobrand span{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(2rem,8.5vw,2.7rem);color:var(--blue-deep);line-height:1}
    /* center all hero elements on mobile */
    .hero-copy{text-align:center}
    .hero .micro{margin-inline:auto}
    .hero-cta{justify-content:center}
    .hero h1 .h1-topic{margin-inline:auto}
    /* polaroids: top pair flanks the brand, bottom pair lives in a reserved band below the CTA —
       percent anchors collided with the buttons at mid widths */
    .hero{padding-bottom:clamp(160px,34vw,195px)}
    .hero-grid{z-index:4}
    .hero-pola{width:clamp(90px,25vw,120px)}
    .hero-pola.a{top:1%;left:-4%;transform:rotate(-8deg)}
    .hero-pola.b{top:5%;right:-5%;left:auto;bottom:auto;transform:rotate(8deg)}
    .hero-pola.c{bottom:12px;left:-4%;right:auto;top:auto;transform:rotate(7deg)}
    .hero-pola.d{display:block;bottom:22px;right:-4%;top:auto;transform:rotate(-7deg)}
    /* זוג הפולורואידים נשאר מעל הכותרת ולא מתנגש בכפתור;
       זה גם דורס את padding-bottom של הרצועה התחתונה שה-.hero הבסיסי מגדיר למובייל —
       עמודי נחיתה (kurs/sadna) אין להם פולורואידים תחתונים ולא צריכים את הרצועה */
    .landing-hero{padding:clamp(126px,25vw,154px) 0 clamp(64px,10vw,86px)}
  }
  @media(max-width:560px){
    .swap,.detail-grid{grid-template-columns:1fr}
    .hero .micro{max-width:none}
    .landing-hero h1{font-size:clamp(2.75rem,14vw,3.45rem)}
    .landing-hero .hero-subtitle{font-size:1.35rem}
    .hero-form-row{flex-direction:column}
    .hero-form > .btn{width:100%;justify-content:center}
  }

  /* mobile menu — אותו טריק grid 0fr→1fr של ה-FAQ: נפתח לגובה התוכן האמיתי בלי למדוד
     scrollHeight. הקו התחתון הוא inset shadow על ה-inner (ולא border על המעטפת) כדי
     שייחתך יחד עם התוכן כשהתפריט סגור ולא ישאיר פס 1px מתחת ל-header. */
  .mobile-menu{display:grid;grid-template-rows:0fr;background:var(--paper);transition:grid-template-rows .24s var(--ease-out)}
  .mobile-menu.show{grid-template-rows:1fr}
  .mobile-menu-inner{
    overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:.4rem;
    padding:0 clamp(20px,5vw,40px);box-shadow:inset 0 -1px 0 rgba(35,54,69,.08);
    /* visibility מוציאה את הקישורים מסדר ה-Tab ומקוראי המסך כשסגור (display:none עשה זאת קודם),
       ומושהית ביציאה כדי שהתוכן לא ייעלם בבת אחת בזמן שהמעטפת עוד נסגרת */
    opacity:0;visibility:hidden;
    transition:opacity .14s var(--ease-out),visibility 0s linear .14s,padding .24s var(--ease-out);
  }
  .mobile-menu.show .mobile-menu-inner{
    padding-block:1rem 1.4rem;opacity:1;visibility:visible;
    transition:opacity .2s var(--ease-out) .05s,visibility 0s,padding .24s var(--ease-out);
  }
  .mobile-menu a{padding:.7rem .4rem;font-family:'Fredoka';font-weight:500;border-bottom:1px solid rgba(35,54,69,.06)}
  .mobile-menu .btn{margin-top:.6rem;justify-content:center}

  @media(prefers-reduced-motion:reduce){
    /* פחות תנועה ועדינה - לא אפס: מנטרל אנימציות אוטומטיות (טבעת/ספינר) ותנועת reveal,
       אך שומר מעברי opacity/color (מודאל, FAQ, צבעים) שתורמים להבנה */
    *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
    .reveal{opacity:1!important;transform:none!important}
    /* ה-✓ הוא רגע האישור היחיד בעמוד התודה. הכלל הוא פחות תנועה, לא אפס: מוותרים על ה-pop
       ועל ציור הקו, ומשאירים fade של opacity — בלי שום תזוזה במרחב. */
    .modal-done .check{animation:checkFade .25s ease both!important;animation-duration:.25s!important}
    .modal-done .check svg path{animation:none!important;stroke-dashoffset:0!important}
    @keyframes checkFade{from{opacity:0}to{opacity:1}}
  }

  /* באנר יידוע על קובצי Cookie (פיקסל מטא + GA) */
  /* sticky (ולא fixed): הבאנר הוא הילד האחרון ב-body, ולכן תופס מקום אמיתי בסוף המסמך —
     הפוטר מתנקה מתחתיו מעצמו, בלי padding שמחושב ב-JS ובלי קריאת offsetHeight בכל resize. */
  .consent-banner{
    /* bottom:1rem = הרווח מקצה המסך. בלי margin תחתון: sticky מרתק את ה-margin box,
       וכל margin-bottom נוסף היה נספר פעמיים ודוחף את הבאנר מתחת לקצה. */
    position:sticky;z-index:160;bottom:1rem;
    margin:1rem auto 0;width:calc(100% - 2rem);max-width:680px;
    display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;justify-content:space-between;
    background:var(--paper);border:1.5px solid rgba(35,54,69,.12);border-radius:18px;
    padding:1.1rem 1.3rem;box-shadow:0 18px 40px -12px rgba(35,54,69,.3);
    opacity:0;transform:translateY(18px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  }
  /* [hidden] חייב לגבור על display:flex שלמעלה — אחרת הבאנר נשאר ב-DOM (opacity:0) ובולע קליקים על הפוטר */
  .consent-banner[hidden]{display:none}
  .consent-banner.show{opacity:1;transform:none}
  .consent-text{flex:1 1 280px;color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin:0}
  .consent-text a{color:var(--blue-deep);text-decoration:underline}
  .consent-actions{display:flex;gap:.6rem;flex:none}
  .consent-actions .btn{font-size:.92rem;padding:.6em 1.3em}
  @media(max-width:560px){
    .consent-actions{width:100%}
    .consent-actions .btn{flex:1;justify-content:center}
  }