:root { --ink:#1d2433; --paper:#fbfaf7; --cream:#f2eee5; --lime:#d9f36d; --coral:#ff826d; --purple:#6b5be7; --line:#d9d6ce; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans", sans-serif; } main, footer { max-width:1180px; margin:auto; padding-left:32px; padding-right:32px; } nav { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:var(--ink); text-decoration:none; font-size:21px; letter-spacing:-1px; font-weight:700; display:flex; gap:8px; align-items:center; } .brand-mark { color:var(--purple); font-size:24px; line-height:1; } .nav-links { display:flex; gap:28px; } .nav-links a { font-size:14px; color:#69707a; text-decoration:none; } button { font:inherit; cursor:pointer; } .nav-actions { display:flex; align-items:center; gap:9px; } .install-btn { border:1px solid var(--purple); background:var(--purple); color:white; border-radius:20px; padding:8px 13px; font-size:13px; font-weight:700; } .saved-btn { border:1px solid var(--line); background:transparent; border-radius:20px; padding:8px 12px 8px 15px; font-size:13px; color:#46505e; } .saved-btn span { display:inline-grid; place-items:center; background:var(--ink); color:white; min-width:18px; height:18px; border-radius:100%; margin-left:5px; font-size:11px; }
.hero { padding:88px 0 92px; max-width:850px; } .eyebrow { font-family:"DM Mono", monospace; font-size:11px; letter-spacing:1.2px; color:#68737b; font-weight:500; } h1,h2 { font-family:"Playfair Display", serif; font-weight:600; letter-spacing:-2.8px; margin:13px 0; } h1 { font-size:74px; line-height:1.02; } h1 em,h2 em { color:var(--purple); font-weight:600; } .hero-copy { font-size:18px; line-height:1.55; max-width:540px; margin:22px 0 32px; color:#56606b; } .search-card { background:white; box-shadow:0 20px 50px rgba(41,47,55,.10); padding:24px; border:1px solid #e6e2da; border-radius:4px; } .search-card label { display:block; font-size:14px; font-weight:700; margin-bottom:10px; } .search-row { display:flex; gap:10px; } .input-wrap { border:1px solid #c7c8c3; flex:1; min-width:0; display:flex; align-items:center; padding:0 14px; border-radius:3px; background:#fff; } .input-wrap:focus-within { border:1.5px solid var(--purple); box-shadow:0 0 0 3px rgba(107,91,231,.11); } .search-icon { font-size:27px; margin-right:9px; transform:rotate(-20deg); color:#77808b; } input { font:inherit; outline:0; border:0; height:52px; width:100%; font-size:15px; color:var(--ink); } input::placeholder { color:#a0a5a6; } .primary-btn { border:0; padding:0 19px; background:var(--purple); color:white; border-radius:3px; font-weight:700; font-size:14px; white-space:nowrap; transition:.2s transform,.2s background; } .primary-btn:hover { transform:translateY(-2px); background:#5949d4; } .primary-btn span { font-size:19px; margin-left:8px; } .quick-picks { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; } .quick-picks span { font-family:"DM Mono", monospace; font-size:10px; letter-spacing:.7px; color:#8a8e90; margin-right:3px; } .quick-picks button { background:#f6f4ef; border:0; border-radius:14px; padding:6px 10px; font-size:12px; color:#535b65; } .quick-picks button:hover { background:var(--lime); } .trust { display:flex; align-items:center; gap:7px; font-size:12px; color:#757c83; margin:20px 2px 0; } .trust span { color:var(--purple); font-size:15px; } .trust i { height:12px; width:1px; background:#ccc8c0; margin:0 6px; }
.results { padding:72px 0 90px; border-top:1px solid var(--line); } .hidden { display:none; } .result-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:23px; } h2 { font-size:43px; line-height:1.05; margin-bottom:0; } h2 span { color:var(--purple); } .change-btn { border:0; border-bottom:1px solid var(--ink); padding:0 0 4px; background:none; font-size:13px; } .winner-card { background:var(--ink); color:#fff; overflow:hidden; padding:31px 35px; position:relative; min-height:220px; display:flex; align-items:center; } .winner-card:after { content:""; position:absolute; width:330px; height:330px; right:-110px; top:-130px; background:var(--lime); opacity:.96; border-radius:50%; } .winner-content { position:relative; z-index:1; width:100%; display:flex; align-items:center; gap:32px; } .credit-card { position:relative; flex:0 0 196px; height:122px; padding:17px; color:#fff; border-radius:9px; background:linear-gradient(137deg,#6b5be7,#37306d); box-shadow:8px 11px 0 rgba(0,0,0,.18); overflow:hidden; } .credit-card:after { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(255,255,255,.22); border-radius:50%; right:-52px; top:-68px; } .card-chip { color:#f5d780; font-size:17px; } .card-name { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.8px; position:absolute; left:17px; bottom:18px; } .winner-info { flex:1; } .winner-kicker { font-family:"DM Mono",monospace; color:var(--lime); letter-spacing:1px; font-size:11px; } .winner-info h3 { font-family:"Playfair Display",serif; font-size:32px; letter-spacing:-1px; margin:5px 0 7px; } .winner-info p { margin:0; color:#ccd0d8; font-size:14px; }.reward { position:relative; z-index:1; background:var(--lime); color:var(--ink); min-width:155px; text-align:center; padding:19px 12px; transform:rotate(-2deg); }.reward strong { display:block; font-family:"Playfair Display",serif; font-size:41px; line-height:.95; letter-spacing:-2px; }.reward span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }.other-options { margin-top:36px; }.section-label { font-family:"DM Mono",monospace; color:#747b81; font-size:11px; letter-spacing:1px; margin-bottom:12px; }.alternative { padding:17px 3px; border-top:1px solid var(--line); display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; }.mini-card { width:37px; height:24px; border-radius:3px; }.alternative b { font-size:15px; }.alternative small { display:block; color:#7c8388; margin-top:3px; }.alternative .rate { font-family:"DM Mono",monospace; font-size:14px; font-weight:500; }.fineprint { margin-top:22px; color:#888d8d; font-size:11px; max-width:700px; line-height:1.5; }
.categories { border-top:1px solid var(--line); padding:88px 0; display:grid; grid-template-columns:1fr 1.25fr; gap:70px; align-items:start; }.categories h2 { font-size:42px; }.category-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.category-tile { min-height:154px; border:0; text-align:left; padding:19px; display:flex; flex-direction:column; border-radius:3px; transition:.18s transform; }.category-tile:hover { transform:translateY(-4px); }.category-tile span { font-size:30px; margin-bottom:auto; }.category-tile b { font-size:16px; }.category-tile small { font-size:12px; opacity:.68; margin-top:3px; }.grocery { background:#d9f36d; }.dining { background:#ffc1b3; }.travel { background:#c8c6ff; }.gas { background:#ffd86e; }.how { border-top:1px solid var(--line); padding:72px 0 95px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:29px; }.steps span { font-family:"DM Mono",monospace; color:var(--purple); font-size:13px; }.steps h3 { font-size:18px; margin:9px 0 7px; }.steps p { color:#69717a; margin:0; font-size:14px; line-height:1.5; max-width:270px; }footer { border-top:1px solid var(--line); padding-top:27px; padding-bottom:28px; display:flex; justify-content:space-between; align-items:center; color:#747b81; font-size:13px; }footer .brand { font-size:17px; }footer .brand-mark { font-size:19px; }footer p { margin:0; }
@media (max-width:700px) { main,footer { padding-left:20px; padding-right:20px; }nav { height:70px; }.nav-links{display:none}.saved-btn{font-size:12px}.hero{padding:56px 0 64px}h1{font-size:51px;letter-spacing:-2px}.hero-copy{font-size:16px}.search-card{padding:18px}.search-row{flex-direction:column}.primary-btn{height:49px}.quick-picks{gap:6px}.quick-picks span{width:100%}.winner-card{padding:25px 22px}.winner-content{align-items:flex-start;flex-wrap:wrap;gap:22px}.credit-card{flex-basis:170px;height:106px}.reward{margin-left:auto}.winner-info{order:3;flex-basis:100%}.winner-info h3{font-size:28px}.categories{grid-template-columns:1fr;gap:28px;padding:65px 0}.categories h2{font-size:36px}.steps{grid-template-columns:1fr;gap:25px}.how{padding:60px 0}.result-heading{align-items:flex-start;gap:14px}.result-heading h2{font-size:36px}.change-btn{margin-top:15px;white-space:nowrap}.alternative{grid-template-columns:40px 1fr auto}footer{flex-wrap:wrap;gap:15px} }