/* Compact image cards, matching the reviewed visual direction. */
.family-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;grid-auto-rows:1fr}
.family-card,.family-card:first-child{grid-column:auto;min-height:0;padding:14px 14px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #dfe5ec;border-radius:20px}
.family-photo{width:100%;height:auto;aspect-ratio:2.48;object-fit:cover;border-radius:12px;margin-bottom:20px}
.family-card h3{max-width:none;margin:0 8px 10px;font-size:23px;line-height:1.25}
.family-card p{margin:0 8px 18px;font-size:15px;line-height:1.5}
.family-link-label{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:700;color:var(--blue)}
.family-link-label span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--green);font-size:18px}
.brand-logo{transition:filter .2s,opacity .2s}
.brand:hover .brand-logo,.brand:focus .brand-logo{filter:none;opacity:1}
.brand:hover .brand-logo-dark,.brand:focus .brand-logo-dark{filter:brightness(0);opacity:1}
.brand[hidden],.subfamily[hidden],.catalogue-family[hidden]{display:none}
@media(max-width:900px){.family-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.family-card h3{font-size:21px}}
@media(max-width:560px){.family-overview{grid-template-columns:1fr}.family-card{min-height:0}.family-photo{aspect-ratio:2.3}}
@media(hover:none){.brand-logo{filter:none;opacity:1}.brand-logo-dark{filter:brightness(0)}}

.brand-text-label{font-weight:700;font-size:13px;color:var(--blue);flex:0 1 90px;overflow-wrap:anywhere}

/* Two views: visual category landing and selected catalogue detail. */
.family-overview[hidden],.catalogue[hidden]{display:none}
.catalogue-searchbar{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.catalogue-searchbar .search-box{flex:1;max-width:760px}
.catalogue-searchbar .filter-button{flex-shrink:0}
.catalogue-heading{grid-template-columns:1fr}
.catalogue-back{margin-bottom:28px}
.catalogue{padding-top:48px}
@media(max-width:560px){.catalogue-searchbar{align-items:stretch;flex-wrap:wrap}.catalogue-searchbar .search-box{flex:1 1 100%}.catalogue-searchbar .filter-button{margin-left:auto}}

/* Category shortcuts appear only inside the detail view. */
.detail-family-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.detail-family-nav .filter-button{white-space:normal;max-width:100%;min-height:44px}
.detail-family-nav .filter-button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media(max-width:560px){.detail-family-nav{gap:7px}.detail-family-nav .filter-button{font-size:12px;padding:10px 13px}}

/* Center the global search and reset as one group below the introduction. */
.catalogue-searchbar{justify-content:center}
@media(max-width:560px){.catalogue-searchbar .filter-button{margin-left:0}}

/* A concise, centered lifecycle introduction above the global search. */
.intro{grid-template-columns:1fr;gap:24px;text-align:center;align-items:center;padding-bottom:32px}
.intro>div,.intro>p{max-width:920px;margin-inline:auto}
.intro h2{max-width:820px;margin-inline:auto}
.technology-lifecycle{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.technology-lifecycle li{font-size:13px;font-weight:700;color:var(--blue);background:#f2f6f8;border:1px solid #dfe5ec;border-radius:999px;padding:9px 14px}
@media(max-width:560px){.intro{gap:20px}.intro p{font-size:16px;line-height:1.65}.technology-lifecycle{gap:8px}.technology-lifecycle li{font-size:12px;padding:8px 11px}}