/* Rise Ultra — deposit modal. Used on / and /welcome/call.
   Self-contained: nothing here inherits from a page's .btn, so the modal looks
   identical on both routes. */

.backdrop{position:fixed;inset:0;background:rgba(22,19,15,.72);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--cream);border-radius:12px;max-width:440px;width:100%;max-height:90vh;overflow:auto;padding:26px 22px}
@media (max-width:520px){.backdrop{padding:0;align-items:stretch}.modal{border-radius:0;max-height:100vh}}
.modal .m-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.modal h4{font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;margin:0;color:var(--charcoal)}
.modal .x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.modal .x:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:4px}
.modal .lead{margin:0 0 18px;font-size:14px;color:var(--muted)}

.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--clay)}
.opt[aria-pressed="true"]{border-color:var(--clay);background:rgba(181,83,46,.05)}
.opt:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.opt .t{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;color:var(--charcoal);margin:0 0 4px}
.opt .d{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.opt .save{display:inline-block;margin-left:8px;background:var(--clay);color:var(--cream);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:100px;vertical-align:middle}

.modal .trust{margin:0 0 12px;text-align:center;font-size:11.5px;color:#8d8478}

/* Continue button — sends the runner to the Stripe Payment Link for the
   selected plan (see RISE_CONFIG.stripePaymentLinks in config.js). */
.m-btn{display:block;width:100%;text-align:center;cursor:pointer;font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;padding:19px 14px;border-radius:6px;line-height:1.2;text-decoration:none;border:2px solid var(--clay);background:var(--clay);color:var(--cream);transition:background .18s,transform .12s}
.m-btn:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
.m-btn:active{transform:translateY(1px)}
.m-btn:focus-visible{outline:3px solid var(--light-clay);outline-offset:3px}
.m-btn[aria-disabled="true"]{background:var(--border);border-color:var(--border);color:#8d8478;cursor:not-allowed}
.m-btn[aria-disabled="true"]:hover{background:var(--border);border-color:var(--border)}

/* Shown only while RISE_CONFIG.stripePaymentLinks are still blank. */
.stripebox{border:1px dashed var(--border);border-radius:8px;padding:22px 14px;text-align:center;color:#8d8478;font-size:13px;line-height:1.6;margin-bottom:12px}
.stripebox b{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}