/* =========================================================================
     Varsity sheet modal — shared by landing + program pages.
     Full-viewport sheet that slides up from the bottom. Left = FOMO image with
     in-code text overlay; right = reused callback form. Variants (callback /
     exit) are driven by data-* attributes on .vmodal, swapped in by JS.
     Relies on the page palette tokens (--violet, --lilac, --lav, --ink, …).
     ========================================================================= */
  .vmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none}
  .vmodal-scrim{position:absolute;inset:0;background:rgba(27,18,51,.55);opacity:0;transition:opacity .35s ease}
  .vmodal-sheet{position:relative;width:100%;height:100%;max-width:100%;background:#fff;overflow:hidden;display:grid;grid-template-columns:48% 52%;transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
  .vmodal.open{visibility:visible;pointer-events:auto}
  .vmodal.open .vmodal-scrim{opacity:1}
  .vmodal.open .vmodal-sheet{transform:translateY(0)}

  /* Left: image + in-code text overlay */
  .vmodal-media{position:relative;overflow:hidden;background:var(--violet-dk)}
  .vmodal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .vmodal-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(27,18,51,.15) 0%,rgba(27,18,51,.30) 45%,rgba(27,18,51,.82) 100%)}
  .vmodal-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(28px,3.4vw,52px)}
  .vmodal-cap .eyebrow{color:var(--soft-lilac);margin-bottom:14px}
  .vmodal-cap h2{color:#fff;font-size:clamp(1.625rem,2.7vw,2.5rem);line-height:1.12;font-weight:700;max-width:15ch;text-shadow:0 2px 24px rgba(20,4,8,.35)}

  /* Right: content + form */
  .vmodal-body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,64px);overflow-y:auto}
  .vmodal-eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
  .vmodal-body h3{font-size:clamp(1.4375rem,2.3vw,1.875rem);line-height:1.18;margin-bottom:8px;color:var(--ink)}
  .vmodal-body .sub{color:var(--ink-2);font-size:var(--fs-base);margin-bottom:26px;max-width:42ch}
  .vmodal-form{display:grid;gap:14px;max-width:440px}
  .vmodal-form .field{display:flex;flex-direction:column;gap:6px}
  .vmodal-form label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
  .vmodal-form input,.vmodal-form select{font-family:inherit;font-size:var(--fs-ms);color:var(--ink);padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;background:#fff;outline:0;transition:border-color .15s}
  .vmodal-form input:focus,.vmodal-form select:focus{border-color:var(--violet)}
  .vmodal-form .btn{width:100%;justify-content:center;margin-top:4px}
  .vmodal-fineprint{font-size:var(--fs-2xs);color:var(--muted);margin-top:14px;max-width:42ch}

  /* Close button */
  .vmodal-close{position:absolute;top:18px;right:18px;z-index:3;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;box-shadow:0 2px 12px rgba(27,18,51,.18);transition:background .15s,transform .15s}
  .vmodal-close:hover{background:#fff;transform:rotate(90deg)}
  .vmodal-close svg{width:20px;height:20px;fill:currentColor}

  body.vmodal-lock{overflow:hidden}

  /* Responsive: stay full-screen, stack image band over the form */
  @media(max-width:820px){
    .vmodal-sheet{grid-template-columns:1fr;grid-template-rows:36vh 1fr}
    .vmodal-media{min-height:0}
    .vmodal-cap{padding:22px 24px}
    .vmodal-cap h2{font-size:var(--fs-4xl)}
    .vmodal-body{justify-content:flex-start;padding:26px 24px 40px}
    .vmodal-close{background:rgba(255,255,255,.92)}
  }
  @media(prefers-reduced-motion:reduce){
    .vmodal-sheet{transition:none}
    .vmodal-scrim{transition:none}
  }