/* ================================================================
   GATED TEMPLATE DOWNLOAD — modal, CTA band, and BOFU components
   ================================================================ */
.template-hero-cta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.download-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); color: var(--clr-navy-950);
  font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-base);
  padding: 14px 28px; border-radius: var(--r-md); border: none; cursor: pointer;
  box-shadow: 0 0 22px rgba(45,212,191,0.28); transition: all var(--ease-base);
}
.download-btn:hover { background: var(--accent-hi); transform: translateY(-1px); }
.download-meta { font-size: var(--fs-sm); color: var(--text-muted); }

.template-preview-card {
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-5);
  margin: var(--sp-8) 0;
}
.template-preview-icon {
  width: 56px; height: 56px; border-radius: var(--r-md); flex-shrink: 0;
  background: rgba(45,212,191,0.14); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-xl);
}
.template-preview-card h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.template-preview-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ── Modal ────────────────────────────────────────────────────── */
.gate-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(5,10,20,0.72); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: var(--sp-4);
}
.gate-modal-overlay.open { display: flex; }
.gate-modal {
  background: var(--bg-raised); border: 1px solid var(--border-accent);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 440px; padding: var(--sp-8) var(--sp-7) var(--sp-6);
  position: relative;
}
.gate-modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  background: none; border: none; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.gate-modal-close:hover { color: var(--clr-white); }
.gate-modal-icon {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--sp-4);
  background: rgba(45,212,191,0.14); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.gate-modal h3 { font-family: var(--ff-display); font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.gate-modal .gate-modal-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-6); line-height: 1.6; }
.gate-modal-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.gate-modal-form .qc-field input {
  background: var(--bg-overlay); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: .7rem .9rem; color: var(--clr-white);
  font-family: var(--ff-body); font-size: var(--fs-base); width: 100%;
}
.gate-modal-form .qc-field input:focus { outline: none; border-color: var(--accent); }
.gate-modal-form .qc-field { display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-body); }
.gate-modal-privacy { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-2); line-height: 1.6; }
.gate-modal-status { font-size: var(--fs-sm); min-height: 1.2em; margin-top: var(--sp-2); }
.gate-modal-status.ok { color: var(--clr-success); }
.gate-modal-status.err { color: var(--clr-error); }

@media (max-width: 600px) {
  .gate-modal { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}