:root{
  --mb-section-space:var(--mb-space-7);
  --mb-hero-stage-height:26rem;
}
.page-section{padding-block:var(--mb-section-space)}
.page-section-surface{background:var(--mb-surface)}
.page-section-cream{background:var(--mb-cream)}
.page-section-dark{background:var(--mb-ink);color:var(--mb-paper)}
.page-section-orange{background:var(--mb-orange);color:var(--mb-ink)}
.page-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--mb-space-4);
  margin-bottom:3.5rem;
}
.page-section-head-copy{max-width:46rem}
.page-section-head-side{max-width:22rem;margin-bottom:.3rem;color:var(--mb-muted)}
.page-section-dark .page-section-head-side{color:var(--mb-muted-light)}
.page-hero{
  position:relative;
  overflow:hidden;
  padding:5.75rem 0 0;
  background:var(--mb-paper);
}
.page-hero-copy{
  position:relative;
  z-index:3;
  max-width:61rem;
  margin-inline:auto;
  text-align:center;
}
.page-hero-copy .c-eyebrow{justify-content:center}
.page-hero-copy h1{margin-bottom:1.75rem}
.page-hero-copy .mb-lead{max-width:44rem;margin-inline:auto}
.page-hero-copy .mb-cluster,
.page-hero-copy [class*="-actions"]{justify-content:center}
.page-hero-hint{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-top:1.4rem;color:var(--mb-muted);font-size:var(--mb-fs-sm)}
.page-hero-hint i{width:.3rem;height:.3rem;background:var(--mb-orange)}
.page-hero-stage{
  position:relative;
  width:min(calc(100% - 2rem),var(--mb-container));
  height:var(--mb-hero-stage-height);
  margin:3.5rem auto 0;
}
.page-hero-art{
  position:absolute;
  inset:0 6%;
  width:88%;
  height:88%;
  object-fit:contain;
  opacity:.86;
}
.page-hero-card{
  position:absolute;
  z-index:2;
  overflow:hidden;
  border:1px solid var(--mb-line);
  border-radius:var(--mb-radius-md);
  background:var(--mb-surface);
}
.page-hero-card-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--mb-line);
  color:var(--mb-muted);
  font-size:var(--mb-fs-xs);
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(1){left:0;top:2rem;width:20.5rem}
.page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(2){left:50%;top:5.3rem;width:23.75rem;transform:translateX(-50%)}
.page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(3){right:0;top:.5rem;width:20.5rem}
.page-section-dark .c-table,
.page-section-dark .c-compare{color:var(--mb-ink)}
.page-section-dark .c-table td,
.page-section-dark .c-compare-row>div{color:var(--mb-ink);background:var(--mb-paper)}
.page-section-dark .c-table th{background:var(--mb-ink);color:var(--mb-paper)}
.page-section-dark .c-table caption{color:var(--mb-muted-light)}
.page-cta{padding-block:5.5rem;padding-inline:clamp(1.5rem,4vw,4rem);background:var(--mb-ink);color:var(--mb-paper)}
.page-cta-grid,
.page-cta .plans-cta-layout,
.page-cta .access-cta-card,
.page-cta.support-cta,
.page-cta.workloads-cta,
.page-cta.terms-final,
.page-cta .contact-final-card,
.mb-blog-cta__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);align-items:end;gap:clamp(2rem,4vw,4.5rem)}
.page-cta h2{max-width:48rem;margin-bottom:1.3rem;font-size:clamp(2.4rem,4.4vw,3.6rem);color:var(--mb-paper)}
.page-cta p{max-width:42rem;color:var(--mb-muted-light);font-size:var(--mb-fs-lead)}
.page-cta-actions,
.page-cta [class*="cta-actions"],
.page-cta .mb-cluster{display:grid;gap:.65rem;justify-items:stretch}
@media (max-width:960px){
  :root{--mb-hero-stage-height:auto}
  .page-section-head{align-items:flex-start;flex-direction:column}
  .page-hero-stage{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .page-hero-art{position:absolute;inset:0;width:100%;height:100%;opacity:.2}
  .page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(n){position:relative;left:auto;right:auto;top:auto;width:auto;transform:none}
  .page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(2){grid-column:1/-1;grid-row:2}
  .page-cta-grid,
  .page-cta .plans-cta-layout,
  .page-cta .access-cta-card,
  .page-cta.support-cta,
  .page-cta.workloads-cta,
  .page-cta.terms-final,
  .page-cta .contact-final-card,
  .mb-blog-cta__inner{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:620px){
  .page-hero{padding-top:4rem}
  .page-hero-stage{grid-template-columns:1fr}
  .page-hero[data-hero-form="card-collage"] .page-hero-card:nth-of-type(2){grid-column:auto;grid-row:auto}
}
