/* Slushy Bros living trading cards. Everything inside a card is sized in
   container units (cqw) so the same markup works at 220px and 520px. */

.sbc { --c: #d62828; --c2: var(--c); --ink: #1b2233; --mute: #6c7280; --font-display: 'Fredoka', 'Baloo 2', 'Nunito', sans-serif; --font-logo: 'Lilita One', 'Fredoka', sans-serif; --font-body: 'DM Sans', 'Nunito', system-ui, sans-serif;
    position: relative; width: 100%; max-width: 420px; aspect-ratio: 2 / 3; container-type: inline-size; perspective: 1400px; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--font-body); color: var(--ink); line-height: 1.2; }
.sbc * { box-sizing: border-box; }
.sbc--lg { max-width: 520px; }
.sbc--sm { max-width: 300px; }
.sbc:focus-visible { outline: 3px solid var(--c); outline-offset: 6px; border-radius: 6cqw; }
.sbc-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s ease; }
.sbc.is-hover .sbc-3d { transition: transform 0.08s linear; }
.sbc.is-flipped .sbc-3d { transform: rotateY(calc(180deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }
.sbc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6cqw; overflow: hidden; box-shadow: 0 2.5cqw 6cqw rgba(40, 25, 10, 0.28), 0 0.6cqw 1.2cqw rgba(40, 25, 10, 0.12); background: var(--c); }
.sbc-back { transform: rotateY(180deg); }
.sbc.is-hover .sbc-face { box-shadow: 0 5cqw 10cqw rgba(40, 25, 10, 0.32), 0 0.6cqw 1.2cqw rgba(40, 25, 10, 0.14); }

/* Frame: candy-coloured border with an icy inner edge. */
.sbc-frame { position: absolute; inset: 0; padding: 3.2cqw; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 2cqw; border-radius: 6cqw; background:
    linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 70%, #000) 100%); }
.sbc-frame::before { content: ''; position: absolute; inset: 1.6cqw; border-radius: 4.8cqw; border: 0.5cqw solid rgba(255, 255, 255, 0.55); pointer-events: none; mix-blend-mode: overlay; }
.sbc-frame::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9cqw; background: radial-gradient(14cqw 6cqw at 8% 0, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%), radial-gradient(24cqw 7cqw at 42% 0, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%), radial-gradient(18cqw 6cqw at 80% 0, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); pointer-events: none; opacity: 0.8; }

/* Top bar */
.sbc-top { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw; min-height: 13cqw; }
.sbc-logo { display: grid; justify-items: center; line-height: 0.82; font-family: var(--font-logo); color: #fff; text-shadow: 0 0.4cqw 0 color-mix(in srgb, var(--c) 60%, #000), 0 1cqw 1.6cqw rgba(0, 0, 0, 0.25); transform: rotate(-4deg); padding: 0 1cqw; }
.sbc-logo b { font-size: 4.6cqw; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.sbc-logo b + b { color: #ffe36b; }
.sbc-logo small { font-size: 2.6cqw; letter-spacing: 0.18em; text-transform: uppercase; color: #bfe9ff; margin-top: 0.6cqw; }
.sbc-name { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1.6cqw; align-items: center; padding: 1.4cqw 3cqw 1.4cqw 2cqw; border-radius: 100cqw; background: linear-gradient(180deg, #fff, #f3eef0); box-shadow: inset 0 -0.4cqw 0 rgba(0, 0, 0, 0.08), 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.18); min-width: 0; }
.sbc-name .sbc-cup { grid-row: 1 / 3; width: 5cqw; height: 5cqw; color: var(--c); }
.sbc-name strong { font-family: var(--font-logo); font-weight: 400; font-size: 5.2cqw; line-height: 1; letter-spacing: 0.01em; color: var(--c); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.3cqw 0 rgba(255, 255, 255, 0.9); }
.sbc-name--long strong { font-size: 4.1cqw; }
.sbc-name--long em { font-size: 2.2cqw; }
.sbc-name em { font-style: normal; font-size: 2.5cqw; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-lv { display: grid; justify-items: center; padding: 1.2cqw 2.6cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fff, #ecf3fb); box-shadow: inset 0 -0.4cqw 0 rgba(0, 0, 0, 0.08), 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.18); line-height: 1; }
.sbc-lv small { font-size: 2.4cqw; font-weight: 800; letter-spacing: 0.12em; color: var(--mute); }
.sbc-lv b { font-family: var(--font-logo); font-weight: 400; font-size: 7cqw; color: var(--ink); }
.sbc-cup svg, .sbc-stat i svg, .sbc-type i svg, .sbc-move > i svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* Art window */
.sbc-art { position: relative; z-index: 1; border-radius: 4cqw; overflow: hidden; min-height: 62cqw; background: var(--art, linear-gradient(180deg, #9ad7ff, #dff4ff)) center 45% / cover no-repeat; box-shadow: inset 0 0 0 0.8cqw rgba(255, 255, 255, 0.7), inset 0 -8cqw 10cqw rgba(0, 0, 0, 0.12); isolation: isolate; }
.sbc-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%); }
.sbc-portrait { position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; max-width: 64%; object-fit: contain; object-position: bottom; transform: translateX(-50%); filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, 0.3)); z-index: 1; }
.sbc-ice { position: absolute; left: 0; right: 0; bottom: 0; height: 9cqw; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(230, 246, 255, 0.85) 100%); z-index: 2; pointer-events: none; }
.sbc-ice::after { content: ''; position: absolute; inset: auto 0 0; height: 3cqw; background: radial-gradient(3cqw 2.2cqw at 10% 100%, rgba(255, 255, 255, 0.95) 60%, transparent 62%), radial-gradient(4cqw 2.6cqw at 32% 100%, rgba(255, 255, 255, 0.95) 60%, transparent 62%), radial-gradient(3.4cqw 2.2cqw at 55% 100%, rgba(255, 255, 255, 0.95) 60%, transparent 62%), radial-gradient(4cqw 2.6cqw at 78% 100%, rgba(255, 255, 255, 0.95) 60%, transparent 62%), radial-gradient(3cqw 2cqw at 95% 100%, rgba(255, 255, 255, 0.95) 60%, transparent 62%); }
.sbc-type { position: absolute; top: 3cqw; left: 3cqw; z-index: 3; display: grid; justify-items: center; gap: 0.8cqw; }
.sbc-type i { display: grid; place-items: center; width: 11cqw; height: 11cqw; padding: 2.4cqw; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 70%); border: 0.7cqw solid #fff; box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.25); }
.sbc-type span { font-size: 2.4cqw; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: #fff; padding: 0.7cqw 1.8cqw; border-radius: 100cqw; box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.18); }
.sbc-stats { position: absolute; right: 2.6cqw; top: 50%; transform: translateY(-50%); z-index: 3; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; width: 30cqw; }
.sbc-stat { --s: #ff5a8a; position: relative; display: grid; grid-template-columns: 7cqw 1fr auto; align-items: center; gap: 1.2cqw; padding: 0.8cqw 1cqw 0.8cqw 0.8cqw; border-radius: 100cqw; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 250, 0.98)); border: 0.5cqw solid var(--s); box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.22); }
.sbc-stat i { display: grid; place-items: center; width: 7cqw; height: 7cqw; padding: 1.4cqw; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s) 55%, #fff), var(--s) 70%); box-shadow: inset 0 -0.4cqw 0 rgba(0, 0, 0, 0.15); }
.sbc-stat b { font-family: var(--font-logo); font-weight: 400; font-size: 3.4cqw; letter-spacing: 0.04em; color: var(--s); -webkit-text-stroke: 0.2cqw color-mix(in srgb, var(--s) 60%, #000); }
.sbc-stat span { font-family: var(--font-display); font-weight: 700; font-size: 4.2cqw; color: var(--ink); min-width: 8cqw; text-align: right; padding-right: 0.6cqw; }
.sbc-stat .sbc-up { position: absolute; right: -1cqw; top: -2.2cqw; font-style: normal; font-size: 2.2cqw; font-weight: 800; color: #fff; background: #2aa84a; padding: 0.4cqw 1cqw; border-radius: 100cqw; box-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.2); }
.sbc-stat--hp { --s: #ff4f7e; } .sbc-stat--atk { --s: #ff7a1a; } .sbc-stat--def { --s: #2b7de9; } .sbc-stat--spd { --s: #22b573; } .sbc-stat--spc { --s: #9a4de8; }
.sbc-stamp { position: absolute; left: 3cqw; bottom: 3.6cqw; z-index: 3; width: 17cqw; height: 17cqw; border-radius: 50%; overflow: hidden; border: 0.8cqw solid #fff; background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--c) 45%, #fff), #fff 75%); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.3); }
.sbc-stamp img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.6) translateY(16%); }
.sbc-stamp i { position: absolute; right: 0.6cqw; top: 0.6cqw; font-style: normal; font-size: 4cqw; color: #ffd400; text-shadow: 0 0.3cqw 0 #c98a00; }

/* Abilities */
.sbc-moves, .sbc-desc { position: relative; z-index: 1; border-radius: 3.6cqw; padding: 4.4cqw 2.4cqw 2.4cqw; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)); box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.8), 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.12); display: grid; gap: 1.6cqw; }
.sbc-moves h4, .sbc-desc h4 { position: absolute; top: -2.4cqw; left: 50%; transform: translateX(-50%); margin: 0; padding: 1cqw 5cqw; border-radius: 100cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); color: #fff; font-family: var(--font-logo); font-weight: 400; font-size: 3.6cqw; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.2), inset 0 0.4cqw 0 rgba(255, 255, 255, 0.35); }
.sbc-move { display: grid; grid-template-columns: 9cqw 1fr auto; align-items: center; gap: 2cqw; padding: 1.4cqw 2cqw 1.4cqw 1.4cqw; border-radius: 100cqw; background: linear-gradient(180deg, #fff, #f6f0f1); border: 0.4cqw solid color-mix(in srgb, var(--c) 28%, #fff); min-height: 11cqw; }
.sbc-move > i { display: grid; place-items: center; width: 9cqw; height: 9cqw; padding: 2cqw; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%); box-shadow: inset 0 -0.4cqw 0 rgba(0, 0, 0, 0.15); }
.sbc-move div { min-width: 0; display: grid; gap: 0.4cqw; }
.sbc-move strong { font-family: var(--font-display); font-weight: 700; font-size: 3.9cqw; line-height: 1.05; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-move em { font-style: normal; font-size: 2.7cqw; line-height: 1.25; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sbc-pwr { display: inline-flex; align-items: baseline; gap: 0.8cqw; font-family: var(--font-display); font-weight: 700; font-size: 4cqw; color: var(--ink); white-space: nowrap; }
.sbc-pwr small { font-size: 2.3cqw; font-weight: 800; letter-spacing: 0.1em; color: #fff; background: var(--c); padding: 0.5cqw 1.2cqw; border-radius: 1cqw; transform: skewX(-8deg); }
.sbc-move--none { opacity: 0.8; }

/* Description */
.sbc-desc p { margin: 0; font-size: 3cqw; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sbc-lines { list-style: none; margin: 0; padding: 1cqw 0 0; display: grid; gap: 0.4cqw; border-top: 0.3cqw dashed color-mix(in srgb, var(--c) 30%, #fff); }
.sbc-lines li { font-size: 2.6cqw; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-lines li::before { content: '•'; margin-right: 1cqw; color: var(--c); }

/* Footer */
.sbc-foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 0 1cqw; font-size: 2.4cqw; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 0.3cqw 0 rgba(0, 0, 0, 0.2); }
.sbc-foot span:last-child { text-align: right; }
.sbc-foot .sbc-cup { width: 4cqw; height: 4cqw; color: #fff; opacity: 0.9; }

/* Holo shimmer */
.sbc-holo { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 6cqw; opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(60cqw 60cqw at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%), linear-gradient(115deg, transparent 20%, rgba(255, 0, 128, 0.35) 35%, rgba(0, 255, 255, 0.35) 45%, rgba(255, 255, 0, 0.35) 55%, transparent 70%); background-position: var(--mx, 50%) var(--my, 50%); transition: opacity 0.3s ease; }
.sbc.is-hover .sbc-holo { opacity: 0.9; }
.sbc--rare .sbc-holo, .sbc--epic .sbc-holo, .sbc--legendary .sbc-holo { opacity: 0.35; mix-blend-mode: overlay; }
.sbc--legendary .sbc-frame::before { border-color: #ffe36b; mix-blend-mode: normal; box-shadow: 0 0 2cqw rgba(255, 227, 107, 0.7); }
.sbc--epic .sbc-frame::before { border-color: #e7c8ff; }

/* Prints: the frame takes the rarity colour, the bro keeps the name, badge, stamp and art tint. */
.sbc.has-rarity .sbc-frame { background: linear-gradient(160deg, color-mix(in srgb, var(--r) 82%, #fff) 0%, var(--r) 40%, color-mix(in srgb, var(--r) 70%, #000) 100%); }
.sbc.has-rarity .sbc-moves h4, .sbc.has-rarity .sbc-desc h4, .sbc.has-rarity .sbc-pwr small, .sbc.has-rarity .sbc-raw b { background: linear-gradient(180deg, color-mix(in srgb, var(--r) 85%, #fff), var(--r)); }
.sbc.has-rarity .sbc-logo { text-shadow: 0 0.4cqw 0 color-mix(in srgb, var(--r) 60%, #000), 0 1cqw 1.6cqw rgba(0, 0, 0, 0.25); }
.sbc.has-rarity .sbc-name em { color: var(--r); }
.sbc.has-rarity .sbc-btn { color: var(--r); }
.sbc--legendary.has-rarity .sbc-frame { background: linear-gradient(160deg, #ffe9a3 0%, #f2b705 35%, #c47d00 70%, #7a4a00 100%); }
.sbc--legendary.has-rarity .sbc-frame::before { border-color: #fff4c2; box-shadow: 0 0 2.4cqw rgba(255, 227, 107, 0.9), inset 0 0 2cqw rgba(255, 244, 194, 0.6); }
.sbc--foil .sbc-holo { opacity: 0.55; mix-blend-mode: color-dodge; background: radial-gradient(70cqw 70cqw at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(115deg, rgba(255, 0, 128, 0.35) 0 6cqw, rgba(0, 229, 255, 0.35) 6cqw 12cqw, rgba(255, 230, 0, 0.35) 12cqw 18cqw, rgba(0, 255, 140, 0.35) 18cqw 24cqw); }
.sbc--foil.is-hover .sbc-holo { opacity: 0.85; }
.sbc--foil .sbc-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0) 62%); mix-blend-mode: screen; }

/* Sealed (unreleased bro) */
.sbc.is-sealed .sbc-art { background: var(--frost, linear-gradient(180deg, #cfe6f7, #eef7ff)) center / cover no-repeat; }
.sbc.is-sealed .sbc-portrait { filter: brightness(0) opacity(0.35) blur(0.6cqw); }
.sbc.is-sealed .sbc-art::after { content: '???'; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font-family: var(--font-logo); font-size: 22cqw; color: #fff; text-shadow: 0 1cqw 0 rgba(40, 90, 140, 0.45), 0 3cqw 6cqw rgba(10, 40, 80, 0.4); }

/* Back */
.sbc-back .sbc-frame { grid-template-rows: auto 1fr auto auto auto; }
.sbc-raw { list-style: none; margin: 0; padding: 2.4cqw; display: grid; gap: 1.4cqw; align-content: space-evenly; border-radius: 3.6cqw; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.8); }
.sbc-raw li { display: grid; grid-template-columns: 10cqw 1fr; gap: 1.6cqw; align-items: center; }
.sbc-raw b { font-family: var(--font-logo); font-weight: 400; font-size: 3.6cqw; color: #fff; background: var(--c); border-radius: 1.4cqw; padding: 1cqw 0; text-align: center; }
.sbc-raw strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 3.6cqw; line-height: 1.05; }
.sbc-raw em { display: block; font-style: normal; font-size: 2.6cqw; color: var(--mute); line-height: 1.25; }
.sbc-back-note { margin: 0; padding: 0 1cqw; font-size: 2.7cqw; line-height: 1.35; color: #fff; text-shadow: 0 0.3cqw 0 rgba(0, 0, 0, 0.2); }
.sbc-back-cta { display: grid; gap: 1.4cqw; }
.sbc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2.6cqw 3cqw; border-radius: 100cqw; background: #fff; color: var(--c); font: 800 3cqw/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.2), inset 0 -0.5cqw 0 rgba(0, 0, 0, 0.08); }
.sbc-btn--ghost { background: rgba(255, 255, 255, 0.22); color: #fff; border: 0.4cqw solid rgba(255, 255, 255, 0.7); box-shadow: none; }

/* Open-card link (gallery) */
.sbc-link { position: absolute; left: 50%; bottom: -3.2cqw; transform: translate(-50%, 0); z-index: 6; padding: 1.8cqw 3.6cqw; border-radius: 100cqw; background: var(--ink); color: #fff; font: 800 2.6cqw/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.sbc:hover .sbc-link, .sbc:focus-within .sbc-link { opacity: 1; transform: translate(-50%, 1cqw); }
@media (hover: none) { .sbc-link { opacity: 1; } }

/* Page */
.sbc-page .sbg-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.6vw, 76px); line-height: 0.98; letter-spacing: -0.015em; margin: 8px 0 14px; color: var(--ink); max-width: 16ch; }
.sbc-hero { position: relative; padding: 70px 0 30px; background: radial-gradient(60% 70% at 10% 10%, rgba(226, 52, 47, 0.14), transparent 60%), radial-gradient(50% 60% at 95% 15%, rgba(43, 125, 233, 0.14), transparent 60%), var(--bg); }
.sbc-lead { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--mute); }
.sbc-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; }
.sbc-legend span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 100px; background: #fff; box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink); }
.sbc-legend b { font-family: var(--font-logo); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; color: #fff; background: var(--ink); padding: 5px 9px; border-radius: 100px; }
.sbc-rack { padding: 30px 0 70px; background: var(--bg); }
.sbc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 28px; justify-items: center; padding: 20px 0 10px; }
.sbc-grid--small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 18px; }
.sbc-grid--small .sbc { max-width: 260px; }
.sbc-how { padding: 60px 0 80px; background: #fff; border-top: 1px solid rgba(27, 34, 51, 0.06); }
.sbc-how-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.sbc-how p { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 54ch; }
.sbc-how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbc-how-list li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--bg); font-size: 15px; line-height: 1.4; }
.sbc-how-list b { font-family: var(--font-logo); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; color: #fff; background: var(--ink); padding: 8px 0; border-radius: 100px; text-align: center; }
.sbc-single { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 50px; align-items: center; padding: 10px 0 40px; }
.sbc-single-card { display: flex; justify-content: center; }
.sbc-single-copy .sbg-eyebrow { text-decoration: none; }
.sbc-single-lead { font-size: 18px; line-height: 1.5; color: var(--mute); max-width: 50ch; margin: 0 0 18px; }
.sbc-single-stats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sbc-single-stats li { --s: var(--ink); display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 100px; background: #fff; box-shadow: var(--shadow); border: 2px solid var(--s); }
.sbc-single-stats b { font-family: var(--font-logo); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; color: var(--s); }
.sbc-single-stats strong { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.sbc-single-stats em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #2aa84a; padding: 3px 7px; border-radius: 100px; }
.sbc-single-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sbc-single-note { margin: 14px 0 0; font-size: 13px; color: var(--mute); }
.sbc-others { padding: 20px 0 70px; background: var(--bg); }
.sbc-embed { display: flex; justify-content: center; margin: 24px 0; }
@media (max-width: 900px) {
    .sbc-single, .sbc-how-grid { grid-template-columns: 1fr; gap: 30px; }
    .sbc-single { padding-top: 0; }
    .sbc-hero { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sbc-3d { transition: none; } .sbc-holo { display: none; } }