/* Compact additions using the existing Lagoon palette and typography. */
.brand-layer{min-inline-size:0}
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.brand-card{min-inline-size:0;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);overflow-wrap:anywhere}
.brand-card h3{font-family:var(--display);font-size:1.2rem;line-height:1.4;margin:0 0 .75rem}
.brand-card p{margin:0;color:var(--ink-soft);line-height:1.7}
.brand-card a,.brand-links a{color:var(--teal);text-underline-offset:.2em}
.brand-language-note{font-size:.875rem;color:var(--muted)}
.brand-diagram{margin:1.5rem 0;border:1px solid var(--line-strong);border-radius:16px;padding:1rem;background:var(--mint-soft)}
.brand-diagram ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:.25rem 0 1rem;padding:0;list-style:none;counter-reset:step}
.brand-diagram li{counter-increment:step;padding:.75rem;border-radius:10px;background:var(--surface);overflow-wrap:anywhere}
.brand-diagram li::before{content:counter(step) '. ';color:var(--teal);font-weight:600}
.brand-diagram figcaption{font-size:.875rem;color:var(--muted)}
@media(max-width:760px){.brand-grid{grid-template-columns:1fr}.brand-diagram ol{grid-template-columns:1fr}}