:root{
  --ink:#0f172a; --muted:#6b7280; --line:#e5e7eb; --bg:#ffffff; --panel:#ffffff;
  --accent:#6d28d9; --accent-2:#9333ea;
  --chip-bg:#fbfaff; --chip-bd:#e6e2ff; --chip-fg:#3b2a84;
  --shadow:0 6px 28px rgba(2,6,23,.08);
}

/* PAGE */
.results-mortgage{
  background:var(--bg);padding:32px 16px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
  overflow-x:hidden
}
.results-mortgage, .results-mortgage *{box-sizing:border-box}
.results-mortgage .wrap{max-width:min(1120px,100%);margin:0 auto}

/* TOOLBAR & FILTERS */
.results-toolbar{display:flex;gap:12px;margin:0 0 14px}
.results-toolbar .btn{
  all:unset;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;
  border-radius:12px;padding:12px 16px;box-shadow:0 12px 26px rgba(109,40,217,.24);
  transition:filter .15s ease, transform .05s ease
}
.results-toolbar .btn:hover{filter:brightness(.92);transform:translateY(-1px)}
.results-toolbar .btn:active{filter:brightness(.88);transform:translateY(0)}

.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;max-width:100%}
.filters{display:grid;gap:14px;margin-bottom:16px}
@media (min-width:720px){.filters{grid-template-columns:repeat(3,1fr)}}
.filters .label{font-size:14px;color:#334155;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.ctrl-val{
  font-size:15px;font-weight:900;background:#f5f7fb;border:1px solid var(--line);border-radius:8px;padding:4px 10px;color:var(--ink)
}
.hint{margin-top:8px;color:var(--muted);font-size:12px}

/* Toolbar only on mobile; filters collapsible on mobile */
@media (min-width:861px){ .results-toolbar{display:none} }
.filters.is-collapsed{ display:none; }

/* LIST CONTAINER */
.bank-section{display:grid;gap:18px}

/* ============= FEATURED (HERO) ============= */
.featured-bank{
  position:relative;background:var(--panel);
  border:3px solid #8b5cf6;border-radius:18px;
  padding:24px 22px 16px; box-shadow:var(--shadow); overflow:visible;max-width:100%;
}

/* Badge — top-right inside */
.badge{
  position:absolute;top:-8px;right:-5px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;font-size:11px;font-weight:900;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  box-shadow:0 10px 20px rgba(16,185,129,.22); z-index:2;
}

/* GRID: logo | info | monthly (wider, centered) | CTA */
.fb-grid{
  display:grid;
  grid-template-columns:
    96px
    minmax(0,1fr)
    minmax(180px,240px)
    minmax(160px,220px);
  column-gap:clamp(16px,3vw,28px);
  align-items:center; min-height:100px; max-width:100%;
}

/* Logo */
.fb-logo{
  width:96px;height:96px;border-radius:14px;background:#f3f4f6;border:1px solid #eef2f7;
  display:grid;place-items:center;overflow:hidden
}
.fb-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fb-logo span{font-weight:900;font-size:28px;color:#111827}

/* Main info */
.fb-main{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.fb-name{margin-bottom:10px;font-size:20px;line-height:1.15;font-weight:900}

/* USPs — refined chips */
.featured-bank .fb-main ul.fb-usps{list-style:none !important;margin:0 !important;padding:0 !important}
.fb-usps{display:flex;gap:8px;align-items:center;align-self:flex-start;margin-top:20px;flex-wrap:wrap}
.fb-usps li{
  list-style:none !important;margin:0 !important;
  flex:0 0 auto;white-space:nowrap;
  background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-fg);
  font-weight:600;font-size:12px;line-height:1;padding:6px 10px;border-radius:10px
}

/* Monthly estimate (centered) */
.fb-monthbox{
  align-self:stretch; max-width:240px;width:100%;
  background:#f5f7fb;border:1px solid #eef2f7;border-radius:12px;
  padding:10px 12px;margin-inline:8px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;
  text-align:center;justify-self:center;
}
.fb-monthbox .label{font-size:11px;color:#475569;text-transform:uppercase;letter-spacing:.04em}
.fb-monthbox .value{font-weight:900;font-size:18px;line-height:1}
.fb-monthbox .note{font-size:10px;line-height:1.25;color:#6b7280}

/* CTA — right column */
.fb-stats{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;min-height:100%}
.btn-cta{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;
  border-radius:12px;padding:12px 18px;box-shadow:0 12px 26px rgba(109,40,217,.24);
  transition:filter .15s ease, transform .05s ease, box-shadow .2s ease; max-width:100%;
}
.btn-cta:hover{filter:brightness(.92)}
.btn-cta:active{filter:brightness(.88)}

/* hide legacy elements if present */
.fb-rate,.fb-monthly,.bc-rate,.bc-monthly{display:none !important}

/* ============= OTHER BANKS LIST ============= */
.bank-list{display:grid;gap:14px}
.bank-card{
  background:#fff;border:1.5px solid #e6e2ff;border-radius:14px;padding:16px 18px;
  display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;max-width:100%;
}
.bank-card.dim{opacity:.92}
.bc-logo{
  width:64px;height:64px;border-radius:12px;background:#f3f4f6;border:1px solid #eef2f7;
  display:grid;place-items:center;overflow:hidden
}
.bc-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bc-logo span{font-weight:900;font-size:20px}
.bc-name{font-weight:900;font-size:18px;margin:0}

/* USPs in list */
.bank-card .bc-usps{
  list-style:none !important;margin:8px 0 0 !important;padding:0 !important;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
.bc-usps li{
  list-style:none !important;margin:0 !important;
  flex:0 0 auto;white-space:nowrap;
  background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-fg);
  font-weight:600;font-size:12px;line-height:1;padding:6px 10px;border-radius:10px
}

/* CTA cell */
.bc-cta{display:flex;justify-content:flex-end;align-self:center}
.bc-cta .btn-cta{padding:10px 14px;border-radius:10px}

/* RESPONSIVE */
@media (max-width:1020px){
  .fb-grid{
    grid-template-columns:
      88px
      minmax(0,1fr)
      minmax(160px,220px)
      minmax(150px,200px);
  }
  .fb-logo{width:88px;height:88px}
}

@media (max-width:860px){
  /* Featured collapses; CTA full-width at bottom */
  .fb-grid{grid-template-columns:80px minmax(0,1fr); column-gap:16px}
  .fb-logo{width:80px;height:80px}
  .fb-monthbox{grid-column:1 / -1;margin-top:10px;max-width:none}
  .fb-stats{grid-column:1 / -1;justify-content:stretch;margin-top:10px}
  .btn-cta{width:100%}
}

/* MOBILE LAYOUT for OTHER BANKS
   - Two columns: logo | body
   - CTA moves to its own full-width row at the bottom
   - Chips wrap and shrink slightly for better fit */
@media (max-width:760px){
  .bank-card{
    grid-template-columns:48px 1fr;
    grid-template-areas:
      "logo body"
      "cta  cta";
    align-items:flex-start;
    gap:12px;
  }
  .bank-card > .bc-logo{
    grid-area:logo; width:48px; height:48px;
  }
  .bank-card > div:nth-child(2){
    grid-area:body; min-width:0; display:flex; flex-direction:column; gap:6px;
  }
  .bc-name{font-size:16px}
  .bc-usps{gap:6px; margin-top:2px}
  .bc-usps li{font-size:11px; padding:5px 8px}

  .bank-card > .bc-cta{
    grid-area:cta; margin-top:6px; justify-content:stretch;
  }
  .bc-cta .btn-cta{
    width:100%; padding:12px 14px; border-radius:10px;
  }
}