@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap');
:root { color-scheme: dark; --ink:#f1f5f9; --muted:#b8c7d8; --cyan:#00d4ff; --line:rgba(206,228,255,.2); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#09131e; font-family:'Manrope',sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible, button:focus-visible { outline:3px solid var(--cyan); outline-offset:6px; }
.billing-shell { min-height:100svh; display:flex; flex-direction:column; background:linear-gradient(90deg,rgba(5,13,23,.97),rgba(5,13,23,.86) 52%,rgba(5,13,23,.67)),url('/images/core-websites.jpg') center / cover; }
.billing-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px clamp(20px,6vw,96px); border-bottom:1px solid var(--line); }
.brand { min-width:0; display:inline-flex; gap:12px; align-items:center; text-decoration:none; font:800 .9rem/1.25 'Montserrat',sans-serif; letter-spacing:.04em; }
.brand img { flex-shrink:0; width:38px; height:38px; object-fit:contain; }
.billing-header > a:last-child { flex-shrink:0; white-space:nowrap; color:var(--muted); font-size:.86rem; }
.billing-main { width:min(100%,1120px); padding:clamp(40px,6vw,90px) 24px; margin:auto; }
.billing-main h1 { margin:0 0 20px; max-width:950px; font:900 clamp(2.7rem,7.2vw,6rem)/.95 'Montserrat',sans-serif; letter-spacing:-.065em; text-transform:uppercase; }
.billing-main h1 span { display:block; color:var(--cyan); font-size:.34em; letter-spacing:.025em; line-height:1.8; }
.billing-main h2 { margin:28px 0 8px; font:700 clamp(1.25rem,2.5vw,1.8rem)/1.3 'Montserrat',sans-serif; letter-spacing:-.035em; }
.intro { max-width:600px; color:var(--muted); margin:12px 0 28px; }
.plan-price { margin:22px 0 4px; font:800 clamp(3rem,7vw,5rem)/1.1 'Montserrat',sans-serif; letter-spacing:-.065em; }
.plan-price span { font:500 1rem/1.4 'Manrope',sans-serif; letter-spacing:0; color:var(--muted); }
.plan-terms { max-width:580px; font-size:.9rem; color:var(--muted); margin:12px 0 24px; }
.actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
button, .primary-action { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:14px 25px; border:0; border-radius:4px; color:#05131c; background:linear-gradient(110deg,#00d4ff,#00ffc6); cursor:pointer; font:800 .95rem/1.5 'Manrope',sans-serif; text-decoration:none; transition:transform .2s,filter .2s; }
button:hover, .primary-action:hover { transform:translateY(-2px); filter:brightness(1.08); }
button:disabled { cursor:wait; opacity:.65; transform:none; }
.actions a:not(.primary-action) { font-size:.9rem; }
.status { max-width:600px; margin:18px 0 0; color:var(--muted); }
.status:empty { display:none; }
.status.error { color:#ffc5b9; }
.billing-footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px clamp(20px,6vw,96px); border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }
.billing-footer a { overflow-wrap:anywhere; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion:no-preference) { .billing-main { animation:arrive .55s ease-out both; } @keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }
@media (max-width:600px) { .billing-header { padding:20px; gap:16px; } .brand { font-size:.72rem; max-width:195px; } .brand img { width:28px; height:28px; } .billing-header > a:last-child { font-size:.76rem; } .billing-main { padding:40px 20px; } .billing-main h1 { font-size:clamp(2.25rem,10.5vw,3.7rem); } .actions { align-items:stretch; flex-direction:column; gap:18px; } .actions a { text-align:center; } .billing-footer { padding:20px; } }