/* §8 — brand board / visual identity mockup */
.rsg-page .bb-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; padding:18px; }
.rsg-page .bb-wide { grid-column: span 2; }
.rsg-page .bb-cell { background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 16px; }
.rsg-page .bb-cell .bb-lbl { font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; color:var(--ink-500); margin-bottom:11px; }
.rsg-page .bb-logo { grid-row:span 2; display:flex; flex-direction:column; }
.rsg-page .bb-mark { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; background:linear-gradient(135deg,#143E25,#2C7A4B); border-radius:10px; padding:22px 14px; }
.rsg-page .bb-mark .bbm-badge { width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.rsg-page .bb-mark .bbm-badge svg { width:32px; height:32px; }
.rsg-page .bb-mark .bbm-word { font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:0.05em; color:#fff; }
.rsg-page .bb-mark .bbm-sub { font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:#B9F4D0; }
.rsg-page .bb-beforeafter { display:flex; gap:8px; margin-top:11px; }
.rsg-page .bb-ba { flex:1; border:1px solid var(--line-2); border-radius:8px; padding:8px; text-align:center; }
.rsg-page .bb-ba .bbt { font-family:var(--font-mono); font-size:8px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--ink-500); margin-bottom:6px; }
.rsg-page .bb-ba.old .bbm { font-family:'Times New Roman',serif; font-size:15px; color:#9aa3af; text-decoration:line-through; }
.rsg-page .bb-ba.new .bbm { font-family:var(--font-display); font-weight:800; font-size:14px; color:#143E25; }
.rsg-page .bb-swatches { display:flex; gap:7px; }
.rsg-page .bb-sw { flex:1; }
.rsg-page .bb-sw span { display:block; height:34px; border-radius:7px; }
.rsg-page .bb-sw small { display:block; font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.04em; color:var(--ink-500); margin-top:5px; text-align:center; }
.rsg-page .bb-type .bbty-h { font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink-900); line-height:1; }
.rsg-page .bb-type .bbty-b { font-size:11px; color:var(--ink-2); margin-top:6px; line-height:1.4; }
.rsg-page .bb-apply { display:flex; gap:8px; flex-wrap:wrap; }
.rsg-page .bb-apply .bba { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:#143E25; background:#EEF6F0; border:1px solid #CFE6D8; border-radius:999px; padding:5px 11px; }
.rsg-page .bb-apply .bba svg { width:12px; height:12px; color:var(--green-600); }
@media (max-width:640px){ .rsg-page .bb-grid { grid-template-columns:1fr; } .rsg-page .bb-logo { grid-row:auto; } .rsg-page .bb-wide { grid-column:auto; } .rsg-page .bb-swatches { flex-wrap:wrap; } }
/* §8 brand-asset cards — "asset in the wild" vignette (distinct from board + pain-foot) */
.rsg-page .lp-card .lp-vig { display:block; width:100%; margin:2px 0 16px; }
.rsg-page .lp-card .lp-vig svg { display:block; width:100%; height:auto; border-radius:12px; }