/* Class A on demo 5: additions only (the real lead form in the demo-5 form look, the demo-3 hand-drawn marks,
   colour logos, the families/institutions switch, small interactions). Everything respects prefers-reduced-motion. */

/* ---- the real lead form (parts.lform, same fields/endpoint as r6) dressed as demo 5's .dform ---- */
.contact .lform{background:var(--sheet);color:var(--ink);border-radius:16px;padding:22px 18px;display:grid;gap:14px;box-shadow:6px 7px 0 rgba(0,0,0,.25);border:2px solid var(--sheet);position:relative;margin:0}
.lform .q{margin:0;font:400 24px/1.2 var(--head)}
.lform .vh,.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lform .fields{display:grid;gap:12px}
.lform .fld{display:grid;gap:6px;font-weight:700;font-size:15px;min-width:0}
.lform .fld>span{font:700 15px/1.35 var(--body)}
.lform input:not([type=radio]):not([type=checkbox]),.lform textarea{width:100%;font:400 17px var(--body);padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-align:right}
.lform textarea{min-height:96px;resize:vertical}
.lform input:focus,.lform textarea:focus{outline:none;border-color:var(--ink)}
.lform [aria-invalid=true]{border-color:var(--red)!important}
.lform .ferr{display:block;color:var(--red-d);font-size:14px;margin-top:4px;font-weight:600}
.lform .chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;min-width:0}
.lform .chips legend{font:700 15px/1.35 var(--body);margin-bottom:8px;padding:0}
.lform .chip{position:relative;display:flex;border:0;background:none;padding:0;box-shadow:none;border-radius:0}
.lform .chip:hover{transform:none;box-shadow:none;background:none}
.lform .chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lform .chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:10px;background:var(--paper);border:1.5px solid var(--ink);font:600 15.5px/1.2 var(--body);box-shadow:2px 3px 0 rgba(14,30,74,.1);cursor:pointer}
.lform .chip input:checked+span{background:var(--ink);color:var(--sheet)}
.lform .chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.lform .more-fields{border:1.5px dashed var(--line);border-radius:12px;background:#fff}
.lform .more-fields summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:50px;padding:10px 14px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--body)}
.lform .more-fields summary::-webkit-details-marker{display:none}
.lform .more-fields summary small{flex-basis:100%;order:3;font-weight:400;color:var(--muted);font-size:14px}
.lform .more-fields summary svg{margin-inline-start:auto;transition:transform .2s}
.lform .more-fields[open] summary svg{transform:rotate(180deg)}
.lform .more-body{display:grid;gap:14px;padding:0 14px 14px}
.lform .btn-go{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:12px;border:2px solid var(--ink);background:var(--ink);color:var(--sheet);font:700 17px/1 var(--body);box-shadow:var(--shadow);cursor:pointer;transition:transform .18s,box-shadow .18s}
.lform .btn-go:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(14,30,74,.15)}
.lform .status{margin:0;font-size:15.5px}
.lform .status:empty{display:none}
.lform .status.ok{color:#1d6b3f;font-weight:700}
.lform .status.err{background:#FDECEC;color:var(--red-d);font-weight:700;padding:12px 14px;border-radius:10px}
.lform .btn-wa-opt{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:10px 16px;border-radius:99px;border:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:600;min-height:44px;cursor:pointer}
.lform .linkbtn{background:none;border:0;padding:0 2px;font:inherit;font-weight:700;text-decoration:underline;color:inherit;cursor:pointer}
.lform .fine{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.lform .fine b{color:var(--ink)}
.lform .link-wa,.lform .quiet{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;justify-self:start}
.lform .link-wa svg,.lform .quiet svg{width:18px;height:18px}
@media (min-width:720px){.lform .fields{grid-template-columns:1fr 1fr}.lform .more-body .fields{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.contact .lform{padding:30px 28px}}

/* ---- breadcrumbs on inner d5 pages ---- */
.crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font:500 14px var(--ui);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.5}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ---- demo 3: hand-drawn red marks (the circle of the Class A logo, and pencil underlines), drawn when they scroll in ---- */
.hd{position:relative;display:inline-block;white-space:nowrap}
.hd svg{position:absolute;pointer-events:none;overflow:visible}
.hd path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hd--ul svg{left:-2%;width:104%;bottom:-.3em;height:.42em}
.hd--circ svg{inset:-34% -22% -30% -22%;width:144%;height:164%}
.proof .hd--circ path{stroke:#FF6B70;stroke-width:2.4}
.js-marks .hd path{stroke-dashoffset:1;transition:stroke-dashoffset 1.05s cubic-bezier(.6,.1,.2,1) .15s}
.js-marks .hd.drawn path{stroke-dashoffset:0}

/* ---- partners: real logos in colour, small paper tiles that lift on hover ---- */
.logos li{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
/* 8.11.2026: the logo grid's columns may shrink below a logo's own width (minmax(0,1fr)), so the row never runs wider
   than the screen (it pushed the home page 44 px sideways at 320, 4 px at 360 and 85 px at 768). From 1200 px up every
   logo fits its tile, so the grid there stays exactly as it was */
@media (max-width:719px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px) and (max-width:1199px){.logos{grid-template-columns:repeat(7,minmax(0,1fr))}}
.logos li:nth-child(3n+1){transform:rotate(-.8deg)}.logos li:nth-child(3n+2){transform:rotate(.6deg)}
@media (hover:hover){.logos li:hover{transform:translateY(-3px) rotate(0);box-shadow:var(--shadow)}.logos li:hover img{transform:scale(1.06)}}

/* ---- linked tags / mini list (real pages behind each subject) ---- */
.tags a{text-decoration:none;display:block}
.tags li:has(a){padding:0}.tags li a{padding:6px 11px}
.tags li{transition:background .15s,transform .15s}
@media (hover:hover){.tags li:has(a):hover{background:#fff;transform:translateY(-1px)}}
.mini a{text-decoration:none;border-bottom:1px solid var(--line)}
.journey__more{display:inline-block;margin-inline-start:14px;font-weight:600;font-size:15.5px;color:inherit;text-underline-offset:5px}
.journey--org .journey__more{color:#D3D7E6}

/* ---- taped photos: a gentle tilt toward the pointer (desktop only) ---- */
@media (hover:hover) and (min-width:1024px){
  .journey__photo{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .journey--fam:hover .journey__photo{transform:rotate(-2.2deg) translateX(18px)}
  .journey--org:hover .journey__photo{transform:rotate(2.2deg) translateX(-18px)}
}

/* ---- how it works: families / institutions switch (demo 3), in the demo 5 look ---- */
.how__head{display:grid;gap:18px}
.how__switch{display:inline-flex;gap:4px;background:var(--paper-2);padding:4px;border-radius:12px;border:1.5px solid var(--ink);justify-self:start}
.how__switch button{border:0;background:none;border-radius:9px;padding:9px 16px;min-height:42px;font:600 15.5px var(--body);color:var(--ink)}
.how__switch button[aria-selected=true]{background:var(--ink);color:var(--sheet)}
.how__steps[hidden]{display:none}
.how__steps.enter li{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.how__steps.enter li:nth-child(2){animation-delay:.08s}.how__steps.enter li:nth-child(3){animation-delay:.16s}.how__steps.enter li:nth-child(4){animation-delay:.24s}
.how__line path{stroke-dasharray:7 9}
.js-marks .how__line{clip-path:inset(0 0 0 100%);transition:clip-path 1.4s cubic-bezier(.6,.1,.2,1) .1s}
.js-marks .how.drawn .how__line{clip-path:inset(0 0 0 0)}
@media (min-width:1024px){.how__head{grid-template-columns:1fr auto;align-items:end}}

/* ---- footer: the site's full link map in the demo 5 footer ---- */
.foot__map{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.foot__map h2{font:600 14px var(--ui);color:var(--red);margin:0 0 8px}
.foot__map nav{display:grid;gap:4px;font-size:15px}
.foot__map a{text-decoration:none;color:var(--ink-2)}
.foot__map a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.foot__contact{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15.5px}
.foot__contact a{text-decoration:none;border-bottom:1px solid var(--line)}
@media (min-width:1024px){.foot__map{grid-template-columns:repeat(4,1fr);grid-column:1/-1}}

/* nav: current page */
.nav__links a[aria-current=page]{border-color:var(--red)}

@media (prefers-reduced-motion:reduce){.js-marks .hd path{stroke-dashoffset:0}.js-marks .how__line{clip-path:none}.logos li,.logos li:nth-child(n){transform:none}}

/* the circled number keeps the stub's big figure (the .stub span rule is for the label) */
.stub b .hd,.stub b .hd span{font:inherit;color:inherit;line-height:inherit}
.how__lede{margin:12px 0 0;color:var(--ink-2);font-size:17px;max-width:40em}
.foot__brand{display:grid;gap:6px;align-content:start}
.foot__brand small{font:500 13.5px var(--ui);color:var(--muted)}

/* round 3 (Yair 8.11.2026 11:50): rotating field photos in the families and institutions journey cards */
.fade{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.fade__f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.fade__f.is-on{opacity:1;pointer-events:auto}
.fade__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.journey--fam .fade__f[data-i="0"] img{object-position:center 78%}
.fade__cap{position:absolute;bottom:14px;right:14px;max-width:70%;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:5px 10px;font:700 13.5px/1.25 var(--ui);box-shadow:3px 3px 0 rgba(14,30,74,.18);transform:rotate(-1.5deg)}
.fade__ctl{position:absolute;bottom:12px;left:12px;display:flex;align-items:center;gap:2px;background:rgba(255,251,244,.92);border:2px solid var(--ink);border-radius:99px;padding:2px 6px;box-shadow:3px 3px 0 rgba(14,30,74,.18)}
.fade__dot,.fade__pause{appearance:none;border:0;background:none;padding:0;margin:0;width:24px;height:24px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.fade__dot::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;transition:background .2s,transform .2s}
.fade__dot[aria-current=true]::before{background:var(--red);border-color:var(--red);transform:scale(1.25)}
.fade__dot:focus-visible,.fade__pause:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:50%}
.fade__pause i{display:block;width:9px;height:10px;border-inline:3px solid var(--ink);box-sizing:border-box}
.fade__pause[aria-pressed=true] i{width:0;height:0;border:0;border-block:6px solid transparent;border-inline-start:0;border-inline-end:10px solid var(--ink)}
.journey--org .fade__cap{right:auto;left:14px;bottom:auto;top:14px;transform:rotate(1.5deg)}
@media (max-width:1023px){.fade__cap,.journey--org .fade__cap{top:12px;bottom:auto;right:12px;left:auto;font-size:12.5px;transform:rotate(-1.5deg)}.fade__ctl{bottom:10px;left:10px}}
@media (prefers-reduced-motion:reduce){.fade__f{transition:none}.fade__pause{display:none}}

/* round 3 (Yair 8.11.2026 11:52): a gentle idle drift on the hero's cut-paper shapes and the red hand-drawn marks
   (transform-only via the individual translate/rotate properties, so each shape keeps its own tilt; 6 to 10 s loops,
   different phase per shape; off under reduced motion) */
/* round 3c (Yair 8.11.2026 14:39 "כמעט ולא זזות"): the amplitude was 6 to 8 px; now several tens of px, clearly moving */
/* 9.11.2026 (Yair 12:31 "שיזוזו בחופשיות ולא תמיד סביב אותה נקודה או קו"): each hero shape wanders a free closed path through 6 waypoints
   spread over its area (translate plus a gentle turn, the small red one also breathes in scale), every shape on its own long cycle
   (17 to 43 s, prime-ish lengths so they never sync) and phase. Same amplitude as round 3c (tens of px), off under reduced motion. */
@keyframes d5drift-a{0%,100%{translate:0 0;rotate:0deg}14%{translate:49px -25px;rotate:5deg}30%{translate:20px -46px;rotate:-4deg}45%{translate:-32px -32px;rotate:7deg}59%{translate:-58px 7px;rotate:-6deg}74%{translate:-23px 44px;rotate:3deg}88%{translate:35px 30px;rotate:-3deg}}
@keyframes d5drift-b{0%,100%{translate:0 0;rotate:0deg}12%{translate:-32px 24px;rotate:-7deg}27%{translate:-46px -10px;rotate:5deg}43%{translate:-14px -36px;rotate:-9deg}57%{translate:25px -30px;rotate:4deg}71%{translate:46px 8px;rotate:-5deg}86%{translate:21px 36px;rotate:6deg}}
@keyframes d5drift-c{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -2px;rotate:-1.6deg}}
@media (prefers-reduced-motion:no-preference){
  .hero .cut--a{animation:d5drift-a 23s ease-in-out -6s infinite;will-change:translate,rotate}
  .hero .cut--b{animation:d5drift-b 17s ease-in-out -11s infinite;will-change:translate,rotate}
  .hero .mark svg{animation:d5drift-c 6.5s ease-in-out -1.2s infinite;transform-origin:50% 50%}
  .proof .hd--circ svg{animation:d5drift-c 8s ease-in-out -4s infinite;transform-origin:50% 50%}
}
/* round 3 (Yair 8.11.2026 11:52): the matcher ends in WhatsApp OR the real lead form */
.result__ctas .btn--paper{font-size:15.5px}
#contact form.lform{scroll-margin-top:96px}

/* round 3b (Yair 8.11.2026 12:21): the Google rating tile is gone, so the proof strip is the four figures in one row */
@media (min-width:720px){.proof__in{grid-template-columns:repeat(4,1fr)}}
/* equal line counts on phones (Yair's rule): in the 2 x 2 strip the two long labels share a row and the two short ones the
   other row (6,000+ beside 30+, 10,000+ beside 150+); the order in the page and on wider screens is unchanged */
@media (max-width:719px){.proof__in .stub:nth-child(1){order:1}.proof__in .stub:nth-child(4){order:2}.proof__in .stub:nth-child(2){order:3}.proof__in .stub:nth-child(3){order:4}}

/* ---- videos (round 3b, 8.11.2026): a taped, tilted paper frame; 16:9 full width on phones, vertical capped at ~80vh ---- */
.vid{margin:0 auto;max-width:960px}
.vid__frame{position:relative;border:6px solid #FFFBF4;border-radius:18px;background:#0E1E4A;box-shadow:4px 5px 0 #0E1E4A;transform:rotate(-1deg)}
.vid--tilt-r .vid__frame{transform:rotate(1.2deg)}
.vid__v{display:block;width:100%;height:auto;border-radius:12px;background:#0E1E4A}
.vid--tall .vid__frame{width:min(100%,calc(min(80vh,680px) * 9 / 16));margin-inline:auto}
/* 8.11.2026 (Yair 14:10): the silent lesson loop stays small, a side note near "how it works", not a feature */
.vid--loop.vid--tall .vid__frame{width:min(100%,calc(min(62vh,520px) * 9 / 16))}
.vid__tape{position:absolute;top:-12px;right:22%;width:96px;height:26px;background:rgba(233,221,200,.9);transform:rotate(4deg);box-shadow:0 1px 0 rgba(0,0,0,.06);pointer-events:none}
.vid__cap{margin:16px 0 0;text-align:center;font-weight:700;font-size:15px;color:#0E1E4A}
.vid__play{display:none;position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:3px solid #FFFBF4;background:#D63A40;box-shadow:4px 5px 0 #0E1E4A;cursor:pointer;padding:0}
.vid__play i{display:block;width:0;height:0;margin:0 auto;transform:translateX(4px);border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #FFFBF4}
[data-vid].is-ready .vid__play{display:block}
[data-vid].is-playing .vid__play{display:none}
.vid__play:focus-visible,.vid__toggle:focus-visible{outline:3px solid #D63A40;outline-offset:3px}
.vid__toggle{position:absolute;bottom:10px;left:10px;width:40px;height:40px;border-radius:50%;border:2px solid #0E1E4A;background:#FFFBF4;cursor:pointer;padding:0;display:none}
[data-vid].is-ready .vid__toggle{display:block}
.vid__toggle i{display:block;margin:auto;width:12px;height:14px;border-inline:4px solid #0E1E4A}
.vid__toggle[aria-pressed=true] i{width:0;height:0;border-inline:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #0E1E4A;transform:translateX(2px)}
.story__vid{margin-top:clamp(36px,5vw,64px)}
.vidsec{padding:clamp(24px,4vw,48px) 0}
@media (max-width:719px){.vid--wide .vid__frame{transform:rotate(-.6deg);border-width:4px}.vid__play{width:64px;height:64px}.vid__play i{border-width:12px 0 12px 20px}}
@media (prefers-reduced-motion:reduce){.vid__frame,.vid--tilt-r .vid__frame{transform:none}}

/* round 3c: a little scroll parallax on the hero shapes (app.js sets --py on .hero), a third small red shape, and the home
   contact block's red blob drifting too. Off under reduced motion (style.css stops every animation; --py is never set). */
.hero .cut--a{transform:translateY(calc(var(--py,0px) * .25)) rotate(-8deg)}
.hero .cut--b{transform:translateY(calc(var(--py,0px) * -.15))}
.cut--c{width:64px;left:44%;bottom:34px;transform:translateY(calc(var(--py,0px) * .4))}.cut--c path{fill:var(--red)}
@media (max-width:1023px){.cut--c{display:none}}
@keyframes d5drift-d{0%,100%{translate:0 0;rotate:0deg;scale:1}16%{translate:23px 27px;rotate:4deg;scale:1.1}31%{translate:-13px 32px;rotate:-6deg;scale:0.92}47%{translate:-36px 3px;rotate:3deg;scale:1.14}62%{translate:-19px -29px;rotate:-8deg;scale:0.95}77%{translate:15px -20px;rotate:6deg;scale:1.06}90%{translate:36px -2px;rotate:-2deg;scale:0.9}}
@media (prefers-reduced-motion:no-preference){
  .hero .cut--c{animation:d5drift-d 29s ease-in-out -4s infinite;will-change:translate,scale}
  .contact::after{animation:d5drift-b 41s ease-in-out -9s infinite}
}

/* Yair 8.11.2026 14:51: the teacher entry right after the home hero (a slim paper line, the footer's own words) */
.teach-strip{position:relative;z-index:1;margin-top:-26px;margin-bottom:6px}
.teach-strip p{margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;width:fit-content;max-width:100%;padding:10px 20px;background:var(--sheet);border:2px solid var(--ink);border-radius:999px;box-shadow:var(--shadow);font-size:16.5px;rotate:-.6deg}
.teach-strip b{font:400 18px/1.2 var(--head)}
.teach-strip a{color:var(--red-d);font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}
@media (min-width:1024px){.teach-strip{margin-top:-44px}}

/* pre-launch audit 8.11.2026 item 5: SMALL red text (under 24px, or under 18.66px bold) uses the darker red #b8282f, contrast at least 4.5 on paper #F3ECDF (5.28), tint #E9DDC8 (4.62) and white (6.02); #D63A40 stays for large headings, shapes and buttons. On the navy band a light red #FF9EA2 (8.3). */
.kick,.eyebrow,.crit em,.ftr h2,.ftr .f-brand b,.svc__n,a.card.linkcard .more,.go-link,.rel a b:after{color:#b8282f!important}
.on-teal .kick,.on-teal .eyebrow,.eyebrow.eyebrow--light{color:#FF9EA2!important}
.foot__map h2{color:#b8282f!important}
/* pre-launch audit 8.11.2026 item 16: the scroll reveal runs in 0.35 s (was 0.7 s), so a fast scroll never waits on blank space */
@media (prefers-reduced-motion:no-preference){.rv{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}}


/* round 3e (Yair 8.11.2026): the how-it-works path, drawn by app.js through the circle centres (circle 3 sat below the old
   fixed wave); the old fixed line and the per-step dashes give way to it once the script runs */
.how__steps.js-path .how__line{display:none}
.how__steps.js-path li::after{display:none!important}
.how__path{position:absolute;top:0;left:0;z-index:0;overflow:visible;pointer-events:none}
.how__path-d{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:7 9;stroke-linecap:round;opacity:.75}
.how__path-m{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round}
.how__steps .dot{z-index:1}
.how__steps.js-path .dot{transform:scale(.55);opacity:.3;transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .25s ease}
.how__steps.js-path .dot.is-on{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.how__steps.js-path .dot{transform:none;opacity:1;transition:none}}

/* round 3e: the stats circle moves to the institutions figure and is drawn only after its count-up ends (app.js adds
   .drawn then), slower: 1.8 s */
.js-marks .proof .hd--after path{transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.25,1) 0s}

/* ================= audit round 2 (8.11.2026, Claude's second pass, technical only) ================= */
/* 1: the contact section clips its decorative blob without being a scroll box, so focus/scroll can never shift it sideways */
.contact{overflow:hidden;overflow:clip}
/* the red blob that bleeds off the corner lives in its own clipping layer (same place, size, colour and drift), so the section's
   own scroll width is exactly the screen width (it used to report ~96 px of hidden width on phones) */
.contact::after{content:none}
.contact__deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.contact__deco::after{content:"";position:absolute;width:260px;height:260px;left:-90px;bottom:-110px;background:var(--red);border-radius:43% 57% 61% 39% / 47% 41% 59% 53%;opacity:.95}
@media (min-width:1024px){.contact__deco::after{width:420px;height:420px;left:-140px;bottom:-200px}}
@media (prefers-reduced-motion:no-preference){.contact__deco::after{animation:d5drift-b 41s ease-in-out -9s infinite}}
#contact form.lform{scroll-margin-top:104px}
/* 4: the quiz card follows the current step's height (no height kept from step 1); the change is animated by app.js */
@media (max-width:1023px){.matcher__sheet{min-height:0}}
.matcher__sheet.is-sizing{overflow:hidden;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.result__ctas .res-subj{text-decoration:underline}
/* 5: the home reveal is as quick as the inner pages' */
.rv{transition-duration:.35s,.35s}
@media (prefers-reduced-motion:reduce){.matcher__sheet.is-sizing{transition:none}}
.hero__cuts{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* card balance (Yair 9.11.2026: cards side by side, same number of lines and the same line shape; no word changes).
   Titles and labels balance their lines; descriptions and quotes wrap "pretty" (lines fill from the start, no lone last
   word), so a row reads long-then-short in every card. The 4 how-it-works steps share one measure from 1024px, so all
   four descriptions (both tabs) run two lines. */
main :is(.how__steps li,.journey,.svc__row,.ops,.proof__in,.chips,.story__side) :is(h2,h3,b,dt,figcaption){text-wrap:balance}
main :is(.how__steps li,.journey,.svc__row,.ops,.stub) :is(p,dd,span),main blockquote{text-wrap:pretty}
@media (min-width:1024px){.how__steps p{max-inline-size:25ch}}
/* ---- English home (Yair 9.11.2026 15:30, site-design: "אם אתה חושב שזה הדבר הנכון ביותר עבור אנגלית, אז בסדר"): the same demo-5
   blocks, left to right. Each rule mirrors one right/left rule of style.css or of this file; nothing else changes. ---- */
html[dir=ltr] .skip{right:auto;left:-999px}html[dir=ltr] .skip:focus{left:12px;right:auto}
html[dir=ltr] .btn:hover span{transform:translateX(4px)}
html[dir=ltr] .cut--a{left:auto;right:-150px;transform:rotate(8deg)}
html[dir=ltr] .cut--b{right:auto;left:-60px}
html[dir=ltr] .cut--c{left:auto;right:44%}
html[dir=ltr] .mark svg{right:auto;left:-5%}
html[dir=ltr] .mark path{transform-origin:left}
html[dir=ltr] .chip{text-align:left}
html[dir=ltr] .lform input:not([type=radio]):not([type=checkbox]),html[dir=ltr] .lform textarea{text-align:left}
html[dir=ltr] .matcher__back{inset:14px 10px -12px -8px;transform:rotate(2.2deg)}
html[dir=ltr] .photo-tape{right:auto;left:26px;transform:rotate(-4deg)}
html[dir=ltr] .quote__mark{right:auto;left:-6px}
html[dir=ltr] .contact__deco::after{left:auto;right:-90px}
html[dir=ltr] .fab{left:auto;right:16px}
html[dir=ltr] .fade__cap{right:auto;left:14px}
html[dir=ltr] .fade__ctl{left:auto;right:12px}
html[dir=ltr] .journey--org .fade__cap{left:auto;right:14px;transform:rotate(-1.5deg)}
@media (max-width:1023px){html[dir=ltr] .fade__cap,html[dir=ltr] .journey--org .fade__cap{right:auto;left:12px;transform:rotate(1.5deg)}html[dir=ltr] .fade__ctl{left:auto;right:10px}}
@media (min-width:1024px){
  html[dir=ltr] .cut--a{left:auto;right:-120px}
  html[dir=ltr] .cut--b{left:auto;right:3%}
  html[dir=ltr] .journey--fam .journey__body{border-radius:0 18px 18px 0}
  html[dir=ltr] .journey--org .journey__body{border-radius:18px 0 0 18px}
  html[dir=ltr] .journey--org .journey__photo{border-radius:0 18px 18px 0;transform:rotate(-1.2deg) translateX(14px)}
  html[dir=ltr] .journey--fam .journey__photo{transform:rotate(1.2deg) translateX(-14px)}
  html[dir=ltr] .quote__mark{right:auto;left:-24px}
  html[dir=ltr] .contact__deco::after{left:auto;right:-140px}
}
@media (min-width:1024px) and (hover:hover){
  html[dir=ltr] .journey--fam:hover .journey__photo{transform:rotate(2.2deg) translateX(-18px)}
  html[dir=ltr] .journey--org:hover .journey__photo{transform:rotate(-2.2deg) translateX(18px)}
}
/* the English hero's right-hand card: demo 5's matcher sheet, static (no quiz in English) */
.matcher--static .matcher__sheet{min-height:0}
.matcher--static .result__steps li{opacity:1;animation:none}