/* Brand · Business HQ: real screens on the left, what the business side does on the right. */
.brand-biz { padding-block: 90px 50px; }
.bb-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 34px; }
.bb-shot { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #e6b06d40; background: #0b0806; box-shadow: 0 30px 80px #000a; }
.bb-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; transition: opacity .25s; }
.bb-shot img.swap { opacity: 0; }
.bb-shot figcaption { padding: 12px 16px; font-size: 12px; color: #d8b590; background: #120c07; }
.bb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bb-tabs button { font: 700 12px/1 'Segoe UI', Arial, sans-serif; border-radius: 999px; padding: 9px 14px; cursor: pointer; border: 1px solid #e6b06d66; background: transparent; color: #f6e6d2; }
.bb-tabs button[aria-pressed="true"] { background: #e6b06d; border-color: #e6b06d; color: #1b1007; }
.bb-tabs button:focus-visible, #bb-demo:focus-visible { outline: 2px solid #ffe1a8; outline-offset: 2px; }
.bb-points { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 12px; }
.bb-points li { padding-left: 16px; border-left: 2px solid #e6b06d66; line-height: 1.55; }
.bb-points b { color: #ffe1a8; }
/* In the demo stage, Business HQ screens keep their header and left edge in view */
.center-media .center-still[src*="/brand-"] { object-position: left top; background: #0b0806; }
@media (max-width: 900px) { .bb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bb-shot img { transition: none; } }