/* Beams Background, adapted from Dorian Baffier / Kokonut UI.
   Source and MIT notice: BEAMS-SOURCE.md. Decoration only; content stays in HTML. */
.hero:has(.beams-background){
  background:#fcfaff;
  align-items:flex-start;
  padding-block:clamp(40px,5vh,64px) clamp(56px,7vh,88px);
}
.hero:has(.beams-background) > .container{width:100%}
.hero:has(.beams-background) > .halo,
.hero:has(.beams-background) > .guides{display:none}
.beams-background{
  background:linear-gradient(145deg,#fdfcff 8%,#f4eeff 58%,#faf7ff);
  contain:paint;
}
/* Always present if canvas is unavailable or JavaScript fails. */
.beams-background::before{
  content:""; position:absolute; inset:-10%;
  background:linear-gradient(125deg,transparent 12%,#aa84f638 19%,transparent 28%,
    transparent 39%,#b69af63d 48%,transparent 57%,transparent 67%,#8c61e82b 74%,transparent 85%);
}
.beams-background[data-beams-ready="true"]::before{display:none}
.beams-canvas{
  display:block; width:100%; height:100%;
  filter:blur(15px);
}
/* A light reading area preserves the headline while beams remain visible around it. */
.beams-background::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 74% 30%,#ffffffa6 0%,#ffffff38 35%,transparent 66%);
}
.hero:has(.beams-background) .hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:start;
  gap:clamp(32px,4vw,58px);
}
.hero:has(.beams-background) .hero-copy{
  min-width:0; padding-block:8px 0;
  gap:24px;
}
.hero:has(.beams-background) .hero-copy > .label{
  margin:0; letter-spacing:0;
  font-size:.875rem; line-height:1.6; font-weight:600;
  color:#6542a4;
}
.hero:has(.beams-background) .hero-copy h1{
  font-size:clamp(2rem,4.8vw,4rem);
  line-height:1.13; letter-spacing:-.02em; font-weight:650;
  max-width:100%;
}
.hero:has(.beams-background) .hero-copy .lede{
  max-width:38ch; line-height:1.7;
  font-size:clamp(1.1875rem,1.65vw,1.3125rem); font-weight:450;
  color:#362c4a;
}
.hero:has(.beams-background) .hero-trust{
  margin:0; font-size:.875rem; font-weight:500; color:#514564;
}
.hero:has(.beams-background) .hero-form{min-width:0}
/* Long Hebrew labels must wrap inside their existing controls at narrow widths. */
.hero:has(.beams-background) .cta{
  min-width:0; max-width:100%; white-space:normal;
  min-height:56px; padding:15px 25px; border-radius:14px;
  font-size:1.125rem; font-weight:650;
  line-height:1.4; text-align:center;
  box-shadow:0 7px 20px #7541d52b,inset 0 1px 0 #ffffff26;
}
.hero:has(.beams-background) .cta:hover{
  box-shadow:0 10px 25px #7541d53d,inset 0 1px 0 #ffffff26;
}
.hero:has(.beams-background) .cta-row{max-width:100%; gap:14px}
.hero:has(.beams-background) .cta-row .link{
  min-height:48px; max-width:100%; padding:11px 17px;
  border:1px solid #d8caee; border-radius:12px;
  background:#ffffffb8; color:#493664;
  font-size:1.0625rem; font-weight:600; line-height:1.4;
  justify-content:center; text-align:center;
}
.hero:has(.beams-background) .cta-row .link:hover{
  background:#fff; border-color:#9c78d5; color:#5b2ed6;
}
@media(max-width:900px){
  .hero:has(.beams-background) .hero-grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .hero:has(.beams-background) .hero-copy{padding:0; gap:20px}
  .hero:has(.beams-background) .hero-copy h1{font-size:clamp(2rem,6vw,3.25rem)}
  .beams-background::after{background:linear-gradient(#ffffff45,#ffffff10 42%,#ffffff66)}
}
@media(max-width:500px){
  .hero:has(.beams-background){padding-block:32px 48px}
  .hero:has(.beams-background) .hero-copy h1{font-size:clamp(1.9rem,8.3vw,2.55rem)}
  .hero:has(.beams-background) .hero-copy .lede{font-size:1.125rem; line-height:1.7}
  .hero:has(.beams-background) .cta{font-size:1rem; min-height:54px; padding:14px 20px}
  .hero:has(.beams-background) .cta-row .link{font-size:1rem}
  .hero:has(.beams-background) .cta-row{width:100%; gap:14px}
}
@media(forced-colors:active){.beams-background{display:none}}
html.a11y-dark .beams-background,
html.a11y-light .beams-background{display:none}

/* Keep the navigation reachable on small phones and at enlarged text sizes.
   The complete meeting action remains immediately below in the hero. */
body:has(.beams-background) .nav-toggle{min-width:44px; min-height:44px; flex-shrink:0}
@media(max-width:360px){
  body:has(.beams-background) .header-inner{gap:12px; padding-inline:18px}
  body:has(.beams-background) .header-side > .btn{display:none}
}
@media(max-width:500px){
  html:is(.a11y-fs1,.a11y-fs2) body:has(.beams-background) .header-side > .btn{display:none}
}