/**
 * BLADE BOSS - GUIDE LIBRARY (/guides/)
 * modules/guides/assets/css/guides.css
 *
 * The Flight Manual library index. Centered briefing-room hero, sticky
 * peek-and-page category nav, "Start Here" featured strip, and
 * category-grouped accordion sections of image cards.
 *
 * gl- prefix scopes everything to #bbGuides. Uses the site design tokens
 * (Montserrat / Open Sans / #1E5E34) so the library matches the rest of
 * the site. All cards render in the DOM (accordions collapse via CSS) so
 * the page stays fully crawlable.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

#bbGuides {
    /* type */
    --gl-display: var(--font-display, 'Montserrat', sans-serif);
    --gl-body:    var(--font-body, 'Open Sans', sans-serif);
    --gl-mono:    var(--font-mono, 'JetBrains Mono', monospace);
    /* surface */
    --gl-paper:    #FBFCFB;
    --gl-card:     #FFFFFF;
    --gl-ink:      #0A2818;
    --gl-ink-soft: #3d5245;
    --gl-muted:    #6b7f70;
    --gl-hairline: #e4ebe6;
    --gl-hairline-soft: #eef3ef;
    /* difficulty gauge (green -> amber -> red) */
    --gl-d1: #10B981; --gl-d2: #5aa73c; --gl-d3: #c9a227; --gl-d4: #d9822b; --gl-d5: #c0492f;
    /* elevation */
    --gl-shadow-card:  0 1px 2px rgba(10,40,24,.04), 0 4px 16px rgba(10,40,24,.06);
    --gl-shadow-hover: 0 8px 20px rgba(10,40,24,.10), 0 20px 48px rgba(10,40,24,.10);

    font-family: var(--gl-body);
    background: var(--gl-paper);
    color: var(--gl-ink);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO - centered briefing room
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Let the hero bleed to the very top under the floating nav (same trick your other
   public pages use). .bb-main normally pads the top by --nav-height; kill that here
   and fold the height into the hero's OWN top padding so the badge stays put. */
.bb-page-guides .bb-main { padding-top: 0; max-width: 100%; }

.gl-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--bb-white);
    background: radial-gradient(130% 150% at 50% -20%, #123a22 0%, var(--bb-green-dark) 58%);
    padding: calc(var(--nav-height) * 2 + var(--space-8)) var(--page-gutter) var(--space-8);
}
.gl-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.gl-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(80% 75% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(80% 75% at 50% 0%, #000 25%, transparent 78%);
}
.gl-hero-orb {
    position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
    width: 640px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,.18), transparent 62%);
    filter: blur(12px);
}
.gl-hero-inner {
    position: relative; max-width: 760px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}
.gl-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--gl-display); font-size: 12px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--bb-green-bright);
    border: 1px solid rgba(16,185,129,.32); background: rgba(16,185,129,.09);
    padding: 7px 15px; border-radius: var(--radius-full);
}
.gl-hero-title {
    font-family: var(--gl-display); font-weight: 900;
    font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.025em; line-height: 1;
    color: var(--bb-white); margin: var(--space-5) 0 0;
}
.gl-hero-title em { font-style: normal; color: var(--bb-green-bright); }
.gl-hero-rule {
    width: 64px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--bb-green-bright), transparent);
    margin: var(--space-5) auto var(--space-4);
}
.gl-hero-sub {
    max-width: 600px; font-size: var(--text-lg); line-height: 1.6;
    color: rgba(233,242,235,.82); margin: 0;
}
.gl-hero-stats { display: flex; margin-top: var(--space-6); }
.gl-hstat { padding: 0 26px; position: relative; }
.gl-hstat + .gl-hstat::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 34px; background: rgba(255,255,255,.14);
}
.gl-hstat-n { font-family: var(--gl-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--bb-white); }
.gl-hstat-l { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(233,242,235,.58); margin-top: 7px; }

.gl-search-wrap { position: relative; width: 100%; max-width: 560px; margin-top: var(--space-6); }
.gl-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(233,242,235,.5); pointer-events: none; }
.gl-search {
    width: 100%; font-family: var(--gl-body); font-size: 16px; color: var(--bb-white);
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
    border-radius: 14px; padding: 15px 18px 15px 50px; outline: none;
    transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.gl-search::placeholder { color: rgba(233,242,235,.45); }
.gl-search:focus { border-color: var(--bb-green-bright); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.gl-search::-webkit-search-cancel-button { filter: invert(1); }

.gl-popular { margin-top: var(--space-4); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.gl-popular-label { font-family: var(--gl-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: rgba(233,242,235,.55); }
.gl-poptag {
    font-size: 12.5px; color: rgba(233,242,235,.85); background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12); padding: 5px 12px; border-radius: var(--radius-full);
    cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.gl-poptag:hover { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.4); color: var(--bb-white); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STICKY INDEX / FILTER BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-index {
    position: sticky; top: var(--nav-height); z-index: 50;
    background: rgba(251,252,251,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gl-hairline); padding: 11px var(--page-gutter);
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ride up to the top when the site nav hides on scroll-down (flag set in nav.js) */
body.bb-nav-hidden .gl-index { top: 0; }
.gl-index-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* peek-and-page nav */
.gl-navscroll { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.gl-pills { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 0; }
.gl-pills::-webkit-scrollbar { display: none; }
.gl-navscroll::before, .gl-navscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); }
.gl-navscroll::before { left: 0; background: linear-gradient(90deg, var(--gl-paper) 34%, rgba(251,252,251,0)); }
.gl-navscroll::after { right: 0; background: linear-gradient(270deg, var(--gl-paper) 34%, rgba(251,252,251,0)); }
.gl-navscroll.can-left::before { opacity: 1; }
.gl-navscroll.can-right::after { opacity: 1; }
.gl-sa {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--gl-hairline);
    background: var(--gl-card); color: var(--gl-ink-soft); cursor: pointer;
    display: none; place-items: center; box-shadow: 0 2px 10px rgba(10,40,24,.14);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.gl-sa:hover { border-color: var(--bb-green); color: var(--bb-green); }
.gl-sa:active { transform: translateY(-50%) scale(.92); }
.gl-sa-left { left: 0; } .gl-sa-right { right: 0; }
.gl-navscroll.can-left .gl-sa-left { display: grid; }
.gl-navscroll.can-right .gl-sa-right { display: grid; }

.gl-pill {
    font-family: var(--gl-display); font-weight: 600; font-size: 13px; color: var(--gl-ink-soft);
    background: var(--gl-card); border: 1.5px solid var(--gl-hairline); border-radius: var(--radius-full);
    padding: 8px 15px; min-height: 36px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.gl-pill:hover { border-color: var(--bb-green-light); color: var(--bb-green); transform: translateY(-1px); }
.gl-pill.is-active { background: var(--bb-green); border-color: var(--bb-green); color: var(--bb-white); }
.gl-pill-ct { font-family: var(--gl-mono); font-size: 11px; opacity: .7; }

.gl-facet { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gl-facet-label { font-family: var(--gl-display); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gl-muted); }
.gl-diffbtns { display: flex; gap: 4px; }
.gl-diffbtn {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--gl-hairline);
    background: var(--gl-card); font-family: var(--gl-display); font-weight: 700; font-size: 12px;
    color: var(--gl-ink-soft); cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.gl-diffbtn:hover { border-color: var(--bb-green-light); }
.gl-diffbtn.is-active { background: var(--gl-ink); color: var(--bb-white); border-color: var(--gl-ink); }
.gl-lvlreset {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--gl-hairline);
    background: var(--gl-card); color: var(--gl-muted); cursor: pointer; display: grid; place-items: center;
    opacity: .45; pointer-events: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.gl-lvlreset.is-on { opacity: 1; pointer-events: auto; }
.gl-lvlreset:hover { border-color: var(--gl-d5); color: var(--gl-d5); }

.gl-expand { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; font-family: var(--gl-display); font-weight: 600; font-size: 12.5px; color: var(--gl-ink-soft); background: var(--gl-card); border: 1.5px solid var(--gl-hairline); border-radius: var(--radius-full); padding: 7px 13px; min-height: 36px; cursor: pointer; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.gl-expand:hover { border-color: var(--bb-green-light); color: var(--bb-green); }
.gl-expand-ic { transition: transform var(--duration-normal) var(--ease-out); }
.gl-expand.is-expanded .gl-expand-ic { transform: rotate(180deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHELL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-shell { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter) var(--space-8); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   START HERE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-starthere { margin: var(--space-6) 0 var(--space-1); }
.gl-sh-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.gl-sh-head h2 { font-family: var(--gl-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; margin: 0; }
.gl-sh-head span { font-size: 14px; color: var(--gl-muted); }
.gl-sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.gl-feat {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 220px;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
    color: var(--bb-white); text-decoration: none; box-shadow: var(--gl-shadow-card); isolation: isolate;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.gl-feat-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform var(--duration-normal) var(--ease-out); }
.gl-feat-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,20,11,0) 0%, rgba(4,20,11,.45) 38%, rgba(4,20,11,.94) 100%); }
.gl-feat:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-hover); }
.gl-feat:hover .gl-feat-bg { transform: scale(1.05); }
.gl-feat-tag { position: absolute; top: 14px; right: 14px; font-family: var(--gl-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; background: rgba(16,185,129,.92); color: #04220f; padding: 4px 9px; border-radius: 6px; }
.gl-feat h3 { font-family: var(--gl-display); font-weight: 800; font-size: 1.18rem; line-height: 1.18; margin: 0 0 6px; color: var(--bb-white); text-shadow: 0 1px 4px rgba(0,0,0,.55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-feat p { font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.45; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCORDION SECTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-cat {
    margin-top: 16px; scroll-margin-top: calc(var(--nav-height) + 60px);
    border: 1px solid var(--gl-hairline); border-radius: var(--radius-lg);
    background: var(--gl-card); overflow: hidden; box-shadow: var(--gl-shadow-card);
}
.gl-acc-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; user-select: none; transition: background var(--duration-fast) var(--ease-out); }
.gl-acc-head:hover { background: var(--gl-hairline-soft); }
.gl-cat-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bb-mint); color: var(--bb-green); display: grid; place-items: center; flex: 0 0 auto; }
.gl-acc-head .gl-cat-txt { flex: 1; min-width: 0; }
.gl-cat-title { font-family: var(--gl-display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--gl-ink); }
.gl-cat-title .gl-cat-ct { font-family: var(--gl-mono); font-size: 12px; font-weight: 600; color: var(--gl-muted); background: var(--gl-hairline-soft); padding: 3px 9px; border-radius: 6px; letter-spacing: 0; }
.gl-cat-blurb { font-size: 13.5px; color: var(--gl-muted); margin: 3px 0 0; }
.gl-chev { flex: 0 0 auto; color: var(--gl-muted); transition: transform var(--duration-normal) var(--ease-out); }
.gl-cat.gl-collapsed .gl-chev { transform: rotate(-90deg); }
.gl-acc-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 380ms var(--ease-out); }
.gl-cat.gl-collapsed .gl-acc-body { grid-template-rows: 0fr; }
.gl-acc-inner { overflow: hidden; min-height: 0; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; padding: 4px 20px 24px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD (image + instrument strip)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-card {
    background: var(--gl-card); border: 1px solid var(--gl-hairline); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
    box-shadow: var(--gl-shadow-card);
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.gl-card:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-hover); border-color: var(--bb-green-light); }
.gl-card.is-hidden { display: none; }
.gl-card-locked .gl-card-media { filter: saturate(.75) brightness(.88); }
.gl-card-locked .gl-card-title { color: var(--gl-ink-soft); }
.gl-card-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bb-green) 0%, var(--bb-green-dark) 100%); }
.gl-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform var(--duration-normal) var(--ease-out); }
.gl-card:hover .gl-card-img { transform: scale(1.06); }
/* branded fallback tile (no photo yet) - blueprint grid + category glyph */
.gl-card-ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.10), transparent 55%), linear-gradient(135deg, var(--bb-green) 0%, var(--bb-green-dark) 100%); }
.gl-card-ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(90% 80% at 50% 42%, #000 40%, transparent 82%); -webkit-mask-image: radial-gradient(90% 80% at 50% 42%, #000 40%, transparent 82%); }
.gl-card-ph svg { position: relative; width: 54px; height: 54px; color: rgba(255,255,255,.34); }
.gl-card-num { position: absolute; top: 10px; left: 10px; font-family: var(--gl-mono); font-weight: 600; font-size: 11px; letter-spacing: .03em; color: var(--bb-white); background: rgba(10,40,24,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 6px; }
.gl-card-badge { position: absolute; top: 10px; right: 10px; font-family: var(--gl-display); font-weight: 700; font-size: 10px; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.gl-card-badge.is-mem { background: rgba(10,40,24,.72); color: #ffd76b; }
.gl-card-badge.is-vid { background: rgba(16,185,129,.92); color: #04220f; }
.gl-card-body { padding: 15px 16px 14px; display: flex; flex-direction: column; flex: 1; }
.gl-card-cat { font-family: var(--gl-display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-green); margin-bottom: 7px; }
.gl-card-title { font-family: var(--gl-display); font-weight: 700; font-size: 1.04rem; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 6px; color: var(--gl-ink); }
.gl-card-sub { font-size: 13px; color: var(--gl-muted); line-height: 1.45; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* instrument strip = signature */
.gl-card-specs { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--gl-hairline-soft); }
.gl-specgroup { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.gl-difflabel { font-family: var(--gl-display); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--gl-muted); }
.gl-gauge { display: flex; gap: 3px; align-items: center; }
.gl-gauge .gl-seg { width: 13px; height: 5px; border-radius: 2px; background: var(--gl-hairline); }
.gl-gauge .gl-seg.is-on { background: var(--gl-dc, var(--bb-green)); }
.gl-spec { display: flex; align-items: center; gap: 5px; font-family: var(--gl-mono); font-size: 11.5px; font-weight: 500; color: var(--gl-ink-soft); white-space: nowrap; }
.gl-spec svg { color: var(--gl-muted); flex: 0 0 auto; }
.gl-spec.is-cost { margin-left: auto; font-weight: 600; color: var(--bb-green); }

/* empty / no results */
.gl-empty, .gl-no-results { text-align: center; padding: var(--space-8) var(--space-4); color: var(--gl-muted); font-size: 15px; }
.gl-no-results { display: none; }
.gl-no-results.is-show { display: block; }
.gl-no-results a { color: var(--bb-green); font-weight: 600; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BAND
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-cta { background: linear-gradient(150deg, var(--bb-green-dark), #123524); padding: var(--space-8) var(--page-gutter); margin-top: var(--space-8); }
.gl-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.gl-cta h2 { font-family: var(--gl-display); font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.08; color: var(--bb-white); margin: 0 0 var(--space-3); letter-spacing: -.01em; }
.gl-cta h2 span { color: var(--bb-green-bright); }
.gl-cta p { font-size: var(--text-base); line-height: 1.6; color: rgba(233,242,235,.8); margin: 0 0 var(--space-5); }
.gl-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.gl-cta-btn-primary { display: inline-flex; align-items: center; gap: 9px; font-family: var(--gl-display); font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--bb-white); background: var(--bb-orange); border: 0; border-radius: var(--radius-full); padding: 14px 30px; cursor: pointer; box-shadow: 0 0 30px rgba(245,120,66,.35); transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.gl-cta-btn-primary:hover { background: var(--bb-orange-hover, #e0693a); transform: translateY(-2px); box-shadow: 0 0 44px rgba(245,120,66,.5); }
.gl-cta-btn-secondary { font-family: var(--gl-display); font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--bb-white); border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--radius-full); padding: 13px 28px; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.gl-cta-btn-secondary:hover { border-color: var(--bb-green-bright); background: rgba(16,185,129,.12); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
    /* Compact sticky index bar on mobile: pills get their own row, then a tight
       controls row with smaller level buttons + an icon-only expand toggle. */
    .gl-index { top: var(--nav-height-mobile); padding: 7px var(--page-gutter); }
    .gl-hero { padding-top: calc(var(--nav-height-mobile) * 2 + var(--space-6) + env(safe-area-inset-top, 0px)); }
    .gl-hero-stats { margin-top: var(--space-5); }
    .gl-hstat { padding: 0 16px; }
    .gl-index-inner { gap: 7px; }
    .gl-navscroll { flex: 1 1 100%; }
    .gl-facet { flex: 1 1 auto; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .gl-facet::-webkit-scrollbar { display: none; }
    .gl-facet-label { font-size: 11px; letter-spacing: .03em; }
    .gl-grid { grid-template-columns: 1fr; padding: 4px 14px 20px; }
    .gl-acc-head { padding: 16px; gap: 12px; }
    .gl-card-specs { gap: 6px 10px; }
    .gl-spec.is-cost { margin-left: 0; }
    /* pills stay comfortably tappable; secondary controls shrink to reclaim height */
    .gl-pill { min-height: 44px; }
    .gl-diffbtn { width: 34px; height: 34px; flex: 0 0 auto; font-size: 12px; }
    .gl-lvlreset { width: 34px; height: 34px; flex: 0 0 auto; }
    .gl-sa { width: 36px; height: 36px; }
    .gl-poptag { min-height: 34px; display: inline-flex; align-items: center; }
    .gl-expand { min-height: 34px; width: 34px; padding: 0; gap: 0; justify-content: center; flex: 0 0 auto; }
    .gl-expand-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gl-feat, .gl-feat-bg, .gl-card, .gl-card-img, .gl-acc-body, .gl-chev, .gl-sa { transition: none; }
}