:root { --ink:#1a1a1a; --mut:#666; --line:#b9b9b9; --accent:#0f5f8f; --good:#1a7f37; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font:16px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:#fff; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
header { padding:28px 0 18px; border-bottom:1px solid var(--line); }
h1 { font-size:1.5rem; letter-spacing:-0.01em; }
.sub { color:var(--mut); font-size:.9rem; margin-top:4px; }
.meta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:12px 0; font-size:.85rem; color:var(--mut); }
.tag { background:#f3e8ff; color:#7c3aed; border:1px solid #d8c4f0; padding:1px 8px; border-radius:999px; font-size:0.75rem; font-weight:600; margin-left:6px; vertical-align:middle; }
.badge { background:#eef4f8; color:var(--accent); border:1px solid #cfe0ea; padding:2px 10px; border-radius:999px; font-weight:600; }
.ad { background:#fafafa; border:1px dashed var(--line); color:var(--mut); font-size:.8rem; text-align:center; padding:22px 10px; margin:14px 0; }

/* Gray grid lines for readability */
table { width:100%; border-collapse:collapse; font-size:.9rem; margin:10px 0 30px; }
th, td { padding:10px 12px; text-align:left; border:1px solid #a9a9a9; vertical-align:top; }
th { background:#efefef; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#222; cursor:pointer; white-space:nowrap; user-select:none; }
th:hover { color:var(--accent); }
tbody tr:nth-child(even) { background:#f6f6f6; }
tbody tr:hover { background:#eef3f7; }
td.bank { font-weight:700; white-space:nowrap; }
td.rate { font-weight:700; white-space:nowrap; }
td.rate.low { color:var(--good); }
.loan { font-weight:600; }
.note { color:var(--mut); font-size:.78rem; margin-top:2px; }
.offer { color:var(--good); font-size:.82rem; }
.fee { color:#111; font-size:.82rem; }
.fixed span { display:inline-block; background:#f2f2f2; border:1px solid var(--line); border-radius:6px; padding:1px 8px; margin:2px 3px 2px 0; font-size:.8rem; white-space:nowrap; }
.fixed b { color:var(--accent); }
nav.banks { margin:14px 0; display:flex; flex-wrap:wrap; gap:8px; }
nav.banks a { display:inline-block; padding:6px 14px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink); background:#fafafa; font-size:.85rem; font-weight:600; }
nav.banks a:hover { background:#eef3f7; border-color:var(--accent); color:var(--accent); }
footer { border-top:1px solid var(--line); padding:22px 0 40px; color:var(--mut); font-size:.78rem; }
.disc { background:#fff8e6; border:1px solid #f0e0b0; border-radius:8px; padding:10px 14px; font-size:.82rem; margin:8px 0 20px; }
.cashback { margin:20px 0 30px; }
.cashback h2 { font-size:1.1rem; margin-bottom:8px; }
.cashback li { margin:4px 0 4px 20px; }
.back { display:inline-block; margin:14px 0; color:var(--accent); text-decoration:none; font-size:.85rem; }
.back:hover { text-decoration:underline; }
@media (max-width:760px) {
  table { font-size:.8rem; }
  th, td { padding:8px 6px; }
  .wrap { padding:0 10px; }
}