/* =========================================================================
   Homepage: lectures for units and organizations (#harzaot) — Lior, 21.10.26.
   The card is .hz-card and not .lead-box on purpose: home27.js sends the floating
   sign-up button to the next .lead-box, and site27.js restyles .lead-box thank-yous.
   This form books a lecture, not a discovery call, so it stays out of both.
   ========================================================================= */
.hz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,4.6vw,64px);align-items:center}
.hz-copy .lead+.lead{margin-top:12px}
.hz-aud{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hz-aud li{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--line-n2);background:rgba(160,225,212,.06);font-weight:700;font-size:16px;color:var(--on-n)}
.hz-aud .ico{width:19px;height:19px;flex:none;color:var(--t2)}
.hz-photo{position:relative;margin:0;border-radius:26px;overflow:hidden;border:1px solid var(--line-n2);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.hz-photo img{display:block;width:100%;height:auto}

/* the card: same map-sheet look as the lead boxes */
.hz-card{position:relative;max-width:1120px;margin:clamp(36px,4.4vw,56px) auto 0;border-radius:var(--r-card);
  padding:clamp(24px,3.4vw,40px);background:linear-gradient(180deg,#112B30,#0D2125);border:1px solid var(--line-n2);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8),0 0 0 6px rgba(65,211,189,.04)}
.hz-card::before{content:"";position:absolute;inset:12px;pointer-events:none;--c:var(--t2);--l:22px;opacity:.7;
  background:
    linear-gradient(var(--c),var(--c)) top right/var(--l) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/2px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--l) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/2px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/2px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/2px var(--l) no-repeat}
.hz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.hz-wide{grid-column:1/-1}
.hz-form textarea{display:block;min-width:0;width:100%;min-height:104px;border-radius:14px;border:1.5px solid var(--line-n2);
  background:rgba(4,14,15,.55);color:var(--on-n);font:500 18px/1.55 var(--ff);padding:14px 16px;resize:vertical;
  transition:border-color .2s}
.hz-form textarea::placeholder{color:#7F9592;opacity:1}
.hz-form textarea:focus{outline:2px solid var(--t2);outline-offset:2px;border-color:var(--t2)}
.hz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.hz-foot .lf-note{margin:0}

/* thank-you / send-failed, inside the same card */
.hz-ty .b27{margin-top:20px}
.hz-ty-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.hz-ty-btns .b27{margin-top:0}
.hz-ty:focus{outline:none}

@media (max-width:1000px){.hz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.hz{grid-template-columns:minmax(0,1fr)}.hz-photo{max-width:680px}}
@media (max-width:560px){
  .hz-grid{grid-template-columns:minmax(0,1fr)}
  .hz-foot .b27{width:100%}
  .hz-aud li{font-size:15px;padding:8px 12px}
}