:root{
  --bg1:#f4f5fb; --bg2:#eceefb;
  --surface:#ffffff; --surface-2:#f7f8fc;
  --ink:#121529; --ink-soft:#5b6072; --ink-faint:#8a90a3;
  --line:#e7e9f3;
  --accent:#4ba3e3; --accent-2:#2e90d8; --accent-ink:#ffffff;
  --ok:#0f9d58; --ok-bg:#e8f6ee; --warn:#b45309; --warn-bg:#fdf3e5;
  --radius:20px; --radius-sm:12px;
  --shadow:0 10px 40px -12px rgba(23,25,54,.22), 0 2px 8px -4px rgba(23,25,54,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg1:#0b0d18; --bg2:#121529;
    --surface:#171a2b; --surface-2:#1e2236;
    --ink:#f2f3f9; --ink-soft:#a9adc2; --ink-faint:#787e97;
    --line:#2a2f49;
    --accent:#4ba3e3; --accent-2:#2e90d8; --accent-ink:#ffffff;
    --ok:#4ade80; --ok-bg:#133024; --warn:#fbbf24; --warn-bg:#3a2b12;
    --shadow:0 18px 50px -16px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink);
  background:radial-gradient(1200px 600px at 50% -10%, var(--bg2), var(--bg1)) fixed;
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:flex-start; justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 16px 40px;
}
body.center{align-items:center}

.shell{width:100%; max-width:440px; display:flex; flex-direction:column; gap:18px}

/* brand */
.brand{display:flex; align-items:center; gap:10px; padding:4px 2px}
.brand-mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  color:var(--accent-ink); background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.brand-name{font-weight:600; letter-spacing:.3px; font-size:16px}
.brand-name b{font-weight:800}
.brand-tag{margin-left:auto; font-size:12px; color:var(--ink-faint); letter-spacing:.2px}

/* card */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 24px; overflow:hidden}
.card-head{text-align:center; margin-bottom:18px}
.eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-faint); font-weight:600}
.amount{font-size:42px; font-weight:800; letter-spacing:-1px; margin-top:8px}
.lede{font-size:21px; font-weight:700; margin:10px 0 6px}

/* summary lines */
.summary{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
  padding:4px 14px; margin-bottom:20px}
.line{display:flex; justify-content:space-between; gap:16px; padding:12px 0; font-size:14px}
.line + .line{border-top:1px solid var(--line)}
.line span:first-child{color:var(--ink-soft)}
.line span:last-child{font-weight:600; text-align:right}
.mono{font-family:var(--mono); letter-spacing:.5px}

/* buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font:inherit; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none;
  padding:15px 18px; border-radius:14px; border:1px solid transparent; transition:transform .06s ease, filter .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{color:var(--accent-ink); background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%, transparent)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink); width:auto; padding:9px 14px; font-size:14px}
.pay-form{margin:0}

/* trust row */
.trust{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft)}

/* footer */
.foot{display:flex; align-items:center; justify-content:center; gap:7px; text-align:center;
  font-size:11.5px; color:var(--ink-faint); padding:2px 8px; line-height:1.5}
.foot .lock{display:inline-grid; place-items:center; color:var(--ink-faint)}

/* states */
.state{text-align:center; padding:8px 0 4px}
.state h1{font-size:22px; margin:14px 0 8px; font-weight:800}
.state p{color:var(--ink-soft); font-size:15px; margin:4px 0}
.muted{color:var(--ink-faint); font-size:13.5px}
.check{display:inline-grid; place-items:center; width:62px; height:62px; border-radius:50%;
  color:#fff; background:linear-gradient(135deg,var(--ok),#13b06a); box-shadow:0 10px 24px -10px var(--ok)}
.state-ok .check{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.state-warn h1{color:var(--warn)}

/* redeem code */
.redeem{margin:18px 0; text-align:center}
.redeem label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-faint); font-weight:600; margin-bottom:8px}
.redeem-row{display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:12px 14px}
.redeem-row code{font-size:16px; font-weight:700; word-break:break-all}

/* code entry form */
.code-form{display:flex; flex-direction:column; gap:14px}
.code-input{font:inherit; font-family:var(--mono); font-size:20px; text-align:center; letter-spacing:2px;
  text-transform:uppercase; padding:16px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--surface-2); color:var(--ink)}
.code-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent)}
.form-error{color:#dc2626; font-size:13.5px; text-align:center; margin:0}

a.btn-primary{margin-top:4px}

/* ── in-page (embedded) checkout: rendered inside a tenant's modal iframe ── */
body.embed{background:var(--surface); display:block; padding:0; min-height:0}
.embed-shell{max-width:none; width:100%; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px}
.embed-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.embed-brand{display:flex; align-items:center; gap:8px}
.embed-lock{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink)}
.embed-lock svg{width:18px; height:18px}
.embed-head .brand-name{font-weight:600; font-size:15px; letter-spacing:.2px}
.embed-head .brand-name b{color:var(--accent-2)}
.embed-amt{font-weight:800; font-size:20px; color:var(--ink)}
.embed-item{font-size:13.5px; color:var(--ink-soft); margin-top:-4px}
.embed-mount{min-height:360px}
.embed-loading{padding:40px 0; text-align:center; color:var(--ink-faint); font-size:14px}
.embed-foot{display:flex; align-items:center; justify-content:center; gap:7px; margin:4px 0 0; font-size:11.5px; color:var(--ink-faint)}
.embed-foot .embed-lock-sm svg{width:13px; height:13px; display:block}
.embed-done{align-items:center; text-align:center; gap:10px; padding:48px 24px; min-height:300px; justify-content:center}
.embed-done h1{font-size:19px; margin:4px 0 0}
.embed-done p{margin:0; font-size:14px; color:var(--ink-soft)}
.embed-done p.muted{color:var(--ink-faint); font-size:13px}
.embed-check{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--ok-bg); color:var(--ok)}
.embed-spin{width:40px; height:40px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:embed-spin .8s linear infinite}
@keyframes embed-spin{to{transform:rotate(360deg)}}