/* ==========================================================================
   Homepage sign-up popup around the Reach embedded form. Added 2026-09-16.
   The form renders inside Reach's iframe, edge to edge. --reachPanel MUST equal
   the form background set in the Reach builder (currently #2d4a2b), and the
   panel has no padding, so no second colour shows around the form.
   ========================================================================== */

.signupPop{--reachPanel:#2d4a2b;width:min(520px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;border-radius:0;background:var(--reachPanel);color:#fff;overflow:auto;box-shadow:0 40px 90px rgba(6,12,8,.45)}
/* Closed but preloading the Reach form (see signup-popup.js): laid out at its real width,
   parked off-screen. Not display:none, or Reach measures the form at 0px. */
.signupPop.isPreloading:not([open]){display:block;position:fixed;top:0;left:-10000px;margin:0;pointer-events:none}
.signupPop::backdrop{background:rgba(9,18,12,.62);backdrop-filter:blur(2px)}
.signupPop[open]{animation:signupIn .5s cubic-bezier(.2,.7,.2,1) both}
.signupPop[open]::backdrop{animation:signupFade .5s ease both}
@keyframes signupIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes signupFade{from{opacity:0}to{opacity:1}}

.signupBody{position:relative;display:flex;flex-direction:column;padding:0;background:var(--reachPanel)}
.signupReach{min-height:340px}
.signupReach iframe{display:block;width:100%}
.signupClose{position:absolute;z-index:1;top:6px;right:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;transition:color .22s}
.signupClose:hover,.signupClose:focus-visible{color:#fff}
.signupClose svg{width:20px;height:20px}

/* sits under the form, lined up with the form's 32px inner padding */
.signupSkip{align-self:flex-start;margin:-8px 0 26px 32px;padding:6px 0;border:0;border-bottom:1px solid var(--lineLight);background:transparent;color:rgba(255,255,255,.72);cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.signupSkip:hover,.signupSkip:focus-visible{color:#fff;border-bottom-color:var(--copper)}

@media (prefers-reduced-motion: reduce){
  .signupPop[open],.signupPop[open]::backdrop{animation:none}
}