/* CreditCardProfiles — design system.
   Premium financial-editorial: deep emerald anchor · warm gold accent,
   used sparingly (hairlines, chip, small details) · warm paper ground ·
   white cards · Fraunces serif display + Source Sans 3 body.
   Restrained on purpose: no badges, no urgency, no clutter.
   Every var() below is defined in :root — no undefined tokens.
   Gold is NEVER body text on a light background at full strength;
   text uses --gold-deep (#8a6d1d, checked ≥4.5:1 on paper). */
:root{
  --paper:#faf9f5;
  --ivory:#f4efe3;
  --card:#ffffff;
  --ink:#122019;
  --body:#33413a;
  --muted:#67766d;
  --emerald:#14532d;
  --emerald-deep:#0b2e1c;
  --emerald-soft:#1e6b41;
  --sage:#cfdccf;
  --sage-soft:#dce5da;
  --gold:#c9a227;
  --gold-deep:#8a6d1d;
  --gold-soft:#e9ddbe;
  --line:#e3ddd0;
  --sand:#efe9dc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--emerald-soft);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif;color:var(--ink);
  line-height:1.16;margin:0 0 .5em;font-weight:600}
h1{font-size:2.45rem;letter-spacing:-.01em}
h2{font-size:1.5rem;margin-top:1.3em}
h3{font-size:1.12rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px 56px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line)}
.header-in{max-width:1120px;margin:0 auto;padding:11px 22px;display:flex;
  align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;
  font-size:1.26rem;font-weight:700;color:var(--emerald-deep);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand em{font-style:normal;color:var(--gold-deep)}
.main-nav{display:flex;gap:20px;flex-wrap:wrap}
.main-nav a{color:var(--body);font-weight:600;font-size:.97rem}
.main-nav a:hover{color:var(--emerald-deep);text-decoration:none}
.searchbox{position:relative;margin-left:auto;min-width:200px;flex:0 1 260px}
.searchbox .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none}
.searchbox input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font:inherit;font-size:.95rem;color:var(--ink)}
.searchbox input:focus{outline:2px solid var(--emerald-soft);outline-offset:1px}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(11,46,28,.16);
  overflow:hidden;display:none}
.search-results.open{display:block}
.sr-link{display:block;padding:10px 14px;color:var(--ink)}
.sr-link:hover{background:var(--ivory);text-decoration:none}
.sr-link .sr-name{display:block;font-weight:700}
.sr-link .sr-meta{display:block;font-size:.85rem;color:var(--muted)}
.sr-none{padding:10px 14px;color:var(--muted);font-size:.92rem}

/* crumbs / kickers / answer-first */
.crumbs{padding:20px 0 4px;font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--emerald-soft);font-weight:600}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:10px 0 8px}
.kicker.light{color:var(--gold)}
.answer-first{font-size:1.14rem;line-height:1.6;color:var(--body);
  border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:16px 0 26px;max-width:64ch}
.answer-first strong{color:var(--ink)}

/* hero (home) — deep emerald, type-led */
.hero{position:relative;border-radius:20px;overflow:hidden;margin:24px 0 10px;
  background:linear-gradient(155deg,var(--emerald) 0%,var(--emerald-deep) 100%);min-height:380px;
  display:flex;align-items:flex-end}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold)}
.hero-in{position:relative;padding:66px 36px 36px;max-width:780px}
.hero h1{color:#ffffff;font-size:2.9rem;margin-bottom:.35em}
.hero .lede{color:var(--sage);font-size:1.17rem;line-height:1.6;max-width:56ch}
.hero-search{margin:24px 0 6px;max-width:560px}
.hero-search input{width:100%;padding:14px 18px;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;background:rgba(255,255,255,.12);font:inherit;font-size:1.05rem;color:#fff}
.hero-search input::placeholder{color:#c3d2c7}
.hero-search input:focus{outline:2px solid var(--gold);outline-offset:1px;background:rgba(255,255,255,.16)}
.stat-row{display:flex;gap:32px;flex-wrap:wrap;margin:24px 0 6px}
.stat .n{display:block;font-family:'Fraunces',serif;font-size:1.7rem;font-weight:700;color:#fff}
.stat .l{display:block;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sage-soft)}

/* chips (at-a-glance) — quiet, no coloured rank chips */
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.chip{display:inline-block;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:.92rem;color:var(--body)}
.chip b{color:var(--ink)}
.chip.fee{border-color:var(--gold);color:var(--ink)}
.chip.fee b{color:var(--gold-deep)}

/* drawn card graphic — generic, no brand marks */
.card-art{position:relative;aspect-ratio:1.586/1;border-radius:16px;overflow:hidden;
  background:linear-gradient(140deg,#1a6b43 0%,#14532d 52%,#0b2e1c 100%);
  box-shadow:0 18px 34px rgba(11,46,28,.28);color:#fff}
.card-art::before{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;
  border-radius:50%;border:1px solid rgba(201,162,39,.35)}
.card-art::after{content:"";position:absolute;right:-30px;bottom:-90px;width:210px;height:210px;
  border-radius:50%;border:1px solid rgba(255,255,255,.10)}
.card-art .ca-chip{position:absolute;left:7%;top:16%;width:13%;height:19%;border-radius:5px;
  background:linear-gradient(145deg,#e3c766,#c9a227 60%,#a8871f)}
.card-art .ca-issuer{position:absolute;right:7%;top:14%;font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.card-art .ca-name{position:absolute;left:7%;right:7%;bottom:34%;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.45rem;line-height:1.2;color:#fff}
.card-art .ca-num{position:absolute;left:7%;bottom:15%;font-size:.95rem;letter-spacing:.28em;color:#e6e2d4}
.card-art .ca-net{position:absolute;right:7%;bottom:15%;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.card-art.mini{border-radius:12px;box-shadow:0 8px 18px rgba(11,46,28,.20)}
.card-art.mini .ca-name{font-size:1.02rem;bottom:32%}
.card-art.mini .ca-num{font-size:.72rem}
.card-art.mini .ca-net{font-size:.6rem}
.card-art.mini .ca-issuer{font-size:.58rem}

/* cards grid */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:22px}
.cc-card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.cc-card:hover{text-decoration:none;transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(11,46,28,.13)}
.cc-card:hover h3{color:var(--emerald-deep)}
.cc-card .cc-visual{padding:16px 16px 0}
.card-body{padding:14px 18px 18px}
.card-body h3{margin:0 0 4px;font-size:1.1rem}
.card-body h3::after{content:"";display:block;width:34px;height:2px;background:var(--gold);
  margin-top:8px;opacity:0;transition:opacity .15s ease}
.cc-card:hover .card-body h3::after{opacity:1}
.card-meta{margin:0;color:var(--muted);font-size:.9rem}
.card-rewards{margin:8px 0 0;color:var(--body);font-size:.94rem}

/* tiles */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;color:var(--ink)}
.tile:hover{text-decoration:none;border-color:var(--emerald-soft);box-shadow:0 8px 20px rgba(11,46,28,.10)}
.tile .bt-name{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.tile .bt-count{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}

/* profile */
.profile-hero{margin:6px 0 26px}
.profile-hero .card-art{max-width:520px}
.profile-hero figcaption{font-size:.88rem;color:var(--muted);margin-top:12px}
.spec-block{margin:28px 0}
.spec-table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec-table th,.spec-table td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--sand);font-size:1rem}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.spec-table th{width:210px;color:var(--muted);font-weight:600;font-size:.86rem;
  letter-spacing:.07em;text-transform:uppercase;padding-top:14px}
.src-note{font-size:.9rem;color:var(--muted);margin-top:10px}
.desc-block p{max-width:68ch}
.cat-block{margin:32px 0}
.more-note{color:var(--muted)}
.cta-block{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:15px 18px;margin:28px 0}
.cta-block p{margin:0}
.trust-strip{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:32px 0}
.trust-strip h2{margin-top:0}
.trust-strip p{margin:6px 0}

/* faq + sources */
.faq{margin:32px 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;margin-bottom:10px}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer}
.faq details p{margin:8px 0 2px}
.sources{margin:32px 0}
.sources ul{padding-left:20px}
.sources li{margin-bottom:6px;word-break:break-word}
.sources a{font-weight:600}
.updated{font-size:.9rem;color:var(--muted)}

/* footer */
.site-footer{background:var(--emerald-deep);color:var(--sage);margin-top:64px}
.footer-in{max-width:1120px;margin:0 auto;padding:46px 22px 28px;display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;
  font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:10px}
.site-footer p{font-size:.95rem;line-height:1.55;color:var(--sage)}
.site-footer .fineprint{font-size:.84rem;color:var(--sage-soft)}
.site-footer h4{font-family:'Fraunces',serif;color:#fff;margin:2px 0 12px;font-size:1.02rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:7px}
.site-footer a{color:var(--sage)}
.site-footer a:hover{color:#fff}
.footer-note{max-width:1120px;margin:0 auto;padding:0 22px 30px;font-size:.86rem;color:var(--sage-soft)}

/* responsive */
@media (max-width:900px){
  .footer-in{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.2rem}
  .hero-in{padding:56px 22px 28px}
  h1{font-size:1.9rem}
  .card-art .ca-name{font-size:1.2rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .footer-in{grid-template-columns:1fr}
  .searchbox{margin-left:0;flex:1 1 100%}
  .spec-table th{width:132px}
  .stat-row{gap:18px}
  .hero{min-height:340px}
  .card-art .ca-name{font-size:1.05rem}
}