/* billing — portfolio palette + canonical site header */
:root{--bg:hsl(0,0%,7%);--card:hsl(240,2%,13%);--line:hsl(0,0%,22%);--fg:hsl(0,0%,84%);--muted:hsla(0,0%,84%,.7);--gold:hsl(45,100%,72%);--ok:hsl(140,45%,55%);--bad:hsl(0,60%,60%)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--gold)}
.sitenav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:10px 20px;background:hsl(240,2%,13%);border-bottom:1px solid hsl(0,0%,22%);font-family:Poppins,ui-sans-serif,system-ui,sans-serif}
.sitenav-brand{color:hsl(45,100%,72%);font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;display:inline-block}
.sitenav-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.sitenav-links a{color:hsl(0,0%,84%);font-size:14px;text-decoration:none;padding:4px 0;display:inline-block}
.sitenav-links a:hover,.sitenav-links a.is-active{color:hsl(45,100%,72%)}
@media(max-width:580px){.sitenav{padding:8px 12px}.sitenav-links{gap:2px 12px}.sitenav-links a{font-size:13px}}

.sitenav-links a.nav-btn {
  border: 1px solid hsl(45, 100%, 72%);
  border-radius: 6px;
  padding: 2px 10px;
  color: hsl(45, 100%, 72%);
  margin-left: 4px;
  line-height: 1.2;
}
.sitenav-links a.nav-btn:hover {
  background: hsla(45, 100%, 72%, 0.1);
  color: hsl(0, 0%, 98%);
}
.sitenav-links a.nav-btn-primary {
  background: hsl(45, 100%, 72%);
  color: hsl(0, 0%, 7%);
  font-weight: 500;
}
.sitenav-links a.nav-btn-primary:hover {
  background: hsl(45, 100%, 80%);
  color: hsl(0, 0%, 7%);
}

html {
  scrollbar-gutter: stable;
}
.auth-links {
  display: contents;
}
.wrap{max-width:860px;margin:0 auto;padding:28px 20px 40px}
.crumb{color:var(--gold);font:13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;margin:0 0 6px}
h1{font-size:30px;margin:0 0 10px;color:#fff}h2{font-size:18px;margin:0 0 10px;color:#fff}
.lead{color:var(--muted);max-width:60ch}
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin:22px 0}@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0}
.card.pro{border-color:hsla(45,100%,72%,.45)}
.price{font-size:28px;color:#fff;margin:4px 0 10px}.price span{font-size:14px;color:var(--muted)}.price em{font-size:14px;color:var(--muted);font-style:normal;margin:0 8px}
ul{padding-left:18px;color:var(--muted)}li{margin:4px 0}
.btn{display:inline-block;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:hsl(240,2%,16%);color:#fff;text-decoration:none;font:600 14px Poppins,system-ui,sans-serif;cursor:pointer}
.btn.primary{background:var(--gold);color:#111;border-color:transparent}.btn:hover{filter:brightness(1.08)}
.buy{display:flex;gap:12px;flex-wrap:wrap}.buy form{margin:0}
.muted{color:var(--muted)}.small{font-size:13px}.mono{font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0}
.plan-pro{color:var(--gold)}.plan-free{color:var(--fg)}
.flash{padding:10px 14px;border-radius:10px;border:1px solid var(--line)}.flash.ok{border-color:hsla(140,45%,55%,.5);color:var(--ok)}.flash.err{border-color:hsla(0,60%,60%,.5);color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--line)}td{padding:8px;border-bottom:1px solid hsla(0,0%,100%,.05)}
.st-paid{color:var(--ok)}.st-failed{color:var(--bad)}.st-created{color:var(--muted)}
.foot{max-width:860px;margin:0 auto;padding:0 20px 30px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:14px}