/* Visual tokens and layout are derived from the Paidwith customer portal design language. */
:root { --ink:#141b27; --muted:#536174; --page:#e8edf3; --surface:#fff; --line:#b8c4d0; --blue:#0568c8; --blue-soft:#dbeeff; --focus:#173351; --radius:14px; --shadow:0 10px 26px rgba(20,27,39,.08); font-family:"Public Sans","Segoe UI",system-ui,sans-serif; color:var(--ink); background:var(--page); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
a:focus-visible,button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:absolute; left:12px; top:10px; transform:translateY(-180%); padding:10px 12px; background:var(--surface); color:var(--ink); text-decoration:none; }
.skip-link:focus { transform:translateY(0); }
.site-header { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; min-height:78px; padding:0 clamp(22px,4vw,64px); border-bottom:1px solid var(--line); background:#e6f3ff; }
.brand { color:var(--ink); font-family:"Trebuchet MS",Trebuchet,Arial,sans-serif; font-size:30px; font-weight:700; letter-spacing:-1.5px; text-decoration:none; }
.brand span { color:#ec5b58; }
nav { display:flex; gap:28px; align-self:stretch; }
nav a { position:relative; display:flex; align-items:center; color:var(--muted); font-size:15px; font-weight:500; text-decoration:none; }
nav a[aria-current="page"] { color:var(--ink); }
nav a[aria-current="page"]::after { position:absolute; right:0; bottom:0; left:0; height:4px; background:var(--blue); content:""; }
.main-content { width:min(100% - clamp(48px,8vw,120px), 1100px); margin:0 auto; padding:42px 0 66px; }
.page-banner { max-width:760px; margin-bottom:28px; padding-bottom:32px; border-bottom:4px solid var(--blue); }
.eyebrow { margin:0 0 11px; color:var(--muted); font-size:14px; }
h1 { max-width:700px; margin:0; font-size:clamp(40px,4.2vw,56px); font-weight:550; letter-spacing:-.045em; line-height:1.05; }
.page-banner > p:not(.eyebrow) { max-width:560px; margin:14px 0 0; color:var(--muted); font-size:17px; line-height:1.5; }
.primary-button,.text-button { min-height:44px; padding:10px 16px; border:1px solid var(--blue); background:var(--blue); color:#fff; font:inherit; font-weight:650; cursor:pointer; }
.primary-button { margin-top:24px; }
.primary-button:hover { border-color:var(--ink); background:var(--ink); }
.text-button { border-color:transparent; background:transparent; color:var(--ink); }
.status-card,.holding-card { max-width:650px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.status-card h2,.holding-card h2 { margin:0; font-size:24px; font-weight:550; letter-spacing:-.03em; }
.status-card p,.holding-card p { margin:10px 0 0; color:var(--muted); line-height:1.5; }
@media (max-width:640px) { .site-header { grid-template-columns:1fr auto; gap:12px; padding-inline:18px; } nav { grid-column:1 / -1; order:3; min-height:46px; gap:20px; } .main-content { width:min(100% - 32px, 720px); padding-top:34px; } h1 { font-size:42px; } }