/* =====================================================================
   Global Sports BD — main stylesheet (v2 design)
   1. Tokens   2. Reset    3. Base       4. Layout    5. Header
   6. Nav      7. Hero     8. Ticker     9. Sections  10. Cards
   11. CPT     12. Sidebar 13. Single    14. Forms    15. Newsletter
   16. Footer  17. Misc    18. Responsive
   ===================================================================== */

/* ------------------------ 1. TOKENS ------------------------ */
:root {
    --brand-red:        #E63946;
    --brand-red-dark:   #C92836;
    --brand-red-soft:   #FDE9EB;
    --brand-navy:       #0B1B2B;
    --brand-navy-2:     #14273C;
    --brand-electric:   #1D4ED8;
    --accent-gold:      #F4B400;
    --accent-bd:        #006A4E;

    --surface:          #1E2532;
    --surface-soft:     #14181F;
    --surface-alt:      #252D3D;
    --surface-dark:     #0B1B2B;

    --text-primary:     #E8ECF2;
    --text-secondary:   #A0A8B5;
    --text-muted:       #6B7484;
    --text-on-dark:     #F2F4F7;

    --border:           #2A313E;
    --border-strong:    #3D4554;

    --shadow-1: 0 1px 2px rgba(11,27,43,.05), 0 2px 6px rgba(11,27,43,.06);
    --shadow-2: 0 4px 16px rgba(11,27,43,.10);
    --shadow-3: 0 18px 40px rgba(11,27,43,.18);

    --radius-sm: 4px;
    --radius:    10px;
    --radius-lg: 18px;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  16px;
    --space-4:  24px;
    --space-5:  32px;
    --space-6:  48px;
    --space-7:  64px;
    --space-8:  96px;
    --space-9:  128px;

    --container: 1240px;
    --container-narrow: 820px;

    --font-body:    'Inter', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head:    'Inter', 'Hind Siliguri', system-ui, sans-serif;
    --font-display: 'Oswald', 'Inter', 'Hind Siliguri', sans-serif;

    --transition: 220ms cubic-bezier(.4,0,.2,1);

    --header-height: 104px;
    --header-height-mobile: 68px;
}

/* ------------------------ 2. RESET ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; border-radius: 4px; }

/* ------------------------ 3. BASE -------------------------- */
body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-primary);
    background: var(--surface-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0 0 var(--space-3);
    font-weight: 800;
    letter-spacing: -0.018em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; font-weight: 700; }

.gsbd-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 0.95;
}

p { margin: 0 0 var(--space-3); }

a { color: var(--brand-electric); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-red); }

small { font-size: .85rem; color: var(--text-secondary); }
ul, ol { list-style: none; }

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px; overflow: hidden;
}

.gsbd-skip {
    position: absolute; top: -40px; left: 0;
    background: var(--brand-navy); color: #fff;
    padding: 8px 16px; z-index: 100; transition: top var(--transition);
}
.gsbd-skip:focus { top: 0; }

/* ------------------------ 4. LAYOUT ------------------------ */
.gsbd-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--space-4);
}

.gsbd-main { padding-block: 0 var(--space-7); }

.gsbd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-6);
}
.gsbd-layout--narrow { max-width: 880px; grid-template-columns: 1fr; }
.gsbd-layout__main { min-width: 0; }

/* ------------------------ 5. HEADER ------------------------ */

/* Top utility bar */
.gsbd-topbar {
    background: var(--brand-navy);
    color: var(--text-on-dark);
    font-size: .8rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.gsbd-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
}
.gsbd-topbar__left { display: flex; align-items: center; gap: var(--space-4); }
.gsbd-topbar__right { display: flex; align-items: center; gap: var(--space-3); }

.gsbd-topbar__clock {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-feature-settings: "tnum";
}
.gsbd-topbar__clock-label {
    background: var(--brand-red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .12em;
}
.gsbd-topbar__clock-time { font-weight: 700; color: #fff; }
.gsbd-topbar__date { color: rgba(255,255,255,.65); }
.gsbd-topbar__live {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.gsbd-topbar__live-label {
    flex-shrink: 0;
    color: #ff4757;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gsbd-topbar__live-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}
.gsbd-topbar__live-list::-webkit-scrollbar { display: none; }
.gsbd-topbar__live-list li { white-space: nowrap; }
.gsbd-topbar__live-list a {
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 500;
    transition: color 200ms;
    text-decoration: none;
}
.gsbd-topbar__live-list a:hover { color: var(--accent-gold); }

/* Legacy fallback when there are no posts: keep the old pulsing-dot vibe */
.gsbd-topbar__left > span.gsbd-topbar__live {
    color: #ff4757;
    font-weight: 700;
    gap: 6px;
}
.gsbd-topbar__left > span.gsbd-topbar__live::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff4757;
    box-shadow: 0 0 0 0 rgba(255, 71, 87, .6);
    animation: gsbd-pulse 1.6s infinite;
    flex-shrink: 0;
}
@keyframes gsbd-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(255,71,87,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
}
.gsbd-topbar__social {
    display: inline-flex; gap: 6px;
}
.gsbd-topbar__social a {
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    color: rgba(255,255,255,.7);
    border-radius: 50%;
    transition: background var(--transition), color var(--transition);
}
.gsbd-topbar__social a:hover { background: rgba(255,255,255,.1); color: var(--accent-gold); }

/* Main header — 3-zone grid: logo | nav-center | tools-right */
.gsbd-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(11,27,43,.03);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.gsbd-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--space-5);
    min-height: var(--header-height);
    padding-block: 8px;
}

.gsbd-logo {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.gsbd-logo:hover { color: var(--brand-red); }
.gsbd-logo__mark {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    background: var(--brand-red);
    color: #fff;
    font-weight: 800;
    border-radius: var(--radius);
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(230,57,70,.35);
}
.gsbd-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.gsbd-logo__text strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.gsbd-logo__text em {
    font-style: normal; font-size: .68rem;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .15em;
}

/* WP-injected custom logo */
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}
.custom-logo {
    max-height: 84px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform var(--transition);
}
.custom-logo-link:hover .custom-logo { transform: scale(1.03); }
@media (max-width: 1024px) {
    .custom-logo { max-height: 64px; }
}
@media (max-width: 720px) {
    .custom-logo { max-height: 48px; }
}

.gsbd-header__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: end;
}
.gsbd-search-toggle {
    background: transparent;
    border: 1.5px solid var(--brand-navy);
    padding: 9px 18px;
    color: var(--brand-navy);
    border-radius: 999px;
    transition: all var(--transition);
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.gsbd-search-toggle:hover { background: var(--brand-navy); color: #fff; }
.gsbd-search-toggle svg { transition: transform var(--transition); }
.gsbd-search-toggle:hover svg { transform: scale(1.1); }

.gsbd-burger {
    background: transparent; border: 0; padding: 8px;
    color: var(--brand-navy); border-radius: var(--radius-sm);
    display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px;
    align-items: center; justify-content: center;
}
.gsbd-burger span {
    display: block; width: 22px; height: 2.5px;
    background: var(--brand-navy); border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.gsbd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gsbd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gsbd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.gsbd-search-panel {
    position: relative;
    border-top: 1px solid var(--border);
    padding-block: var(--space-5);
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(230, 57, 70, .12) 0%, transparent 55%),
        linear-gradient(180deg, var(--surface) 0%, #060f1c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
                0 24px 48px -24px rgba(0, 0, 0, .55);
}
.gsbd-search-panel::before {
    /* Hairline gold accent across the top */
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--brand-red) 35%, var(--accent-gold) 65%, transparent 100%);
    opacity: .55;
    pointer-events: none;
}
.gsbd-search-panel:not([hidden]) {
    display: block;
    animation: gsbd-search-panel-in 280ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes gsbd-search-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gsbd-search-panel__inner {
    max-width: 720px;
    margin-inline: auto;
}
.gsbd-search-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.gsbd-search-panel__eyebrow {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--brand-red);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.gsbd-search-panel__eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    background: var(--brand-red);
    border-radius: 2px;
}
.gsbd-search-panel__close {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 200ms, border-color 200ms, background 200ms, transform 200ms;
}
.gsbd-search-panel__close:hover {
    color: #fff;
    border-color: var(--brand-red);
    background: var(--brand-red);
    transform: rotate(90deg);
}
.gsbd-search-panel__suggest {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.gsbd-search-panel__suggest-label {
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--text-muted);
}
.gsbd-search-panel__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gsbd-search-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color 200ms, border-color 200ms, background 200ms, transform 200ms;
}
.gsbd-search-chip:hover {
    color: #fff;
    border-color: var(--brand-red);
    background: var(--brand-red);
    transform: translateY(-1px);
}
.gsbd-search-panel__hint {
    margin: 14px 0 0;
    font-size: .72rem;
    color: var(--text-muted);
    text-align: center;
}
.gsbd-search-panel__hint kbd {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 2px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .04);
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .7rem;
    line-height: 1;
}

/* ------------------------ 6. NAV --------------------------- */
.gsbd-nav { justify-self: center; }
.gsbd-nav__list {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-wrap: nowrap;
}
.gsbd-nav__list li { position: relative; }
.gsbd-nav__list > li > a {
    display: inline-block;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 0;
    position: relative;
}
.gsbd-nav__list > li > a::after {
    content: '';
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 3px; background: var(--brand-red);
    transition: right var(--transition);
}
.gsbd-nav__list > li > a:hover,
.gsbd-nav__list > li.current-menu-item > a,
.gsbd-nav__list > li.current-cat > a,
.gsbd-nav__list > li.current-menu-parent > a { color: var(--brand-red); }
.gsbd-nav__list > li > a:hover::after,
.gsbd-nav__list > li.current-menu-item > a::after,
.gsbd-nav__list > li.current-cat > a::after,
.gsbd-nav__list > li.current-menu-parent > a::after { right: 0; }

.gsbd-nav__list .sub-menu,
.gsbd-nav__list .children {
    position: absolute;
    top: 100%;                   /* sit flush with parent — no hover gap */
    left: -16px;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    padding: var(--space-2);
    z-index: 60;
    margin-top: 12px;            /* visual separation from parent */

    /* Smooth transition instead of display: none — keeps event focus */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 200ms ease,
                transform 200ms cubic-bezier(.2,.8,.2,1),
                visibility 200ms ease;
    pointer-events: none;
}

/* Invisible hover bridge that spans the visual gap so the mouse
   can travel from parent → submenu without losing hover. */
.gsbd-nav__list .sub-menu::before,
.gsbd-nav__list .children::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -16px;                  /* covers the 12px margin + 4px buffer */
    height: 16px;
    background: transparent;
    pointer-events: auto;
}

.gsbd-nav__list li:hover > .sub-menu,
.gsbd-nav__list li:focus-within > .sub-menu,
.gsbd-nav__list li:hover > .children,
.gsbd-nav__list li:focus-within > .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Extend parent <li>'s hover area down so quickly moving past the
   parent edge still keeps the menu open. */
.gsbd-nav__list > li.menu-item-has-children::after,
.gsbd-nav__list > li:has(> .sub-menu)::after,
.gsbd-nav__list > li:has(> .children)::after {
    content: '';
    position: absolute;
    left: -16px; right: -16px;
    top: 100%;
    height: 16px;
    background: transparent;
    pointer-events: auto;
}

.gsbd-nav__list .sub-menu a,
.gsbd-nav__list .children a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: .92rem;
    font-weight: 500;
    transition: background 180ms, color 180ms, padding-left 180ms;
}
.gsbd-nav__list .sub-menu a:hover,
.gsbd-nav__list .children a:hover {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    padding-left: 18px;
}

/* Hide top-level "Football", "Cricket", etc. on header for nav (we put them in nav) */
.gsbd-clock { display: none; } /* clock now in topbar; legacy styles kept below for safety */

/* ------------------------ 7. HERO -------------------------- */
.gsbd-hero {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--border);
}
.gsbd-hero__bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}
.gsbd-hero__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--brand-red);
    display: inline-flex; align-items: center; gap: 10px;
}
.gsbd-hero__label::before {
    content: ''; width: 36px; height: 3px;
    background: var(--brand-red);
}

.gsbd-hero__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-4);
}
.gsbd-hero__main {
    grid-row: 1 / span 2;
    min-height: 540px;
    position: relative;
}
.gsbd-hero__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-4);
}
.gsbd-hero__minis {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.gsbd-hero__empty {
    background: var(--brand-navy);
    color: var(--text-on-dark);
    padding: var(--space-7) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}
.gsbd-hero__empty h1 { color: #fff; font-family: var(--font-display); }

/* Feature card (huge hero) */
.gsbd-feature {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--brand-navy);
    color: #fff;
    height: 100%;
    min-height: 460px;
    display: block;
    isolation: isolate;
}
.gsbd-feature__media { position: absolute; inset: 0; z-index: 1; }
.gsbd-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.gsbd-feature__placeholder { display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-navy) 100%);
}
.gsbd-feature::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(11,27,43,0) 30%, rgba(11,27,43,.55) 65%, rgba(11,27,43,.92) 100%);
}
.gsbd-feature:hover .gsbd-feature__media img { transform: scale(1.04); }
.gsbd-feature__body {
    position: relative; z-index: 3;
    height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-5);
}
.gsbd-feature__badge {
    align-self: flex-start;
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: var(--space-3);
}
.gsbd-feature__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    margin-bottom: var(--space-2);
    letter-spacing: 0.005em;
}
.gsbd-feature__title a { color: #fff; }
.gsbd-feature__title a:hover { color: var(--accent-gold); }
.gsbd-feature__excerpt {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    margin-bottom: var(--space-3);
    max-width: 540px;
}
.gsbd-feature__meta {
    font-size: .85rem; color: rgba(255,255,255,.78);
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: .08em;
}

/* Side hero card (medium) */
.gsbd-side-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-navy);
    color: #fff;
    isolation: isolate;
    min-height: 240px;
    display: block;
}
.gsbd-side-card__media { position: absolute; inset: 0; z-index: 1; }
.gsbd-side-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.gsbd-side-card:hover .gsbd-side-card__media img { transform: scale(1.05); }
.gsbd-side-card__placeholder { display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--brand-electric) 0%, var(--brand-navy) 100%); }
.gsbd-side-card::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(11,27,43,0) 35%, rgba(11,27,43,.92) 100%);
}
.gsbd-side-card__body {
    position: relative; z-index: 3;
    height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
}
.gsbd-side-card__badge {
    align-self: flex-start;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 4px 10px; border-radius: 3px;
    margin-bottom: 8px;
}
.gsbd-side-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.15;
    margin: 0;
}
.gsbd-side-card__title a { color: #fff; }
.gsbd-side-card__title a:hover { color: var(--accent-gold); }

/* Mini cards (bottom row of hero) */
.gsbd-mini {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    display: flex; flex-direction: column;
    gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.gsbd-mini:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--border-strong);
}
.gsbd-mini__badge {
    align-self: flex-start;
    color: var(--brand-red);
    font-family: var(--font-display);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .15em;
}
.gsbd-mini__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
}
.gsbd-mini__title a { color: var(--text-primary); }
.gsbd-mini__title a:hover { color: var(--brand-red); }
.gsbd-mini__meta {
    margin-top: auto;
    font-size: .75rem; color: var(--text-secondary);
    display: flex; gap: 6px; align-items: center;
}

/* ------------------------ 8. TICKER ------------------------ */
.gsbd-ticker {
    background: var(--brand-navy);
    color: #fff;
    border-block: 1px solid rgba(255,255,255,.08);
}
.gsbd-ticker__inner {
    display: flex; align-items: center; gap: var(--space-3);
    padding-block: 12px;
    font-size: .9rem;
    overflow: hidden;
}
.gsbd-ticker__label {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    background: var(--brand-red);
    padding: 6px 14px;
    border-radius: 3px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.gsbd-ticker__list {
    display: flex; gap: var(--space-6);
    flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
}
.gsbd-ticker__list a { color: #fff; opacity: .9; white-space: nowrap; font-weight: 500; }
.gsbd-ticker__list a:hover { opacity: 1; color: var(--accent-gold); }

/* ------------------------ 9. SECTIONS / GRID --------------- */
.gsbd-section { margin-block: var(--space-7); }

.gsbd-section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.gsbd-section__title-block {
    display: flex; flex-direction: column; gap: 2px;
}
.gsbd-section__num {
    font-family: var(--font-display);
    font-size: .8rem; font-weight: 600;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .25em;
}
.gsbd-section__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
}
.gsbd-section__more {
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color var(--transition), gap var(--transition);
    border-bottom: 2px solid var(--brand-navy);
    padding-bottom: 4px;
}
.gsbd-section__more:hover { color: var(--brand-red); border-color: var(--brand-red); gap: 10px; }

.gsbd-section__divider {
    height: 4px; background: var(--brand-navy); margin-bottom: var(--space-5);
    position: relative;
}
.gsbd-section__divider::before {
    content: ''; position: absolute; left: 0; bottom: -4px;
    width: 80px; height: 4px; background: var(--brand-red);
}

.gsbd-grid { display: grid; gap: var(--space-4); }
.gsbd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsbd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gsbd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Magazine layout: 1 large + 3 small */
.gsbd-grid--mag {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
}
.gsbd-grid--mag .gsbd-card:first-child { grid-row: 1 / span 3; }

/* ------------------------ 10. CARDS ------------------------ */
.gsbd-card {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column;
    isolation: isolate;
}
.gsbd-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--border-strong);
}
.gsbd-card__media {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--surface-soft);
    position: relative;
}
.gsbd-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-card:hover .gsbd-card__media img { transform: scale(1.05); }
.gsbd-card__placeholder {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, #E5E8EC, #CDD3DB);
}
.gsbd-card__media .gsbd-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
}
.gsbd-card__body {
    padding: var(--space-3) var(--space-3) var(--space-3);
    display: flex; flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.gsbd-card__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.075rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.005em;
}
.gsbd-card__title a { color: var(--text-primary); }
.gsbd-card__title a:hover { color: var(--brand-red); }
.gsbd-card__meta {
    font-size: .76rem;
    color: var(--text-secondary);
    display: flex; gap: 8px;
    margin-top: auto;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}

/* Category badge */
.gsbd-badge {
    display: inline-block;
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.4;
    width: fit-content;
}
.gsbd-badge:hover { color: #fff; opacity: .92; }
.gsbd-badge--football { background: var(--brand-red); }
.gsbd-badge--cricket  { background: var(--brand-navy); }
.gsbd-badge--top-lists { background: var(--accent-gold); color: var(--brand-navy); }
.gsbd-badge--reviews  { background: #7C3AED; }
.gsbd-badge--guides   { background: var(--accent-bd); }

/* Empty state */
.gsbd-empty-section {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
    color: var(--text-secondary);
}
.gsbd-empty-section p { margin-bottom: var(--space-3); }
.gsbd-empty { color: var(--text-secondary); }

/* ------------------------ 11. CPT ZONES -------------------- */
/* Watch From Bangladesh — editorial split-screen (light theme) */
.gsbd-watch-bd {
    margin-block: var(--space-8);
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px -28px rgba(11,27,43,.20);
    position: relative;
}

/* BD flag-color accent strip across the top edge */
.gsbd-watch-bd__flag {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    display: flex;
    z-index: 5;
}
.gsbd-watch-bd__flag span {
    flex: 1;
    height: 100%;
}
.gsbd-watch-bd__flag span:first-child { background: var(--accent-bd); }
.gsbd-watch-bd__flag span:last-child  { background: var(--brand-red); flex: 0 0 38%; }

/* Hero split: photo left, editorial right */
.gsbd-watch-bd__hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    min-height: 460px;
}

/* Photo side */
.gsbd-watch-bd__photo {
    position: relative;
    overflow: hidden;
    background: var(--brand-navy);
    isolation: isolate;
}
.gsbd-watch-bd__photo img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 1200ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-watch-bd:hover .gsbd-watch-bd__photo img { transform: scale(1.03); }
.gsbd-watch-bd__photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(11,27,43,.45) 0%, transparent 55%);
    z-index: 1;
}
/* Floating BD tab over photo */
.gsbd-watch-bd__tab {
    position: absolute;
    top: 22px; left: 22px;
    z-index: 2;
    background: var(--surface);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .72rem;
    padding: 10px 14px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.30);
}
.gsbd-watch-bd__tab::before {
    content: '';
    width: 22px; height: 4px;
    background: linear-gradient(90deg, var(--accent-bd) 60%, var(--brand-red) 60%);
    border-radius: 2px;
}
/* Photo caption pull-quote (bottom-left over image) */
.gsbd-watch-bd__quote {
    position: absolute;
    bottom: 24px; left: 24px; right: 24px;
    z-index: 2;
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.4;
    font-style: italic;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
    max-width: 480px;
}
.gsbd-watch-bd__quote::before {
    content: '“';
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--accent-gold);
    line-height: 0.6;
    margin-bottom: 8px;
}
.gsbd-watch-bd__quote-author {
    display: block;
    font-style: normal;
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.85);
    margin-top: 10px;
    font-weight: 600;
}
.gsbd-watch-bd__quote-author::before {
    content: '— ';
    color: var(--accent-gold);
}

/* Content side */
.gsbd-watch-bd__content {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}
.gsbd-watch-bd__kicker {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .25em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    width: fit-content;
}
.gsbd-watch-bd__kicker::before {
    content: '';
    width: 36px; height: 3px;
    background: var(--brand-red);
    border-radius: 2px;
    flex-shrink: 0;
}
.gsbd-watch-bd__title {
    font-family: var(--font-display);
    color: var(--brand-navy);
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -.018em;
    margin: 0;
    font-weight: 700;
    max-width: 14ch;
}
.gsbd-watch-bd__title em {
    font-style: normal;
    color: var(--brand-red);
    position: relative;
    display: inline-block;
}
.gsbd-watch-bd__title em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 8px;
    background: rgba(244,180,0,.40);
    z-index: -1;
    transform: skewX(-6deg);
}
.gsbd-watch-bd__lead {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* Quick spec list */
.gsbd-watch-bd__specs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gsbd-watch-bd__specs li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-primary);
    font-weight: 500;
}
.gsbd-watch-bd__specs li::before {
    content: '✓';
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
}
.gsbd-watch-bd__specs li:nth-child(2)::before { background: var(--accent-bd); }
.gsbd-watch-bd__specs li:nth-child(3)::before { background: var(--accent-gold); color: var(--brand-navy); }

.gsbd-watch-bd__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.gsbd-watch-bd__cta { align-self: flex-start; }
.gsbd-watch-bd__cta-secondary {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 200ms, border-color 200ms, gap 200ms;
}
.gsbd-watch-bd__cta-secondary:hover {
    color: var(--brand-red);
    border-bottom-color: var(--brand-red);
}

/* ----- Verification seal — circular stamp on the photo ----- */
.gsbd-watch-bd__seal {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 3;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12) 0%, transparent 60%),
        linear-gradient(135deg, var(--accent-bd) 0%, #054436 100%);
    border: 2px solid rgba(255, 255, 255, .2);
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, .55),
        inset 0 0 0 6px rgba(255, 255, 255, .04),
        inset 0 -3px 12px rgba(0, 0, 0, .25);
    display: grid;
    place-items: center;
    transform: rotate(-8deg);
    isolation: isolate;
}
.gsbd-watch-bd__seal::before {
    /* Inner dashed ring for stamp authenticity */
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .35);
    z-index: 1;
}
.gsbd-watch-bd__seal-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    animation: gsbd-seal-spin 30s linear infinite;
}
.gsbd-watch-bd__seal-text {
    fill: rgba(255, 255, 255, .82);
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.gsbd-watch-bd__seal-core {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #fff;
    text-align: center;
}
.gsbd-watch-bd__seal-mark {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--accent-gold);
    font-weight: 900;
    margin-bottom: 2px;
}
.gsbd-watch-bd__seal-core strong {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1;
}
.gsbd-watch-bd__seal-core em {
    font-style: normal;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: .15em;
    line-height: 1;
    margin-top: 3px;
}
@keyframes gsbd-seal-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .gsbd-watch-bd__seal-svg { animation: none; }
}

/* ----- Dual-language kicker (English + Bengali) ----- */
.gsbd-watch-bd__kicker-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: var(--space-1);
}
.gsbd-watch-bd__kicker-bn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--accent-bd);
    background: rgba(0, 106, 78, .08);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 106, 78, .2);
    line-height: 1.2;
}

/* Reusable inline Bangladesh flag — works on Windows where emoji flags don't render */
.gsbd-bd-flag {
    display: inline-block;
    width: 20px;
    height: 12px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><rect width='10' height='6' fill='%23006A4E'/><circle cx='4.5' cy='3' r='2' fill='%23F42A41'/></svg>") center/contain no-repeat;
    border-radius: 2px;
    vertical-align: -1px;
}

/* ----- Specs list with inline icons ----- */
.gsbd-watch-bd__specs li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gsbd-watch-bd__specs li::before { content: none; }
.gsbd-watch-bd__specs li svg {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 8px;
    background: var(--brand-red);
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(230, 57, 70, .35);
}
.gsbd-watch-bd__specs li:nth-child(2) svg {
    background: var(--accent-bd);
    box-shadow: 0 4px 12px -3px rgba(0, 106, 78, .4);
}
.gsbd-watch-bd__specs li:nth-child(3) svg {
    background: var(--accent-gold);
    color: var(--brand-navy);
    box-shadow: 0 4px 12px -3px rgba(244, 180, 0, .4);
}

/* ----- "Last verified" trust badge ----- */
.gsbd-watch-bd__verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-secondary);
    padding: 6px 12px 6px 10px;
    background: rgba(0, 106, 78, .07);
    border: 1px solid rgba(0, 106, 78, .15);
    border-radius: 999px;
    align-self: flex-start;
    margin-top: var(--space-2);
}
.gsbd-watch-bd__verified strong {
    color: var(--accent-bd);
    font-weight: 700;
}
.gsbd-watch-bd__verified-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bd);
    box-shadow: 0 0 0 0 rgba(0, 106, 78, .6);
    animation: gsbd-pulse-bd 1.8s ease-out infinite;
}
@keyframes gsbd-pulse-bd {
    0%   { box-shadow: 0 0 0 0 rgba(0, 106, 78, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 106, 78, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 106, 78, 0); }
}

/* Dark stat strip beneath the hero */
.gsbd-watch-bd__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--brand-navy);
    color: #fff;
}
.gsbd-watch-bd__strip-cell {
    padding: 22px 24px;
    border-right: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.gsbd-watch-bd__strip-cell:last-child { border-right: 0; }
.gsbd-watch-bd__strip-cell::before {
    content: '';
    position: absolute;
    left: 24px; top: 22px;
    width: 18px; height: 3px;
    background: var(--brand-red);
    border-radius: 2px;
}
.gsbd-watch-bd__strip-cell:nth-child(2)::before { background: var(--accent-bd); }
.gsbd-watch-bd__strip-cell:nth-child(3)::before { background: var(--accent-gold); }
.gsbd-watch-bd__strip-cell:nth-child(4)::before { background: #fff; }
.gsbd-watch-bd__strip-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin: 18px 0 8px;
}
.gsbd-watch-bd__strip-label {
    display: block;
    font-family: var(--font-display);
    font-size: .68rem;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .15em;
    line-height: 1.4;
}

/* Stat strip icon — sits next to the small accent bar */
.gsbd-watch-bd__strip-icon {
    position: absolute;
    top: 16px; right: 18px;
    width: 28px; height: 28px;
    color: rgba(255, 255, 255, .35);
    transition: color 280ms;
}
.gsbd-watch-bd__strip-cell:hover .gsbd-watch-bd__strip-icon { color: rgba(255, 255, 255, .85); }

/* ----- Networks row — "Tested across" trust signal ----- */
.gsbd-watch-bd__networks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 22px;
    padding: 16px 24px;
    background:
        linear-gradient(90deg, rgba(0, 106, 78, .08) 0%, rgba(11, 27, 43, .04) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.gsbd-watch-bd__networks-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gsbd-watch-bd__networks-label svg {
    width: 16px; height: 16px;
    color: var(--accent-bd);
}
.gsbd-watch-bd__networks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gsbd-watch-bd__networks-list li {
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 4px;
    transition: border-color 200ms, transform 200ms, background 200ms;
}
.gsbd-watch-bd__networks-list li:hover {
    border-color: var(--brand-red);
    transform: translateY(-1px);
    background: rgba(230, 57, 70, .04);
}
.gsbd-watch-bd__networks-list li:nth-child(3n+1) { border-bottom: 2px solid var(--brand-red); }
.gsbd-watch-bd__networks-list li:nth-child(3n+2) { border-bottom: 2px solid var(--accent-bd); }
.gsbd-watch-bd__networks-list li:nth-child(3n)   { border-bottom: 2px solid var(--accent-gold); }

/* Featured strip (light) */
.gsbd-watch-bd__featured {
    padding: var(--space-5);
    background: var(--surface-soft);
}
.gsbd-watch-bd__featured-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-navy);
    position: relative;
    gap: var(--space-3);
}
.gsbd-watch-bd__featured-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--brand-red);
}
.gsbd-watch-bd__featured-title {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0;
    color: var(--brand-navy);
    font-weight: 700;
}
.gsbd-watch-bd__featured-link {
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand-red);
    font-weight: 600;
    text-decoration: none;
    transition: gap 240ms;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gsbd-watch-bd__featured-link:hover { gap: 8px; }

.gsbd-watch-bd__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.gsbd-watch-bd__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1),
                box-shadow 320ms,
                border-color 280ms;
    position: relative;
}
.gsbd-watch-bd__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gsbd-shadow-rich);
    border-color: transparent;
}
.gsbd-watch-bd__card a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
}
.gsbd-watch-bd__card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}
.gsbd-watch-bd__card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-watch-bd__card:hover .gsbd-watch-bd__card-img img { transform: scale(1.06); }
.gsbd-watch-bd__card-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--surface);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 5px 11px;
    border-radius: 3px;
    z-index: 2;
    box-shadow: var(--shadow-1);
}
.gsbd-watch-bd__card-body {
    padding: 16px 18px;
}
.gsbd-watch-bd__card-title {
    font-size: .98rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.gsbd-watch-bd__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}
.gsbd-watch-bd__card-arrow {
    color: var(--brand-red);
    font-weight: 700;
}
.gsbd-watch-bd__card-arrow::after {
    content: '→';
    margin-left: 4px;
    transition: transform 240ms;
}
.gsbd-watch-bd__card:hover .gsbd-watch-bd__card-arrow::after { transform: translateX(3px); }

/* Mobile */
@media (max-width: 1024px) {
    .gsbd-watch-bd__hero { grid-template-columns: 1fr; }
    .gsbd-watch-bd__photo { min-height: 280px; max-height: 360px; }
    .gsbd-watch-bd__strip { grid-template-columns: repeat(2, 1fr); }
    .gsbd-watch-bd__strip-cell:nth-child(2) { border-right: 0; }
    .gsbd-watch-bd__strip-cell:nth-child(1),
    .gsbd-watch-bd__strip-cell:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 720px) {
    .gsbd-watch-bd__hero, .gsbd-watch-bd__cards { grid-template-columns: 1fr; }
    .gsbd-watch-bd__strip { grid-template-columns: 1fr; }
    .gsbd-watch-bd__strip-cell {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        text-align: center;
        padding: 26px 16px 22px;
    }
    .gsbd-watch-bd__strip-cell:last-child { border-bottom: 0; }
    .gsbd-watch-bd__strip-cell::before {
        left: 50%;
        top: 14px;
        transform: translateX(-50%);
    }
    .gsbd-watch-bd__strip-num { margin: 14px 0 6px; }
    .gsbd-watch-bd__strip-icon { display: none; }
    .gsbd-watch-bd__featured { padding: var(--space-3); }

    /* ----- Premium mobile content layout ----- */
    .gsbd-watch-bd__content {
        padding: var(--space-5) var(--space-4) var(--space-4);
        gap: 14px;
        text-align: left;
        background:
            radial-gradient(circle at 100% 0%, rgba(0, 106, 78, .08) 0%, transparent 45%),
            radial-gradient(circle at 0% 100%, rgba(230, 57, 70, .06) 0%, transparent 50%);
    }

    /* Kicker group: Bengali pill + English label sit on the same row */
    .gsbd-watch-bd__kicker-group {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 10px;
        margin-bottom: 0;
    }
    .gsbd-watch-bd__kicker-bn {
        font-size: .82rem;
        padding: 4px 10px;
    }
    .gsbd-watch-bd__kicker {
        font-size: .68rem;
        letter-spacing: .22em;
        padding-left: 0;
    }
    .gsbd-watch-bd__kicker::before { display: none; }

    /* Title — tighter line breaks on mobile */
    .gsbd-watch-bd__title {
        font-size: clamp(1.7rem, 9vw, 2.4rem);
        line-height: 0.96;
        letter-spacing: -.022em;
        margin-bottom: 4px;
    }

    /* Lead text size */
    .gsbd-watch-bd__lead {
        font-size: .95rem;
        line-height: 1.55;
    }

    /* Specs — slightly tighter spacing */
    .gsbd-watch-bd__specs {
        gap: 8px;
        margin-block: var(--space-2);
    }
    .gsbd-watch-bd__specs li {
        font-size: .78rem;
        gap: 10px;
    }
    .gsbd-watch-bd__specs li svg {
        width: 30px;
        height: 30px;
        padding: 5px;
    }

    /* Verified trust badge — full row, slightly smaller */
    .gsbd-watch-bd__verified {
        font-size: .68rem;
        padding: 6px 11px 6px 9px;
        letter-spacing: .12em;
    }

    /* CTAs — primary becomes full-width, secondary is a bordered ghost button */
    .gsbd-watch-bd__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: var(--space-3);
    }
    .gsbd-watch-bd__cta {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
    }
    .gsbd-watch-bd__cta-secondary {
        text-align: center;
        padding: 12px 16px;
        border: 1.5px solid var(--border-strong);
        border-bottom-width: 1.5px;
        border-radius: 4px;
        font-size: .76rem;
        color: var(--text-primary);
        transition: background 200ms, border-color 200ms, color 200ms;
    }
    .gsbd-watch-bd__cta-secondary:hover {
        background: var(--surface-alt);
        border-color: var(--brand-red);
        color: var(--brand-red);
    }

    /* Shrink the seal so it doesn't dominate the photo on mobile */
    .gsbd-watch-bd__seal {
        width: 92px;
        height: 92px;
        bottom: 14px;
        right: 14px;
    }
    .gsbd-watch-bd__seal-text { font-size: 7.5px; }
    .gsbd-watch-bd__seal-mark { font-size: 1rem; margin-bottom: 1px; }
    .gsbd-watch-bd__seal-core strong { font-size: .58rem; }
    .gsbd-watch-bd__seal-core em { font-size: .5rem; }

    /* Networks row: keep scrollable horizontally instead of wrapping */
    .gsbd-watch-bd__networks {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 10px;
    }
    .gsbd-watch-bd__networks-list {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .gsbd-watch-bd__networks-list::-webkit-scrollbar { display: none; }
    .gsbd-watch-bd__networks-list li { flex-shrink: 0; }
}

/* ======================================================================
   Premium horizontal scroller — used by player & league showcases
   Edge fades + glass scroll buttons + smooth snap.
   ====================================================================== */
.gsbd-section--scroll { overflow: hidden; }
.gsbd-scroll {
    position: relative;
    /* Edge fade gradients hint that more content is offscreen */
    --gsbd-fade: 48px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gsbd-fade), #000 calc(100% - var(--gsbd-fade)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gsbd-fade), #000 calc(100% - var(--gsbd-fade)), transparent 100%);
}
.gsbd-scroll__rail {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gsbd-fade);
    scrollbar-width: none;
    padding: var(--space-2) var(--gsbd-fade) var(--space-4);
    scroll-behavior: smooth;
}
.gsbd-scroll__rail::-webkit-scrollbar { display: none; }
.gsbd-scroll__rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Premium scroll buttons — frosted glass with chevron SVG */
.gsbd-scroll__btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 6;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(20, 24, 31, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 240ms, transform 240ms cubic-bezier(.2, .8, .2, 1),
                border-color 240ms, box-shadow 240ms;
}
.gsbd-scroll__btn svg { display: block; }
.gsbd-scroll__btn:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 16px 36px -10px rgba(230, 57, 70, .6),
                inset 0 1px 0 rgba(255, 255, 255, .14);
}
.gsbd-scroll__btn:active { transform: translateY(-50%) scale(.98); }
.gsbd-scroll__btn--prev { left: 4px; }
.gsbd-scroll__btn--next { right: 4px; }

/* Hide buttons on touch devices — natural swipe is better */
@media (hover: none) and (pointer: coarse) {
    .gsbd-scroll__btn { display: none; }
    .gsbd-scroll { --gsbd-fade: 24px; }
    .gsbd-scroll__rail { padding-inline: var(--gsbd-fade); }
}

/* ======================================================================
   Player card — premium redesign
   Card surface + media + body + stats + CTA. Rank number sits on media.
   ====================================================================== */
.gsbd-pcard {
    width: 260px;
    flex-shrink: 0;
}
.gsbd-pcard a,
.gsbd-pcard__link {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
}
.gsbd-pcard__link {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 360ms,
                border-color 280ms;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gsbd-pcard__link::before {
    /* Top-edge red stroke that grows on hover for premium polish */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--accent-gold) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
    z-index: 5;
}
.gsbd-pcard:hover .gsbd-pcard__link {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 28px 60px -20px rgba(230, 57, 70, .35),
                0 12px 28px -12px rgba(0, 0, 0, .55);
}
.gsbd-pcard:hover .gsbd-pcard__link::before { transform: scaleX(1); }

/* Crown badge for #1 player */
.gsbd-pcard__crown {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 4;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold) 0%, #ffce3a 100%);
    color: var(--brand-navy);
    display: grid;
    place-items: center;
    font-size: .9rem;
    box-shadow: 0 6px 16px -4px rgba(244, 180, 0, .55),
                inset 0 -2px 0 rgba(0, 0, 0, .15);
}

/* Big editorial rank number sitting over the media */
.gsbd-pcard__rank {
    position: absolute;
    top: 8px; right: 14px;
    z-index: 4;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .14);
    -webkit-text-stroke: 1px rgba(255, 255, 255, .35);
    pointer-events: none;
    transition: color 320ms, -webkit-text-stroke-color 320ms;
}
.gsbd-pcard:hover .gsbd-pcard__rank {
    color: rgba(255, 255, 255, .22);
    -webkit-text-stroke-color: var(--brand-red);
}

/* Media container */
.gsbd-pcard__media {
    display: block;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-navy));
    position: relative;
    isolation: isolate;
}
.gsbd-pcard__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 45%, rgba(11, 27, 43, .55) 80%, rgba(11, 27, 43, .85) 100%);
    pointer-events: none;
}
.gsbd-pcard__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2, .8, .2, 1),
                filter 360ms;
    filter: saturate(1.05);
}
.gsbd-pcard:hover .gsbd-pcard__media img {
    transform: scale(1.08);
    filter: saturate(1.2);
}

/* Body — kicker, name, stats, CTA */
.gsbd-pcard__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    background: var(--surface);
}
.gsbd-pcard__kicker {
    display: block;
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--brand-red);
    line-height: 1.2;
}
.gsbd-pcard__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -.005em;
    color: var(--text-primary);
    transition: color 200ms;
}
.gsbd-pcard:hover .gsbd-pcard__name { color: var(--brand-red); }

/* Stats row — 2 cells with big number + tiny label */
.gsbd-pcard__stats {
    list-style: none;
    margin: 6px 0 0;
    padding: 12px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px solid var(--border);
}
.gsbd-pcard__stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.gsbd-pcard__stats strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.015em;
    font-feature-settings: "tnum";
}
.gsbd-pcard__stats span {
    font-family: var(--font-display);
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
}

/* CTA — appears more prominent on hover */
.gsbd-pcard__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-secondary);
    transition: color 220ms, gap 220ms;
}
.gsbd-pcard__cta::after {
    content: '→';
    transition: transform 220ms;
}
.gsbd-pcard:hover .gsbd-pcard__cta {
    color: var(--brand-red);
    gap: 10px;
}
.gsbd-pcard:hover .gsbd-pcard__cta::after { transform: translateX(3px); }

/* Initials avatar fallback — refined monogram on brand-coherent backdrop.
   The name-derived hue (--gsbd-avatar-hue) only tints a soft accent,
   so cards stay editorial rather than rainbow. */
.gsbd-pcard__avatar {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 90% at 50% 0%,
            hsla(var(--gsbd-avatar-hue, 350), 55%, 45%, .35) 0%,
            transparent 60%),
        linear-gradient(160deg, #16304a 0%, var(--brand-navy) 70%, #060f1c 100%);
    overflow: hidden;
    isolation: isolate;
    transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}
.gsbd-pcard__avatar::before {
    /* Soft inner vignette for depth */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
    z-index: 1;
}
.gsbd-pcard__avatar::after {
    /* Gold accent rule beneath the monogram */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 26%;
    width: 40px;
    height: 2px;
    background: var(--accent-gold);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 3;
    opacity: .9;
    box-shadow: 0 0 12px rgba(244, 180, 0, .5);
}
.gsbd-pcard__avatar-icon {
    /* Hide the generic body silhouette — looked like a placeholder icon */
    display: none;
}
.gsbd-pcard__avatar-mono {
    position: relative;
    z-index: 3;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 7.5vw, 3.8rem);
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .55);
    transform: translateY(-4%);
}
.gsbd-pcard:hover .gsbd-pcard__avatar { transform: scale(1.04); }

/* League card — premium info card (used in 3-col grid) */
.gsbd-leagues-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
@media (max-width: 1024px) { .gsbd-leagues-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .gsbd-leagues-grid { grid-template-columns: 1fr; } }

.gsbd-lcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1),
                box-shadow 320ms,
                border-color 280ms;
    position: relative;
    isolation: isolate;
    width: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.gsbd-lcard::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--brand-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
    z-index: 4;
}
.gsbd-lcard:hover {
    transform: translateY(-5px);
    box-shadow: var(--gsbd-shadow-rich);
    border-color: transparent;
}
.gsbd-lcard:hover::before { transform: scaleY(1); }
.gsbd-lcard a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-primary);
    text-decoration: none;
}

/* Header band — colored gradient with abbreviation */
.gsbd-lcard__head {
    position: relative;
    aspect-ratio: 16/8;
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-navy) 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.gsbd-lcard__head::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.18) 0%, transparent 55%);
    z-index: 1;
}
.gsbd-lcard__head::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px;
    z-index: 1;
    opacity: .5;
}
.gsbd-lcard__abbr {
    position: relative; z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -.018em;
    text-align: center;
    padding: 0 6%;
    text-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.gsbd-lcard__country-tag {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-family: var(--font-display);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 4px 9px;
    border-radius: 3px;
    backdrop-filter: blur(6px);
}
.gsbd-lcard__crown {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: var(--accent-gold);
    color: var(--brand-navy);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .85rem;
    box-shadow: 0 4px 12px rgba(244,180,0,.45);
}

/* Per-league color themes (gradients use the league brand colors) */
.gsbd-lcard[data-slug="english-premier-league"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #38003C 0%, #00FF87 100%);
}
.gsbd-lcard[data-slug="la-liga"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #EE8707 0%, #C8102E 100%);
}
.gsbd-lcard[data-slug="uefa-champions-league"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #001F4D 0%, #0085CA 100%);
}
.gsbd-lcard[data-slug="indian-premier-league"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #004BA0 0%, #FFC72C 100%);
}
.gsbd-lcard[data-slug="bangladesh-premier-league"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #006A4E 0%, #F42A41 100%);
}
.gsbd-lcard[data-slug="pakistan-super-league"] .gsbd-lcard__head {
    background: linear-gradient(135deg, #006400 0%, #00A859 100%);
}

/* Body */
.gsbd-lcard__body {
    padding: var(--space-3) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.gsbd-lcard__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: 1.1;
    margin: 0;
    color: var(--text-primary);
}

/* Stats grid */
.gsbd-lcard__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.gsbd-lcard__stat {
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    background: var(--surface-soft);
}
.gsbd-lcard__stat:last-child { border-right: 0; }
.gsbd-lcard__stat-label {
    display: block;
    font-family: var(--font-display);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}
.gsbd-lcard__stat-val {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Champion + broadcaster rows */
.gsbd-lcard__row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
    font-size: .85rem;
    line-height: 1.3;
}
.gsbd-lcard__row-label {
    font-family: var(--font-display);
    font-size: .62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.2;
}
.gsbd-lcard__row-val {
    font-weight: 600;
    color: var(--text-primary);
}
.gsbd-lcard__row--bd .gsbd-lcard__row-val {
    color: var(--accent-bd);
    font-weight: 700;
}
.gsbd-lcard__row--bd::before {
    content: '';
    width: 20px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><rect width='10' height='6' fill='%23006A4E'/><circle cx='4.5' cy='3' r='2' fill='%23F42A41'/></svg>") center/contain no-repeat;
    border-radius: 2px;
    grid-column: 1; grid-row: 1;
    align-self: center;
    justify-self: center;
}
.gsbd-lcard__row--bd .gsbd-lcard__row-label,
.gsbd-lcard__row--bd .gsbd-lcard__row-val { grid-column: 2; }

/* CTA footer */
.gsbd-lcard__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px var(--space-4);
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-top: auto;
}
.gsbd-lcard__cta-link {
    color: var(--brand-red);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gsbd-lcard__cta-link::after {
    content: '→';
    transition: transform 240ms;
}
.gsbd-lcard:hover .gsbd-lcard__cta-link::after { transform: translateX(4px); }

/* ------------------------ 12. SIDEBAR ---------------------- */
.gsbd-sidebar { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--header-height) + var(--space-3)); }
.gsbd-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}
.gsbd-widget__title {
    font-family: var(--font-display);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--brand-navy);
    position: relative;
}
.gsbd-widget__title::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 40px; height: 2px; background: var(--brand-red);
}
.gsbd-widget--bd {
    background: linear-gradient(135deg, var(--accent-bd) 0%, var(--brand-navy) 100%);
    color: #fff;
    border: 0;
}
.gsbd-widget--bd .gsbd-widget__title { color: #fff; border-color: rgba(255,255,255,.2); }
.gsbd-widget--bd .gsbd-widget__title::after { background: var(--accent-gold); }
.gsbd-widget--bd p { color: rgba(255,255,255,.85); }

.gsbd-popular { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; counter-reset: pop; }
.gsbd-popular__item { counter-increment: pop; position: relative; padding-left: 38px; }
.gsbd-popular__item::before {
    content: counter(pop, decimal-leading-zero);
    position: absolute; left: 0; top: -2px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.4rem;
    color: var(--brand-red);
}
.gsbd-popular__link {
    display: grid; grid-template-columns: 80px 1fr; gap: var(--space-2);
    align-items: center; color: var(--text-primary);
}
.gsbd-popular__thumb {
    display: block; aspect-ratio: 16/9;
    border-radius: 6px; overflow: hidden;
    background: var(--surface-soft);
}
.gsbd-popular__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gsbd-popular__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsbd-popular__body strong {
    font-size: .9rem; line-height: 1.25; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gsbd-popular__body em {
    font-style: normal; font-size: .7rem; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .08em;
}
.gsbd-popular__link:hover strong { color: var(--brand-red); }

.gsbd-bst-card {
    background: var(--brand-navy);
    color: #fff;
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    margin: 0 0 var(--space-3);
}
.gsbd-bst-card__time {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem; font-weight: 700;
    font-feature-settings: "tnum";
    letter-spacing: -.01em;
}
.gsbd-bst-card__label {
    display: block; font-size: .75rem;
    color: rgba(255,255,255,.65);
    margin-top: 6px;
    text-transform: uppercase; letter-spacing: .12em;
}

.gsbd-cat-list { list-style: none; padding: 0; margin: 0; }
.gsbd-cat-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.gsbd-cat-list li:last-child { border-bottom: 0; }
.gsbd-cat-list a {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .04em;
}
.gsbd-cat-list a:hover { color: var(--brand-red); }

/* ------------------------ 13. SINGLE — PREMIUM ARTICLE ---- */

/* ------ Article hero ------ */
.gsbd-article-hero {
    position: relative;
    color: #fff;
    background: var(--brand-navy);
    padding-block: var(--space-7) var(--space-6);
    overflow: hidden;
    isolation: isolate;
    margin-bottom: var(--space-6);
}
.gsbd-article-hero--photo::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--gsbd-hero-img);
    background-size: cover;
    background-position: center;
    z-index: -2;
    opacity: .55;
    filter: saturate(0.92);
}
.gsbd-article-hero::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11,27,43,.75) 0%, rgba(11,27,43,.92) 100%),
        radial-gradient(circle at 90% 0%, rgba(230,57,70,.22) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(244,180,0,.10) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
}
.gsbd-article-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
}

.gsbd-breadcrumb {
    font-family: var(--font-display);
    font-size: .76rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.gsbd-breadcrumb a {
    color: rgba(255,255,255,.78);
    transition: color 200ms;
}
.gsbd-breadcrumb a:hover { color: var(--accent-gold); }
.gsbd-breadcrumb span { color: rgba(255,255,255,.35); }

.gsbd-article-hero__badge {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-size: .76rem;
    padding: 6px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.gsbd-article-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -.018em;
    margin: 0 0 var(--space-3);
    text-transform: none;
    max-width: 820px;
}

.gsbd-article-hero__dek {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255,255,255,.85);
    margin: 0 0 var(--space-4);
    max-width: 720px;
    font-weight: 400;
}

.gsbd-article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,.15);
}
.gsbd-article-hero__divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.18);
}
.gsbd-article-hero__meta-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gsbd-article-hero__meta-block time,
.gsbd-article-hero__meta-block > span:last-child {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
}
.gsbd-author { display: inline-flex; align-items: center; gap: 12px; }
.gsbd-author__avatar { border-radius: 50%; border: 2px solid rgba(255,255,255,.2); }
.gsbd-author__block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gsbd-author__label {
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.55);
    font-weight: 600;
}
.gsbd-author__name {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: .95rem;
    letter-spacing: .02em;
}

/* ------ Article layout (body + sidebar) ------ */
.gsbd-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    align-items: start;
}

/* ------ Article body ------ */
.gsbd-article {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px -28px rgba(11,27,43,.18);
    min-width: 0;
}
.gsbd-article__content {
    font-size: 1.12rem;
    line-height: 1.78;
    color: var(--text-primary);
    max-width: 720px;
    margin: 0 auto;
}
.gsbd-article__content > *:first-child {
    font-size: 1.22rem;
    line-height: 1.55;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-4);
}
.gsbd-article__content > * { max-width: 100%; }
.gsbd-article__content p { margin: 0 0 var(--space-3); }

.gsbd-article__content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -.012em;
    margin: var(--space-6) 0 var(--space-3);
    padding-left: 18px;
    border-left: 5px solid var(--brand-red);
    color: var(--brand-navy);
}
.gsbd-article__content h3 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    margin: var(--space-5) 0 var(--space-2);
    color: var(--brand-navy);
    letter-spacing: -.01em;
}
.gsbd-article__content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: var(--space-4) 0 var(--space-2);
}

.gsbd-article__content blockquote {
    border-left: 4px solid var(--brand-red);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-5) 0;
    background: var(--surface-soft);
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.55;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--brand-navy);
}

.gsbd-article__content ul, .gsbd-article__content ol {
    list-style: revert;
    padding-left: 1.4em;
    margin: 0 0 var(--space-3);
}
.gsbd-article__content ul li, .gsbd-article__content ol li {
    margin-bottom: 6px;
}
.gsbd-article__content ul li::marker { color: var(--brand-red); }
.gsbd-article__content ol li::marker { color: var(--brand-red); font-weight: 700; }

.gsbd-article__content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-4) 0;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 16px -8px rgba(11,27,43,.2);
    font-size: .98rem;
}
.gsbd-article__content thead th {
    background: var(--brand-navy);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    padding: 14px 18px;
    text-align: left;
}
.gsbd-article__content tbody th,
.gsbd-article__content tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.gsbd-article__content tbody th {
    background: var(--surface-soft);
    font-weight: 700;
    color: var(--brand-navy);
    width: 30%;
}
.gsbd-article__content tbody tr:last-child td,
.gsbd-article__content tbody tr:last-child th { border-bottom: 0; }
.gsbd-article__content tbody tr:hover td { background: rgba(230,57,70,.03); }

.gsbd-article__content a {
    color: var(--brand-red);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(230,57,70,.35);
    transition: border-color 200ms, color 200ms;
}
.gsbd-article__content a:hover {
    color: var(--brand-red-dark);
    border-bottom-color: var(--brand-red);
}

.gsbd-article__content img {
    border-radius: var(--radius);
    margin-block: var(--space-4);
}
.gsbd-article__content figure { margin-block: var(--space-4); }
.gsbd-article__content figcaption {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    margin-top: var(--space-2);
}
.gsbd-article__content code {
    background: var(--surface-alt);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .92em;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.gsbd-article__content pre {
    background: var(--brand-navy);
    color: #fff;
    padding: var(--space-3);
    border-radius: var(--radius);
    overflow-x: auto;
}
.gsbd-article__content pre code { background: transparent; color: inherit; }

/* ------ Article footer ------ */
.gsbd-article__foot {
    max-width: 720px;
    margin: var(--space-5) auto 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}
.gsbd-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.gsbd-tags__label {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--text-muted);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}
.gsbd-tags__item {
    background: var(--surface-soft);
    color: var(--text-primary);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all 200ms;
}
.gsbd-tags__item:hover {
    background: var(--brand-navy);
    color: #fff;
    border-color: var(--brand-navy);
    transform: translateY(-1px);
}

/* ------ Author bio card ------ */
.gsbd-author-bio {
    max-width: 720px;
    margin: var(--space-5) auto 0;
    padding: var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
    overflow: hidden;
}
.gsbd-author-bio::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 80px; height: 4px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--accent-gold) 100%);
}
.gsbd-author-bio__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-1);
}
.gsbd-author-bio__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gsbd-author-bio__kicker {
    font-family: var(--font-display);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand-red);
    font-weight: 700;
}
.gsbd-author-bio__name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-navy);
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.gsbd-author-bio__desc {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
    font-size: .95rem;
}
.gsbd-author-bio__links {
    display: flex;
    gap: var(--space-3);
    margin-top: 4px;
}
.gsbd-author-bio__links a {
    font-family: var(--font-display);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--brand-red);
    text-decoration: none;
    transition: gap 200ms, color 200ms;
}
.gsbd-author-bio__links a:hover {
    color: var(--brand-red-dark);
    padding-left: 4px;
}

/* ------ Article sidebar ------ */
.gsbd-article-sidebar { min-width: 0; }
.gsbd-article-sidebar .gsbd-sidebar { gap: var(--space-3); top: calc(var(--header-height) + 64px + var(--space-3)); }

/* ------ Page (legacy gsbd-single fallback) ------ */
.gsbd-single {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
}
.gsbd-single__head { margin-bottom: var(--space-4); }
.gsbd-single__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    line-height: 1.05;
    margin-block: var(--space-3);
}
.gsbd-single__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    color: var(--text-secondary); font-size: .85rem;
    text-transform: uppercase; letter-spacing: .08em;
    font-family: var(--font-display);
}
.gsbd-author { display: inline-flex; align-items: center; gap: 8px; }
.gsbd-author__avatar { border-radius: 50%; }
.gsbd-author__name { font-weight: 600; color: var(--text-primary); text-transform: uppercase; }

.gsbd-single__hero { margin: var(--space-4) calc(var(--space-6) * -1); }
.gsbd-single__hero img { width: 100%; }
.gsbd-single__hero figcaption { padding: var(--space-2) var(--space-6); color: var(--text-secondary); font-size: .85rem; }

.gsbd-single__content { font-size: 1.0625rem; line-height: 1.75; }
.gsbd-single__content > * { max-width: var(--container-narrow); }
.gsbd-single__content > .alignwide { max-width: 1080px; }
.gsbd-single__content > .alignfull { max-width: none; margin-inline: calc(var(--space-6) * -1); }
.gsbd-single__content h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin-top: var(--space-6);
    border-left: 4px solid var(--brand-red);
    padding-left: var(--space-3);
}
.gsbd-single__content h3 { margin-top: var(--space-5); }
.gsbd-single__content blockquote {
    border-left: 4px solid var(--brand-red);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    background: var(--surface-soft);
    font-style: italic; font-size: 1.1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.gsbd-single__content table {
    width: 100%; border-collapse: collapse;
    margin: var(--space-4) 0;
    background: var(--surface);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-1);
}
.gsbd-single__content th, .gsbd-single__content td {
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
}
.gsbd-single__content th {
    background: var(--brand-navy); color: #fff;
    font-family: var(--font-display);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; font-size: .85rem;
}
.gsbd-single__content tr:last-child td { border-bottom: 0; }
.gsbd-single__content tr:nth-child(even) td { background: var(--surface-soft); }

.gsbd-single__content img { border-radius: var(--radius); margin-block: var(--space-3); }
.gsbd-single__content figure { margin-block: var(--space-4); }
.gsbd-single__content figcaption { color: var(--text-secondary); font-size: .85rem; text-align: center; margin-top: var(--space-2); }
.gsbd-single__content code { background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; font-size: .92em; }
.gsbd-single__content pre { background: var(--brand-navy); color: #fff; padding: var(--space-3); border-radius: var(--radius); overflow-x: auto; }
.gsbd-single__content pre code { background: transparent; color: inherit; }

.gsbd-single__foot {
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: space-between; align-items: center;
}
.gsbd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gsbd-tags__label {
    font-family: var(--font-display);
    font-size: .8rem; color: var(--text-secondary);
    margin-right: 4px; text-transform: uppercase; letter-spacing: .1em;
}
.gsbd-tags__item {
    background: var(--surface-soft); color: var(--text-primary);
    padding: 4px 12px; border-radius: 999px; font-size: .82rem;
    border: 1px solid var(--border);
}
.gsbd-tags__item:hover { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

.gsbd-share { display: flex; align-items: center; gap: 8px; }
.gsbd-share__label {
    font-size: .8rem; color: var(--text-secondary);
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: .1em;
}
.gsbd-share__btn {
    padding: 6px 14px;
    background: var(--surface-soft);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: .82rem; font-weight: 600;
    border: 1px solid var(--border);
}
.gsbd-share__btn:hover { background: var(--brand-electric); color: #fff; border-color: var(--brand-electric); }

/* Page */
.gsbd-page { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
.gsbd-page__title { font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 2.6rem); }
.gsbd-page__hero { margin: var(--space-4) calc(var(--space-6) * -1); }
.gsbd-page__hero img { width: 100%; }
.gsbd-page__content { line-height: 1.75; }
.gsbd-page__content h2 { font-family: var(--font-display); margin-top: var(--space-5); }

/* Category hero */
.gsbd-cat-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 60%, var(--brand-electric) 130%);
    color: #fff;
    padding-block: var(--space-7) var(--space-6);
    position: relative;
    overflow: hidden;
}
.gsbd-cat-hero::before {
    content: ''; position: absolute;
    right: -150px; top: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(230,57,70,.18) 0%, transparent 60%);
    pointer-events: none;
}
.gsbd-cat-hero__crumb {
    font-family: var(--font-display); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .15em;
    color: rgba(255,255,255,.7);
    margin-bottom: var(--space-3);
}
.gsbd-cat-hero__crumb a { color: rgba(255,255,255,.7); }
.gsbd-cat-hero__crumb a:hover { color: var(--accent-gold); }
.gsbd-cat-hero__title {
    font-family: var(--font-display);
    color: #fff; margin: 0 0 var(--space-2);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: -.005em;
}
.gsbd-cat-hero__desc { color: rgba(255,255,255,.85); max-width: 720px; }

.gsbd-archive__head { margin-bottom: var(--space-4); }
.gsbd-archive__title { font-family: var(--font-display); margin-bottom: var(--space-2); }

/* Pagination */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--space-5); }
.page-numbers {
    display: inline-grid; place-items: center;
    min-width: 44px; height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.page-numbers:hover { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.page-numbers.current { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }

/* ------------------------ 14. FORMS / BUTTONS ------------- */
.gsbd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 600; font-size: .92rem;
    text-transform: uppercase; letter-spacing: .08em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    line-height: 1.2;
}
.gsbd-btn--primary {
    background: var(--brand-red); color: #fff;
    box-shadow: 0 4px 16px rgba(230,57,70,.32);
}
.gsbd-btn--primary:hover {
    background: var(--brand-red-dark); transform: translateY(-2px); color: #fff;
    box-shadow: 0 8px 22px rgba(230,57,70,.44);
}
.gsbd-btn--secondary { background: transparent; color: var(--brand-navy); border-color: var(--brand-navy); }
.gsbd-btn--secondary:hover { background: var(--brand-navy); color: #fff; }
.gsbd-btn--ghost { padding: 10px 18px; background: rgba(255,255,255,.12); color: inherit; border-color: rgba(255,255,255,.25); }
.gsbd-btn--ghost:hover { background: rgba(255,255,255,.22); color: inherit; }
.gsbd-widget .gsbd-btn--ghost { background: var(--surface-soft); color: var(--brand-electric); border-color: var(--border); }
.gsbd-widget .gsbd-btn--ghost:hover { background: var(--brand-electric); color: #fff; border-color: var(--brand-electric); }
.gsbd-widget--bd .gsbd-btn--ghost {
    background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25);
}
.gsbd-widget--bd .gsbd-btn--ghost:hover { background: var(--accent-gold); color: var(--brand-navy); border-color: var(--accent-gold); }

.gsbd-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(11, 27, 43, .55);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px;
    transition: border-color 220ms, box-shadow 220ms, background 220ms;
}
.gsbd-search::before {
    /* Inline magnifier icon, no DOM change */
    content: '';
    width: 18px; height: 18px;
    margin-left: 16px;
    flex-shrink: 0;
    background: currentColor;
    color: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") center/contain no-repeat;
    transition: color 220ms;
}
.gsbd-search:focus-within {
    border-color: var(--brand-red);
    background: rgba(11, 27, 43, .85);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, .18),
                0 18px 40px -18px rgba(230, 57, 70, .35);
}
.gsbd-search:focus-within::before { color: var(--brand-red); }
.gsbd-search__input {
    flex: 1;
    padding: 14px 8px 14px 14px;
    border: 0; outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    min-width: 0;
}
.gsbd-search__input::placeholder {
    color: var(--text-muted);
    opacity: .85;
}
.gsbd-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gsbd-search__submit {
    background: var(--brand-red);
    color: #fff;
    border: 0;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(230, 57, 70, .6);
    transition: background 200ms, transform 200ms, box-shadow 200ms;
}
.gsbd-search__submit:hover {
    background: var(--brand-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(230, 57, 70, .7);
}
.gsbd-search__submit:active { transform: translateY(0); }

@media (max-width: 640px) {
    /* Deconstruct the pill-in-pill look: input and submit become separate standalone elements */
    .gsbd-search {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .gsbd-search:focus-within {
        background: transparent;
        box-shadow: none;
    }
    /* Drop the form-level icon on mobile — we paint it inside the input instead so it's perfectly centered */
    .gsbd-search::before { display: none; }
    input.gsbd-search__input[type="search"] {
        width: 100%;
        padding: 14px 16px 14px 44px;
        background-color: rgba(11, 27, 43, .55);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
        background-repeat: no-repeat;
        background-position: 14px center;
        background-size: 18px 18px;
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }
    input.gsbd-search__input[type="search"]:focus {
        background-color: rgba(11, 27, 43, .85);
        border-color: var(--brand-red);
        box-shadow: 0 0 0 4px rgba(230, 57, 70, .18);
    }
    .gsbd-search__submit {
        width: 100%;
        padding: 14px;
        font-size: .82rem;
    }
    .gsbd-search-panel { padding-block: var(--space-4); }
}

input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
}
input:focus, textarea:focus { border-color: var(--brand-red); outline: 0; box-shadow: 0 0 0 3px rgba(230,57,70,.15); }

/* ------------------------ 15. CHEAT SHEET ----------------- */
.gsbd-cheatsheet {
    background:
        radial-gradient(circle at 92% 0%, rgba(244,180,0,.14) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(230,57,70,.12) 0%, transparent 50%),
        linear-gradient(135deg, #061a2c 0%, var(--brand-navy) 50%, #0d2942 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-block: var(--space-7);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 60px -28px rgba(11,27,43,.40);
}
.gsbd-cheatsheet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--accent-bd) 0%, var(--accent-bd) 30%,
        var(--accent-gold) 30%, var(--accent-gold) 60%,
        var(--brand-red) 60%, var(--brand-red) 100%);
}
.gsbd-cheatsheet::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}

.gsbd-cheatsheet__head {
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-5);
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.gsbd-cheatsheet__kicker {
    color: var(--accent-gold);
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25em;
    display: inline-block;
    margin-bottom: var(--space-2);
}
.gsbd-cheatsheet__title {
    font-family: var(--font-display);
    color: #fff;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.05;
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: -.018em;
    font-weight: 700;
}
.gsbd-cheatsheet__lead {
    color: rgba(255,255,255,.72);
    margin: 0;
    line-height: 1.5;
}

.gsbd-cheatsheet__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gsbd-cheatsheet__col {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 22px 20px 20px;
    position: relative;
    transition: background 240ms, transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms;
}
.gsbd-cheatsheet__col:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
    transform: translateY(-3px);
}
.gsbd-cheatsheet__col-num {
    position: absolute;
    top: 16px; right: 18px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: rgba(255,255,255,.06);
    line-height: 0.9;
    letter-spacing: -.02em;
}
.gsbd-cheatsheet__col-title {
    font-family: var(--font-display);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0 0 var(--space-3);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: relative;
    color: #fff;
    font-weight: 700;
}
.gsbd-cheatsheet__col-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 32px; height: 2px;
    background: var(--brand-red);
}
.gsbd-cheatsheet__col:nth-child(2) .gsbd-cheatsheet__col-title::after { background: var(--accent-bd); }
.gsbd-cheatsheet__col:nth-child(3) .gsbd-cheatsheet__col-title::after { background: var(--accent-gold); }

.gsbd-cheatsheet__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gsbd-cheatsheet__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-size: .82rem;
}
.gsbd-cheatsheet__list li span {
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    min-width: 0;
    flex-shrink: 1;
}
.gsbd-cheatsheet__list li strong {
    color: #fff;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    font-feature-settings: "tnum";
}

.gsbd-cheatsheet__cta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,.08);
}
.gsbd-cheatsheet__cta a {
    color: var(--accent-gold);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    text-decoration: none;
    transition: color 240ms, padding-left 240ms;
}
.gsbd-cheatsheet__cta a:hover {
    color: #fff;
    padding-left: 4px;
}

/* (Old Telegram styles below — kept inert) */
.gsbd-telegram {
    background:
        radial-gradient(circle at 90% 0%, rgba(0,136,204,.32) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(244,180,0,.15) 0%, transparent 50%),
        linear-gradient(135deg, #061a2c 0%, var(--brand-navy) 50%, #0d2942 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-block: var(--space-7);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.gsbd-telegram::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0088CC 0%, #29B6F6 100%);
}
.gsbd-telegram::after {
    content: '✈';
    position: absolute;
    right: -20px; bottom: -40px;
    font-size: 14rem;
    line-height: 1;
    color: rgba(255,255,255,.04);
    transform: rotate(-12deg);
    pointer-events: none;
}
.gsbd-telegram__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
    align-items: center;
}
.gsbd-telegram__copy { min-width: 0; }
.gsbd-telegram__label {
    color: #29B6F6;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .78rem;
    margin-bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gsbd-telegram__title {
    font-family: var(--font-display);
    color: #fff;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.05;
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: -.018em;
}
.gsbd-telegram__lead {
    color: rgba(255,255,255,.78);
    margin: 0 0 var(--space-3);
    line-height: 1.55;
    max-width: 540px;
}
.gsbd-telegram__perks {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.gsbd-telegram__perks li {
    font-family: var(--font-display);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}
.gsbd-telegram__perks li::before {
    content: '✓';
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0088CC;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
}
.gsbd-telegram__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.gsbd-telegram__btn {
    background: linear-gradient(135deg, #0088CC 0%, #29B6F6 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: var(--radius);
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    box-shadow: 0 12px 32px -10px rgba(0,136,204,.55),
                0 2px 8px -2px rgba(0,0,0,.3);
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms;
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    max-width: 360px;
}
.gsbd-telegram__btn:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 18px 40px -10px rgba(0,136,204,.7),
                0 4px 12px -2px rgba(0,0,0,.35);
}
.gsbd-telegram__btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.gsbd-telegram__btn strong {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gsbd-telegram__btn em {
    font-style: normal;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.78);
    margin-top: 2px;
}
.gsbd-telegram__alt {
    color: rgba(255,255,255,.7);
    font-family: var(--font-display);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    transition: color 220ms, padding-left 220ms;
}
.gsbd-telegram__alt:hover { color: var(--accent-gold); padding-left: 4px; }

/* "Did You Know?" trivia widget */
.gsbd-widget--trivia {
    background:
        radial-gradient(circle at 100% 0%, rgba(244,180,0,.18) 0%, transparent 60%),
        linear-gradient(155deg, #1a1230 0%, #0d1826 75%, var(--brand-navy) 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    padding: 26px 22px 22px;
}
.gsbd-widget--trivia::before {
    content: '?';
    position: absolute;
    right: 6px; top: -20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 8.5rem;
    color: rgba(244,180,0,.10);
    line-height: 1;
    pointer-events: none;
}
.gsbd-widget--trivia::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 3px;
    background: var(--accent-gold);
}
.gsbd-widget--trivia__badge {
    display: inline-block;
    background: rgba(244,180,0,.18);
    color: var(--accent-gold);
    border: 1px solid rgba(244,180,0,.3);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}
.gsbd-widget--trivia__quote {
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 var(--space-3);
    position: relative;
    z-index: 1;
    padding-left: 16px;
    border-left: 3px solid var(--accent-gold);
    font-style: italic;
}
.gsbd-widget--trivia__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}
.gsbd-widget--trivia__category {
    font-family: var(--font-display);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--accent-gold);
    font-weight: 700;
}
.gsbd-widget--trivia__year {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -.01em;
    font-feature-settings: "tnum";
}
.gsbd-widget--trivia__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.78);
    font-family: var(--font-display);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    text-decoration: none;
    transition: color 220ms, gap 220ms;
    position: relative;
    z-index: 1;
}
.gsbd-widget--trivia__more:hover {
    color: var(--accent-gold);
    gap: 10px;
}

/* (Old PDF widget styles — kept inert in case used elsewhere) */
.gsbd-widget--pdf {
    background: linear-gradient(155deg, #0F2A1F 0%, var(--brand-navy) 75%, #14273C 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    padding: var(--space-4) 22px var(--space-4);
}
.gsbd-widget--pdf::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 4px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--brand-red) 100%);
}
.gsbd-widget--pdf::after {
    content: 'PDF';
    position: absolute;
    right: -10px; bottom: -8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 6rem;
    color: rgba(255,255,255,.04);
    line-height: 1;
    pointer-events: none;
}
.gsbd-widget--pdf__badge {
    display: inline-block;
    background: var(--accent-gold);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 5px 11px;
    border-radius: 3px;
    margin-bottom: var(--space-3);
}
.gsbd-widget--pdf__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -.005em;
    color: #fff;
    margin: 0 0 var(--space-3);
    font-weight: 700;
}
.gsbd-widget--pdf__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gsbd-widget--pdf__list li {
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    padding-left: 16px;
    position: relative;
    font-weight: 500;
}
.gsbd-widget--pdf__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 8px; height: 2px;
    background: var(--accent-gold);
    border-radius: 1px;
}
.gsbd-widget--pdf__cta {
    background: var(--accent-gold);
    color: var(--brand-navy);
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    transition: transform 220ms, background 220ms, color 220ms, box-shadow 220ms;
    border: 0;
    box-shadow: 0 8px 20px -6px rgba(244,180,0,.4);
}
.gsbd-widget--pdf__cta:hover {
    background: #fff;
    color: var(--brand-navy);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(255,255,255,.3);
}
.gsbd-widget--pdf__note {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.55);
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
}

/* ------------------------ 16. FOOTER ----------------------- */
.gsbd-footer { background: var(--brand-navy); color: var(--text-on-dark); margin-top: var(--space-7); position: relative; }
.gsbd-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-red) 33%, var(--accent-gold) 33%, var(--accent-gold) 66%, var(--accent-bd) 66%, var(--accent-bd) 100%);
}

.gsbd-footer__top {
    padding-block: var(--space-7) var(--space-5);
    display: grid; grid-template-columns: 1.4fr 3fr; gap: var(--space-6);
}
.gsbd-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.gsbd-footer__name {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700;
    color: #fff; text-transform: uppercase;
    letter-spacing: .02em;
}
.gsbd-footer__tag {
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.5;
}
.gsbd-footer__social { display: flex; gap: 10px; margin-top: var(--space-2); }
.gsbd-footer__social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    display: inline-grid; place-items: center;
    transition: background var(--transition), color var(--transition), transform var(--transition);
    border: 1px solid rgba(255,255,255,.1);
}
.gsbd-footer__social a:hover {
    background: var(--brand-red); color: #fff;
    transform: translateY(-2px);
    border-color: var(--brand-red);
}

.gsbd-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.gsbd-footer__cols h4 {
    font-family: var(--font-display);
    color: #fff; font-size: .9rem;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: .12em;
    padding-bottom: 8px;
    position: relative;
}
.gsbd-footer__cols h4::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 24px; height: 2px; background: var(--brand-red);
}
.gsbd-footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gsbd-footer__cols a {
    color: rgba(255,255,255,.7); font-size: .92rem;
    transition: color var(--transition), padding-left var(--transition);
    display: inline-block;
}
.gsbd-footer__cols a:hover { color: var(--accent-gold); padding-left: 4px; }

.gsbd-footer__bar { background: rgba(0,0,0,.30); padding-block: var(--space-3); border-top: 1px solid rgba(255,255,255,.05); }
.gsbd-footer__bar-inner {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: space-between; align-items: center;
}
.gsbd-footer__bar-inner small {
    color: rgba(255,255,255,.55);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .1em;
}

/* ------------------------ 17. MISC ------------------------- */
.gsbd-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--text-secondary);
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: .08em;
}
.gsbd-meta__dot { opacity: .6; }

.gsbd-mobile-tabs { display: none; }

.gsbd-404 { padding: var(--space-7) var(--space-3); text-align: center; max-width: 600px; margin: 0 auto; }
.gsbd-404__code { font-family: var(--font-display); font-size: 8rem; font-weight: 700; color: var(--brand-red); margin: 0; line-height: 1; }
.gsbd-404__title { font-family: var(--font-display); font-size: 2.4rem; margin: var(--space-2) 0; }
.gsbd-404__lead { color: var(--text-secondary); margin-bottom: var(--space-4); }
.gsbd-404__links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }

/* ============ COMMENTS ============ */
.gsbd-comments {
    max-width: 880px;
    margin: var(--space-7) auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px -28px rgba(11,27,43,.18);
}
.gsbd-comments::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 80px; height: 4px;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--accent-gold) 100%);
}

.gsbd-comments__head,
.gsbd-comments__form-head {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--brand-navy);
    position: relative;
    text-align: center;
}
.gsbd-comments__head::after,
.gsbd-comments__form-head::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--brand-red);
    transform: translateX(-50%);
}
.gsbd-comments__form-head { margin-top: var(--space-6); }
.gsbd-comments__icon {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    line-height: 1;
}
.gsbd-comments__title,
.gsbd-comments__form-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin: 0 0 6px;
    color: var(--brand-navy);
    font-weight: 700;
    line-height: 1.1;
}
.gsbd-comments__lead,
.gsbd-comments__form-lead {
    color: var(--text-secondary);
    font-size: .92rem;
    margin: 0;
    line-height: 1.5;
}

/* Comment list */
.gsbd-comments__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.gsbd-comments__list .children {
    list-style: none;
    padding-left: var(--space-4);
    margin: var(--space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-left: 3px solid var(--border);
    position: relative;
}
.gsbd-comments__list .children::before {
    content: '↩';
    position: absolute;
    left: -10px; top: -2px;
    width: 17px; height: 17px;
    background: var(--surface);
    color: var(--brand-red);
    font-size: .8rem;
    text-align: center;
    line-height: 17px;
}
.gsbd-comments__list li.comment { list-style: none; }

/* Comment body */
.gsbd-comments__list .comment-body {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-3);
    row-gap: 6px;
    transition: border-color 200ms, background 200ms;
}
.gsbd-comments__list .comment-body:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

.gsbd-comments__list .comment-author.vcard {
    grid-column: 1;
    grid-row: 1 / span 4;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gsbd-comments__list .comment-author .avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: 0 2px 8px rgba(11,27,43,.12);
    display: block;
}
.gsbd-comments__list .comment-author .fn {
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    color: var(--brand-navy);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    word-break: break-word;
}
.gsbd-comments__list .comment-author .url {
    color: var(--brand-navy);
    text-decoration: none;
}
.gsbd-comments__list .comment-author .says { display: none; }

.gsbd-comments__list .comment-meta {
    grid-column: 2;
    grid-row: 1;
}
.gsbd-comments__list .comment-meta .comment-author { display: none; }
.gsbd-comments__list .comment-metadata {
    font-family: var(--font-display);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
    font-weight: 600;
}
.gsbd-comments__list .comment-metadata a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms;
}
.gsbd-comments__list .comment-metadata a:hover { color: var(--brand-red); }
.gsbd-comments__list .comment-metadata .edit-link { margin-left: 8px; color: var(--brand-electric); }

.gsbd-comments__list .comment-content {
    grid-column: 2;
    grid-row: 2;
    color: var(--text-primary);
    line-height: 1.65;
    font-size: .98rem;
}
.gsbd-comments__list .comment-content p { margin: 0 0 8px; }
.gsbd-comments__list .comment-content p:last-child { margin-bottom: 0; }
.gsbd-comments__list .comment-content a {
    color: var(--brand-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gsbd-comments__list .reply {
    grid-column: 2;
    grid-row: 3;
    margin-top: 4px;
}
.gsbd-comments__list .comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand-red);
    font-weight: 700;
    text-decoration: none;
    padding: 7px 14px;
    border: 1.5px solid var(--brand-red);
    border-radius: 4px;
    transition: all 220ms;
    line-height: 1;
}
.gsbd-comments__list .comment-reply-link:hover {
    background: var(--brand-red);
    color: #fff;
    transform: translateY(-1px);
}

/* Pending */
.gsbd-comments__list .comment-awaiting-moderation,
.gsbd-comments__list .comment-pending {
    display: inline-block;
    background: var(--accent-gold);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 700;
    margin-bottom: 6px;
}

/* Form */
.gsbd-comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.gsbd-comment-form__row {
    display: grid;
    gap: var(--space-3);
}
.gsbd-comment-form__row--two {
    grid-template-columns: 1fr 1fr;
}
.gsbd-comment-form p { margin: 0; }
.gsbd-comment-form label {
    display: block;
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brand-navy);
    font-weight: 700;
    margin-bottom: 8px;
}
.gsbd-required {
    color: var(--brand-red);
    margin-left: 2px;
}
.gsbd-comment-form input[type="text"],
.gsbd-comment-form input[type="email"],
.gsbd-comment-form input[type="url"],
.gsbd-comment-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-body);
    transition: border-color 200ms, box-shadow 200ms;
}
.gsbd-comment-form input:focus,
.gsbd-comment-form textarea:focus {
    border-color: var(--brand-red);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}
.gsbd-comment-form textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.55;
}
.gsbd-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}
.gsbd-comment-form .comment-form-cookies-consent input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-red);
    flex-shrink: 0;
}
.gsbd-comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-family: var(--font-body);
    font-size: .92rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    font-weight: 400;
}
.gsbd-comment-form .form-submit {
    margin-top: var(--space-2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Cancel reply link */
#cancel-comment-reply-link {
    display: inline-block;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 12px;
    transition: color 200ms;
}
#cancel-comment-reply-link:hover { color: var(--brand-red); }

/* Reply form (when nested) */
.comment-respond {
    margin-top: var(--space-3);
}
.comment .comment-respond {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-3);
}

/* Closed state */
.gsbd-comments__closed {
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: var(--space-4);
    background: var(--surface-soft);
    border-radius: var(--radius);
    margin: var(--space-4) 0 0;
}

/* Mobile */
@media (max-width: 720px) {
    .gsbd-comments { padding: var(--space-4); }
    .gsbd-comment-form__row--two { grid-template-columns: 1fr; }
    .gsbd-comments__list .comment-body {
        padding: var(--space-3);
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
    }
    .gsbd-comments__list .comment-author .avatar { width: 44px; height: 44px; }
    .gsbd-comments__list .comment-author .fn { font-size: .65rem; }
    .gsbd-comments__list .children { padding-left: var(--space-3); }
}

/* ------------------------ 18. RESPONSIVE ------------------ */
@media (max-width: 1100px) {
    .gsbd-hero__grid { grid-template-columns: 1.4fr 1fr; }
    .gsbd-watch-bd__inner { grid-template-columns: 1fr; }
    .gsbd-watch-bd__cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .gsbd-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .gsbd-footer__top { grid-template-columns: 1fr; }
    .gsbd-footer__cols { grid-template-columns: repeat(2, 1fr); }
    .gsbd-hero__grid { grid-template-columns: 1fr; }
    .gsbd-hero__main { grid-row: auto; min-height: 380px; }
    .gsbd-hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .gsbd-hero__minis { grid-template-columns: repeat(4, 1fr); }
    .gsbd-telegram__inner { grid-template-columns: 1fr; }
    .gsbd-cheatsheet__grid { grid-template-columns: 1fr; }
    .gsbd-watch-bd__cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .gsbd-layout { grid-template-columns: 1fr; }
    .gsbd-article-layout { grid-template-columns: 1fr; }
    .gsbd-sidebar { position: static; }
    .gsbd-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .gsbd-hero__minis { grid-template-columns: repeat(2, 1fr); }
    .gsbd-grid--mag { grid-template-columns: 1fr; }
    .gsbd-grid--mag .gsbd-card:first-child { grid-row: auto; }
    .gsbd-article { padding: var(--space-4); }
    .gsbd-author-bio { grid-template-columns: 64px 1fr; padding: var(--space-3); }
    .gsbd-author-bio__avatar { width: 64px; height: 64px; }
}

@media (max-width: 720px) {
    :root { --header-height: var(--header-height-mobile); }
    .gsbd-topbar { display: none; }
    .gsbd-burger { display: flex; }
    .gsbd-search-toggle span { display: none; }
    .gsbd-nav {
        position: fixed; inset: var(--header-height-mobile) 0 0;
        background: var(--surface);
        padding: var(--space-3);
        transform: translateX(100%);
        transition: transform var(--transition);
        overflow-y: auto;
        z-index: 49;
    }
    .gsbd-nav.is-open { transform: translateX(0); }
    .gsbd-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .gsbd-nav__list li { border-bottom: 1px solid var(--border); }
    .gsbd-nav__list a { padding: 16px 4px; }
    .gsbd-nav__list .sub-menu { position: static; box-shadow: none; border: 0; padding-left: var(--space-3); display: block; background: transparent; }

    .gsbd-mobile-tabs {
        display: grid; grid-template-columns: repeat(4, 1fr);
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 40;
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 12px rgba(0,0,0,.05);
    }
    .gsbd-mobile-tabs a {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: .68rem; color: var(--text-primary);
        padding: 6px 4px;
    }
    .gsbd-mobile-tabs a span { font-size: 1.2rem; }
    .gsbd-mobile-tabs a em {
        font-style: normal; font-weight: 600;
        font-family: var(--font-display);
        text-transform: uppercase; letter-spacing: .04em;
    }

    body { padding-bottom: 64px; }

    .gsbd-grid--3, .gsbd-grid--4 { grid-template-columns: 1fr; }

    .gsbd-hero__side { grid-template-columns: 1fr; }
    .gsbd-hero__minis { grid-template-columns: 1fr; }
    .gsbd-feature { min-height: 320px; }

    .gsbd-single, .gsbd-page { padding: var(--space-3); }
    .gsbd-single__hero, .gsbd-page__hero { margin-inline: calc(var(--space-3) * -1); }
    .gsbd-single__content > .alignfull { margin-inline: calc(var(--space-3) * -1); }

    .gsbd-footer__cols { grid-template-columns: 1fr 1fr; }
    .gsbd-telegram { padding: var(--space-4); }
    .gsbd-telegram__btn { max-width: 100%; }
    .gsbd-cheatsheet { padding: var(--space-4); }
    .gsbd-watch-bd__inner { padding: var(--space-4); }
}

@media (max-width: 480px) {
    .gsbd-footer__cols { grid-template-columns: 1fr; }
}

/* =====================================================================
   PREMIUM v3 — overrides + new components
   Card hover, section number stamps, premium sidebar widgets,
   guides spotlight magazine layout, scroll-reveal animations,
   single-post share rail, reading progress bar.
   ===================================================================== */

/* ------------------------ Premium tokens ------------------ */
:root {
    --gsbd-ring-red:  0 0 0 2px var(--brand-red);
    --gsbd-ring-soft: 0 0 0 1px var(--border);
    --gsbd-shadow-rich: 0 24px 60px -18px rgba(11,27,43,.30), 0 8px 24px -12px rgba(11,27,43,.18);
    --gsbd-shadow-feature: 0 32px 80px -28px rgba(11,27,43,.45), 0 12px 32px -12px rgba(230,57,70,.18);
}

/* ------------------------ Premium card --------------------- */
.gsbd-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1),
                box-shadow 360ms cubic-bezier(.2,.8,.2,1),
                border-color 220ms;
    position: relative;
    isolation: isolate;
}
.gsbd-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow 320ms;
}
.gsbd-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gsbd-shadow-rich);
    border-color: transparent;
}
.gsbd-card:hover::after {
    box-shadow: inset 0 0 0 1px var(--brand-red);
}
.gsbd-card__media {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}
.gsbd-card__media::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,27,43,0) 50%, rgba(11,27,43,.55) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 320ms;
    pointer-events: none;
}
.gsbd-card:hover .gsbd-card__media::before { opacity: 1; }
.gsbd-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-card:hover .gsbd-card__media img { transform: scale(1.06); }

.gsbd-card .gsbd-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.gsbd-card__time {
    position: absolute; bottom: 12px; right: 12px; z-index: 2;
    background: rgba(11,27,43,.78);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 280ms, transform 280ms;
}
.gsbd-card:hover .gsbd-card__time { opacity: 1; transform: translateY(0); }

.gsbd-card__body {
    padding: 18px 20px 20px;
    display: flex; flex-direction: column;
    gap: 10px;
    flex: 1;
}
.gsbd-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.005em;
}
.gsbd-card__title a { color: var(--text-primary); transition: color 220ms; }
.gsbd-card__title a:hover { color: var(--brand-red); }

.gsbd-card__excerpt {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.gsbd-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 6px;
}
.gsbd-card__meta {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
}
.gsbd-card__meta::before {
    content: '';
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand-red);
    flex-shrink: 0;
}
.gsbd-card__more {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 220ms, gap 220ms;
}
.gsbd-card__more:hover { color: var(--brand-red); gap: 8px; }
.gsbd-card__more::after {
    content: '→';
    transition: transform 220ms;
}
.gsbd-card:hover .gsbd-card__more::after { transform: translateX(2px); }

/* ------------------------ Premium section heads (v4) ------ */
.gsbd-section { margin-block: var(--space-8); }
.gsbd-section__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: 22px;
    border: 0;
    position: relative;
}
.gsbd-section__head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--brand-navy);
}
.gsbd-section__head::before {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 100px; height: 6px;
    background: var(--brand-red);
    z-index: 2;
    transition: width 320ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-section:hover .gsbd-section__head::before { width: 160px; }

/* Number box — broadcast-graphic style */
.gsbd-section__num-box {
    display: grid;
    place-items: center;
    width: 88px; height: 88px;
    background: var(--brand-red);
    color: #fff;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    box-shadow: 0 12px 28px -8px rgba(230,57,70,.5),
                inset 0 -3px 0 rgba(0,0,0,.18);
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    transform: rotate(-3deg);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-section__num-box::before {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 10px; height: 10px;
    background: var(--accent-gold);
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.gsbd-section:hover .gsbd-section__num-box { transform: rotate(0deg) scale(1.04); }

/* Title block stack */
.gsbd-section__title-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.gsbd-section__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3rem);
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -.018em;
    color: var(--brand-navy);
}
.gsbd-section__title em {
    color: var(--brand-red);
    font-style: normal;
}
.gsbd-section__lead {
    margin: 0;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .15em;
}
.gsbd-section__lead strong {
    color: var(--brand-red);
    font-weight: 700;
}

/* "View all" — outlined button */
.gsbd-section__more {
    background: transparent;
    border: 2px solid var(--brand-navy);
    color: var(--brand-navy);
    padding: 11px 18px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 240ms, color 240ms, transform 240ms, gap 240ms;
    align-self: center;
    white-space: nowrap;
}
.gsbd-section__more::after {
    content: '→';
    transition: transform 240ms;
}
.gsbd-section__more:hover {
    background: var(--brand-navy);
    color: #fff;
    transform: translateY(-1px);
    border-color: var(--brand-navy);
    gap: 12px;
}
.gsbd-section__more:hover::after { transform: translateX(2px); }

/* Mobile collapse */
@media (max-width: 720px) {
    .gsbd-section__head {
        grid-template-columns: auto 1fr;
        gap: var(--space-3);
        row-gap: var(--space-3);
    }
    .gsbd-section__num-box { width: 64px; height: 64px; font-size: 2rem; border-radius: 8px; }
    .gsbd-section__more {
        grid-column: 1 / -1;
        justify-self: start;
        padding: 8px 14px;
        font-size: .72rem;
    }
}

/* ------------------------ Guides — horizontal hero + grid ---- */
.gsbd-guides-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    box-shadow: 0 12px 40px -16px rgba(11,27,43,.18);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1),
                box-shadow 320ms,
                border-color 280ms;
    position: relative;
    isolation: isolate;
    min-height: 460px;       /* anchor the row height so image and body match */
}
.gsbd-guides-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 80px -28px rgba(11,27,43,.45),
                0 12px 32px -16px rgba(230,57,70,.12);
    border-color: transparent;
}
.gsbd-guides-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-red) 0%, var(--accent-gold) 100%);
    z-index: 3;
}

.gsbd-guides-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--brand-navy);
    isolation: isolate;
    /* No aspect-ratio — fills the full row height */
    min-height: 100%;
}
.gsbd-guides-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-guides-hero:hover .gsbd-guides-hero__media img { transform: scale(1.05); }
.gsbd-guides-hero__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(11,27,43,.10) 0%, transparent 35%, transparent 70%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
    z-index: 1;
}

.gsbd-guides-hero__ribbon {
    position: absolute;
    top: 20px; left: 20px;
    z-index: 2;
    background: var(--accent-gold);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    padding: 8px 16px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.32);
}
.gsbd-guides-hero__ribbon::before {
    content: '★';
    font-size: 1.05em;
    line-height: 1;
}
.gsbd-guides-hero__readtime {
    position: absolute;
    bottom: 20px; left: 20px;
    z-index: 2;
    background: rgba(11,27,43,.85);
    color: #fff;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gsbd-guides-hero__readtime::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-red);
    flex-shrink: 0;
}

.gsbd-guides-hero__body {
    padding: var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
}
.gsbd-guides-hero__cat {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.gsbd-guides-hero__cat::before {
    content: '';
    width: 28px; height: 3px;
    background: var(--brand-red);
    border-radius: 2px;
}
.gsbd-guides-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.018em;
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
}
.gsbd-guides-hero__title a {
    color: var(--text-primary);
    transition: color 200ms;
}
.gsbd-guides-hero__title a:hover { color: var(--brand-red); }
.gsbd-guides-hero__excerpt {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0;
}
.gsbd-guides-hero__meta {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.gsbd-guides-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-red);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .1em;
    margin-top: var(--space-2);
    text-decoration: none;
    width: fit-content;
    border-bottom: 2px solid var(--brand-red);
    padding-bottom: 4px;
    transition: gap 240ms, color 240ms, border-color 240ms;
}
.gsbd-guides-hero__cta::after {
    content: '→';
    transition: transform 240ms;
}
.gsbd-guides-hero:hover .gsbd-guides-hero__cta { gap: 12px; }
.gsbd-guides-hero:hover .gsbd-guides-hero__cta::after { transform: translateX(2px); }

/* 3-card grid below the hero */
.gsbd-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 1024px) {
    .gsbd-guides-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .gsbd-guides-hero__media {
        aspect-ratio: 16/9;       /* on stacked mobile, give image a fixed ratio */
        min-height: 280px;
    }
    .gsbd-guides-hero__body { padding: var(--space-4); }
}
@media (max-width: 720px) {
    .gsbd-guides-grid { grid-template-columns: 1fr; }
    .gsbd-guides-hero__title { font-size: 1.4rem; }
    .gsbd-guides-hero__ribbon { top: 14px; left: 14px; padding: 6px 12px; font-size: .7rem; }
}

.gsbd-spotlight__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.gsbd-spotlight__item {
    display: grid;
    grid-template-columns: 56px 1fr 110px;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    transition: background 240ms, padding-left 240ms;
    position: relative;
}
.gsbd-spotlight__item:last-child { border-bottom: 0; }
.gsbd-spotlight__item:hover {
    background: var(--surface-soft);
    padding-left: 24px;
}
.gsbd-spotlight__item::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: var(--brand-red);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-spotlight__item:hover::before { transform: scaleY(1); }

.gsbd-spotlight__item-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--brand-red);
    line-height: 1;
    letter-spacing: -.02em;
}
.gsbd-spotlight__item-title {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-head);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -.005em;
}
.gsbd-spotlight__item-title a { color: var(--text-primary); transition: color 200ms; }
.gsbd-spotlight__item-title a:hover { color: var(--brand-red); }
.gsbd-spotlight__item-meta {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-display);
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.gsbd-spotlight__item-meta strong {
    color: var(--brand-red);
    font-weight: 700;
}
.gsbd-spotlight__item-thumb {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 110px; height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-soft);
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.gsbd-spotlight__item-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms;
}
.gsbd-spotlight__item:hover .gsbd-spotlight__item-thumb img { transform: scale(1.06); }

@media (max-width: 720px) {
    .gsbd-spotlight__item { grid-template-columns: 36px 1fr 80px; padding: 12px 14px; column-gap: 10px; }
    .gsbd-spotlight__item-num { font-size: 1.4rem; }
    .gsbd-spotlight__item-thumb { width: 80px; height: 56px; }
    .gsbd-spotlight__item-title { font-size: .9rem; }
}

@media (max-width: 1100px) {
    .gsbd-spotlight { grid-template-columns: 1fr; }
}

/* ------------------------ Premium sidebar widgets --------- */
.gsbd-sidebar { gap: var(--space-3); }
.gsbd-widget {
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.gsbd-widget__title {
    font-size: .82rem;
    letter-spacing: .2em;
    margin-bottom: 18px;
    padding-bottom: 12px;
}

/* Popular widget — massive ranks */
.gsbd-popular { gap: 16px; }
.gsbd-popular__item { padding-left: 0; }
.gsbd-popular__item::before {
    display: none;
}
.gsbd-popular__link {
    grid-template-columns: 32px 70px 1fr;
    align-items: center;
    gap: 12px;
}
.gsbd-popular__rank {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-red);
    line-height: 0.9;
    letter-spacing: -.02em;
    display: block;
}
.gsbd-popular__thumb {
    aspect-ratio: 4/3;
    border-radius: 6px;
}
.gsbd-popular__body strong {
    font-size: .88rem;
    -webkit-line-clamp: 2;
}
.gsbd-popular__body em {
    font-family: var(--font-display);
    letter-spacing: .12em;
    margin-top: 4px;
}

/* Premium BST card */
.gsbd-widget--bst {
    background: var(--brand-navy);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.gsbd-widget--bst::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(244,180,0,.20) 0%, transparent 70%);
    pointer-events: none;
}
.gsbd-widget--bst .gsbd-widget__title {
    color: #fff;
    border-color: rgba(255,255,255,.18);
}
.gsbd-widget--bst .gsbd-widget__title::after { background: var(--accent-gold); }
.gsbd-bst-card {
    background: transparent;
    padding: 0;
    margin-bottom: 18px;
    text-align: left;
    position: relative;
}
.gsbd-bst-card__time {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}
.gsbd-bst-card__label {
    color: rgba(255,255,255,.6);
    margin-top: 8px;
}
.gsbd-bst-card__strip {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; gap: 12px; flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.gsbd-bst-card__strip span { color: rgba(255,255,255,.55); }
.gsbd-bst-card__strip strong { color: var(--accent-gold); font-weight: 700; }

/* Today's matches widget */
.gsbd-widget--matches { padding: 20px 22px; }
.gsbd-matches { display: flex; flex-direction: column; gap: 12px; }
.gsbd-matches__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface-soft);
    border-radius: 8px;
    transition: background 200ms;
    border: 1px solid transparent;
}
.gsbd-matches__row:hover { background: #fff; border-color: var(--border); }
.gsbd-matches__sport {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--brand-navy);
    color: #fff;
    font-size: 1rem;
}
.gsbd-matches__sport--cricket { background: var(--accent-bd); }
.gsbd-matches__sport--football { background: var(--brand-red); }
.gsbd-matches__teams {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
}
.gsbd-matches__time {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand-red);
    text-align: right;
}

/* Categories widget */
.gsbd-widget--cats .gsbd-cat-list li {
    padding: 12px 0;
    transition: padding-left 200ms;
}
.gsbd-widget--cats .gsbd-cat-list li:hover { padding-left: 6px; }
.gsbd-widget--cats .gsbd-cat-list a::before {
    content: '/'; color: var(--brand-red); margin-right: 8px;
    font-family: var(--font-display); font-weight: 600;
}

/* Newsletter sidebar widget */
.gsbd-widget--newsletter {
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 60%, #7a1d27 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    position: relative;
}
.gsbd-widget--newsletter::after {
    content: '';
    position: absolute;
    left: -40px; bottom: -80px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(244,180,0,.22) 0%, transparent 70%);
    pointer-events: none;
}
.gsbd-widget--newsletter .gsbd-widget__title {
    color: var(--accent-gold);
    border-color: rgba(255,255,255,.2);
}
.gsbd-widget--newsletter .gsbd-widget__title::after { background: #fff; }
.gsbd-widget--newsletter p { color: rgba(255,255,255,.9); margin-bottom: 14px; }
.gsbd-widget--newsletter .gsbd-widget__form {
    display: flex; flex-direction: column; gap: 10px;
}
.gsbd-widget--newsletter input {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    border-radius: 4px;
}
.gsbd-widget--newsletter input::placeholder { color: rgba(255,255,255,.6); }
.gsbd-widget--newsletter input:focus {
    background: rgba(255,255,255,.22);
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(244,180,0,.25);
}
.gsbd-widget--newsletter .gsbd-btn--primary {
    background: var(--accent-gold);
    color: var(--brand-navy);
    box-shadow: 0 4px 16px rgba(244,180,0,.34);
}
.gsbd-widget--newsletter .gsbd-btn--primary:hover {
    background: #fff;
    color: var(--brand-red);
}

/* Watch from BD widget */
.gsbd-widget--bd {
    background: linear-gradient(135deg, var(--accent-bd) 0%, #054436 60%, var(--brand-navy) 130%);
    overflow: hidden;
    position: relative;
}
.gsbd-widget--bd::before {
    content: '';
    position: absolute;
    right: -24px; top: -16px;
    width: 140px; height: 84px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><rect width='10' height='6' fill='%23006A4E'/><circle cx='4.5' cy='3' r='2' fill='%23F42A41'/></svg>") center/contain no-repeat;
    border-radius: 6px;
    opacity: .14;
    pointer-events: none;
    transform: rotate(-4deg);
}

/* ------------------------ Scroll-reveal animations -------- */
/* Removed — was hiding cards on full-page renders. Hover effects provide
   enough interactivity. The data-gsbd-reveal attribute is now a no-op. */

/* ------------------------ Single-post premium ------------- */
.gsbd-single {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    border: 0;
}
.gsbd-single__head {
    margin-bottom: var(--space-5);
    text-align: left;
}
.gsbd-single__head .gsbd-badge {
    margin-bottom: 16px;
    font-size: .78rem;
    padding: 5px 14px;
}
.gsbd-single__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.015em;
}
.gsbd-single__excerpt {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 var(--space-3);
    max-width: 720px;
}

/* Floating share rail (desktop only) */
.gsbd-share-rail {
    position: fixed;
    left: max(16px, calc(50% - 600px));
    top: 30vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 30;
    opacity: 0;
    transition: opacity 320ms;
    pointer-events: none;
}
.gsbd-share-rail.is-visible { opacity: 1; pointer-events: auto; }
.gsbd-share-rail a {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--brand-navy);
    box-shadow: var(--shadow-1);
    transition: transform 220ms, background 220ms, color 220ms;
}
.gsbd-share-rail a:hover {
    transform: translateY(-2px);
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}
@media (max-width: 1280px) { .gsbd-share-rail { display: none; } }

/* Reading progress bar (top of single posts) */
.gsbd-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 60;
    pointer-events: none;
}
.gsbd-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-red), var(--accent-gold));
    transition: width 80ms ease-out;
    box-shadow: 0 0 8px rgba(230,57,70,.5);
}

/* ------------------------ Premium pagination ------------- */
.nav-links { gap: 6px; }
.page-numbers {
    border-radius: 6px;
    border-width: 1.5px;
    transition: all 240ms;
}
.page-numbers:hover { transform: translateY(-1px); }

/* ------------------------ Premium player/league cards ---- */
.gsbd-pcard__media::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(230,57,70,.0) 0%, rgba(230,57,70,.10) 100%);
    transition: opacity 320ms;
    opacity: 0;
}
.gsbd-pcard:hover .gsbd-pcard__media::before { opacity: 1; }

.gsbd-lcard {
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms, border-color 240ms;
    position: relative;
    overflow: hidden;
}
.gsbd-lcard::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--brand-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-lcard:hover { transform: translateY(-3px); box-shadow: var(--gsbd-shadow-rich); border-color: transparent; }
.gsbd-lcard:hover::before { transform: scaleY(1); }

/* (Watch-BD premium styles consolidated into the main definition above) */

/* ------------------------ Responsive overrides ----------- */
@media (max-width: 720px) {
    .gsbd-section__title-block {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .gsbd-section__num {
        grid-row: auto;
        font-size: 2rem;
    }
    .gsbd-section__kicker, .gsbd-section__title { grid-column: 1; }
    .gsbd-spotlight { gap: var(--space-3); }
    .gsbd-spotlight__item { grid-template-columns: 32px 1fr 80px; padding: 12px 14px; }
    .gsbd-spotlight__item-thumb { width: 80px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    [data-gsbd-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   19. DARK MODE OVERRIDES
   Tokens (surface/text/border) are dark-tuned in :root above.
   This block fixes spots that hard-code brand-navy as a foreground,
   white as a background, or rely on light-mode shadows.
   ===================================================================== */

/* Sticky header — was rgba(255,255,255,.96). Switch to dark glass. */
.gsbd-header {
    background: rgba(20, 24, 31, .88);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* Search toggle (header pill) */
.gsbd-search-toggle {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.gsbd-search-toggle:hover {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}

/* Mobile burger — bars must be visible on dark */
.gsbd-burger { color: var(--text-primary); }
.gsbd-burger span { background: var(--text-primary); }

/* Logo accent text */
.gsbd-logo { color: var(--text-primary); }
.gsbd-logo__text em { color: var(--text-secondary); }

/* Nav dropdown hover state */
.gsbd-nav__list .sub-menu a:hover,
.gsbd-nav__list .children a:hover {
    background: rgba(230, 57, 70, .14);
    color: var(--brand-red);
}

/* Mobile slide-out nav panel */
@media (max-width: 720px) {
    .gsbd-nav { background: var(--surface); }
    .gsbd-mobile-tabs {
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .35);
    }
}

/* Section heads — divider line + "view all" pill */
.gsbd-section__head::after { background: var(--border-strong); }
.gsbd-section__title { color: var(--text-primary); }
.gsbd-section__more {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.gsbd-section__more:hover {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}
.gsbd-section__divider { background: var(--border-strong); }

/* Card image placeholder gradient (was light grays) */
.gsbd-card__placeholder {
    background: linear-gradient(135deg, var(--surface-alt), var(--surface-soft));
}

/* Watch-BD editorial block */
.gsbd-watch-bd__title { color: var(--text-primary); }
.gsbd-watch-bd__featured-head { border-bottom-color: var(--border-strong); }
.gsbd-watch-bd__featured-title { color: var(--text-primary); }
.gsbd-watch-bd__tab {
    background: var(--surface);
    color: var(--text-primary);
}
.gsbd-watch-bd__card-tag {
    background: var(--surface);
    color: var(--text-primary);
}

/* Article content headings + body chrome */
.gsbd-article__content h2,
.gsbd-article__content h3,
.gsbd-article__content blockquote { color: var(--text-primary); }
.gsbd-article__content tbody th { color: var(--text-primary); }
.gsbd-article__content tbody tr:hover td { background: rgba(230, 57, 70, .08); }
.gsbd-article { box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .55); }

/* Author bio card */
.gsbd-author-bio__name { color: var(--text-primary); }
.gsbd-author-bio__avatar { border-color: var(--surface-alt); }

/* Single-post legacy fallback */
.gsbd-single { box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .55); }
.gsbd-single__title,
.gsbd-page__title { color: var(--text-primary); }

/* Pagination current page (kept on brand-navy — bump contrast) */
.page-numbers.current {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

/* Forms / buttons */
.gsbd-btn--secondary {
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.gsbd-btn--secondary:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* Sidebar widget title underline */
.gsbd-widget__title {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
}

/* Today's matches widget rows */
.gsbd-matches__row {
    background: var(--surface-alt);
}
.gsbd-matches__row:hover {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

/* Comments — lift the comment card off the page bg */
.gsbd-comments { box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .55); }
.gsbd-comments__head,
.gsbd-comments__form-head { border-bottom-color: var(--border-strong); }
.gsbd-comments__title,
.gsbd-comments__form-title { color: var(--text-primary); }
.gsbd-comments__list .comment-body {
    background: var(--surface-alt);
    border-color: var(--border);
}
.gsbd-comments__list .comment-body:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}
.gsbd-comments__list .comment-author .avatar {
    border-color: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.gsbd-comments__list .comment-author .fn,
.gsbd-comments__list .comment-author .url { color: var(--text-primary); }
.gsbd-comments__list .children { border-left-color: var(--border-strong); }
.gsbd-comments__list .children::before { background: var(--surface); }
.gsbd-comment-form label { color: var(--text-primary); }
.gsbd-comments__closed { background: var(--surface-alt); }

/* Tag pill hover (was brand-navy → blends with header) */
.gsbd-tags__item:hover {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}

/* Share rail (single-post floating share) */
.gsbd-share-rail a {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

/* Spotlight list hover row */
.gsbd-spotlight__item:hover { background: var(--surface-alt); }

/* Footer is already navy (still readable since it's darker than the page);
   no change needed beyond the existing styles. */

/* =====================================================================
   20. MOBILE UX v2
   Modernised mobile header, slide-out drawer, footer, and bottom tabs.
   Drawer keeps the legacy single-panel slide pattern (.gsbd-nav itself
   slides in from the right). A box-shadow on the panel doubles as a
   subtle scrim over the rest of the viewport.
   ===================================================================== */
@media (max-width: 720px) {

    /* ---- Mobile header polish ----
       NB: backdrop-filter MUST be off on mobile because Chrome makes any
       element with backdrop-filter a containing block for position:fixed
       descendants. The drawer (.gsbd-nav) lives inside the header, so a
       backdrop-filter here would anchor the drawer to the 68px header
       instead of the viewport — collapsing it to a 160px-tall stub. */
    .gsbd-header {
        background: rgba(20, 24, 31, .96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 8px 24px -16px rgba(0, 0, 0, .5);
    }
    .gsbd-header__inner {
        grid-template-columns: 1fr auto auto;
        column-gap: var(--space-3);
        padding-block: 6px;
    }
    .custom-logo { max-height: 42px; }

    /* Round icon-only search button */
    .gsbd-search-toggle {
        width: 40px; height: 40px;
        padding: 0;
        border-width: 1.5px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }
    .gsbd-search-toggle svg { width: 18px; height: 18px; }

    /* Burger — bigger hit target, centred */
    .gsbd-burger {
        width: 40px; height: 40px;
        border-radius: 50%;
        gap: 5px;
    }
    .gsbd-burger span { width: 20px; height: 2px; }

    /* ---- Slide-out drawer (single-panel pattern) ---- */
    .gsbd-nav {
        position: fixed;
        top: var(--header-height-mobile);
        right: 0;
        bottom: 0;
        left: auto;
        width: min(85vw, 360px);
        background: var(--surface);
        padding: var(--space-3) var(--space-3) calc(var(--space-7) + 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 320ms cubic-bezier(.2, .8, .2, 1),
                    box-shadow 320ms ease;
        z-index: 49;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    .gsbd-nav.is-open {
        transform: translateX(0);
        /* Massive box-shadow doubles as a scrim over the rest of the page */
        box-shadow: -16px 0 40px rgba(0, 0, 0, .35),
                    -100vw 0 0 100vw rgba(0, 0, 0, .55);
    }

    .gsbd-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .gsbd-nav__list > li {
        border-bottom: 1px solid var(--border);
        position: relative;
    }
    .gsbd-nav__list > li:last-child { border-bottom: 0; }

    .gsbd-nav__list > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 6px;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-primary);
        position: relative;
    }

    /* Replace the desktop red underline with a chevron arrow */
    .gsbd-nav__list > li > a::after {
        content: '';
        position: static;
        width: 8px; height: 8px;
        border: 0;
        border-right: 2px solid var(--text-muted);
        border-bottom: 2px solid var(--text-muted);
        background: transparent;
        transform: rotate(-45deg);
        flex-shrink: 0;
        transition: border-color 200ms, transform 200ms;
    }
    .gsbd-nav__list > li:hover > a,
    .gsbd-nav__list > li.current-menu-item > a,
    .gsbd-nav__list > li.current-cat > a,
    .gsbd-nav__list > li.current-menu-parent > a {
        color: var(--brand-red);
    }
    .gsbd-nav__list > li:hover > a::after,
    .gsbd-nav__list > li.current-menu-item > a::after {
        border-color: var(--brand-red);
        transform: rotate(-45deg) translate(2px, 2px);
    }

    /* Active red accent strip on the right edge */
    .gsbd-nav__list > li.current-menu-item::before,
    .gsbd-nav__list > li.current-cat::before {
        content: '';
        position: absolute;
        right: calc(var(--space-3) * -1); top: 12px; bottom: 12px;
        width: 3px;
        background: var(--brand-red);
        border-radius: 2px 0 0 2px;
    }

    /* Sub-menu = always-open accordion (visually nested) */
    .gsbd-nav__list .sub-menu,
    .gsbd-nav__list .children {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        background: transparent;
        box-shadow: none;
        border: 0;
        padding: 0 0 12px 18px;
        margin: -4px 0 0;
        display: block;
    }
    .gsbd-nav__list .sub-menu::before,
    .gsbd-nav__list .children::before { display: none; }
    .gsbd-nav__list .sub-menu a,
    .gsbd-nav__list .children a {
        padding: 9px 6px;
        font-size: .82rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-secondary);
        border-radius: 4px;
    }
    .gsbd-nav__list .sub-menu a:hover,
    .gsbd-nav__list .children a:hover {
        background: rgba(230, 57, 70, .08);
        color: var(--brand-red);
        padding-left: 12px;
    }

    /* ---- Footer mobile polish ---- */
    .gsbd-footer__top {
        padding-block: var(--space-6) var(--space-4);
        gap: var(--space-6);
    }
    .gsbd-footer__brand {
        text-align: center;
        align-items: center;
    }
    .gsbd-footer__name { font-size: 1.5rem; letter-spacing: .04em; }
    .gsbd-footer__tag {
        font-size: .92rem;
        max-width: 320px;
        margin-inline: auto;
        color: rgba(255, 255, 255, .65);
    }
    .gsbd-footer__social { justify-content: center; gap: 12px; }
    .gsbd-footer__social a { width: 44px; height: 44px; }

    /* Center every column on mobile, kill WP's default bullets, refine type */
    .gsbd-footer__cols {
        gap: var(--space-5) var(--space-3);
        text-align: center;
    }
    .gsbd-footer__cols > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .gsbd-footer__cols h4 {
        font-size: .76rem;
        margin: 0 0 14px;
        padding-bottom: 10px;
        letter-spacing: .18em;
        color: rgba(255, 255, 255, .92);
        position: relative;
        display: inline-block;
    }
    /* Center the red underline accent under the heading */
    .gsbd-footer__cols h4::after {
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 2px;
    }
    .gsbd-footer__cols ul {
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    /* Strip the bullet markers WP injects via wp_list_categories */
    .gsbd-footer__cols li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .gsbd-footer__cols li::marker { content: ''; }
    .gsbd-footer__cols a {
        font-size: .9rem;
        padding: 4px 8px;
        display: inline-block;
        color: rgba(255, 255, 255, .72);
    }
    /* Override the desktop "padding-left on hover" indent — keep it centered */
    .gsbd-footer__cols a:hover {
        color: var(--accent-gold);
        padding-left: 8px;
    }

    /* Subtle divider between footer top and bar */
    .gsbd-footer__bar {
        padding-block: var(--space-3);
        border-top: 1px solid rgba(255, 255, 255, .06);
        background: rgba(0, 0, 0, .30);
    }
    .gsbd-footer__bar-inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    .gsbd-footer__bar-inner small { font-size: .68rem; }

    /* ---- Bottom tab bar polish ---- */
    .gsbd-mobile-tabs {
        background: rgba(20, 24, 31, .96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
        padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    }
    .gsbd-mobile-tabs a {
        gap: 4px;
        padding: 8px 4px;
        color: var(--text-secondary);
        font-weight: 500;
        position: relative;
        transition: color 200ms;
    }
    .gsbd-mobile-tabs a:hover { color: var(--brand-red); }
    .gsbd-mobile-tabs a span {
        font-size: 1.35rem;
        line-height: 1;
        filter: grayscale(.2);
        transition: transform 200ms, filter 200ms;
    }
    .gsbd-mobile-tabs a:hover span {
        transform: translateY(-2px);
        filter: none;
    }
    .gsbd-mobile-tabs a em {
        font-size: .62rem;
        letter-spacing: .08em;
    }

    body { padding-bottom: 72px; }
}

/* =====================================================================
   21. MOBILE ARTICLE / SINGLE-POST POLISH
   Tighter hero, denser body type, scrollable tables, better stacked meta.
   ===================================================================== */
@media (max-width: 720px) {

    /* ---- Article hero ---- */
    .gsbd-article-hero {
        padding-block: var(--space-5) var(--space-4);
        margin-bottom: var(--space-4);
    }
    .gsbd-article-hero__inner {
        padding-inline: var(--space-3);
    }
    .gsbd-breadcrumb {
        font-size: .65rem;
        margin-bottom: var(--space-2);
        gap: 6px;
    }
    .gsbd-article-hero__badge {
        font-size: .68rem;
        padding: 4px 10px;
        margin-bottom: var(--space-2);
    }
    .gsbd-article-hero__title {
        font-size: clamp(1.5rem, 7.2vw, 2rem);
        line-height: 1.12;
        margin-bottom: var(--space-2);
        letter-spacing: -.012em;
    }
    .gsbd-article-hero__dek {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: var(--space-3);
    }
    /* Meta block: drop the vertical pipe dividers, stack with row gaps */
    .gsbd-article-hero__meta {
        gap: 10px 16px;
        padding-top: var(--space-3);
        font-size: .82rem;
    }
    .gsbd-article-hero__divider { display: none; }
    .gsbd-article-hero__meta-block {
        flex-direction: column;
        gap: 0;
    }
    .gsbd-article-hero__meta-block time,
    .gsbd-article-hero__meta-block > span:last-child {
        font-size: .82rem;
    }
    .gsbd-author { gap: 10px; }
    .gsbd-author__avatar {
        width: 36px;
        height: 36px;
    }
    .gsbd-author__name { font-size: .82rem; }

    /* ---- Article body — tighter, more readable on small screens ---- */
    .gsbd-article-layout {
        gap: var(--space-4);
        margin-top: var(--space-3);
    }
    .gsbd-article {
        padding: var(--space-3) var(--space-3) var(--space-4);
        border-radius: var(--radius);
    }
    .gsbd-article__content {
        font-size: 1.025rem;
        line-height: 1.65;
    }
    .gsbd-article__content > *:first-child {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: var(--space-3);
    }
    .gsbd-article__content h2 {
        font-size: clamp(1.25rem, 5.4vw, 1.55rem);
        line-height: 1.15;
        margin: var(--space-4) 0 var(--space-2);
        padding-left: 12px;
        border-left-width: 4px;
    }
    .gsbd-article__content h3 {
        font-size: 1.15rem;
        line-height: 1.25;
        margin: var(--space-4) 0 var(--space-2);
    }
    .gsbd-article__content h4 {
        font-size: 1rem;
        margin: var(--space-3) 0 var(--space-2);
    }
    .gsbd-article__content p { margin: 0 0 var(--space-3); }
    .gsbd-article__content blockquote {
        padding: var(--space-2) var(--space-3);
        margin-block: var(--space-4);
        font-size: 1.05rem;
        line-height: 1.5;
    }
    .gsbd-article__content ul,
    .gsbd-article__content ol {
        padding-left: 1.25em;
    }
    .gsbd-article__content li { margin-bottom: 6px; }

    /* Wide tables → horizontal swipe scroll instead of squishing or overflowing */
    .gsbd-article__content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
        font-size: .9rem;
        scrollbar-width: thin;
    }
    .gsbd-article__content thead th,
    .gsbd-article__content tbody th,
    .gsbd-article__content tbody td {
        padding: 10px 14px;
    }
    .gsbd-article__content thead th {
        font-size: .72rem;
        padding-block: 12px;
    }

    /* Code blocks */
    .gsbd-article__content pre {
        padding: var(--space-3);
        font-size: .82rem;
        border-radius: var(--radius-sm);
    }
    .gsbd-article__content code {
        font-size: .88em;
        word-break: break-word;
    }

    /* Inline article links: thinner underline so it doesn't visually clash on small text */
    .gsbd-article__content a { border-bottom-width: 1px; }

    /* Figures & images — bleed slightly out for editorial feel */
    .gsbd-article__content figure,
    .gsbd-article__content img {
        margin-block: var(--space-3);
    }

    /* Article foot (tags) */
    .gsbd-article__foot {
        margin-top: var(--space-4);
        padding-top: var(--space-3);
    }
    .gsbd-tags { gap: 6px; }
    .gsbd-tags__item {
        padding: 4px 12px;
        font-size: .76rem;
    }

    /* Author bio card on mobile */
    .gsbd-author-bio {
        grid-template-columns: 56px 1fr;
        gap: var(--space-3);
        padding: var(--space-3);
        margin-top: var(--space-4);
    }
    .gsbd-author-bio__avatar {
        width: 56px;
        height: 56px;
        border-width: 2px;
    }
    .gsbd-author-bio__name { font-size: 1.15rem; }
    .gsbd-author-bio__desc { font-size: .9rem; }

    /* ---- Article sidebar — separate from article visually when stacked ---- */
    .gsbd-article-sidebar { margin-top: var(--space-3); }
    .gsbd-article-sidebar .gsbd-sidebar {
        position: static;
        top: auto;
    }
}

/* =====================================================================
   22. BETTING SITES (CPT: betting_site)
   Archive (Top X rankings) + single review templates.
   ===================================================================== */

/* ---- Archive hero ---- */
.gsbd-bet-archive-hero { position: relative; }
.gsbd-bet-archive-hero__age {
    display: inline-block;
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 3px;
    letter-spacing: .15em;
    margin-bottom: 12px;
}
.gsbd-bet-archive-hero__disc {
    margin-top: var(--space-3);
    padding: 10px 14px;
    background: rgba(255, 71, 87, .12);
    border-left: 3px solid var(--brand-red);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    border-radius: 0 4px 4px 0;
}

/* ---- Top rankings cards ---- */
.gsbd-bet-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.gsbd-bet-card {
    display: grid;
    grid-template-columns: 80px minmax(220px, 1.7fr) minmax(160px, 1fr) minmax(200px, 1.2fr) minmax(160px, auto);
    grid-template-areas:
        "rank brand bonus features actions"
        "rank brand bonus payments actions";
    grid-template-rows: auto auto;
    align-items: center;
    gap: 12px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 240ms, transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms;
    isolation: isolate;
}
.gsbd-bet-card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
}
.gsbd-bet-card.is-top {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(244, 180, 0, .06) 100%);
}
.gsbd-bet-card.is-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--brand-red) 100%);
}

.gsbd-bet-card__rank {
    grid-area: rank;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -.04em;
    color: var(--brand-red);
    text-align: center;
    -webkit-text-stroke: 1px transparent;
}
.gsbd-bet-card.is-top .gsbd-bet-card__rank { color: var(--accent-gold); }

.gsbd-bet-card__brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.gsbd-bet-card__logo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-alt);
    flex-shrink: 0;
}
.gsbd-bet-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gsbd-bet-card__logo-mono {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    color: #fff;
    background:
        radial-gradient(circle at 30% 25%, hsl(var(--gsbd-avatar-hue, 350), 70%, 55%) 0%, transparent 60%),
        linear-gradient(135deg, var(--brand-red) 0%, var(--brand-navy) 100%);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.gsbd-bet-card__brand-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gsbd-bet-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}
.gsbd-bet-card__name a { color: var(--text-primary); transition: color 200ms; }
.gsbd-bet-card__name a:hover { color: var(--brand-red); }
.gsbd-bet-card__rating {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: .85rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.gsbd-bet-card__rating .s {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -1px;
}
.gsbd-bet-card__rating .s--full  { color: var(--accent-gold); }
.gsbd-bet-card__rating .s--empty { color: var(--border-strong); }
.gsbd-bet-card__rating .s--half {
    color: var(--accent-gold);
    background: linear-gradient(90deg, var(--accent-gold) 50%, var(--border-strong) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gsbd-bet-card__rating strong {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: .9rem;
    margin-left: 2px;
}
.gsbd-bet-card__rating em {
    font-style: normal;
    font-size: .76rem;
    color: var(--text-muted);
}
.gsbd-bet-card__summary {
    margin: 0;
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.gsbd-bet-card__bonus {
    grid-area: bonus;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-left: 18px;
    border-left: 1px solid var(--border);
}
.gsbd-bet-card__bonus-label {
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--text-muted);
}
.gsbd-bet-card__bonus-amount {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: -.01em;
    line-height: 1;
}
.gsbd-bet-card__bonus-terms {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gsbd-bet-card__features {
    grid-area: features;
    align-self: end;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gsbd-bet-card__features li {
    position: relative;
    padding-left: 18px;
    font-size: .82rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.gsbd-bet-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-bd);
    font-weight: 700;
}

.gsbd-bet-card__payments {
    grid-area: payments;
    align-self: start;
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.gsbd-bet-card__payments li {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: .65rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.gsbd-bet-card__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 160px;
}
.gsbd-bet-card__cta {
    background: var(--brand-red);
    color: #fff;
    padding: 14px 18px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 18px -6px rgba(230, 57, 70, .55);
    transition: transform 220ms, background 220ms, box-shadow 220ms;
}
.gsbd-bet-card__cta:hover {
    background: var(--brand-red-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(230, 57, 70, .65);
}
.gsbd-bet-card__review-link {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
    text-decoration: none;
    transition: color 200ms;
}
.gsbd-bet-card__review-link:hover { color: var(--brand-red); }

/* Mobile / tablet — items centered for premium card feel */
@media (max-width: 900px) {
    .gsbd-bet-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "brand"
            "bonus"
            "features"
            "payments"
            "actions";
        gap: 16px;
        padding: 22px 18px 20px;
        text-align: center;
    }

    /* Rank floats top-right */
    .gsbd-bet-card__rank {
        position: absolute;
        top: 14px;
        right: 18px;
        font-size: 2rem;
        line-height: 1;
        z-index: 2;
        pointer-events: none;
        opacity: .85;
    }

    /* Brand: logo on top, name + rating + summary centered below */
    .gsbd-bet-card__brand {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 56px;
    }
    .gsbd-bet-card__logo {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }
    .gsbd-bet-card__brand-meta {
        align-items: center;
        text-align: center;
        gap: 6px;
    }
    .gsbd-bet-card__name { font-size: 1.1rem; }
    .gsbd-bet-card__rating {
        justify-content: center;
        font-size: .8rem;
        gap: 2px 5px;
    }
    .gsbd-bet-card__rating .s { font-size: .95rem; }
    .gsbd-bet-card__rating em {
        display: block;
        flex-basis: 100%;
        margin-top: 2px;
        text-align: center;
    }
    .gsbd-bet-card__summary {
        font-size: .88rem;
        max-width: 320px;
    }

    /* Bonus: centered card with stacked label + huge amount + terms */
    .gsbd-bet-card__bonus {
        padding: 14px 16px;
        border-left: 0;
        background: var(--surface-alt);
        border: 1px solid var(--border);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .gsbd-bet-card__bonus-label {
        font-size: .6rem;
        letter-spacing: .14em;
        color: var(--text-muted);
    }
    .gsbd-bet-card__bonus-amount {
        font-size: 1.5rem;
        text-align: center;
        line-height: 1;
    }
    .gsbd-bet-card__bonus-terms {
        margin-top: 4px;
        font-size: .68rem;
        opacity: .85;
        text-align: center;
    }

    /* Features list: center each row (icon + text together) */
    .gsbd-bet-card__features {
        align-items: center;
        gap: 8px;
    }
    .gsbd-bet-card__features li {
        padding-left: 0;
        font-size: .88rem;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-align: left;
        max-width: 320px;
    }
    .gsbd-bet-card__features li::before {
        position: static;
        flex-shrink: 0;
    }

    /* Payment chips centered */
    .gsbd-bet-card__payments {
        justify-content: center;
        gap: 5px;
    }

    /* Actions: stack vertically, both elements centered + full-width primary */
    .gsbd-bet-card__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
    }
    .gsbd-bet-card__cta {
        padding: 14px 18px;
        font-size: .88rem;
        width: 100%;
    }
    .gsbd-bet-card__review-link {
        text-align: center;
        padding: 6px 0;
        font-size: .72rem;
    }
}

@media (max-width: 480px) {
    .gsbd-bet-card { padding: 20px 16px 18px; gap: 14px; }
    .gsbd-bet-card__rank { font-size: 1.7rem; top: 12px; right: 14px; }
    .gsbd-bet-card__brand { padding: 0 40px; gap: 10px; }
    .gsbd-bet-card__logo { width: 56px; height: 56px; border-radius: 12px; }
    .gsbd-bet-card__name { font-size: 1.02rem; }
    .gsbd-bet-card__bonus-amount { font-size: 1.35rem; }
}

/* ---- Comparison table ---- */
.gsbd-bet-compare {
    margin-top: var(--space-7);
}
.gsbd-bet-compare__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.gsbd-bet-compare__wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.gsbd-bet-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 720px;
}
.gsbd-bet-compare__table th,
.gsbd-bet-compare__table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.gsbd-bet-compare__table thead th {
    background: var(--brand-navy);
    color: #fff;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
    border-bottom: 0;
}
.gsbd-bet-compare__table tbody tr:hover td { background: rgba(230, 57, 70, .04); }
.gsbd-bet-compare__table tbody tr:last-child td { border-bottom: 0; }
.gsbd-bet-compare__table .num {
    font-family: var(--font-display);
    color: var(--brand-red);
    font-weight: 700;
    width: 50px;
}
.gsbd-bet-compare__cta {
    background: var(--brand-red);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
    text-decoration: none;
    white-space: nowrap;
}
.gsbd-bet-compare__cta:hover { background: var(--brand-red-dark); color: #fff; }

/* ---- Methodology ---- */
.gsbd-bet-method {
    margin-top: var(--space-7);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.gsbd-bet-method__head { margin-bottom: var(--space-4); }
.gsbd-bet-method__kicker {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
}
.gsbd-bet-method__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
    margin: 6px 0 4px;
}
.gsbd-bet-method__lead { color: var(--text-secondary); margin: 0; }
.gsbd-bet-method__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.gsbd-bet-method__item {
    background: var(--surface-alt);
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.gsbd-bet-method__item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.gsbd-bet-method__item-label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .08em;
}
.gsbd-bet-method__item-weight {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--brand-red);
    letter-spacing: -.01em;
}
.gsbd-bet-method__bar {
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.gsbd-bet-method__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-red) 0%, var(--accent-gold) 100%);
    border-radius: 99px;
    transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.gsbd-bet-method__item-desc {
    margin: 8px 0 0;
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ---- FAQ accordion ---- */
.gsbd-bet-faq {
    margin-top: var(--space-7);
}
.gsbd-bet-faq__head { margin-bottom: var(--space-4); }
.gsbd-bet-faq__kicker {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
}
.gsbd-bet-faq__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
    margin: 6px 0 0;
}
.gsbd-bet-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gsbd-bet-faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 240ms;
}
.gsbd-bet-faq__item[open] { border-color: var(--brand-red); }
.gsbd-bet-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.gsbd-bet-faq__q::-webkit-details-marker { display: none; }
.gsbd-bet-faq__icon {
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    border-radius: 50%;
    font-weight: 700;
    transition: transform 240ms, background 240ms, color 240ms;
}
.gsbd-bet-faq__item[open] .gsbd-bet-faq__icon {
    transform: rotate(45deg);
    background: var(--brand-red);
    color: #fff;
}
.gsbd-bet-faq__a {
    padding: 0 20px 20px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.gsbd-bet-faq__a p:first-child { margin-top: 0; }

/* ---- Disclaimer block (inline, end of archive) ---- */
.gsbd-bet-disc-block {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: rgba(230, 57, 70, .08);
    border: 1px solid rgba(230, 57, 70, .25);
    border-radius: var(--radius);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.gsbd-bet-disc-block__age {
    flex-shrink: 0;
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: .85rem;
    letter-spacing: .1em;
}
.gsbd-bet-disc-block p {
    margin: 0;
    font-size: .9rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.gsbd-bet-disc-block a { color: var(--brand-red); font-weight: 600; }

/* ---- Sticky 18+ disclaimer bar (auto-injected on betting pages) ---- */
.gsbd-bet-disclaimer-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(20, 24, 31, .96);
    border-top: 2px solid var(--brand-red);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: .82rem;
    line-height: 1.4;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
    transition: transform 250ms ease;
}
.gsbd-bet-disclaimer-bar.is-closing { transform: translateY(100%); }
.gsbd-bet-disclaimer-bar__age {
    flex-shrink: 0;
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: .72rem;
    letter-spacing: .12em;
}
.gsbd-bet-disclaimer-bar__text { flex: 1; }
.gsbd-bet-disclaimer-bar__link { color: var(--accent-gold); font-weight: 600; white-space: nowrap; }
.gsbd-bet-disclaimer-bar__close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.gsbd-bet-disclaimer-bar__close:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 720px) {
    .gsbd-bet-disclaimer-bar {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        gap: 10px;
        font-size: .76rem;
    }
    .gsbd-bet-disclaimer-bar__text { font-size: .72rem; }
}

/* ---- Single review hero ---- */
.gsbd-bet-single-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
    color: #fff;
    padding-block: var(--space-6) var(--space-5);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.gsbd-bet-single-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 0%, rgba(230, 57, 70, .25) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(244, 180, 0, .12) 0%, transparent 45%);
    z-index: -1;
}
.gsbd-bet-single-hero__inner .gsbd-breadcrumb { color: rgba(255, 255, 255, .65); }
.gsbd-bet-single-hero__inner .gsbd-breadcrumb a { color: rgba(255, 255, 255, .8); }
.gsbd-bet-single-hero__inner .gsbd-breadcrumb a:hover { color: var(--accent-gold); }
.gsbd-bet-single-hero__row {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-3);
}
.gsbd-bet-single-hero__brand {
    display: flex;
    align-items: center;
    gap: 20px;
}
.gsbd-bet-single-hero__logo {
    width: 100px; height: 100px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-alt);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .15);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .55);
}
.gsbd-bet-single-hero__logo img,
.gsbd-bet-single-hero__logo .gsbd-bet-card__logo-mono {
    width: 100%; height: 100%; object-fit: cover; font-size: 2.4rem;
}
.gsbd-bet-single-hero__brand-meta { min-width: 0; }
.gsbd-bet-single-hero__kicker {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
}
.gsbd-bet-single-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.05;
    margin: 8px 0 12px;
    text-transform: uppercase;
    letter-spacing: -.015em;
    color: #fff;
}
.gsbd-bet-single-hero__rating { color: rgba(255, 255, 255, .85); }
.gsbd-bet-single-hero__rating strong { color: #fff; }
.gsbd-bet-single-hero__rating em { color: rgba(255, 255, 255, .55); }

.gsbd-bet-single-hero__cta {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.gsbd-bet-single-hero__bonus-label {
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .55);
}
.gsbd-bet-single-hero__bonus-amt {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: -.01em;
    line-height: 1;
}
.gsbd-bet-single-hero__bonus-terms {
    font-size: .76rem;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 8px;
}
.gsbd-bet-single-hero__btn {
    margin-top: 4px;
    width: 100%;
    padding: 14px 20px;
    font-size: .9rem;
}
.gsbd-bet-single-hero__age {
    color: rgba(255, 255, 255, .55);
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 860px) {
    .gsbd-bet-single-hero__row { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Single review body ---- */
.gsbd-bet-single { padding-bottom: var(--space-7); }
.gsbd-bet-single__h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    text-transform: uppercase;
    margin: var(--space-5) 0 var(--space-3);
    letter-spacing: -.005em;
    border-left: 5px solid var(--brand-red);
    padding-left: 14px;
    color: var(--text-primary);
}
.gsbd-bet-single__facts {
    margin-top: var(--space-5);
}
.gsbd-bet-single__facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
}
.gsbd-bet-single__facts-grid > div {
    background: var(--surface);
    padding: 14px 16px;
}
.gsbd-bet-single__facts-grid dt {
    font-family: var(--font-display);
    font-size: .65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0 0 4px;
    font-weight: 600;
}
.gsbd-bet-single__facts-grid dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.gsbd-bet-single__body {
    margin-top: var(--space-5);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-primary);
    max-width: 760px;
}
.gsbd-bet-single__body p { margin: 0 0 var(--space-3); }
.gsbd-bet-single__body h2 { margin-top: var(--space-5); font-family: var(--font-display); }

.gsbd-bet-single__proscons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.gsbd-bet-single__pros,
.gsbd-bet-single__cons {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.gsbd-bet-single__pros { border-left: 4px solid var(--accent-bd); }
.gsbd-bet-single__cons { border-left: 4px solid var(--brand-red); }
.gsbd-bet-single__pros h3,
.gsbd-bet-single__cons h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.gsbd-bet-single__pros ul,
.gsbd-bet-single__cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gsbd-bet-single__pros li,
.gsbd-bet-single__cons li {
    padding-left: 22px;
    position: relative;
    font-size: .92rem;
    line-height: 1.5;
}
.gsbd-bet-single__pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-bd);
    font-weight: 700;
}
.gsbd-bet-single__cons li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--brand-red);
    font-weight: 700;
}

.gsbd-bet-single__chips-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.gsbd-bet-single__chips {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.gsbd-bet-single__chips h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.gsbd-bet-single__chips ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gsbd-bet-single__chips li {
    background: var(--surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gsbd-bet-single__cta-block {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    text-align: center;
}
.gsbd-bet-single__cta-block .gsbd-bet-single__h2 {
    color: #fff;
    border-left: 0;
    padding-left: 0;
    margin-top: 0;
}
.gsbd-bet-single__cta-btn {
    background: #fff;
    color: var(--brand-red);
    padding: 16px 32px;
    font-size: 1rem;
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, .35);
}
.gsbd-bet-single__cta-btn:hover {
    background: var(--accent-gold);
    color: var(--brand-navy);
    transform: translateY(-2px);
}

@media (max-width: 720px) {
    .gsbd-bet-single__proscons-grid,
    .gsbd-bet-single__chips-block { grid-template-columns: 1fr; }
}

/* =====================================================================
   24. SINGLE BETTING REVIEW — premium mobile centering
   Mirrors the centered archive card design.
   ===================================================================== */
@media (max-width: 860px) {
    /* ---- Hero ---- */
    .gsbd-bet-single-hero { padding-block: var(--space-5) var(--space-4); }
    .gsbd-bet-single-hero__inner .gsbd-breadcrumb {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    .gsbd-bet-single-hero__row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-top: var(--space-4);
        text-align: center;
    }

    /* Brand: logo on top, kicker/name/rating stacked centered */
    .gsbd-bet-single-hero__brand {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .gsbd-bet-single-hero__logo {
        width: 90px;
        height: 90px;
        border-radius: 16px;
    }
    .gsbd-bet-single-hero__brand-meta {
        text-align: center;
        width: 100%;
    }
    .gsbd-bet-single-hero__title {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem);
        margin: 8px 0 10px;
    }
    .gsbd-bet-single-hero__rating { justify-content: center; }
    .gsbd-bet-single-hero__rating em {
        display: block;
        flex-basis: 100%;
        margin-top: 2px;
    }

    /* CTA card: center contents */
    .gsbd-bet-single-hero__cta {
        text-align: center;
        align-items: stretch;
        padding: 20px 18px;
    }
    .gsbd-bet-single-hero__bonus-amt { font-size: 1.85rem; }

    /* ---- H2 section headings ---- */
    .gsbd-bet-single__h2 {
        text-align: center;
        border-left: 0;
        padding-left: 0;
        position: relative;
        padding-bottom: 12px;
        margin-bottom: var(--space-3);
    }
    .gsbd-bet-single__h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 48px;
        height: 3px;
        background: var(--brand-red);
        border-radius: 2px;
    }

    /* ---- Quick facts grid: center each cell ---- */
    .gsbd-bet-single__facts-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gsbd-bet-single__facts-grid > div {
        text-align: center;
        padding: 14px 12px;
    }

    /* ---- Article body: keep readable left-aligned (long-form text) ---- */
    .gsbd-bet-single__body { font-size: .98rem; line-height: 1.65; }
    .gsbd-bet-single__body h2 {
        text-align: center;
        margin-top: var(--space-4);
    }

    /* ---- Pros & Cons cards centered ---- */
    .gsbd-bet-single__pros,
    .gsbd-bet-single__cons {
        text-align: center;
        padding: 18px 16px;
    }
    .gsbd-bet-single__pros h3,
    .gsbd-bet-single__cons h3 {
        text-align: center;
    }
    .gsbd-bet-single__pros ul,
    .gsbd-bet-single__cons ul {
        align-items: center;
    }
    .gsbd-bet-single__pros li,
    .gsbd-bet-single__cons li {
        padding-left: 0;
        text-align: left;
        max-width: 320px;
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
    }
    .gsbd-bet-single__pros li::before,
    .gsbd-bet-single__cons li::before {
        position: static;
        flex-shrink: 0;
        line-height: 1.5;
    }

    /* ---- Sports + Payments chip blocks centered ---- */
    .gsbd-bet-single__chips {
        text-align: center;
        padding: 18px 16px;
    }
    .gsbd-bet-single__chips h3 { text-align: center; }
    .gsbd-bet-single__chips ul { justify-content: center; }

    /* ---- Final CTA block ---- */
    .gsbd-bet-single__cta-block {
        padding: var(--space-4) var(--space-3);
    }
    .gsbd-bet-single__cta-btn {
        width: 100%;
        padding: 16px 20px;
        font-size: .92rem;
    }
}

@media (max-width: 480px) {
    .gsbd-bet-single-hero__logo { width: 76px; height: 76px; }
    .gsbd-bet-single-hero__title { font-size: 1.5rem; }
    .gsbd-bet-single-hero__bonus-amt { font-size: 1.6rem; }
    .gsbd-bet-single__facts-grid { grid-template-columns: 1fr; }
}

/* (Sticky disclaimer bar removed — no extra padding needed.) */

/* =====================================================================
   23. BETTING ARCHIVE — PREMIUM REDESIGN
   Mega hero, jump nav, Editor's Choice spotlight, trust pillars,
   polished ranking cards, sticky comparison, better mobile.
   ===================================================================== */

/* ---- Mega hero with sport-pattern background ---- */
.gsbd-bet-mega-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: var(--space-7) var(--space-6);
    background: linear-gradient(135deg, var(--brand-navy) 0%, #0c1f33 50%, #1a0f2e 100%);
    color: #fff;
}
.gsbd-bet-mega-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 88% 12%, rgba(244, 180, 0, .22) 0%, transparent 38%),
        radial-gradient(circle at 8% 88%, rgba(230, 57, 70, .22) 0%, transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(0, 106, 78, .14) 0%, transparent 55%);
}
.gsbd-bet-mega-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);
}
.gsbd-bet-mega-hero__inner { position: relative; }
.gsbd-bet-mega-hero__crumb {
    color: rgba(255, 255, 255, .55);
    font-family: var(--font-display);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: var(--space-3);
}
.gsbd-bet-mega-hero__crumb a { color: rgba(255, 255, 255, .8); }
.gsbd-bet-mega-hero__crumb a:hover { color: var(--accent-gold); }
.gsbd-bet-mega-hero__crumb span { color: rgba(255, 255, 255, .35); margin: 0 6px; }

.gsbd-bet-mega-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 0.98;
    letter-spacing: -.02em;
    margin: 0 0 var(--space-4);
    color: #fff;
    text-transform: uppercase;
    max-width: 18ch;
    text-wrap: balance;
}
.gsbd-bet-mega-hero__lead {
    color: rgba(255, 255, 255, .82);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 var(--space-5);
}

/* Stats strip inside hero */
.gsbd-bet-mega-hero__stats {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.gsbd-bet-mega-hero__stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.gsbd-bet-mega-hero__stats strong {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1;
}
.gsbd-bet-mega-hero__stats span {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .6);
    margin-top: 6px;
}

/* ---- Jump-to navigation (sticky) ---- */
.gsbd-bet-jumpnav {
    position: sticky;
    top: var(--header-height);
    z-index: 30;
    background: rgba(20, 24, 31, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.gsbd-bet-jumpnav__inner {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px var(--space-4);
}
.gsbd-bet-jumpnav__inner::-webkit-scrollbar { display: none; }
.gsbd-bet-jumpnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 200ms, border-color 200ms;
}
.gsbd-bet-jumpnav a span {
    color: var(--brand-red);
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: .8rem;
}
.gsbd-bet-jumpnav a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--brand-red);
}

/* ---- Editor's Choice spotlight (#1 premium card) ---- */
.gsbd-bet-spotlight {
    position: relative;
    margin-bottom: var(--space-4);
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(244, 180, 0, .04) 0%, rgba(230, 57, 70, .02) 100%),
        var(--surface);
    border: 1px solid rgba(244, 180, 0, .35);
    box-shadow: 0 0 0 1px rgba(244, 180, 0, .12),
                0 24px 60px -28px rgba(244, 180, 0, .35);
    overflow: hidden;
    isolation: isolate;
}
/* Top-edge gradient stripe — clean, no mask hacks */
.gsbd-bet-spotlight::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, #ffce3a 50%, var(--brand-red) 100%);
    z-index: 1;
    pointer-events: none;
}
.gsbd-bet-spotlight::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(244, 180, 0, .25) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.gsbd-bet-spotlight__crown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, #ffce3a 100%);
    color: var(--brand-navy);
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 8px 22px -6px rgba(244, 180, 0, .55);
}

.gsbd-bet-spotlight__inner {
    display: grid;
    grid-template-columns: 1.65fr minmax(220px, 1fr);
    gap: var(--space-5);
    align-items: center;
}

.gsbd-bet-spotlight__brand {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}
.gsbd-bet-spotlight__logo {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-alt);
    flex-shrink: 0;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .45);
}
.gsbd-bet-spotlight__logo img,
.gsbd-bet-spotlight__logo .gsbd-bet-card__logo-mono {
    width: 100%; height: 100%; object-fit: cover; font-size: 2.6rem;
}
.gsbd-bet-spotlight__brand-meta { min-width: 0; }
.gsbd-bet-spotlight__kicker {
    font-family: var(--font-display);
    font-size: .68rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
}
.gsbd-bet-spotlight__name {
    margin: 6px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.015em;
    font-weight: 700;
}
.gsbd-bet-spotlight__name a { color: var(--text-primary); }
.gsbd-bet-spotlight__name a:hover { color: var(--brand-red); }
.gsbd-bet-spotlight__rating { font-size: .92rem; }
.gsbd-bet-spotlight__rating .s { font-size: 1.15rem; }
.gsbd-bet-spotlight__summary {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: .98rem;
    line-height: 1.5;
}

.gsbd-bet-spotlight__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px;
    background: var(--surface-alt);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.gsbd-bet-spotlight__bonus {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-strong);
    margin-bottom: 4px;
}
.gsbd-bet-spotlight__bonus-label {
    display: block;
    font-family: var(--font-display);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.gsbd-bet-spotlight__bonus-amt {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-red);
    line-height: 1;
    letter-spacing: -.015em;
}
.gsbd-bet-spotlight__bonus-terms {
    display: block;
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.gsbd-bet-spotlight__cta {
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .92rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 24px -8px rgba(230, 57, 70, .55);
    transition: transform 220ms, box-shadow 220ms;
}
.gsbd-bet-spotlight__cta:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 32px -8px rgba(230, 57, 70, .7);
}
.gsbd-bet-spotlight__review {
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
}
.gsbd-bet-spotlight__review:hover { color: var(--brand-red); }

.gsbd-bet-spotlight__features {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 18px;
}
.gsbd-bet-spotlight__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--text-primary);
}
.gsbd-bet-spotlight__features svg {
    flex-shrink: 0;
    color: var(--accent-bd);
    margin-top: 3px;
}

.gsbd-bet-spotlight__strip {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--space-4);
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.gsbd-bet-spotlight__strip-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gsbd-bet-spotlight__strip-cell--wide { min-width: 0; }
.gsbd-bet-spotlight__strip-label {
    font-family: var(--font-display);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--text-muted);
    font-weight: 600;
}
.gsbd-bet-spotlight__strip-cell strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 700;
}
.gsbd-bet-spotlight__payments {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.gsbd-bet-spotlight__payments li {
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 3px;
    font-size: .65rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* ---- "Why trust us" pillars ---- */
.gsbd-bet-trust {
    margin-top: var(--space-7);
    padding: var(--space-5);
    background: linear-gradient(135deg, rgba(0, 106, 78, .04) 0%, rgba(29, 78, 216, .03) 100%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.gsbd-bet-trust__head { margin-bottom: var(--space-4); }
.gsbd-bet-trust__kicker {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--accent-bd);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
}
.gsbd-bet-trust__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    text-transform: uppercase;
    letter-spacing: -.005em;
}
.gsbd-bet-trust__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.gsbd-bet-trust__item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    transition: transform 240ms, border-color 240ms, box-shadow 240ms;
}
.gsbd-bet-trust__item:hover {
    transform: translateY(-3px);
    border-color: var(--accent-bd);
    box-shadow: 0 16px 32px -16px rgba(0, 106, 78, .35);
}
.gsbd-bet-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(0, 106, 78, .12);
    color: var(--accent-bd);
    margin-bottom: 12px;
}
.gsbd-bet-trust__icon svg { width: 22px; height: 22px; }
.gsbd-bet-trust__value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -.01em;
}
.gsbd-bet-trust__label {
    display: block;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
    margin: 4px 0 10px;
}
.gsbd-bet-trust__desc {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ---- Polished ranking cards (cards #2-#10) ---- */
.gsbd-bet-card { transition: border-color 240ms, transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms; }
.gsbd-bet-card:hover { transform: translateY(-4px); }
.gsbd-bet-card.is-top { display: none; /* spotlight handles #1 now */ }

/* Pulse the rank number for visual rhythm */
.gsbd-bet-card__rank { transition: transform 240ms, color 240ms; }
.gsbd-bet-card:hover .gsbd-bet-card__rank { transform: scale(1.06); }

/* ---- Sticky comparison table header ---- */
.gsbd-bet-compare__wrap {
    max-height: 80vh;
    overflow: auto;
}
.gsbd-bet-compare__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.gsbd-bet-compare__table tbody tr:first-child td {
    background: linear-gradient(90deg, rgba(244, 180, 0, .08) 0%, transparent 100%);
}
.gsbd-bet-compare__table tbody tr:first-child td.num {
    color: var(--accent-gold);
}
.gsbd-bet-compare__table tbody tr:first-child .gsbd-bet-compare__cta {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #ffce3a 100%);
    color: var(--brand-navy);
}

/* ---- Section anchor scroll offset (sticky jump nav clearance) ---- */
#gsbd-rankings, #gsbd-compare, #gsbd-method, #gsbd-faq {
    scroll-margin-top: calc(var(--header-height) + 80px);
}

/* ====================================================================
   MOBILE RESPONSIVE — premium betting archive
   ==================================================================== */

@media (max-width: 1100px) {
    .gsbd-bet-spotlight__inner { grid-template-columns: 1fr; gap: var(--space-4); }
    .gsbd-bet-spotlight__features { grid-template-columns: 1fr 1fr; }
    .gsbd-bet-trust__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    /* ---- Hero: center everything on mobile ---- */
    .gsbd-bet-mega-hero {
        padding-block: var(--space-5) var(--space-4);
        text-align: center;
    }
    .gsbd-bet-mega-hero__crumb {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: var(--space-2);
    }
    .gsbd-bet-mega-hero__title {
        letter-spacing: -.025em;
        max-width: none;
        margin-inline: auto;
    }
    .gsbd-bet-mega-hero__lead {
        font-size: .98rem;
        margin: 0 auto var(--space-4);
    }
    .gsbd-bet-mega-hero__stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        padding-top: var(--space-3);
        text-align: center;
    }
    .gsbd-bet-mega-hero__stats li {
        align-items: center;
    }
    .gsbd-bet-mega-hero__stats strong { font-size: 1.2rem; }

    /* ---- Section heading "TOP RANKED" — center it ---- */
    .gsbd-bet-archive .gsbd-section__head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .gsbd-bet-archive .gsbd-section__title-block {
        align-items: center;
        text-align: center;
    }
    .gsbd-bet-archive .gsbd-section__head::before {
        left: 50%;
        transform: translateX(-50%);
    }

    /* ---- Trust block: center kicker + title ---- */
    .gsbd-bet-trust__head { text-align: center; }

    /* ---- Comparison title centered ---- */
    .gsbd-bet-compare__title { text-align: center; }

    /* ---- Methodology header centered ---- */
    .gsbd-bet-method__head { text-align: center; }

    /* ---- FAQ header centered ---- */
    .gsbd-bet-faq__head { text-align: center; }

    /* Jump nav: keep sticky but tighter */
    .gsbd-bet-jumpnav__inner { padding: 10px var(--space-3); gap: var(--space-2); }
    .gsbd-bet-jumpnav a { font-size: .7rem; padding: 6px 4px; }

    /* Spotlight on mobile — center all items */
    .gsbd-bet-spotlight {
        padding: 22px 18px;
        border-radius: var(--radius);
        text-align: center;
    }
    .gsbd-bet-spotlight__crown {
        font-size: .65rem;
        padding: 6px 12px;
        margin: 0 auto 14px;
    }
    .gsbd-bet-spotlight__brand {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .gsbd-bet-spotlight__logo {
        width: 80px; height: 80px;
        border-radius: 14px;
    }
    .gsbd-bet-spotlight__brand-meta {
        text-align: center;
        width: 100%;
    }
    .gsbd-bet-spotlight__name { font-size: 1.5rem; }
    .gsbd-bet-spotlight__rating { justify-content: center; }
    .gsbd-bet-spotlight__rating em {
        display: block;
        flex-basis: 100%;
        margin-top: 2px;
    }
    .gsbd-bet-spotlight__summary { margin-inline: auto; max-width: 320px; }

    .gsbd-bet-spotlight__cta-wrap { padding: 16px; }
    .gsbd-bet-spotlight__bonus-amt { font-size: 1.6rem; }

    /* Features list — center each row */
    .gsbd-bet-spotlight__features {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
        justify-items: center;
    }
    .gsbd-bet-spotlight__features li {
        justify-content: center;
        text-align: left;
        max-width: 320px;
    }

    /* Strip: center cells */
    .gsbd-bet-spotlight__strip {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        margin-top: 14px;
        padding-top: 14px;
        justify-items: center;
    }
    .gsbd-bet-spotlight__strip-cell {
        align-items: center;
        text-align: center;
    }
    .gsbd-bet-spotlight__strip-cell--wide {
        grid-column: 1 / -1;
    }
    .gsbd-bet-spotlight__payments {
        justify-content: center;
    }

    /* Trust pillars stack to 1 column */
    .gsbd-bet-trust { padding: var(--space-4); margin-top: var(--space-5); }
    .gsbd-bet-trust__title { font-size: 1.3rem; }
    .gsbd-bet-trust__grid { grid-template-columns: 1fr; gap: 10px; }
    .gsbd-bet-trust__item { padding: 14px; }
    .gsbd-bet-trust__icon { margin-bottom: 8px; width: 36px; height: 36px; }
    .gsbd-bet-trust__value { font-size: 1.15rem; }

    /* Comparison: kill sticky max-height on mobile (taps awkward in sticky) */
    .gsbd-bet-compare__wrap { max-height: none; }
    .gsbd-bet-compare__table thead th { position: static; }

    /* Methodology + FAQ tighter padding on mobile */
    .gsbd-bet-method,
    .gsbd-bet-faq { margin-top: var(--space-5); }
    .gsbd-bet-method { padding: var(--space-4); }
}

@media (max-width: 480px) {
    .gsbd-bet-mega-hero__stats { grid-template-columns: 1fr; gap: 12px; }
    .gsbd-bet-mega-hero__stats li {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 10px;
    }
    .gsbd-bet-mega-hero__stats strong { font-size: 1.05rem; }
    .gsbd-bet-mega-hero__stats span { margin-top: 0; }
}

/* =====================================================================
   25. MATCH SCHEDULES — sidebar widget + archive + single page
   ===================================================================== */

/* ---- Sidebar widget upgrade ---- */
.gsbd-widget--matches .gsbd-matches { gap: 8px; }
.gsbd-widget--matches .gsbd-matches__row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface-alt);
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 200ms, border-color 200ms, transform 200ms;
}
.gsbd-widget--matches .gsbd-matches__row:hover {
    background: var(--surface);
    border-color: var(--border);
    transform: translateX(2px);
}
.gsbd-widget--matches .gsbd-matches__row.is-live {
    background: rgba(214, 54, 56, .08);
    border-color: rgba(214, 54, 56, .25);
}
.gsbd-widget--matches .gsbd-matches__sport {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.gsbd-widget--matches .gsbd-matches__sport--cricket  { background: var(--accent-bd); }
.gsbd-widget--matches .gsbd-matches__sport--football { background: var(--brand-red); }
.gsbd-widget--matches .gsbd-matches__sport--tennis   { background: #c2a93a; }
.gsbd-widget--matches .gsbd-matches__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.gsbd-widget--matches .gsbd-matches__teams {
    font-size: .82rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text-primary);
}
.gsbd-widget--matches .gsbd-matches__teams strong {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .02em;
}
.gsbd-widget--matches .gsbd-matches__type {
    font-family: var(--font-display);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gsbd-widget--matches .gsbd-matches__time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-family: var(--font-display);
    text-align: right;
    flex-shrink: 0;
}
.gsbd-widget--matches .gsbd-matches__time strong {
    font-size: .76rem;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: .04em;
    line-height: 1;
}
.gsbd-widget--matches .gsbd-matches__time em {
    font-style: normal;
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}
.gsbd-matches__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d63638;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 3px 8px;
    background: rgba(214, 54, 56, .14);
    border-radius: 999px;
    line-height: 1;
}
.gsbd-matches__live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #d63638;
    box-shadow: 0 0 0 0 rgba(214, 54, 56, .6);
    animation: gsbd-live-pulse 1.6s infinite;
}
@keyframes gsbd-live-pulse {
    70%  { box-shadow: 0 0 0 6px rgba(214, 54, 56, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0); }
}

/* ---- Archive page hero is shared with betting (gsbd-bet-mega-hero), this just retints ---- */
.gsbd-match-archive-hero .gsbd-bet-mega-hero__bg {
    background:
        radial-gradient(circle at 88% 12%, rgba(29, 78, 216, .22) 0%, transparent 38%),
        radial-gradient(circle at 8% 88%, rgba(0, 106, 78, .22) 0%, transparent 42%);
}

/* ---- Match section grouping (Live now / Today / Upcoming / Recent) ---- */
.gsbd-match-archive { padding-block: var(--space-5) var(--space-7); }
.gsbd-match-section { margin-bottom: var(--space-6); }
.gsbd-match-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-4);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.gsbd-match-section__head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: var(--brand-red);
}
.gsbd-match-section--live .gsbd-match-section__head::after { background: #d63638; width: 100px; }
.gsbd-match-section__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    text-transform: uppercase;
    letter-spacing: -.005em;
    flex: 1;
}
.gsbd-match-section__count {
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .04em;
    line-height: 1;
}
.gsbd-match-section--live .gsbd-match-section__count { background: #d63638; }
.gsbd-match-section__pulse {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #d63638;
    box-shadow: 0 0 0 0 rgba(214, 54, 56, .6);
    animation: gsbd-live-pulse 1.6s infinite;
}

.gsbd-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}

/* ---- Individual match card on archive ---- */
.gsbd-mcard {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms, box-shadow 240ms;
}
.gsbd-mcard:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .55);
}
.gsbd-mcard--live {
    border-color: rgba(214, 54, 56, .35);
    background: linear-gradient(135deg, rgba(214, 54, 56, .04) 0%, var(--surface) 100%);
}
.gsbd-mcard--live::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d63638, var(--brand-red));
}
.gsbd-mcard--final { opacity: .92; }

.gsbd-mcard__sport {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: .95rem;
    z-index: 2;
}

.gsbd-mcard__type {
    font-family: var(--font-display);
    font-size: .65rem;
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    margin-right: 38px;
    line-height: 1.2;
}

.gsbd-mcard__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-block: 4px;
}
.gsbd-mcard__team {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gsbd-mcard__team:last-child {
    text-align: right;
}
.gsbd-mcard__team strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.gsbd-mcard__team em {
    font-style: normal;
    font-size: .72rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gsbd-mcard__vs {
    display: grid;
    place-items: center;
}
.gsbd-mcard__vs-text {
    font-family: var(--font-display);
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
}
.gsbd-mcard__score {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.gsbd-mcard__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.gsbd-mcard__status {
    font-family: var(--font-display);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--text-secondary);
}
.gsbd-mcard__status strong {
    color: var(--brand-red);
    font-weight: 700;
}
.gsbd-mcard__status--live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d63638;
    font-weight: 700;
}
.gsbd-mcard__status--final {
    color: var(--text-muted);
}
.gsbd-mcard__result {
    font-size: .82rem;
    color: var(--text-primary);
    font-weight: 600;
}
.gsbd-mcard__venue {
    font-size: .72rem;
    color: var(--text-muted);
}
.gsbd-mcard__bcast {
    list-style: none;
    margin: 0;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px dashed var(--border);
}
.gsbd-mcard__bcast li {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: .65rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* ---- Single match hero (scoreboard) ---- */
.gsbd-match-single-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
    color: #fff;
    padding-block: var(--space-6) var(--space-5);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.gsbd-match-single-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(29, 78, 216, .25) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 106, 78, .15) 0%, transparent 50%);
    z-index: -1;
}
.gsbd-match-single-hero .gsbd-breadcrumb { color: rgba(255, 255, 255, .65); }
.gsbd-match-single-hero .gsbd-breadcrumb a { color: rgba(255, 255, 255, .8); }
.gsbd-match-single-hero .gsbd-breadcrumb a:hover { color: var(--accent-gold); }

.gsbd-match-single-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-3) 0 var(--space-4);
}
.gsbd-match-single-hero__chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 5px 11px;
    border-radius: 999px;
}

.gsbd-match-single-hero__scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    backdrop-filter: blur(12px);
}
.gsbd-match-single-hero__team {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gsbd-match-single-hero__team:last-child { text-align: right; }
.gsbd-match-single-hero__team-short {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}
.gsbd-match-single-hero__team-full {
    font-family: var(--font-display);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .65);
    font-weight: 600;
}
.gsbd-match-single-hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}
.gsbd-match-single-hero__vs {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .5);
    font-weight: 700;
    letter-spacing: .05em;
}
.gsbd-match-single-hero__score {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.gsbd-match-single-hero__score span { color: rgba(255, 255, 255, .35); }
.gsbd-match-single-hero__status {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1;
}
.gsbd-match-single-hero__status--live {
    background: rgba(214, 54, 56, .22);
    border: 1px solid rgba(214, 54, 56, .45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gsbd-match-single-hero__status--final {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
}
.gsbd-match-single-hero__status--upcoming {
    background: var(--accent-gold);
    color: var(--brand-navy);
}
.gsbd-match-single-hero__result {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}

.gsbd-match-single { padding-block: var(--space-5) var(--space-7); }

/* Where to watch */
.gsbd-match-single__watch { margin-top: var(--space-5); }
.gsbd-match-single__watch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.gsbd-match-single__watch-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.gsbd-match-single__watch-block h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-secondary);
}
.gsbd-match-single__watch-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gsbd-match-single__watch-block li {
    background: var(--surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gsbd-match-single__related { margin-top: var(--space-6); }

/* ---- Mobile responsive: matches ---- */
@media (max-width: 720px) {
    .gsbd-match-grid { grid-template-columns: 1fr; }

    .gsbd-match-section__head {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    .gsbd-match-section__title { font-size: 1.2rem; }

    /* Single match scoreboard tightens */
    .gsbd-match-single-hero { padding-block: var(--space-5) var(--space-4); }
    .gsbd-match-single-hero__chips { justify-content: center; }
    .gsbd-match-single-hero__scoreboard {
        padding: var(--space-3);
        gap: var(--space-3);
    }
    .gsbd-match-single-hero__team-short { font-size: 1.7rem; }
    .gsbd-match-single-hero__team-full { font-size: .68rem; }
    .gsbd-match-single-hero__score { font-size: 1.7rem; }
    .gsbd-match-single-hero__vs { font-size: 1rem; }
    .gsbd-match-single-hero__center { min-width: 70px; gap: 4px; }
    .gsbd-match-single-hero__status { font-size: .65rem; padding: 4px 9px; }

    .gsbd-match-single__watch-grid { grid-template-columns: 1fr; }

    /* Mcard centered like betting cards */
    .gsbd-mcard { text-align: center; padding: 18px 16px; }
    .gsbd-mcard__type { margin-right: 0; }
    .gsbd-mcard__sport { top: 12px; right: 12px; }
    .gsbd-mcard__teams { gap: 10px; }
    .gsbd-mcard__team:last-child { text-align: center; }
    .gsbd-mcard__team:first-child { text-align: center; }
    .gsbd-mcard__meta { align-items: center; }
}

/* =====================================================================
   SEARCH PAGE — hero + empty-state suggestions (mobile-first)
   ===================================================================== */
.gsbd-search-hero {
    position: relative;
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(244,180,0,.10) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(230,57,70,.12) 0%, transparent 55%),
        linear-gradient(135deg, #061a2c 0%, var(--brand-navy) 55%, #0d2942 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.gsbd-search-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-gold);
    padding: 4px 10px;
    border: 1px solid rgba(244,180,0,.4);
    border-radius: 999px;
    margin-bottom: 14px;
}
.gsbd-search-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 8px;
    color: #fff;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.gsbd-search-hero__meta {
    color: rgba(255,255,255,.78);
    margin: 0 0 var(--space-4);
    font-size: .95rem;
    line-height: 1.5;
}
.gsbd-search-hero__form .gsbd-search {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}
.gsbd-search-hero__form .gsbd-search:focus-within {
    background: rgba(255,255,255,.14);
}
.gsbd-search-hero__form .gsbd-search__input { color: #fff; }
.gsbd-search-hero__form .gsbd-search__input::placeholder { color: rgba(255,255,255,.55); }
/* Hero on mobile: input takes hero-tinted background (matches the surrounding gradient panel) */
@media (max-width: 640px) {
    .gsbd-search-hero__form input.gsbd-search__input[type="search"] {
        background-color: rgba(255,255,255,.10);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
        border-color: rgba(255,255,255,.18);
        color: #fff;
    }
    .gsbd-search-hero__form input.gsbd-search__input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
    .gsbd-search-hero__form input.gsbd-search__input[type="search"]:focus {
        background-color: rgba(255,255,255,.16);
        border-color: var(--brand-red);
    }
}

/* Empty-state suggestions */
.gsbd-search-suggest { margin-top: var(--space-4); }
.gsbd-search-suggest__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}
.gsbd-search-suggest__title--mt { margin-top: var(--space-5); }
.gsbd-search-suggest__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: var(--space-4);
}
.gsbd-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    transition: transform 180ms, border-color 180ms, background 180ms, color 180ms;
    min-height: 48px; /* touch target */
}
.gsbd-chip:hover {
    transform: translateY(-1px);
    border-color: var(--brand-red);
    background: var(--surface-soft, var(--surface));
    color: var(--brand-red);
}
.gsbd-chip__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
.gsbd-chip__label { line-height: 1.2; }

/* Tighter mobile spacing */
@media (max-width: 720px) {
    .gsbd-search-hero {
        padding: var(--space-4) var(--space-3);
        border-radius: var(--radius-md, 8px);
    }
    .gsbd-search-hero__title { line-height: 1.2; } /* prevent descender clipping */

    .gsbd-search-suggest__chips { grid-template-columns: 1fr 1fr; gap: 8px; }
    .gsbd-chip { padding: 12px 14px; font-size: .85rem; }
}
@media (max-width: 380px) {
    .gsbd-search-suggest__chips { grid-template-columns: 1fr; }
}