:root{
  --pm-bg-desktop:url('/assets/images/site-bg.webp');
  --pm-bg-mobile:url('/assets/images/site-bg-mobile.webp');
}

html,body{
  background-color:#1a0f14;
  background-image:var(--pm-bg-desktop);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

@media (max-width:800px),(orientation:portrait){
  :root{--pm-bg-desktop:var(--pm-bg-mobile);}
}

@media (max-width:640px){
  html,body{background-attachment:scroll;}
}

main,.site,.container,.page{background:transparent;}

body.overlay-mode .container.page.two-col>img.banner,
body.overlay-mode .container.page.two-col>.banner{
  display:none !important;
}

body.overlay-mode .container.page.two-col{position:relative;}
body.overlay-mode .container.page.two-col>div,
body.overlay-mode .container.page.two-col>article,
body.overlay-mode .container.page.two-col>section:not(.hero),
body.overlay-mode .container.page.two-col>aside{
  position:relative;
  z-index:2;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.30);
}

body.overlay-mode .container.page.two-col>div,
body.overlay-mode .container.page.two-col>article{
  background:rgba(12,19,28,.72);
  color:#fff;
}

body.overlay-mode .container.page.two-col>aside,
body.overlay-mode aside.signup-card{
  background:rgba(255,255,255,.96);
  color:#0f172a;
}

body.overlay-mode .container.page.two-col>div img.banner,
body.overlay-mode .container.page.two-col>div .banner{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  margin-bottom:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}

body.overlay-mode .container.page.two-col>div h1,
body.overlay-mode .container.page.two-col>div h2,
body.overlay-mode .container.page.two-col>div h3,
body.overlay-mode .container.page.two-col>div h4{
  color:#fff;
}

body.overlay-mode .container.page.two-col>div p.muted{color:#e2e8f0;}
.button,.btn,button,.pm-btn{position:relative;z-index:3;}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  background:rgba(6,9,14,.35);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

body{padding-top:64px;}
@media (max-width:780px){body{padding-top:56px;}}

section.container.page.two-col{position:relative;overflow:visible;}
section.container.page.two-col>img.banner,
section.container.page.two-col>.banner{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:clamp(360px,58vh,640px);
  width:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
  filter:none;
}

section.container.page.two-col>img.banner ~ div,
section.container.page.two-col>img.banner ~ aside,
section.container.page.two-col>.banner ~ div,
section.container.page.two-col>.banner ~ aside{
  position:relative;
  z-index:2;
  margin-top:clamp(220px,34vh,360px);
  background:rgba(12,19,28,.70);
  color:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

section.container.page.two-col>img.banner ~ aside.signup-card,
section.container.page.two-col>.banner ~ aside.signup-card{
  background:rgba(255,255,255,.97) !important;
  color:#111 !important;
}

section.container.page.two-col>img.banner ~ div h1,
section.container.page.two-col>img.banner ~ div h2,
section.container.page.two-col>img.banner ~ div h3,
section.container.page.two-col>img.banner ~ div h4,
section.container.page.two-col>.banner ~ div h1,
section.container.page.two-col>.banner ~ div h2,
section.container.page.two-col>.banner ~ div h3,
section.container.page.two-col>.banner ~ div h4{color:#fff;}

section.container.page.two-col>img.banner ~ div p.muted,
section.container.page.two-col>.banner ~ div p.muted{color:#e2e8f0;}

.overlay-card{
  position:relative;
  z-index:2;
  background:rgba(12,19,28,.70);
  color:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.overlay-footer{
  position:relative;
  z-index:2;
  background:transparent;
  padding:36px 0;
}

.overlay-footer .overlay-footer-section>div,
.overlay-footer .overlay-footer-section>aside{
  position:relative;
  z-index:2;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.30);
}

.overlay-footer .overlay-footer-section>div{
  background:rgba(12,19,28,.72);
  color:#fff;
}

.overlay-footer .overlay-footer-section>aside{
  background:rgba(255,255,255,.96);
  color:#0f172a;
}

.overlay-footer h3,.overlay-footer h4{margin:0 0 12px 0;}
.overlay-footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted rgba(17,24,39,.35);
}

.overlay-footer .footer-columns{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
}

.overlay-footer .footer-columns ul{
  list-style:none;
  padding:0;
  margin:0;
}

.overlay-footer .footer-columns li{margin:6px 0;}

@media (max-width:980px){
  body.overlay-mode .container.page.two-col>aside{margin-top:12px;}
  body.overlay-mode .container.page.two-col>div,
  body.overlay-mode .container.page.two-col>aside{padding:18px;}

  section.container.page.two-col>img.banner,
  section.container.page.two-col>.banner{height:clamp(300px,42vh,480px);}
  section.container.page.two-col>img.banner ~ div,
  section.container.page.two-col>img.banner ~ aside,
  section.container.page.two-col>.banner ~ div,
  section.container.page.two-col>.banner ~ aside{
    margin-top:clamp(160px,28vh,280px);
    padding:18px;
  }
  section.container.page.two-col>img.banner ~ aside.signup-card,
  section.container.page.two-col>.banner ~ aside.signup-card{margin-top:12px;}

  .overlay-footer .overlay-footer-section>div,
  .overlay-footer .overlay-footer-section>aside{padding:18px;}
  .overlay-footer .footer-columns{grid-template-columns:1fr 1fr;}
}

@media (max-width:640px){
  .overlay-footer .footer-columns{grid-template-columns:1fr;}
}