/* ==========================================================================
   Component: group brands  (<x-site.group-brands>)
   --------------------------------------------------------------------------
   One white card per Al-Ameen Group brand: logo or big name, a line of text,
   a pill link (or a "soon" pill). The faint X mark sits in the corner.
   ========================================================================== */

.gbrands { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gbrand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-height: 220px; }
.gbrand__mark { position: absolute; inset-inline-end: -20px; top: -20px; width: 130px; color: var(--card-soft); }
.gbrand__logo { position: relative; max-width: 160px; max-height: 56px; width: auto; }
.gbrand__name { position: relative; font-family: "Archivo", var(--font-head); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.gbrand__text { position: relative; max-width: 30rem; margin-bottom: var(--s-3); color: var(--ink-soft); }
.gbrand .btn, .gbrand__soon { margin-top: auto; }
.gbrand__soon { padding: 0.45em 1.1em; border-radius: var(--r-pill); background: var(--card-soft); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 600; }