/* One visual vocabulary for the public overview and the creation flow. */
.card-formats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.card-formats .format-card { min-width:0; padding:24px 14px; border:1px solid #cad9e4; border-radius:16px; background:#f7fafc; text-align:center; color:#172e42; }
.card-formats .bingo-preview { display:grid; grid-template-columns:repeat(var(--card-side),1fr); grid-template-rows:repeat(var(--card-side),1fr); gap:1px; width:76px; height:76px; margin:0 auto 14px; border:2px solid #8fa3b2; border-radius:3px; padding:2px; background:white; box-sizing:border-box; }
.card-formats .bingo-preview > div { min-width:0; min-height:0; border-radius:1px; background-color:#8eb9cc; }
.card-formats .bingo-preview > .logo { width:auto; height:auto; margin:0; background:white url('/img/logo.png') center / contain no-repeat; }
.card-formats .format-name { margin:0 0 6px; font-size:1.1rem; font-weight:750; color:#172e42; }
.card-formats .card-description { display:block; font-size:.85rem; line-height:1.55; color:#42617a; }
.card-formats-section { background:#f5f8fb; }
.card-formats-section .section-heading { max-width:780px; }
.card-formats-section .format-note { max-width:820px; color:#425d70; margin:22px 0; }
.card-product-example { margin:24px 0; padding:20px; border:1px solid #d5e1e9; border-radius:18px; background:#f5f8fb; }
.card-product-example img { display:block; width:100%; height:auto; object-fit:contain; }
.card-product-example--mobile img { width:min(100%,290px); margin-inline:auto; }
.card-product-example figcaption { margin-top:16px; color:#425d70; font-size:.88rem; line-height:1.6; }
@media(max-width:640px) { .card-formats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .card-formats .format-card {padding:20px 8px;} .card-product-example {padding:12px;} }