/* ALL for Creators brand kit: the badges on their own backgrounds, the downloads and the rules. One surface per block, never a card inside a card. */
.br-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(16px, 3vw, 32px); }
.br-hero .lede { margin: 18px 0 0; max-width: 640px; color: var(--ink-2); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; }
.br-all { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.br-all small { color: var(--muted); font-size: 14px; }
.br-group { padding: clamp(20px, 3.5vw, 40px) 0 0; }
.br-group h2 { margin: 0 0 6px; }
.br-group > .wrap > p { margin: 0 0 20px; max-width: 640px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.br-grid { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
@media (min-width: 720px) { .br-grid { grid-template-columns: 1fr 1fr; } }
.br-item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.br-stage { display: grid; place-items: center; min-height: 148px; padding: 24px 12px; border-radius: 18px; overflow: hidden; }
.br-stage.on-light { background: #f6f0e3; }
.br-stage.on-dark { background: #1f2c52; }
.br-stage img { display: block; max-width: 100%; height: auto; }
.br-name { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.br-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.br-actions .btn { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.br-code { font-size: 13.5px; color: var(--muted); }
.br-code summary { cursor: pointer; }
.br-code pre { margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); white-space: pre-wrap; word-break: break-all; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); user-select: all; }
.br-rules { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 88px); }
.br-rules ul { margin: 14px 0 0; padding: 0; list-style: none; max-width: 700px; display: grid; gap: 0; }
.br-rules li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.br-rules li:last-child { border-bottom: 1px solid var(--line); }
.br-back { margin: 18px 0 0; font-size: 14.5px; }
.br-back a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }