@font-face{font-family:Ploni;src:url(fonts/ploni-regular-aaa.woff2) format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:Ploni;src:url(fonts/ploni-demibold-aaa.woff2) format("woff2");font-weight:600;font-display:swap}
  @font-face{font-family:Ploni;src:url(fonts/ploni-bold-aaa.woff2) format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:Ploni;src:url(fonts/ploni-black-aaa.woff2) format("woff2");font-weight:900;font-display:swap}
  /* headlines — Anomalia (her pick) */
  @font-face{font-family:Anomalia;src:url(fonts/anomalia-regular-aaa.woff2) format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:Anomalia;src:url(fonts/anomalia-bold-aaa.woff2) format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:Anomalia;src:url(fonts/anomalia-ultrabold-aaa.woff2) format("woff2");font-weight:800;font-display:swap}
  h1,h2{font-family:Anomalia,Ploni,sans-serif}

  :root{
    /* brand */
    --blue:#0461FD; --sky:#8CEDFD; --sun:#EFD70B; --flame:#F74808;
    /* the character render's own blues — the hero is built from them so the image melts in */
    --hero-in:#4b6fd3; --hero-mid:#3356b1; --hero-out:#1c3192;
    --ink:#0f1b4d; --mute:#5b6488; --line:#e3e7f3; --paper:#fff; --soft:#f3f6fd;
    --gut:clamp(20px,3.2vw,72px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scrollbar-gutter:stable}
  body{font-family:Ploni,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:18px;line-height:1.5}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{width:calc(100% - 2 * var(--gut));margin-inline:auto}
  /* the logo's own cut-paper polygon, reused as badge / tag shape */
  .poly{clip-path:polygon(12.6% 16%,85% 0,100% 39%,94% 100%,13% 99%,0 61%)}

  /* ── loader: logo + four brand shapes hopping, fades into the hero ── */
  .loader{display:none}
  html.anim .loader{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:clamp(22px,2vw,34px);background:radial-gradient(70% 95% at 50% 62%,var(--hero-in) 0%,var(--hero-mid) 42%,var(--hero-out) 100%);transition:opacity .55s ease,visibility 0s .55s}
  .loader img{height:clamp(70px,6vw,110px);width:auto;animation:ldIn .7s cubic-bezier(.2,.7,.2,1) backwards}
  .loader .dots{display:flex;gap:12px}
  .loader .dots i{width:16px;height:16px;background:var(--c);animation:ldHop 1.1s ease-in-out infinite;animation-delay:calc(var(--n) * .12s)}
  .loader.out{opacity:0;visibility:hidden}
  .loader.out img,.loader.out .dots{translate:0 -14px;transition:translate .55s ease}
  @keyframes ldIn{from{opacity:0;scale:.9}}
  @keyframes ldHop{0%,60%,100%{translate:0 0}30%{translate:0 -14px}}
  @media (prefers-reduced-motion:reduce){.loader{display:none!important}}

  /* ── buttons ─────────────────────────── */
  .btn{display:inline-flex;align-items:center;gap:12px;height:clamp(56px,3.4vw,68px);padding:0 clamp(26px,1.8vw,36px);border-radius:999px;font-weight:700;font-size:clamp(18px,1.1vw,22px);white-space:nowrap;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s,border-color .35s}
  .btn:hover{transform:translateY(-2px)}
  .btn.sun{background:var(--sun);color:var(--ink)}
  .btn.sun:hover{background:#fff}
  .btn.ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
  .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
  .btn .arr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .btn:hover .arr{transform:translateX(-4px)}
  .play{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center}
  .btn .play,.btn .arr{order:9}   /* icons always sit on the left end of the button (RTL) */
  .play::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--blue);margin-inline-start:-2px}

  /* ── header (sits on the blue) ───────── */
  .hd{position:absolute;inset:0 0 auto;z-index:10}
  .hd .wrap{display:flex;align-items:center;gap:clamp(24px,2.6vw,56px);height:clamp(88px,5.6vw,112px)}
  .logo img{height:clamp(46px,3vw,62px);width:auto}
  .nav{display:flex;gap:clamp(22px,2.2vw,44px);font-weight:600;font-size:clamp(19px,1.1vw,22px);color:rgba(255,255,255,.9)}
  .nav a{position:relative;transition:color .3s}
  .nav a::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:3px;background:var(--sun);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav a:hover{color:#fff}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a{white-space:nowrap}
  .nav a[aria-current]{color:#fff}
  .nav a[aria-current]::after{transform:scaleX(1)}
  /* one underline that glides between the links (nav.js / Header.tsx); it moves only after its first placement, so a page never loads with it sliding in */
  .nav.slide{position:relative}
  .nav.slide a::after{display:none}
  .nav-bar{position:absolute;right:auto;left:0;bottom:-6px;height:3px;width:0;background:var(--sun);border-radius:2px}
  .nav-bar.on{transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .4s cubic-bezier(.2,.7,.2,1)}
  .search{margin-inline-start:auto;display:flex;align-items:center;gap:10px;height:clamp(50px,2.9vw,58px);width:clamp(220px,16vw,320px);padding:0 22px;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.72);font-size:clamp(17px,1vw,19px);transition:background .3s}
  .search:hover{background:rgba(255,255,255,.2)}
  .search svg{flex:none}
  .hd .acts{display:flex;gap:10px;margin-inline-start:calc(14px - clamp(24px,2.6vw,56px))}
  /* only the search gives way, then it leaves; the logo and the links never squash */
  .hd .logo,.hd .nav,.hd .acts{flex:none}
  .hd .logo img{max-width:none}
  @media (max-width:1320px){
    .hd .search{display:none}
    .hd .acts{margin-inline-start:auto}
  }
  @media (max-width:1100px){
    .hd .acts .ghost{display:none}
    .nav{gap:16px;font-size:18px}
  }
  @media (max-width:900px){
    .hd .nav{display:none}
  }
  .hd .btn{height:clamp(50px,2.9vw,58px);padding:0 clamp(22px,1.4vw,30px);font-size:clamp(17px,1vw,20px)}
  /* phone menu (nav.js) */
  .hd-burger{flex:none;position:relative;width:50px;height:50px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .3s,border-color .3s}
  .hd-burger:hover{background:rgba(255,255,255,.14);border-color:#fff}
  .hd-burger i{position:absolute;left:14px;right:14px;top:calc(50% - 1px);height:2px;border-radius:2px;background:currentColor;transition:translate .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .hd-burger i:nth-child(1){translate:0 -6px}
  .hd-burger i:nth-child(3){translate:0 6px}
  .hd .hd-burger{display:none}
  @media (max-width:900px){.hd .hd-burger{display:block}}
  .hd-menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0 0 24px;border:0;color:#fff;overflow-y:auto;overscroll-behavior:contain;
    background:radial-gradient(70% 95% at 50% 62%,var(--hero-in) 0%,var(--hero-mid) 42%,var(--hero-out) 100%);
    clip-path:circle(0 at var(--x,0) var(--y,0));transition:clip-path .45s cubic-bezier(.4,0,.2,1)}
  .hd-menu.show{clip-path:circle(150vmax at var(--x,0) var(--y,0))}
  .hd-menu::backdrop{background:none}
  .hd-menu[open]{display:flex;flex-direction:column}
  .hd-menu-top{flex:none;display:flex;align-items:center;justify-content:space-between;height:clamp(88px,5.6vw,112px)}
  .hd-menu-top .logo img{max-width:none}
  .hd-menu.show .hd-burger i:nth-child(1){translate:0 0;rotate:45deg}
  .hd-menu.show .hd-burger i:nth-child(2){opacity:0}
  .hd-menu.show .hd-burger i:nth-child(3){translate:0 0;rotate:-45deg}
  .hd-menu-links{flex:1 0 auto;display:flex;flex-direction:column;padding-block:8px 24px}
  .hd-menu-links a{padding-block:13px;border-bottom:1px solid rgba(255,255,255,.16);font-family:Anomalia,Ploni,sans-serif;font-size:clamp(25px,7vw,36px);line-height:1.2;color:#fff;white-space:nowrap;opacity:0;translate:0 14px;transition:color .25s}
  .hd-menu-links a:hover,.hd-menu-links a[aria-current]{color:var(--sun)}
  .hd-menu.show .hd-menu-links a{opacity:1;translate:0 0;transition:opacity .4s ease calc(.12s + var(--i) * 40ms),translate .5s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--i) * 40ms),color .25s}
  .hd-menu-acts{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hd-menu-acts .btn{justify-content:center;height:54px;padding:0 16px;font-size:18px}
  @media (prefers-reduced-motion:reduce){
    .hd-menu,.hd-menu-links a,.hd-burger i{transition:none!important}
    .hd-menu-links a{opacity:1;translate:none}
  }

  /* ── area 1: hero ────────────────────── */
  /* the area is as tall as the character + header — no dead space above the head */
  .hero{--hd:clamp(88px,5.6vw,112px);--kid:max(400px,min(34vw,calc(100svh - 430px)));
    position:relative;height:calc(var(--kid) + var(--hd) + 38px);overflow:hidden;color:#fff;
    background:radial-gradient(70% 95% at 50% 62%,var(--hero-in) 0%,var(--hero-mid) 42%,var(--hero-out) 100%)}
  /* character ~70% of the area's height, text columns sized to it */
  .hero .wrap{position:relative;height:100%;display:grid;grid-template-columns:1.2fr 30vw 1fr;gap:clamp(24px,2.6vw,56px);align-items:center;padding-top:var(--hd);padding-bottom:40px}
  .kid{position:absolute;bottom:30px;left:50%;translate:-50% 0;height:var(--kid);width:auto;max-width:none;z-index:1}
  .hero .bold,.hero .rest{position:relative;z-index:2}
  /* hero kid: the original pose stays still; only the pupils glide left/right after the pointer */
  .hero .kid{aspect-ratio:1100/1086}
  .hero .kid > img{display:block;width:100%;height:100%}
  .hero .kid .eye{position:absolute;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .hero .kid .eye.l{left:33.727%;top:42.265%;width:10.818%;height:9.116%;-webkit-mask-image:url(img/kid-eye-L.png);mask-image:url(img/kid-eye-L.png)}
  .hero .kid .eye.l img{position:absolute;left:32.773%;top:29.293%;width:68.067%;height:auto;max-width:none;translate:var(--dx,0%) var(--dy,0%);scale:var(--sx,1) var(--sy,1);filter:brightness(var(--br,1))}
  .hero .kid .eye.r{left:55.091%;top:41.621%;width:11.000%;height:9.669%;-webkit-mask-image:url(img/kid-eye-R.png);mask-image:url(img/kid-eye-R.png)}
  .hero .kid .eye.r img{position:absolute;left:0.826%;top:26.667%;width:66.942%;height:auto;max-width:none;translate:var(--dx,0%) var(--dy,0%);scale:var(--sx,1) var(--sy,1);filter:brightness(var(--br,1))}
  .eyebrow{display:flex;align-items:center;gap:12px;font-weight:400;font-size:clamp(18px,1.15vw,23px);color:var(--sky);margin-bottom:clamp(16px,1.2vw,24px)}
  .hero h1{font-weight:400;font-size:clamp(40px,3.5vw,76px);line-height:1.1;letter-spacing:-.01em}
  .hero h1 span{display:block;white-space:nowrap}
  .hero h1 em{font-style:normal;color:var(--sun)}
  .claim{margin-top:clamp(22px,1.6vw,32px);font-weight:400;font-size:clamp(20px,1.5vw,30px);line-height:1.3;color:#fff}
  .hero .rest{display:flex;flex-direction:column;gap:clamp(24px,1.7vw,34px);align-items:flex-start;max-width:30em}
  .lead{font-size:clamp(20px,1.4vw,28px);line-height:1.45;color:rgba(255,255,255,.88)}
  /* the two buttons always sit side by side: they scale with the column instead of wrapping */
  .cta{display:flex;gap:clamp(8px,.7vw,14px);flex-wrap:nowrap}
  .cta .btn{height:clamp(50px,3.4vw,68px);padding:0 clamp(14px,1.2vw,36px);gap:clamp(6px,.6vw,12px);font-size:clamp(14px,1.1vw,22px)}
  .cta .play{width:clamp(24px,1.9vw,32px);height:clamp(24px,1.9vw,32px)}
  /* tablet: two columns, the text beside Skoli */
  @media (max-width:1100px){
    .hero{--kid:min(42vw,420px);height:auto;min-height:calc(var(--kid) + var(--hd) + 38px)}
    .hero .wrap{display:block;height:auto;padding-bottom:70px}
    .hero .wrap > div:empty,.hero .lead{display:none}
    .hero .bold,.hero .rest{max-width:calc(100% - var(--kid) * .9)}
    .hero h1{font-size:clamp(36px,5.6vw,52px)}
    .hero .eyebrow{font-size:clamp(15px,2.2vw,20px);margin-bottom:10px}
    .claim{margin-top:12px;font-size:clamp(18px,2.4vw,24px)}
    .hero .rest{margin-top:20px}
    .cta .btn{justify-content:center;height:52px;padding:0 18px;font-size:clamp(14px,2vw,17px)}
    .hero .kid{left:clamp(0px,2vw,30px);translate:none}
    html.anim .hero .kid[data-r]{--tx:0}
  }
  /* phone: the text on top, Skoli under it still points straight at the lessons */
  @media (max-width:640px){
    .hero{--kid:min(78vw,400px);min-height:0;display:flex;flex-direction:column}
    .hero .wrap{padding-bottom:0}
    .hero .bold,.hero .rest{max-width:none}
    .hero h1{font-size:clamp(32px,9.2vw,56px)}
    .hero .eyebrow{font-size:clamp(15px,4.2vw,20px)}
    .claim{font-size:clamp(18px,4.8vw,24px)}
    .cta{width:100%}
    .cta .btn{flex:1 1 auto;padding:0 14px;font-size:clamp(14px,3.9vw,18px)}
    .hero .kid{position:relative;order:1;left:auto;bottom:auto;align-self:center;margin:26px 0 30px}
  }
  @media (max-width:360px){
    .cta .btn{padding:0 10px;font-size:13px}
    .cta .play{width:20px;height:20px}
  }
  .trust{display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:14px;font-weight:400;font-size:clamp(16px,1vw,20px);color:rgba(255,255,255,.8)}
  .trust span{display:inline-flex;align-items:center;gap:8px}
  .trust .sep{font-style:normal;color:rgba(255,255,255,.35)}

  /* ── latest lessons (still inside the first screen) ── */
  /* white sheet with rounded corners that rises over the blue */
  .latest{position:relative;z-index:3;margin-top:-40px;background:var(--paper);border-radius:40px 40px 0 0;padding:clamp(36px,2.8vw,56px) 0 clamp(56px,4vw,80px)}
  .latest .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(32px,2.6vw,52px)}
  .latest h2{font-weight:400;font-size:clamp(40px,3.2vw,68px);line-height:1.15}
  .latest h2.ul{position:relative;padding-bottom:.28em}
  .latest h2.ul::after{content:"";position:absolute;right:0;bottom:0;width:2.6em;height:.13em;border-radius:99px;background:var(--sun);transform-origin:right;scale:0 1;transition:scale .9s cubic-bezier(.2,.7,.2,1) .15s}
  .latest.in h2.ul::after{scale:1 1}
  .live{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--blue)}
  .live i{width:10px;height:10px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(247,72,8,.5);animation:live 1.8s ease-out infinite}
  @keyframes live{70%{box-shadow:0 0 0 10px rgba(247,72,8,0)}100%{box-shadow:0 0 0 0 rgba(247,72,8,0)}}
  /* brand squares as nikud — they drop into place when the area enters */
  .nk{position:relative;display:inline-block}
  .nk::after{content:"";position:absolute;left:50%;width:.2em;height:.2em;background:var(--c);translate:-50% 0;top:calc(100% - .04em)}
  .nk.up::after{top:.06em}
  .nk::after{opacity:0;transform:translateY(-1.2em) rotate(-30deg)}
  .latest.in .nk::after{animation:drop .9s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--dl,.1s)}
  @keyframes drop{to{opacity:1;transform:none}}
  .rail-ctrl{display:flex;align-items:center;gap:12px}
  .arrow{width:clamp(52px,3.2vw,62px);aspect-ratio:1;border-radius:50%;border:1.5px solid #cfd6ee;background:#fff;display:grid;place-items:center;font-size:22px;color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
  .arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .btn.line{border:1.5px solid var(--blue);color:var(--blue)}
  .btn.line:hover{background:var(--blue);color:#fff}
  .latest h2 .tag{display:inline-block;background:var(--blue);color:#fff;padding:.04em .55em .1em;rotate:-3deg;margin-inline:.05em}
  .more{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(18px,1.15vw,22px);color:var(--blue)}
  .more .arr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .more:hover .arr{transform:translateX(-4px)}
  /* gallery: 6 cards in view, endless loop driven by the arrows beside "לכל השיעורים" */
  .gal{overflow:hidden;padding-top:10px;margin-top:-10px}
  .lessons{--lg:clamp(14px,1.3vw,26px);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * var(--lg)) / 6);gap:var(--lg)}
  .lessons.go{transition:translate .6s cubic-bezier(.45,0,.2,1)}
  .row-act{display:flex;align-items:center;gap:12px}
  .gal-arr{width:clamp(56px,3.4vw,68px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--blue);background:#fff;color:var(--blue);font-size:22px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
  .gal-arr:hover{background:var(--blue);color:#fff}
  .lesson{display:flex;flex-direction:column;gap:12px;cursor:pointer;scroll-snap-align:start}
  .thumb{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:var(--soft);display:grid;place-items:center;color:var(--mute);font-size:clamp(16px,1vw,19px);font-weight:600}
  /* fixed lesson cover: the kid doing the activity on the left, the lesson name on the right */
  .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
  .thumb .cap{position:absolute;z-index:1;inset-inline-start:6%;bottom:13%;max-width:44%;display:flex;flex-direction:column;gap:6px;font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(17px,1.3vw,27px);line-height:1.12;color:#fff;text-align:right}
  .thumb .cap small{font-family:Ploni,sans-serif;font-size:max(14px,.62em);font-weight:600;color:var(--sky)}
  /* hover: cover lifts, picture leans in, white play pops with a pulse */
  .thumb{transition:translate .45s cubic-bezier(.2,.7,.2,1)}
  .thumb img{transition:scale .7s cubic-bezier(.2,.7,.2,1)}
  .thumb::after{content:"";position:absolute;inset:0;background:var(--blue);opacity:0;transition:opacity .35s}
  .thumb .pl{position:absolute;z-index:2;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;scale:.4;opacity:0;transition:scale .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
  .thumb .pl::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ink);margin-inline-start:-4px}
  .thumb .pl::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #fff;opacity:0}
  .lesson b{transition:color .3s}
  .lesson:hover .thumb{translate:0 -6px}
  .lesson:hover .thumb img{scale:1.07}
  .lesson:hover .thumb::after{opacity:.12}
  .lesson:hover .thumb .pl{scale:1;opacity:1}
  .lesson:hover .thumb .pl::after{animation:plPulse 1.4s ease-out .3s infinite}
  .lesson:hover b{color:var(--blue)}
  @keyframes plPulse{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.7}}
  .chip{position:absolute;z-index:3;font-size:clamp(14px,.9vw,17px);font-weight:700;padding:5px 13px;border-radius:999px}
  .chip.new{top:12px;right:12px;background:var(--sun);color:var(--ink)}
  .chip.dur{bottom:12px;left:12px;background:rgba(15,27,77,.85);color:#fff;font-weight:600}
  .lesson b{font-size:clamp(20px,1.4vw,28px);font-weight:700;line-height:1.3}
  .lesson small{font-size:clamp(17px,1.05vw,21px);color:var(--mute);margin-top:-8px}
  /* tablet: three cards in view, the arrows stay */
  @media (max-width:1100px){
    .latest .row{gap:16px}
    .latest h2{font-size:clamp(32px,4.6vw,46px);white-space:nowrap}
    .gal-arr{width:50px}
    .row-act .btn{height:50px;padding:0 20px;font-size:16px}
    .lessons{grid-auto-columns:calc((100% - 2 * var(--lg)) / 3)}
  }
  /* phone: the row is swiped or moved by the arrows; both come after it, beside "all lessons" */
  @media (max-width:640px){
    .latest .wrap{display:flex;flex-direction:column}
    .latest .row{display:contents}
    .latest h2{align-self:flex-start;margin-bottom:20px;font-size:clamp(26px,8.4vw,48px)}
    .gal{order:1;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
    .lessons{width:max-content;grid-auto-columns:min(72vw,320px)}
    .lesson b{font-size:19px}
    .lesson small{font-size:16px}
    .row-act{order:2;margin-top:22px;width:100%}
    .row-act .btn{flex:1;height:52px;justify-content:center;padding:0 12px;font-size:17px}
  }

  /* ── Hanukkah banner ────────────────── */
  .promo{padding:clamp(40px,3.4vw,72px) 0 clamp(64px,5vw,104px)}
  .hb{position:relative;overflow:hidden;border-radius:40px;color:var(--ink);aspect-ratio:2000/496;display:grid;grid-template-columns:minmax(0,46%) 1fr;align-items:center;
    background:var(--sun)}
  .hb .txt{position:relative;z-index:2;isolation:isolate;padding:clamp(20px,1.6vw,36px) clamp(90px,11vw,240px) clamp(20px,1.6vw,36px) clamp(24px,2vw,48px);display:flex;flex-direction:column;gap:clamp(10px,.9vw,18px);align-items:flex-start;text-align:right;justify-content:center;align-self:stretch}
  .hb .tagline{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--blue);font-weight:600;font-size:clamp(16px,1vw,20px);color:#fff}
  .hb h2{font-weight:400;font-size:clamp(44px,3.8vw,82px);line-height:1.05}
  .hb h2 em{font-style:normal;color:var(--blue)}
  .hb p{font-size:clamp(19px,1.3vw,26px);line-height:1.45;color:var(--ink);max-width:19em}
  .hb .cta{display:flex;gap:14px;flex-wrap:wrap}
  /* eight brand squares = the hanukkiah; they light one by one */
  .menorah{display:flex;align-items:flex-end;gap:clamp(10px,.9vw,18px);margin-top:6px}
  .menorah i{position:relative;width:clamp(18px,1.3vw,26px);height:clamp(18px,1.3vw,26px);background:var(--c)}
  .menorah i.shamash{margin-bottom:clamp(14px,1vw,20px)}
  .menorah i::before{content:"";position:absolute;left:50%;bottom:calc(100% + 6px);width:.62em;height:.95em;font-size:clamp(18px,1.3vw,26px);translate:-50% 0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
    background:radial-gradient(circle at 50% 70%,#fff 0 18%,#ffd84a 40%,#ff8a1f 75%,transparent 76%);opacity:0;scale:.3;transform-origin:50% 100%;transition:opacity .35s,scale .5s cubic-bezier(.3,1.6,.5,1)}
  .hb.in .menorah i::before{opacity:1;scale:1;transition-delay:var(--d);animation:flick 1.6s ease-in-out infinite alternate;animation-delay:var(--d)}
  @keyframes flick{to{transform:rotate(4deg) scaleY(1.08)}}
  /* orange version */
  .hb.orange{color:#fff;background:#c63702}
  .hb .art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:left bottom}
  .hb.orange h2{font-size:clamp(30px,2.7vw,58px);font-weight:400;line-height:1.1}
  .hb.orange h2 span{display:block;white-space:nowrap}
  /* three numbered workshop cards */
  .hb .ws{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,.9vw,16px);width:100%;max-width:660px}
  .hb .ws li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(20px,1.5vw,28px) clamp(18px,1.3vw,24px);color:var(--ink);rotate:var(--rt,0deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .hb.in .ws li{animation:wsIn .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.15s + var(--i)*.12s)}
  @keyframes wsIn{from{opacity:0;translate:0 24px}}
  /* hand-cut polygon: coloured outline + white fill, same shape */
  .hb .ws li::before,.hb .ws li::after{content:"";position:absolute;z-index:-1;clip-path:var(--p)}
  .hb .ws li::before{inset:0;background:var(--c)}
  .hb .ws li::after{inset:4px;background:#fff}
  .hb .ws li:hover{transform:translateY(-4px) rotate(-1deg)}
  .hb .ws .n{display:inline-block;background:var(--ink);color:var(--c);font-family:Anomalia,Ploni,sans-serif;font-size:clamp(24px,1.7vw,34px);line-height:1;padding:.12em .32em .18em;rotate:-4deg}
  .hb .ws li:nth-child(3) .n{color:#fff}
  .hb .ws b{font-weight:700;font-size:clamp(17px,1.15vw,22px);line-height:1.25}
  .hb .ws small{font-size:clamp(15px,.9vw,17px);color:#3d4670}
  .hb .list{list-style:none;display:flex;flex-wrap:wrap;gap:10px 14px}
  .hb .list li{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:600;font-size:clamp(16px,1.05vw,20px)}
  .hb .list .sq{display:inline-block;width:14px;height:14px;flex:none}
  .hb .list .sq.y{background:var(--sun)} .hb .list .sq.c{background:var(--sky)}
  .hb.orange .tagline{background:rgba(255,255,255,.22);color:#fff;font-size:clamp(17px,1.15vw,22px);padding:10px 22px}
  .hb.orange h2 em{color:#fff}
  .hb.orange p{color:#fff}
  .hb.orange .btn.blue{background:#fff;color:var(--ink)}
  .hb.orange .btn.blue:hover{background:var(--ink);color:#fff}
  /* wide scene: the kid turned toward the text, surrounded by workshop crafts; its right edge melts into the banner */
  .hb .vis{position:relative;align-self:stretch;min-height:inherit}
  .hb .vis img{position:absolute;bottom:0;translate:0 12%;left:clamp(32px,4vw,96px);max-width:none;height:calc((100% - 40px) / .78);width:auto;object-fit:contain;object-position:left bottom}


  /* ── area 3: how it works ─────────────── */
  .how{padding:0 0 clamp(64px,5vw,104px);background:var(--soft)}
  .how-box{--kw:clamp(240px,calc(15vw + 30px),390px);--pad:clamp(40px,3.6vw,76px);position:relative;display:grid;grid-template-columns:auto 1fr var(--kw);align-items:center;gap:clamp(28px,2.6vw,64px);padding:var(--pad);border-radius:40px;background:var(--blue);color:#fff}
  .how .h-head,.how .steps{position:relative;z-index:1}
  .how .steps{margin-inline-start:clamp(20px,2.6vw,64px)}
  /* Skoli with a pencil presents the steps, cut at the thigh by the box's bottom edge */
  .how-kid{position:absolute;z-index:2;left:calc(var(--pad) - var(--kw) * .08);bottom:0;width:calc(var(--kw) * 1.08);height:auto;max-width:none;pointer-events:none}
  .how .h-head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.1vw,22px)}
  .how .h-head .eb{font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--sky)}
  .how h2{font-weight:400;font-size:clamp(38px,3.1vw,66px);line-height:1.08}
  .how .h-head p{font-size:clamp(19px,1.25vw,24px);color:rgba(255,255,255,.85)}
  .how .h-head .btn{margin-top:clamp(6px,.6vw,12px)}
  .steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.4vw,28px)}
  .steps li{position:relative;display:flex;flex-direction:column;gap:clamp(10px,.8vw,16px);padding:clamp(20px,1.6vw,40px);border-radius:28px;background:#fff;color:var(--ink)}
  /* arrow between cards (RTL: points left, to the next step) */
  .steps li:not(:last-child)::after{content:"←";position:absolute;top:50%;left:calc(-1 * clamp(16px,1.4vw,28px) / 2);translate:-50% -50%;z-index:1;width:clamp(34px,2.4vw,46px);aspect-ratio:1;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font-size:18px;font-weight:700}
  .steps .n{font-family:Anomalia,Ploni,sans-serif;font-size:clamp(56px,4.4vw,92px);line-height:.9;color:var(--blue)}
  .steps h3{font-weight:700;font-size:clamp(20px,1.4vw,30px);white-space:nowrap}
  .steps p{font-size:clamp(17px,1.05vw,20px);line-height:1.5;color:var(--mute)}
  /* ── area 4: packages ─────────────────── */
  .packs{padding:clamp(80px,7vw,140px) 0;background:var(--soft);border-radius:40px 40px 0 0}
  .packs .p-head{text-align:center;max-width:1100px;margin:0 auto clamp(48px,4vw,80px)}
  .packs .p-head .eb{display:inline-block;font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--blue);margin-bottom:14px}
  .packs h2{font-weight:400;font-size:clamp(40px,3.4vw,72px);line-height:1.08}
  .packs .p-head p{margin-top:16px;font-size:clamp(19px,1.3vw,25px);color:var(--mute)}
  .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,32px);align-items:stretch;max-width:1500px;margin-inline:auto}
  .pack{position:relative;display:flex;flex-direction:column;gap:clamp(16px,1.2vw,24px);padding:clamp(32px,2.6vw,52px);border-radius:32px;background:#fff;color:var(--ink);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .pack:hover{transform:translateY(-6px)}
  .pack .lbl{align-self:flex-start;display:inline-block;background:var(--ink);color:var(--c);font-family:Anomalia,Ploni,sans-serif;font-size:clamp(26px,1.9vw,38px);line-height:1;padding:.18em .45em .24em;rotate:-3deg}
  .pack .who{font-size:clamp(18px,1.15vw,22px);color:var(--mute)}
  .pack .price{display:flex;align-items:baseline;gap:8px;font-family:Anomalia,Ploni,sans-serif;font-size:clamp(52px,4vw,84px);line-height:1}
  .pack .price .cur{font-family:Ploni,sans-serif;font-weight:600;font-size:.42em}
  .pack .price small{font-family:Ploni,sans-serif;font-size:clamp(18px,1.1vw,21px);color:var(--mute)}
  .pack ul{list-style:none;display:flex;flex-direction:column;gap:12px;padding-top:clamp(16px,1.2vw,24px);border-top:1.5px solid #e3e7f3;font-size:clamp(18px,1.15vw,22px)}
  .pack li{display:flex;align-items:center;gap:12px}
  .pack li::before{content:"";flex:none;width:12px;height:12px;background:var(--c)}
  .pack .btn{margin-top:auto;justify-content:center}
  .pack .btn.ink-line{border:1.5px solid var(--ink)}
  /* the recommended one */
  .pack.hot{background:var(--blue);color:#fff}
  .pack.hot .who,.pack.hot .price small{color:rgba(255,255,255,.8)}
  .pack.hot ul{border-color:rgba(255,255,255,.25)}
  .pack.hot .lbl{background:#fff;color:var(--blue)}
  .pack .badge{position:absolute;top:clamp(28px,2.2vw,44px);left:clamp(28px,2.2vw,44px);background:var(--sun);color:var(--ink);font-weight:700;font-size:clamp(15px,.95vw,18px);padding:6px 14px;border-radius:999px}
  .packs .note{text-align:center;margin-top:clamp(28px,2.4vw,44px);font-size:clamp(17px,1.05vw,20px);color:var(--mute)}

  /* ── area 4: free courses ─────────────── */
  .free{padding:clamp(48px,4vw,88px) 0 clamp(80px,7vw,140px);background:var(--soft)}
  .free .f-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,3vw,60px)}
  .free .f-head > div{display:flex;flex-direction:column;gap:clamp(10px,.8vw,16px)}
  .free .eb{font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--blue)}
  .free h2{font-weight:400;font-size:clamp(40px,3.4vw,72px);line-height:1.05}
  .free .f-head p{font-size:clamp(19px,1.3vw,25px);color:var(--mute)}
  .f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,32px)}
  .course{display:flex;flex-direction:column;border-radius:28px;background:#fff;overflow:hidden;color:var(--ink);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .course:hover{transform:translateY(-6px)}
  .course .cv::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 60%,rgba(140,237,253,.0),rgba(140,237,253,0));transition:background .5s}
  .course .cv{position:relative;aspect-ratio:16/9;overflow:hidden}
  .course .cv img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .course:hover .cv img{transform:scale(1.04)}
  /* course name on the empty blue side of the cover, like the lesson cards */
  .course .cv .cap{position:absolute;z-index:1;inset-inline-start:6%;top:50%;translate:0 -50%;max-width:34%;display:flex;flex-direction:column;gap:8px;font-family:Anomalia,Ploni,sans-serif;font-size:clamp(24px,1.9vw,40px);line-height:1.12;color:#fff;text-align:right}
  .course .cv .cap small{font-family:Ploni,sans-serif;font-weight:600;font-size:max(16px,.48em);color:var(--sky)}
  .course .free-tag{position:absolute;top:16px;right:16px;background:var(--sun);color:var(--ink);font-weight:700;font-size:clamp(15px,.95vw,18px);padding:6px 16px;border-radius:999px}
  .course .bd{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,1.6vw,30px)}
  .course .sub{font-weight:600;font-size:clamp(15px,.95vw,18px);color:var(--blue)}
  .course h3{font-weight:700;font-size:clamp(22px,1.5vw,30px);line-height:1.2}
  .course .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:clamp(16px,1vw,19px);color:var(--mute)}
  .course .go{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:clamp(17px,1.05vw,20px);color:var(--blue)}
  .course .go .arr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .course:hover .go .arr{transform:translateX(-4px)}

  /* ── area 5: testimonials — dark stage, Skoli in the centre, parents' notes floating around him ── */
  .voices{position:relative;overflow:hidden;padding:clamp(80px,7vw,140px) 0 0;color:#fff;
    background:radial-gradient(52% 66% at 50% 70%,#4f95ff 0%,rgba(4,97,253,.9) 42%,rgba(4,97,253,0) 78%),linear-gradient(180deg,#0242b8 0%,#0349c9 100%)}   /* brand blue: darker rim, bright centre */
  /* brand shapes fly in from outside when the section arrives, then float gently in the open areas */
  .vs-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
  .vs-shapes b{position:absolute;left:var(--x);top:var(--y);opacity:0;transform:translate(var(--fx),var(--fy)) scale(.3) rotate(-140deg);transition:transform 1.6s cubic-bezier(.18,.85,.25,1) var(--dl),opacity .5s ease var(--dl)}
  .in .vs-shapes b{opacity:1;transform:none}
  .vs-shapes i{display:block;width:var(--s);aspect-ratio:1;translate:-50% -50%;rotate:var(--r,0deg);animation:sjFloat var(--t,9s) ease-in-out var(--d,0s) infinite;
    background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 45%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000) 100%)}
  .vs-shapes .dot{border-radius:50%}
  .vs-shapes .ring{border-radius:50%;-webkit-mask:radial-gradient(farthest-side,#0000 50%,#000 53%),conic-gradient(#0000 0 75deg,#000 75deg);-webkit-mask-composite:source-in;mask:radial-gradient(farthest-side,#0000 50%,#000 53%),conic-gradient(#0000 0 75deg,#000 75deg);mask-composite:intersect}
  .vs-shapes .tri{clip-path:polygon(50% 6%,96% 90%,4% 90%)}
  .vs-shapes .star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
  .vs-shapes .bar{aspect-ratio:2.6;border-radius:999px}
  .vs-shapes .soft{filter:blur(6px)}
  @media (prefers-reduced-motion:reduce){.vs-shapes b{transition:none;opacity:1;transform:none}.vs-shapes i{animation:none}}
  .voices .v-head{position:relative;z-index:2;text-align:center;margin-bottom:clamp(24px,2vw,40px)}
  .voices .eb{display:inline-block;font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--sky);margin-bottom:14px}
  .voices h2{font-weight:400;font-size:clamp(42px,3.6vw,78px);line-height:1.08}
  .voices h2 span{display:block;color:var(--sun)}
  .stage{position:relative;height:clamp(560px,40vw,820px);max-width:1500px;margin-inline:auto}
  /* Skoli rises from the bottom edge, cut mid-thigh by the section so he does not float */
  .stage .kid{position:absolute;bottom:-30%;left:50%;translate:-50% 0;height:124%;width:auto;max-width:none;z-index:1}
  .note{position:absolute;z-index:2;width:clamp(280px,21vw,400px);padding:clamp(20px,1.6vw,30px);border-radius:26px;background:#fff;color:var(--ink);rotate:var(--r,0deg);transition:rotate .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
  .note:hover{rotate:0deg;transform:translateY(-6px)}
  .note .stars{color:var(--sun);font-size:clamp(18px,1.2vw,22px);letter-spacing:.12em;margin-bottom:10px}
  .note p{font-size:clamp(18px,1.15vw,22px);line-height:1.5}
  .note .who{display:flex;align-items:center;gap:12px;margin-top:clamp(14px,1.1vw,20px)}
  .note .av{flex:none;width:clamp(40px,2.6vw,50px);aspect-ratio:1;border-radius:50%;background:var(--c);display:grid;place-items:center;font-weight:700;font-size:clamp(17px,1.05vw,20px);color:var(--ink)}
  .note b{display:block;font-weight:700;font-size:clamp(17px,1.05vw,20px)}
  .note small{font-size:clamp(15px,.95vw,18px);color:var(--mute)}
  @keyframes noteIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
  /* shared section heading: centred, two lines, second line in the accent colour */
  .sh{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,.8vw,16px);margin-bottom:clamp(36px,3vw,60px)}
  .sh .eb{font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--blue)}
  .sh h2{font-weight:400;font-size:clamp(42px,3.6vw,78px);line-height:1.08}
  .sh h2 span{display:block;color:var(--blue)}
  .sh p{font-size:clamp(19px,1.3vw,25px);color:var(--mute)}
  .sh .filters{margin-top:clamp(8px,.8vw,16px);justify-content:center}
  /* ── area 6: FAQ ─────────────────────── */
  .faq{position:relative;overflow:hidden;padding:clamp(80px,7vw,140px) 0;background:#fff}
  .faq .wrap{position:relative;z-index:1}
  /* brand shapes drifting along both sides */
  @keyframes fqFloat{50%{transform:translateY(-18px) rotate(8deg)}}
  /* questions rise in one by one */
  .faq.in .faq-list details{animation:fqIn .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.12s + var(--i) * .08s)}
  @keyframes fqIn{from{opacity:0;transform:translateY(22px)}}
  /* smooth open/close */
  .faq details .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
  .faq details .ans > div{overflow:hidden}
  .faq details.open .ans{grid-template-rows:1fr}
  .faq details .ans p{opacity:0;translate:0 -6px;transition:opacity .35s .05s,translate .45s cubic-bezier(.2,.7,.2,1)}
  .faq details.open .ans p{opacity:1;translate:0 0}
  /* "ask Skoli": a question box with typing suggestions, chips with the common questions, Skoli types the answer */
  .faq .faq-list{display:none}
  .ask{max-width:980px;margin-inline:auto;display:flex;flex-direction:column;align-items:stretch;gap:clamp(18px,1.5vw,28px)}
  .ask-box{display:flex;align-items:center;gap:12px;height:clamp(68px,4.6vw,84px);padding-inline:clamp(22px,1.8vw,32px) 8px;border-radius:999px;background:#fff;border:2px solid #dfe5f5;transition:border-color .3s}
  .ask-box:focus-within{border-color:var(--blue)}
  .ask-box svg{flex:none;width:26px;height:26px;color:var(--blue)}
  .ask-box input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:clamp(19px,1.3vw,24px);font-weight:600;color:var(--ink)}
  .ask-box input::placeholder{color:#9aa3c2;font-weight:500}
  .ask-box .btn{height:calc(100% - 0px);height:clamp(52px,3.6vw,66px);border:0;cursor:pointer}
  .ask-next{display:none}
  .ask-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
  .ask-chips button{border:1.5px solid #dfe5f5;cursor:pointer;font:inherit;font-weight:600;font-size:clamp(16px,1.02vw,19px);color:var(--ink);padding:12px 20px;border-radius:999px;background:var(--soft);transition:background .3s,color .3s,border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
  .ask-chips button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
  .ask-chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .ask-ans{display:flex;align-items:flex-start;gap:16px;min-height:clamp(120px,8vw,150px)}
  .ask-ans img{flex:none;width:clamp(60px,4.4vw,80px);height:auto;border-radius:50%}
  .ask-ans .bub{flex:1;padding:clamp(20px,1.6vw,28px) clamp(24px,2vw,36px);border-radius:28px;border-start-start-radius:6px;background:var(--soft);opacity:0;translate:0 10px;transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1)}
  .ask-ans.show .bub{opacity:1;translate:none}
  .ask-ans b{display:block;font-size:clamp(15px,.95vw,18px);color:var(--blue);margin-bottom:6px}
  .ask-ans p{font-size:clamp(19px,1.25vw,24px);line-height:1.55;color:var(--ink);min-height:1.55em}
  .ask-ans .dots{display:inline-flex;gap:6px;padding-top:6px}
  .ask-ans .dots i{width:9px;height:9px;border-radius:50%;background:var(--blue);animation:askDot 1s ease-in-out infinite}
  .ask-ans .dots i:nth-child(2){animation-delay:.15s}.ask-ans .dots i:nth-child(3){animation-delay:.3s}
  @keyframes askDot{0%,60%,100%{opacity:.25;translate:0 0}30%{opacity:1;translate:0 -5px}}
  .faq-list{max-width:1100px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(10px,.8vw,14px)}
  .faq details{border-radius:24px;background:var(--soft);transition:background .35s}
  .faq details.open{background:#fff;box-shadow:inset 0 0 0 1.5px #dfe5f5}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(20px,1.6vw,30px) clamp(24px,2vw,40px);font-weight:700;font-size:clamp(19px,1.3vw,25px)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary i{flex:none;position:relative;width:clamp(36px,2.4vw,44px);aspect-ratio:1;border-radius:50%;background:var(--blue);transition:transform .4s cubic-bezier(.2,.7,.2,1),background .35s}
  .faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:40%;height:2.5px;border-radius:2px;background:#fff;translate:-50% -50%}
  .faq summary i::after{rotate:90deg;transition:rotate .4s cubic-bezier(.2,.7,.2,1)}
  .faq details.open summary i{background:var(--sun)}
  .faq details.open summary i::before,.faq details.open summary i::after{background:var(--ink)}
  .faq details.open summary i::after{rotate:0deg}
  .faq details p{padding:0 clamp(24px,2vw,40px) clamp(22px,1.8vw,32px);font-size:clamp(18px,1.15vw,22px);line-height:1.6;color:var(--mute);max-width:60em}
  /* ── area 7: closing CTA ──────────────── */
  .final{padding:clamp(40px,3.4vw,72px) 0 clamp(48px,4vw,80px);background:#fff}
  .final-box{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:40px;color:#fff;padding-top:clamp(56px,5vw,104px);
    background:radial-gradient(42% 58% at 50% 100%,#7fb2ff 0%,rgba(79,149,255,.75) 38%,rgba(75,139,255,0) 72%),linear-gradient(180deg,#0349c9 0%,var(--blue) 55%,#0242b8 100%)}
  .final-box .txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.1vw,22px);padding:0 clamp(24px,3vw,64px)}
  .final-box h2{font-weight:400;font-size:clamp(44px,4vw,88px);line-height:1.05}
  .final-box h2 span{display:inline;color:var(--sun)}
  .final-box p{font-size:clamp(19px,1.3vw,25px);color:rgba(255,255,255,.88);max-width:34em}
  .final-box .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(6px,.6vw,12px)}
  /* kids below the buttons, cut at the waist by the bottom edge */
  .final-box .kids{position:relative;z-index:1;width:min(96%,clamp(760px,60vw,1250px));aspect-ratio:1084/500;margin-top:clamp(28px,2.4vw,48px);overflow:hidden}
  .final-box .kids img{display:block;width:100%;height:auto;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
  .final-box:hover .kids img{translate:0 -10px}
  /* ── footer ───────────────────────────── */
  .ft{background:var(--ink);color:#fff;padding:clamp(64px,5vw,104px) 0 clamp(28px,2vw,40px)}
  .ft .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(32px,3vw,64px)}
  .ft .brand img{height:clamp(46px,3vw,60px);width:auto;margin-bottom:18px}
  .ft .brand p{font-size:clamp(17px,1.05vw,20px);line-height:1.6;color:rgba(255,255,255,.72);max-width:24em}
  .ft h4{font-weight:700;font-size:clamp(18px,1.15vw,22px);margin-bottom:16px}
  .ft ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  /* footer links: a brand square pops in, the text slides over, a yellow underline draws from the right */
  .ft ul a{position:relative;display:inline-flex;align-items:center;gap:0;font-size:clamp(17px,1.05vw,20px);color:rgba(255,255,255,.75);padding-bottom:3px;
    background:linear-gradient(var(--sun),var(--sun)) no-repeat right bottom/0% 2px;transition:color .3s,gap .35s cubic-bezier(.2,.7,.2,1),background-size .45s cubic-bezier(.2,.7,.2,1)}
  .ft ul a::before{content:"";width:0;height:10px;flex:none;background:var(--c,var(--sun));rotate:45deg;scale:0;transition:width .35s cubic-bezier(.2,.7,.2,1),scale .4s cubic-bezier(.34,1.56,.64,1)}
  .ft ul a:hover{color:#fff;gap:10px;background-size:100% 2px}
  .ft ul a:hover::before{width:10px;scale:1}
  .ft ul li:nth-child(4n+2) a{--c:var(--sky)}.ft ul li:nth-child(4n+3) a{--c:var(--flame)}.ft ul li:nth-child(4n+4) a{--c:#fff}
  .ft .contact a{gap:10px;background:none}
  .ft .contact a::before{display:none}
  .ft .contact .sq{display:inline-block;width:10px;height:10px;transition:rotate .45s cubic-bezier(.34,1.56,.64,1),scale .45s cubic-bezier(.34,1.56,.64,1),border-radius .3s}
  .ft .contact a:hover .sq{rotate:225deg;scale:1.5;border-radius:3px}
  .ft .contact a:hover{color:#fff;translate:-4px 0}
  .ft .contact a{transition:color .3s,translate .35s cubic-bezier(.2,.7,.2,1)}
  .ft .brand img{transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
  .ft .brand:hover img{rotate:-4deg;scale:1.06}
  /* Skoli, the personal assistant: floating face at the bottom-right, opens a chat window */
  .sk-bot{position:fixed;z-index:60;right:clamp(16px,1.6vw,32px);bottom:clamp(16px,1.6vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-family:Ploni,sans-serif;pointer-events:none}
  .sk-bot > div:last-child,.sk-fab{pointer-events:auto}
  .sk-fab{position:relative;width:clamp(64px,4.6vw,80px);aspect-ratio:1;border:0;padding:0;border-radius:50%;cursor:pointer;background:var(--sky);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
  .sk-fab img{width:100%;height:100%;border-radius:50%;display:block}
  .sk-fab::after{content:"";position:absolute;top:4%;left:4%;width:22%;height:22%;border-radius:50%;background:#25d366;border:3px solid #fff}
  .sk-fab:hover{transform:scale(1.08) rotate(-6deg)}
  .sk-bot.open .sk-fab{transform:scale(.9)}
  .sk-tip{position:absolute;bottom:calc(100% + 12px);right:0;width:max-content;max-width:280px;padding:14px 18px;border-radius:20px;border-end-start-radius:4px;background:#fff;color:var(--ink);font-weight:600;font-size:19px;line-height:1.4;opacity:0;translate:0 8px;pointer-events:none;transition:opacity .4s,translate .5s cubic-bezier(.2,.7,.2,1)}
  .sk-bot.hint .sk-tip{opacity:1;translate:none;pointer-events:auto}
  .sk-bot.open .sk-tip{opacity:0;pointer-events:none}
  .sk-win{width:min(440px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 140px));display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;color:var(--ink);border:1.5px solid #dfe5f5;
    opacity:0;scale:.9;translate:0 16px;transform-origin:right bottom;pointer-events:none;transition:opacity .3s,scale .45s cubic-bezier(.34,1.4,.64,1),translate .45s cubic-bezier(.34,1.4,.64,1)}
  .sk-bot.open .sk-win{opacity:1;scale:1;translate:none;pointer-events:auto}
  /* phone: smaller and on the left, where the right-aligned text ends, so it hides less of the page */
  @media (max-width:640px){
    .sk-bot{right:auto;left:12px;bottom:12px;align-items:flex-end}
    .sk-fab{width:54px}
    .sk-fab::after{border-width:2px}
    .sk-tip{right:auto;left:0;font-size:17px;max-width:240px;border-end-start-radius:20px;border-end-end-radius:4px}
    .sk-win{transform-origin:left bottom}
  }
  .sk-win .top{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--blue);color:#fff}
  .sk-win .top img{width:52px;height:52px;border-radius:50%}
  .sk-win .top b{display:block;font-size:21px;line-height:1.2}
  .sk-win .top small{font-size:17px;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:6px}
  .sk-win .top small::before{content:"";width:8px;height:8px;border-radius:50%;background:#25d366}
  .sk-win .x{margin-inline-start:auto;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .sk-win .chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--soft);min-height:240px}
  .sk-win .msg{max-width:88%;padding:12px 16px;border-radius:20px;font-size:19px;line-height:1.45;animation:waIn .45s cubic-bezier(.2,.7,.2,1) backwards}
  .sk-win .msg.in{align-self:flex-start;background:#fff;border-start-start-radius:4px}
  .sk-win .msg.out{align-self:flex-end;background:var(--blue);color:#fff;border-start-end-radius:4px}
  .sk-win .msg .dots{display:inline-flex;gap:5px}.sk-win .msg .dots i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:askDot 1s ease-in-out infinite}
  .sk-win .msg .dots i:nth-child(2){animation-delay:.15s}.sk-win .msg .dots i:nth-child(3){animation-delay:.3s}
  .sk-win .quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;background:#fff}
  .sk-win .quick button{border:1.5px solid #dfe5f5;background:#fff;border-radius:999px;padding:9px 15px;font:inherit;font-size:17px;font-weight:600;color:var(--blue);cursor:pointer;transition:background .25s,color .25s}
  .sk-win .quick button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
  .sk-win form{display:flex;align-items:center;gap:8px;padding:10px 12px 12px;background:#fff}
  .sk-win input{flex:1;min-width:0;height:52px;border:0;outline:0;border-radius:999px;background:var(--soft);padding-inline:18px;font:inherit;font-size:19px;font-weight:600;color:var(--ink)}
  .sk-win input::placeholder{color:#9aa3c2;font-weight:500}
  .sk-win form button{flex:none;width:52px;height:52px;border:0;border-radius:50%;background:var(--sun);display:grid;place-items:center;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .sk-win form button:hover{transform:scale(1.08)}
  .sk-win form button svg{width:20px;height:20px;fill:var(--ink);scale:-1 1}
  @keyframes waIn{from{opacity:0;translate:0 8px;scale:.96}}
  .ft .bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(48px,4vw,80px);padding-top:clamp(20px,1.6vw,28px);border-top:1px solid rgba(255,255,255,.14);font-size:clamp(15px,.95vw,17px);color:rgba(255,255,255,.6)}
  .ft .bottom a{color:inherit;transition:color .3s}
  .ft .bottom a:hover{color:#fff}
  /* entrance: soft fade-up as each area comes into view (JS adds data-r / .on) */
  html.anim [data-r]{opacity:0;translate:var(--tx,0) 24px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0) * 70ms)}
  html.anim [data-r].on{opacity:1;translate:var(--tx,0) 0}
  html.anim .kid[data-r]{--tx:-50%}
  /* ── area 2: subjects ────────────────── */
  .subjects{padding:clamp(72px,6vw,128px) 0;background:var(--soft);border-radius:40px 40px 0 0;position:relative;overflow:hidden}
  .subjects > .wrap{position:relative;z-index:1}
  /* soft 3D brand shapes, heavily blurred, floating in the open areas around the heading and the button */
  .sj-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
  .sj-shapes i{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;translate:-50% -50%;rotate:var(--r,0deg);filter:blur(var(--b));opacity:.85;animation:sjFloat var(--t,9s) ease-in-out var(--d,0s) infinite;
    background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 45%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000) 100%)}
  /* clip/mask sit on the shape itself, so rings, triangles and stars keep crisp edges; dots and the bar stay soft */
  .sj-shapes .dot{border-radius:50%}
  .sj-shapes .ring{border-radius:50%;-webkit-mask:radial-gradient(farthest-side,#0000 50%,#000 53%),conic-gradient(#0000 0 75deg,#000 75deg);-webkit-mask-composite:source-in;mask:radial-gradient(farthest-side,#0000 50%,#000 53%),conic-gradient(#0000 0 75deg,#000 75deg);mask-composite:intersect}
  .sj-shapes .tri{clip-path:polygon(50% 6%,96% 90%,4% 90%)}
  .sj-shapes .star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
  .sj-shapes .bar{aspect-ratio:2.6;border-radius:999px}
  @keyframes sjFloat{50%{transform:translateY(-16px) rotate(8deg)}}
  @media (prefers-reduced-motion:reduce){.sj-shapes i{animation:none}}
  .s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,3vw,60px)}
  .s-head > div:first-child{display:flex;flex-direction:column;gap:clamp(10px,.8vw,16px)}
  .s-head .eb{display:inline-block;font-weight:600;font-size:clamp(17px,1.05vw,20px);color:var(--blue)}
  .s-head h2{font-weight:400;font-size:clamp(40px,3.4vw,72px);line-height:1.05}
  .s-head p{font-size:clamp(19px,1.3vw,25px);color:var(--mute)}
  .filters{display:flex;gap:10px;flex-wrap:wrap}
  .chip-f{height:clamp(52px,3.1vw,60px);padding:0 clamp(22px,1.5vw,30px);border-radius:999px;border:1.5px solid #cfd6ee;background:#fff;font:600 clamp(17px,1.05vw,20px)/1 Ploni,sans-serif;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,border-color .3s}
  .chip-f:hover{border-color:var(--blue)}
  .chip-f.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .tiles{--g:clamp(14px,1.3vw,26px);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--g)}
  .tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,.8vw,16px);padding:clamp(20px,1.6vw,32px) clamp(16px,1.2vw,24px);border-radius:28px;background:#fff;color:var(--ink);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .tile .ic{position:relative;display:block;width:min(100%,clamp(110px,8vw,170px));aspect-ratio:1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .tile .ic img{position:relative}
  .tile .ic img{width:100%;height:100%;object-fit:contain}
  .tile .bot{display:flex;align-items:center;justify-content:center;gap:8px}
  .tile b{font-weight:700;font-size:clamp(19px,1.3vw,26px);line-height:1.15;white-space:nowrap}
  .tile .go{font-size:20px;color:var(--blue);max-width:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-width .4s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility .3s}
  .tile:hover{transform:translateY(-6px)}
  .tile:hover .ic{transform:scale(1.06) rotate(-4deg)}
  .tile:hover .go{max-width:1.2em;opacity:1;visibility:visible}
  .s-foot{display:flex;justify-content:center;margin-top:clamp(36px,3vw,60px)}
  .btn.blue{background:var(--blue);color:#fff}
  .btn.blue:hover{background:var(--ink)}

  /* ── home on tablet and phone: everything from the Hanukkah banner down ── */
  .gal-arr{flex:none}
  .gal-arr:disabled{opacity:.35;cursor:default;background:#fff;color:var(--blue)}
  .s-foot .gal-arr,.v-arrows{display:none}
  .gal,.f-grid,.stage{scrollbar-width:none}
  .gal::-webkit-scrollbar,.f-grid::-webkit-scrollbar,.stage::-webkit-scrollbar{display:none}

  @media (max-width:1100px){
    /* banner: the picture on top, the text under it */
    .hb{aspect-ratio:auto;display:flex;flex-direction:column}
    .hb .art{position:relative;height:auto;aspect-ratio:3/1;object-position:30% bottom}
    /* the subject is repeated right under the picture, so the picture keeps only the title and clears the tag */
    .course .cv .cap{max-width:50%;font-size:20px}
    .course .cv .cap small{display:none}
    .hb .txt{padding:28px 32px}
    .hb.orange h2{font-size:clamp(28px,3.4vw,38px)}
    .hb p{font-size:18px}
    .hb .cta .btn{height:52px;padding:0 24px;font-size:17px;flex:none}

    /* subjects */
    .subjects{padding:56px 0}
    .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
    .sh h2,.free h2,.how h2,.voices h2{font-size:clamp(36px,5vw,50px)}
    .final-box h2{font-size:clamp(36px,5.4vw,56px)}
    .sh{margin-bottom:28px}
    .s-foot{margin-top:28px}

    /* how it works: text beside Skoli, the steps across under them */
    .how-box{--kw:clamp(190px,28vw,290px);--pad:32px;overflow:hidden;grid-template-columns:1fr var(--kw);row-gap:24px;padding-bottom:var(--pad)}
    .how-box > span[aria-hidden]{display:none}
    .how .steps{grid-column:1 / -1;grid-row:2;margin:0}
    .steps h3{white-space:normal}
    .how-kid{position:relative;grid-column:2;grid-row:1;align-self:end;left:auto;bottom:auto;width:var(--kw);margin-bottom:-24px;z-index:0}

    /* parents: the notes leave the stage and become a row, Skoli stands under them */
    .voices{--kid:clamp(300px,44vw,420px);padding:56px 0 calc(var(--kid) * .62)}
    .stage{position:static;height:auto;max-width:none;display:flex;gap:14px;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:8px var(--gut);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain}
    .stage .kid{height:var(--kid);bottom:calc(var(--kid) * -.38)}
    .stage .note{position:static;flex:none;width:min(78vw,340px);rotate:none;scroll-snap-align:start;padding:20px}
    .stage .note:hover{rotate:none;transform:none}
    .v-arrows{position:relative;z-index:2;display:flex;justify-content:center;gap:12px;margin-top:18px}
    .v-arrows .gal-arr{width:50px}
    /* decorative shapes only in the free corners, never over a heading */
    .voices .vs-shapes b:nth-child(n+4),.final-box .vs-shapes b:nth-child(n+4),.how .sj-shapes i:nth-child(n+3){display:none}
    .voices .vs-shapes b:nth-child(1){--x:7%!important;--y:66%!important}
    .voices .vs-shapes b:nth-child(2){--x:93%!important;--y:72%!important}
    .voices .vs-shapes b:nth-child(3){--x:18%!important;--y:90%!important}
    .final-box .vs-shapes b:nth-child(1){--x:6%!important;--y:5%!important}
    .final-box .vs-shapes b:nth-child(2){--x:94%!important;--y:5%!important}
    .final-box .vs-shapes b:nth-child(3){--x:93%!important;--y:48%!important}
    .how .sj-shapes i:nth-child(1){--x:6%!important;--y:92%!important}
    .how .sj-shapes i:nth-child(2){--x:8%!important;--y:4%!important}

    /* questions */
    .faq{padding:56px 0}

    /* closing */
    .final-box .kids{width:min(96%,720px)}

    /* footer */
    .ft{padding-top:48px}
    .ft .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
    .ft .brand{grid-column:1 / -1}
  }

  @media (max-width:900px){
    .hb .art{aspect-ratio:5/2}
    .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  @media (max-width:640px){
    .promo{padding:28px 0 48px}
    .hb{border-radius:28px}
    .hb .art{aspect-ratio:5/3;object-position:36% bottom}
    .hb .txt{padding:20px 20px 24px;gap:10px}
    .hb.orange .tagline{font-size:15px;padding:6px 14px}
    .hb.orange h2{font-size:clamp(25px,7.4vw,36px)}
    .hb .cta{width:100%}
    .hb .cta .btn{flex:1 1 auto;justify-content:center}

    /* one size for every section heading */
    .sh h2,.free h2,.how h2,.voices h2,.final-box h2{font-size:clamp(28px,8.4vw,48px)}
    .sh p,.how .h-head p{font-size:17px}
    .sh{margin-bottom:22px}

    .subjects{padding:44px 0;border-radius:28px 28px 0 0}
    .subjects .sj-shapes i:nth-child(n+3){display:none}
    .subjects .sj-shapes i:nth-child(1){--x:7%!important;--y:3.5%!important}
    .subjects .sj-shapes i:nth-child(2){--x:93%!important;--y:3%!important}
    .subjects .sj-shapes i,.how .sj-shapes i{width:calc(var(--s) * .5)}
    .vs-shapes i{width:calc(var(--s) * .5)}
    .final-box .vs-shapes b:nth-child(3){display:none}
    .chip-f{height:44px;padding:0 16px;font-size:16px}
    .tiles{--g:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .tile{padding:14px 10px;border-radius:22px}
    .tile .ic{width:min(100%,104px)}
    .tile b{font-size:18px}

    /* how it works: one column, Skoli closes the box from below */
    .how-box{--pad:22px;display:flex;flex-direction:column;align-items:stretch;gap:20px;padding-bottom:0;border-radius:28px}
    .how .h-head{align-items:flex-start}
    .steps{grid-template-columns:minmax(0,1fr);gap:14px}
    .steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:22px}
    .steps .n{grid-row:span 2;font-size:50px}
    .steps h3{font-size:20px}
    .steps p{grid-column:2;font-size:16px;line-height:1.4}
    .steps li:not(:last-child)::after{top:100%;left:50%;width:32px;rotate:-90deg}
    .how-kid{align-self:center;width:min(66%,240px);margin:0}

    /* free courses: a row with arrows, like the lessons */
    .free{padding:44px 0 56px}
    .f-grid{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:6px var(--gut);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain}
    .course{flex:none;width:min(78vw,330px);scroll-snap-align:start;border-radius:22px}
    .course:hover{transform:none}
    .course h3{font-size:20px}
    .s-foot{gap:12px;margin-top:20px}
    .free .s-foot .gal-arr{display:grid;width:52px}
    .s-foot .btn{flex:1;height:52px;justify-content:center;padding:0 12px;font-size:17px}

    .voices{--kid:clamp(280px,84vw,380px);padding-top:44px}
    .note p{font-size:17px}

    .faq{padding:44px 0}
    .ask-box{height:60px;padding-inline:16px 6px}
    .ask-box svg{width:22px;height:22px}
    .ask-box input{font-size:17px}
    .ask-box .btn{flex:none;width:48px;height:48px;padding:0;justify-content:center;font-size:0}
    .ask-box .btn .arr{font-size:20px}
    .ask{gap:14px}
    .ask-chips{display:none}
    .ask-ans{gap:10px;min-height:0}
    .ask-ans p{min-height:4.65em}
    .ask-next{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;background:none;font:inherit;font-weight:700;font-size:17px;color:var(--blue);cursor:pointer}
    .ask-next .arr{transition:translate .35s cubic-bezier(.2,.7,.2,1)}
    .ask-next:hover .arr{translate:-4px 0}
    .ask-ans img{width:46px}
    .ask-ans .bub{padding:14px 16px;border-radius:20px}
    .ask-ans p{font-size:17px}

    .final{padding:24px 0 40px}
    .final-box{padding-top:36px;border-radius:28px}
    .final-box .txt{padding:0 18px;gap:12px}
    .final-box p{font-size:17px}
    .final-box .cta .btn{height:auto;min-height:56px;padding:10px 16px;white-space:normal;line-height:1.25;font-size:16px}
    .final-box .kids{width:100%;margin-top:18px}

    .ft{padding:40px 0 92px}
    .ft .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ft .contact{grid-column:1 / -1}
    .ft .bottom{flex-direction:column;gap:8px;margin-top:32px}
  }


  @media (max-width:360px){.ask-ans p{min-height:6.2em}}