/* in-page checkout */
.co{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(5,3,4,.78);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
.co.open{opacity:1;pointer-events:auto}
.co-card{position:relative;width:min(920px,100%);max-height:calc(100svh - 32px);overflow:auto;display:grid;grid-template-columns:1fr 1.15fr;
  border-radius:28px;background:var(--coal);border:1px solid rgba(237,28,36,.35);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 80px rgba(237,28,36,.18);
  transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.co.open .co-card{transform:none}
.co-side{position:relative;padding:34px 30px;background:linear-gradient(180deg,rgba(11,8,9,.35),rgba(11,8,9,.92)),url(img/hero-sm.jpg) center 30%/cover;
  display:flex;flex-direction:column;min-height:100%}
.co-side img.lg{width:74px;height:74px;filter:drop-shadow(0 0 14px var(--glow));margin-bottom:auto}
.co-side .kicker{margin:24px 0 8px}
.co-side h3{font-size:30px;margin-bottom:6px}
.co-side .when{color:var(--dim);font-size:15px;margin-bottom:22px}
.co-lines{border-top:1px solid var(--line)}
.co-lines div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--dim)}
.co-lines div b{color:var(--cream);font-weight:700}
.co-main{padding:34px 32px 28px}
.co-main h2{font-size:26px;font-weight:900;text-transform:uppercase;font-variation-settings:'wdth' 120;margin:0 0 6px;line-height:1}
.co-main .sub{font-size:15px;margin-bottom:22px}
.co-dep{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 22px;padding:16px 18px;border-radius:16px;background:rgba(237,28,36,.08);border:1px solid rgba(237,28,36,.3)}
.co-dep span{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}
.co-dep b{font-size:38px;font-weight:900;font-variation-settings:'wdth' 120;line-height:1}
#payEl{min-height:200px}
.co-pay{width:100%;margin-top:22px;border:0}
.co-pay[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.co-msg{min-height:20px;font-size:14px;margin-top:12px;color:var(--dim)}
.co-msg.bad{color:#ff6b70;font-weight:700}
.co-trust{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--faint)}
.co-trust svg{flex:none}
.co-test{margin-top:10px;font-size:12px;color:var(--faint);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.co-test code{color:var(--cream);font-weight:700;letter-spacing:.06em}
.co-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(11,8,9,.7);
  color:var(--cream);font-size:20px;cursor:pointer}
.co-x:hover{border-color:var(--neon);color:#fff}
/* success */
.co-done{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;background:var(--night);border-radius:28px;
  opacity:0;pointer-events:none;transition:opacity .5s}
.co-done.on{opacity:1;pointer-events:auto}
.co-done .neon-script{font-size:clamp(70px,12vw,130px)}
.co-done p{color:var(--dim);margin-top:8px}
@media(max-width:780px){.co{padding:0;place-items:end center}.co-card{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:94svh}
  .co-side{padding:26px 22px 20px;min-height:0}.co-lines{display:none}.co-side .when{margin-bottom:0}.co-side img.lg{display:none}.co-side .kicker{margin-top:0}.co-main{padding:24px 20px 28px}}

/* "how it works" notes for the demo */
.dnote{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--dim);border:1px solid rgba(99,91,255,.45);
  background:linear-gradient(135deg,rgba(99,91,255,.14),rgba(99,91,255,.04));border-radius:14px;padding:11px 14px;margin:14px 0}
.dnote b{color:var(--cream)}
.dnote .db{flex:none;font-size:9.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#635bff;border-radius:6px;padding:4px 7px;margin-top:1px}
.dnote-off .dnote{display:none}
.dtoggle{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(11,8,9,.85);backdrop-filter:blur(10px);border:1px solid rgba(99,91,255,.5);color:var(--cream);border-radius:999px;padding:9px 14px 9px 10px;
  font:700 12px var(--d);letter-spacing:.12em;text-transform:uppercase}
.dtoggle i{width:30px;height:18px;border-radius:999px;background:#635bff;position:relative;transition:background .2s}
.dtoggle i::after{content:'';position:absolute;top:3px;left:15px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.dnote-off .dtoggle i{background:rgba(251,246,238,.2)}
.dnote-off .dtoggle i::after{left:3px}