/* ==========================================================================
   Page banner and breadcrumb

   The compact header band every inner hub opens with, and the breadcrumb above
   it. Shared rather than page-specific: /products/ and /solutions/ both use it,
   and so will every hub after them.

   Deliberately light and short. The homepage earns its dark full-height hero by
   being the homepage; an inner hub gets a band that states the page and moves
   on. Padding follows the homepage's 48 / 64 / 80 band rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb{margin-bottom:20px}
.breadcrumb__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font:400 12px/16px var(--ps-font);letter-spacing:.02em;
}
.breadcrumb__item{display:flex;align-items:center;gap:8px}
/* the separator is generated, so it is never read out as content */
.breadcrumb__item + .breadcrumb__item::before{
  content:"";flex:none;
  width:5px;height:5px;
  border-right:1px solid var(--ps-color-neutral-2-500);
  border-top:1px solid var(--ps-color-neutral-2-500);
  rotate:45deg;
}
.breadcrumb__link{color:var(--ps-color-secondary-5-500);transition:color .2s ease-out}
.breadcrumb__link:hover,.breadcrumb__link:focus-visible{color:var(--ps-color-brand-500)}
.breadcrumb__current{color:var(--ps-color-neutral-2-900)}

/* --------------------------------------------------------------------------
   §1 Banner — a compact header band, not a hero

   Deliberately light and short. The homepage earns its dark full-height hero by
   being the homepage; an inner hub gets a band that states the page and moves
   on.
   -------------------------------------------------------------------------- */
.page-banner{
  background:var(--sv-white);
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  padding-block:32px 48px;
}
.page-banner__cell{grid-column-end:span var(--ps-grid-columns)}
.page-banner__title{
  color:var(--ps-color-neutral-3-500);
  margin:0 0 20px;
  max-width:18ch;
}
.page-banner__body{
  color:var(--ps-color-secondary-5-500);
  max-width:62ch;margin:0 0 28px;
}
.page-banner__body p{margin:0}
.page-banner__ctas{display:flex;flex-wrap:wrap;gap:16px}

@media (min-width:640px){
  .page-banner{padding-block:40px 64px}
}
@media (min-width:1024px){
  .page-banner{padding-block:48px 80px}
  .page-banner__cell{grid-column-end:span 10}
  .page-banner__title{margin-bottom:24px}
}
@media (min-width:1350px){
  .page-banner__cell{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .breadcrumb__link{transition:none}
}