/* ============================================================
   CreditCardCompare.net — component styles (distinct theme)
   Emerald/teal palette · Manrope/Sora · comparison-tool look
   ============================================================ */
:root{
  --brand:#059669; --brand-dark:#047857; --brand-light:#34d399;
  --ink:#0f1e1a; --gold:#f59e0b; --teal:#0d9488;
}
*{ scroll-behavior:smooth; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ overflow-x:hidden; font-family:'Manrope',system-ui,sans-serif; background:#f6faf8; }
h1,h2,h3,.font-display{ font-family:'Sora','Manrope',sans-serif; }
::selection{ background:#a7f3d0; }

.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100;border-radius:0 0 .5rem 0}
.skip-link:focus{left:0}

/* ---------- Buttons (pill, emerald) ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand);color:#fff;font-weight:700;padding:.6rem 1.2rem;border-radius:9999px;transition:.2s;box-shadow:0 8px 18px -8px rgba(5,150,105,.7)}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;gap:.3rem;border:1.5px solid #cbd5e1;color:#1f3b34;font-weight:700;padding:.5rem .9rem;border-radius:9999px;transition:.2s}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:#ecfdf5}
.btn-light{display:inline-flex;justify-content:center;background:#fff;color:var(--brand-dark);font-weight:800;padding:.7rem 1.4rem;border-radius:9999px;transition:.2s}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.4)}
.btn-ghost-light{display:inline-flex;justify-content:center;border:1.5px solid rgba(255,255,255,.6);color:#fff;font-weight:700;padding:.7rem 1.4rem;border-radius:9999px;transition:.2s}
.btn-ghost-light:hover{background:rgba(255,255,255,.14)}
.btn-apply{display:block;text-align:center;margin-top:.6rem;background:var(--ink);color:#fff;font-weight:700;padding:.6rem;border-radius:9999px;transition:.2s}
.btn-apply:hover{background:#0b3b30;transform:translateY(-1px)}

/* ---------- Nav ---------- */
.nav-link{display:inline-flex;align-items:center;padding:.5rem .8rem;border-radius:9999px;font-weight:600;font-size:.95rem;color:#1f3b34;transition:.15s;cursor:pointer;background:none;border:none}
.nav-link:hover{background:#ecfdf5;color:var(--brand-dark)}
.nav-dd{position:relative}
.nav-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid #d8eee5;border-radius:1rem;box-shadow:0 20px 40px -16px rgba(6,78,59,.28);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;display:flex;flex-direction:column;z-index:50}
.nav-menu-wide{min-width:430px;display:grid;grid-template-columns:1fr 1fr}
.nav-dd:hover .nav-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-menu a{padding:.5rem .7rem;border-radius:.6rem;font-size:.9rem;color:#334155}
.nav-menu a:hover{background:#ecfdf5;color:var(--brand-dark)}
.mob-link{display:block;padding:.6rem .4rem;border-radius:.5rem;font-weight:600;color:#1f3b34}
.mob-link:hover{background:#ecfdf5}

/* ---------- Card visual: flat modern style (distinct from sibling site) ---------- */
.cc-card{position:relative;aspect-ratio:1.586/1;border-radius:1.1rem;padding:6.5% 7%;color:#fff;display:flex;flex-direction:column;
  background:var(--cc-bg,#0f766e);overflow:hidden;isolation:isolate;font-family:'Manrope',sans-serif;
  box-shadow:0 14px 30px -16px rgba(6,78,59,.6), inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .3s, box-shadow .3s}
.card-tile:hover .cc-card,.cc-lg:hover{transform:translateY(-3px)}
.cc-lg{max-width:30rem;border-radius:1.4rem}
/* diagonal stripe texture (instead of guilloché) */
.cc-tex{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(125deg, rgba(255,255,255,.07) 0 2px, transparent 2px 16px)}
/* corner accent wedge */
.cc-gloss{position:absolute;top:0;right:0;width:55%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 100%)}
.cc-shine{display:none}
.cc-metal{background:linear-gradient(135deg,#334155,#0f172a 70%);box-shadow:0 18px 36px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12)}
.cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;z-index:1}
.cc-bank{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(.78rem,3cqw,1.15rem);letter-spacing:-.01em;line-height:1.05;max-width:64%}
.cc-tier{font-size:clamp(.45rem,1.7cqw,.62rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9;background:rgba(255,255,255,.16);border-radius:9999px;padding:.18em .7em;white-space:nowrap}
/* chip: silver, smaller, sits to the RIGHT under the wedge */
.cc-chiprow{display:flex;align-items:center;gap:.6rem;margin-top:9%;z-index:1}
.cc-chip{width:12%;aspect-ratio:1.35/1;border-radius:4px;background:linear-gradient(135deg,#e5e7eb,#9ca3af 60%,#e5e7eb);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.cc-wifi{width:clamp(.8rem,2.6cqw,1.1rem);height:auto;color:rgba(255,255,255,.75)}
/* number: clean sans, smaller, not embossed */
.cc-number{margin-top:6%;z-index:1;font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(.7rem,3cqw,1.1rem);letter-spacing:.14em;opacity:.85}
.cc-meta{display:flex;gap:9%;margin-top:5%;z-index:1}
.cc-meta label{display:block;font-size:clamp(.4rem,1.3cqw,.5rem);letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.cc-meta span{font-size:clamp(.55rem,2cqw,.75rem);font-weight:600}
.cc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin-top:auto;z-index:1}
.cc-name{font-weight:700;font-size:clamp(.55rem,2.1cqw,.8rem);text-transform:uppercase;letter-spacing:.04em;max-width:64%;line-height:1.15}
.cc-net{display:flex;align-items:center;height:1.6rem;flex-shrink:0}
.cc-card{container-type:inline-size}
.cc-img{width:100%;aspect-ratio:1.586/1;object-fit:cover;border-radius:1.1rem;display:block}

/* ---------- Badges (square-ish, distinct) ---------- */
.card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem;min-height:1.4rem}
.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;padding:.22rem .55rem;border-radius:.4rem;line-height:1}
.badge-lounge{background:#ecfdf5;color:#047857;border:1px solid #6ee7b7}
.badge-rewards{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.badge-free{background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4}
.badge-soon{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}

/* ---------- Card tiles (info-dense, comparison feel) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
.card-tile{background:#fff;border:1px solid #e3efe9;border-radius:1.1rem;padding:1rem;transition:.25s;display:flex;flex-direction:column}
.card-tile:hover{transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(6,78,59,.35);border-color:#bbe6d3}
.card-tile-body{padding-top:.9rem;display:flex;flex-direction:column;flex:1}
.card-tile-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--ink)}
.card-tile-title:hover{color:var(--brand-dark)}
.card-tile-issuer{font-size:.8rem;color:#64748b;margin-top:.1rem}
.card-tile-summary{font-size:.85rem;color:#475569;margin-top:.5rem;flex:1}
.card-tile-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed #e3efe9}
.card-fee{font-family:'Sora',sans-serif;font-weight:800;color:var(--ink);font-size:1.05rem}
.card-fee small{font-weight:500;color:#94a3b8}

/* ---------- Sections / headings ---------- */
.section{padding:3.5rem 0}
.h-eyebrow{color:var(--brand-dark);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.h-title{font-family:'Sora',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--ink);line-height:1.12;letter-spacing:-.02em}
.prose-cc{max-width:46rem;color:#334155;line-height:1.75}
.prose-cc h2{font-family:'Sora',sans-serif;font-size:1.55rem;font-weight:700;color:var(--ink);margin:2rem 0 .8rem}
.prose-cc h3{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .6rem}
.prose-cc p{margin:.8rem 0}
.prose-cc ul{margin:.8rem 0;padding-left:1.2rem;list-style:disc}
.prose-cc ol{margin:.8rem 0;padding-left:1.2rem;list-style:decimal}
.prose-cc li{margin:.35rem 0}
.prose-cc a{color:var(--brand-dark);text-decoration:underline}
.prose-cc table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.prose-cc th,.prose-cc td{border:1px solid #d8eee5;padding:.6rem .7rem;text-align:left}
.prose-cc th{background:#ecfdf5}

/* ---------- Footer ---------- */
.footer-h{color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:.9rem;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.05em}
.footer-list{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.footer-list a:hover{color:#fff;text-decoration:underline}

/* ---------- Ads / promo ---------- */
.ad-slot{margin:0 auto}
.promo-ad{display:flex;gap:.8rem;align-items:center;background:#fff;border:1px solid #e3efe9;border-radius:1rem;padding:.8rem;margin:.6rem 0;transition:.2s}
.promo-ad:hover{box-shadow:0 12px 28px -16px rgba(6,78,59,.35);transform:translateY(-2px)}
.promo-ad img{width:64px;height:64px;object-fit:cover;border-radius:.6rem}
.promo-ad-body{display:flex;flex-direction:column}
.promo-ad-body strong{color:var(--ink)}
.promo-ad-body span{font-size:.85rem;color:#64748b}

/* ---------- Helpful widget ---------- */
.helpful{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:1rem;padding:1.2rem;text-align:center;margin:2rem 0}
.helpful button{margin:0 .3rem;padding:.45rem 1.1rem;border-radius:9999px;border:1.5px solid #6ee7b7;font-weight:700;background:#fff;transition:.15s;cursor:pointer}
.helpful button:hover{border-color:var(--brand);color:var(--brand-dark)}

/* ---------- Back to top ---------- */
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;width:44px;height:44px;border-radius:9999px;background:var(--brand);color:#fff;font-size:1.2rem;display:none;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);z-index:50;cursor:pointer}
.to-top.show{display:flex}

/* ---------- Hero (light, comparison-first) ---------- */
.hero{position:relative;background:radial-gradient(120% 120% at 100% 0%, #064e3b 0%, #065f46 45%, #047857 100%);color:#fff;overflow:hidden}
.hero-glow{position:absolute;width:600px;height:600px;border-radius:9999px;filter:blur(120px);opacity:.3}

/* ---------- Comparison table ---------- */
.cmp-table{width:100%;border-collapse:separate;border-spacing:0}
.cmp-table th,.cmp-table td{padding:.9rem;border-bottom:1px solid #d8eee5;vertical-align:top;text-align:left}
.cmp-table thead th{position:sticky;top:64px;background:#fff;z-index:10}

/* chips used on listing toolbar */
.chip{display:inline-flex;padding:.4rem .8rem;border-radius:9999px;border:1.5px solid #cbd5e1;font-size:.85rem;font-weight:700;color:#475569;background:#fff}
.chip-on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip:hover{border-color:var(--brand);color:var(--brand-dark)}
.chip-on:hover{color:#fff}