:root{
  --bg:#f4f5f7; --surface:#fff; --border:#dfe3e8;
  --text:#1a1d21; --text-muted:#5a6472; --accent:#0b1f3a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}

.topbar{background:var(--accent);color:#fff;flex-shrink:0}
.topbar__inner{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.topbar__brand{font-weight:600;letter-spacing:.02em}
.topbar__meta{color:rgba(255,255,255,.65);font-size:12px}

.portal{flex:1 1 auto;width:100%;max-width:1080px;margin:0 auto;padding:56px 24px 48px;text-align:center}
.portal__heading{font-size:28px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.portal__sub{color:var(--text-muted);font-size:15px;margin-bottom:40px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:720px;margin:0 auto}

.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:32px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  min-height:170px;cursor:pointer;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,31,58,.08);border-color:#c6ccd4}

.tile__logo{height:64px;display:flex;align-items:center;justify-content:center}
.tile__logo img{max-height:64px;max-width:220px;width:auto;object-fit:contain;display:block}

.tile__name{font-size:13px;font-weight:500;color:var(--text-muted);letter-spacing:.02em}

.tile[data-brand="wf"]:hover{border-color:#d71e28}
.tile[data-brand="chase"]:hover{border-color:#117aca}
.tile[data-brand="capone"]:hover{border-color:#a5141a}
.tile[data-brand="nfcu"]:hover{border-color:#0667ba}

/* white SVGs recolored for visibility on white tile */
.tile[data-brand="wf"] .tile__logo img{
  filter:brightness(0) saturate(100%) invert(15%) sepia(94%) saturate(5441%) hue-rotate(348deg) brightness(87%) contrast(96%);
}
.tile[data-brand="chase"] .tile__logo img{
  filter:brightness(0) saturate(100%) invert(29%) sepia(96%) saturate(3556%) hue-rotate(190deg) brightness(93%) contrast(101%);
}

.portal__foot{margin-top:40px;color:var(--text-muted);font-size:12px}
.foot{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);padding:16px 24px;text-align:center;color:var(--text-muted);font-size:12px}

@media (max-width:600px){
  .portal{padding:32px 16px}
  .portal__heading{font-size:22px}
  .grid{grid-template-columns:1fr;gap:14px}
  .tile{min-height:130px;padding:24px 16px}
  .topbar__meta{display:none}
}