/* ============================================================
   Main Cluster Hub — design v2
   Loaded AFTER cd-hub.css for hubs whose registry entry says
   'design' => 'v2'. Overrides only what v2 changes; everything
   else still comes from cd-hub.css.
   ============================================================ */

.cd-hub{
  /* v2 tile palette, in slot order, taken from the mockup */
  /* v2 tile palette. The mockup's swatches are bright: white body copy on the
     raw values measured 2.31-4.27:1, under the 4.5:1 the brief requires. Each
     hue is kept but taken down to the lightest shade that still clears 4.5:1
     at the TOP of the gradient, since a v2 tile is short and the text sits
     across the whole fill rather than only over the dark end. */
  --v2-s1:#d6394a; --v2-s1d:#a5202f;  /* 4.62 / 7.37 */
  --v2-s2:#b06105; --v2-s2d:#8f4e00;  /* 4.61 / 6.45 */
  --v2-s3:#6e52c9; --v2-s3d:#4a2f9e;  /* 5.66 / 9.58 */
  --v2-s4:#0d8078; --v2-s4d:#0a6a62;  /* 4.80 / 6.46 */
  --v2-s5:#1a6bc8; --v2-s5d:#0f4f9e;  /* 5.28 / 7.98 */
  --v2-s6:#2f4bbf; --v2-s6d:#22368f;  /* 7.29 / 10.54 */
}

/* ---------------- hero: white, illustration right ---------------- */
.cd-hub .cd-hero{
  background:#fff; color:var(--cd-text);
  padding:26px 0 8px; overflow:visible;
}
.cd-hub .cd-hero__visual{
  width:44%; background-size:contain; background-repeat:no-repeat;
  background-position:center right; background-image:none; opacity:1;
  top:8px; bottom:8px;
}
.cd-hub .cd-hero__copy{width:min(560px,54%)}
.cd-hub .cd-hero h1{color:var(--cd-text); font-size:clamp(30px,3.4vw,42px)}
.cd-hub .cd-hero__lede{color:var(--cd-text-muted); font-size:15px}
.cd-hub .cd-crumbs{color:var(--cd-text-muted)}
.cd-hub .cd-crumbs a{color:var(--cd-text-muted)}
.cd-hub .cd-crumbs a:hover{color:var(--cd-blue)}
.cd-hub .cd-crumbs [aria-current]{color:var(--cd-text); font-weight:600}

/* ---------------- search: static card, not floating ---------------- */
.cd-hub .cd-searchwrap{margin-top:14px}
.cd-hub .cd-search{
  box-shadow:var(--cd-shadow-card); border:1px solid var(--cd-border);
  padding:14px; gap:12px;
}
.cd-hub .cd-chips a{background:#fff; border-color:var(--cd-border)}

/* ---------------- quick tiles: icon plate, centred, no body copy ---------------- */
.cd-hub .cd-tiles{gap:12px; margin-top:26px}
.cd-hub .cd-tile{
  min-height:0; padding:20px 14px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.cd-hub .cd-tile::after{display:none}
.cd-hub .cd-tile p{display:none}
.cd-hub .cd-tile svg{width:22px; height:22px}
.cd-hub .cd-tile__plate{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.22); margin-bottom:12px;
}
.cd-hub .cd-tile h3{margin:0 0 12px; font-size:15px; line-height:1.25}
.cd-hub .cd-tile__arrow{
  position:static; width:20px; height:20px; font-size:11px;
  background:rgba(255,255,255,.28); color:#fff; margin-top:auto;
}
.cd-hub .cd-tile--slot1{background:linear-gradient(180deg,var(--v2-s1),var(--v2-s1d))}
.cd-hub .cd-tile--slot2{background:linear-gradient(180deg,var(--v2-s2),var(--v2-s2d))}
.cd-hub .cd-tile--slot3{background:linear-gradient(180deg,var(--v2-s3),var(--v2-s3d))}
.cd-hub .cd-tile--slot4{background:linear-gradient(180deg,var(--v2-s4),var(--v2-s4d))}
.cd-hub .cd-tile--slot5{background:linear-gradient(180deg,var(--v2-s5),var(--v2-s5d))}
.cd-hub .cd-tile--slot6{background:linear-gradient(180deg,var(--v2-s6),var(--v2-s6d))}

/* ---------------- section headings sit left ---------------- */
.cd-hub .cd-head{text-align:left; margin-bottom:18px}
.cd-hub .cd-head h2{font-size:22px}
.cd-hub .cd-head p{font-size:13.5px; margin-top:4px}
.cd-hub .cd-section{padding:34px 0}
.cd-hub .cd-section--soft{background:none}

/* ---------------- sub-clusters: centred icon + copy ---------------- */
.cd-hub .cd-subs{gap:12px}
.cd-hub .cd-sub{
  align-items:center; text-align:center; padding:20px 14px 18px;
}
.cd-hub .cd-sub svg{width:30px; height:30px; margin-bottom:10px}
.cd-hub .cd-sub h3{margin:0 0 5px; font-size:14px}
.cd-hub .cd-sub p{font-size:11.5px}
.cd-hub .cd-sub__chev{display:none}

/* ---------------- providers: logo + name only ---------------- */
.cd-hub .cd-entity{padding:18px 10px 16px; justify-content:center}
.cd-hub .cd-entity .cd-badge{display:none}
.cd-hub .cd-entity__link{display:none}
.cd-hub .cd-entity h3{min-height:0; font-size:12.5px; margin-top:10px; display:block}
.cd-hub .cd-entity__logo{width:52px; height:52px; margin:0}
.cd-hub .cd-entity__logo img,.cd-hub .cd-entity__logo svg{width:52px; height:52px}

/* ---------------- routes: eight across, icon + title ---------------- */
.cd-hub .cd-routes,.cd-hub .cd-routes--six{grid-template-columns:repeat(8,1fr); gap:10px}
.cd-hub .cd-route{align-items:center; text-align:center; padding:18px 10px}
.cd-hub .cd-route__top{justify-content:center; width:auto}
.cd-hub .cd-route .cd-badge{display:none}
.cd-hub .cd-route p{display:none}
.cd-hub .cd-route .cd-btn{display:none}
.cd-hub .cd-route__ico{border:0; background:none; width:32px; height:32px}
.cd-hub .cd-route__ico svg{width:26px; height:26px}
.cd-hub .cd-route h3{margin:10px 0 0; font-size:12.5px; line-height:1.3}

/* ---------------- capabilities: icon left, text right ---------------- */
.cd-hub .cd-caps{grid-template-columns:repeat(3,1fr); gap:12px}
.cd-hub .cd-cap{display:flex; gap:12px; align-items:flex-start; padding:16px}
.cd-hub .cd-cap__ico{flex:none; margin:0; width:36px; height:36px}
.cd-hub .cd-cap h3{font-size:13px; margin-bottom:4px}

/* ---------------- list modules: view-all at the foot ---------------- */
.cd-hub .cd-list__head{border-bottom:1px solid var(--cd-border)}
.cd-hub .cd-list__head h2{font-size:15.5px; display:flex; align-items:center; gap:8px}
.cd-hub .cd-list__head a{display:none}
.cd-hub .cd-list li a{grid-template-columns:1fr auto; font-size:13px; padding:11px 16px}
.cd-hub .cd-list li svg{display:none}
.cd-hub .cd-list__foot{padding:12px 16px; border-top:1px solid var(--cd-border)}
.cd-hub .cd-list__foot a{color:var(--cd-blue); font-size:12.5px; font-weight:700}
.cd-hub .cd-list__foot a:hover{text-decoration:underline}

/* ---------------- steps ---------------- */
.cd-hub .cd-steps{gap:12px}
.cd-hub .cd-step{flex-direction:column; align-items:center; text-align:center; gap:8px; padding:18px 12px}
.cd-hub .cd-step:not(:last-child)::after{content:"›"; right:-9px; color:var(--cd-blue)}
.cd-hub .cd-step__n{width:26px; height:26px; font-size:12px}

/* ---------------- FAQ ---------------- */
.cd-hub .cd-faqs{gap:10px 14px}
.cd-hub .cd-faq__q{font-size:13px}

/* ---------------- bottom CTA: centred ---------------- */
.cd-hub .cd-cta__inner{
  flex-direction:column; align-items:center; text-align:center; gap:14px; padding:34px 0;
}
.cd-hub .cd-cta__left{flex-direction:column; align-items:center; gap:12px}
.cd-hub .cd-cta h2{font-size:26px}
.cd-hub .cd-cta p{font-size:14px}
.cd-hub .cd-cta__btns{justify-content:center}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .cd-hub .cd-hero__visual{display:none}
  .cd-hub .cd-hero__copy{width:100%}
  .cd-hub .cd-routes,.cd-hub .cd-routes--six{grid-template-columns:repeat(4,1fr)}
  .cd-hub .cd-caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .cd-hub .cd-tiles{grid-template-columns:repeat(2,1fr)}
  .cd-hub .cd-routes,.cd-hub .cd-routes--six{grid-template-columns:repeat(2,1fr)}
  .cd-hub .cd-caps{grid-template-columns:1fr}
  .cd-hub .cd-hero h1{font-size:27px}
}


/* ---- Breadcrumb on a white hero ----
   cd-hub.css colours crumb links rgba(255,255,255,.85) for the v1 navy hero,
   at a higher specificity than the v2 rule above. On the v2 white hero that
   rendered the Home and Banks links white-on-white, i.e. invisible. Matching
   that specificity puts them back. */
body.cd-sw .page-content .cd-hub .cd-crumbs a,
body .cd-hub .cd-crumbs a{color:var(--cd-text-muted)}
body.cd-sw .page-content .cd-hub .cd-crumbs a:hover,
body .cd-hub .cd-crumbs a:hover{color:var(--cd-blue); text-decoration:underline}
body .cd-hub .cd-crumbs{color:var(--cd-text-muted)}
body .cd-hub .cd-crumbs [aria-current]{color:var(--cd-text)}
/* the tile arrow needs to read against the tile fill */
body .cd-hub .cd-tile__arrow{background:rgba(255,255,255,.9); color:var(--cd-text)}


/* Real provider logos on v2: contain, never stretch, no tinted plate. */
.cd-hub .cd-entity__logo--img{background:none; border:0; width:56px; height:40px}
.cd-hub .cd-entity__logo--img img{width:auto; height:auto; max-width:56px; max-height:40px; object-fit:contain}