:root{
    --popup-width: 880px;
    --popup-radius: 10px;
    --brand: #424784;          /* button color like your reference */
    --text: #222;
    --muted: #6b7280;
    --field-bg: #f3f4f6;
    --field-border: #e5e7eb;
  }

  /* ---------- Trigger (demo) ---------- */
  .open-popup-btn{
    display:inline-block; padding:12px 18px; border-radius:8px;
    background:var(--brand); color:#fff; text-decoration:none;
    margin:24px; font-weight:600;
  }

  /* ---------- Overlay ---------- */
  .popup-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.7);
    display:none; align-items:center; justify-content:center;
    z-index:9990;
  }
  .popup-overlay.is-open{ display:flex; }

  /* ---------- Modal ---------- */
  .popup{
    width:min(100% - 24px, var(--popup-width));
    background:#fff; border-radius:var(--popup-radius);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    overflow:hidden; position:relative;
  }

  /* Close (X) */
  .popup-close{
    position:absolute; top:12px; right:12px;
    width:32px; height:32px; border-radius:6px;
    background:#2e2e2e; color:#fff; border:none; cursor:pointer;
    font-size:20px; line-height:32px; text-align:center;
    z-index:2;
  }
  .popup-close:hover{ opacity:.9; }

  /* ---------- Layout ---------- */
  .popup-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:0;
  }
  .popup-media{
    min-height:360px; position:relative; overflow:hidden;
    background:#000;
  }
  .popup-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  .popup-body{
    padding:28px 28px 30px;
    display:flex; flex-direction:column; justify-content:center;
  }

  /* Headings & tagline */
  .popup-title{
    margin:0 0 10px; font-size:28px; line-height:1.2; color:var(--text);
    text-align:center; font-weight:800;
  }
  .popup-tagline{
    margin:0 0 18px; text-align:center; color:var(--muted); font-size:14px;
  }

  /* ---------- Form ---------- */
  .form{
    display:grid; gap:14px; margin-top:8px;
  }
  .field{
    width:100%; padding:14px 14px; border:1px solid var(--field-border);
    border-radius:8px; background:var(--field-bg);
    font: inherit;
  }
  .field::placeholder{ color:#9aa3af; }
  .submit{
    padding:14px; border-radius:8px; border:none; cursor:pointer;
    background:var(--brand); color:#fff; font-weight:600;
    width:100%;
  }
  .submit:focus, .field:focus{
    outline:2px solid #c7cbe9; outline-offset:2px;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 768px){
    .popup-grid{ grid-template-columns: 1fr; }
    .popup-media{ height:210px; }
    .popup-title{ font-size:24px; }
    .popup-body{ padding:22px 20px 24px; }
    .popup-close{
      top:10px; right:10px; width:28px; height:28px; font-size:18px;
      border-radius:4px;
    }
  }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }