@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#16332e; --muted:#65746c; --paper:#f6f4ed; --card:#fffdfa; --accent:#e46e4e; --mint:#c9e5d1; --line:#dfe4da; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.page-shell { max-width:1200px; margin:0 auto; padding:28px 28px 72px; }
.hero { min-height:400px; padding:46px 52px; border-radius:28px; position:relative; overflow:hidden; background:var(--ink); color:#f7f5ec; }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(201,229,209,.3); }
.hero::before { width:500px; height:500px; right:-170px; top:-210px; }.hero::after { width:330px; height:330px; right:-75px; top:-120px; }
.eyebrow { margin:0 0 12px; color:var(--accent); font:600 12px/1 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { position:relative; max-width:680px; margin-bottom:20px; font:700 clamp(44px,7vw,78px)/.99 'Playfair Display',serif; letter-spacing:-.045em; } h1 em { color:var(--mint); }
.hero-copy { max-width:480px; color:#d4ddd5; line-height:1.6; font-size:16px; }.month-picker { display:flex; align-items:center; gap:10px; margin-top:42px; position:relative; }
.round-button { width:42px; height:42px; border:1px solid rgba(255,255,255,.28); color:#fff; background:transparent; border-radius:50%; font-size:20px; }.round-button:hover { background:rgba(255,255,255,.13); }
.month-input-label { display:grid; gap:3px; color:#cbd7cf; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.month-input-label input { width:147px; padding:7px 10px; border:1px solid rgba(255,255,255,.28); border-radius:8px; background:transparent; color:#fff; color-scheme:dark; font-size:14px; }
.overview { display:grid; grid-template-columns:repeat(3,1fr); max-width:720px; margin:-40px 32px 0; position:relative; border-radius:16px; background:var(--card); box-shadow:0 18px 40px #16332e1f; }.overview div { padding:20px 28px; border-right:1px solid var(--line); }.overview div:last-child { border:0; }.overview strong,.overview span { display:block; }.overview strong { font-size:22px; }.overview span { margin-top:4px; color:var(--muted); font-size:12px; }
.content { padding:74px 32px 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.section-heading h2 { margin:0; font:700 30px/1.1 'Playfair Display',serif; }.clear-button { border:0; border-bottom:1px solid var(--ink); padding:4px 0; background:none; color:var(--ink); }
.category-list { display:flex; gap:9px; flex-wrap:wrap; margin:28px 0 18px; }.category-chip { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:13px; }.category-chip:hover,.category-chip.active { border-color:var(--ink); background:var(--ink); color:#fff; }.selected-category { color:var(--muted); font-size:13px; }
.bank-list { display:grid; gap:32px; }.bank-section { padding-top:4px; }.bank-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }.bank-logo,.bank-logo-fallback { width:30px; height:30px; padding:3px; border:1px solid var(--line); border-radius:9px; background:#fff; object-fit:contain; }.bank-logo-fallback { display:grid; place-items:center; color:var(--accent); font-size:13px; font-weight:800; }.bank-header h3 { margin:0; font-size:16px; }.bank-count { margin:2px 0 0; color:var(--muted); font-size:11px; }.offer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.offer-card { min-height:204px; display:flex; flex-direction:column; padding:21px; border:1px solid #e5e2d8; border-radius:16px; background:var(--card); transition:transform .18s,box-shadow .18s; }.offer-card:hover { transform:translateY(-3px); box-shadow:0 12px 25px #16332e14; }.offer-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }.offer-kind { color:var(--muted); font-size:11px; }.reward { color:var(--accent); font:700 24px/1 'DM Mono',monospace; }.offer-card h3 { margin:24px 0 6px; font-size:18px; }.card { color:var(--muted); font-size:13px; }.offer-card footer { display:flex; justify-content:space-between; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.empty-state { max-width:530px; margin:55px auto; padding:40px; text-align:center; border:1px dashed #b6c7bb; border-radius:18px; }.empty-state span { color:var(--accent); font-size:34px; }.empty-state h2 { margin:12px 0; font:700 26px 'Playfair Display',serif; }.empty-state p { color:var(--muted); line-height:1.6; }
@media (max-width:760px) { .page-shell { padding:12px 12px 40px; }.hero { min-height:390px; padding:38px 26px; border-radius:20px; }.overview { margin:-25px 12px 0; }.overview div { padding:15px 12px; }.overview strong { font-size:16px; }.content { padding:54px 12px 0; }.offer-grid { grid-template-columns:1fr; }.section-heading { align-items:start; }.section-heading h2 { font-size:27px; }.offer-card { min-height:175px; } }