:root { color-scheme: light; --bg:#f2f5fa; --surface:#fff; --text:#12203a; --muted:#455673; --border:#c8d2e2; --accent:#1d4ed8; --error:#991b1b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; }
a { color:var(--accent); }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.65; }
:focus-visible { outline:3px solid #b45309; outline-offset:4px; }
[hidden] { display:none !important; }
.skip-link { position:absolute; top:0; left:1rem; padding:.65rem 1rem; background:var(--surface); transform:translateY(-150%); z-index:10; }
.skip-link:focus { transform:translateY(0); }
.shell { max-width:860px; padding:2rem 1.25rem 4rem; margin:auto; }
.topbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:1.2rem; margin-bottom:2rem; }
.brand { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.context { font-size:.85rem; color:var(--muted); overflow-wrap:anywhere; }
.test-environment { color:#78350f; background:#fef3c7; padding:.25rem .65rem; border-radius:.4rem; }
h1 { font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.2; letter-spacing:-.035em; margin:0 0 1rem; }
h2 { font-size:1.15rem; line-height:1.4; margin:0 0 1rem; }
p { margin:.5rem 0 1rem; }
.intro { max-width:65ch; color:var(--muted); }
.card { background:var(--surface); padding:1.5rem; border:1px solid var(--border); border-radius:1rem; margin:1rem 0; overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; border:1px solid var(--border); border-radius:.6rem; background:var(--surface); color:var(--text); font-weight:650; text-decoration:none; }
.button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.button:hover:not(:disabled) { border-color:var(--accent); }
.status { min-height:1.8rem; padding:.65rem 0; color:var(--muted); overflow-wrap:anywhere; }
.status.error, .unavailable { color:var(--error); }
fieldset { border:0; padding:0; margin:1.5rem 0; min-width:0; }
legend { font-size:1.1rem; font-weight:700; margin-bottom:.75rem; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:1rem; }
.plan-option { display:flex; align-items:flex-start; gap:.8rem; padding:1.25rem; border:2px solid var(--border); border-radius:.85rem; background:var(--surface); cursor:pointer; }
.plan-option:has(input:checked) { border-color:var(--accent); background:#eff6ff; }
.plan-option:has(input:disabled) { background:#f8fafc; cursor:not-allowed; }
.plan-option input { flex:0 0 auto; width:1.25rem; height:1.25rem; accent-color:var(--accent); margin:.2rem 0 0; }
.plan-body { display:flex; flex-direction:column; gap:.25rem; min-width:0; overflow-wrap:anywhere; }
.plan-name { font-size:1.15rem; }
.price { font-size:1.5rem; font-weight:750; margin:.4rem 0; }
.description, .muted { color:var(--muted); }
.fine-print { font-size:.8rem; color:var(--muted); }
.feature-preview { font-size:.875rem; margin:.5rem 0; padding-left:1.2rem; }
.empty { color:var(--muted); padding:.75rem 0; }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1rem; }
.summary-grid .card { margin:0; }
.value { font-size:2rem; font-weight:750; letter-spacing:-.03em; }
.badge { font-size:.8rem; font-weight:650; background:#e0e7ff; color:#263a88; border-radius:.4rem; padding:.2rem .5rem; display:inline-block; }
.feature-tools { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1rem 0; }
input[type="search"] { border:1px solid var(--border); border-radius:.5rem; min-height:44px; padding:.5rem .75rem; max-width:100%; background:var(--surface); color:var(--text); }
.feature-list { padding:0; margin:0; list-style:none; }
.feature-list li { border-top:1px solid var(--border); padding:.75rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem; }
.feature-list .details { color:var(--muted); font-size:.85rem; }
code { font-size:.85rem; overflow-wrap:anywhere; }
footer { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem; }
@media (max-width:480px) { .shell { padding:1rem .85rem 2rem; } .card { padding:1rem; } .actions .button { flex:1 1 auto; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (forced-colors:active) { .plan-option:has(input:checked) { border-color:Highlight; } .button.primary { border:2px solid ButtonText; } }

/* Credit history stays bounded to one page; text labels, not color, convey signs. */
.activity-filters { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin-top:1rem; }
.activity-filters > div { display:flex; flex:1 1 180px; flex-direction:column; gap:.4rem; min-width:0; }
.activity-filters select, .activity-filters input { min-height:44px; max-width:100%; width:100%; padding:.55rem; border:1px solid var(--border); border-radius:.5rem; background:var(--surface); color:var(--text); }
.activity-table-wrap { max-width:100%; overflow:auto; }
.activity-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.activity-table caption { text-align:left; color:var(--muted); font-size:.8rem; padding:.5rem 0; }
.activity-table th, .activity-table td { text-align:left; vertical-align:top; border-bottom:1px solid var(--border); padding:.75rem .5rem; overflow-wrap:anywhere; }
.activity-table .numeric { text-align:right; font-variant-numeric:tabular-nums; }
.activity-reference { display:block; margin-top:.35rem; font-size:.75rem; user-select:all; }
@media (max-width:560px) {
  .activity-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .activity-table tr { display:block; border-top:2px solid var(--border); padding:.35rem 0; }
  .activity-table td, .activity-table .numeric { display:grid; grid-template-columns:minmax(90px,35%) minmax(0,1fr); gap:.65rem; text-align:left; border:0; padding:.4rem 0; }
  .activity-table td::before { content:attr(data-label); font-weight:650; }
  .activity-table td:nth-child(2) .activity-reference { grid-column:2; }
}