:root{
  --paper: #F3F1E9;
  --paper-raised: #FFFFFF;
  --ink: #16231E;
  --ink-soft: #57645C;
  --line: #DDD7C4;
  --accent: #1F6F54;
  --accent-dark: #14503C;
  --accent-soft: #E4F0EA;
  --gold: #C08A2E;
  --gold-soft: #FBF0DC;
  --shadow: 0 1px 2px rgba(22,35,30,0.04), 0 8px 24px -12px rgba(22,35,30,0.18);
  --shadow-lift: 0 4px 8px rgba(22,35,30,0.06), 0 16px 32px -16px rgba(22,35,30,0.28);
  --radius: 12px;
  --radius-sm: 8px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(31,111,84,0.10), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(192,138,46,0.08), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

h1,h2,h3,.display{
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.mono, .figure, table.figures td{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

a{ color: var(--accent-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Top bar */
.topbar{
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  position: sticky; top:0; z-index: 20;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:"Fraunces", serif; font-weight:600; font-size:1.2rem; color:var(--ink); }
.brand .mark{
  width:26px; height:26px; border-radius:7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  position: relative; box-shadow: 0 2px 6px rgba(20,80,60,0.35);
}
.brand .mark::after{ content:""; position:absolute; left:5px; right:5px; top:8px; height:2.5px; border-radius:2px; background:rgba(255,255,255,0.85); box-shadow:0 6px 0 rgba(255,255,255,0.85); }
.nav{ display:flex; gap:26px; font-size:0.92rem; color:var(--ink-soft); }
.nav a{ color:var(--ink-soft); font-weight:500; }
.nav a:hover{ color:var(--accent-dark); }

/* Hero */
.hero{ padding: 64px 0 32px; border-bottom:1px solid var(--line); position:relative; }
.eyebrow{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px;
  background: var(--accent-soft); padding:5px 12px; border-radius:20px;
}
.hero h1{ font-size: clamp(2.2rem, 4.4vw, 3.3rem); margin:0 0 14px; max-width: 20ch; line-height:1.08; }
.hero p{ color:var(--ink-soft); max-width:62ch; font-size:1.08rem; }

.stats{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.stat{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; min-width:150px; box-shadow: var(--shadow);
}
.stat .n{ font-family:"IBM Plex Mono",monospace; font-size:1.7rem; font-weight:600; color:var(--accent-dark); }
.stat .l{ font-size:0.8rem; color:var(--ink-soft); }

/* SEO intro / keyword-rich copy block */
.seo-intro{ padding: 28px 0 8px; color: var(--ink-soft); font-size: 0.97rem; line-height:1.7; max-width: 78ch; }
.seo-intro strong{ color: var(--ink); }

.popular-links{ padding: 8px 0 32px; }
.popular-links h2{ font-size:0.95rem; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:500; margin:0 0 12px; }
.popular-links .link-group{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.popular-links a{
  font-size:0.85rem; color:var(--accent-dark); background:var(--paper-raised);
  border:1px solid var(--line); padding:6px 12px; border-radius:20px;
}
.popular-links a:hover{ background:var(--accent-soft); border-color:var(--accent); text-decoration:none; }

/* Search & filters */
.controls{ padding:28px 0; border-bottom:1px solid var(--line); }
.search-row{ display:flex; gap:10px; margin-bottom:14px; }
input[type="text"], input[type="search"], select{
  font-family: inherit; font-size:0.95rem; padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline:none; }
.search-row input[type="search"]{ flex:1; font-size:1.02rem; box-shadow: var(--shadow); }
.filters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; }
.filters label{ display:block; font-size:0.75rem; color:var(--ink-soft); margin-bottom:4px; font-family:"IBM Plex Mono",monospace; letter-spacing:0.03em; }
.filters select, .filters input{ width:100%; }

/* Multi-select category dropdown */
.ms-dropdown{ position:relative; }
.ms-toggle{
  width:100%; text-align:left; font-family:inherit; font-size:0.95rem;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink); cursor:pointer;
}
.ms-toggle:hover{ border-color:var(--accent); }
.ms-toggle::after{ content:"▾"; float:right; color:var(--ink-soft); }
.ms-panel{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  max-height:280px; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow: var(--shadow-lift);
  padding:6px 0;
}
.ms-panel label{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; font-size:0.88rem; color:var(--ink); font-family:inherit;
  text-transform:none; letter-spacing:normal; cursor:pointer; margin:0;
}
.ms-panel label:hover{ background:var(--accent-soft); }
.ms-panel input[type="checkbox"]{ width:auto; margin:0; accent-color:var(--accent); }
.ms-panel .ms-actions{ display:flex; justify-content:space-between; padding:6px 14px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ms-panel .ms-actions button{ background:none; border:none; color:var(--accent-dark); font-size:0.78rem; cursor:pointer; font-family:inherit; padding:0; font-weight:600; }
.ms-panel .ms-actions button:hover{ text-decoration:underline; }
.ms-panel .ms-search{ padding:8px 14px 10px; }
.ms-panel .ms-search input{ width:100%; padding:7px 10px; font-size:0.85rem; border:1px solid var(--line); border-radius:var(--radius-sm); }
.ms-panel label.ms-hidden{ display:none; }
.reset-btn{ background:#fff; border:1px solid var(--line); color:var(--ink-soft); padding:9px 16px; border-radius:var(--radius-sm); cursor:pointer; font-size:0.85rem; font-family:inherit; font-weight:500; }
.reset-btn:hover{ border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft); }

#result-count{ font-size:0.85rem; color:var(--ink-soft); margin-top:12px; font-family:"IBM Plex Mono",monospace; }
.filter-hint{ font-size:0.78rem; color:var(--ink-soft); margin-top:8px; }
.filter-hint .mono{ font-family:"IBM Plex Mono",monospace; background:var(--paper); padding:2px 6px; border-radius:4px; }

/* Card grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px; padding:30px 0 70px; }

.card{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:20px 20px 18px;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{ border-color:var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card a.card-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.card .bank{ font-size:0.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; font-family:"IBM Plex Mono",monospace; margin-bottom:6px; }
.card h3{ font-size:1.18rem; margin:0 0 8px; }
.tag{
  display:inline-block; font-size:0.72rem; padding:3px 10px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent-dark); font-family:"IBM Plex Mono",monospace; margin-right:6px; margin-bottom:8px; font-weight:500;
}
.card .figs{ display:flex; gap:16px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.card .fig{ font-size:0.8rem; color:var(--ink-soft); }
.card .fig b{ display:block; font-family:"IBM Plex Mono",monospace; color:var(--ink); font-size:0.97rem; }
.card .rewards-preview{ font-size:0.85rem; color:var(--ink-soft); margin:2px 0 4px; line-height:1.45; }
.card .preapprove-chip{
  position:relative; z-index:2; display:inline-block; margin-top:12px;
  background: linear-gradient(135deg, var(--gold), #A8721F);
  color:#fff; font-size:0.78rem; font-weight:600;
  padding:7px 14px; border-radius:20px; text-decoration:none;
  box-shadow: 0 2px 6px rgba(192,138,46,0.35);
}
.card .preapprove-chip:hover{ filter: brightness(1.08); text-decoration:none; }

.preapprove-btn{
  display:inline-block; margin-top:12px;
  background: linear-gradient(135deg, var(--gold), #A8721F); color:#fff;
  font-size:0.85rem; font-weight:600; padding:10px 18px; border-radius:24px; text-decoration:none;
  box-shadow: 0 2px 8px rgba(192,138,46,0.35);
}
.preapprove-btn:hover{ filter: brightness(1.08); text-decoration:none; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }

/* Detail page */
.breadcrumb{ font-size:0.85rem; color:var(--ink-soft); padding:20px 0 0; }
.detail-head{ padding:14px 0 24px; border-bottom:1px solid var(--line); }
.detail-head .bank{ font-family:"IBM Plex Mono",monospace; font-size:0.85rem; color:var(--accent-dark); text-transform:uppercase; letter-spacing:0.05em; }
.detail-head h1{ margin:6px 0 12px; font-size:2.1rem; }
.detail-figs{ width:100%; border-collapse:separate; border-spacing:0; margin:24px 0; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.detail-figs td{ padding:13px 16px; border-bottom:1px solid var(--line); }
.detail-figs tr:last-child td{ border-bottom:none; }
.detail-figs td.label{ background:var(--paper-raised); color:var(--ink-soft); font-family:"IBM Plex Sans",sans-serif; width:34%; font-size:0.85rem; }
.detail-figs td.value{ font-family:"IBM Plex Mono",monospace; font-weight:600; background:#fff; }
.rewards-box{ background:var(--accent-soft); border:1px solid var(--line); border-left:4px solid var(--accent); padding:20px 22px; border-radius:var(--radius); margin:22px 0; }
.rewards-box h2{ font-size:1rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:0.04em; font-family:"IBM Plex Mono",monospace; color:var(--accent-dark); }
.back-link{ display:inline-block; margin:26px 0 60px; font-weight:500; }

footer{ border-top:1px solid var(--line); padding:28px 0; color:var(--ink-soft); font-size:0.85rem; }

/* About page */
.about-hero{ padding: 48px 0 8px; }
.about-hero h1{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin:0 0 10px; }
.about-hero p{ color:var(--ink-soft); max-width: 68ch; font-size:1.03rem; }

.notice{
  background: var(--gold-soft); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius: var(--radius); padding:18px 20px; margin: 24px 0; color: var(--ink);
}
.notice strong{ color: var(--ink); }

.section-block{ padding: 36px 0; border-top:1px solid var(--line); }
.section-block h2{ font-size:1.5rem; margin:0 0 8px; }
.section-block .lede{ color:var(--ink-soft); margin:0 0 20px; max-width:68ch; }

.form-card{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); max-width: 560px;
}
.form-row{ margin-bottom: 16px; }
.form-row label{ display:block; font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px; font-weight:500; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; font-family: inherit; font-size:0.95rem; padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
.form-row textarea{ resize: vertical; min-height: 110px; }
.form-submit{
  display:inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; font-size:0.95rem; font-weight:600; padding:11px 22px; border-radius: 24px;
  border:none; cursor:pointer; box-shadow: 0 2px 8px rgba(20,80,60,0.3);
}
.form-submit:hover{ filter: brightness(1.08); }

.bank-options{ list-style:none; padding:0; margin: 0 0 20px; }
.bank-options li{
  padding: 10px 0 10px 28px; position:relative; color: var(--ink); max-width:68ch;
}
.bank-options li::before{ content:"→"; position:absolute; left:0; color: var(--accent); font-weight:600; }

@media (max-width: 640px){
  .nav{ display:none; }
  .hero{ padding-top:40px; }
}