/* ==========================================================================
   premium.css — motion and interaction layer for the AI mentoring landing page
   Loads AFTER the inline <style> in index.html and overrides it.
   Depends only on classes that already exist there, plus two new blocks
   documented in COMPONENTS.md (.pop = offer popup, .cyc = cycle board).

   Contract:
   - transform and opacity only. Never width/height/top/left in a transition.
   - RTL is the default. Anything directional is authored for RTL, with an
     [dir="ltr"] escape hatch right beside it.
   - Fail open. Every hidden state is gated on a class that JS must add
     (html.js / html.pjs). No JS, no hiding.
   - prefers-reduced-motion cancels every animation at the bottom of the file.
   ========================================================================== */

:root{
  /* easing vocabulary. --e-out is the house curve: fast start, long settle. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
  --e-spring:cubic-bezier(.34,1.28,.42,1);
  --e-in:cubic-bezier(.5,0,.75,0);

  /* elevation ladder. shadows are layered so hover reads as height, not blur */
  --sh-rest:0 1px 2px rgba(16,24,40,.05);
  --sh-hover:0 2px 6px rgba(16,24,40,.06),0 18px 44px rgba(16,24,40,.10);
  --sh-lift:0 3px 8px rgba(16,24,40,.07),0 30px 70px rgba(16,24,40,.13);
  --sh-blue:0 2px 8px rgba(10,110,209,.18),0 18px 40px rgba(10,110,209,.24);

  --dur-1:.22s;   /* pointer tracking. must feel attached to the finger */
  --dur-2:.42s;   /* state change */
  --dur-3:.9s;    /* entrance */
}

/* ==========================================================================
   1 · ENTRANCES
   The page ships visible. The inline stylesheet in index.html hides .rv under
   html.js; premium.js drops that class and takes the state onto html.pjs, so
   the legacy rules stop applying entirely and the 1.5s "show everything" timer
   that was killing every reveal below the fold stops mattering.
   ========================================================================== */

/* The hidden state is the only thing this system declares. Once an element is
   revealed it owns its own transform again, so hover lifts and tilts are never
   outranked by a leftover `transform:none` from the reveal. */
html.js .rv,html.pjs .rv{
  transition:opacity var(--dur-3) var(--e-out),transform var(--dur-3) var(--e-out);
  transition-delay:var(--rv-delay,0ms);
}
html.js:not(.pjs) .rv:not(.on){opacity:0;transform:translate3d(0,26px,0) scale(.988);will-change:opacity,transform}
html.pjs .rv:not(.in){opacity:0;transform:translate3d(0,26px,0) scale(.988);will-change:opacity,transform}
/* same function list as the tile's resting transform, so the interpolation
   between hidden and revealed stays a clean translate rather than a matrix */
html.pjs .tile.rv:not(.in){transform:perspective(1100px) translate3d(0,26px,0) scale(.988)}

/* index-based stagger, set by premium.js on siblings that carry no d1..d5 */
html.js .rv,html.pjs .rv{--rv-delay:calc(var(--i,0) * 68ms)}
.d1{--rv-delay:80ms}.d2{--rv-delay:150ms}.d3{--rv-delay:220ms}
.d4{--rv-delay:290ms}.d5{--rv-delay:360ms}
html.js .d1,html.js .d2,html.js .d3,html.js .d4,html.js .d5,
html.pjs .d1,html.pjs .d2,html.pjs .d3,html.pjs .d4,html.pjs .d5{transition-delay:var(--rv-delay)}

/* --- the headline gets its own entrance: word masks rising into place ----- */
.hero h1.split{opacity:1;transform:none;transition:none}
.hero h1 .ln{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-block-end:.14em;margin-block-end:-.14em; /* room for Hebrew descenders */
}
.hero h1 .ln > span{
  display:inline-block;transform:translate3d(0,108%,0) rotate(1.2deg);
  transition:transform 1.05s var(--e-out);
  transition-delay:calc(120ms + var(--w,0) * 42ms);
}
.hero h1.split.in .ln > span{transform:none}

/* the frame arrives from a touch further away, so the photo lands last */
html.js:not(.pjs) .frame.rv:not(.on),
html.pjs .frame.rv:not(.in){transform:translate3d(0,34px,0) scale(.965)}
html.js .frame.rv,html.pjs .frame.rv{transition-duration:1.1s}

/* ==========================================================================
   2 · GLASS THAT REACTS
   The sheen in .glass::before is static in index.html. Here it wakes up.
   ========================================================================== */

.glass::before{transition:opacity var(--dur-2) var(--e-soft),transform .6s var(--e-soft);opacity:.9}
.glass{transition:box-shadow var(--dur-2) var(--e-soft),background var(--dur-2) var(--e-soft)}
a.glass:hover::before,button.glass:hover::before,
.tile:hover .glass::before,.band:hover .card::before{opacity:1;transform:translate3d(0,-1.5%,0)}

/* ==========================================================================
   3 · NAV
   No layout animation. Depth and a hairline progress bar only.
   ========================================================================== */

.nav{transition:background .4s var(--e-soft),border-color .3s,box-shadow .4s var(--e-soft)}
.nav.stuck{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  box-shadow:0 6px 26px rgba(16,24,40,.06);
}
.nav::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:2px;
  background:linear-gradient(to left,var(--accent),#5AA9F0);
  transform:scaleX(var(--sp,0));transform-origin:100% 50%; /* RTL: grows leftwards */
  transition:transform .12s linear;opacity:.9;pointer-events:none;
}
html[dir="ltr"] .nav::after{transform-origin:0 50%}
.nav .logo b{display:inline-block;transition:transform .5s var(--e-spring)}
.nav:hover .logo b{transform:translate3d(0,-2px,0) scale(1.25)}
.nav .btn--sm{box-shadow:0 1px 2px rgba(10,110,209,.2)}
.nav.stuck .btn--sm{box-shadow:0 4px 14px rgba(10,110,209,.28)}

/* ==========================================================================
   4 · BUTTONS
   Pill, sheen sweeping in the reading direction, press that actually presses.
   ========================================================================== */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-2) var(--e-spring),box-shadow var(--dur-2) var(--e-soft),background .25s;
}
.btn > *{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(255deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 64%);
  transform:translate3d(-130%,0,0);transition:transform .85s var(--e-out);
}
html[dir="ltr"] .btn::after{
  background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 64%);
  transform:translate3d(130%,0,0);
}
.btn:hover::after,.btn:focus-visible::after{transform:translate3d(130%,0,0)}
html[dir="ltr"] .btn:hover::after{transform:translate3d(-130%,0,0)}
.btn:hover{transform:translate3d(0,-2.5px,0);box-shadow:var(--sh-blue)}
.btn:active{transform:translate3d(0,0,0) scale(.972);box-shadow:0 2px 8px rgba(10,110,209,.22);transition-duration:.1s}
.btn--glass:hover{box-shadow:var(--sh-hover)}
.btn--glass:active{transform:scale(.972)}

/* an arrow that leans forward. in RTL forward is leftwards. */
.btn::before{
  content:"";width:0;height:0;margin-inline-start:-2px;
  border-block:4px solid transparent;border-inline-start:5px solid currentColor;border-inline-end:0;
  opacity:0;transform:translate3d(6px,0,0);
  transition:opacity .3s var(--e-soft),transform .4s var(--e-spring);
  align-self:center;order:-1;
}
html[dir="ltr"] .btn::before{transform:translate3d(-6px,0,0)}
.btn:hover::before,.btn:focus-visible::before{opacity:.85;transform:none}
.btn--sm::before{display:none}

/* ==========================================================================
   5 · TILES — the material moment
   Cursor-tracked tilt + a light that follows the pointer + shadow that grows.
   Vars --rx/--ry/--mx/--my are written by premium.js.
   ========================================================================== */

.tile{
  transform:perspective(1100px) translate3d(0,var(--ty,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform var(--dur-1) var(--e-soft),box-shadow var(--dur-2) var(--e-soft);
  box-shadow:var(--sh-rest);
}
.tile > *{position:relative;z-index:2}
.tile--img > img{z-index:0}
.tile::before,.tile::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--dur-2) var(--e-soft);
}
/* the light */
.tile::before{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.72),rgba(255,255,255,.22) 42%,transparent 68%);
  mix-blend-mode:soft-light;
}
/* the edge that catches it */
.tile::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(10,110,209,.14);
}
.tile:hover{--ty:-5px;box-shadow:var(--sh-hover)}
.tile:hover::before,.tile:hover::after{opacity:1}
.tile:active{--ty:-1px;transition-duration:.1s}
.tile--dark::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.20),transparent 62%);mix-blend-mode:screen}
.tile--dark::after{box-shadow:inset 0 0 0 1px rgba(111,179,255,.28)}
.tile--dark:hover{box-shadow:0 30px 70px rgba(0,0,0,.28)}
.tile--img img{transition:transform 1.1s var(--e-out),filter .6s var(--e-soft)}
.tile--img:hover img{transform:scale(1.055)}
.tile--img:hover .cap{transform:translate3d(0,-3px,0)}
.tile--img .cap{transition:transform var(--dur-2) var(--e-spring),box-shadow var(--dur-2)}

/* the chat demo answers back: bubbles settle in one after the other */
.demo .bub{transition:opacity .55s var(--e-out) var(--bd,0s),
                      transform .55s var(--e-out) var(--bd,0s),box-shadow .4s var(--e-soft)}
.demo .bub:nth-child(1){--bd:.30s}
.demo .bub:nth-child(2){--bd:.62s}
html.pjs .tile:not(.in) .demo .bub{opacity:0;transform:translate3d(0,10px,0) scale(.97)}
.tile:hover .demo .bub.ai{box-shadow:0 10px 26px rgba(16,24,40,.10)}

/* the tile number counts itself in */
.tile .n{transition:transform .5s var(--e-spring),opacity .4s}
.tile:hover .n{transform:translate3d(0,-2px,0) scale(1.06)}

/* ==========================================================================
   6 · QUOTES, RUNS, COLUMNS, NOT-FOR
   Same material language, lighter dose. These are read, not clicked.
   ========================================================================== */

.quote{transition:transform var(--dur-2) var(--e-out),box-shadow var(--dur-2) var(--e-soft),border-color var(--dur-2)}
.quote::before{transition:opacity var(--dur-2) var(--e-soft),transform .5s var(--e-spring)}
.quote:hover{transform:translate3d(0,-4px,0);box-shadow:var(--sh-hover);border-color:rgba(10,110,209,.22)}
.quote:hover::before{opacity:.7;transform:translate3d(0,-2px,0) scale(1.08)}

.run{transition:transform var(--dur-2) var(--e-out),box-shadow var(--dur-2) var(--e-soft),border-color var(--dur-2);position:relative;overflow:hidden}
.run::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-radius:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:0 0;
  transition:transform .5s var(--e-out);
}
.run:hover{transform:translate3d(0,-4px,0);box-shadow:var(--sh-hover);border-color:rgba(10,110,209,.2)}
.run:hover::before{transform:scaleY(1)}
.run b{transition:transform .4s var(--e-spring)}
.run:hover b{transform:translate3d(-3px,0,0)}
html[dir="ltr"] .run:hover b{transform:translate3d(3px,0,0)}

.col{transition:transform var(--dur-2) var(--e-out),box-shadow var(--dur-2) var(--e-soft)}
.col:hover{transform:translate3d(0,-3px,0);box-shadow:var(--sh-hover)}
.col li{transition:opacity .5s var(--e-out) calc(.18s + var(--li,0)*70ms),
                   transform .5s var(--e-out) calc(.18s + var(--li,0)*70ms),color .3s}
.col li::before{transition:transform .4s var(--e-spring),background .3s}
.col:hover li::before{transform:translateY(-1px) scale(1.18)}
html.pjs .col:not(.in) li{opacity:0;transform:translate3d(14px,0,0)}
html[dir="ltr"].pjs .col:not(.in) li{transform:translate3d(-14px,0,0)}

.nf div{transition:transform var(--dur-2) var(--e-out),box-shadow var(--dur-2) var(--e-soft),background var(--dur-2)}
.nf div:hover{transform:translate3d(0,-3px,0);box-shadow:var(--sh-hover);background:#fff}

.risk li{transition:transform var(--dur-2) var(--e-out),background var(--dur-2),border-color var(--dur-2)}
.risk li:hover{transform:translate3d(-4px,0,0);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
html[dir="ltr"] .risk li:hover{transform:translate3d(4px,0,0)}

/* ==========================================================================
   7 · LINKS AND THE UNDERLINE THAT OPENS
   ========================================================================== */

.link{position:relative}
.link::before{
  content:"";position:absolute;inset-block-end:-2px;inset-inline:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--e-out);opacity:.5;
}
html[dir="ltr"] .link::before{transform-origin:0 50%}
.link:hover::before,.link:focus-visible::before{transform:scaleX(1)}
.link::after{transition:transform .4s var(--e-spring)}
.link:hover::after{transform:translate3d(-5px,0,0)}
html[dir="ltr"] .link:hover::after{transform:translate3d(5px,0,0) scaleX(-1)}

.legal a,.consent a{position:relative;transition:color .25s}
.legal a::after,.consent a::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--e-out);
}
.legal a:hover::after,.consent a:hover::after{transform:scaleX(1)}

/* ==========================================================================
   8 · PRICE
   ========================================================================== */

.price{transition:box-shadow .6s var(--e-soft)}
.price:hover{box-shadow:0 24px 70px rgba(16,24,40,.16),inset 0 1px 0 rgba(255,255,255,.95)}
.price li{transition:opacity .55s var(--e-out) calc(.25s + var(--li,0)*80ms),
                     transform .55s var(--e-out) calc(.25s + var(--li,0)*80ms)}
html.pjs .price:not(.in) li{opacity:0;transform:translate3d(12px,0,0)}
.price li::before{transition:transform .4s var(--e-spring),box-shadow .4s}
.price li:hover::before{transform:translateY(-1px) scale(1.3);box-shadow:0 0 0 4px rgba(10,110,209,.14)}
.price .fig{transition:transform .6s var(--e-spring) .12s}
html.pjs .price:not(.in) .fig{transform:scale(.965)}
.offer{position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s var(--e-soft)}
.offer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(255deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translate3d(-130%,0,0);
}
html.pjs .offer.lit::after{animation:sweep 1.5s var(--e-out) .35s 1 both}
@keyframes sweep{to{transform:translate3d(130%,0,0)}}
.offer:hover{border-color:rgba(10,110,209,.34);box-shadow:0 12px 30px rgba(10,110,209,.12)}

/* ==========================================================================
   9 · FAQ
   ========================================================================== */

details{position:relative;transition:background .3s var(--e-soft)}
details::before{
  content:"";position:absolute;inset-block:8px auto;inset-inline-start:-16px;width:2px;height:0;
  background:var(--accent);border-radius:2px;
  transition:height .45s var(--e-out),opacity .3s;opacity:0;
}
details[open]::before{height:calc(100% - 16px);opacity:.9}
summary{transition:color .25s var(--e-soft)}
summary:hover{color:var(--accent)}
summary i{transition:transform .45s var(--e-spring),color .3s}
summary:hover i{transform:scale(1.2)}
details[open] summary i{transform:rotate(45deg)}
details[open] summary:hover i{transform:rotate(45deg) scale(1.2)}
summary:active{transform:none}
summary:active i{transform:scale(.88)}
details[open] > p{animation:faq-open .5s var(--e-out) both}
@keyframes faq-open{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.legal summary:hover{color:var(--ink)}

/* ==========================================================================
   10 · PHOTOS AND PARALLAX
   premium.js writes --py (px) and clears the legacy inline transform each
   frame, so the two never fight. Hover adds scale on top of the same
   transform, which inline styles could never allow.
   ========================================================================== */

.frame img,.band img{transform:translate3d(0,var(--py,0px),0) scale(var(--pz,1));transition:none}
.frame{transition:box-shadow .6s var(--e-soft),transform var(--dur-2) var(--e-out)}
.frame:hover{--pz:1.03;box-shadow:0 40px 95px rgba(20,60,120,.34)}
.frame img{transition:transform .9s var(--e-out)}
.frame .chip{transition:transform var(--dur-2) var(--e-spring),box-shadow var(--dur-2)}
.frame:hover .chip{transform:translate3d(0,-3px,0)}
.chip .dot{animation:pulse 2.6s var(--e-soft) infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(52,199,89,.22)}
  50%{box-shadow:0 0 0 8px rgba(52,199,89,.05)}
}
.band{transition:box-shadow .6s var(--e-soft)}
.band .card,.band .tag{transition:transform var(--dur-2) var(--e-spring),box-shadow var(--dur-2)}
.band:hover .card{transform:translate3d(0,-4px,0)}
.band .stats > div{transition:transform .35s var(--e-out),opacity .35s}
.band .stats > div:hover{transform:translate3d(-4px,0,0)}
html[dir="ltr"] .band .stats > div:hover{transform:translate3d(4px,0,0)}
.contact img{transition:transform 1.4s var(--e-out)}
html.pjs .contact.in img{transform:scale(1.03)}

/* ==========================================================================
   11 · FORM
   ========================================================================== */

.field input,.field textarea{transition:box-shadow .25s var(--e-soft),border-color .25s,background .25s,transform .25s var(--e-out)}
.field input:hover,.field textarea:hover{background:rgba(255,255,255,.85)}
.field input:focus,.field textarea:focus{background:#fff;transform:translate3d(0,-1px,0)}
.field label{transition:color .25s}
.field:focus-within label{color:var(--accent)}
.consent input{transition:transform .25s var(--e-spring)}
.consent input:active{transform:scale(.86)}
.consent:hover input{transform:scale(1.08)}
.checks span{transition:transform .35s var(--e-out),color .25s}
.checks span:hover{color:var(--ink)}
.checks span::before{display:inline-block;transition:transform .4s var(--e-spring)}
.checks span:hover::before{transform:scale(1.25)}

/* ==========================================================================
   12 · FOCUS AND TOUCH
   Accessibility is not a hover effect. Keyboard gets a real, visible ring.
   ========================================================================== */

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;
}
.btn:focus-visible{outline-offset:4px;border-radius:980px}
summary:focus-visible{outline-offset:6px}
:focus:not(:focus-visible){outline:none}

/* touch devices: no hover states left hanging, press states instead */
@media (hover:none){
  .tile:hover,.quote:hover,.run:hover,.col:hover,.nf div:hover{transform:none;box-shadow:var(--sh-rest)}
  .tile:hover::before,.tile:hover::after{opacity:0}
  .tile--img:hover img,.frame:hover{transform:none}
  .frame:hover{--pz:1}
  .tile:active{--ty:-2px;box-shadow:var(--sh-hover)}
  .quote:active,.run:active,.nf div:active{transform:scale(.99);box-shadow:var(--sh-hover)}
  .btn:active{transform:scale(.96)}
}

/* ==========================================================================
   14 · OFFER POPUP  (.pop — markup in COMPONENTS.md)
   ========================================================================== */

.pop{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:20px}
.pop[hidden]{display:none}
.pop__veil{
  position:absolute;inset:0;background:rgba(16,24,40,.34);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  opacity:0;transition:opacity .45s var(--e-soft);
}
.pop__card{
  position:relative;width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;
  border-radius:var(--r-xl);padding:clamp(26px,4vw,40px);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 120px rgba(16,24,40,.30),inset 0 1px 0 rgba(255,255,255,.95);
  opacity:0;transform:translate3d(0,26px,0) scale(.955);
  transition:opacity .5s var(--e-out),transform .62s var(--e-out);
  -webkit-overflow-scrolling:touch;
}
.pop.is-open .pop__veil{opacity:1}
.pop.is-open .pop__card{opacity:1;transform:none}
.pop.is-closing .pop__veil{opacity:0}
.pop.is-closing .pop__card{opacity:0;transform:translate3d(0,14px,0) scale(.975);transition-duration:.26s,.26s}

.pop__x{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.7);color:var(--ink-2);font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:transform .3s var(--e-spring),background .25s,color .25s;
}
.pop__x:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
.pop__x:active{transform:rotate(90deg) scale(.9)}

.pop__eyebrow{font-size:13.5px;font-weight:600;color:var(--accent);letter-spacing:.01em}
.pop__card h2{font-size:clamp(25px,3.4vw,34px);font-weight:800;margin-top:10px;max-width:20ch;letter-spacing:-.03em}
.pop__lead{margin-top:12px;font-size:16px;color:var(--ink-2);line-height:1.55;max-width:44ch}

.pop__card{text-align:center}
.pop__card h2{margin-inline:auto}
.pop__lead{margin-inline:auto;text-align:center}
/* the popup is judged as an advertisement in its own right (LEGAL-GATE §9.2):
   ONE price claim, and the total beside it. No struck price lives here. */
.pop__total{
  margin:8px auto 0;font-size:clamp(14.5px,1.7vw,16.5px);font-weight:600;color:var(--ink-2);
  text-align:center;
}
.pop__cta{width:100%;justify-content:center;margin-top:22px}
.pop__later{
  display:block;margin:12px auto 0;padding:6px 10px;border:0;background:none;
  font:inherit;font-size:13.5px;color:var(--ink-3);cursor:pointer;border-radius:980px;
  transition:color .25s;
}
.pop__later:hover{color:var(--ink-2)}
.pop__later:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.pop-lock{overflow:hidden}

/* staggered interior, so the card does not arrive as one flat slab */
.pop__card > *{transition:opacity .5s var(--e-out) calc(.14s + var(--pi,0)*55ms),
                          transform .5s var(--e-out) calc(.14s + var(--pi,0)*55ms)}
html.pjs .pop:not(.is-open):not(.is-closing) .pop__card > *:not(.pop__x){opacity:0;transform:translate3d(0,12px,0)}
.pop__card > .pop__x{transition:transform .3s var(--e-spring),background .25s,color .25s;transition-delay:0s}

@media (max-width:520px){
  .pop{padding:0;place-items:end stretch}
  .pop__card{width:100%;max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translate3d(0,60px,0) scale(1)}
  .pop.is-closing .pop__card{transform:translate3d(0,40px,0) scale(1)}
}

/* ==========================================================================
   15 · CYCLE BOARD  (.cyc — markup in COMPONENTS.md)
   A faded October, with the five dates lit. The list beside it is the
   accessible source of truth; the grid is decorative reinforcement.
   ========================================================================== */

.cyc{
  display:grid;grid-template-columns:minmax(280px,.86fr) 1fr;gap:clamp(20px,3vw,40px);
  align-items:start;border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px rgba(16,24,40,.07);
}
.cyc__cal{border-radius:var(--r-lg);padding:20px;background:var(--bg-2);border:1px solid var(--line)}
.cyc__mo{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:14px;letter-spacing:-.01em}
.cyc__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cyc__dow{font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:center;padding-bottom:6px;opacity:.7}
.cyc__d,.cyc__pad{
  aspect-ratio:1;display:grid;place-items:center;border-radius:11px;
  font-size:13px;font-weight:500;color:var(--ink-3);opacity:.42;
  transition:opacity .4s var(--e-soft),transform .4s var(--e-spring),background .4s,color .4s;
}
.cyc__pad{opacity:0}
.cyc__d.is-on{
  opacity:1;color:#fff;font-weight:700;background:var(--accent);
  box-shadow:0 4px 12px rgba(10,110,209,.32);
}
.cyc__d.is-on{transition-delay:calc(.3s + var(--k,0)*110ms)}
html.pjs .cyc:not(.in) .cyc__d.is-on{transform:scale(.5);opacity:0}
.cyc:hover .cyc__d:not(.is-on){opacity:.6}
.cyc__cal:hover .cyc__d.is-on{transform:scale(1.09);transition-delay:0s}

.cyc__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:m}
.cyc__list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border-radius:var(--r-md);background:var(--bg-2);
  transition:opacity .55s var(--e-out) calc(.2s + var(--k,0)*90ms),
             transform .55s var(--e-out) calc(.2s + var(--k,0)*90ms),
             background var(--dur-2),box-shadow var(--dur-2) var(--e-soft);
}
.cyc__list li:hover{transition-delay:0s;transition-duration:var(--dur-2)}
.cyc__list li:hover{transform:translate3d(-4px,0,0);background:#fff;box-shadow:var(--sh-hover)}
html[dir="ltr"] .cyc__list li:hover{transform:translate3d(4px,0,0)}
.cyc__num{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:12.5px;font-weight:700;color:var(--accent);background:rgba(10,110,209,.10);
  transition:transform .4s var(--e-spring),background .3s,color .3s;
}
.cyc__list li:hover .cyc__num{transform:scale(1.1);background:var(--accent);color:#fff}
.cyc__list b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.cyc__list span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.cyc__when{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cyc__note{margin-top:16px;font-size:14.5px;color:var(--ink-3);line-height:1.6;max-width:64ch}
html.pjs .cyc:not(.in) .cyc__list li{opacity:0;transform:translate3d(16px,0,0)}
html[dir="ltr"].pjs .cyc:not(.in) .cyc__list li{transform:translate3d(-16px,0,0)}
@media (max-width:820px){
  .cyc{grid-template-columns:1fr}
  .cyc__cal{max-width:360px;margin-inline:auto;width:100%}
}
/* below 600px the visual board is decorative weight the phone can't afford;
   the list beside it was already the accessible source of truth, so nothing
   is lost by dropping the grid here. */
@media (max-width:600px){
  /* the whole card+calendar board is replaced by index.html's mobile-only
     .clist markup (number/title/line, no card) placed right after this div.
     this rule must live here, after the base .cyc{display:grid} above in
     this same file, so it wins the cascade over an equal-specificity
     .cyc selector in the inline <style> that loads earlier. */
  .cyc{display:none}
}

/* ==========================================================================
   16 · SECTION 3 — PEEK CAROUSEL + THE TURN
   Two columns: the argument on the start side, the proof on the end side.
   The closing block lives inside the same column as the carousel, directly
   under it, so "לא!" is never one scroll away from what it answers.

   FAIL OPEN, and this is the whole contract of the component:
   the default styling below is a plain vertical list of all eight cards.
   Only premium.js adds .is-live, and only then do the cards stack and rotate.
   No JS, old browser, or prefers-reduced-motion → eight readable cards.
   ========================================================================== */

.gap3{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,54px);align-items:start;
}
.gap3__side{display:grid;gap:clamp(14px,1.6vw,20px);min-width:0}

/* the argument column. body size, not lead size: three lead paragraphs in a
   half-width column read as a wall, and the h2 above stops being the loudest. */
.gap3__arg{display:grid;gap:clamp(13px,1.4vw,17px);align-content:start;min-width:0;padding-block-start:2px}
.gap3__arg .lead{font-size:clamp(16px,1.32vw,18px);line-height:1.62;color:var(--ink-2)}

/* The argument is shorter than the carousel plus the refusal, so top-aligning
   the two columns dumps 250px of dead air under the text and the section reads
   crooked. Centred, the leftover air splits above and below and the two columns
   read as one block. Single column below 860 makes this moot. */
@media (min-width:861px){.gap3{align-items:center}}

/* the head above the two columns, and the bridge below them, are part of the
   same unit. the hairline says so, the spacing keeps them from colliding. */
.head--wide{max-width:none}
.gap3{margin-block-end:clamp(30px,3.8vw,50px)}
.bridge{margin-top:0;padding-block-start:clamp(26px,3.2vw,40px);border-block-start:1px solid var(--line)}

/* --- the panel. glass needs something under it, so the panel is the field -- */
.peek{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);padding:clamp(17px,1.9vw,24px);
  background:linear-gradient(155deg,#EBF3FC 0%,#DCEAF9 54%,#E9F0F8 100%);
  border:1px solid rgba(10,110,209,.10);
  box-shadow:0 1px 2px rgba(16,48,84,.05),0 18px 44px rgba(16,48,84,.07);
}
.peek::after{
  content:"";position:absolute;z-index:-1;inset-block-start:-38%;inset-inline-end:-22%;
  width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,110,209,.16),rgba(10,110,209,0) 70%);
}
.peek__head{display:grid;gap:3px;margin-block-end:clamp(12px,1.4vw,16px)}
.peek__eyebrow{font-size:13px;font-weight:600;color:var(--accent-ink);letter-spacing:.01em}
.peek__title{margin:0;font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-.025em;line-height:1.15}

.peek__track{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.peek__card{
  border-radius:var(--r-lg);padding:clamp(15px,1.6vw,19px) clamp(16px,1.7vw,21px);
  min-width:0;
  /* .glass supplies the fill, blur and sheen. only the shadow is retuned:
     black at .14 reads as smoke over a pale blue field, so it goes blue. */
  box-shadow:0 2px 6px rgba(16,48,84,.06),0 16px 38px rgba(16,48,84,.10),
             inset 0 1px 0 rgba(255,255,255,.92);
}
.peek__tag{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-3);background:rgba(255,255,255,.62);border:1px solid rgba(16,48,84,.07);
  border-radius:980px;padding:3px 10px;
}
.peek__card h4{margin:10px 0 0;font-size:clamp(16.5px,1.6vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.peek__card p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* --- live mode. one card in the cell at a time, the rest waiting beside it -- */
.peek.is-live{--pk-in:-24px;--pk-out:24px}     /* RTL: the next card arrives from the left */
html[dir="ltr"] .peek.is-live{--pk-in:24px;--pk-out:-24px}
.peek.is-live .peek__track{gap:0}
.peek.is-live .peek__card{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(var(--pk-in),0,0);
  transition:opacity .58s var(--e-out),transform .58s var(--e-out),visibility 0s linear .58s;
}
.peek.is-live .peek__card.is-on{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s,0s,0s;
}
.peek.is-live .peek__card.is-prev{
  visibility:visible;opacity:0;transform:translate3d(var(--pk-out),0,0);transition-delay:0s,0s,0s;
}

.peek__dots{display:flex;justify-content:center;gap:7px;margin-block-start:clamp(13px,1.5vw,17px)}
.peek__dot{
  appearance:none;-webkit-appearance:none;border:0;background:none;
  padding:7px 3px;line-height:0;cursor:pointer;border-radius:980px;
}
.peek__dot i{
  display:block;width:7px;height:7px;border-radius:980px;
  background:rgba(10,110,209,.28);
  transition:width .5s var(--e-out),background .4s var(--e-soft);
}
.peek__dot:hover i{background:rgba(10,110,209,.5)}
.peek__dot[aria-selected="true"] i{width:24px;background:var(--accent)}
.peek__dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- the turn. the question, the refusal, the line, the reassurance -------- */
.turn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--bg-2);
  padding:clamp(18px,2.1vw,26px) clamp(19px,2.2vw,28px) clamp(20px,2.3vw,28px);
}
.turn::before{
  content:"";position:absolute;z-index:-1;inset-block-start:-30%;inset-inline-start:-12%;
  width:48%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,110,209,.13),rgba(10,110,209,0) 68%);
}
/* card 05 is a half-width photo tile, paired with the dark card 04 on the
   second bento row. reading order stays 1,2,3 / 4,5 right-to-left.
   it only goes full width in the 601-900 band, where half of the grid is
   too narrow to keep a face readable. */
/* v3: the forced minimum was outsizing tile--photo's row partner (tile 4's
   own content needs ~140px; the old 330-400px clamp dragged the whole row
   there regardless). Lowered so the row reads closer to what the text tile
   actually needs, while still leaving the photo + caption legible. */
.tile--photo{min-height:clamp(220px,16vw,260px)}
.tile--photo .cap{max-width:min(560px,100%);margin:clamp(15px,1.8vw,24px)}
.tile--photo img{object-position:34% 20%}
/* between 901 and 1200 the tile is short and wide, so the caption climbs
   towards the face. give it height and lift the crop instead of covering him. */
@media (max-width:1200px){.tile--photo{min-height:clamp(220px,22vw,280px)}.tile--photo img{object-position:34% 12%}}
@media (max-width:900px){.tile--photo img{object-position:38% 18%}}
@media (max-width:600px){.tile--photo{min-height:clamp(360px,86vw,460px)}.tile--photo img{object-position:40% 14%}}

/* --- the make-up block. inside the cycle section, not a footnote --------- */
.cyc__make{
  margin-block-start:clamp(14px,1.8vw,20px);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  background:linear-gradient(120deg,rgba(10,110,209,.10),rgba(10,110,209,.035));
  border:1px solid rgba(10,110,209,.20);
}
.cyc__make p{margin:0;font-size:clamp(15px,1.25vw,16.5px);line-height:1.6;color:var(--ink);max-width:78ch}
/* the limit on the make-up session must be as readable as the benefit itself
   (LEGAL-GATE §9.11): a low-contrast footnote invites the claim that the perk
   was sold without its limit. ink-2, not ink-3. */
.cyc__make .cyc__star{margin-block-start:9px;font-size:13.5px;color:#4E4E53}

.turn__q{margin:0;font-size:16px;font-weight:500;color:var(--ink-2)}
.turn__no{
  margin:0;font-size:clamp(58px,6.6vw,92px);font-weight:800;line-height:.9;
  letter-spacing:-.05em;color:var(--accent);
}
.turn__no span{color:var(--accent);opacity:.42;margin-inline-start:.01em}
.turn__punch{
  margin:clamp(12px,1.4vw,16px) 0 0;font-size:clamp(17.5px,1.8vw,21px);font-weight:700;
  letter-spacing:-.02em;line-height:1.35;color:var(--ink);max-width:32ch;
}
.turn__sup{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46ch}

/* the refusal gets its own beat, a touch after the block itself lands */
html.pjs .turn:not(.in) .turn__no{opacity:0;transform:translate3d(0,12px,0) scale(.9)}
html.pjs .turn .turn__no{
  transition:opacity .7s var(--e-out),transform .8s var(--e-spring);
  transition-delay:180ms;transform-origin:100% 100%;
}
html[dir="ltr"].pjs .turn .turn__no{transform-origin:0 100%}

@media (max-width:860px){
  .gap3{grid-template-columns:1fr;gap:28px}
  .gap3__side{gap:14px}
}

/* ==========================================================================
   16b · MID-PAGE CTA — the quiet variant
   For sections that earn a decision but sit close to a full button. Text
   weight, the same one accent, a hairline that thickens on hover and an arrow
   that leans the way the reader is going (leftwards in RTL, and the [dir=ltr]
   escape hatch sits next to it). Deliberately NOT a pill: a page that repeats the same block reads
   as pressure, and pressure is what this page is built to avoid.
   ========================================================================== */

.cta-quiet{margin-top:clamp(18px,2.4vw,30px)}

.cta-link{
  display:inline-flex;align-items:center;gap:10px;position:relative;
  font-weight:600;font-size:16.5px;color:var(--accent);text-decoration:none;
  padding-block:5px;
  transition:transform var(--dur-2) var(--e-spring),color var(--dur-2) var(--e-soft);
}
/* the arrow. it sits after the words, which in RTL is the left side, and its
   apex points at the inline end: leftwards here, rightwards under [dir=ltr]. */
.cta-link i{
  display:block;width:0;height:0;flex:0 0 auto;align-self:center;
  border-block:4.5px solid transparent;
  border-inline-start:6px solid currentColor;border-inline-end:0;
  transform:translate3d(0,0,0);
  transition:transform .4s var(--e-spring);
}
/* the hairline. present at rest so the link still reads as a link, and it
   thickens downwards on hover — a transform, never a height transition. */
.cta-link::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1.5px;
  background:currentColor;opacity:.3;border-radius:2px;
  transform-origin:50% 100%;
  transition:opacity var(--dur-2) var(--e-soft),transform var(--dur-2) var(--e-out);
}

.cta-link:hover,.cta-link:focus-visible{color:var(--accent-ink)}
.cta-link:hover::after,.cta-link:focus-visible::after{opacity:.72;transform:scaleY(1.6)}
.cta-link:hover i,.cta-link:focus-visible i{transform:translate3d(-5px,0,0)}
html[dir="ltr"] .cta-link:hover i,
html[dir="ltr"] .cta-link:focus-visible i{transform:translate3d(5px,0,0)}
.cta-link:active{transform:translate3d(0,1px,0);transition-duration:.1s}
.cta-link:focus-visible{border-radius:6px}

@media (hover:none){
  .cta-link::after{opacity:.55}
  .cta-link:hover::after{transform:none}
  .cta-link:hover{color:var(--accent);transform:none}
  .cta-link:hover i{transform:none}
}

/* ==========================================================================
   17 · CONSENT BAR  (.consent-bar — markup in index.html, before </body>)
   Fixed at the foot of the screen. Same glass/radius/pill language as the
   rest of the page, so it reads as part of this site, not a bolted-on
   cookie-notice widget. The two buttons are the same size, same style,
   same weight — the only variable is which one you press, never which one
   looks like the real button (LEGAL-GATE §12.1).
   Shown by index.html's own inline script (hidden attribute, independent of
   this file), so its correctness never depends on premium.js having loaded.
   ========================================================================== */

.consent-bar{
  /* Floating card, not a glued strip: clears the iOS Safari bottom toolbar that hid
     the strip until the user scrolled (Itai, 14.09), and reads as a card. */
  position:fixed;inset-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));
  inset-block-end:calc(12px + env(safe-area-inset-bottom,0px));z-index:900;
  max-width:920px;margin-inline:auto;border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(16,24,40,.18);transform:translateZ(0);
  padding:14px clamp(16px,4vw,24px);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;
  border-radius:0;border-inline:0;border-block-end:0;
  opacity:0;transform:translate3d(0,16px,0);pointer-events:none;
  transition:opacity var(--dur-3) var(--e-out),transform var(--dur-3) var(--e-out);
}
.consent-bar[hidden]{display:none}
.consent-bar.is-in{opacity:1;transform:none;pointer-events:auto}
.consent-bar__text{margin:0;flex:1 1 340px;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.consent-bar__text a{color:var(--accent);font-weight:600}
.consent-bar__btns{display:flex;gap:10px;flex:0 0 auto}
.consent-bar__btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  border-radius:980px;font:inherit;font-weight:600;font-size:14px;
  padding:10px 20px;border:1px solid rgba(10,110,209,.38);
  background:transparent;color:var(--accent);
  transition:background .25s,color .25s,border-color .25s,transform .2s var(--e-spring);
}
.consent-bar__btn:hover{background:rgba(10,110,209,.08);color:var(--accent-ink);border-color:var(--accent)}
.consent-bar__btn:active{transform:scale(.96)}

@media (max-width:600px){
  .consent-bar{justify-content:stretch;padding-block-start:12px}
  .consent-bar__text{flex-basis:100%;font-size:13px}
  .consent-bar__btns{flex-basis:100%;gap:10px}
  .consent-bar__btn{flex:1 1 0;padding:11px 14px;text-align:center}
}

/* ==========================================================================
   18 · REDUCED MOTION — one switch, everything off
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.pjs .rv,html.js .rv:not(.on),html.pjs .rv:not(.in),
  html.js .frame.rv,html.pjs .frame.rv,html.pjs .tile.rv:not(.in){opacity:1;transform:none}
  .hero h1 .ln > span,
  html.pjs .tile:not(.in) .demo .bub,html.pjs .col:not(.in) li,
  html.pjs .price:not(.in) li,html.pjs .price:not(.in) .fig,
  html.pjs .cyc:not(.in) .cyc__list li,html.pjs .cyc:not(.in) .cyc__d.is-on,
  html.pjs .turn:not(.in) .turn__no,
  html.pjs .pop:not(.is-open) .pop__card > *{opacity:1;transform:none}
  /* belt and braces: premium.js never goes live under reduced motion, but if
     the setting is flipped mid-visit the list must be readable regardless. */
  .peek .peek__card{opacity:1!important;visibility:visible!important;transform:none!important}
  .peek.is-live .peek__track{gap:10px}
  .peek.is-live .peek__card{grid-area:auto;pointer-events:auto}
  .peek__dots{display:none}
  html.pjs .contact.in img{transform:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .tile,.tile:hover,.frame:hover,.tile--img:hover img{transform:none;--ty:0px;--rx:0deg;--ry:0deg;--pz:1}
  .frame img,.band img{transform:none}
  .chip .dot{animation:none}
  .pop__card{opacity:1;transform:none}
}

/* ==========================================================================
   === landing: short page + sheet (owner: landing session, 2026-10-03) ===
   The short page ("option B", research/funnel-diagnosis-2026-10/02-cro-audit.md):
   hero → one line "not for" → cohort board → two price cards → form → accordions.
   Behaviour lives in premium.js, in the block with the same name.
   Rules this block keeps:
   - Fail open. The sheet is only a sheet while JS holds .is-sheet on it; without
     JS the form is a plain card in the page and every CTA is a link to #פנייה.
   - No ancestor of .sheet may carry transform / filter / backdrop-filter /
     will-change / contain, or position:fixed would anchor to it instead of the
     viewport. That is why .lp-zone and .lp-form never get .rv.
   - Grey text that sits on the tinted .lp-zone field is #58585d, not --ink-2
     (#6E6E73 measured 3.8:1 there on 03.10; #58585d holds AA).
   ========================================================================== */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-64px;z-index:1100;padding:10px 18px;border-radius:980px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:top .2s var(--e-soft)}
.skip:focus{top:12px}

/* --- hero: one promise line, no note under the button ---------------------
   On a phone every line break in the first screen is pinned: Heebo arrives in two
   files (Hebrew, then Latin with the spaces), and in between a free-wrapping line
   flips between one and two lines, or the chips between three and four rows, and
   the whole page below jumps (Lighthouse CLS 0.45 on 03.10). Fixed breaks in the H1
   (after "אותך") and the promise (after "לייב,"), and one chip per row, cannot flip. */
.hero .lead{margin:18px 0 26px;text-wrap:balance}
.br-m{display:none}
@media(max-width:600px){
  .hero{padding-block:16px 18px}
  .hero .lead{margin:14px 0 20px}
  .br-m{display:inline}
  .checks{display:grid;margin-top:18px;padding-top:14px;gap:7px}
}

/* --- the promo video below 860px: one row that opens into the player ------
   The row is decided by CSS alone, so it is right from the first paint: it applies
   while scripting is on and the play button is not [hidden]. The inline script hides
   that button the moment the video plays, which turns the row back into the full
   9:16 player. Scripting off, no :has(), or no (scripting) media feature: the full
   player stays, exactly as before. (A JS-gated version measured CLS 0.91 on 03.10.) */
.play__txt{display:grid;gap:3px;text-align:start}
.play__len{font-size:12.5px;font-weight:500;opacity:.92}
/* the pill sits on the light shirt in the poster: at .42, with the light-glass sheen,
   the white label measured 2.4:1 there. a darker field and the dark-glass sheen keep the
   material and hold AA */
.play.glass{background:rgba(10,20,36,.6)}
.play.glass::before{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%)}
/* the button ships without [hidden]; with scripting off nothing would answer it */
@media(scripting:none){.frame--video .play{display:none}}
@media(max-width:860px) and (scripting:enabled){
  .frame--video:not(:has(> .play[hidden])){
    order:1;justify-self:stretch;width:100%;max-width:none;aspect-ratio:auto;height:76px;
    border-radius:var(--r-md);background:#fff;border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.06)}
  .frame--video:not(:has(> .play[hidden])) video,
  .frame--video:not(:has(> .play[hidden])) .cover{
    inset-inline-end:auto;width:76px;height:100%;object-position:50% 14%}
  .frame--video:not(:has(> .play[hidden])) video::-webkit-media-controls{display:none!important}
  .frame--video:not(:has(> .play[hidden])) .chip{display:none}
  .frame--video:not(:has(> .play[hidden])) .play{
    inset:0;margin:0;width:100%;height:100%;max-width:none;border-radius:inherit;
    padding-block:0;padding-inline:calc(76px + 16px) 16px;justify-content:flex-start;
    background:transparent;color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    font-size:15px;line-height:1.3}
  .frame--video:not(:has(> .play[hidden])) .play::before{display:none}
  .frame--video:not(:has(> .play[hidden])) .play__icon{
    position:absolute;inset-inline-start:23px;top:50%;margin-top:-15px;
    box-shadow:0 4px 14px rgba(6,18,40,.35)}
  .frame--video:not(:has(> .play[hidden])) .play__len{color:#5E5E63;opacity:1}
  .frame--video:not(:has(> .play[hidden])) .play:hover{transform:none}
  .frame--video:not(:has(> .play[hidden])) .play:active{background:rgba(10,110,209,.06);transform:none}
  .frame--video:not(:has(> .play[hidden])):hover{--pz:1;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.06)}
}

/* --- one line "not for", right under the hero ------------------------------ */
.lp-not{padding-block:0 clamp(26px,3.4vw,44px)}
.lp-not__text{max-width:76ch;padding-block-start:16px;border-block-start:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:#58585d}
.lp-not__text b{color:var(--ink);font-weight:700}
/* on a phone this paragraph is 3 lines in Heebo and can be 4 while the font is half
   loaded; four lines are reserved, so the board below never moves */
@media(max-width:600px){.lp-not__text{font-size:15px;line-height:1.55;padding-block-start:14px;
  min-height:calc(4 * 1.55em + 14px)}}

/* --- the decision zone: board, prices and form on one tinted field --------- */
.lp-zone{position:relative;background:
  radial-gradient(70% 30% at 88% 3%,rgba(10,110,209,.14),transparent 62%),
  radial-gradient(55% 24% at 8% 38%,rgba(52,199,89,.08),transparent 60%),
  radial-gradient(70% 28% at 86% 80%,rgba(10,110,209,.10),transparent 62%),
  var(--bg-2)}

/* --- cohort board: closed → open → soon, read right to left like a timeline */
.lp-board{padding-block:clamp(36px,5vw,72px) 0}
.lp-board .head{margin-bottom:clamp(16px,2.2vw,28px)}
.lp-board .head h2{font-size:clamp(27px,3.4vw,42px)}
/* four cards from 08.10: the two closed cohorts stack, compact, in the first column; the open card and
   November take the two wide columns, each spanning both rows, so their five dates sit on one row */
.board{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.3fr) minmax(0,1.15fr);gap:clamp(12px,1.6vw,20px);align-items:stretch}
@media(min-width:761px){
  .board > .cohort--closed{grid-column:1}
  .board > .cohort--open{grid-column:2;grid-row:1 / span 2}
  .board > .cohort--nov{grid-column:3;grid-row:1 / span 2}
  .board > .cohort--closed .cohort__name{font-size:16px}
}
.cohort{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  border-radius:var(--r-lg);padding:clamp(18px,2vw,26px);background:#fff;
  border:1px solid rgba(16,48,84,.08);
  box-shadow:0 1px 2px rgba(16,48,84,.05),0 14px 36px rgba(16,48,84,.07)}
.cohort__state{display:inline-flex;align-items:center;gap:8px;margin:0;border-radius:980px;padding:5px 12px;
  font-size:13px;font-weight:600;line-height:1.3;background:rgba(16,48,84,.06);color:#4E4E53}
.cohort__state .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7;flex:none}
.cohort__name{margin-top:12px;font-size:clamp(17px,1.45vw,19px);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.cohort__when,.cohort__text{margin-top:6px;font-size:14.5px;line-height:1.55;color:#58585d}
.cohort__dates{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cohort__dates li{padding:6px 10px;border-radius:10px;font-size:14px;font-weight:700;line-height:1.2;
  color:var(--accent-ink);background:rgba(10,110,209,.08);font-variant-numeric:tabular-nums}
.cohort__time{margin-top:12px;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.cohort__time span{font-weight:400;color:#58585d}
.cohort__close{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink)}
.cohort__foot{margin-top:auto;padding-top:18px;width:100%}
.cohort__btn{width:100%;justify-content:center}
/* closed: flat and quiet, no action. it is still a real cohort that is running */
.cohort--closed{background:rgba(255,255,255,.5);box-shadow:none;border-color:rgba(16,48,84,.07)}
.cohort--closed .cohort__name{color:#4E4E53}
/* open: the one card the accent is spent on */
.cohort--open,.cohort--nov{border-color:rgba(10,110,209,.32);
  box-shadow:0 0 0 1px rgba(10,110,209,.14),0 2px 6px rgba(10,110,209,.08),0 22px 50px rgba(10,110,209,.16)}
.cohort--open .cohort__state,.cohort--nov .cohort__state{background:rgba(52,199,89,.13);color:#17703A}
.cohort--open .cohort__state .dot,.cohort--nov .cohort__state .dot{background:#34C759;opacity:1;box-shadow:0 0 0 3px rgba(52,199,89,.22)}
/* soon: an outline, not a card yet */
.cohort--soon{background:rgba(255,255,255,.62);box-shadow:none;border:1px dashed rgba(16,48,84,.22)}
/* registration close: the 18.10 Sun/Wed card after Thu 15.10.2026 20:00 Israel time. html.reg-closed is
   set by the inline script in <head> (the deadline, the localhost-only test override and the live
   timer all live there, so the state is right at first paint and does not wait for premium.js).
   The card swaps its status label, loses its close line and its CTA, and takes the closed card's
   quiet look (flat, no accent). Its name, dates and time stay: they say when the cohort runs.
   Nothing else on the page reacts to this class. */
.reg-shut{display:none}
html.reg-closed .reg-open{display:none}
html.reg-closed .reg-shut{display:inline}
html.reg-closed .cohort--open .cohort__close,
html.reg-closed .cohort--open .cohort__foot{display:none}
html.reg-closed .cohort--open{background:rgba(255,255,255,.5);box-shadow:none;border-color:rgba(16,48,84,.07)}
html.reg-closed .cohort--open .cohort__state{background:rgba(16,48,84,.06);color:#4E4E53}
html.reg-closed .cohort--open .cohort__state .dot{background:currentColor;opacity:.7;box-shadow:none}
html.reg-closed .cohort--open .cohort__name{color:#4E4E53}
html.reg-closed .cohort--open .cohort__dates li{color:#4E4E53;background:rgba(16,48,84,.06)}
/* November cohort: the "soon" card is replaced by it at the same instant (html.reg-closed). Until
   then it does not exist for the eye or for assistive tech (display:none). Same instant, same switch:
   the fail-closed clock in <head>. */
.t-nov{display:none}
html.reg-closed .t-nov:not([hidden]){display:inline}
html.reg-closed .t-oct{display:none}
/* gifts link block (internal link for crawlers; a quiet band, not a card shouting) */
.lp-gifts{padding-block:0 clamp(44px,6vw,88px)}
.lp-gifts__box{max-width:840px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,32px);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px);border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line)}
.lp-gifts__text{min-width:0}
.lp-gifts h2{font-size:clamp(21px,2.2vw,26px);line-height:1.25;letter-spacing:-.02em}
.lp-gifts p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.lp-gifts .btn{flex:none}
@media(max-width:700px){
  .lp-gifts__box{flex-direction:column;align-items:stretch;text-align:start}
  .lp-gifts .btn{width:100%;justify-content:center}
}
.lp-board .cyc__make{max-width:1080px;margin-inline:auto;text-align:center}
.lp-board .cyc__make p{margin-inline:auto}
@media(max-width:760px){
  .lp-board{padding-top:30px}
  .board{grid-template-columns:1fr;gap:10px}
  .cohort{padding:16px 16px 18px}
  .cohort__name{margin-top:10px;font-size:17px}
  /* closed and soon: the status and the name share one row on a phone */
  .cohort--closed,.cohort--soon{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .cohort--closed{padding:12px 16px}
  .cohort--closed .cohort__name,.cohort--soon .cohort__name{margin-top:0}
  .cohort--closed .cohort__name{font-size:15px}
  .cohort--closed .cohort__when{margin-top:0;font-size:14px}
  .cohort--soon .cohort__text{flex-basis:100%;margin-top:2px}
  .cohort--soon .cohort__foot{padding-top:12px}
  .lp-board .cyc__make{margin-top:12px;padding:11px 14px;text-align:start}
  .lp-board .cyc__make p{font-size:13.5px;line-height:1.5}
}

/* --- prices: the interim patch's two cards, unchanged; only the spacing here */
.lp-price .price__same{margin-top:clamp(34px,4.2vw,56px)}
/* the Claude Pro line reads as part of the terms under the price, not as a footnote */
.lp-price .price__req{margin-top:6px;color:var(--ink);font-weight:500}

/* --- the form section, and the wrapper that can become a sheet ------------- */
.lp-form{padding-block:clamp(40px,5.5vw,80px) clamp(44px,6vw,88px)}
.lp-form > .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:center;max-width:1100px}
.lp-form__say h2{font-size:clamp(28px,3.3vw,42px);line-height:1.12;text-wrap:balance}
.lp-form__say .lead{margin-top:14px;max-width:44ch;color:#58585d}
.sheet-slot{min-width:0}
.sheet{max-width:560px;margin-inline:auto}
.sheet .form{border-radius:var(--r-lg);padding:clamp(20px,3vw,30px)}
.sheet__alt{margin:14px 0 0}
.sheet__alt .btn{width:100%;justify-content:center;text-align:center;line-height:1.3;background:rgba(255,255,255,.6)}
.sheet__scrim,.sheet__bar{display:none}
@media(max-width:600px){.sheet__alt .btn{padding:13px 14px;font-size:15px}}
@media(max-width:860px){
  .lp-form{padding-top:30px}
  /* the jump target of every "#פנייה" link, the whole page when scripting is off (with it on, the
     link opens the sheet instead). The sticky nav is ~71px and the heading sits 30px inside the
     section, so landing exactly on the section top left 37-41px of the heading under the nav.
     The offset is the target's only one: html has no scroll-padding-top, and the two would add up. */
  .lp-form{scroll-margin-top:58px}
  .lp-form > .wrap{grid-template-columns:1fr;gap:16px}
  .lp-form__say h2{font-size:clamp(25px,6.6vw,32px)}
  .lp-form__say .lead{margin-top:10px;font-size:16px}
}

/* sheet mode: the same node, presented as a dialog above everything (the consent
   bar is z 900). Bottom sheet up to 760px, centred panel above. --vvt/--vvh come
   from visualViewport, so the sheet stays above an on-screen keyboard. */
html.sheet-lock,html.sheet-lock body{overflow:hidden}
.sheet.is-sheet{position:fixed;inset-inline:0;top:var(--vvt,0px);height:var(--vvh,100%);z-index:1000;
  max-width:none;margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.sheet.is-sheet .sheet__scrim{display:block;position:absolute;inset:0;touch-action:none;
  background:rgba(16,24,40,.44);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .42s var(--e-soft)}
.sheet.is-sheet .sheet__panel{position:relative;width:100%;max-height:calc(100% - 24px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:0 clamp(16px,4.4vw,26px) calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 40px rgba(16,24,40,.18);
  transform:translate3d(0,104%,0);transition:transform .52s var(--e-out)}
.sheet.is-open .sheet__scrim{opacity:1}
.sheet.is-open .sheet__panel{transform:none}
.sheet.is-closing .sheet__panel{transition:transform .3s var(--e-in)}
.sheet.is-sheet .sheet__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 12px;
  position:sticky;top:0;z-index:3;margin-inline:calc(-1 * clamp(16px,4.4vw,26px));
  padding:8px clamp(16px,4.4vw,26px) 12px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-block-end:1px solid var(--line);touch-action:none;cursor:grab}
.sheet__grip{grid-column:1/-1;justify-self:center;width:38px;height:5px;margin-bottom:6px;
  border-radius:980px;background:rgba(16,24,40,.18)}
.sheet__title{font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* the title takes focus only so a screen reader starts at the top of the dialog;
   it is not a control, so no ring (the house [tabindex]:focus-visible rule would add one) */
.sheet__title:focus,.sheet__title[tabindex]:focus-visible{outline:none}
.sheet__sub{margin-top:3px;font-size:13px;line-height:1.45;color:#5E5E63;text-wrap:balance}
.sheet__x{appearance:none;-webkit-appearance:none;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);font:400 24px/1 var(--font);cursor:pointer;
  display:grid;place-items:center;transition:transform .3s var(--e-spring),color .2s,background .2s}
.sheet__x:hover{color:var(--ink);background:var(--bg-2)}
.sheet__x:active{transform:scale(.92)}
/* the sheet is the card now: the form loses its own glass, shadow and padding */
.sheet.is-sheet .form{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;padding:16px 0 0}
.sheet.is-sheet .form::before{display:none}
.sheet.is-sheet .sheet__alt .btn{background:transparent}
@media(min-width:761px){
  .sheet.is-sheet{justify-content:center;align-items:center;padding:24px}
  .sheet.is-sheet .sheet__panel{width:min(560px,100%);max-height:min(calc(100% - 48px),900px);
    border-radius:var(--r-lg);box-shadow:0 40px 120px rgba(16,24,40,.30);
    opacity:0;transform:translate3d(0,18px,0) scale(.97);
    transition:transform .5s var(--e-out),opacity .32s var(--e-soft)}
  .sheet.is-open .sheet__panel{opacity:1;transform:none}
  .sheet.is-closing .sheet__panel{transition:transform .26s var(--e-in),opacity .2s var(--e-soft)}
  .sheet.is-sheet .sheet__grip{display:none}
  .sheet.is-sheet .sheet__bar{cursor:default;padding-top:16px}
}
/* the opening animation (premium.js, openSheet). .is-sheet both moves the panel off-screen and
   gives it its transition, so adding it alone starts a transition that .is-open then reverses:
   the panel popped in place instead of rising. premium.js therefore adds .is-sheet together with
   .is-priming, forces a reflow so the off-screen state is committed with NO transition, then
   swaps .is-priming for .is-open. This rule is the "no transition" half; it must stay below the
   panel rules above and keep its extra class so it beats them at every width. */
.sheet.is-sheet.is-priming .sheet__scrim,
.sheet.is-sheet.is-priming .sheet__panel{transition:none!important}

/* --- the level quiz, before the form (11.10) -------------------------------
   Base look: the inline stylesheet in index.html. This block owns the motion,
   the pressed states and the sheet-mode flattening, exactly as .form does.
   The quiz is a card in the page and flat inside the sheet, for the same reason
   the form is: in sheet mode the PANEL is the card. */
.sheet.is-sheet .lq,
.sheet.is-sheet .lq-res__one--not,
.sheet.is-sheet .done{background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:16px 0 0}

/* --dur-2 is the state-change rung: the bar must read as a step, not as a crawl */
.lq__bar i{transition:transform var(--dur-2) var(--e-out)}

/* One option row. The press is the whole feedback on a phone, so it is a scale
   rather than a colour: a thumb covers the colour. */
.lq__opt{transition:background var(--dur-1) var(--e-soft),border-color var(--dur-1),
  box-shadow var(--dur-1) var(--e-soft),transform var(--dur-1) var(--e-out)}
.lq__opt:hover{background:#fff;border-color:rgba(10,110,209,.38);box-shadow:var(--sh-rest)}
.lq__opt:active{transform:scale(.985)}
.lq__opt.is-picked{background:rgba(10,110,209,.08);border-color:var(--accent);color:var(--accent-ink)}
@media (hover:none){
  .lq__opt:hover{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.09);box-shadow:none}
}
.lq__opt:focus-visible,.lq__skip:focus-visible,.lq__back:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}

/* The screen change. One question leaves, the next arrives from the leading edge,
   which in RTL is the right: authored for RTL, LTR is the escape hatch below. */
.lq__q{animation:lq-in var(--dur-2) var(--e-out) both}
@keyframes lq-in{from{opacity:0;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}
[dir="ltr"] .lq__q{animation-name:lq-in-ltr}
@keyframes lq-in-ltr{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}

/* The result and the thank-you screen each arrive once, so they get the entrance
   rung rather than the state rung. */
.lq-res__one,.done{animation:lq-up var(--dur-3) var(--e-out) both}
@keyframes lq-up{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .lq__q,.lq-res__one,.done{animation:none}
  .lq__bar i,.lq__opt{transition:none}
}

/* --- everything else, as accordions ---------------------------------------- */
.lp-more{padding-block:clamp(44px,6vw,92px) clamp(40px,5.5vw,80px)}
.lp-more .head{margin-bottom:clamp(14px,2vw,26px)}
.lp-more .head h2{font-size:clamp(27px,3.4vw,42px)}
.accs{max-width:840px;margin-inline:auto;border-block-start:1px solid var(--line)}
.acc{padding:0}
.acc > summary{padding-block:20px;font-size:clamp(18px,1.6vw,21px);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.acc > summary i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,110,209,.08)}
.acc__body{padding-block-end:28px}
.acc__body > * + *{margin-top:18px}
details[open] > .acc__body{animation:faq-open .5s var(--e-out) both}
.acc__lead{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.acc__h{margin-top:28px!important;font-size:17px;font-weight:700;letter-spacing:-.01em}
.acc .clist b{font-size:16px}
.acc .clist span{font-size:15px}
.acc .clist .cn{color:var(--accent-ink)}   /* accent on its own tint measured 4.37:1; accent-ink holds AA */
.clist--syl li,.clist--plain li{padding-block:9px;align-items:center}
.clist--syl span,.clist--plain span{margin-top:0;color:var(--ink)}
.clist--plain span span{display:inline}   /* the nowrap phrase inside an item stays inline */
.acc .gap3{margin-block-end:0}
.acc .band{box-shadow:none}
.qa{margin:0;display:grid;gap:18px}
.qa > div{padding-block-end:18px;border-block-end:1px solid var(--line)}
.qa > div:last-child{padding-block-end:0;border:0}
.qa dt{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.qa dd{margin:6px 0 0;max-width:64ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.qa dd a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lp-end{margin-top:clamp(28px,3.6vw,44px);text-align:center}
@media(max-width:600px){
  .acc > summary{padding-block:17px;font-size:17.5px}
  .lp-end .btn{width:100%;justify-content:center}
}
/* === end landing: short page + sheet === */