/* ========== ADAM DOWNSELL PAGES ==========
   Standalone page (own URL for Explodely) that LOOKS like an exit modal
   over the OTO page: the real OTO page is iframed behind, blurred + dimmed,
   with the downsell offer card floating on top. */
body{ padding-top: 0 !important; background: #0A1628; overflow: hidden; }
.warning-bar{ display: none !important; }

/* The OTO page, behind — blurred, darkened, inert (purely visual) */
.ds-bg{
  position: fixed; inset: 0; width: 100%; height: 100%; border: 0;
  filter: blur(8px) brightness(.78) saturate(1);
  transform: scale(1.06);            /* hide the blurred edges */
  pointer-events: none; z-index: 0;
}
.ds-scrim{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* Light enough that the blurred OTO page stays visible behind the card */
  background: linear-gradient(rgba(10,18,32,.42), rgba(8,14,26,.55));
}

/* Centered offer card (reuses tokens .modal / .modal.final styling) */
.ds-wrap{
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
/* Short viewports (most phones): top-bias the card so the YES button sits on
   the fold at load instead of centered below it. */
@media (max-height: 780px){
  .ds-wrap{ align-items: flex-start; padding-top: 14px; }
}
.ds-card{
  width: 100%; max-width: 460px;
  transform: none;                   /* override base .modal translateY */
  animation: ds-in .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ds-in{
  from{ opacity: 0; transform: translateY(18px) scale(.98); }
  to{ opacity: 1; transform: none; }
}