/* ===========================================================================
   Homepage magazine layout — hero, platform cards, category sections, tag cloud.
   Also reused by platform pages for the per-category sections at the top.
   =========================================================================== */

.gg-home-hero {
    position: relative;
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    margin: 1rem 0 2.25rem;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(70% 80% at 50% 0%, rgba(255, 85, 31, .14), transparent 70%),
        radial-gradient(55% 80% at 90% 100%, rgba(255, 147, 1, .10), transparent 60%);
}
.gg-home-hero::before,
.gg-home-hero::after {
    content: '';
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.gg-home-hero::before {
    top: -10rem;
    left: -8rem;
    background: rgba(255, 85, 31, .45);
}
.gg-home-hero::after {
    bottom: -10rem;
    right: -8rem;
    background: rgba(99, 102, 241, .30);
}
.gg-home-hero > * { position: relative; z-index: 1; }
[data-theme="dark"] .gg-home-hero::before { opacity: .28; }
[data-theme="dark"] .gg-home-hero::after { opacity: .25; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gg-home-hero::before { opacity: .28; }
    :root:not([data-theme="light"]) .gg-home-hero::after { opacity: .25; }
}
.gg-home-hero__eyebrow {
    display: inline-block;
    margin-bottom: .9rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(255, 85, 31, .12);
    color: var(--gg-primary, #ff551f);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gg-home-hero__title {
    font-size: clamp(1.8rem, 4.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 auto .9rem;
    max-width: 24ch;
    text-align: center;
    text-wrap: balance;
}
.gg-home-hero__accent {
    color: var(--gg-primary, #ff551f);
    white-space: nowrap;
}
.gg-home-hero__accent--wa { color: #25d366; }
.gg-home-hero__accent--tg { color: #1ca1f1; }
.gg-home-hero__accent--dc { color: #5865f2; }
.gg-home-hero__lead {
    max-width: 44rem;
    margin: 0 auto 1.4rem;
    font-size: 1.02rem;
    line-height: 1.55;
    opacity: .85;
    text-align: center;
}
.gg-home-hero__stats {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .65rem;
    font-size: .85rem;
    opacity: .9;
}
.gg-home-hero__stats li {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, .07);
    border: 1px solid rgba(127, 127, 127, .15);
}
.gg-home-hero__stats li span {
    font-weight: 700;
    font-size: 1.05rem;
}
.gg-home-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    align-items: center;
}

/* "Browse by platform" 3-card row */
.gg-home-platforms {
    margin: 2rem 0 2rem;
}
.gg-home-platforms__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
    margin-top: .85rem;
}
.gg-home-platform-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
    background: var(--gg-bg, transparent);
    transition: border-color .15s ease, transform .15s ease;
}
.gg-home-platform-card:hover,
.gg-home-platform-card:focus {
    border-color: rgba(127, 127, 127, .55);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.gg-home-platform-card__head { display: flex; flex-direction: column; gap: .15rem; }
.gg-home-platform-card__name { font-weight: 700; font-size: 1.1rem; }
.gg-home-platform-card__count { font-size: .85rem; opacity: .7; }
.gg-home-platform-card__cta { font-size: .8125rem; opacity: .8; align-self: flex-start; }
.gg-home-platform-card--whatsapp { border-left: 3px solid #25d366; }
.gg-home-platform-card--telegram { border-left: 3px solid #1ca1f1; }
.gg-home-platform-card--discord  { border-left: 3px solid #5865f2; }

/* Category sections (homepage + platform-page) — moved to gg-base.css
   so they ship render-blocking; otherwise the carousel collapsed to a
   vertical block until pages.css arrived, causing CLS. */

/* Popular tags chip cloud */
.gg-home-tags {
    margin: 2rem 0 2rem;
}
.gg-home-tag-cloud {
    list-style: none;
    padding: 0;
    margin: 1rem 0 .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gg-home-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem .4rem 1rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    background: var(--gg-bg, transparent);
    transition: border-color .15s ease, transform .15s ease;
}
.gg-home-tag-chip:hover,
.gg-home-tag-chip:focus {
    border-color: rgba(127, 127, 127, .55);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.gg-home-tag-chip small {
    display: inline-block;
    padding: .05rem .4rem;
    font-size: .7rem;
    border-radius: .25rem;
    background: rgba(127, 127, 127, .15);
    opacity: .85;
    line-height: 1.4;
}

/* "How adding a group works" 4-step section */
.gg-home-steps {
    margin: 2.5rem 0;
}
.gg-home-steps__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .75rem;
    counter-reset: gg-home-step;
}
.gg-home-steps__list > li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(127, 127, 127, .2);
    border-radius: .6rem;
    background: var(--gg-surface, transparent);
}
.gg-home-steps__num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gg-primary, #ff551f);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
}
.gg-home-steps__title {
    font-size: .98rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    line-height: 1.3;
}
.gg-home-steps__list p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    opacity: .82;
}

/* Bottom submission CTA */
.gg-home-cta {
    margin: 2rem 0 2.5rem;
    padding: 2rem 1.25rem;
    text-align: center;
    border-radius: .5rem;
    background: rgba(127, 127, 127, .04);
    border: 1px solid rgba(127, 127, 127, .15);
}
.gg-home-cta__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.gg-home-cta__lead {
    max-width: 32rem;
    margin: 0 auto 1rem;
    font-size: .95rem;
    opacity: .85;
}

/* ================================================================
   /categories hub — revamped: hero + filter + featured + grid + CTA.
   Old .gg-cat-hub-* classes were replaced with .gg-cathub-* below.
   ================================================================ */

.gg-cathub-hero {
    margin: 1rem 0 1.75rem;
    padding: 2rem 1.25rem 1.5rem;
    border-radius: .5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, .07), rgba(99, 102, 241, .07));
    border: 1px solid rgba(127, 127, 127, .15);
}
[data-theme="dark"] .gg-cathub-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(99, 102, 241, .12));
}
.gg-cathub-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .65rem;
}
.gg-cathub-hero__lead {
    max-width: 42rem;
    margin: 0 auto 1.25rem;
    font-size: .98rem;
    line-height: 1.55;
    opacity: .85;
}
.gg-cathub-hero__stats {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .85rem;
    font-size: .85rem;
    opacity: .85;
}
.gg-cathub-hero__stats li {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, .07);
    border: 1px solid rgba(127, 127, 127, .15);
}
.gg-cathub-hero__stats li span {
    font-weight: 700;
    font-size: 1rem;
}

/* Filter input */
.gg-cathub-filter {
    position: relative;
    max-width: 32rem;
    margin: 0 auto;
}
.gg-cathub-filter__icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: .55;
    pointer-events: none;
}
.gg-cathub-filter__input {
    width: 100%;
    padding: .6rem .9rem .6rem 2.4rem;
    font-size: .95rem;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: .4rem;
    background: var(--gg-bg, rgba(127, 127, 127, .04));
    color: inherit;
}
.gg-cathub-filter__input:focus {
    outline: none;
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}
.gg-cathub-filter__empty {
    display: block;
    margin-top: .65rem;
    font-size: .85rem;
    opacity: .7;
    font-style: italic;
}

/* Section headings shared by featured + alphabetical */
.gg-cathub-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.5rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(127, 127, 127, .18);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.gg-cathub-section-title__sub {
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .55;
}

/* Featured (top N) */
.gg-cathub-featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.gg-cathub-feature {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.15rem;
    border-radius: .5rem;
    background: rgba(127, 127, 127, .04);
    border: 1px solid rgba(127, 127, 127, .25);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.gg-cathub-feature:hover,
.gg-cathub-feature:focus-visible {
    border-color: rgba(34, 197, 94, .5);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
.gg-cathub-feature__name,
.gg-cathub-feature__heading {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.gg-cathub-feature__heading a {
    color: inherit;
    text-decoration: none;
}
.gg-cathub-feature__heading a:hover,
.gg-cathub-feature__heading a:focus-visible {
    text-decoration: underline;
}
.gg-cathub-feature__count {
    font-size: .8125rem;
    opacity: .7;
}
.gg-cathub-feature__platforms {
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Full grid (alphabetical) */
.gg-cathub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .9rem;
    margin-bottom: 2rem;
}
.gg-cathub-card {
    padding: .85rem 1rem;
    border-radius: .4rem;
    background: rgba(127, 127, 127, .03);
    border: 1px solid rgba(127, 127, 127, .2);
    transition: border-color .15s ease, transform .15s ease;
}
.gg-cathub-card:hover {
    border-color: rgba(127, 127, 127, .5);
    transform: translateY(-1px);
}
.gg-cathub-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    line-height: 1.3;
}
.gg-cathub-card__title a { color: inherit; text-decoration: none; }
.gg-cathub-card__title a:hover { text-decoration: underline; }
.gg-cathub-card__count {
    margin: 0 0 .55rem;
    font-size: .8125rem;
    opacity: .75;
}
.gg-cathub-card__count em { font-style: italic; opacity: .85; }
.gg-cathub-card__platforms {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

/* Platform pills used in both featured + grid cards */
.gg-cathub-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem .15rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid;
    color: inherit;
    text-decoration: none;
    line-height: 1.5;
    transition: background-color .15s ease, color .15s ease;
}
.gg-cathub-pill strong { font-weight: 700; opacity: .9; }
.gg-cathub-pill--wa  { color: #1ea957; border-color: rgba(37, 211, 102, .35); background: rgba(37, 211, 102, .08); }
.gg-cathub-pill--tg  { color: #1881c2; border-color: rgba(28, 161, 241, .35); background: rgba(28, 161, 241, .08); }
.gg-cathub-pill--dc  { color: #4954d8; border-color: rgba(88, 101, 242, .35); background: rgba(88, 101, 242, .08); }
/* Channel-pill variants reuse the parent platform's hue at deeper
   saturation so "WhatsApp Channels" reads as a sibling of "WhatsApp"
   rather than as a separate platform. */
.gg-cathub-pill--wac { color: #15803d; border-color: rgba(22, 163, 74, .45);  background: rgba(22, 163, 74, .12); }
.gg-cathub-pill--tgc { color: #0c5d96; border-color: rgba(14, 116, 178, .45); background: rgba(14, 116, 178, .12); }
.gg-cathub-pill--wa:hover  { background: rgba(37, 211, 102, .18); color: #1ea957; text-decoration: none; }
.gg-cathub-pill--tg:hover  { background: rgba(28, 161, 241, .18); color: #1881c2; text-decoration: none; }
.gg-cathub-pill--dc:hover  { background: rgba(88, 101, 242, .18); color: #4954d8; text-decoration: none; }
.gg-cathub-pill--wac:hover { background: rgba(22, 163, 74, .22);  color: #15803d; text-decoration: none; }
.gg-cathub-pill--tgc:hover { background: rgba(14, 116, 178, .22); color: #0c5d96; text-decoration: none; }
.gg-cathub-pill--empty { opacity: .35; cursor: default; }
.gg-cathub-pill--empty:hover { background: inherit; color: inherit; }

/* ─────────────────────────────────────────────────────────────────────
   Row-based hub list for category cards. Replaces the wrap-prone pill
   grid the categories page used to render. Each row is a full-width
   clickable target with a coloured platform dot, the hub label, and a
   right-aligned count pill. Empty hubs (count=0) render as inert
   <span>s — same row layout, dimmed, no hover-elevate.
   ───────────────────────────────────────────────────────────────────── */
.gg-cathub-hubs {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gg-cathub-hub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--gg-text);
    background: rgba(0, 0, 0, .025);
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
[data-theme="dark"] .gg-cathub-hub { background: rgba(255, 255, 255, .03); }
.gg-cathub-hub:not(.gg-cathub-hub--empty):hover {
    background: rgba(0, 0, 0, .05);
    border-color: var(--gg-border);
    text-decoration: none;
    transform: translateX(2px);
}
[data-theme="dark"] .gg-cathub-hub:not(.gg-cathub-hub--empty):hover {
    background: rgba(255, 255, 255, .06);
}
.gg-cathub-hub__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    background: var(--gg-text-muted, #6b7280);
}
.gg-cathub-hub__name {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 500;
    color: var(--gg-text);
}
.gg-cathub-hub__count {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gg-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .05);
    min-width: 28px;
    text-align: center;
}
[data-theme="dark"] .gg-cathub-hub__count { background: rgba(255, 255, 255, .07); }
.gg-cathub-hub--empty { opacity: .4; cursor: default; }
.gg-cathub-hub--empty .gg-cathub-hub__count { background: transparent; }

/* Platform-specific dot colours. Channel variants use the parent
   platform's hue at deeper saturation so they read as siblings. */
.gg-cathub-hub--wa  .gg-cathub-hub__dot { background: #25d366; }
.gg-cathub-hub--wac .gg-cathub-hub__dot { background: #15803d; }
.gg-cathub-hub--tg  .gg-cathub-hub__dot { background: #1ca1f1; }
.gg-cathub-hub--tgc .gg-cathub-hub__dot { background: #0c5d96; }
.gg-cathub-hub--dc  .gg-cathub-hub__dot { background: #5865f2; }

/* Active rows tint the count pill with a faint platform colour so the
   eye groups each row by hub at a glance. */
.gg-cathub-hub--wa:not(.gg-cathub-hub--empty)  .gg-cathub-hub__count { color: #1ea957; background: rgba(37, 211, 102, .12); }
.gg-cathub-hub--wac:not(.gg-cathub-hub--empty) .gg-cathub-hub__count { color: #15803d; background: rgba(22, 163, 74, .14); }
.gg-cathub-hub--tg:not(.gg-cathub-hub--empty)  .gg-cathub-hub__count { color: #1881c2; background: rgba(28, 161, 241, .12); }
.gg-cathub-hub--tgc:not(.gg-cathub-hub--empty) .gg-cathub-hub__count { color: #0c5d96; background: rgba(14, 116, 178, .14); }
.gg-cathub-hub--dc:not(.gg-cathub-hub--empty)  .gg-cathub-hub__count { color: #4954d8; background: rgba(88, 101, 242, .12); }

/* CTA strip at the bottom */
.gg-cathub-cta {
    margin: 2.5rem 0 3rem;
    padding: 1.75rem 1.25rem;
    text-align: center;
    border-radius: .5rem;
    background: rgba(127, 127, 127, .04);
    border: 1px solid rgba(127, 127, 127, .15);
}
.gg-cathub-cta__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.gg-cathub-cta__lead {
    max-width: 32rem;
    margin: 0 auto 1rem;
    font-size: .95rem;
    opacity: .85;
}
.gg-cathub-cta__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

/* Visually hidden helper (sr-only equivalent if not already present). */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 600px) {
    .gg-cathub-hero { padding: 1.4rem 1rem 1.1rem; }
    .gg-cathub-section-title { font-size: 1.1rem; }
    .gg-cathub-pill { font-size: .68rem; padding: .12rem .45rem; }
}

/* /tags/{slug} indexable tag pages — light header copy above the listing. */
.gg-tag-summary {
    font-size: .95rem;
    margin: .5rem 0 1.25rem;
    opacity: .85;
}

/* /tags/{slug} — intro + chips + FAQ + related tags.
   Every color reads from a CSS var so dark mode (driven by
   [data-theme="dark"] + prefers-color-scheme: dark) just works without a
   second selector block. The chip accent variants keep platform-flavoured
   hue values directly inside dark-mode overrides further down. */
.gg-tag-count { font-weight: 500; opacity: .75; margin-left: .25rem; font-size: .75em; }
.gg-tag-intro {
    font-size: 1rem;
    line-height: 1.55;
    margin: .5rem 0 1.1rem;
    color: var(--gg-text);
}
.gg-tag-chips {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 1rem;
}
.gg-tag-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    background: var(--gg-surface-alt);
    color: var(--gg-text);
    border: 1px solid var(--gg-border);
}
.gg-tag-chip__count { font-weight: 700; opacity: .8; }
.gg-tag-chip--wa  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.gg-tag-chip--wac { background: #d1fae5; border-color: #6ee7b7; color: #064e3b; }
.gg-tag-chip--tg  { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.gg-tag-chip--tgc { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.gg-tag-chip--dc  { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

.gg-tag-cats {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: 0 0 1.5rem;
    font-size: .9rem;
}
.gg-tag-cats__label { font-weight: 600; color: var(--gg-text-muted); }
.gg-tag-cat {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: 6px;
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    color: var(--gg-text);
    text-decoration: none;
    font-size: .85rem;
    transition: background var(--gg-transition), border-color var(--gg-transition);
}
.gg-tag-cat:hover { background: var(--gg-surface-alt); border-color: var(--gg-border-strong); color: var(--gg-text); }
.gg-tag-cat__n { font-weight: 700; opacity: .7; }

.gg-tag-section-title {
    font-size: 1.25rem; font-weight: 700;
    margin: 2rem 0 .75rem;
    color: var(--gg-text);
}
.gg-tag-faq__list { display: flex; flex-direction: column; gap: .5rem; }
.gg-tag-faq__item {
    border: 1px solid var(--gg-border);
    border-radius: 8px;
    background: var(--gg-surface);
}
.gg-tag-faq__item[open] { border-color: var(--gg-border-strong); }
.gg-tag-faq__q {
    cursor: pointer; padding: .85rem 1rem;
    font-weight: 600; font-size: .98rem;
    color: var(--gg-text);
    list-style: none;
}
.gg-tag-faq__q::-webkit-details-marker { display: none; }
.gg-tag-faq__q::after { content: '+'; float: right; font-weight: 400; opacity: .6; }
.gg-tag-faq__item[open] .gg-tag-faq__q::after { content: '−'; }
.gg-tag-faq__a {
    padding: 0 1rem 1rem;
    font-size: .92rem; line-height: 1.55;
    color: var(--gg-text-muted);
}

.gg-tag-related__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.gg-tag-related__list > li { display: inline-flex; }
.gg-tag-related__list a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: 999px;
    background: var(--gg-surface-alt);
    color: var(--gg-text);
    border: 1px solid var(--gg-border);
    font-size: .85rem; text-decoration: none;
    transition: background var(--gg-transition), border-color var(--gg-transition);
}
.gg-tag-related__list a:hover { background: var(--gg-surface); border-color: var(--gg-border-strong); color: var(--gg-text); }
.gg-tag-related__n { font-weight: 700; opacity: .65; font-size: .8em; }
.gg-tag-related--empty { margin-top: 1.5rem; }
.gg-tag-related__title { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; color: var(--gg-text); }

/* /categories — FAQ block (reuses tag faq look + cathub palette). */
.gg-cathub-faq { margin: 2.5rem 0; }
.gg-cathub-faq__list { display: flex; flex-direction: column; gap: .5rem; }
.gg-cathub-faq__item {
    border: 1px solid var(--gg-border);
    border-radius: 8px;
    background: var(--gg-surface);
}
.gg-cathub-faq__item[open] { border-color: var(--gg-border-strong); }
.gg-cathub-faq__q {
    cursor: pointer; padding: .85rem 1rem;
    font-weight: 600; font-size: .98rem;
    color: var(--gg-text);
    list-style: none;
}
.gg-cathub-faq__q::-webkit-details-marker { display: none; }
.gg-cathub-faq__q::after { content: '+'; float: right; font-weight: 400; opacity: .6; }
.gg-cathub-faq__item[open] .gg-cathub-faq__q::after { content: '−'; }
.gg-cathub-faq__a {
    padding: 0 1rem 1rem;
    font-size: .92rem; line-height: 1.55;
    color: var(--gg-text-muted);
}

/* Dark-mode overrides for the platform-accent chips. The light-mode chips
   use saturated pastel backgrounds that are illegible on a dark surface, so
   they pivot to translucent-tint backgrounds + brighter text in dark. Both
   the explicit theme toggle and the system-pref media query are covered. */
[data-theme="dark"] .gg-tag-chip--wa  { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
[data-theme="dark"] .gg-tag-chip--wac { background: rgba(5, 150, 105, .18);  border-color: rgba(5, 150, 105, .4);  color: #a7f3d0; }
[data-theme="dark"] .gg-tag-chip--tg  { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .35); color: #93c5fd; }
[data-theme="dark"] .gg-tag-chip--tgc { background: rgba(37, 99, 235, .18);  border-color: rgba(37, 99, 235, .4);  color: #bfdbfe; }
[data-theme="dark"] .gg-tag-chip--dc  { background: rgba(99, 102, 241, .16); border-color: rgba(99, 102, 241, .4);  color: #c7d2fe; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gg-tag-chip--wa  { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
    :root:not([data-theme="light"]) .gg-tag-chip--wac { background: rgba(5, 150, 105, .18);  border-color: rgba(5, 150, 105, .4);  color: #a7f3d0; }
    :root:not([data-theme="light"]) .gg-tag-chip--tg  { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .35); color: #93c5fd; }
    :root:not([data-theme="light"]) .gg-tag-chip--tgc { background: rgba(37, 99, 235, .18);  border-color: rgba(37, 99, 235, .4);  color: #bfdbfe; }
    :root:not([data-theme="light"]) .gg-tag-chip--dc  { background: rgba(99, 102, 241, .16); border-color: rgba(99, 102, 241, .4);  color: #c7d2fe; }
}

/* Centralized /search page — filter sidebar + results layout. */
.gg-search-row { margin-top: 1rem; }
.gg-search-filters {
    position: sticky;
    top: 5rem; /* below the fixed nav */
    align-self: flex-start;
    padding-bottom: 1rem;
}
@media (max-width: 767.98px) {
    .gg-search-filters { position: static; }
}
.gg-search-form {
    padding: 1rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: .35rem;
    background: rgba(127, 127, 127, .03);
}
.gg-search-form__label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .65;
    margin: 0 0 .35rem;
}
.gg-search-form__clear {
    display: inline-block;
    margin-top: .75rem;
    font-size: .8125rem;
    text-decoration: underline;
    color: inherit;
    opacity: .65;
}
.gg-search-form__clear:hover { opacity: 1; color: inherit; }
.gg-search-summary {
    font-size: .9rem;
    margin: 0 0 1rem;
    opacity: .8;
}

/* Rich empty state on /{platform}/{category} when there are 0 public groups.
   Replaces the previous "giant void with one CTA" with an informative layout
   that surfaces alternatives so the page is useful even before it has groups. */
.gg-empty-rich {
    margin: 1.5rem 0 3rem;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: .5rem;
    background: rgba(127, 127, 127, .03);
}
.gg-empty-rich__head {
    text-align: center;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(127, 127, 127, .15);
}
.gg-empty-rich__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.gg-empty-rich__lead {
    margin: 0 auto 1rem;
    max-width: 38rem;
    opacity: .8;
    font-size: .95rem;
    line-height: 1.55;
}
.gg-empty-rich__cta {
    margin-top: .25rem;
}
.gg-empty-rich__section {
    margin-top: 1.5rem;
}
.gg-empty-rich__subhead {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .65;
    margin: 0 0 .85rem;
}

/* Alternate-platform cards (same category on WhatsApp/Telegram/Discord) */
.gg-empty-rich__alts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}
.gg-empty-rich__alt-card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: .35rem;
    background: var(--gg-bg, transparent);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.gg-empty-rich__alt-card:hover,
.gg-empty-rich__alt-card:focus {
    border-color: rgba(127, 127, 127, .55);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.gg-empty-rich__alt-platform {
    font-weight: 600;
    font-size: 1rem;
}
.gg-empty-rich__alt-count {
    font-size: .8125rem;
    opacity: .7;
}

/* Popular-category cards */
.gg-empty-rich__cats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .65rem;
}
.gg-empty-rich__cat-card {
    display: flex;
    flex-direction: column;
    padding: .65rem .85rem;
    border: 1px solid rgba(127, 127, 127, .2);
    border-radius: .35rem;
    background: var(--gg-bg, transparent);
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .15s ease;
}
.gg-empty-rich__cat-card:hover,
.gg-empty-rich__cat-card:focus {
    border-color: rgba(127, 127, 127, .5);
    color: inherit;
    text-decoration: none;
}
.gg-empty-rich__cat-name { font-weight: 600; }
.gg-empty-rich__cat-count { font-size: .75rem; opacity: .65; margin-top: .1rem; }
.gg-empty-rich__more {
    display: inline-block;
    margin-top: .85rem;
    font-size: .85rem;
    color: inherit;
    opacity: .75;
    text-decoration: underline;
}
.gg-empty-rich__more:hover { opacity: 1; color: inherit; }

/* Admin-curated category intro inside the empty state */
.gg-empty-rich__intro {
    font-size: .95rem;
    line-height: 1.6;
    opacity: .9;
}
.gg-empty-rich__intro p { margin: 0 0 .75rem; }
.gg-empty-rich__intro p:last-child { margin-bottom: 0; }
.gg-empty-rich__intro a { color: inherit; text-decoration: underline; }

/* Tag chips — links to /tags/{slug} */
.gg-empty-rich__tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gg-empty-rich__tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem .3rem .85rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: .85rem;
    background: var(--gg-bg, transparent);
    transition: border-color .15s ease, transform .15s ease;
}
.gg-empty-rich__tag-chip:hover,
.gg-empty-rich__tag-chip:focus {
    border-color: rgba(127, 127, 127, .55);
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}
.gg-empty-rich__tag-chip small {
    display: inline-block;
    padding: .05rem .35rem;
    font-size: .7rem;
    border-radius: .25rem;
    background: rgba(127, 127, 127, .15);
    opacity: .85;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .gg-empty-rich { padding: 1.25rem 1rem; }
    .gg-empty-rich__title { font-size: 1.2rem; }
}

/* .gg-private-banner, .gg-cat-intro*, .gg-pagination* — moved to
   gg-base.css so they ship render-blocking. Async-loading them
   caused above-the-fold height jumps on /{platform}/{category}. */

/* ================================================================
   /about + /contact info pages — shared "magazine info" components.
   Hero strip, sectioned cards, numbered steps, FAQ details, CTA.
   Visually consistent with the /categories hub but generic enough
   to be reused on any future static-ish info page.
   ================================================================ */

.gg-page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 1rem 0 2.25rem;
    padding: 3rem 1.5rem 2.5rem;
    border-radius: 18px;
    text-align: center;
    background:
        radial-gradient(70% 80% at 50% 0%, rgba(34, 197, 94, .10), transparent 70%),
        radial-gradient(55% 80% at 90% 100%, rgba(99, 102, 241, .10), transparent 60%);
}
.gg-page-hero::before,
.gg-page-hero::after {
    content: '';
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.gg-page-hero::before {
    top: -10rem;
    left: -8rem;
    background: rgba(34, 197, 94, .45);
}
.gg-page-hero::after {
    bottom: -10rem;
    right: -8rem;
    background: rgba(99, 102, 241, .35);
}
.gg-page-hero > * { position: relative; z-index: 1; }
[data-theme="dark"] .gg-page-hero::before { opacity: .28; }
[data-theme="dark"] .gg-page-hero::after { opacity: .25; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gg-page-hero::before { opacity: .28; }
    :root:not([data-theme="light"]) .gg-page-hero::after { opacity: .25; }
}
.gg-page-hero__eyebrow {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, .14);
    color: var(--gg-success, #22c55e);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gg-page-hero__title {
    font-size: clamp(1.8rem, 4.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 auto .9rem;
    max-width: 28ch;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.gg-page-hero__accent {
    color: var(--gg-success, #22c55e);
    white-space: nowrap;
}
.gg-page-hero__accent--wa { color: #25d366; }
.gg-page-hero__accent--tg { color: #1ca1f1; }
.gg-page-hero__accent--dc { color: #5865f2; }
.gg-page-hero__lead {
    max-width: 44rem;
    margin: 0 auto 1.4rem;
    font-size: 1.02rem;
    line-height: 1.6;
    opacity: .85;
}
.gg-page-hero__stats {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .75rem;
    font-size: .85rem;
    opacity: .9;
}
.gg-page-hero__stats li {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, .07);
    border: 1px solid rgba(127, 127, 127, .15);
}
.gg-page-hero__stats li span {
    font-weight: 700;
    font-size: 1.05rem;
}
.gg-page-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

/* Per-platform mini-tally below the actions */
.gg-page-hero__platforms {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
}
.gg-platform-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    border: 1px solid rgba(127, 127, 127, .2);
    background: var(--gg-surface, rgba(255, 255, 255, .55));
}
.gg-platform-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.gg-platform-chip strong { font-weight: 700; }
.gg-platform-chip--wa { color: #128c7e; border-color: rgba(37, 211, 102, .35); }
.gg-platform-chip--wa svg { fill: #25d366; }
.gg-platform-chip--tg { color: #1881c2; border-color: rgba(28, 161, 241, .35); }
.gg-platform-chip--tg svg { fill: #1ca1f1; }
.gg-platform-chip--dc { color: #4954d8; border-color: rgba(88, 101, 242, .35); }
.gg-platform-chip--dc svg { fill: #5865f2; }
[data-theme="dark"] .gg-platform-chip { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .gg-platform-chip--wa { color: #4ee495; }
[data-theme="dark"] .gg-platform-chip--tg { color: #5ec3ff; }
[data-theme="dark"] .gg-platform-chip--dc { color: #8b95ff; }

/* "Jump to form" anchor on the contact hero */
.gg-page-hero__jump {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.25rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gg-success, #22c55e);
    text-decoration: none;
}
.gg-page-hero__jump:hover { text-decoration: underline; }
.gg-page-hero__jump svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}
.gg-page-hero__jump:hover svg { transform: translateY(2px); }

/* Section blocks (story / values / steps / faq) */
.gg-info-section {
    margin: 2.5rem 0;
}
.gg-info-section__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(127, 127, 127, .18);
    letter-spacing: -.01em;
}

/* Long-form prose — cap reading width but stay left-aligned with the
   section heading so /about and /contact don't have a left-tag / right-empty
   visual gap. Tighter cap on the hint helper text. */
.gg-info-prose {
    line-height: 1.7;
    font-size: 1rem;
}
.gg-info-prose p {
    margin: 0 0 1rem;
    opacity: .9;
}
.gg-info-prose__hint {
    margin: 0 0 1.25rem;
    font-size: .92rem;
    line-height: 1.55;
    opacity: .75;
}

/* Card grid (values, contact reasons) */
.gg-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: .85rem;
}
.gg-info-card {
    position: relative;
    padding: 1.25rem 1.15rem 1.1rem;
    border: 1px solid rgba(127, 127, 127, .18);
    border-radius: .55rem;
    background: var(--gg-surface, rgba(255, 255, 255, .5));
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gg-info-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .35);
    box-shadow: 0 6px 20px rgba(34, 197, 94, .08);
}
[data-theme="dark"] .gg-info-card { background: rgba(255, 255, 255, .03); }
.gg-info-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .05));
    color: var(--gg-success, #22c55e);
    margin-bottom: .85rem;
}
.gg-info-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.gg-info-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    line-height: 1.3;
}
.gg-info-card p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    opacity: .82;
}
.gg-info-card a { color: var(--gg-success, #22c55e); font-weight: 600; }

/* Numbered steps — connector line between circles for visual flow */
.gg-info-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
    position: relative;
}
.gg-info-steps > li {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.15rem 1.1rem 1rem;
    border: 1px solid rgba(127, 127, 127, .18);
    border-radius: .55rem;
    background: var(--gg-surface, rgba(255, 255, 255, .5));
    margin-bottom: .65rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gg-info-steps > li:hover {
    border-color: rgba(34, 197, 94, .35);
    box-shadow: 0 4px 14px rgba(34, 197, 94, .06);
}
[data-theme="dark"] .gg-info-steps > li { background: rgba(255, 255, 255, .03); }
.gg-info-steps > li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(1rem + 1.15rem);
    top: 100%;
    width: 2px;
    height: .65rem;
    background: linear-gradient(to bottom, rgba(34, 197, 94, .55), rgba(34, 197, 94, 0));
    z-index: 1;
}
.gg-info-steps__num {
    flex: 0 0 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(34, 197, 94, .25);
}
.gg-info-steps__title {
    font-size: 1.02rem;
    font-weight: 700;
    margin: .15rem 0 .3rem;
    line-height: 1.3;
}
.gg-info-steps > li > div { flex: 1; min-width: 0; }
.gg-info-steps > li > div > p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    opacity: .82;
}

/* FAQ accordion */
.gg-faq {
    display: grid;
    gap: .55rem;
}
.gg-faq__item {
    border: 1px solid rgba(127, 127, 127, .18);
    border-radius: .5rem;
    background: var(--gg-surface, rgba(255, 255, 255, .5));
    padding: 0 1.1rem;
    transition: border-color .15s ease;
}
.gg-faq__item:hover { border-color: rgba(34, 197, 94, .25); }
.gg-faq__item[open] {
    border-color: rgba(34, 197, 94, .4);
    background: linear-gradient(180deg, rgba(34, 197, 94, .04), transparent);
}
[data-theme="dark"] .gg-faq__item { background: rgba(255, 255, 255, .03); }
.gg-faq__item > summary {
    cursor: pointer;
    list-style: none;
    padding: .9rem 0;
    font-weight: 600;
    font-size: .98rem;
    position: relative;
    padding-right: 2rem;
    color: var(--gg-text);
}
.gg-faq__item > summary:hover { color: var(--gg-success, #22c55e); }
.gg-faq__item > summary::-webkit-details-marker { display: none; }
.gg-faq__item > summary::after {
    content: '';
    position: absolute;
    right: .15rem;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -.7rem;
    border-radius: 50%;
    background-color: rgba(34, 197, 94, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .85rem;
    transition: transform .2s ease;
}
.gg-faq__item[open] > summary::after { transform: rotate(180deg); }
.gg-faq__item > p {
    margin: 0;
    padding: 0 0 1.1rem;
    font-size: .94rem;
    line-height: 1.65;
    opacity: .85;
}
.gg-faq__item a { color: var(--gg-success, #22c55e); font-weight: 600; }

/* Bottom CTA strip */
.gg-info-cta {
    position: relative;
    overflow: hidden;
    margin: 2.5rem 0 3rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    border-radius: .65rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(99, 102, 241, .06));
    border: 1px solid rgba(34, 197, 94, .25);
}
.gg-info-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: rgba(34, 197, 94, .25);
    filter: blur(56px);
    pointer-events: none;
}
.gg-info-cta > * { position: relative; z-index: 1; }
.gg-info-cta__title {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}
.gg-info-cta__lead {
    max-width: 36rem;
    margin: 0 auto 1.1rem;
    font-size: .95rem;
    line-height: 1.55;
    opacity: .85;
}
.gg-info-cta__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
}

/* Contact form (gg-styled, replaces the previous Tailwind form) */
.gg-contact-form {
    padding: 1.5rem;
    border: 1px solid rgba(127, 127, 127, .18);
    border-radius: .65rem;
    background: var(--gg-surface, rgba(255, 255, 255, .5));
}
[data-theme="dark"] .gg-contact-form { background: rgba(255, 255, 255, .03); }
.gg-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.gg-contact-form__field { display: block; margin-bottom: 1rem; }
.gg-contact-form__field label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--gg-text);
    opacity: .9;
}
.gg-contact-form__input,
.gg-contact-form__textarea {
    width: 100%;
    padding: .7rem .95rem;
    border: 1.5px solid rgba(127, 127, 127, .25);
    border-radius: .5rem;
    background: var(--gg-bg, rgba(127, 127, 127, .03));
    color: inherit;
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gg-contact-form__textarea { resize: vertical; min-height: 10rem; line-height: 1.55; }
.gg-contact-form__input:hover,
.gg-contact-form__textarea:hover {
    border-color: rgba(127, 127, 127, .4);
}
.gg-contact-form__input:focus,
.gg-contact-form__textarea:focus {
    outline: none;
    border-color: rgba(34, 197, 94, .65);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
    background: var(--gg-bg, #fff);
}
[data-theme="dark"] .gg-contact-form__input:focus,
[data-theme="dark"] .gg-contact-form__textarea:focus {
    background: rgba(0, 0, 0, .25);
}
.gg-contact-form__input.is-invalid,
.gg-contact-form__textarea.is-invalid {
    border-color: rgba(239, 68, 68, .65);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}
.gg-contact-form__error {
    display: block;
    margin-top: .4rem;
    font-size: .82rem;
    color: #ef4444;
}
.gg-contact-form__success {
    display: block;
    padding: .85rem 1.1rem;
    margin-bottom: 1.1rem;
    border-radius: .5rem;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    color: var(--gg-text);
    font-size: .92rem;
}
.gg-contact-form__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .5rem;
}
.gg-contact-form__submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.gg-contact-form__submit svg {
    width: 16px;
    height: 16px;
}
.gg-contact-form__note {
    font-size: .82rem;
    opacity: .65;
    line-height: 1.4;
}
.gg-contact-form__note a { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
    .gg-page-hero { padding: 1.6rem 1rem 1.25rem; }
    .gg-info-section { margin: 1.5rem 0; }
    .gg-info-section__title { font-size: 1.15rem; }
    .gg-info-cards { grid-template-columns: 1fr; }
    .gg-info-steps > li { padding: .85rem .9rem; gap: .7rem; }
    .gg-contact-form__row { grid-template-columns: 1fr; }
}

/* ── Announcement banner ───────────────────────────────────────────────── */
:root {
    --ann-info-bg: #eff6ff;    --ann-info-text: #1e40af;
    --ann-success-bg: #f0fdf4; --ann-success-text: #166534;
    --ann-warning-bg: #fffbeb; --ann-warning-text: #92400e;
    --ann-danger-bg: #fef2f2;  --ann-danger-text: #991b1b;
}
[data-theme="dark"] {
    --ann-info-bg: #1e3a5f;    --ann-info-text: #bfdbfe;
    --ann-success-bg: #14532d; --ann-success-text: #bbf7d0;
    --ann-warning-bg: #451a03; --ann-warning-text: #fde68a;
    --ann-danger-bg: #450a0a;  --ann-danger-text: #fecaca;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ann-info-bg: #1e3a5f;    --ann-info-text: #bfdbfe;
        --ann-success-bg: #14532d; --ann-success-text: #bbf7d0;
        --ann-warning-bg: #451a03; --ann-warning-text: #fde68a;
        --ann-danger-bg: #450a0a;  --ann-danger-text: #fecaca;
    }
}
.gg-announcement {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    font-size: .875rem;
    line-height: 1.4;
    margin-top: var(--gg-navbar-h);
    border-bottom: 1px solid rgba(127,127,127,.15);
    position: relative;
    z-index: 1029;
}
.gg-announcement--info    { background: var(--ann-info-bg);    color: var(--ann-info-text); }
.gg-announcement--success { background: var(--ann-success-bg); color: var(--ann-success-text); }
.gg-announcement--warning { background: var(--ann-warning-bg); color: var(--ann-warning-text); }
.gg-announcement--danger  { background: var(--ann-danger-bg);  color: var(--ann-danger-text); }
.gg-announcement__msg  { flex: 1; text-align: center; }
.gg-announcement__link {
    white-space: nowrap;
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
    margin-left: .4rem;
}
.gg-announcement__link:hover { opacity: .8; color: inherit; }
.gg-announcement__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .55;
    padding: .2rem .35rem;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: .25rem;
}
.gg-announcement__dismiss:hover { opacity: 1; background: rgba(127,127,127,.15); }


/* ── Quill editor + TomSelect rules extracted to gg-editor.css ───────────
   Editor styles only fire on /addgroup (the only frontend route that
   instantiates Quill + TomSelect). Async-loaded from that route's
   <head> via layouts/frontend.blade.php; not shipped on other pages. */