/* Guide page (guide.html) and thank-you page (thank-you.html): only what refined.css does not already cover. */

/* Hero: a short gift line, the headline, and the whole sign-up form on the first screen.
   The stage is 740px tall at its baseline (guide.html sizes it to the screen, minus 20px); the copy is laid out
   above the form's top edge (740 - 252 = 488) and moves down by --hx on taller screens. */
.hs-tag{position:absolute;right:34px;top:calc(150px + var(--hx,0px));margin:0;max-width:none;font-size:18px;line-height:1;color:var(--lime);letter-spacing:.01em}
.guide .hs-title{top:calc(180px + var(--hx,0px));font-size:58px;line-height:1.05;width:680px}
.guide .hs-intro{top:calc(318px + var(--hx,0px));width:560px;font-size:22px;line-height:1.3}
.guide .hs-proof{top:calc(420px + var(--hx,0px));width:560px;white-space:normal;font-size:20px;line-height:1.3;color:var(--lime);text-wrap:balance}
/* Three fields in one row - first name, email, phone - then the button */
@media(min-width:761px){
  .guide .hs-field-name{left:775px;width:210px}
  .guide .hs-field-email{left:553px;width:210px}
  .guide .hs-field-phone{left:331px;width:210px}
  .guide .arrow-btn.hs-submit{left:52px;width:267px}
}
@media(max-width:760px){
  .hs-tag{position:static;font-size:15px;line-height:1.4;margin-bottom:14px}
  .guide .hs-title{width:auto;font-size:clamp(32px,9vw,42px)}
  .guide .hs-title>span{text-wrap:balance}
  .guide .hs-intro,.guide .hs-proof{width:auto;font-size:18px}
  /* The form follows the headline and intro straight away; the line of proof and the art come after it */
  .guide .hs-main{display:flex;flex-direction:column}
  .guide .hs-copy{display:contents}
  .guide .hs-tag{order:0;margin-top:26px}
  .guide .hs-title,.guide .hs-intro{order:0}
  .guide .hs-intro{margin-bottom:0}
  .guide .hs-form{order:1;margin-top:26px}
  .guide .hs-proof{order:2;margin-top:24px}
  .guide .hs-art{order:3}
}

/* Page grid on the guide's own bands, lined up with the rest of the page by guide.js (--grid-y) */
body>.gd-story,body>.gd-cta{background-size:97px 97px;background-position:50% var(--grid-y,0px)}
body>.gd-story{background-image:var(--grid-paper)}
body>.gd-cta{background-image:var(--grid-ink)}

/* Story: one short case, told in the middle of the page */
.gd-story{position:relative;isolation:isolate;overflow:hidden;background-color:var(--green);color:var(--paper);padding-block:clamp(64px,7vw,104px)}
.gd-story .wrap{position:relative}
.gd-story-grid{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.gd-story-copy h2{font-size:clamp(36px,4vw,56px);line-height:1.2em;margin-bottom:28px}
.gd-story-copy p{font-size:22px;line-height:1.2em;color:rgba(248,248,248,.82);margin:0 0 20px}
.gd-story .gd-punch{font-size:clamp(26px,2.6vw,36px);font-weight:900;line-height:1.2em;color:var(--paper);margin-block:30px}
/* The letter: the brand letterhead from Figma (dark band, hanging logo badge, thin frame, contact line), built in CSS */
.gd-letter{position:relative;background:#fff;color:var(--ink);padding:0 0 22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.18);rotate:-1.5deg}
.gd-letter:before{content:'';position:absolute;inset:44px 26px 60px;border:1px solid var(--green);pointer-events:none}
.gd-letter-band{display:block;height:22px;background:var(--green);box-shadow:inset 0 -2px 0 var(--lime)}
.gd-letter-badge{position:relative;z-index:1;display:block;width:max-content;margin:-22px auto 0;padding:10px 16px;background:var(--green)}
.gd-letter-badge .logo{width:164px;height:55px}
.gd-letter-body{position:relative;padding:34px 52px 10px;text-align:right}
.gd-story .gd-letter h2{font-size:clamp(34px,3.4vw,46px);line-height:1.2em;white-space:nowrap;color:var(--green);margin-bottom:20px}
.gd-letter p{font-size:20px;line-height:1.45;color:rgba(8,27,28,.8);margin:0 0 16px}
.gd-letter .gd-letter-sign{font-weight:900;color:var(--green);margin-top:24px}
.gd-letter .gd-letter-foot{display:flex;justify-content:center;gap:10px;margin:26px 0 0;font-size:14px;color:var(--green)}
@media(max-width:900px){
  .gd-story-grid{grid-template-columns:1fr}
  .gd-letter{rotate:none;max-width:520px;margin-inline:auto;width:100%}
}
@media(max-width:760px){
  .gd-letter:before{inset:40px 14px 54px}
  .gd-letter-body{padding:28px 32px 6px}
  .gd-letter p{font-size:18px}
  .gd-letter .gd-letter-foot{flex-wrap:wrap;font-size:13px}
}
.gd-punch b{color:var(--lime)}
.gd-story-copy{align-self:center}
.gd-story-copy h2{font-size:clamp(34px,4.4vw,64px);margin:0}
/* Desktop: the heading leads on the right, in the wider column, and the letter sits on the left;
   a narrower letter and a slightly smaller size keep the heading to a few lines. */
@media(min-width:901px){
  /* Wider than the page's usual column, with half the gap, so the heading gets the room */
  .gd-story .wrap{width:min(1340px,calc(100% - 128px))}
  .gd-story-grid{grid-template-columns:minmax(0,1fr) minmax(0,450px);gap:clamp(24px,3vw,48px)}
  .gd-story-copy{order:-1;container-type:inline-size}
  /* Four set lines; sized by the column so the longest ("…כל היום,") always fits on one */
  .gd-story-copy h2{font-size:clamp(30px,8.4cqi,66px);white-space:nowrap}
}
/* On a phone those lines are too long to keep, so the breaks give way to natural wrapping */
@media(max-width:900px){.gd-story-copy .lb{display:none}}
/* The lessons' watermark sits 30px higher, behind the top of the heading rather than its foot */
body.guide .pv-watermark{margin-top:-30px}
@media(max-width:760px){body.guide .pv-watermark{margin-top:-15px}}
/* Lesson 1's text gets the same width as the others (the strategy page narrows it), so all three
   paragraphs run two lines and the cards come out the same height */
@media(min-width:761px){body.guide .pv-step:first-child p{max-width:none}}
/* The footer holds its content only; the strategy page's fixed 792px height left a gap before the credit */
body.guide .figma-footer{min-height:0}
/* Testimonials: 30px more air above the heading */
body.guide .gd-videos .rx3-head{padding-top:104px}
/* …and the "המלצות" watermark comes down with it, 30px, to sit behind the heading again */
body.guide .gd-videos .rx3-word{top:30px}
@media(max-width:760px){body.guide .gd-videos .rx3-head{padding-top:76px}}
/* The letter reads itself in as it scrolls by (refined.js splits it into words) */
.gd-letter-body .rw{opacity:.16}
.gd-story-copy mark{background:linear-gradient(var(--lime),var(--lime)) 0 0/100% 100% no-repeat;color:var(--ink);padding:.04em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* The question that hands over to the lessons gets heading weight */
.gd-story h2.gd-next{font-size:clamp(36px,4.2vw,60px);line-height:1.2em;text-align:center;color:var(--lime);margin:clamp(56px,6vw,88px) auto 0;max-width:780px}
/* The lessons' own fading lines (78px apart) sat over the page grid (97px) and ended in a hard edge
   above "what you get"; here the page grid alone carries the transition. */
body.guide .pv:after{display:none}
/* On desktop the question stays on one line, shrinking with the screen instead of wrapping */
@media(min-width:761px){.gd-story h2.gd-next{max-width:none;white-space:nowrap;font-size:clamp(28px,4.2vw,60px)}}
/* Lanterns: dark pools for depth, white and lime light on top, each drifting on its own clock */
.gd-story-glows{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gd-story-glows img{position:absolute;height:auto;animation:rs-drift 26s ease-in-out infinite alternate}
.gd-glow-gray{mix-blend-mode:multiply;opacity:.9}
.gd-glow-white,.gd-glow-lime{mix-blend-mode:screen}
.gd-glow-gray.g1{width:62vw;max-width:980px;top:-30%;right:-18%}
.gd-glow-gray.g2{width:52vw;max-width:820px;bottom:-34%;left:-16%;animation-duration:31s;animation-delay:-9s}
.gd-glow-white{width:46vw;max-width:720px;top:2%;left:-6%;opacity:.55;animation-duration:23s;animation-delay:-5s}
.gd-glow-lime{width:44vw;max-width:700px;bottom:-12%;right:4%;opacity:.7;animation-duration:29s;animation-delay:-14s}
@media(max-width:760px){
  .gd-story-glows img{width:120vw!important}
  .gd-story-copy p{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.gd-story-glows img{animation:none}}
/* Divider into the lessons (Figma 237-217): the green band ends in a 45° point, and two chevrons on the
   point lead down to the next section. --u scales the Figma sizes; the point is cut from the band itself,
   so its grid and glow run into it and the page's light grid shows around it. */
.gd-story{--u:1;--notch:calc(112px * var(--u));padding-bottom:calc(var(--notch) + 120px * var(--u));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(50% + var(--notch)) calc(100% - var(--notch)),50% 100%,calc(50% - var(--notch)) calc(100% - var(--notch)),0 calc(100% - var(--notch)))}
.gd-divider{position:absolute;left:50%;bottom:calc(31px * var(--u));width:calc(171px * var(--u));height:calc(176px * var(--u));translate:-50% 0;color:var(--lime)}
.gd-divider svg{display:block;width:100%;height:100%;fill:currentColor;animation:gd-lead 2.4s ease-in-out infinite}
.gd-divider:focus-visible{outline-color:var(--lime)}
@keyframes gd-lead{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(10px * var(--u)))}}
@media(max-width:760px){.gd-story{--u:.62}}
@media(prefers-reduced-motion:reduce){.gd-divider svg{animation:none}}

/* Lessons: the process cards carry a question above the text */
.pv-lead{position:relative;z-index:1;margin:18px auto 0;font-size:22px;line-height:1.45;color:var(--muted);max-width:620px}
.guide .pv-step p b{display:block;font-size:24px;line-height:1.25;margin-bottom:8px}
.gd-before{font-size:18px;line-height:1.4;color:var(--muted);margin:0 auto 16px;text-align:center}
.guide .pv-cta{display:flex;flex-direction:column;align-items:center}

/* What you get */
.gd-get h2{margin-bottom:48px}
/* Lime lanterns, the same as the pain section's: top left, picking up from the lessons above, and bottom
   right. They may spill up and down into the neighbours but never sideways off the page. */
.gd-get{position:relative;isolation:isolate;overflow-x:clip}
.gd-get-glows{position:absolute;z-index:-1;top:0;left:50%;width:1280px;height:100%;margin-left:-640px;pointer-events:none}
.gd-get-glow{position:absolute;width:1067.8px;height:1011.8px;max-width:none;animation:rs-drift 27s ease-in-out infinite alternate}
.gd-get-glow-a{left:-420px;top:-330px}
.gd-get-glow-b{right:-420px;bottom:-180px;animation-duration:33s;animation-delay:-11s}
@media(prefers-reduced-motion:reduce){.gd-get-glow{animation:none}}
.gd-get h2 mark{background:linear-gradient(var(--lime),var(--lime)) 0 0/100% 100% no-repeat;color:var(--ink);padding:.04em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gd-get-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.gd-get-item{padding:34px 28px 38px;border-inline-start:1px solid var(--ink)}
.gd-get-item:first-child{border-inline-start:0}
.gd-get-item i{display:block;width:46px;height:46px;margin-bottom:26px}
.gd-get-item svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.gd-get-item h3{font-size:26px;line-height:1.38;margin-bottom:12px}
/* Each card's title on lime, drawn in card by card as the row scrolls in (guide.js) */
.gd-get-item h3 mark{background:linear-gradient(var(--lime),var(--lime)) 100% 0/100% 100% no-repeat;color:inherit;padding:.06em .22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gd-get-item p{font-size:19px;line-height:1.5;color:var(--muted)}
.gd-bonus{margin-top:28px;background:var(--ink);color:var(--paper);display:flex;gap:32px;align-items:center;padding:30px 36px}
.gd-bonus-tag{flex-shrink:0;background:var(--lime);color:var(--ink);font-weight:900;font-size:18px;line-height:1;padding:12px 16px}
.gd-bonus h3{font-size:28px;margin-bottom:6px}
.gd-bonus p{font-size:20px;line-height:1.5;color:rgba(248,248,248,.8);max-width:none}
@media(max-width:1000px){
  .gd-get-grid{grid-template-columns:1fr 1fr}
  .gd-get-item:nth-child(3){border-inline-start:0}
  .gd-get-item:nth-child(n+3){border-top:1px solid var(--ink)}
}
@media(max-width:760px){
  .gd-get-grid{grid-template-columns:1fr}
  .gd-get-item{border-inline-start:0;padding:26px 22px}
  .gd-get-item+.gd-get-item{border-top:1px solid var(--ink)}
  .gd-bonus{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 22px}
  .gd-bonus h3{font-size:24px}
  .gd-bonus p{font-size:18px}
}


/* Testimonials: three videos side by side, no sideways scroll; a click opens the video large */
.gd-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(36px,4vw,56px)}
.gd-video{width:auto;height:auto;aspect-ratio:4/5;border:0;font:inherit;text-align:right;cursor:pointer}
.gd-video .rx-play{top:42%}
.gd-video:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
/* At most three quarters of the screen either way, centered; the page zoom (--pz) would enlarge
   vw/vh again, so they are divided by it. A phone gets nearly the full width. */
.gd-video-dialog{width:min(1040px,calc(75vw / var(--pz,1)),calc(75vh * 16 / 9 / var(--pz,1)));max-width:none;max-height:none;padding:0;border:0;background:var(--ink);color:var(--paper);overflow:visible}
.gd-video-dialog::backdrop{background:rgba(8,27,28,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gd-video-dialog[open]{animation:gd-grow .45s cubic-bezier(.22,.61,.36,1)}
@keyframes gd-grow{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.gd-video-stage{position:relative;aspect-ratio:16/9;padding:32px 36px}
.gd-video-stage:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 85% at 28% 20%,rgba(208,222,41,.2),rgba(208,222,41,0) 62%),linear-gradient(to top,rgba(8,27,28,.9),rgba(8,27,28,0) 50%)}
.gd-video-stage>*{position:relative}
.gd-video-stage .rx-play{position:absolute;width:104px;height:104px}
.gd-video-stage p{font-size:18px}
.gd-video-stage p b{font-size:30px}
.gd-video-close{position:absolute;top:-22px;left:-22px;z-index:2;width:48px;height:48px;display:grid;place-items:center;border:0;padding:0;background:var(--lime);color:var(--ink)}
.gd-video-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.gd-video-close:hover{background:var(--paper)}
@media(max-width:760px){
  .gd-video-grid{grid-template-columns:1fr;gap:16px}
  .gd-video-close{top:-56px;left:0}
  .gd-video-dialog{width:calc(100vw - 40px)}
  .gd-video-stage{padding:18px 20px}
  .gd-video-stage .rx-play{width:68px;height:68px}
  .gd-video-stage p b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.gd-video-dialog[open]{animation:none}}

/* Call to action + why now */
.gd-cta{position:relative;isolation:isolate;overflow:hidden;background-color:rgba(208,222,41,.5);padding:90px 0;text-align:center}
.gd-glows{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gd-lantern{position:absolute;width:42vw;max-width:640px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(255,255,255,.3) 35%,rgba(255,255,255,0) 68%);filter:blur(10px);animation:rs-drift 24s ease-in-out infinite alternate}
.gd-l1{top:-45%;right:-8%}
.gd-l2{bottom:-50%;left:-10%;animation-duration:29s;animation-delay:-8s}
.gd-l3{top:10%;left:38%;width:24vw;opacity:.8;animation-duration:21s;animation-delay:-4s}
@media(prefers-reduced-motion:reduce){.gd-lantern{animation:none}}
.gd-cta h2{font-size:clamp(34px,4.4vw,62px);line-height:1.1;max-width:1000px;margin:0 auto 24px}
.gd-cta p{font-size:24px;line-height:1.5;max-width:720px;margin:0 auto 34px}
.gd-cta .gd-before{font-size:18px;color:var(--ink);margin-bottom:16px}
.gd-cta .arrow-btn{display:inline-flex}
.gd-cta .gd-guarantee{font-size:17px;color:var(--muted);margin:24px auto 0}
@media(max-width:760px){
  .gd-cta{padding:64px 0}
  .gd-cta p{font-size:19px}
}

/* Final form in the footer: two fields, a personal note */
.figma-footer .gd-sign{color:var(--lime);font-weight:900}
.guide .figma-footer .contact-price{white-space:normal}

/* Thank-you page: one screen, no scroll. Body carries zoom (--pz), so the screen height is divided by it.
   Dark half: the greeting and the three steps. Light half: the bonus offer. */
body.thank-you{overflow:hidden;--u:calc(1vh / var(--pz,1));--w:calc(1vw / var(--pz,1))}
.thank-you .hs-nav,.thank-you .hs-top-btn,.thank-you .menu-toggle{display:none}
.ty-screen{--head:calc(142px * var(--hs,1));height:calc(100dvh / var(--pz,1));display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden}
.ty-in{height:100%;display:flex;flex-direction:column;justify-content:center}
.ty-hero{background-color:var(--ink);background-image:var(--grid-paper);background-size:97px 97px;color:var(--paper);padding:calc(var(--head) + calc(2 * var(--u))) clamp(32px,calc(5 * var(--w)),90px) calc(5 * var(--u))}
.ty-hero h1{font-size:clamp(34px,min(calc(4.3 * var(--w)),calc(9 * var(--u))),96px);line-height:1.06}
.ty-hero h1>span{display:block}
.ty-hero h1>.ty-hello{font-size:.42em;line-height:1.2;margin-bottom:.35em}
.ty-hero h1>.ty-line{white-space:nowrap}
.ty-hello{color:var(--lime)}
.ty-lead{font-size:clamp(18px,calc(2.8 * var(--u)),28px);font-weight:900;line-height:1.35;color:var(--paper);border-inline-start:4px solid var(--lime);padding-inline-start:16px;margin-top:calc(2.6 * var(--u));max-width:61%}
.ty-sub{font-size:clamp(17px,calc(2.3 * var(--u)),22px);line-height:1.5;color:rgba(248,248,248,.8);max-width:560px;margin:calc(2.6 * var(--u)) 0 calc(4 * var(--u))}
.ty-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--dark-line)}
.ty-steps li{padding:calc(2.6 * var(--u)) 22px;border-inline-start:1px solid var(--dark-line)}
.ty-steps li:first-child{border-inline-start:0}
.ty-num{display:block;font-size:clamp(26px,calc(3.6 * var(--u)),38px);font-weight:900;line-height:1;color:var(--lime);margin-bottom:calc(1.4 * var(--u))}
.ty-steps h2{font-size:clamp(18px,calc(2.4 * var(--u)),23px);letter-spacing:0;margin-bottom:6px}
.ty-steps p{font-size:clamp(15px,calc(1.9 * var(--u)),18px);line-height:1.45;color:rgba(248,248,248,.75)}
.ty-offer{background:var(--paper);padding:calc(var(--head) + calc(2 * var(--u))) clamp(32px,calc(5 * var(--w)),90px) 0}
.ty-offer .ty-in{align-items:flex-start}
.ty-tag{display:inline-block;background:var(--lime);font-weight:900;font-size:clamp(15px,calc(2 * var(--u)),18px);line-height:1;padding:10px 14px;margin-bottom:calc(2.6 * var(--u))}
.ty-offer h2{font-size:clamp(30px,min(calc(3.4 * var(--w)),calc(5.6 * var(--u))),56px);line-height:1.08;margin-bottom:calc(2 * var(--u))}
.ty-copy{font-size:clamp(16px,calc(2.2 * var(--u)),21px);line-height:1.55;color:var(--muted);max-width:560px;margin-bottom:calc(3 * var(--u))}
.ty-price{display:flex;align-items:center;gap:22px;margin-bottom:calc(3.4 * var(--u))}
.ty-big{font-size:clamp(64px,calc(11 * var(--u)),112px);font-weight:900;line-height:.85;color:var(--green)}
.ty-big span{font-size:.4em;margin-inline-start:6px}
.ty-was{font-size:clamp(17px,calc(2.3 * var(--u)),22px);font-weight:900;margin-bottom:4px}
.ty-was del{text-decoration-color:var(--lime);text-decoration-thickness:3px}
.ty-meta{font-size:clamp(14px,calc(1.9 * var(--u)),17px);color:var(--muted)}
.ty-foot{margin-top:auto;background:none;padding:calc(2.4 * var(--u)) 0;display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.ty-foot a,.ty-foot button{color:inherit;background:none;border:0;padding:0;font-size:14px;cursor:pointer}
.ty-offer .ty-in{padding-top:calc(2 * var(--u))}
@media(max-width:1000px){
  /* Tablet and phone: the halves stack, and the copy paragraph and step notes step aside so it all fits. */
  .ty-screen{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ty-in{height:auto}
  .ty-offer .ty-in{height:100%}
  .ty-hero{padding:calc(var(--head) + calc(2.2 * var(--u))) 20px calc(2.6 * var(--u))}
  .ty-hero h1{font-size:clamp(30px,min(calc(9.4 * var(--w)),calc(5.4 * var(--u))),44px)}
  .ty-sub{font-size:clamp(14px,calc(2 * var(--u)),17px);margin:calc(1.4 * var(--u)) 0 calc(2 * var(--u))}
  .ty-steps li{padding:calc(1.4 * var(--u)) 10px}
  .ty-num{font-size:clamp(20px,calc(3 * var(--u)),26px);margin-bottom:calc(.8 * var(--u))}
  .ty-steps h2{font-size:clamp(14px,calc(2 * var(--u)),17px);margin:0}
  .ty-steps p,.ty-copy{display:none}
  .ty-offer{padding:calc(2.6 * var(--u)) 20px 0}
  .ty-tag{font-size:14px;padding:8px 12px;margin-bottom:calc(1.6 * var(--u))}
  .ty-offer h2{font-size:clamp(24px,min(calc(7.4 * var(--w)),calc(4.2 * var(--u))),34px);margin-bottom:calc(1.8 * var(--u))}
  .ty-price{gap:14px;margin-bottom:calc(2.2 * var(--u))}
  .ty-big{font-size:clamp(46px,calc(8 * var(--u)),72px)}
  .ty-cta{width:100%}
  .ty-foot{justify-content:center;padding:calc(1.6 * var(--u)) 0;gap:16px;font-size:13px}
}
@media(max-width:760px){.ty-screen{--head:76px}}
/* Short screens: the line under the heading goes first, then the tag; the steps and the offer always stay. */
@media(max-width:1000px) and (max-height:760px){
  .ty-sub{display:none}
  .ty-steps{margin-top:calc(2.2 * var(--u))}
  .ty-big{font-size:clamp(44px,calc(7.4 * var(--u)),60px)}
  .ty-foot{padding:calc(1.2 * var(--u)) 0}
}
@media(max-width:1000px) and (max-height:620px){.ty-tag{display:none}}
@media(min-width:1001px) and (max-width:1200px){.ty-screen{grid-template-columns:1.35fr 1fr}.ty-offer .ty-ring{bottom:auto;top:calc(var(--head) + calc(2 * var(--u)));left:16px;width:96px}.ty-offer h2{padding-left:112px}}
@media(min-width:1001px) and (max-height:820px){
  .ty-steps p{display:none}
  .ty-sub{margin:calc(2 * var(--u)) 0 calc(3 * var(--u))}
}
/* Dark half: the hero's glows and grid, and the pawn standing beside the heading. */
.ty-hero{position:relative;overflow:hidden;isolation:isolate}
.ty-glows{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ty-glow{position:absolute;max-width:none;width:1067.8px;height:1011.8px;animation:rs-drift 26s ease-in-out infinite alternate}
.ty-glow-d{width:1381.8px;height:1293.8px;left:-420px;top:-520px;animation-duration:31s}
.ty-glow-b{left:-380px;bottom:-460px;animation-delay:-9s}
.ty-glow-a{left:-330px;top:-130px;animation-duration:22s;animation-delay:-5s}
.ty-piece{position:absolute;z-index:0;left:clamp(8px,calc(3 * var(--w)),70px);top:calc(var(--head) + calc(2 * var(--u)));bottom:calc(29 * var(--u));aspect-ratio:576/1024;pointer-events:none}
.ty-piece:before{content:'';position:absolute;inset:20% -45% 0;border-radius:50%;background:radial-gradient(circle,rgba(208,222,41,.28),rgba(208,222,41,0) 65%);filter:blur(20px);z-index:-1;animation:rs-drift 18s ease-in-out infinite alternate}
.ty-piece img{width:100%;height:100%;object-fit:contain;rotate:-4.5deg;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:chess-float 9s ease-in-out infinite}
.ty-hero .ty-in{position:relative;z-index:1;justify-content:flex-start}
.ty-hero h1{margin-top:calc(3 * var(--u));max-width:61%}
.ty-hero .ty-sub{max-width:61%}
.ty-hero .ty-steps{margin-top:auto;background:rgba(8,27,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes chess-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
/* Light half: lime and deep-green lanterns, and a turning round label in the free corner. */
.ty-offer{position:relative;overflow:hidden;isolation:isolate}
.ty-offer .ty-in{position:relative;z-index:1}
.ty-lamps{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ty-lamp{position:absolute;aspect-ratio:1;border-radius:50%;filter:blur(30px);animation:rs-drift 24s ease-in-out infinite alternate}
.ty-lamp-lime{background:radial-gradient(circle,rgba(208,222,41,.5) 0%,rgba(208,222,41,.18) 40%,rgba(208,222,41,0) 68%)}
.ty-lamp-green{background:radial-gradient(circle,rgba(22,61,52,.32) 0%,rgba(22,61,52,.1) 42%,rgba(22,61,52,0) 68%)}
.ty-lamp.l1{width:62%;left:-18%;top:-14%}
.ty-lamp.g1{width:70%;left:-22%;bottom:-30%;animation-duration:29s;animation-delay:-8s}
.ty-lamp.l2{width:46%;right:-16%;bottom:-20%;animation-duration:21s;animation-delay:-4s}
.ty-ring{position:absolute;z-index:1;left:clamp(20px,calc(3 * var(--w)),64px);bottom:calc(5 * var(--u));width:clamp(110px,calc(17 * var(--u)),176px);height:auto;aspect-ratio:1;direction:ltr;overflow:visible;animation:hs-spin 32s linear infinite}
@media(prefers-reduced-motion:reduce){.ty-glow,.ty-piece img,.ty-piece:before,.ty-lamp,.ty-ring{animation:none}}
@media(max-width:1000px){
  .ty-glow{display:none}
  .ty-hero{background-image:radial-gradient(ellipse at 15% 20%,rgba(208,222,41,.16),rgba(208,222,41,0) 55%),var(--grid-paper);background-size:auto,97px 97px}
  .ty-piece{left:6px;top:calc(var(--head) + 8px);bottom:auto;height:clamp(90px,calc(14.5 * var(--u)),160px)}
  .ty-hero h1,.ty-hero .ty-sub{max-width:72%}
  .ty-lead{max-width:none}
  .ty-lead{font-size:clamp(14px,calc(2.1 * var(--u)),18px);padding-inline-start:10px;border-width:3px;margin-top:calc(1.4 * var(--u))}
  .ty-hero h1{margin-top:0}
  .ty-hero .ty-steps{margin-top:calc(2 * var(--u))}
  .ty-ring{left:auto;right:auto;bottom:auto;top:calc(1.6 * var(--u));left:14px;width:clamp(72px,calc(11 * var(--u)),110px)}
  .ty-offer h2,.ty-offer .ty-tag{max-width:calc(100% - clamp(72px,calc(11 * var(--u)),110px) - 8px)}
}
/* Story (dark green band): lanterns for depth, as in the hero. Deep dark pools at the top left and bottom
   right, lime light at the top right, each drifting on its own clock. */
.gd-lanterns{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gd-lamp{position:absolute;aspect-ratio:1.06;border-radius:50%;animation:rs-drift 27s ease-in-out infinite alternate}
.gd-lamp-dark{background:radial-gradient(closest-side,rgba(8,27,28,.85),rgba(8,27,28,.4) 50%,rgba(8,27,28,0))}
.gd-lamp-lime{mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(208,222,41,.7),rgba(208,222,41,.26) 50%,rgba(208,222,41,0))}
.gd-lamp.g1{width:min(52vw,820px);top:-20%;left:-14%}
.gd-lamp.g2{width:min(46vw,720px);bottom:-18%;right:-12%;animation-duration:33s;animation-delay:-12s}
.gd-lamp.l1{width:min(44vw,700px);top:-14%;right:-10%;opacity:.3;animation-duration:24s;animation-delay:-6s}
/* A dark pool at the bottom left, 30% strong */
.gd-lamp.g3{width:min(46vw,720px);bottom:-10%;left:-8%;opacity:.3;animation-duration:30s;animation-delay:-17s}
@media(max-width:760px){.gd-lamp{width:110vw!important}.gd-lamp.g1,.gd-lamp.g3{left:-50%}.gd-lamp.g2,.gd-lamp.l1{right:-50%}}
@media(prefers-reduced-motion:reduce){.gd-lamp{animation:none}}
/* The cards scroll up to the middle of the screen (under the header) before they stop and stack, so each
   can be read on the way. --free is how far below the heading that middle lies; the heading's margin
   grows by the same amount so heading and stack still let go together. vh is divided by the page zoom. */
body.guide .pv{--free:max(0px,calc((100vh / var(--pz,1) - var(--bar) - var(--card-h,172px) - 2 * var(--peek)) / 2 - var(--head-h,150px) - 14px))}
body.guide .pv-pin{--below:calc(14px + 2 * var(--peek) + var(--card-h,172px) + var(--free))}
body.guide .pv-steps{--stick:calc(var(--bar) + var(--head-h,150px) + 14px + var(--free))}
/* Smooth scroll (Lenis, guide.js) takes over from the browser's own */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* Each card holds on its own before the next one rolls over it: the next card waits --dwell further down,
   so it enters from below the screen while the one before stays readable. The stack still leaves as one. */
body.guide .pv-steps{--dwell:calc(30vh / var(--pz,1))}
body.guide .pv-step:nth-child(n+2){margin-top:calc((var(--n) - 3) * var(--peek) + var(--dwell))}
/* CTA: "אפס עלות." sits on the lime mark, drawn in like every other heading highlight (refined.js) */
.gd-cta h2 mark{background:linear-gradient(var(--lime),var(--lime)) 0 0/100% 100% no-repeat;color:var(--ink);padding:.02em .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Story: heading and letter close in on the centre, 100 screen px apart (the body is zoomed by --pz). The heading
   column stops at the width of its longest line at full size (≈746px at 66px) and the size follows the column
   just as before, so the gap is the gap and nothing else moves. */
@media(min-width:901px){
  .gd-story-grid{grid-template-columns:minmax(0,750px) minmax(0,450px);gap:calc(100px / var(--pz,1));justify-content:center}
  .gd-story-copy h2{font-size:clamp(30px,8.8cqi,66px)}
}
/* Bonus as a ticket: the dark ink card is torn into a stub on the left by a dotted perforation with square-cut
   notches, and the stub carries a glossy lime seal — a diamond, the logo's own shape — that a sheen of light
   crosses every few seconds. A thin lime frame inside the card echoes the logo's box. */
.gd-bonus{--stub:300px;--nt:16px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);gap:0;align-items:stretch;margin-top:40px;padding:0;background:radial-gradient(60% 120% at 12% 50%,rgba(208,222,41,.22),rgba(208,222,41,0) 60%),var(--ink);color:var(--paper);
  clip-path:polygon(0 0,calc(var(--stub) - var(--nt)) 0,var(--stub) var(--nt),calc(var(--stub) + var(--nt)) 0,100% 0,100% 100%,calc(var(--stub) + var(--nt)) 100%,var(--stub) calc(100% - var(--nt)),calc(var(--stub) - var(--nt)) 100%,0 100%);filter:drop-shadow(0 30px 40px rgba(8,27,28,.28))}
.gd-bonus:before{content:'';position:absolute;inset:14px;border:1px solid rgba(208,222,41,.28);pointer-events:none;z-index:-1}
.gd-bonus-body{padding:clamp(34px,3.6vw,52px) clamp(30px,3.6vw,56px)}
.gd-bonus .gd-bonus-tag{display:inline-block;margin-bottom:18px}
.gd-bonus h3{font-size:clamp(30px,3.1vw,44px);line-height:1.1;margin:0 0 12px}
.gd-bonus p{font-size:20px;line-height:1.5;color:rgba(248,248,248,.8);max-width:620px;margin:0 0 26px}
.gd-bonus-stub{position:relative;display:grid;place-items:center;border-right:2px dotted rgba(208,222,41,.55);margin:calc(var(--nt) + 8px) 0}
.gd-seal{position:relative;display:grid;place-items:center;width:150px;aspect-ratio:1;rotate:45deg;
  background:linear-gradient(135deg,#f3fb9a 0%,#dbe83e 28%,#d0de29 52%,#a9b520 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -6px 14px rgba(8,27,28,.22),0 0 0 6px rgba(208,222,41,.16),0 18px 50px rgba(208,222,41,.45);overflow:hidden;animation:gd-seal-bob 6s ease-in-out infinite}
.gd-seal:before{content:'';position:absolute;inset:10px;border:1.5px solid rgba(8,27,28,.45)}
.gd-seal:after{content:'';position:absolute;top:-60%;bottom:-60%;width:38%;left:-80%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));rotate:-45deg;animation:gd-seal-sheen 4.5s ease-in-out infinite}
.gd-seal-face{rotate:-45deg}
.gd-seal b{font-weight:900;font-size:34px;line-height:1;color:var(--ink);letter-spacing:.01em}
@keyframes gd-seal-sheen{0%,55%{left:-80%}85%,100%{left:140%}}
@keyframes gd-seal-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.gd-seal,.gd-seal:after{animation:none}}
@media(max-width:760px){
  .gd-bonus{grid-template-columns:1fr;clip-path:none;padding:0}
  .gd-bonus-stub{grid-row:1;border-right:0;border-bottom:2px dotted rgba(208,222,41,.55);margin:0 22px;padding:44px 0 40px}
  .gd-seal{width:112px}
  .gd-seal b{font-size:26px}
  .gd-bonus-body{padding:26px 30px 36px}
  .gd-bonus-btn{font-size:17px;padding-inline:14px calc(var(--tip) + 14px)}
  .gd-bonus p{font-size:18px}
}
/* Letter: a clear way to sign up right here, without scrolling three screens to the next button */
.gd-letter .gd-letter-btn{display:inline-flex;margin-top:22px;font-size:20px}
@media(max-width:760px){.gd-letter .gd-letter-btn{font-size:18px}}
/* Footer: the form's question is the big heading (in place of the removed "השיעור הראשון מחכה לך"); under it, the small text */
.guide .figma-footer .contact-copy>.gd-sign{color:var(--lime);font-weight:900}
/* Story: the new statement's longest line ("מבקשים הצעת מחיר, ונעלמים.") is longer than the old one, so the size
   follows the column at a smaller ratio and the four set lines still fit without wrapping. */
@media(min-width:901px){.gd-story-copy h2{font-size:clamp(28px,8.1cqi,62px)}}
/* Thank-you offer: what happens in the meeting leads; the price is clear but no longer the biggest thing there.
   Four points in a 2x2 grid on green rules, each a bold line and a short note; the price sits at the size the
   old "instead of 600" line had. Sizes follow the screen height (--u), since the page never scrolls. */
.ty-offer h2{margin-bottom:calc(1.2 * var(--u))}
.ty-copy{margin-bottom:calc(2 * var(--u))}
.ty-value{list-style:none;margin:0 0 calc(3 * var(--u));padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;width:100%;max-width:640px}
.ty-value li{position:relative;padding:calc(1.5 * var(--u)) 26px calc(1.5 * var(--u)) 0;border-top:1px solid rgba(22,61,52,.3)}
.ty-value li:before{content:'';position:absolute;right:3px;top:calc(1.5 * var(--u) + .42em);width:11px;height:11px;background:var(--lime);box-shadow:0 0 0 1px var(--green);rotate:45deg;font-size:clamp(17px,calc(2.5 * var(--u)),24px)}
.ty-value b{display:block;font-size:clamp(17px,calc(2.5 * var(--u)),24px);line-height:1.2;color:var(--ink)}
.ty-value span{display:block;margin-top:4px;font-size:clamp(14px,calc(1.9 * var(--u)),18px);line-height:1.35;color:var(--muted)}
.ty-price{display:block;margin-bottom:calc(2.6 * var(--u))}
.ty-price .ty-was{font-size:clamp(17px,calc(2.3 * var(--u)),22px);font-weight:400;margin:0 0 4px}
.ty-price .ty-was b{font-weight:900;color:var(--green)}
@media(min-width:1001px) and (max-height:820px){.ty-copy{display:none}}
@media(max-width:1000px){
  .ty-copy{display:none}
  .ty-value{gap:0 16px;margin-bottom:calc(2 * var(--u))}
  .ty-value li{padding:calc(1.1 * var(--u)) 20px calc(1.1 * var(--u)) 0}
  .ty-value li:before{width:9px;height:9px;right:2px;top:calc(1.1 * var(--u) + .4em);font-size:clamp(14px,calc(2.1 * var(--u)),18px)}
  .ty-value b{font-size:clamp(14px,calc(2.1 * var(--u)),18px)}
  .ty-value span{font-size:clamp(12.5px,calc(1.7 * var(--u)),15px)}
  .ty-price{margin-bottom:calc(1.8 * var(--u))}
  .ty-price .ty-was{font-size:clamp(15px,calc(2.1 * var(--u)),19px)}
}
/* Short phones: the notes under each point give way first, the four points stay */
@media(max-width:1000px) and (max-height:760px){.ty-value span{display:none}}
@media(max-width:760px){.ty-value span{display:none}.ty-value li{padding-block:calc(.9 * var(--u))}}
/* Phones under 900px tall: the round badge already says "בונוס לנרשמים", so the label above the heading steps aside */
@media(max-width:760px) and (max-height:960px){.ty-offer .ty-tag{display:none}}
/* The offer's parts never squeeze (the button had collapsed to 14px on a phone); the footer row takes the slack.
   Phones under 900px tall: the "smart step" line goes, the spam-folder note and the steps stay. */
.ty-offer .ty-in>*{flex-shrink:0}
@media(max-width:760px) and (max-height:960px){.ty-lead{display:none}}
/* A little less air between the offer's parts, so the footer row always fits the screen */
.ty-value{margin-bottom:calc(2.2 * var(--u))}
.ty-price{margin-bottom:calc(2 * var(--u))}
.ty-foot{padding:calc(1.6 * var(--u)) 0}
@media(max-width:1000px){.ty-value{margin-bottom:calc(1.6 * var(--u))}.ty-foot{padding:calc(1 * var(--u)) 0}}
@media(max-width:760px){.ty-value li{padding-block:calc(.7 * var(--u))}}

/* Phones: "בעלי עסקים מספרים" ran 5px past the screen edge on one line; it wraps like the other headings */
@media(max-width:760px){.guide #rx3-title{white-space:normal;width:100%;max-width:100%;flex:1 1 100%}}