/* crediteasy.ca — credit card & bank account pages (generated by C:\tools\crediteasy_cards.py) */
.wrap.wide{max-width:1120px;margin:0 auto;padding:22px 32px 56px}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.disclosure{font-size:.76rem;font-style:italic;color:var(--muted);margin-bottom:18px;line-height:1.5}
.wrap.wide h1{font-size:2rem;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin-bottom:10px}
.wrap.wide .lead{font-size:1.02rem;color:var(--ink-2);max-width:46em;margin-bottom:22px}
h2.sec{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin:30px 0 14px}
.muted{color:var(--muted)}
.sub{display:block;font-size:.74rem;color:var(--muted);font-weight:500;margin-top:2px}
.rebate{display:inline-block;background:#E8F7EE;color:#137A3E;font-weight:700;font-size:.8rem;padding:3px 8px;border-radius:6px;white-space:nowrap}

/* hub link lists */
.hublinks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.hublinks h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.hublinks a{display:inline-block;margin:0 6px 8px 0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.84rem;font-weight:600;text-decoration:none;color:var(--ink-2);background:#fff}
.hublinks a:hover{border-color:var(--blue);color:var(--blue)}

/* filter tools */
.ftools{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fsearch{flex:1 1 280px;font:inherit;font-size:.9rem;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff;min-width:0}
.fsel{font:inherit;font-size:.86rem;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;max-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.chips button{font:inherit;font-size:.8rem;font-weight:600;padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink-2);cursor:pointer}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.fcount{font-size:.8rem;color:var(--muted);width:100%}

/* table */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.ctable{width:100%;border-collapse:collapse;font-size:.86rem}
.ctable th{background:var(--ink);color:#fff;text-align:left;font-weight:700;font-size:.76rem;padding:11px 9px;line-height:1.3;position:sticky;top:0}
.ctable th[data-sort]{cursor:pointer}
.ctable th[data-sort]:after{content:" ↕";opacity:.45;font-size:.7rem}
.ctable th.asc:after{content:" ↑";opacity:1}
.ctable th.desc:after{content:" ↓";opacity:1}
.ctable td{padding:11px 9px;border-top:1px solid var(--line);vertical-align:top}
.ctable .num{text-align:right;white-space:nowrap}
.ctable th.num{white-space:normal}
.ctable tr.hide{display:none}
.cc{display:flex;gap:9px;align-items:center;min-width:190px}
.cc img{width:52px;height:33px;object-fit:contain;flex:none;border-radius:4px}
.cn{font-weight:700;color:var(--ink);line-height:1.3}
.ci{font-size:.76rem;color:var(--muted)}
.c-wb{min-width:170px;max-width:250px}
.c-rb .rebate{white-space:normal}
.c-go{white-space:nowrap}
.apply{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;font-size:.8rem;padding:8px 12px;border-radius:9px}
.apply:hover{background:var(--blue-deep)}
.apply.big{font-size:.9rem;padding:11px 18px;align-self:center}

/* top picks */
.picks{display:grid;gap:12px}
.pick{display:grid;grid-template-columns:auto 130px 1fr auto;gap:16px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.pick-n{font-weight:800;font-size:1.3rem;color:var(--blue)}
.pick-img img{width:120px;height:76px;object-fit:contain}
.pick h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.pick p{font-size:.86rem;color:var(--ink-2);margin-top:6px}
.pick .rb{color:#137A3E;font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
.facts span{display:block;font-size:.72rem;color:var(--muted)}
.facts b{font-size:.92rem}
.fineprint{font-size:.76rem;color:var(--muted);margin-top:26px;line-height:1.55;max-width:60em}

/* home-page entry block */
.cardhub{margin:8px 0 0}

@media (max-width:760px){
  .wrap.wide{padding:16px 16px 44px}
  .wrap.wide h1{font-size:1.55rem}
  .hublinks{grid-template-columns:1fr}
  .pick{grid-template-columns:1fr;gap:10px}
  .pick-n{font-size:1rem}
  .apply.big{justify-self:start}
}
@media (max-width:960px){
  /* table rows become stacked cards on phones and tablets */
  .tblwrap{border:none;background:none;overflow:visible}
  .ctable thead{display:none}
  .ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
  .ctable tr{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:12px;padding:12px 14px}
  .ctable tr.hide{display:none}
  .ctable td{border:none;padding:4px 0}
  .ctable td[data-l]{display:flex;justify-content:space-between;gap:14px;text-align:right}
  .ctable td[data-l]:before{content:attr(data-l);color:var(--muted);font-size:.78rem;text-align:left;flex:none}
  .ctable td.c-wb{display:block;text-align:left;max-width:none}
  .ctable td.c-wb:before{display:block;margin-bottom:2px}
  .ctable .num{white-space:normal}
  .cc{min-width:0;margin-bottom:6px}
  .c-go{padding-top:8px!important}
  .c-go .apply{display:block;text-align:center;padding:11px}
}