@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap");
:root { --ink:#102b32; --paper:#f3f5e9; --acid:#cafa57; --muted:#64747a; --line:rgba(16,43,50,.15); --sans:"Manrope",sans-serif; --serif:"Newsreader",serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 12% 10%,rgba(202,250,87,.26),transparent 28rem),var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
header,footer { width:min(1260px,calc(100% - 40px)); min-height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
header img,footer img { width:124px; display:block; }
header > a:last-child { border:1px solid var(--ink); border-radius:999px; padding:9px 14px; font-size:11px; font-weight:800; }
main { width:min(1260px,calc(100% - 40px)); margin:auto; }
.checkout-intro { padding:82px 0 70px; max-width:980px; }
.checkout-intro > p,.section-label { margin:0 0 17px; color:#27736b; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.checkout-intro h1 { margin:0; font-size:clamp(51px,7vw,90px); line-height:.96; letter-spacing:-.06em; }
.checkout-intro h1 em { color:#27736b; font-family:var(--serif); font-weight:500; }
.checkout-intro > span { display:block; max-width:760px; margin-top:28px; color:var(--muted); line-height:1.75; }
.checkout-grid { display:grid; grid-template-columns:1fr .8fr; gap:70px; padding:20px 0 100px; }
.plan-options { display:grid; gap:10px; }
.plan-options button { padding:22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.62); text-align:left; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:7px 20px; }
.plan-options button.is-active { color:white; background:var(--ink); border-color:var(--ink); box-shadow:0 18px 50px rgba(16,43,50,.15); }
.plan-options span { font-size:13px; font-weight:800; }
.plan-options strong { font-size:23px; }
.plan-options small { grid-column:1/-1; opacity:.66; }
.ownership-note,.refund-note { margin-top:15px; padding:22px; border-radius:19px; border:1px solid var(--line); display:grid; gap:8px; }
.ownership-note span,.refund-note span { color:var(--muted); font-size:12px; line-height:1.6; }
.refund-note { background:rgba(202,250,87,.2); }
.refund-note p { margin:0; font-weight:800; }
.payment-column { align-self:start; padding:28px; border-radius:27px; color:white; background:linear-gradient(150deg,#27736b,#123954 68%,#102b48); box-shadow:0 25px 80px rgba(16,43,50,.23); }
.payment-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.16); }
.payment-heading .section-label { color:var(--acid); }
.payment-heading h2 { margin:0; font-size:23px; }
.payment-heading > strong { white-space:nowrap; font-size:24px; }
.commerce-paused { min-height:330px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.commerce-paused strong { font-size:26px; }
.commerce-paused span { margin:13px 0 23px; color:rgba(255,255,255,.7); line-height:1.6; }
.commerce-paused a { border-radius:999px; background:var(--acid); color:var(--ink); padding:13px 18px; font-size:12px; font-weight:800; }
.account-state { margin:20px 0; padding:15px; border-radius:14px; background:rgba(255,255,255,.09); display:flex; justify-content:space-between; gap:14px; font-size:12px; }
.account-state a { color:var(--acid); font-weight:800; }
.bank-card { display:grid; grid-template-columns:130px 1fr; gap:17px; margin-bottom:18px; }
.bank-card img { width:130px; height:130px; object-fit:cover; background:white; border-radius:14px; }
.bank-card dl { margin:0; }
.bank-card dl div { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.bank-card dt { color:rgba(255,255,255,.56); font-size:9px; }
.bank-card dd { margin:3px 0 0; font-size:12px; font-weight:800; }
.payment-column label:not(.terms) { display:block; margin-top:11px; }
.payment-column label > span { display:block; margin-bottom:6px; font-size:10px; color:rgba(255,255,255,.66); }
.payment-column input:not([type=checkbox]) { width:100%; min-height:45px; border:1px solid rgba(255,255,255,.2); border-radius:11px; padding:0 12px; color:white; background:rgba(255,255,255,.08); }
.terms { display:flex; gap:9px; margin:18px 0; align-items:flex-start; }
.terms span { font-size:10px; line-height:1.5; color:rgba(255,255,255,.7); }
.payment-column button[type=submit] { width:100%; min-height:51px; border:0; border-radius:999px; background:var(--acid); color:var(--ink); font-weight:800; cursor:pointer; }
.payment-column button[type=submit] + small { display:block; margin-top:9px; text-align:center; color:rgba(255,255,255,.55); line-height:1.45; }
footer { border-top:1px solid var(--line); border-bottom:0; }
footer a { font-size:11px; }
.toast { position:fixed; right:20px; bottom:20px; max-width:360px; padding:15px 18px; border-radius:13px; color:white; background:var(--ink); opacity:0; transform:translateY(15px); pointer-events:none; transition:.2s; }
.toast.is-visible { opacity:1; transform:none; }
.toast.is-error { background:#8a3d2f; }
@media(max-width:760px){.checkout-intro{padding:58px 0}.checkout-grid{grid-template-columns:1fr;gap:35px}.payment-column{padding:20px}.plan-options button{grid-template-columns:1fr}.plan-options strong,.plan-options small{grid-column:auto}.bank-card{grid-template-columns:1fr}.checkout-intro h1{font-size:51px}}