/* v0.8: layout variations only; never override the three brand colors */
.bb8-home-shell {overflow:clip}
.bb8-home-shell .section {padding-top:64px;padding-bottom:64px}
.bb8-home-shell .bb-center-heading {margin-bottom:36px}
.bb8-home-shell .container {max-width:1160px}
.bb8-layout-bridge .bb-top-ranking {gap:22px}
/* Magazine: immersive featured stories, image-first article grid. */
.bb8-layout-magazine .bb-hero-slider,.bb8-layout-magazine .hero {max-width:1340px;margin:20px auto 0;border-radius:12px;overflow:hidden}
.bb8-layout-magazine .cards-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bb8-layout-magazine .cards-grid > :first-child {grid-column:span 2}
.bb8-layout-magazine .cards-grid img {width:100%;object-fit:cover;aspect-ratio:16/10}
.bb8-layout-magazine .section.alt {background:var(--bb-surface,#f6f8f8)}
/* Portal: dense, scannable lists with compact modules. */
.bb8-layout-portal .section {padding-top:40px;padding-bottom:40px}
.bb8-layout-portal .bb-center-heading {text-align:left;margin-bottom:20px}
.bb8-layout-portal .cards-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bb8-layout-portal .bb-top-ranking {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bb8-layout-portal .bb-feature-row {margin-bottom:14px}
/* Corporate: generous whitespace, service-point panels, restrained ranking. */
.bb8-layout-corporate .section {padding-top:86px;padding-bottom:86px}
.bb8-layout-corporate .bb-intro {max-width:1000px;margin:auto}
.bb8-layout-corporate .point-grid > * {border-top:3px solid var(--bb-primary,var(--accent));padding:30px 24px}
.bb8-layout-corporate .bb-top-ranking {max-width:980px;margin:auto}
.bb8-layout-corporate .bb-center-heading h2 {font-weight:650;letter-spacing:.035em}
/* Landing page: narrower narrative, prominent CTAs and review cards. */
.bb8-layout-landing .section .container {max-width:980px}
.bb8-layout-landing .hero-inner,.bb8-layout-landing .bb-slide-text {max-width:860px}
.bb8-layout-landing .bb-feature-row {box-shadow:0 12px 32px rgba(0,0,0,.075);padding:22px;margin:22px 0;border-radius:12px;background:#fff}
.bb8-layout-landing .bb-feature-row .button {min-width:190px;text-align:center}
.bb8-layout-landing .point-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.bb8-layout-landing .bb-top-ranking {max-width:960px;margin:auto}
@media(max-width:900px){
 .bb8-layout-magazine .cards-grid,.bb8-layout-portal .cards-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .bb8-layout-portal .bb-top-ranking {grid-template-columns:repeat(2,minmax(0,1fr))}
 .bb8-layout-corporate .section {padding-top:60px;padding-bottom:60px}
}
@media(max-width:640px){
 .bb8-home-shell .section,.bb8-layout-corporate .section {padding-top:42px;padding-bottom:42px}
 .bb8-layout-magazine .cards-grid,.bb8-layout-portal .cards-grid,.bb8-layout-portal .bb-top-ranking,.bb8-layout-landing .point-grid {grid-template-columns:1fr}
 .bb8-layout-magazine .cards-grid > :first-child {grid-column:auto}
 .bb8-layout-landing .bb-feature-row {padding:14px}
}

/* v0.9: unmistakable changes in structure even when no articles are published */
.bb9-layout-intro {position:relative;isolation:isolate;padding:72px 0;background:var(--bb-surface,#f2f5f5)}
.bb9-intro-inner {max-width:1100px;margin:0 auto}
.bb9-eyebrow {display:block;color:var(--bb-primary,var(--accent));font-size:12px;font-weight:800;letter-spacing:.2em;margin-bottom:12px}
.bb9-layout-intro h1 {font-size:clamp(28px,4vw,50px);margin:0 0 14px;line-height:1.4}
.bb9-layout-intro p {max-width:650px;margin:0;font-size:16px}
.bb8-layout-magazine .bb9-layout-intro {background:linear-gradient(125deg,var(--bb-surface,#f2f5f5),#fff);border-bottom:8px solid var(--bb-primary,var(--accent));text-align:center}
.bb8-layout-magazine .bb9-layout-intro p {margin:auto}
.bb8-layout-magazine .bb-hero-slider,.bb8-layout-magazine .hero {min-height:310px;max-width:1100px;border-radius:14px;margin:30px auto}
.bb8-layout-portal .bb9-layout-intro {padding:30px 0;border-left:12px solid var(--bb-primary,var(--accent))}
.bb8-layout-portal .bb9-layout-intro h1{font-size:32px}
.bb8-layout-portal .bb-hero-slider,.bb8-layout-portal .hero {min-height:220px;max-height:320px;overflow:hidden}
.bb8-layout-portal .bb-slide {min-height:280px!important}
.bb8-layout-corporate .bb9-layout-intro {background:var(--bb-primary,var(--accent));color:#fff;padding:90px 0}
.bb8-layout-corporate .bb9-eyebrow {color:#fff;opacity:.8}
.bb8-layout-corporate .bb-hero-slider,.bb8-layout-corporate .hero {min-height:240px;max-height:340px;overflow:hidden}
.bb8-layout-landing .bb9-layout-intro {background:linear-gradient(115deg,var(--bb-surface,#f2f5f5),#fff);padding:100px 0;text-align:center}
.bb8-layout-landing .bb9-layout-intro p {margin:auto}
.bb8-layout-landing .bb9-layout-intro h1 {font-size:clamp(36px,5vw,62px)}
.bb8-layout-landing .bb-hero-slider,.bb8-layout-landing .hero {max-width:980px;margin:0 auto;min-height:330px}
/* Colors remain driven by the user's three primary theme colors. */
@media(max-width:640px){.bb9-layout-intro{padding:45px 0!important}.bb9-layout-intro h1{font-size:28px!important}.bb8-layout-magazine .bb-hero-slider,.bb8-layout-magazine .hero{margin:12px!important}}