/* ============================================================================
   FREEBIE landing pages + email popup. Loaded after site.css.
   ========================================================================= */
.page-freebie main{padding-top:var(--bar)}
.freebie{
  max-width:var(--col);margin-inline:auto;
  min-height:calc(100svh - var(--bar));
  display:grid;grid-template-columns:1fr;gap:clamp(32px,6vw,60px);align-items:center;
  padding:clamp(40px,7vh,90px) var(--pad);
}
@media(min-width:900px){.freebie{grid-template-columns:1.05fr .95fr}}
.freebie-copy{max-width:620px}
.freebie h1{
  font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.96;
  font-size:clamp(36px,5.6vw,68px);color:var(--bone);margin:14px 0 0;
}
.freebie .sub{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(18px,2.6vw,25px);color:var(--dim);margin-top:16px;line-height:1.25;
}
.freebie .prose{margin-top:22px}
.freebie .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.freebie .cta-row .btn{cursor:pointer}
.freebie .risk{margin-top:14px}
.freebie-visual{display:flex;justify-content:center}
.freebie-mockup{
  width:min(440px,84%);height:auto;border:1px solid var(--edge);
  box-shadow:22px 22px 0 var(--electric-wash);
}

/* ── email popup (gated freebies) ── */
.modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:var(--pad)}
.modal.open{display:grid}
.modal-overlay{position:absolute;inset:0;background:rgba(4,4,4,.82);backdrop-filter:blur(4px)}
.modal-box{
  position:relative;z-index:1;width:min(460px,100%);background:var(--paper);
  border:1px solid var(--electric-line);padding:clamp(28px,5vw,42px);
  box-shadow:16px 16px 0 var(--electric-wash);
  animation:modalpop .3s var(--ease-out) both;
}
@keyframes modalpop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:10px;right:14px;background:0;border:0;color:var(--faint);
  font-size:26px;line-height:1;cursor:pointer;
}
.modal-close:hover{color:var(--electric)}
.modal-box h3{font-size:clamp(21px,3vw,28px);margin-bottom:8px}
.modal-box .form{margin-top:22px}
.modal-box .form[hidden]{display:none}   /* beats .form's flex display after submit */

@media (prefers-reduced-motion:reduce){.modal-box{animation:none}}