/*
 Theme Name:   Bricks Child Theme (ESG)
 Theme URI:    https://bricksbuilder.io/
 Description:  ESG port of the RiderGuide Bricks child theme, recolored to ESG blue #003DA5.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Set the font size for each heading level */

.table-of-contents li a:focus {
  color: #003DA5;
}

.table-of-contents li.toc-1 {
  margin-top: 48px;
  font-size: 24px;
  font-family: trap;
  font-weight: 800;
  color: #1e2021;
  line-height: 130%;
}

.table-of-contents li.toc-2 {
   margin-top: 48px;
  font-size: 24px;
  font-family: trap;
  font-weight: 800;
  color: #1e2021;
  line-height: 130%;
}

.table-of-contents li.toc-3 {
   margin-top: 16px;
  font-size: 16px;
  font-family: inter;
  font-weight: 400;
  line-height: 130%;
  color: #69686B;
}

.table-of-contents li.toc-4 {
  font-size: 16px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inter;
  line-height: 130%;
  color: #69686B;
}

.table-of-contents li.toc-5 {
  font-size: 16px;
}

.table-of-contents li.toc-6 {
  font-size: 16px;
}

.table-of-contents ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brxe-text-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px;
  border-bottom-color: #003DA5;
}/* ============================================================
   Phase 2 — riderguide.com homepage redesign
   bricks-child/style.css additions
   ============================================================ */

/* --- Responsive hero: tdkvak visible at all viewports ---- */

/* Show desktop hero on all screen sizes (Bricks' mobile_landscape:none was stripped) */
#brxe-tdkvak {
    display: flex !important;
}

/* Stack hero columns below 768 px */
@media (max-width: 768px) {
    #brxe-tdkvak {
        flex-direction: column !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }
    #brxe-sjmtzs,
    #brxe-qlodxw,
    #brxe-veimvo {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Stack blocks inside each column */
    #brxe-sjmtzs > .brxe-block,
    #brxe-qlodxw > .brxe-block,
    #brxe-veimvo > .brxe-block {
        width: 100% !important;
    }
    /* Hero images take full width */
    #brxe-tdkvak .brxe-image img {
        width: 100%;
        height: auto;
        max-height: 220px;
        object-fit: cover;
    }
}

@media (max-width: 414px) {
    #brxe-tdkvak .brxe-image img {
        max-height: 180px;
    }
}

@media (max-width: 375px) {
    #brxe-tdkvak {
        margin: 0;
        padding: 0;
    }
    #brxe-tdkvak .brxe-image img {
        max-height: 160px;
    }
}

@media (max-width: 320px) {
    #brxe-tdkvak {
        overflow-x: hidden;
    }
}

/* --- rg-section: width normalisation ---------------------- */
/* CSS is also defined in Bricks Global Class (rgsect).
   These selectors cover header/footer theme-parts and other
   containers not reachable via page Bricks JSON. */

#brxe-vriwqe,
#brxe-htbmvg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Footer columns */
#brxe-pgzoew,
#brxe-txqnmn,
#brxe-kpprqg,
#brxe-lfayrm,
#brxe-cveixz,
#brxe-uactwb,
#brxe-lyypnm {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Newsletter inner section */
#brxe-fexgbj {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* --- rg-link: tap target padding on interactive elements -- */

/* Loop card title anchors */
.brxe-text-basic a,
.brxe-shortcode a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Section heading anchors */
.brxe-heading a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Footer links */
#brx-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 4px;
}

/* Category pill anchors inside hero tiles */
#brxe-tdkvak .brxe-text-basic a[href*="/category/"],
#brxe-tdkvak .brxe-text-basic a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* --- Prevent body horizontal scroll at 320 px ------------- */
html, body {
    overflow-x: hidden;
}

/* Loop horizontal scroll containers — preserve their behaviour */
#brxe-enixjn,
#brxe-yomiht,
#brxe-aommtq,
#brxe-jofdrw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Contain frozen lhejpr at sub-375px viewports --------- */
/* lhejpr has a 375px fixed width from Bricks; clamp it so it
   never causes horizontal scroll at 320px without restyling it */
#brxe-lhejpr {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================================
   Phase 2 FIX v2 — 2026-05-18
   Replaces v1 (which only targeted Recent Reviews because each
   loop uses a different Bricks child class). v2 uses generic
   descendant selectors so all 5 loop sections behave the same.
   Also clips each loop to the first 4 cards to match prod's
   visible content (was previously hidden by horizontal scroll).
   ============================================================ */

/* (Reset v1's body overflow rule — keep but ensure mobile clip stays) */
html, body { overflow-x: visible !important; }
@media (max-width: 480px) {
    html, body { overflow-x: hidden !important; }
}

/* (Reset v1's loop container rules with broader selectors) */
#brxe-enixjn,
#brxe-yomiht,
#brxe-aommtq,
#brxe-jofdrw {
    overflow-x: visible !important;
    -webkit-overflow-scrolling: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 24px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Card width — 4 per row at desktop. Generic: target any direct
   child .brxe-block of the loop container (each loop uses a
   different child class, but they're all .brxe-block). */
#brxe-enixjn > .brxe-block,
#brxe-yomiht > .brxe-block,
#brxe-aommtq > .brxe-block,
#brxe-jofdrw > .brxe-block {
    width: calc(25% - 18px) !important;
    flex: 0 0 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    height: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hide cards beyond the first 4 per loop, matching prod's visual */
#brxe-enixjn > .brxe-block:nth-child(n+5),
#brxe-yomiht > .brxe-block:nth-child(n+5),
#brxe-aommtq > .brxe-block:nth-child(n+5),
#brxe-jofdrw > .brxe-block:nth-child(n+5) {
    display: none !important;
}

/* Card image: fill card width, 3:2 ratio.
   Generic: target any .brxe-image descendant inside the loop. */
#brxe-enixjn .brxe-image,
#brxe-yomiht .brxe-image,
#brxe-aommtq .brxe-image,
#brxe-jofdrw .brxe-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    max-width: 100% !important;
    display: block !important;
}
#brxe-enixjn .brxe-image img,
#brxe-yomiht .brxe-image img,
#brxe-aommtq .brxe-image img,
#brxe-jofdrw .brxe-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 3 / 2 !important;
}

/* Card title block: full width of card */
#brxe-enixjn > .brxe-block > .brxe-block,
#brxe-yomiht > .brxe-block > .brxe-block,
#brxe-aommtq > .brxe-block > .brxe-block,
#brxe-jofdrw > .brxe-block > .brxe-block {
    width: 100% !important;
    max-width: 100% !important;
}

/* Responsive grid breakpoints */
@media (max-width: 1024px) {
    #brxe-enixjn > .brxe-block,
    #brxe-yomiht > .brxe-block,
    #brxe-aommtq > .brxe-block,
    #brxe-jofdrw > .brxe-block {
        width: calc(33.333% - 16px) !important;
        flex: 0 0 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
    /* show only 3 at tablet to keep one tidy row */
    #brxe-enixjn > .brxe-block:nth-child(n+4),
    #brxe-yomiht > .brxe-block:nth-child(n+4),
    #brxe-aommtq > .brxe-block:nth-child(n+4),
    #brxe-jofdrw > .brxe-block:nth-child(n+4) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #brxe-enixjn > .brxe-block,
    #brxe-yomiht > .brxe-block,
    #brxe-aommtq > .brxe-block,
    #brxe-jofdrw > .brxe-block {
        width: calc(50% - 12px) !important;
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
    #brxe-enixjn > .brxe-block:nth-child(n+5),
    #brxe-yomiht > .brxe-block:nth-child(n+5),
    #brxe-aommtq > .brxe-block:nth-child(n+5),
    #brxe-jofdrw > .brxe-block:nth-child(n+5) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #brxe-enixjn > .brxe-block,
    #brxe-yomiht > .brxe-block,
    #brxe-aommtq > .brxe-block,
    #brxe-jofdrw > .brxe-block {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    #brxe-enixjn > .brxe-block:nth-child(n+4),
    #brxe-yomiht > .brxe-block:nth-child(n+4),
    #brxe-aommtq > .brxe-block:nth-child(n+4),
    #brxe-jofdrw > .brxe-block:nth-child(n+4) {
        display: none !important;
    }
}

/* ============================================================
   Phase 2 FIX v4 — 2026-05-18
   Constrains the PARENT wrapper instead of each section
   individually. v3 only centered the 6 sections we knew about
   but the parent (emfqiu) holds OTHER children too — heading
   wrappers, credibility blocks, text, dividers — which still
   spanned the full main width.
   v4 sets emfqiu itself to 1340px max-width + centered, so
   every child (whether or not it has rg-section class) falls
   within the same content column.
   The frozen ad section (lhejpr) breaks out to full-bleed.
   ============================================================ */

/* Override v3's emfqiu rule */
#brxe-emfqiu {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Children of emfqiu inherit the wrapper width; remove individual
   max-width overrides from v3 so all children behave consistently */
#brxe-tdkvak,
#brxe-spcome,
#brxe-qjbyiw,
#brxe-nboaso {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* edlurg is a sibling of emfqiu (parent=0), so it still needs
   the section-level centering — keep it */
#brxe-edlurg {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
    box-sizing: border-box !important;
}

/* Frozen ad area breaks out of the 1280 wrapper to full-bleed */
#brxe-lhejpr {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* ============================================================
   Phase 2 FIX v5 — 2026-05-18
   The "frozen" lhejpr section is actually the "7.1M Riders
   Helped" credibility block — not just an ad banner. Brief
   intended it kept full-bleed but stakeholder feedback shows
   that breaks visual rhythm against centered sections. v5
   centers lhejpr inside the 1280 wrapper to match the rest.
   Also centers the newsletter template (iuhxty) which sits
   outside emfqiu as a parent=0 sibling.
   ============================================================ */

/* Undo v4's full-bleed treatment on lhejpr — let it inherit the
   1280 wrapper centering like every other section in emfqiu */
#brxe-lhejpr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
    left: auto !important;
}

/* Center the newsletter template (sibling of emfqiu) using the
   same 1280 wrapper math as edlurg */
#brxe-iuhxty {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
    box-sizing: border-box !important;
}

/* If iuhxty wraps the newsletter inner section (fexgbj), let
   it fill its container — fexgbj's own width override from
   the original phase 2 CSS already sets width:100% */
#brxe-fexgbj {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Dividers at parent=0 (nqbbki, wesaur) — keep inside the column */
#brxe-nqbbki,
#brxe-wesaur {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Phase 2 FIX v6 — 2026-05-18
   Header (vriwqe) and footer (pgzoew, cveixz) sections keep
   their full-bleed colored bars but get dynamic side padding
   so their inner content aligns with the 1280-centered body.
   Math: padding = max(viewport-edge-clamp, (100% - 1280) / 2)
   - At 1440 viewport: padding = (1440-1280)/2 = 80px → content in 1280 column
   - At 1280: padding = 0 → content uses full 1280
   - At <1280: padding falls back to the 16-32px edge clamp
   ============================================================ */

/* Header bar */
#brxe-vriwqe {
    padding-left: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    padding-right: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    box-sizing: border-box !important;
}

/* Footer main section */
#brxe-pgzoew {
    padding-left: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    padding-right: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    box-sizing: border-box !important;
}

/* Footer disclaimer/copyright section */
#brxe-cveixz {
    padding-left: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    padding-right: max(clamp(16px, 4vw, 32px), calc((100% - 1340px) / 2)) !important;
    box-sizing: border-box !important;
}

/* ============================================================
   v8 — Mockup 04 base layer (tokens + fonts + helpers)
   Date: 2026-05-19
   Scope: foundation only. Per-section CSS lands later (v9+).
   Rollback: delete this entire block + every v9+ block.
   ============================================================ */

/* Google Fonts — Bricolage Grotesque (headings/brand), Geist (body),
   Geist Mono (eyebrows/util). TODO migrate to wp_enqueue_style for perf. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Mockup 04 palette (LOCKED 2026-05-19 — supersedes #003DA5 brand) */
  --rg-bg:        #FBFBFA;
  --rg-bg-2:      #F4F4F2;
  --rg-bg-3:      #ECECE8;
  --rg-line:      #DEDEDA;
  --rg-line-soft: #EAEAE6;
  --rg-ink:       #0E0E10;
  --rg-ink-2:     #38383E;
  --rg-ink-3:     #76767E;
  --rg-ink-4:     #B8B8BE;
  --rg-lime:      #003DA5;
  --rg-lime-deep: #002D7A;
  --rg-blue-bright: #4D8DFF;
  --rg-red:       #FF4D4D;
}

/* Body-level typography swap. Affects every page on the site
   (intended — this is the rebrand). Per-page Bricks elements
   that hardcoded the old font family will need fixing as
   they're encountered. */
body {
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--rg-ink);
  background: var(--rg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Bricolage Grotesque, tight tracking */
h1, h2, h3, h4, h5, h6,
.bricks-content h1, .bricks-content h2, .bricks-content h3,
.bricks-content h4, .bricks-content h5, .bricks-content h6 {
  font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--rg-ink);
}

/* Helper classes (rg- prefix to avoid clashes with Bricks builder
   classes and other plugins) */
.rg-wrap {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 28px;
  width: 100%;
}
.rg-mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-feature-settings: "ss01";
}

/* Link reset for new design — old #003DA5 anchor color still
   used elsewhere; component-level overrides will color-correct
   inside sections we migrate. */
.rg-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.rg-link:hover { color: var(--rg-lime-deep); }
/* ============================================================
   v9 — Mockup 04 per-section restyle (CSS-first pass)
   Date: 2026-05-19
   Builds on v8 base tokens/fonts. Targets existing Bricks tree
   without structural changes. Structural rebuilds (megamenu,
   2-col hero+RideFinder, compare table, 4x2 grid, cred strip)
   live in UI-REBUILD-SPEC.md.

   Element ID map (memory + post 2 JSON inspection 2026-05-19):
   - emfqiu .... homepage main wrapper
   - tdkvak .... hero section
   - lhejpr .... FROZEN ad area (no styling here)
   - rjiwgh .... Recent Reviews wrapper (xvkizo heading + xebjkl loop)
   - spcome .... Getting Started wrapper (rvjgii heading + enixjn loop)
   - qjbyiw .... News & Blog wrapper (rqxccd heading + yomiht loop)
   - nboaso .... Latest Guides wrapper (nsmqef heading + aommtq loop)
   - edlurg .... Featured Safety & Gear wrapper (jgxops heading + jofdrw loop)
   - iuhxty .... newsletter template
   - pgzoew .... footer main section (footer template)
   - cveixz .... footer bottom (copyright)

   Loop child block classes (per memory):
   - .brxe-uxqhoi .... Recent Reviews card
   - .brxe-uzkkqa .... Getting Started card
   - .brxe-ndfcym .... News & Blog card
   - .brxe-eprrrn .... Latest Guides card
   - .brxe-owxeyg .... Featured Safety & Gear card
   ============================================================ */


/* ---------------------------------------------------------
   1. SECTION HEADINGS — Bricolage, with bottom rule
   --------------------------------------------------------- */
#brxe-xvkizo h1, #brxe-xvkizo h2, #brxe-xvkizo h3,
#brxe-rvjgii h1, #brxe-rvjgii h2, #brxe-rvjgii h3,
#brxe-rqxccd h1, #brxe-rqxccd h2, #brxe-rqxccd h3,
#brxe-nsmqef h1, #brxe-nsmqef h2, #brxe-nsmqef h3,
#brxe-jgxops h1, #brxe-jgxops h2, #brxe-jgxops h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--rg-ink);
  margin: 0 0 16px;
}

#brxe-xvkizo, #brxe-rvjgii, #brxe-rqxccd, #brxe-nsmqef, #brxe-jgxops {
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--rg-ink) !important;
}

/* Eyebrow text inside heading blocks — Geist Mono, lime-deep */
#brxe-xvkizo p, #brxe-rvjgii p, #brxe-rqxccd p, #brxe-nsmqef p, #brxe-jgxops p {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--rg-lime-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}


/* ---------------------------------------------------------
   2. SECTION VERTICAL RHYTHM — match mockup 64px padding
   --------------------------------------------------------- */
#brxe-spcome, #brxe-qjbyiw, #brxe-nboaso, #brxe-edlurg {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  border-bottom: 1px solid var(--rg-line);
}


/* ---------------------------------------------------------
   3. LOOP CARDS — shared base styling
   Applied to every card block class. v1-v7 set 4-per-row
   flex/wrap; we keep that and just style the cards.
   --------------------------------------------------------- */
.brxe-uxqhoi,
.brxe-uzkkqa,
.brxe-ndfcym,
.brxe-eprrrn,
.brxe-owxeyg {
  background: var(--rg-bg) !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s !important;
  text-decoration: none;
  position: relative;
}
.brxe-uxqhoi:hover,
.brxe-uzkkqa:hover,
.brxe-ndfcym:hover,
.brxe-eprrrn:hover,
.brxe-owxeyg:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(14, 14, 16, 0.18);
  border-color: var(--rg-ink) !important;
}

/* Card image wrapper */
.brxe-uxqhoi a[id^="brxe-"]:first-child,
.brxe-uzkkqa a[id^="brxe-"]:first-child,
.brxe-ndfcym a[id^="brxe-"]:first-child,
.brxe-eprrrn a[id^="brxe-"]:first-child,
.brxe-owxeyg a[id^="brxe-"]:first-child {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--rg-bg-2);
  display: block;
}
.brxe-uxqhoi img,
.brxe-uzkkqa img,
.brxe-ndfcym img,
.brxe-eprrrn img,
.brxe-owxeyg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.brxe-uxqhoi:hover img,
.brxe-uzkkqa:hover img,
.brxe-ndfcym:hover img,
.brxe-eprrrn:hover img,
.brxe-owxeyg:hover img {
  transform: scale(1.06);
}

/* Card title */
.brxe-uxqhoi h1, .brxe-uxqhoi h2, .brxe-uxqhoi h3, .brxe-uxqhoi h4,
.brxe-uzkkqa h1, .brxe-uzkkqa h2, .brxe-uzkkqa h3, .brxe-uzkkqa h4,
.brxe-ndfcym h1, .brxe-ndfcym h2, .brxe-ndfcym h3, .brxe-ndfcym h4,
.brxe-eprrrn h1, .brxe-eprrrn h2, .brxe-eprrrn h3, .brxe-eprrrn h4,
.brxe-owxeyg h1, .brxe-owxeyg h2, .brxe-owxeyg h3, .brxe-owxeyg h4 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rg-ink);
  padding: 16px 18px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ---------------------------------------------------------
   4. TRIPLET (News / Guides / Gear) — mini-list mode
   The mockup shows triplet as 80x56 thumb + title in a row.
   We keep current 4-card layout from v2 patches (no easy way
   to change to 3-col without structural edits) but trim card
   to look like a mini.
   NOTE: full mini-list conversion → UI-REBUILD-SPEC.md
   --------------------------------------------------------- */
.brxe-ndfcym h1, .brxe-ndfcym h2, .brxe-ndfcym h3, .brxe-ndfcym h4,
.brxe-eprrrn h1, .brxe-eprrrn h2, .brxe-eprrrn h3, .brxe-eprrrn h4,
.brxe-owxeyg h1, .brxe-owxeyg h2, .brxe-owxeyg h3, .brxe-owxeyg h4 {
  font-size: 14.5px;
  font-weight: 600;
  font-family: 'Geist', sans-serif !important;
  letter-spacing: 0;
}

.brxe-ndfcym, .brxe-eprrrn, .brxe-owxeyg {
  border-radius: 10px !important;
}


/* ---------------------------------------------------------
   5. HERO (#brxe-tdkvak) — light palette refresh
   The 10-tile hero stays structurally. We give tiles the
   mockup card shape + lime hover.
   2-col Hero+RideFinder rebuild → UI-REBUILD-SPEC.md
   --------------------------------------------------------- */
#brxe-tdkvak {
  background: var(--rg-bg) !important;
  padding: 40px 0 24px !important;
  border-bottom: 1px solid var(--rg-line);
}




/* ---------------------------------------------------------
   6. NEWSLETTER (#brxe-iuhxty)
   The newsletter is a Bricks template. Keep WPForms shortcode
   exactly as-is. Style the container chrome + submit button.
   --------------------------------------------------------- */
#brxe-iuhxty,
.brxe-iuhxty {
  background: var(--rg-bg-2) !important;
  padding: 64px 0 !important;
  border-top: 1px solid var(--rg-line) !important;
  border-bottom: 1px solid var(--rg-line) !important;
}

#brxe-iuhxty h1, #brxe-iuhxty h2,
.brxe-iuhxty h1, .brxe-iuhxty h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px) !important;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--rg-ink);
}

#brxe-iuhxty p, .brxe-iuhxty p {
  font-size: 16px;
  color: var(--rg-ink-2);
  max-width: 460px;
  line-height: 1.55;
}

/* Newsletter input + lime submit button (WPForms id 11588) */
#brxe-iuhxty input[type="email"],
#brxe-iuhxty input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="text"] {
  padding: 16px 20px !important;
  border: 1px solid var(--rg-line) !important;
  background: var(--rg-bg) !important;
  border-radius: 10px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  color: var(--rg-ink);
}
#brxe-iuhxty input[type="email"]:focus,
#brxe-iuhxty input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="text"]:focus {
  outline: 2px solid var(--rg-lime) !important;
  border-color: transparent !important;
}

#brxe-iuhxty button[type="submit"],
#brxe-iuhxty input[type="submit"],
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"] {
  background: var(--rg-lime) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 16px 28px !important;
  border-radius: 10px !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0, 61, 165, 0.55),
              0 2px 0 var(--rg-lime-deep);
  transition: transform .12s ease, box-shadow .2s ease, background .15s, color .15s;
}
#brxe-iuhxty button[type="submit"]:hover,
#brxe-iuhxty input[type="submit"]:hover,
.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover {
  background: var(--rg-ink) !important;
  color: var(--rg-blue-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0, 61, 165, 0.45),
              0 2px 0 rgba(0,0,0,0.4);
}
#brxe-iuhxty button[type="submit"]:active,
#brxe-iuhxty input[type="submit"]:active,
.wpforms-container button[type="submit"]:active,
.wpforms-container input[type="submit"]:active {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   7. FOOTER (#brxe-pgzoew + #brxe-cveixz)
   Existing structure: section pgzoew with 3 child containers
   (txqnmn=logo, kpprqg=socials, lfayrm=link-block-zjwoot).
   New layout: 4-col grid. We use CSS Grid to override the
   container layout. zjwoot's 12 link sub-blocks get split
   into 3 columns of 4 via nth-child + grid-column auto-flow.

   Column-header h4 ("BEST RATED" etc.) injection deferred to
   UI-REBUILD-SPEC.md for a11y reasons (we'd inject via ::before
   content but real h4 elements are better).
   --------------------------------------------------------- */
#brxe-pgzoew {
  background: var(--rg-bg) !important;
  color: var(--rg-ink) !important;
  padding: 64px 0 32px !important;
  border-top: 1px solid var(--rg-line);
}

/* If v6/v7 made the footer dark, override back to mockup light */
#brxe-pgzoew > #brxe-txqnmn,
#brxe-pgzoew > #brxe-kpprqg,
#brxe-pgzoew > #brxe-lfayrm {
  background: transparent !important;
}

/* 4-column grid layout */
#brxe-pgzoew {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  max-width: 1340px;
  margin-inline: auto !important;
  padding-inline: 28px !important;
}
#brxe-pgzoew > #brxe-txqnmn { grid-column: 1; grid-row: 1; }
#brxe-pgzoew > #brxe-kpprqg { grid-column: 1; grid-row: 2; align-self: start; }
#brxe-pgzoew > #brxe-lfayrm {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 32px !important;
}

/* Logo size in footer */
#brxe-txqnmn img, #brxe-zqpacd img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
}

/* Social icons row — 52x52 dark tiles, YT 64x52 red */
#brxe-kpprqg .brxe-social-icons,
#brxe-ghoczb {
  display: flex !important;
  gap: 12px !important;
  margin-top: 0 !important;
  align-items: center !important;
}
#brxe-kpprqg .brxe-social-icons a,
#brxe-ghoczb a {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: var(--rg-ink) !important;
  border: 1px solid var(--rg-ink) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--rg-bg) !important;
  transition: transform .2s ease, background .15s, color .15s, box-shadow .2s ease !important;
}
#brxe-kpprqg .brxe-social-icons a:hover,
#brxe-ghoczb a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.25) !important;
}
#brxe-kpprqg .brxe-social-icons svg,
#brxe-ghoczb svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

/* zjwoot — the 12-link block becomes 3 columns of 4 */
#brxe-zjwoot {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(5, auto) !important;
  gap: 0 32px !important;
}

/* Each footer link sub-block */
#brxe-zjwoot > [id^="brxe-"] {
  display: block !important;
  padding: 0 !important;
}

#brxe-zjwoot > [id^="brxe-"] a,
#brxe-zjwoot > [id^="brxe-"] .brxe-text-basic,
#brxe-zjwoot > [id^="brxe-"] p {
  display: block !important;
  color: var(--rg-ink-2) !important;
  padding: 5px 0 !important;
  font-size: 14px !important;
  font-family: 'Geist', sans-serif !important;
  transition: color .15s !important;
  text-decoration: none !important;
  margin: 0 !important;
}
#brxe-zjwoot > [id^="brxe-"] a:hover,
#brxe-zjwoot > [id^="brxe-"] p:hover {
  color: var(--rg-ink) !important;
}

/* Footer brand-glyph wrap */
#brxe-txqnmn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

/* Footer bottom (copyright section) */
#brxe-cveixz {
  background: var(--rg-bg) !important;
  padding: 24px 0 !important;
  border-top: 1px solid var(--rg-line) !important;
  max-width: 1340px;
  margin-inline: auto !important;
  padding-inline: 28px !important;
}
#brxe-rxorrz,
#brxe-cveixz .brxe-text-basic {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: var(--rg-ink-3) !important;
  letter-spacing: 0.04em !important;
}


/* ---------------------------------------------------------
   8. AD AREA — #brxe-lhejpr is FROZEN per phase-2 brief §3
   No styling rules here. Touching this area is not allowed.
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   9. RESPONSIVE — collapse 4-col footer and tighten loops
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  #brxe-pgzoew {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  #brxe-pgzoew > #brxe-txqnmn,
  #brxe-pgzoew > #brxe-kpprqg {
    grid-column: 1 / -1 !important;
  }
  #brxe-pgzoew > #brxe-kpprqg { grid-row: 2; }
  #brxe-pgzoew > #brxe-lfayrm {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 700px) {
  #brxe-zjwoot {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  #brxe-pgzoew {
    padding: 40px 0 24px !important;
  }
  #brxe-spcome, #brxe-qjbyiw, #brxe-nboaso, #brxe-edlurg {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}


/* ---------------------------------------------------------
   10. RETIRED COLOR TOKENS — old #003DA5 references
   Sweep links that still use the purple to grayscale.
   Specific component selectors only — site-wide swap would
   be too disruptive in one pass.
   --------------------------------------------------------- */
.table-of-contents li a:focus {
  color: var(--rg-lime-deep) !important;
}
/* ============================================================
   v10 — Mockup 04 header restyle (CSS-first)
   Date: 2026-05-19

   Header tree (post 83):
   - vriwqe ............ main header section (only top-level)
     - fulxny .......... hidden submenu group 1 (for burger popup)
     - femmwb .......... hidden submenu group 2 (for burger popup)
     - htbmvg .......... visible left container
       - hbpwjs ........ logo + brand text block
         - lrclmo ...... logo (attachment 41355)
         - wiuzlz ...... brand wordmark text ("Rider Guide ...")
       - rgburgerbtn ... burger button (wraps xdrcph icon)
     - eahwlq .......... visible right container
       - ksqflv ........ inline pipe-separated text nav

   Megamenu rebuild (3-col Best Rated / 2-col Guides / 1-col More)
   → UI-REBUILD-SPEC.md (this is a structural change)
   ============================================================ */


/* ---------------------------------------------------------
   1. HEADER SECTION — sticky bg, border, padding
   --------------------------------------------------------- */
#brxe-vriwqe {
  background: var(--rg-bg) !important;
  border-bottom: 1px solid var(--rg-line) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 16px 0 !important;
}

/* Inner containers go transparent so v6/v7 doesn't override */
#brxe-vriwqe > #brxe-htbmvg,
#brxe-vriwqe > #brxe-eahwlq {
  background: transparent !important;
}


/* ---------------------------------------------------------
   2. LOGO + WORDMARK BLOCK (hbpwjs)
   --------------------------------------------------------- */
#brxe-hbpwjs {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#brxe-lrclmo img, #brxe-lrclmo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

#brxe-wiuzlz, #brxe-wiuzlz p {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
  color: var(--rg-ink) !important;
  margin: 0 !important;
}


/* ---------------------------------------------------------
   3. INLINE TEXT NAV (ksqflv with 6 nav items + 5 pipes)
   Restyle as pill-style nav with lime hover bg.
   Hide the pipe separators.
   --------------------------------------------------------- */
#brxe-ksqflv {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Hide pipe separators */
#brxe-hnvesb, #brxe-cwklag, #brxe-xfddtb, #brxe-misrxs, #brxe-ipiwsx {
  display: none !important;
}

/* Each nav item */
#brxe-ydjysq, #brxe-qpgmvl, #brxe-pnjonk,
#brxe-ydguvg, #brxe-ijwxur, #brxe-altghz {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--rg-ink-2) !important;
  transition: all .15s !important;
  font-family: 'Geist', sans-serif !important;
  cursor: pointer;
}
#brxe-ydjysq:hover, #brxe-qpgmvl:hover, #brxe-pnjonk:hover,
#brxe-ydguvg:hover, #brxe-ijwxur:hover, #brxe-altghz:hover {
  background: var(--rg-bg-2) !important;
  color: var(--rg-ink) !important;
}

/* If nav items wrap <a> children, color those too */
#brxe-ydjysq a, #brxe-qpgmvl a, #brxe-pnjonk a,
#brxe-ydguvg a, #brxe-ijwxur a, #brxe-altghz a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Search icon (esumaq) */
#brxe-esumaq {
  color: var(--rg-ink-3) !important;
  margin-left: 4px !important;
}


/* ---------------------------------------------------------
   4. BURGER BUTTON (rgburgerbtn + xdrcph icon)
   --------------------------------------------------------- */
#brxe-rgburgerbtn, #rgburgerbtn {
  background: transparent !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
#brxe-rgburgerbtn:hover, #rgburgerbtn:hover {
  background: var(--rg-bg-2) !important;
  border-color: var(--rg-ink) !important;
}
#brxe-xdrcph {
  color: var(--rg-ink) !important;
  font-size: 20px !important;
}


/* ---------------------------------------------------------
   5. HIDDEN MEGAMENU GROUPS (fulxny, femmwb)
   Visible only in the burger popup. Restyle for when popup
   shows them (the popup is hidden until burger tap).
   --------------------------------------------------------- */
#brxe-popup-125 #brxe-ppkjlw,
#brxe-popup-125 #brxe-cxclmy {
  font-family: 'Geist', sans-serif !important;
}

#brxe-popup-125 #brxe-ppkjlw .brxe-text-basic,
#brxe-popup-125 #brxe-cxclmy .brxe-text-basic {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--rg-ink-2) !important;
  padding: 6px 8px !important;
  border-radius: 5px !important;
  transition: all .12s !important;
}
#brxe-popup-125 #brxe-ppkjlw .brxe-text-basic:hover,
#brxe-popup-125 #brxe-cxclmy .brxe-text-basic:hover {
  background: var(--rg-bg-2) !important;
  color: var(--rg-lime-deep) !important;
}


/* ---------------------------------------------------------
   6. RESPONSIVE — tighten nav, then hide it
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  #brxe-ksqflv {
    gap: 0 !important;
  }
  #brxe-ydjysq, #brxe-qpgmvl, #brxe-pnjonk,
  #brxe-ydguvg, #brxe-ijwxur, #brxe-altghz {
    padding: 8px 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 900px) {
  #brxe-eahwlq, #brxe-ksqflv {
    display: none !important;
  }
}

@media (max-width: 700px) {
  #brxe-vriwqe { padding: 12px 0 !important; }
  #brxe-lrclmo img, #brxe-lrclmo {
    width: 48px !important;
    height: 48px !important;
  }
  #brxe-wiuzlz, #brxe-wiuzlz p {
    font-size: 16px !important;
  }
}

/* v10-snag fix 2026-05-19: txqnmn + zjwoot layout overrides */
#brxe-txqnmn {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
#brxe-zjwoot {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 48px !important;
  grid-auto-flow: unset !important;
}

/* v10-snag fix 2 (2026-05-19): zjwoot full-width + col flex */
#brxe-zjwoot {
  width: 100% !important;
  align-items: flex-start !important;
}
#brxe-rgfbc1,
#brxe-rgfbc2,
#brxe-rgfbc3 {
  flex: 1 !important;
}

/* §6 Getting Started — 4x2 pictorial grid (2026-05-19) */
@media (min-width: 1025px) {
  #brxe-enixjn > .brxe-block:nth-child(n+5) { display: flex !important; }
  #brxe-enixjn > .brxe-block:nth-child(n+9) { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  #brxe-enixjn > .brxe-block:nth-child(n+4) { display: flex !important; }
  #brxe-enixjn > .brxe-block:nth-child(n+7) { display: none !important; }
}

/* §7 mini-list card fix (2026-05-19): use class selectors, not IDs */
/* Loop cards are rendered as .brxe-ndfcym / .brxe-eprrrn / .brxe-owxeyg class elements */
#brxe-yomiht .brxe-ndfcym,
#brxe-aommtq .brxe-eprrrn,
#brxe-jofdrw .brxe-owxeyg {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--rg-line-soft, #e8e8ea) !important;
  width: 100% !important;
  flex: none !important;
  max-width: 100% !important;
  flex-direction: unset !important;
}
/* Force cards to 100% width (overrides the 25%-width loop rule) */
#brxe-yomiht > .brxe-block,
#brxe-aommtq > .brxe-block,
#brxe-jofdrw > .brxe-block {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Thumb: 80×56, no aspect-ratio stretch */
#brxe-yomiht .brxe-ndfcym .brxe-image,
#brxe-aommtq .brxe-eprrrn .brxe-image,
#brxe-jofdrw .brxe-owxeyg .brxe-image {
  width: 80px !important;
  height: 56px !important;
  max-width: 80px !important;
  aspect-ratio: unset !important;
  flex: none !important;
  display: block !important;
}
#brxe-yomiht .brxe-ndfcym .brxe-image img,
#brxe-aommtq .brxe-eprrrn .brxe-image img,
#brxe-jofdrw .brxe-owxeyg .brxe-image img {
  width: 80px !important;
  height: 56px !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
}

/* §7 mini-list: strip card box styling, keep only border-bottom divider */
#brxe-yomiht .brxe-ndfcym,
#brxe-aommtq .brxe-eprrrn,
#brxe-jofdrw .brxe-owxeyg {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rg-line-soft, #e8e8ea) !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}
/* Title sizing for mini-list */
#brxe-yomiht .brxe-ndfcym .brxe-tgdqhp,
#brxe-aommtq .brxe-eprrrn .brxe-rdcjvi,
#brxe-jofdrw .brxe-owxeyg .brxe-bxtwft {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}


/* =========================================================
   v11-hero — §3 Hero rebuild (2026-05-19)
   2-col hero + RideFinder static card.
   Most styles live in element _cssCustom fields.
   This block handles responsive breakpoints only.
   ========================================================= */

@media (max-width: 900px) {
  #brxe-rghgrid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 40px 18px 32px !important;
  }
}
@media (max-width: 600px) {
  #brxe-rghgrid {
    padding: 32px 16px 24px !important;
  }
  #brxe-rgfindrw {
    padding: 24px 18px !important;
  }
}


/* =========================================================
   v12-megamenu — §2 Header megamenu (2026-05-19)
   Replaces pipe-separated ksqflv nav with 7-item hover
   megamenu: Reviews · Best Rated ▾ · Ride Finder · Guides ▾
   · News · Coupons · More ▾.
   Elements: rgnav1-7 (text-basics inside ksqflv).
   All dropdown styles use class selectors so no element ID
   changes break them if the builder re-IDs anything.
   ========================================================= */

/* ---- Nav container ---- */
#brxe-ksqflv {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  margin-right: 0 !important;
}

/* ---- Simple nav links and megamenu triggers ---- */
#brxe-ksqflv .rg-nav-link {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--rg-ink-2);
  transition: background .15s, color .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
#brxe-ksqflv .rg-nav-link:hover {
  background: var(--rg-bg-2);
  color: var(--rg-ink);
}

/* ---- Caret ---- */
#brxe-ksqflv .rg-caret {
  font-size: 8px;
  color: var(--rg-ink-3);
  transition: transform .2s;
  display: inline-block;
}
#brxe-ksqflv .rg-nav-mega:hover .rg-caret {
  transform: rotate(180deg);
  color: var(--rg-lime-deep);
}

/* ---- Megamenu wrapper (position: relative) ---- */
#brxe-ksqflv .rg-nav-mega {
  position: relative;
  display: inline-block;
}

/* Invisible bridge: prevents accidental mouseout between
   trigger and dropdown (12px gap below the trigger) */
#brxe-ksqflv .rg-nav-mega::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

/* ---- Megamenu dropdown ---- */
#brxe-ksqflv .rg-megamenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--rg-ink);
  color: var(--rg-bg);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.25),
              0 0 0 1px rgba(255,255,255,.06);
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 20px 32px;
  min-width: 620px;
  z-index: 60;
  white-space: normal;
}
/* Show on hover */
#brxe-ksqflv .rg-nav-mega:hover > .rg-megamenu {
  display: grid;
}
/* 2-col narrow variant (Guides) */
#brxe-ksqflv .rg-megamenu.rg-narrow {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  min-width: 420px;
}
/* 1-col tiny variant (More) */
#brxe-ksqflv .rg-megamenu.rg-tiny {
  grid-template-columns: 1fr;
  min-width: 200px;
  padding: 14px 16px;
  left: auto;
  right: 0;
}

/* ---- Mega column content ---- */
#brxe-ksqflv .rg-mega-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#brxe-ksqflv .rg-mega-head {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-blue-bright);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#brxe-ksqflv .rg-mega-col a {
  color: rgba(255,255,255,.85) !important;
  padding: 7px 8px;
  border-radius: 5px;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .12s, color .12s;
  display: block;
}
#brxe-ksqflv .rg-mega-col a:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--rg-blue-bright) !important;
}
#brxe-ksqflv .rg-mega-col a.rg-mega-cta {
  font-weight: 600 !important;
  color: var(--rg-blue-bright) !important;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 !important;
}
#brxe-ksqflv .rg-mega-col a.rg-mega-cta:hover {
  background: transparent !important;
  color: rgba(255,255,255,.9) !important;
}

/* ---- Responsive: hide desktop nav at ≤900px ---- */
/* (Already set in v10; this block reinforces it for new elements) */
@media (max-width: 1100px) {
  #brxe-ksqflv .rg-nav-link {
    padding: 8px 8px;
    font-size: 13px;
  }
}
@media (max-width: 900px) {
  #brxe-ksqflv { display: none !important; }
}


/* =========================================================
   v12-fix — megamenu layout corrections (2026-05-19)
   ksqflv was flex-direction:column (Bricks default);
   force row so nav items lay out horizontally.
   Rebalance htbmvg / eahwlq flex widths so nav has room.
   ========================================================= */

/* Nav items in a row (was column — caused 108px collapsed width) */
#brxe-ksqflv {
  flex-direction: row !important;
}

/* Logo side: grow to fill leftover space, can shrink, min-width:0 allows shrink past content */
#brxe-htbmvg {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Nav side: no grow, no shrink - size to content */
#brxe-eahwlq {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* v12-fix-b: right-anchor dropdowns that are near the right edge of the nav */
#brxe-rgnav2 .rg-megamenu,
#brxe-rgnav4 .rg-megamenu {
  left: 0 !important;
  
}

/* =========================================================
   v13 — Polish pass (2026-05-19)
   - rgcomphdl: eyebrow + h2 vertical stack in compare head
   - §6 Getting Started: pictorial card polish
   - §8 Newsletter: convert legacy 3-col to mockup 2-col
   ========================================================= */

/* --- Compare table head: 2-col flex (left group + meta on right) --- */
#brxe-rgcomphdl {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  align-items: flex-start;
}

/* --- §6 Getting Started pictorial cards ----------------------------- */
#brxe-enixjn { gap: 22px !important; }
#brxe-enixjn > .brxe-block {
  background: var(--rg-bg, #FBFBFA);
  border: 1px solid var(--rg-line, #e8e8ea);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .15s;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none;
  color: inherit;
  position: relative;
}
#brxe-enixjn > .brxe-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(14, 14, 16, 0.18);
  border-color: var(--rg-ink, #0E0E10);
}
/* Image: 16:10 aspect, no gap below */
#brxe-enixjn .brxe-ojmrlu {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  max-width: 100% !important;
  background: var(--rg-bg-2, #F4F4F2);
  overflow: hidden;
  display: block !important;
  margin: 0 !important;
}
#brxe-enixjn .brxe-ojmrlu img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 16 / 10 !important;
  transition: transform .4s ease;
  display: block !important;
}
#brxe-enixjn > .brxe-block:hover .brxe-ojmrlu img { transform: scale(1.04); }
/* Title block: padding + tight text */
#brxe-enixjn .brxe-vhqcuu {
  padding: 16px 18px 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto;
}
#brxe-enixjn .brxe-vhqcuu .brxe-yqsomw,
#brxe-enixjn .brxe-vhqcuu .brxe-shortcode {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--rg-ink, #0E0E10) !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}
#brxe-enixjn .brxe-vhqcuu a { color: inherit; text-decoration: none; }
#brxe-enixjn .brxe-vhqcuu a:hover { text-decoration: underline; }

/* --- §8 Newsletter — override legacy template layout ---------------- */
/* iuhxty wraps template 615. The template's outer is fexgbj > dhkwme
   (display:row, 3 children: oprcog logo + azhonh text + tbgrxy form).
   Replace with a clean 2-col grid. */
#brxe-iuhxty {
  width: 100% !important;
  max-width: 1340px !important;
  margin: 64px auto !important;
  padding: 0 24px !important;
}
#brxe-fexgbj {
  background: #F4F4F2 !important;
  border-radius: 18px !important;
  border: 1px solid var(--rg-line, #e8e8ea) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 56px !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
}
#brxe-dhkwme {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas: "left right" !important;
  gap: 48px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  flex-direction: row !important;
}
/* Left col: logo (hidden) + lede repurposed as heading group */
#brxe-oprcog {
  grid-area: left;
  width: 280px !important;
  max-width: 280px !important;
  height: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
#brxe-azhonh {
  grid-area: left;
  align-self: end;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  color: var(--rg-ink-3, #6E6E73) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 480px;
  text-align: left !important;
  line-height: 1.5 !important;
}
/* Pseudo-heading via container::before */
#brxe-dhkwme::before {
  content: "Get tomorrow's reviews, today.";
  grid-area: left;
  align-self: start;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rg-ink, #0E0E10);
  margin: 0;
  padding: 0;
}
/* Right col: form */
#brxe-tbgrxy {
  grid-area: right;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  min-height: auto !important;
  height: auto !important;
}
/* WPForms input + button restyle to mockup lime CTA */
#brxe-tbgrxy .wpforms-form { display: block !important; padding: 0 !important; }
#brxe-tbgrxy .wpforms-field-medium {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--rg-line, #e8e8ea) !important;
  background: var(--rg-bg, #FBFBFA) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  margin: 0 0 12px !important;
}
#brxe-tbgrxy .wpforms-submit-container { padding: 0 !important; width: 100%; }
#brxe-tbgrxy .wpforms-submit {
  background-color: var(--rg-lime, #003DA5) !important;
  color: #fff !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  box-shadow: 0 4px 16px -4px rgba(0, 61, 165, 0.5) !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
}
#brxe-tbgrxy .wpforms-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(0, 61, 165, 0.7) !important;
}

/* Responsive: stack at tablet/mobile */
@media (max-width: 900px) {
  #brxe-dhkwme {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left" "right" !important;
    gap: 32px !important;
  }
  #brxe-oprcog { width: 220px !important; max-width: 220px !important; }
  #brxe-fexgbj { padding: 40px 28px !important; }
}

/* =========================================================
   v14 — Mockup parity pass (2026-05-19)
   ========================================================= */

/* --- Hero trust stats (mockup §3) -------------------------- */
#brxe-rgherotrust {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e8e8ea !important;
  max-width: 480px;
}
#brxe-rgherotrust > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}
#brxe-rgherotrust [id^="brxe-rgtrstn"] {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #0E0E10 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
#brxe-rgherotrust [id^="brxe-rgtrstl"] {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important;
  color: #6E6E73 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* --- Footer 4-col grid (mockup §9) ------------------------- */
#brxe-pgzoew {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  position: relative !important;
  padding: 64px 24px 32px !important;
  background: #FBFBFA !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
#brxe-pgzoew > * { position: static !important; }

/* Col 1: brand wrap (txqnmn) — vertical stack */
#brxe-txqnmn {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  align-items: flex-start !important;
  flex: none !important;
}
#brxe-zqpacd { /* logo */
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
}
#brxe-rgtagl { /* tagline */
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #6E6E73 !important;
  max-width: 360px !important;
  margin: 0 !important;
}

/* Socials container (kpprqg) repositioned into col 1, below tagline */
#brxe-kpprqg {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: -16px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  align-self: start !important;
  flex: none !important;
}
/* Make pgzoew accept the 2nd row for socials underneath col 1 */
#brxe-pgzoew { grid-template-rows: auto auto !important; }
#brxe-txqnmn { grid-row: 1 !important; }
#brxe-lfayrm { grid-row: 1 / span 2 !important; }

/* Nav-cols wrapper (lfayrm) — defeat absolute, span cols 2-4 */
#brxe-lfayrm {
  position: static !important;
  grid-column: 2 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex: none !important;
}
#brxe-zjwoot {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-direction: row !important;
}
#brxe-zjwoot > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}
/* Nav column headings — Geist Mono uppercase, small */
#brxe-zjwoot h3, #brxe-zjwoot h4,
#brxe-rgfbh1, #brxe-rgfbh2, #brxe-rgfbh3 {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}
#brxe-zjwoot a, #brxe-zjwoot .brxe-text-basic {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  color: #3B3B3F !important;
  display: block !important;
  padding: 5px 0 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
#brxe-zjwoot a:hover { color: #0E0E10 !important; }

/* Social icons (ghoczb): 52×52 dark with brand-color hover, YouTube special */
#brxe-ghoczb {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
#brxe-ghoczb a {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: #0E0E10 !important;
  display: grid !important;
  place-items: center !important;
  color: #FBFBFA !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .15s, box-shadow .2s ease !important;
  position: relative !important;
}
#brxe-ghoczb a svg { width: 24px !important; height: 24px !important; fill: currentColor !important; }
#brxe-ghoczb a:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.25) !important; }
/* YouTube special — red gradient + 300K badge */
#brxe-ghoczb a[href*="youtube"],
#brxe-ghoczb a[href*="youtu.be"] {
  width: 64px !important;
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%) !important;
}
#brxe-ghoczb a[href*="youtube"]::after,
#brxe-ghoczb a[href*="youtu.be"]::after {
  content: "170K";
  position: absolute;
  bottom: -16px; left: 50%; transform: translateX(-50%);
  font-family: 'Geist Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: #3B3B3F;
  white-space: nowrap;
}
/* Other socials: brand-color hover */
#brxe-ghoczb a[href*="facebook"]:hover { background: #1877F2 !important; }
#brxe-ghoczb a[href*="reddit"]:hover { background: #FF4500 !important; }
#brxe-ghoczb a[href*="instagram"]:hover { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%) !important; }
#brxe-ghoczb a[href*="discord"]:hover { background: #5865F2 !important; }

/* Disclaimer/copyright (cveixz) — Geist Mono small, light bg */
#brxe-cveixz {
  background: #FBFBFA !important;
  padding: 24px !important;
  border-top: 1px solid #e8e8ea !important;
}
#brxe-cveixz, #brxe-cveixz * {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
}

/* --- Getting Started pictorial card overlays (mockup §6) --- */
#brxe-enixjn { counter-reset: gscard; }
#brxe-enixjn > .brxe-block { counter-increment: gscard; }
/* Rank chip top-right */
#brxe-enixjn > .brxe-block::after {
  content: "#" counter(gscard);
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 14px;
  background: #FBFBFA;
  color: #0E0E10;
  padding: 3px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  letter-spacing: -0.02em;
}
/* Eyebrow tag top-left */
#brxe-enixjn > .brxe-block::before {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 14, 16, 0.85);
  backdrop-filter: blur(8px);
  color: #4D8DFF;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px 5px 16px;
  border-radius: 100px;
}
/* Lime dot inside the eyebrow chip (positioned via inset) */
#brxe-enixjn > .brxe-block .brxe-ojmrlu::before {
  content: "";
  position: absolute;
  top: 21px; left: 22px;
  z-index: 3;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4D8DFF;
}
#brxe-enixjn .brxe-ojmrlu { position: relative !important; }

/* --- Triplet section headings: remove underline -------------- */
#brxe-rqxccd h2, #brxe-nsmqef h2, #brxe-jgxops h2,
#brxe-kxxlsl, #brxe-dolnst, #brxe-ckmrip {
  border-bottom: none !important;
  text-decoration: none !important;
  padding-bottom: 0 !important;
}
#brxe-kxxlsl, #brxe-dolnst, #brxe-ckmrip {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #0E0E10 !important;
  margin-bottom: 24px !important;
  text-shadow: none !important;
}

/* --- Newsletter: add THE CHARGER eyebrow chip ---------------- */
#brxe-dhkwme::after {
  content: "THE CHARGER";
  position: absolute;
  top: -14px; left: 24px;
  background: #003DA5;
  color: #fff;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 100px;
}
#brxe-fexgbj { position: relative !important; }
#brxe-dhkwme { position: relative !important; }

/* --- Footer: responsive stack at <=900 ------------------------ */
@media (max-width: 900px) {
  #brxe-pgzoew {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 32px !important;
  }
  #brxe-txqnmn { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  #brxe-kpprqg { grid-column: 1 / -1 !important; grid-row: 2 !important; margin: 0 !important; }
  #brxe-lfayrm { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  #brxe-zjwoot { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  #brxe-zjwoot { grid-template-columns: 1fr !important; }
}

/* =========================================================
   v15 — Override v9 §8 footer rules (2026-05-19)
   v9 had `#brxe-pgzoew > #brxe-lfayrm { display: grid }` with
   2-ID specificity that beats single-ID overrides. v15 uses
   the same 2-ID selector to undo it.
   ========================================================= */
#brxe-pgzoew > #brxe-lfayrm {
  display: block !important;
  grid-template-columns: unset !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#brxe-pgzoew > #brxe-lfayrm > #brxe-zjwoot {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}
#brxe-pgzoew > #brxe-lfayrm > #brxe-zjwoot > [id^="brxe-"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   v16 — Pixel parity sweep (2026-05-19)
   ========================================================= */

/* --- Compare section-head: force meta to right column ----- */
#brxe-rgcomphd {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 32px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin-bottom: 32px !important;
}
#brxe-rgcomphdl {
  flex: 0 0 auto !important;
}
#brxe-rgcompmta {
  flex: 0 0 auto !important;
  text-align: right !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
@media (max-width: 768px) {
  #brxe-rgcomphd { flex-direction: column !important; align-items: flex-start !important; }
  #brxe-rgcompmta { text-align: left !important; white-space: normal !important; }
}

/* --- Newsletter — reverse layout: tag SMALL chip above heading ----- */
/* The pseudo "::after" was creating a big lime pill. Make it a small chip above h2. */
#brxe-dhkwme::after {
  top: 32px !important;
  left: 48px !important;
  font-size: 10px !important;
  padding: 5px 11px !important;
}
#brxe-dhkwme::before {
  content: "" !important;  /* clear earlier ::before for left col */
}
/* Pseudo-heading rule from v13: tighten + position */
#brxe-dhkwme {
  position: relative !important;
  padding-top: 32px !important;
}
/* The legacy oprcog Charger logo image: hide it entirely (we use the pseudo-heading) */
#brxe-oprcog { display: none !important; }
/* azhonh (lede paragraph): position properly in left col below the heading */
#brxe-azhonh {
  grid-area: left !important;
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 480px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #6E6E73 !important;
}

/* --- Getting Started: add footer row "X picks · Y min" -------- */
#brxe-enixjn > .brxe-block .brxe-vhqcuu {
  position: relative !important;
  padding-bottom: 42px !important;
}
#brxe-enixjn > .brxe-block .brxe-vhqcuu::after {
  position: absolute;
  bottom: 14px; left: 18px; right: 18px;
  padding-top: 10px;
  border-top: 1px solid #e8e8ea;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: #6E6E73;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Footer: ensure socials sit under tagline in col 1 ------ */
#brxe-pgzoew {
  grid-template-rows: auto !important;
}
#brxe-pgzoew > #brxe-txqnmn,
#brxe-pgzoew > #brxe-kpprqg {
  grid-row: auto !important;
}
/* Move kpprqg into the same column-1 flow by giving txqnmn enough vertical stack */
#brxe-pgzoew > #brxe-txqnmn {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-items: flex-start !important;
}
#brxe-pgzoew > #brxe-kpprqg {
  grid-column: 1 !important;
  align-self: start !important;
  margin-top: 6px !important;
}
#brxe-pgzoew > #brxe-lfayrm {
  grid-column: 2 / -1 !important;
  grid-row: 1 / span 2 !important;
}

/* --- Topbar — keep on one line at desktop -------------------- */
@media (min-width: 901px) {
  #brxe-rgutil, #brxe-rgutwp, #brxe-rgutll {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}

/* --- Hero H1: enforce tight 86px desktop sizing ---------- */
#brxe-rgheroH {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 16px !important;
  color: var(--rg-ink, #0E0E10) !important;
  text-shadow: none !important;
}

/* =========================================================
   v17 — Section-head + GS + newsletter polish (2026-05-19)
   ========================================================= */

/* --- Compare section-head: GRID 1fr auto (left+meta on same row) -- */
#brxe-rgcomphd {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  flex-direction: unset !important;
}
#brxe-rgcomphdl {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
}
#brxe-rgcompmta {
  grid-column: 2 !important;
  text-align: right !important;
  white-space: normal !important;
  align-self: end !important;
  margin: 0 !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  color: #6E6E73 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
#brxe-rgcompmta a {
  color: #0E0E10 !important;
  text-decoration: underline !important;
}
@media (max-width: 768px) {
  #brxe-rgcomphd { grid-template-columns: 1fr !important; }
  #brxe-rgcompmta { grid-column: 1 !important; justify-content: flex-start !important; text-align: left !important; }
}

/* --- Getting Started cards: vary eyebrow + footer text per card --- */
/* Use :nth-child to set different overlay content for each of 8 cards */

/* Footer text per card */

/* --- Newsletter: tighten + fix tag chip placement -------- */
/* The "::after" tag chip should be a small pill above the heading, not overflow */
#brxe-fexgbj {
  background: #F4F4F2 !important;
  border-radius: 18px !important;
  padding: 56px !important;
  position: relative !important;
  max-width: 1340px !important;
  margin: 64px auto !important;
}
#brxe-dhkwme {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 0 !important;
}
/* Replace the v13 pseudo-heading with proper layout: tag chip + h2 + lede in LEFT col */
#brxe-dhkwme::before {
  content: "THE CHARGER";
  background: #003DA5;
  color: #fff;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 11px;
  border-radius: 100px;
  position: absolute;
  top: -14px;
  left: 24px;
  width: max-content;
  height: max-content;
}
#brxe-dhkwme::after {
  content: "Get tomorrow's reviews, today.";
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0E0E10;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  align-self: end !important;
  margin: 0 !important;
}
/* The legacy "Our newsletter has the biggest discounts..." text becomes the lede */
#brxe-azhonh {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #6E6E73 !important;
  max-width: 460px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
/* Form on right col, full height */
#brxe-tbgrxy {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* --- Topbar — keep single row at desktop -------- */
@media (min-width: 901px) {
  #brxe-rgutil {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
  }
}

/* =========================================================
   v18 — Wide-viewport + sticky-header + footer collapse (2026-05-19)
   ========================================================= */

/* --- Header section: center content at 1280 max-width ---- */
#brxe-vriwqe {
  margin-right: 0 !important;          /* Bricks default has margin-right: 112 */
  background: #FBFBFA !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
#brxe-vriwqe > #brxe-htbmvg,
#brxe-vriwqe > #brxe-eahwlq {
  flex: 0 1 auto !important;
}
/* Combined inner area sized to max-width:1280 centered */
#brxe-htbmvg {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;        /* push to inner-1280 left edge */
  padding: 0 24px 0 24px !important;
}
#brxe-eahwlq {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-right: auto !important;       /* push to inner-1280 right edge */
  padding: 0 24px 0 0 !important;
}
/* Use a single wrapping rule via direct child :first-of-type/:last-of-type */
@supports (display: grid) {
  #brxe-vriwqe {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(1340px - 48px)) minmax(0, 1fr) !important;
    grid-template-areas: "edgeL inner edgeR" !important;
    align-items: center !important;
  }
  #brxe-vriwqe > * { grid-row: 1 !important; }
  #brxe-htbmvg {
    grid-column: 2 !important;
    margin-left: 0 !important;
    padding-left: 24px !important;
  }
  #brxe-eahwlq {
    grid-column: 2 !important;
    margin-right: 0 !important;
    padding-right: 24px !important;
    justify-self: end !important;
  }
}
/* dropdown1/dropdown2 floats — keep them out of layout */
#brxe-vriwqe > #dropdown1,
#brxe-vriwqe > #dropdown2 {
  position: absolute !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important;
}

/* --- Sticky header: brx-header (parent of topbar + nav) ---- */
header#brx-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #FBFBFA !important;
}
header#brx-header #brxe-vriwqe { position: relative !important; }

/* --- Footer: collapse the row-gap that left socials 253px below brand -- */
#brxe-pgzoew {
  grid-template-rows: auto !important;
  align-items: start !important;
  row-gap: 18px !important;
}
#brxe-pgzoew > #brxe-txqnmn { grid-row: 1 / span 1 !important; }
/* kpprqg below txqnmn — sit tight, no big vertical gap */
#brxe-pgzoew > #brxe-kpprqg {
  grid-row: 2 / span 1 !important;
  align-self: start !important;
  margin: 0 !important;
}
#brxe-pgzoew > #brxe-lfayrm {
  grid-row: 1 / span 2 !important;     /* span both rows */
  align-self: start !important;
}

/* --- Getting Started section-head: layout with eyebrow + h2 LEFT, meta RIGHT --- */
#brxe-rggshdr {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 32px !important;
  align-items: end !important;
  margin: 0 0 32px !important;
  width: 100% !important;
}
#brxe-rggshdl {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#brxe-rggseye {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important;
  color: #002D7A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
}
#brxe-rggsmta {
  grid-column: 2 !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  color: #6E6E73 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  text-align: right !important;
  align-self: end !important;
}
#brxe-rggsmta a {
  color: #0E0E10 !important;
  text-decoration: underline !important;
}
@media (max-width: 768px) {
  #brxe-rggshdr { grid-template-columns: 1fr !important; }
  #brxe-rggsmta { grid-column: 1 !important; text-align: left !important; justify-content: flex-start !important; }
}

/* =========================================================
   v19 — Footer col-1 tighten (2026-05-19)
   ========================================================= */
#brxe-pgzoew {
  grid-template-rows: auto !important;
}
#brxe-pgzoew > #brxe-txqnmn {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
}
#brxe-pgzoew > #brxe-kpprqg {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  /* Push socials below txqnmn within the same row */
  margin-top: 175px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 900px) {
  #brxe-pgzoew > #brxe-kpprqg { margin-top: 16px !important; align-self: start !important; grid-row: 2 !important; }
}

/* =========================================================
   v20 — 9-specific-issues fixes (2026-05-19)
   ========================================================= */

/* 1. Topbar — flex row with right-anchored STAFF REVIEWS, all nowrap */
#brxe-rgutil {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  width: 100% !important;
}
#brxe-rgutwp {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1340px !important;
  margin: 0 auto !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}
#brxe-rgutll, #brxe-rgutrg {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
#brxe-rgutll {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
#brxe-rgutll > * { white-space: nowrap !important; }

/* 2. Compare table section-head meta — keep on one line */
#brxe-rgcompmta {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
#brxe-rgcompmta > span { white-space: nowrap !important; }

/* 3. Cred strip — full-bleed at wide viewport (escape 1280 wrap) */
#brxe-rgcred {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: auto !important;
  border-top: 8px solid var(--rg-lime, #003DA5) !important;
}

/* 4. Getting Started section meta — keep on one line */
#brxe-rggsmta {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
#brxe-rggsmta > span { white-space: nowrap !important; }

/* 5. Tighten vertical padding between sections */
#brxe-emfqiu > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#brxe-tdkvak { padding-top: 56px !important; padding-bottom: 56px !important; }
#brxe-rgcomp { padding-top: 56px !important; padding-bottom: 56px !important; }
#brxe-rgcred { padding-top: 56px !important; padding-bottom: 56px !important; margin-top: 32px !important; margin-bottom: 0 !important; }
#brxe-spcome { padding-top: 64px !important; padding-bottom: 64px !important; }
#brxe-rgtriplet { padding-top: 48px !important; padding-bottom: 64px !important; }

/* 6. Triplet headings — kill the underline ("border-bottom") */
#brxe-rqxccd, #brxe-nsmqef, #brxe-jgxops {
  border-bottom: none !important;
}
#brxe-rqxccd h1, #brxe-rqxccd h2, #brxe-rqxccd h3, #brxe-rqxccd h4,
#brxe-nsmqef h1, #brxe-nsmqef h2, #brxe-nsmqef h3, #brxe-nsmqef h4,
#brxe-jgxops h1, #brxe-jgxops h2, #brxe-jgxops h3, #brxe-jgxops h4,
#brxe-kxxlsl, #brxe-dolnst, #brxe-ckmrip {
  border-bottom: none !important;
  text-decoration: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 7. Newsletter — force THE CHARGER chip text + proper heading */
#brxe-dhkwme::before {
  content: "THE CHARGER" !important;
  background: #003DA5 !important;
  color: #fff !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  position: absolute !important;
  top: -14px !important;
  left: 32px !important;
  width: max-content !important;
  height: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
#brxe-dhkwme::after {
  content: "Get tomorrow's reviews, today." !important;
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #0E0E10 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  align-self: end !important;
  margin: 0 !important;
  display: block !important;
}
#brxe-azhonh {
  font-family: 'Geist', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #6E6E73 !important;
  max-width: 460px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
/* Newsletter card padding tighten */
#brxe-fexgbj {
  padding: 56px 56px !important;
  margin: 64px auto !important;
}

/* 8. Footer — center 4-col grid content at 1280 max via outer padding */
#brxe-pgzoew {
  padding-left: max(24px, calc((100vw - 1340px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1340px) / 2)) !important;
  background: #FBFBFA !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Topbar full-width dark band stays edge-to-edge */
#brxe-rgutil {
  background: #0E0E10 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   v21 — Meta nowrap + header brand + SEARCH (2026-05-19)
   ========================================================= */

/* Compare table meta — keep single line, use block + nowrap (not flex) */
#brxe-rgcompmta {
  display: block !important;
  white-space: nowrap !important;
  text-align: right !important;
  flex: 0 0 auto !important;
}
#brxe-rgcompmta > *, #brxe-rgcompmta span, #brxe-rgcompmta a {
  display: inline !important;
  white-space: nowrap !important;
}

/* Getting Started meta same treatment */
#brxe-rggsmta {
  display: block !important;
  white-space: nowrap !important;
  text-align: right !important;
  flex: 0 0 auto !important;
}
#brxe-rggsmta > *, #brxe-rggsmta span, #brxe-rggsmta a {
  display: inline !important;
  white-space: nowrap !important;
}

/* --- Header brand: tight glyph + RIDERGUIDE wordmark --- */
#brxe-htbmvg {
  background: transparent !important;
  flex: 0 1 auto !important;
}
#brxe-hbpwjs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
#brxe-lrclmo {
  padding: 0 !important;
  margin: 0 !important;
}
#brxe-lrclmo img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  display: block !important;
}
#brxe-wiuzlz {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* --- SEARCH link in nav --- */
#brxe-rgnav8 .rg-nav-search,
.rg-nav-search {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #6E6E73 !important;
  padding: 6px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: color .15s, border-color .15s !important;
}
.rg-nav-search:hover {
  color: #0E0E10 !important;
  border-color: #e8e8ea !important;
}

/* =========================================================
   v22 — Footer brand wordmark + bottom row + cleanup (2026-05-19)
   ========================================================= */

/* Footer brand: logo + RIDERGUIDE inline */
#brxe-txqnmn {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "logo wordmark"
    "tagline tagline" !important;
  column-gap: 14px !important;
  row-gap: 16px !important;
  align-items: center !important;
  flex-direction: row !important;
}
#brxe-zqpacd { grid-area: logo !important; }
#brxe-rgfbrnd {
  grid-area: wordmark !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  color: #0E0E10 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#brxe-rgtagl {
  grid-area: tagline !important;
  max-width: 360px !important;
  margin: 0 !important;
}

/* Footer bottom row: 2-col split (copyright left, legal right) */
#brxe-cveixz {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 24px max(24px, calc((100vw - 1340px) / 2)) !important;
  border-top: 1px solid #e8e8ea !important;
  background: #FBFBFA !important;
  width: 100% !important;
  max-width: 100% !important;
}
#brxe-rxorrz {
  flex: 1 1 auto !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}
#brxe-rgfblegal {
  flex: 0 0 auto !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  text-align: right !important;
  margin: 0 !important;
}
#brxe-rgfblegal a { color: #6E6E73 !important; text-decoration: none !important; }
#brxe-rgfblegal a:hover { color: #0E0E10 !important; }

/* Footer nav-col link tighter spacing matching mockup */
#brxe-zjwoot a {
  padding: 5px 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* =========================================================
   v23 — Header brand (64px glyph) + search pill (2026-05-19)
   ========================================================= */

/* Brand glyph 64x64 + 10px gap to wordmark + 19px Bricolage wordmark */
#brxe-hbpwjs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#brxe-lrclmo {
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
#brxe-lrclmo img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}
#brxe-wiuzlz {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
  color: #0E0E10 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Search pill — clickable link styled to match mockup */
#brxe-rgnav8 { padding: 0 !important; margin: 0 !important; }
.rg-header-search,
#brxe-rgnav8 .rg-header-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F4F4F2 !important;
  border: 1px solid #e8e8ea !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-width: 240px !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  color: #6E6E73 !important;
  text-decoration: none !important;
  transition: border-color .15s, background .15s !important;
}
.rg-header-search:hover,
#brxe-rgnav8 .rg-header-search:hover {
  border-color: #0E0E10 !important;
  background: #FBFBFA !important;
}
.rg-search-icon {
  font-size: 14px !important;
  color: #6E6E73 !important;
  line-height: 1 !important;
}
.rg-search-text {
  flex: 1 1 auto !important;
  color: #6E6E73 !important;
}
.rg-search-kbd {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  padding-left: 6px !important;
  border-left: 1px solid #e8e8ea !important;
  margin-left: 4px !important;
}

/* =========================================================
   v24 — Uniform FBFBFA bg + functional search input (2026-05-19)
   ========================================================= */

/* Uniform off-white throughout — kill the WHITE emfqiu rectangle */
html { background: #FBFBFA !important; }
body { background: #FBFBFA !important; }
#brxe-emfqiu {
  background: #FBFBFA !important;
  background-color: #FBFBFA !important;
}
#brxe-tdkvak,
#brxe-rgcomp,
#brxe-spcome,
#brxe-rgtriplet {
  background: #FBFBFA !important;
  background-color: #FBFBFA !important;
}
/* iuhxty wrapper bg */
#brxe-iuhxty { background: #FBFBFA !important; }

/* --- Search form (real input that accepts typing + submits to /?s=) --- */
form.rg-header-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F4F4F2 !important;
  border: 1px solid #e8e8ea !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-width: 240px !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  color: #6E6E73 !important;
  transition: border-color .15s, background .15s !important;
  margin: 0 !important;
}
form.rg-header-search:focus-within {
  border-color: #0E0E10 !important;
  background: #FBFBFA !important;
}
.rg-search-icon {
  font-size: 14px !important;
  color: #6E6E73 !important;
  line-height: 1 !important;
  cursor: text !important;
}
input.rg-search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  color: #0E0E10 !important;
  padding: 0 !important;
  margin: 0 !important;
}
input.rg-search-input::placeholder {
  color: #6E6E73 !important;
  font-family: 'Geist Mono', monospace !important;
}
input.rg-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rg-search-kbd {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  padding-left: 6px !important;
  border-left: 1px solid #e8e8ea !important;
  margin-left: 4px !important;
}

/* =========================================================
   v25 — Compare row polish + triplet + newsletter (2026-05-19)
   ========================================================= */

/* --- Hero H1 wrap point: tighter max-width forces 'for' onto line 2 --- */
#brxe-rgheroH {
  max-width: 580px !important;
  word-spacing: 0 !important;
}

/* --- Compare row product name + subtitle stack --- */
.rg-name-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.rg-name {
  font-family: 'Geist', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #0E0E10 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}
.rg-name:hover { text-decoration: underline !important; }
.rg-name-sub {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  letter-spacing: 0.02em !important;
}

/* --- Compare row spec cells: value top, unit label below --- */
.rg-spec {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: flex-start !important;
}
.rg-spec-v {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #0E0E10 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  display: inline !important;
}
.rg-spec-v small {
  font-weight: 500 !important;
  color: #6E6E73 !important;
  font-size: 12px !important;
}
.rg-spec-u {
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important;
  color: #6E6E73 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Bar tracks for range + top speed cells */
.rg-spec[data-value] .rg-bar-track {
  height: 4px !important;
  background: #F4F4F2 !important;
  border-radius: 100px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  width: 60px !important;
}
.rg-spec[data-value] .rg-bar-fill {
  height: 100% !important;
  background: #0E0E10 !important;
  border-radius: 100px !important;
  width: 0;
  transition: width .3s ease !important;
}
.brxe-rgcomprow.winner .rg-bar-fill { background: #002D7A !important; }

/* --- Winner row score pill: black bg + lime text --- */
.brxe-rgcomprow.winner .rg-score {
  background: #0E0E10 !important;
  color: #4D8DFF !important;
}

/* --- Triplet mini-card titles: clean sans, not bold/serif --- */
#brxe-yomiht .brxe-ndfcym .brxe-tgdqhp,
#brxe-aommtq .brxe-eprrrn .brxe-rdcjvi,
#brxe-jofdrw .brxe-owxeyg .brxe-bxtwft,
#brxe-yomiht .brxe-text-basic,
#brxe-aommtq .brxe-text-basic,
#brxe-jofdrw .brxe-text-basic {
  font-family: 'Geist', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #0E0E10 !important;
  letter-spacing: -0.01em !important;
}

/* Triplet headings: thin line below (not the heavy 'h2 underline' look) */
#brxe-rqxccd, #brxe-nsmqef, #brxe-jgxops {
  border-bottom: 1px solid #e8e8ea !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}
#brxe-kxxlsl, #brxe-dolnst, #brxe-ckmrip {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Triplet mini-list: 100x60 thumb + title right, no padding overflow */
#brxe-yomiht .brxe-ndfcym .brxe-image,
#brxe-aommtq .brxe-eprrrn .brxe-image,
#brxe-jofdrw .brxe-owxeyg .brxe-image {
  width: 100px !important;
  height: 64px !important;
  max-width: 100px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
#brxe-yomiht .brxe-ndfcym .brxe-image img,
#brxe-aommtq .brxe-eprrrn .brxe-image img,
#brxe-jofdrw .brxe-owxeyg .brxe-image img {
  width: 100px !important;
  height: 64px !important;
  object-fit: cover !important;
}

/* --- Newsletter polish: ensure lede + meta chips visible at all viewports --- */
#brxe-fexgbj {
  padding: 56px 64px !important;
  margin: 64px auto !important;
  max-width: 1340px !important;
}
#brxe-dhkwme {
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "heading form"
    "lede form" !important;
}
#brxe-dhkwme::after {
  grid-area: heading !important;
}
#brxe-azhonh {
  grid-area: lede !important;
  align-self: start !important;
  margin: 8px 0 0 !important;
}
#brxe-tbgrxy {
  grid-area: form !important;
  align-self: center !important;
}

/* =========================================================
   v26 — Triplet titles + newsletter meta chips (2026-05-19)
   ========================================================= */

/* Triplet titles — shortcode elements (.brxe-shortcode + .brxe-yqpodg etc) */
#brxe-yomiht .brxe-shortcode,
#brxe-aommtq .brxe-shortcode,
#brxe-jofdrw .brxe-shortcode,
#brxe-yomiht .brxe-yqpodg,
#brxe-aommtq .brxe-regscx,
#brxe-jofdrw .brxe-isnxqu {
  font-family: 'Geist', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #0E0E10 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Newsletter meta chips: append below lede via ::after on azhonh */
#brxe-azhonh {
  position: relative !important;
}
#brxe-azhonh::after {
  content: "" !important;
  display: block !important;
  margin-top: 16px !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  /* Use a separate element approach via ::after wrapping each chip */
}
/* Add a dedicated chips line via pseudo on tbgrxy form bottom — better approach:
   add a real chips element. Easier: use ::before on tbgrxy container. */
#brxe-tbgrxy::after {
  content: "42,000+ readers  ·  Weekly · 2 min  ·  Staff reviews  ·  Unsubscribe anytime";
  display: block !important;
  margin-top: 14px !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: #6E6E73 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

/* =========================================================
   v27 — GS pictorial card eyebrow + tags match mockup (2026-05-19)
   ========================================================= */

/* --- Floating tag chips (top-left) — match mockup tags per nth-child --- */

/* --- Eyebrow line BETWEEN image and title (above .brxe-vhqcuu text) --- */
#brxe-enixjn > .brxe-block .brxe-vhqcuu {
  position: relative !important;
  padding: 32px 18px 42px !important;  /* extra top room for eyebrow */
}
#brxe-enixjn > .brxe-block .brxe-vhqcuu::before {
  position: absolute !important;
  top: 12px !important;
  left: 18px !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #002D7A !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- Footer "picks compared · min read" — match mockup with bold counts --- */

/* Title: line-clamp + cleaner sizing */
#brxe-enixjn .brxe-vhqcuu .brxe-yqsomw,
#brxe-enixjn .brxe-vhqcuu .brxe-shortcode {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #0E0E10 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* =========================================================
   v28 — Header 3-col layout matching mockup (2026-05-19)
   =========================================================
   Mockup: .head-inner { display: grid; grid-template-columns: auto 1fr auto; }
   Brand auto-left, nav 1fr (fills middle), search auto-right.
   Approach: brx-header keeps full-bleed bg; vriwqe becomes max-width 1280
   centered flex row. eahwlq grows to fill space; search pill pushed to far
   right via margin-left: auto on rgnav8.
   ========================================================= */

header#brx-header {
  background: #FBFBFA !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  border-bottom: 1px solid #e8e8ea;
}
#brxe-vriwqe {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: 1340px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  background: transparent !important;
  /* Defeat v18 grid */
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
}
#brxe-vriwqe > * { grid-column: auto !important; grid-row: auto !important; }
#brxe-htbmvg {
  flex: 0 0 auto !important;
  justify-self: start !important;
  padding: 0 !important;
  margin: 0 !important;
}
#brxe-eahwlq {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 0 0 32px !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}
#brxe-ksqflv {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
/* Search pill pushed to right end of nav row */
#brxe-rgnav8 {
  margin-left: auto !important;
}
/* Nav items styling matching mockup */
#brxe-ksqflv > .brxe-text-basic:not(#brxe-rgnav8) {
  flex: 0 0 auto !important;
}
.rg-nav-link {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: #3B3B3F !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.rg-nav-link:hover { background: #F4F4F2 !important; color: #0E0E10 !important; }

/* =========================================================
   v29 — Triplet show 5 per column at desktop (2026-05-19)
   ========================================================= */
@media (min-width: 1025px) {
  #brxe-yomiht > .brxe-block:nth-child(n+5) { display: flex !important; }
  #brxe-aommtq > .brxe-block:nth-child(n+5) { display: flex !important; }
  #brxe-jofdrw > .brxe-block:nth-child(n+5) { display: flex !important; }
  #brxe-yomiht > .brxe-block:nth-child(n+6),
  #brxe-aommtq > .brxe-block:nth-child(n+6),
  #brxe-jofdrw > .brxe-block:nth-child(n+6) { display: none !important; }
}

/* =========================================================
   v30 — Pixel-parity pass vs mockup 04 (2026-05-19)
   Four root-cause fixes identified by DOM measurement:
   1. Hero blank gap (rghgrid double-padding from Bricks _cssCustom)
   2. Topbar "STAFF REVIEWS" pushed off-screen (rgutll Bricks width 1224px)
   3. Getting Started extra 40px gap (enixjn Bricks margin-top)
   4. Compare table product column filling available space
   ========================================================= */

/* 1a. Hero inner grid: Bricks _cssCustom sets pt:56 / pb:48 which
   double-adds to the section's own 56px padding.
   Remove the redundant inner padding so the section container
   provides the only vertical whitespace. */
#brxe-rghgrid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 1b. Hero section bottom: mockup uses padding 56px top / 24px bottom.
   v20 hard-set both to 56px; override bottom to 24px. */
#brxe-tdkvak { padding-bottom: 24px !important; }

/* 2. Topbar overflow: rgutll has a Bricks-set width (~1224px) with
   flex-shrink:0, so it overflows the 1340px rgutwp container and
   pushes rgutrg (STAFF REVIEWS · SINCE 2018) off-screen.
   Force natural content width and allow shrink if needed. */
#brxe-rgutll {
  width: max-content !important;
  flex-shrink: 1 !important;
  justify-content: flex-start !important;
}

/* Topbar vertical padding to match mockup .util { padding: 6px 0 } */
#brxe-rgutil {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 3. Getting Started: enixjn has a Bricks margin-top:40px that stacks
   on top of rggshdr's existing 32px margin-bottom, creating a 72px gap
   instead of the mockup's 32px. Remove the extra margin. */
#brxe-enixjn { margin-top: 0 !important; }

/* 4. Compare table grid: product col stays moderate (minmax(200px, 1.3fr))
   and the 4 spec cols share remaining width (repeat(4, minmax(0,1fr))) so
   PRICE/RANGE/SPEED/BATTERY spread evenly instead of cramming far-right.
   NOTE: this same rule is ALSO stored in the homepage Bricks page Custom CSS
   inside _bricks_page_content_2 — that inline copy actually wins at runtime
   (loads after this <link>). Keep both in sync or edit the page CSS instead.
   See [[feedback_bricks_css_specificity]] for context. */
.brxe-rgcomprow,
#brxe-rgcomphdr {
  grid-template-columns: 240px minmax(200px, 1.3fr) repeat(4, minmax(0, 1fr)) !important;
}

/* =========================================================
   v31 — Footer layout + header/topbar fixes (2026-05-19)
   ========================================================= */

/* 1. Topbar: first text (UPDATED timestamp) is fw:600 — mockup uses 400 */
#brxe-rgutlv {
  font-weight: 400 !important;
}

/* 2. Header nav section: 16px top/bottom padding (mockup .head-inner { padding: 16px 0 }) */
#brxe-vriwqe {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* 3. Footer col 1: logo + RIDERGUIDE side-by-side row (mockup .foot-brand-wrap) */
#brxe-txqnmn {
  display: grid !important;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto;
  gap: 0 14px;
  align-items: start;
}
#brxe-zqpacd {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
#brxe-rgfbrnd {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}
#brxe-rgtagl {
  grid-row: 2;
  grid-column: 1 / 3;
  margin-top: 16px !important;
}

/* 4. Footer social icons: margin-top: 22px (mockup .foot-socials) */
#brxe-kpprqg {
  margin-top: 22px !important;
}

/* 5. Footer nav links: each link is 44px tall — reduce to mockup padding: 5px 0 */
#brxe-rgfbc1 > .brxe-text-basic,
#brxe-rgfbc2 > .brxe-text-basic,
#brxe-rgfbc3 > .brxe-text-basic {
  padding: 5px 0 !important;
  height: auto !important;
  min-height: unset !important;
  line-height: 1.5 !important;
}
#brxe-rgfbc1,
#brxe-rgfbc2,
#brxe-rgfbc3 {
  gap: 0 !important;
}

/* 6. Triplet loop cards: border-bottom was creating phantom horizontal lines */
#brxe-yomiht > .brxe-block,
#brxe-aommtq > .brxe-block,
#brxe-jofdrw > .brxe-block {
  border-bottom: none !important;
}

/* =========================================================
   v32 — Higher-specificity overrides (body prefix beats Bricks !important)
   ========================================================= */

/* 1. Topbar first text: Bricks has font-weight:600, need body-prefix to win */
body #brxe-rgutlv { font-weight: 400 !important; }

/* 2. Header nav section: 16px top/bottom padding */
body #brxe-vriwqe {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* 3. Footer col 1: logo + RIDERGUIDE side-by-side
   Bricks has flex-direction:column!important and gap:16px!important on txqnmn.
   body prefix specificity (0,1,0,1) beats Bricks (0,1,0,0) */
body #brxe-txqnmn {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 14px !important;
  flex-direction: unset !important;
  align-items: start !important;
}
body #brxe-zqpacd { grid-row: 1 !important; grid-column: 1 !important; align-self: center !important; }
body #brxe-rgfbrnd { grid-row: 1 !important; grid-column: 2 !important; align-self: center !important; }
body #brxe-rgtagl { grid-row: 2 !important; grid-column: 1 / 3 !important; margin-top: 16px !important; }

/* 4. Triplet loop card border — use exact card classes, not > .brxe-block */
.brxe-ndfcym.brxe-block,
.brxe-eprrrn.brxe-block,
.brxe-owxeyg.brxe-block { border-bottom: none !important; }

/* =========================================================
   v33 — Match (0,2,0,0) specificity to beat pgzoew>txqnmn flex rule
   ========================================================= */
#brxe-pgzoew > #brxe-txqnmn {
  display: grid !important;
  flex-direction: unset !important;
}

/* =========================================================
   v34 — Header logo gap: vriwqe margin-top (not padding, which fixed height blocks)
   ========================================================= */

/* Push the logo/nav row 16px below the topbar.
   padding-top on vriwqe does nothing because height:96px is box-sizing:border-box
   with no room left. margin-top moves the whole row instead. */
body #brxe-vriwqe {
  margin-top: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   v35 — Hide phantom divider lines above newsletter section (2026-05-19)
   ========================================================= */
/* brxe-wesaur (1px) and brxe-auxqcz (2px) are Bricks divider elements
   sitting between the triplet section and newsletter. Not in mockup. */
#brxe-wesaur,
#brxe-auxqcz {
  display: none !important;
}
/* =========================================================
   v36 — Architecture Fixes (Mockup Parity)
   ========================================================= */

/* Fix Top Utility Bar Stacking */
body #brxe-rgutwp {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body #brxe-rgutll {
  width: auto !important;
}

/* Fix Triplet layout to match mockup side-by-side */
body .brxe-ndfcym.brxe-block,
body .brxe-eprrrn.brxe-block,
body .brxe-owxeyg.brxe-block {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #EAEAE6 !important;
}

/* =========================================================
   v37 — Newsletter, Footer Icons, Header Logo, and Phantom Lines Fix
   ========================================================= */

/* 1. Footer Social Icons Alignment */
body #brxe-kpprqg {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

body #brxe-kpprqg a, body #brxe-kpprqg .brxe-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}

/* 2. Newsletter Full Width */
/* The newsletter is in a template (iuhxty) which likely contains a section. We strip the rounded borders and force full width */
body #brxe-iuhxty > section, body #brxe-iuhxty > .brxe-section {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* 3. Hide Phantom Horizontal Lines */
body #brxe-nqbbki,
body #brxe-wesaur,
body #brxe-auxqcz,
body .brxe-divider {
  display: none !important;
}

/* 4. Header Logo Alignment & Sizing */
body #brxe-lrclmo img, body #brxe-lrclmo {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

/* Force the header inner container to align items centrally */
body #brxe-vriwqe > .brxe-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body #brxe-wiuzlz {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

/* =========================================================
   v38 — Header Nav Alignment & Typography Adjustments
   ========================================================= */

/* Fix vertical descent issue on logo link */
body #brxe-lrclmo {
  display: flex !important;
  align-items: center !important;
  margin-right: 6px !important; /* Creates 10px total gap with container gap */
}

body #brxe-lrclmo img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* Ensure header container vertically aligns everything */
body #brxe-vriwqe > .brxe-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  column-gap: 4px !important; /* Default gap for nav links */
}

/* RIDERGUIDE text styling and spacing */
body #brxe-wiuzlz {
  margin-right: 28px !important; /* Pushes the rest of the nav away to simulate the grid gap */
  align-self: center !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

/* Ensure nav links are perfectly centered vertically */
body .rg-nav-link, body #brxe-vriwqe .brxe-text-basic {
  display: inline-flex !important;
  align-items: center !important;
}
/* =========================================================
   v39 — Global Typography System (Mockup Parity)
   ========================================================= */
:root {
  --font-brand: 'Bricolage Grotesque', sans-serif !important;
  --font-ui: 'Geist', sans-serif !important;
  --font-mono: 'Geist Mono', monospace !important;
}

body, .brxe-text-basic {
  font-family: var(--font-ui) !important;
}

h1, h2, h3, h4, h5, h6, .brxe-heading, .brand-name {
  font-family: var(--font-brand) !important;
}

.eyebrow, .status, .label, .tag, .gtag, .meta, .count, .trust-item .l, .spec-cell .u, .col-head, .c-eyebrow, .c-tag, .c-foot, .gmeta, .news-tags {
  font-family: var(--font-mono) !important;
}
/* =========================================================
   v40 — Newsletter WPForms Reskin (Mockup Parity)
   ========================================================= */

body #wpforms-11588 {
  margin: 0 !important;
}

body #wpforms-11588 form {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap; /* for mobile */
}

body #wpforms-11588 .wpforms-field-container {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #wpforms-11588 .wpforms-field {
  margin: 0 !important;
  padding: 0 !important;
}

body #wpforms-11588 .wpforms-field input[type="email"] {
  width: 100% !important;
  padding: 16px 20px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg) !important;
  border-radius: 10px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  margin: 0 !important;
  height: auto !important;
}

body #wpforms-11588 .wpforms-field input[type="email"]:focus {
  outline: 2px solid var(--lime) !important;
  border-color: transparent !important;
}

body #wpforms-11588 .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
}

body #wpforms-11588 button[type="submit"] {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 0 !important;
  padding: 16px 28px !important;
  border-radius: 10px !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px -8px rgba(0, 61, 165, 0.55), 0 2px 0 var(--lime-deep) !important;
  transition: transform .12s ease, box-shadow .2s ease, background .15s !important;
  margin: 0 !important;
}

body #wpforms-11588 button[type="submit"]:hover {
  background: var(--ink) !important;
  color: var(--lime) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -10px rgba(0, 61, 165, 0.45), 0 2px 0 rgba(0,0,0,0.4) !important;
}

/* Hide WPForms labels or sub-labels */
body #wpforms-11588 .wpforms-field-label {
  display: none !important;
}

/* Remove newsletter border radius on standard bricks section */
body #brx-footer .newsletter {
  border-radius: 0 !important;
}
/* =========================================================
   v41 — Header Navigation Logo & Text Precision (Mockup Parity)
   ========================================================= */

body #brxe-lrclmo {
  margin-right: 6px !important;
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important; /* Strips any whitespace descender below the image */
}

body #brxe-lrclmo img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body #brxe-wiuzlz {
  margin-right: 28px !important;
  align-self: center !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--ink, #0E0E10) !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* =========================================================
   v42 — Nuke Bricks Default Padding on Logo & Text
   ========================================================= */

body #brx-header #brxe-lrclmo {
  margin: 0 6px 0 0 !important; /* 6px right margin, 0 everywhere else */
  padding: 0 !important; /* NUKE the 24px top and 72px left padding */
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

body #brx-header #brxe-lrclmo img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body #brx-header #brxe-wiuzlz {
  margin: 0 28px 0 0 !important; /* 28px right margin, 0 everywhere else */
  padding: 0 !important; /* NUKE the 24px top padding */
  align-self: center !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--ink, #0E0E10) !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* =========================================================
   v43 — Layout Fixes: Max Width, Newsletter Fullwidth, Footer Icons
   ========================================================= */

/* 1. Global Container Width Alignment
   The staging site max-width is constrained (e.g. 1100px).
   We expand it to 1340px to match the wider mockup aesthetic. */
@media (min-width: 992px) {
  body .brxe-container {
    max-width: 1340px !important;
  }
}

/* 2. Newsletter Full Window Width Breakout 
   Force the background of the newsletter to span the entire screen,
   even if placed inside a constrained container in Bricks. */
body .newsletter {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* 3. Footer Social Media Vertical Alignment 
   Aligns the custom social media icons/elements in the footer to center,
   preventing the "300K" text from pushing them to align-bottom. */
body #brx-footer .brxe-social-icons,
body #brx-footer .brxe-icon-list,
body #brx-footer [class*="social"] {
  align-items: center !important;
}

body #brx-footer .brxe-social-icons .repeater-item,
body #brx-footer .brxe-icon-list li {
  display: flex !important;
  align-items: center !important;
}


/* =========================================================
   v44 — Newsletter full-bleed + triplet column consistency (2026-05-20)
   ========================================================= */

/* 1. Newsletter: strip the 1340px cap on iuhxty so the section runs edge-to-edge */
body #brxe-iuhxty {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* fexgbj: full-bleed bg, centered content via horizontal padding that clamps to 1340px */
body #brxe-fexgbj {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid var(--rg-line, #e8e8ea) !important;
  border-bottom: 1px solid var(--rg-line, #e8e8ea) !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  padding-left: max(24px, calc((100vw - 1340px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1340px) / 2)) !important;
  box-sizing: border-box !important;
}

/* dhkwme: the inner 2-col grid — already 100% of fexgbj's content area (centered by padding above) */
/* No max-width needed here; fexgbj's padding clamps it to 1340px at wide viewports */

/* Responsive stack: keep tablet override in sync */
@media (max-width: 900px) {
  body #brxe-fexgbj {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* 2. Triplet: edlurg (Safety & Gear column) had 32px horizontal padding
   that the other two columns don't have — strips 64px from its loop width */
body #brxe-edlurg {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   v45 — Newsletter form: force flex row layout (double-ID beats WPForms !important)
   ========================================================= */

/* WPForms overrides body #wpforms-11588 form with its own !important display:block.
   Using #brxe-tbgrxy + form ID raises specificity to 0,2,0,0 which wins. */
#brxe-tbgrxy #wpforms-form-11588 {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
}

#brxe-tbgrxy #wpforms-form-11588 .wpforms-field-container {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#brxe-tbgrxy #wpforms-form-11588 .wpforms-field {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

#brxe-tbgrxy #wpforms-form-11588 .wpforms-field-medium {
  width: 100% !important;
  height: 100% !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}

#brxe-tbgrxy #wpforms-form-11588 .wpforms-submit-container {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#brxe-tbgrxy #wpforms-form-11588 button[type="submit"] {
  width: auto !important;
  white-space: nowrap !important;
  height: 100% !important;
  min-height: 56px !important;
}

/* Mobile: stack at narrow widths */
@media (max-width: 600px) {
  #brxe-tbgrxy #wpforms-form-11588 {
    flex-direction: column !important;
  }
  #brxe-tbgrxy #wpforms-form-11588 button[type="submit"] {
    width: 100% !important;
  }
}


/* =========================================================
   v46 — Define missing --lime alias + fix newsletter button bg (2026-05-20)
   ========================================================= */

/* --lime was never defined (only --rg-lime was); v40 uses var(--lime) → transparent */
:root {
  --lime: #003DA5;
  --lime-deep: #002D7A;
  --ink: #0E0E10;
  --bg: #FBFBFA;
  --line: #e8e8ea;
}

/* Ensure button picks up lime bg via the new var (redundant fallback for safety) */
#brxe-tbgrxy #wpforms-form-11588 button[type="submit"] {
  background: #003DA5 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(0,61,165,0.35), 0 2px 0 #002D7A !important;
}

#brxe-tbgrxy #wpforms-form-11588 button[type="submit"]:hover {
  background: #0E0E10 !important;
  color: #4D8DFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -10px rgba(0,61,165,0.45), 0 2px 0 rgba(0,0,0,0.4) !important;
}


/* =========================================================
   v47 — Newsletter: heading size, button label, body text, pill chips (2026-05-20)
   ========================================================= */

/* 1. Heading: increase to match mockup clamp(36,4.5vw,56px) so "today." wraps at 1440px */
#brxe-dhkwme::after {
  font-size: clamp(36px, 4.5vw, 56px) !important;
  line-height: 1.0 !important;
}

/* 2. Body text: hide legacy azhonh copy, show mockup copy via ::before */
#brxe-azhonh { font-size: 0 !important; line-height: 0 !important; }
#brxe-azhonh::before {
  content: "Biggest discounts, newest scooter & e-bike reviews, best how-to's \2014  delivered weekly. No spam. Unsubscribe anytime.";
  display: block !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--rg-ink-3, #6E6E73) !important;
  max-width: 460px !important;
}

/* 3. Button: hide "sign up", show "Subscribe →" */
#brxe-tbgrxy #wpforms-form-11588 button[type="submit"] {
  font-size: 0 !important;
  color: transparent !important;
}
#brxe-tbgrxy #wpforms-form-11588 button[type="submit"]::after {
  content: "Subscribe \2192";
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: 'Geist', sans-serif !important;
  color: var(--rg-ink, #0E0E10) !important;
  letter-spacing: 0.01em !important;
}

/* 4. Hide the old CSS ::after chips — real HTML pills injected by JS below */
#brxe-tbgrxy::after { display: none !important; content: none !important; }

/* 5. Pill chips styling (HTML created by JS) */
.rg-news-chips {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}
.rg-news-chips span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: var(--rg-bg, #FBFBFA) !important;
  border-radius: 100px !important;
  border: 1px solid var(--rg-line, #e8e8ea) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  color: var(--rg-ink-3, #6E6E73) !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}


/* =========================================================
   v48 — Footer: icon sizing + social→copyright spacing (2026-05-20)
   ========================================================= */

/* 1. SOCIAL ICON TILES
   Bricks renders: kpprqg > ul#brxe-ghoczb > li.repeater-item > a > i.icon
   Bricks' own #brxe-ghoczb rule sets display:grid + padding:0 15px on <a>.
   Double-ID #kpprqg #brxe-ghoczb beats Bricks' single-ID selectors. */

#brxe-kpprqg #brxe-ghoczb .repeater-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#brxe-kpprqg #brxe-ghoczb .repeater-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

/* YouTube tile wider */
#brxe-kpprqg #brxe-ghoczb .repeater-item a[href*="youtube"] {
  width: 64px !important;
  min-width: 64px !important;
}

/* The Font Awesome <i>: set font-size so it fits the 52px tile */
#brxe-kpprqg #brxe-ghoczb .repeater-item a i {
  font-size: 22px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* 2. SOCIAL→COPYRIGHT SPACING
   kpprqg had margin-top:175px to push socials under tagline text.
   Drop to 16px — let the brand col natural flow handle positioning.
   The long nav-links col on the right sets row height; brand+socials
   column will be shorter which is fine. */
#brxe-pgzoew > #brxe-kpprqg,
body #brxe-pgzoew > #brxe-kpprqg {
  margin-top: 16px !important;
  align-self: start !important;
}

/* 3. Tighten footer bottom padding (reduces gap above copyright line) */
#brxe-pgzoew {
  padding-bottom: 16px !important;
}

/* =========================================================
   v49 — Footer: move social icons to grid row 2 (2026-05-20)
   =========================================================
   PROBLEM: txqnmn (brand/tagline) and kpprqg (socials) were
   BOTH placed at grid-row:1 col:1 in pgzoew's 2-row grid.
   Row 1 = 171px — exactly txqnmn's height. kpprqg with only
   margin-top:16px (v48) overlaps completely inside txqnmn.
   FIX: Move kpprqg to grid-row:2 col:1. Row 2 = 107px and
   sits alongside the copyright bar portion of lfayrm (cols 2-4
   span rows 1-2). This eliminates the overlap AND the whitespace
   gap between socials and copyright — they share the same row.
   ========================================================= */
#brxe-pgzoew > #brxe-kpprqg,
body #brxe-pgzoew > #brxe-kpprqg {
  grid-row: 2 !important;
  grid-column: 1 !important;
  margin-top: 0 !important;
  align-self: center !important;
}

/* =========================================================
   v50 — Triplet section (News/Guides/Safety) card fix (2026-05-20)
   =========================================================
   ROOT CAUSE: Cards use grid-template-columns:80px 290px (set in
   Bricks builder). The image anchor renders at 100px (its configured
   size) — wider than the 80px column — overflowing into the title
   area. Title's 290px is correct for 1fr but grid-template-rows:76px
   forces a fixed row height regardless of content. No line-clamp
   means 4-line titles break the compact layout permanently.
   
   FIX:
   1. Change col 1 from 80px → 100px (match actual image render size)
   2. Change col 2 from 290px → 1fr (fills remaining space flexibly)
   3. Remove fixed row height (auto-sizes to clamped title)
   4. -webkit-line-clamp:2 on all titles — future-proof against any
      title length now and when new posts are added.
   ========================================================= */

/* 1. Card grid template — all 3 triplet loops use same fix */
#brxe-yomiht .brxe-ndfcym,
#brxe-aommtq .brxe-eprrrn,
#brxe-jofdrw .brxe-owxeyg {
  grid-template-columns: 100px 1fr !important;
  grid-template-rows: auto !important;
  min-height: 70px !important;
  align-items: center !important;
}

/* 2. Image link — enforce 100×70px thumbnail, no overflow */
#brxe-yomiht .brxe-thhqpo,
#brxe-aommtq .brxe-hctkxe,
#brxe-jofdrw .brxe-zwyxep {
  width: 100px !important;
  height: 70px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 3. Img tag — fill the 100×70 thumbnail cleanly */
#brxe-yomiht .brxe-thhqpo img,
#brxe-aommtq .brxe-hctkxe img,
#brxe-jofdrw .brxe-zwyxep img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. Title — 2-line clamp, prevents ALL future long-title overflow */
#brxe-yomiht .brxe-tgdqhp,
#brxe-aommtq .brxe-rdcjvi,
#brxe-jofdrw .brxe-bxtwft {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  align-self: center !important;
  min-width: 0 !important;
}

/* =========================================================
   v51 — Triplet: title clamp fix + section header upgrade (2026-05-20)
   =========================================================
   LINE-CLAMP: v50 targeted .brxe-tgdqhp (the wrapper div).
   The actual text lives one level deeper in a .brxe-shortcode
   child whose class differs per loop. -webkit-line-clamp only
   works on the element that directly contains the text nodes,
   so target each inner shortcode element explicitly.

   HEADERS: Current staging has 16px/400-weight with a weak
   1px rgba(232,232,234) border. Mockup spec (.triplet h3):
   Bricolage Grotesque 700, 22px, 2px solid #0E0E10 border.
   ========================================================= */

/* 1. Title line-clamp — inner text containers for all 3 loops */
#brxe-yomiht .brxe-yqpodg,
#brxe-aommtq .brxe-regscx,
#brxe-jofdrw .brxe-isnxqu {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* 2. Section headings — match mockup .triplet h3 spec */
#brxe-rqxccd,
#brxe-nsmqef,
#brxe-jgxops {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  border-bottom-width: 2px !important;
  border-bottom-color: #0E0E10 !important;
  border-bottom-style: solid !important;
}

/* =========================================================
   v52 — Triplet: compact card fix + grey line removal (2026-05-20)
   =========================================================
   PROBLEMS:
   A. Card 5 (nth-child 5) uses display:flex + flex-direction:column
      (Bricks sticky-post template), making it 178px tall vs 100px
      for cards 1-4. The title wrapper stretches to full 384px width.
   B. Each triplet section (qjbyiw/nboaso/edlurg) has its own
      border-bottom + padding-bottom:64px. Because each column is
      a different height, the 3 borders appear at different vertical
      positions = the weird horizontal grey lines.
   C. Thumbnails at 100x70px are oversized vs mockup (72x52).
   D. -webkit-line-clamp (via -webkit-box) computing as flow-root in
      Chrome 2026 — use max-height approach instead.

   FIXES:
   1. Force card 5 to use same grid template as cards 1-4.
   2. Remove per-section borders; add one clean border on the
      triplet parent (#brxe-rgtriplet).
   3. Shrink thumbnails to 72x52, update column to 72px.
   4. max-height on inner shortcode = 2 lines of text.
   ========================================================= */

/* 1. Fix card 5 layout in all 3 loops — same grid as other cards */
#brxe-yomiht .brxe-ndfcym:nth-child(5),
#brxe-aommtq .brxe-eprrrn:nth-child(5),
#brxe-jofdrw .brxe-owxeyg:nth-child(5) {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  grid-template-rows: 52px !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 2. Remove per-section borders (they appear at 3 different heights) */
#brxe-qjbyiw,
#brxe-nboaso,
#brxe-edlurg {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* One clean border on the triplet parent row */
#brxe-rgtriplet {
  border-bottom: 1px solid var(--rg-line, #e8e8ea) !important;
  padding-bottom: 48px !important;
}

/* 3. Thumbnail size: 72x52 for ALL cards (overrides v50's 100x70) */
#brxe-yomiht .brxe-ndfcym .brxe-thhqpo,
#brxe-aommtq .brxe-eprrrn .brxe-hctkxe,
#brxe-jofdrw .brxe-owxeyg .brxe-zwyxep {
  width: 72px !important;
  height: 52px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Update card grid template to 72px (overrides v50's 100px) */
#brxe-yomiht .brxe-ndfcym,
#brxe-aommtq .brxe-eprrrn,
#brxe-jofdrw .brxe-owxeyg {
  grid-template-columns: 72px 1fr !important;
  grid-template-rows: 52px !important;
  gap: 12px !important;
  align-items: center !important;
}

/* 4. Title: max-height = 2 lines (bypasses webkit-box computed-display issue) */
#brxe-yomiht .brxe-yqpodg,
#brxe-aommtq .brxe-regscx,
#brxe-jofdrw .brxe-isnxqu {
  max-height: 38px !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  display: block !important;
}

/* =========================================================
   v53 — Triplet spacing: remove stacked excess gaps (2026-05-20)
   =========================================================
   STACKED GAPS before 'News' heading (vs mockup's 64px):
   - rgtriplet padding-top:  48px  (keep — reasonable wrapper pad)
   - section margin-top:     32px  → 0   (-32px)
   - section padding-top:    64px  → 0   (-64px)
   Total above heading: 144px → 48px (matches mockup intent)

   GAPS inside triplet column:
   - loop margin-top: 40px → 12px  (heading-to-first-card gap)
   - loop card gap:   24px → 16px  (between cards)
   - card padding:    12px → 8px   (top/bottom per card)
   ========================================================= */

/* 1. Kill excess section margin+padding */
#brxe-qjbyiw,
#brxe-nboaso,
#brxe-edlurg {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2. Loop: tighter heading-to-cards gap + between-card gap */
#brxe-yomiht,
#brxe-aommtq,
#brxe-jofdrw {
  margin-top: 12px !important;
  gap: 16px !important;
}

/* 3. Card top/bottom padding: tighter rows */
#brxe-yomiht .brxe-ndfcym,
#brxe-aommtq .brxe-eprrrn,
#brxe-jofdrw .brxe-owxeyg {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* v54 — Recent Reviews column header borders */
#brxe-rgcomphdr {
  border-top: 1px solid #0E0E10 !important;
  border-bottom: 1px solid #0E0E10 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* v55 — Replace THE CHARGER CSS pill with new logo image */
#brxe-dhkwme::before {
  content: '' !important;
  display: block !important;
  width: 220px !important;
  height: 37px !important;
  background-image: url('https://wordpress-933147-3269960.cloudwaysapps.com/wp-content/uploads/2023/02/the-charger-pill.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  background-position: left center !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}

/* v55b — Add breathing room below charger logo */
#brxe-dhkwme::before {
  margin-bottom: 12px !important;
}

/* v55c — Charger logo: keep absolute positioning, swap text pill for image */
#brxe-dhkwme::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  width: 220px !important;
  height: 37px !important;
  background-image: url('https://wordpress-933147-3269960.cloudwaysapps.com/wp-content/uploads/2023/02/the-charger-pill.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  background-position: left center !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  margin-bottom: 0 !important;
}

/* v55d — Charger logo: raise above heading with correct top offset */
#brxe-dhkwme::before {
  top: -44px !important;
  left: 0 !important;
}

/* v56 — Tighten newsletter vertical spacing */
#brxe-fexgbj {
  padding-top: 56px !important;
  padding-bottom: 40px !important;
}
#brxe-dhkwme {
  gap: 16px 64px !important;
}
/* Pill offset: section padding-top 56px, pill top -36px → 20px breathing room at top */
#brxe-dhkwme::before {
  top: -36px !important;
}

/* v56b — Fix column gap back to 48px (heading was wrapping to 3 lines) */
#brxe-dhkwme {
  row-gap: 16px !important;
  column-gap: 48px !important;
}

/* v57 — Email input fills its flex container (was capped by wpforms-field-medium) */
#brxe-tbgrxy .wpforms-field-medium {
  width: 100% !important;
  max-width: 100% !important;
}

/* v58 — More breathing room between Charger logo and heading */
#brxe-dhkwme::before {
  top: -50px !important;
}

/* v59 — Cap newsletter right column to chip row natural width so form+chips align */
#brxe-tbgrxy {
  max-width: 570px !important;
}

/* v59b — Correct max-width (570px was 1px short, causing chip wrap) */
#brxe-tbgrxy {
  max-width: 580px !important;
}

/* v60 — Stretched link: make entire card (image + title) clickable for News & Blog, Latest Guides, Safety & Gear */
.brxe-ndfcym,
.brxe-eprrrn,
.brxe-owxeyg {
  position: relative;
}

a.brxe-thhqpo::after,
a.brxe-hctkxe::after,
a.brxe-zwyxep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* v60b — Nullify non-functional ::after from v60; add styles for JS-injected title links */
a.brxe-thhqpo::after,
a.brxe-hctkxe::after,
a.brxe-zwyxep::after {
  content: none;
}

.brxe-tgdqhp a,
.brxe-rdcjvi a,
.brxe-bxtwft a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brxe-tgdqhp a:hover,
.brxe-rdcjvi a:hover,
.brxe-bxtwft a:hover {
  text-decoration: underline;
}

/* v62 — Triplet top padding matches other sections (48px → 64px); newsletter section top gives badge 30px breathing room from grey line (64px → 80px) */
#brxe-rgtriplet {
  padding-top: 64px !important;
}

#brxe-fexgbj {
  padding-top: 80px !important;
}

/* v62b — Match body-prefixed specificity for newsletter top padding (badge 30px from grey line) */
body #brxe-fexgbj {
  padding-top: 80px !important;
}

/* v63 — Getting Started header: flex row so heading + View All share same baseline; full-width bar moves to header container */
#brxe-rggshdr {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #0E0E10 !important;
  margin-bottom: 32px !important;
}

/* Strip the old per-column border/spacing that caused the misalignment */
#brxe-rvjgii {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* v64 — Remove YouTube red bg (revert to default dark tile) */
#brxe-ghoczb a[href*="youtube"],
#brxe-ghoczb a[href*="youtu.be"] {
  background: #0E0E10 !important;
}

/* v64 — Subscribe button hover: lime text on dark bg (::after was inheriting ink color = invisible) */
#brxe-tbgrxy #wpforms-form-11588 button[type=submit]:hover::after {
  color: #4D8DFF !important;
}
/* =========================================================
   v44 — Newsletter: Homepage Only
   WordPress adds .home to <body> only on the front page.
   ========================================================= */

body:not(.home) .newsletter {
  display: none !important;
}
/* =========================================================
   v44 — Newsletter: Homepage Only
   Static front pages get .front-page (not .home) in WP body classes.
   ========================================================= */

/* Hide on everything except homepage */
body:not(.home):not(.front-page) .newsletter {
  display: none !important;
}

/* Explicitly show on static front page (overrides any prior hide rule) */
body.front-page .newsletter {
  display: block !important;
}
/* =========================================================
   v45 — Search Results: Match Article H1 Heading Style
   The Bricks fallback search template outputs a plain
   <h1 class="title"> that gets 2.4em from frontend.min.css.
   Override to match article heading style.
   ========================================================= */

body.search .bricks-archive-title-wrapper h1.title,
body.search .bricks-archive-title-wrapper h2.title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--rg-ink) !important;
  margin: 0 0 16px !important;
}
/* =========================================================
   v46 — Newsletter visibility: default hidden, homepage only
   Replaces the :not() approach in v44 which RUCSS strips.
   ========================================================= */

.newsletter {
  display: none !important;
}

body.home .newsletter,
body.front-page .newsletter {
  display: block !important;
}

/* =========================================================
   v65 — Header layout: logo fixed-width, nav+search fills
   remaining space, search pill pushed to far right.
   Matches mockup's auto|1fr|auto grid pattern.
   Also: nav links bump to weight 600 for visual crispness.
   ========================================================= */

/* Logo col: don't grow — stay at content width */
#brxe-htbmvg {
  flex: 0 0 auto !important;
}

/* Nav+search col: grow to fill all remaining header space */
#brxe-eahwlq {
  flex: 1 1 auto !important;
}

/* Nav block: fill the full eahwlq width */
#brxe-ksqflv {
  width: 100% !important;
}

/* Search pill (rgnav8): push to far right with auto left margin */
#brxe-rgnav8 {
  margin-left: auto !important;
}

/* Nav links: 500 → 600 for crisper appearance */
#brxe-ksqflv .rg-nav-link {
  font-weight: 600 !important;
}
/* =========================================================
   v47 — Search Results heading: match Bricks H1 theme style
   Bricks theme_styles defines H1 at 40px / 700 / BricolageGrotesque.
   Use a simple selector (no body.search prefix) so RUCSS keeps it.
   ========================================================= */

.bricks-archive-title-wrapper h1.title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #1e2021 !important;
  margin: 0 0 16px !important;
}

@media (max-width: 1024px) {
  .bricks-archive-title-wrapper h1.title {
    font-size: 24px !important;
  }
}

@media (max-width: 767px) {
  .bricks-archive-title-wrapper h1.title {
    font-size: 32px !important;
  }
}

/* =========================================================
   v-article — Single-post / review reading experience
   Date: 2026-05-20
   ========================================================= */

/* ── 1. Article shell top/bottom padding ─────────────────── */
#postreviewtoc {
  padding-top: 40px !important;
  padding-bottom: 96px !important;
}

/* ── 2. Article title  (template element brxe-579b57) ─────── */
#brxe-579b57 {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #0E0E10 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* ── 3. Meta row (author image + byline + CTA button) ─────── */
#brxe-tkohpj {
  border-top: 1px solid #EBEBEA !important;
  border-bottom: 1px solid #EBEBEA !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  margin-top: 20px !important;
  margin-bottom: 32px !important;
}
#brxe-squjfd {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* ── 4. Body copy ─────────────────────────────────────────── */
#postreviewtoc .brxe-text {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2E2E30 !important;
}
#postreviewtoc .brxe-text p {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2E2E30 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
#postreviewtoc .brxe-text span {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* ── 5. Emphasis ─────────────────────────────────────────── */
#postreviewtoc .brxe-text strong,
#postreviewtoc .brxe-text b {
  color: #0E0E10 !important;
  font-weight: 700 !important;
}

/* ── 6. In-article headings ──────────────────────────────── */
#postreviewtoc .brxe-text h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #0E0E10 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 40px !important;
  border-top: 1px solid #EBEBEA !important;
}
#postreviewtoc .brxe-text h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: #0E0E10 !important;
  margin-top: 32px !important;
  margin-bottom: 10px !important;
}
#postreviewtoc .brxe-text h4 {
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #69686B !important;
  margin-top: 28px !important;
  margin-bottom: 8px !important;
}

/* ── 7. Links in article body ─────────────────────────────── */
#postreviewtoc .brxe-text a {
  color: #002D7A !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 45, 122, 0.4) !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s, text-decoration-color 0.15s !important;
}
#postreviewtoc .brxe-text a:hover {
  color: #001F54 !important;
  text-decoration-color: rgba(0, 31, 84, 0.75) !important;
}

/* ── 8. Lists ─────────────────────────────────────────────── */
#postreviewtoc .brxe-text ul,
#postreviewtoc .brxe-text ol {
  padding-left: 24px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
#postreviewtoc .brxe-text li {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2E2E30 !important;
  margin-bottom: 6px !important;
}
#postreviewtoc .brxe-text ul li::marker {
  color: #002D7A;
}
#postreviewtoc .brxe-text ol li::marker {
  color: #002D7A;
  font-weight: 600;
}

/* ── 9. Blockquotes ───────────────────────────────────────── */
#postreviewtoc .brxe-text blockquote {
  margin: 28px 0 !important;
  padding: 18px 22px !important;
  border-left: 4px solid #003DA5 !important;
  background: #F5F5F3 !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
}
#postreviewtoc .brxe-text blockquote p {
  margin-bottom: 0 !important;
  color: #2E2E30 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* ── 10. Images — rounded corners ─────────────────────────── */
#postreviewtoc .brxe-text img,
#postreviewtoc .brxe-image img {
  border-radius: 10px !important;
  display: block !important;
}

/* ── 11. Video embed — rounded corners ───────────────────── */
#postreviewtoc .brxe-video {
  border-radius: 10px !important;
  overflow: hidden !important;
}
#postreviewtoc .brxe-video iframe {
  border-radius: 10px !important;
  display: block !important;
}

/* ── 12. CTA button ──────────────────────────────────────── */
#postreviewtoc .bricks-button.bricks-background-primary {
  font-family: 'Geist', sans-serif !important;
  background: #003DA5 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 10px 22px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
#postreviewtoc .bricks-button.bricks-background-primary:hover {
  background: #002D7A !important;
  color: #fff !important;
}

/* ── 13. Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  #postreviewtoc {
    padding-top: 24px !important;
    padding-bottom: 60px !important;
  }
  #brxe-579b57 {
    font-size: 24px !important;
  }
  #postreviewtoc .brxe-text h2 {
    font-size: 20px !important;
    padding-top: 28px !important;
  }
  #postreviewtoc .brxe-text h3 {
    font-size: 17px !important;
  }
  #postreviewtoc .brxe-text p,
  #postreviewtoc .brxe-text li {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
}

/* v-article patch: img selector fix — large article images */
/* Bricks attaches brxe-image to the <img> itself, not a wrapper */
#postreviewtoc img.brxe-image.size-large {
  border-radius: 10px !important;
  display: block !important;
}
/* All non-avatar full-width images in text blocks */
#postreviewtoc .brxe-text img {
  border-radius: 10px !important;
  display: block !important;
}

/* =========================================================
   v48 — Header: remove duplicate bottom bar + topbar gap fix
   Date: 2026-05-20
   - header#brx-header has border-bottom AND #brxe-vriwqe has
     Bricks' own border-bottom → two grey lines 1px apart.
     Fix: kill the header-level one; vriwqe provides the separator.
   - Topbar gaps: rgutwp 24px→16px, rgutll 12px→16px (mockup parity).
   ========================================================= */

/* Remove duplicate bottom bar from sticky header wrapper */
header#brx-header {
  border-bottom: none !important;
}

/* Topbar gap parity with mockup (.util .wrap gap:16px, .left gap:16px) */
#brxe-rgutwp {
  gap: 16px !important;
}
#brxe-rgutll {
  gap: 16px !important;
}

/* =========================================================
   v49 — Topbar typography: Geist Mono + letter-spacing parity
   rgutst + rgutmi inherit Geist (proportional) from Bricks
   _typography settings — force Geist Mono + 0.04em spacing
   on all four topbar text items to match mockup.
   ========================================================= */
#brxe-rgutlv,
#brxe-rgutst,
#brxe-rgutmi,
#brxe-rgutrg {
  font-family: 'Geist Mono', monospace !important;
  letter-spacing: 0.04em !important;
}

/* =========================================================
   v50 — Search box height: compact to match nav rhythm (2026-05-20)
   Shrinks 58px → 38px so it sits proportionately inside the
   44px nav row without feeling oversized.
   ========================================================= */
form.rg-header-search {
  padding: 0 12px !important;
  height: 38px !important;
}
input.rg-search-input {
  height: 26px !important;
  line-height: 26px !important;
}

/* =========================================================
   v51 — Reviews Page: beautiful editorial grid redesign
   Date: 2026-05-20
   Target: /reviews/ page (post ID 436)

   Changes:
   - Convert flex-wrap soup to CSS grid (3 cols → 2 → 1)
   - Vertical card layout: image top, title bottom
   - 16:9 image crop with smooth zoom-on-hover
   - Featured hero: first card spans 2 cols, horizontal layout
   - Subtle card lift + shadow on hover
   - Clean Inter 700 title with purple on hover
   - Newsletter guard: hide The Charger if ever added to page
   ========================================================= */

/* — Safety guard: never show newsletter on reviews page — */
.page-id-436 #brxe-fexgbj {
  display: none !important;
}

/* — Reviews grid: CSS grid, 3 equal columns — */
#brxe-nriqja {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  padding: 0 112px 80px !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Reset Bricks flex output */
  justify-content: unset !important;
  align-items: start !important;
  flex-wrap: unset !important;
  flex-direction: unset !important;
}

/* — Card container: vertical stack — */
#brxe-nriqja .brxe-noxmzu {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.07) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  height: 100% !important;
}

#brxe-nriqja .brxe-noxmzu:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 16px 36px rgba(0,0,0,0.09) !important;
}

/* — Image wrapper: full-width 16:9 — */
#brxe-nriqja .brxe-noxmzu .brxe-eudlra {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}

#brxe-nriqja .brxe-noxmzu .brxe-eudlra img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.38s ease !important;
}

#brxe-nriqja .brxe-noxmzu:hover .brxe-eudlra img {
  transform: scale(1.05) !important;
}

/* — Text block — */
#brxe-nriqja .brxe-noxmzu .brxe-tgmnon {
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px 20px 22px !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: unset !important;
}

/* — Title (Bricks renders it as a button-link) — */
#brxe-nriqja .brxe-noxmzu .brxe-svvtoj.bricks-button {
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e2021 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.2s ease !important;
}

#brxe-nriqja .brxe-noxmzu:hover .brxe-svvtoj.bricks-button {
  color: #003DA5 !important;
}

/* — Featured first card: spans 2 cols, horizontal layout — */
#brxe-nriqja > .brxe-noxmzu:first-child {
  grid-column: span 2 !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

#brxe-nriqja > .brxe-noxmzu:first-child .brxe-eudlra {
  width: 58% !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  min-height: 260px !important;
}

#brxe-nriqja > .brxe-noxmzu:first-child .brxe-tgmnon {
  padding: 28px 28px 32px !important;
  justify-content: center !important;
}

#brxe-nriqja > .brxe-noxmzu:first-child .brxe-svvtoj.bricks-button {
  font-size: 21px !important;
  line-height: 1.4 !important;
}

/* — Responsive: tablet ≤1024px → 2 cols — */
@media (max-width: 1024px) {
  #brxe-nriqja {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 24px 60px !important;
    gap: 20px !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child {
    grid-column: span 2 !important;
    flex-direction: column !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-eudlra {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-tgmnon {
    padding: 16px 20px 22px !important;
    justify-content: flex-start !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-svvtoj.bricks-button {
    font-size: 17px !important;
  }
}

/* — Responsive: mobile ≤767px → 1 col — */
@media (max-width: 767px) {
  #brxe-nriqja {
    grid-template-columns: 1fr !important;
    padding: 0 16px 40px !important;
    gap: 16px !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child {
    grid-column: span 1 !important;
    flex-direction: column !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-eudlra {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-tgmnon {
    padding: 16px 20px 22px !important;
  }

  #brxe-nriqja > .brxe-noxmzu:first-child .brxe-svvtoj.bricks-button {
    font-size: 15px !important;
  }
}

/* =========================================================
   v51b — Reviews: align content width to site's 1340px column
   Date: 2026-05-20
   Problem: grid used padding:112px with no max-width → sprawls
            edge-to-edge on wide monitors, misaligned with nav.
   Fix: constrain hero + banner + reviews block to 1340px
        (identical to #brxe-emfqiu on homepage), swap 112px
        grid padding for the homepage-standard 32px.
   ========================================================= */

/* — Hero section: cap at 1340px, centered — */
#brxe-tldbwt {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* — Affiliate banner: same constraint — */
#brxe-sovdgk {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* — "Explore Reviews" outer block: same constraint — */
#brxe-nrwraw {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* — Grid: swap 112px side padding → 32px (homepage standard) — */
/* v51 set 0 112px 80px; now 0 32px 80px */
#brxe-nriqja {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* — Heading: was margin-left:112px, now aligns to grid padding — */
#brxe-ljwhtp {
  margin-left: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* — Responsive: tablet override (v51 already sets 24px) — */
@media (max-width: 1024px) {
  #brxe-tldbwt,
  #brxe-sovdgk,
  #brxe-nrwraw {
    max-width: 100% !important;
  }
  #brxe-nriqja {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #brxe-ljwhtp {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* — Responsive: mobile — */
@media (max-width: 767px) {
  #brxe-nriqja {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #brxe-ljwhtp {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* v51c — Banner: top margin so it breathes below hero */
#brxe-sovdgk { margin-top: 40px !important; margin-bottom: 8px !important; }

/* v51d — Card title hover: use site token --rg-lime-deep instead of purple */
#brxe-nriqja .brxe-noxmzu:hover .brxe-svvtoj.bricks-button { color: var(--rg-lime-deep) !important; }

/* =========================================================
   v52 — Reviews page: hero redesign + section heading polish
   Date: 2026-05-20

   Hero changes:
   - BG: var(--rg-bg) → blends with page, no more gray box
   - Bottom border with --rg-line separator
   - Padding aligned to 32px (matches grid + nav column)
   - Eyebrow: "STAFF REVIEWS · SINCE 2018" in Geist Mono
   - Heading: Bricolage Grotesque 700 44px (matches homepage sections)
   - Bricks divider hidden, margin resets tidied
   - Subtitle: --rg-ink-3, smaller (14px) to feel secondary

   "Explore Reviews" heading:
   - Same eyebrow treatment ("ALL REVIEWS")
   - Upgraded to Bricolage Grotesque 700 36px

   Featured card accent:
   - Thin lime-deep top border makes the hero card pop
   ========================================================= */

/* — Hero section: lose the gray box, blend with page — */
#brxe-tldbwt {
  background: var(--rg-bg, #FBFBFA) !important;
  border-bottom: 1px solid var(--rg-line, #DEDEDA) !important;
  padding-left:  32px !important;
  padding-right: 32px !important;
  padding-top:   40px !important;
  padding-bottom: 36px !important;
}

/* — Eyebrow label before "Reviews" — */
#brxe-wttfjh::before {
  content: "STAFF REVIEWS \B7  SINCE 2018";
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  color: var(--rg-lime-deep, #002D7A);
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1;
}

/* — Heading: match homepage section heading (Bricolage 700 44px) — */
#brxe-wttfjh {
  font-family: "Bricolage Grotesque", Trap, sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  color: var(--rg-ink, #0E0E10) !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
}

/* — Hide the Bricks hard-coded divider line — */
#brxe-pqlwfl {
  display: none !important;
}

/* — Subtitle: secondary ink, trim the 56px bottom margin — */
#brxe-ieppse {
  color: var(--rg-ink-3, #76767E) !important;
  background: transparent !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* — "Explore Reviews" section header: same eyebrow pattern — */
#brxe-ljwhtp::before {
  content: "ALL REVIEWS";
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  color: var(--rg-lime-deep, #002D7A);
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1;
}

#brxe-ljwhtp {
  font-family: "Bricolage Grotesque", Trap, sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--rg-ink, #0E0E10) !important;
  line-height: 1.1 !important;
  margin-bottom: 32px !important;
  padding-top: 40px !important;
}

/* — Featured hero card: thin lime-deep top accent — */
#brxe-nriqja > .brxe-noxmzu:first-child {
  border-top: 3px solid var(--rg-lime-deep, #002D7A) !important;
  border-radius: 0 0 12px 12px !important;
}

/* — Responsive: tablet — */
@media (max-width: 1024px) {
  #brxe-tldbwt {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #brxe-wttfjh {
    font-size: 36px !important;
  }
  #brxe-ljwhtp {
    font-size: 28px !important;
    padding-left: 0 !important;
  }
}

/* — Responsive: mobile — */
@media (max-width: 767px) {
  #brxe-tldbwt {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  #brxe-wttfjh {
    font-size: 28px !important;
  }
  #brxe-ljwhtp {
    font-size: 24px !important;
    padding-left: 0 !important;
  }
}

/* =========================================================
   v53 — Reviews page: 4 design improvements + nav font fix
   Date: 2026-05-20

   Changes:
   - Banner: resize to inline editorial placement (680px max)
   - Acme font: removed from loop container (was causing FOUF
     on reviews vs homepage nav rendering)
   - Filter chips: review_type FacetWP facet styled as pills
   - Card metadata: post date line below title
   - Load more: "See More" FacetWP button styled on-brand
   ========================================================= */

/* ── 1. BANNER: smaller, less dominant ─────────────────────── */
#brxe-sovdgk {
  padding-top:    20px !important;
  padding-bottom: 16px !important;
  flex-direction: row !important;
  justify-content: center !important;
}
#brxe-guasmx {
  max-width: 680px !important;
  width: 100% !important;
}
#brxe-guasmx img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
}
@media (max-width: 767px) {
  #brxe-sovdgk { padding-left: 16px !important; padding-right: 16px !important; }
  #brxe-guasmx { max-width: 100% !important; }
}

/* ── 2. FONT FIX: remove Acme from loop container ──────────── */
/* Acme was set in Bricks inline CSS for the loop container;
   it was loading on reviews page but not homepage causing
   subtle rendering differences in the black stats bar. */
.page-id-436 .brxe-noxmzu.brxe-container,
.page-id-436 .brxe-noxmzu.brxe-container * {
  font-family: Inter, "Geist", sans-serif !important;
  text-transform: none !important;
}

/* ── 3. FILTER CHIPS: review_type FacetWP facet ─────────────── */
/* Shortcode wrapper */
#brxe-rgflt1 {
  padding: 0 32px 8px !important;
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
@media (max-width: 1024px) { #brxe-rgflt1 { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 767px)  { #brxe-rgflt1 { padding-left: 16px !important; padding-right: 16px !important; } }

/* Facet container: horizontal row */
.facetwp-facet-review_type {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each chip (FacetWP renders .facetwp-checkbox divs) */
.facetwp-facet-review_type .facetwp-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--rg-line, #DEDEDA) !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rg-ink, #0E0E10) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  user-select: none !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}
.facetwp-facet-review_type .facetwp-checkbox:hover {
  border-color: var(--rg-ink, #0E0E10) !important;
  background: rgba(0,0,0,0.04) !important;
}
.facetwp-facet-review_type .facetwp-checkbox.checked {
  background: var(--rg-lime, #003DA5) !important;
  border-color: var(--rg-lime, #003DA5) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Count badge: small, muted */
.facetwp-facet-review_type .facetwp-counter {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--rg-ink-3, #76767E) !important;
  margin-left: 2px !important;
}
.facetwp-facet-review_type .facetwp-checkbox.checked .facetwp-counter {
  color: rgba(255,255,255,.85) !important;
}

/* ── 4. CARD METADATA: post date below title ────────────────── */
/* Applied via class selector since its inside the loop template C:riderguide.comauditbackup/ audit/ build/ logos/

/* =========================================================
   v53 — Reviews page: 4 design improvements + nav font fix
   Date: 2026-05-20
   ========================================================= */

/* ── 1. BANNER: smaller inline editorial placement ───────── */
#brxe-sovdgk {
  padding-top:    20px !important;
  padding-bottom: 16px !important;
  flex-direction: row !important;
  justify-content: center !important;
}
#brxe-guasmx {
  max-width: 680px !important;
  width: 100% !important;
}
#brxe-guasmx img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
}
@media (max-width: 767px) {
  #brxe-sovdgk { padding-left: 16px !important; padding-right: 16px !important; }
  #brxe-guasmx { max-width: 100% !important; }
}

/* ── 2. FONT FIX: remove Acme from loop container ────────── */
.page-id-436 .brxe-noxmzu.brxe-container,
.page-id-436 .brxe-noxmzu.brxe-container * {
  font-family: Inter, "Geist", sans-serif !important;
  text-transform: none !important;
}

/* ── 3. FILTER CHIPS: review_type FacetWP facet ──────────── */
#brxe-rgflt1 {
  padding: 0 32px 8px !important;
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
@media (max-width: 1024px) {
  #brxe-rgflt1 { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
  #brxe-rgflt1 { padding-left: 16px !important; padding-right: 16px !important; }
}

.facetwp-facet-review_type {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.facetwp-facet-review_type .facetwp-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--rg-line, #DEDEDA) !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--rg-ink, #0E0E10) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  user-select: none !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}
.facetwp-facet-review_type .facetwp-checkbox:hover {
  border-color: var(--rg-ink, #0E0E10) !important;
  background: rgba(0,0,0,0.04) !important;
}
.facetwp-facet-review_type .facetwp-checkbox.checked {
  background: var(--rg-lime, #003DA5) !important;
  border-color: var(--rg-lime, #003DA5) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.facetwp-facet-review_type .facetwp-counter {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--rg-ink-3, #76767E) !important;
  margin-left: 2px !important;
}
.facetwp-facet-review_type .facetwp-checkbox.checked .facetwp-counter {
  color: rgba(255,255,255,.85) !important;
}

/* ── 4. CARD METADATA: post date below title ──────────────── */
.brxe-rgmeta {
  font-family: "Geist Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--rg-ink-3, #76767E) !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── 5. LOAD MORE: FacetWP "See More" button ──────────────── */
#brxe-rglm01 {
  text-align: center !important;
  padding: 8px 32px 64px !important;
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  #brxe-rglm01 { padding-bottom: 48px !important; }
}

.facetwp-facet-load_more {
  display: flex !important;
  justify-content: center !important;
}
.facetwp-load-more {
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 36px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--rg-ink, #0E0E10) !important;
  background: transparent !important;
  border: 1.5px solid var(--rg-line, #DEDEDA) !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.facetwp-load-more:hover {
  border-color: var(--rg-ink, #0E0E10) !important;
  background: rgba(0,0,0,0.04) !important;
  color: var(--rg-ink, #0E0E10) !important;
  text-decoration: none !important;
}
.facetwp-loading .facetwp-load-more {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* =========================================================
   v54 — Reviews: remove "Explore Reviews" + tighten spacing
   Date: 2026-05-20

   Changes:
   - Removed ljwhtp element ("Explore Reviews" heading) from DB.
     All #brxe-ljwhtp rules below are now orphaned — overridden
     here to display:none as a safety net.
   - Filter chips (rgflt1) get top padding to replace the space
     the removed heading provided.
   - Banner bottom margin increased slightly so chips don't crowd it.
   - Acme font-family removed from noxmzu element in DB — also
     removed the page-id-436 CSS override (no longer needed, left
     as safe fallback below with lower specificity).
   ========================================================= */

/* Safety net: hide ljwhtp if it ever reappears */
#brxe-ljwhtp { display: none !important; }

/* Filter chips: restore breathing room now heading is gone */
#brxe-rgflt1 {
  padding-top: 28px !important;
}
@media (max-width: 767px) {
  #brxe-rgflt1 { padding-top: 20px !important; }
}

/* Banner: slightly more bottom clearance before chips */
#brxe-sovdgk {
  margin-bottom: 0 !important;
}

/* =========================================================
   v54 — Safety page: hero header + section heading polish
   Date: 2026-05-20

   Mirrors the reviews page v52 treatment exactly:
   - Same bg, border-bottom, padding as reviews header
   - Eyebrow: "SAFETY GUIDES · SINCE 2018" in Geist Mono
   - Heading: Bricolage Grotesque 700 44px
   - Bricks divider hidden
   - Subtitle: --rg-ink-3, 14px, secondary feel
   - First card lime-deep top accent
   ========================================================= */

/* — Hero section: same clean treatment as reviews tldbwt — */
#brxe-sfhdr0 {
  background: var(--rg-bg, #FBFBFA) !important;
  border-bottom: 1px solid var(--rg-line, #DEDEDA) !important;
  padding-left:  32px !important;
  padding-right: 32px !important;
  padding-top:   40px !important;
  padding-bottom: 36px !important;
}

/* — Eyebrow label before "Safety" — */
#brxe-sfh1t0::before {
  content: "SAFETY GUIDES \B7  SINCE 2018";
  display: block;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  color: var(--rg-lime-deep, #002D7A);
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1;
}

/* — Heading: match reviews heading — */
#brxe-sfh1t0 {
  font-family: "Bricolage Grotesque", Trap, sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  color: var(--rg-ink, #0E0E10) !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
}

/* — Hide the Bricks hard-coded divider — */
#brxe-sfdvd0 {
  display: none !important;
}

/* — Subtitle: secondary ink, same as reviews — */
#brxe-sfsub0 {
  color: var(--rg-ink-3, #76767E) !important;
  background: transparent !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* — First card: thin lime-deep top accent (matches reviews) — */
#brxe-sfsec0 > .brxe-sflop0:first-child {
  border-top: 3px solid var(--rg-lime-deep, #002D7A) !important;
  border-radius: 0 0 12px 12px !important;
}

/* — Card title hover: lime-deep — */
#brxe-sfsec0 .brxe-sflop0:hover .brxe-sfttl0.bricks-button {
  color: var(--rg-lime-deep) !important;
}

/* — Responsive: tablet — */
@media (max-width: 1024px) {
  #brxe-sfhdr0 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #brxe-sfh1t0 {
    font-size: 36px !important;
  }
}

/* — Responsive: mobile — */
@media (max-width: 767px) {
  #brxe-sfhdr0 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  #brxe-sfh1t0 {
    font-size: 28px !important;
  }
}

/* =========================================================
   v55 — Fix header height at laptop viewport (≤1439px)
   Date: 2026-05-20

   Root cause: Bricks template still has breakpoint settings at
   @media (max-width: 1439px) that set:
     #brxe-vriwqe  { height: 160px }   (should be 96px)
     #brxe-eahwlq  { height: 64px }    (should be 96px)
     #brxe-htbmvg  { height: 96px }    (fine but includes width:1440px overflow)

   style.css had no height !important override on any of these,
   so at 1280px / 1366px the nav row inflated to 160px, pushing
   the logo and nav links off-center and making the header look
   "different" from the 1440px+ view.

   Fix: clamp all three to 96px from tablet-landscape (745px) up.
   Leave ≤744px mobile free to use its own Bricks 64px value.
   ========================================================= */

@media (min-width: 745px) {
  #brxe-vriwqe {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
  #brxe-htbmvg,
  #brxe-eahwlq {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    align-items: center !important;
  }
}

/* =========================================================
   v55 — Safety page: constrain to site 1340px column
   Date: 2026-05-20

   Problem: sfhdr0 and sfblk0 span edge-to-edge (no max-width),
   so content starts at 32px from edge instead of aligning with
   the 1340px global column used by the nav and homepage.
   Fix: same max-width / auto-margin as reviews tldbwt (v51b).
   ========================================================= */

/* — Hero section: cap at 1340px, centered — */
#brxe-sfhdr0 {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* — Posts block: same constraint — */
#brxe-sfblk0 {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* — Responsive: full-width on tablet/mobile — */
@media (max-width: 1024px) {
  #brxe-sfhdr0,
  #brxe-sfblk0 {
    max-width: 100% !important;
  }
}/* =========================================================
   v56 — Fix RIDERGUIDE wordmark font inconsistency
   Date: 2026-05-20

   Root cause: homepage Google Fonts request includes Bricolage
   Grotesque with the opsz (optical-size) variable axis
   (opsz,wght@12..96,400..800 + opsz=96 display variants).
   Inner pages load a wght-only variant without opsz.
   With font-optical-sizing:auto (browser default), the opsz
   axis is used when available — making RIDERGUIDE render ~5.6px
   wider on the homepage than on every other page, shifting all
   nav links to the right.

   Fix: pin font-optical-sizing:none on wiuzlz so it uses the
   base (non-optical-sized) glyph metrics consistently on all
   pages regardless of which font variant was loaded.
   Also pin a fixed font-size to prevent any theme-style cascade.
   ========================================================= */

body #brx-header #brxe-wiuzlz {
  font-optical-sizing: none !important;
  font-variation-settings: 'opsz' 14, 'wght' 700 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  /* Pin layout width so nav links stay at a fixed x regardless of font variant loaded */
  min-width: 120px !important;
  max-width: 120px !important;
  overflow: visible !important;
}/* =========================================================
   v56 — Safety page: card grid + card styling matching /reviews/
   Date: 2026-05-20

   Exact port of the reviews card CSS (v51–v53) using the
   safety page element IDs:
     nriqja  → sfsec0   (grid wrapper section)
     noxmzu  → sflop0   (loop card container)
     eudlra  → sfimg0   (featured image link)
     tgmnon  → sfbox0   (text block)
     svvtoj  → sfttl0   (title button)
     rgmeta  → sfdat0   (date text)
     rglm01  → sflm00   (load-more shortcode)
   ========================================================= */

/* ── Grid container ─────────────────────────────────────── */
#brxe-sfsec0 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  padding: 0 32px 80px !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: unset !important;
  align-items: start !important;
  flex-wrap: unset !important;
  flex-direction: unset !important;
}

/* ── Card container: vertical stack ─────────────────────── */
#brxe-sfsec0 .brxe-sflop0 {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.07) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  height: 100% !important;
}

#brxe-sfsec0 .brxe-sflop0:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 16px 36px rgba(0,0,0,0.09) !important;
}

/* ── Image: full-width 16:9 ─────────────────────────────── */
#brxe-sfsec0 .brxe-sflop0 .brxe-sfimg0 {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}

#brxe-sfsec0 .brxe-sflop0 .brxe-sfimg0 img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.38s ease !important;
}

#brxe-sfsec0 .brxe-sflop0:hover .brxe-sfimg0 img {
  transform: scale(1.05) !important;
}

/* ── Text block ─────────────────────────────────────────── */
#brxe-sfsec0 .brxe-sflop0 .brxe-sfbox0 {
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px 20px 22px !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: unset !important;
}

/* ── Title link ─────────────────────────────────────────── */
#brxe-sfsec0 .brxe-sflop0 .brxe-sfttl0.bricks-button {
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e2021 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.2s ease !important;
}

#brxe-sfsec0 .brxe-sflop0:hover .brxe-sfttl0.bricks-button {
  color: var(--rg-lime-deep, #002D7A) !important;
}

/* ── Date text ──────────────────────────────────────────── */
.brxe-sfdat0 {
  font-family: "Geist Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--rg-ink-3, #76767E) !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Featured first card: spans 2 cols, landscape ───────── */
#brxe-sfsec0 > .brxe-sflop0:first-child {
  grid-column: span 2 !important;
  flex-direction: row !important;
  align-items: stretch !important;
  border-top: 3px solid var(--rg-lime-deep, #002D7A) !important;
  border-radius: 12px !important;
}

#brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfimg0 {
  width: 58% !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  min-height: 260px !important;
}

#brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfbox0 {
  padding: 28px 28px 32px !important;
  justify-content: center !important;
}

#brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfttl0.bricks-button {
  font-size: 21px !important;
  line-height: 1.4 !important;
}

/* ── Font normalise (mirrors page-id-436 rule) ───────────── */
.page-id-41356 .brxe-sflop0.brxe-container,
.page-id-41356 .brxe-sflop0.brxe-container * {
  font-family: Inter, "Geist", sans-serif !important;
  text-transform: none !important;
}
/* Restore date override after the wildcard above */
.page-id-41356 .brxe-sfdat0 {
  font-family: "Geist Mono", monospace !important;
  text-transform: uppercase !important;
}

/* ── Load-more button ───────────────────────────────────── */
#brxe-sflm00 {
  text-align: center !important;
  padding: 8px 32px 64px !important;
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  #brxe-sflm00 { padding-bottom: 48px !important; }
}

/* ── Responsive: tablet ≤1024px → 2 cols ───────────────── */
@media (max-width: 1024px) {
  #brxe-sfsec0 {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 24px 60px !important;
    gap: 20px !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child {
    grid-column: span 2 !important;
    flex-direction: column !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfimg0 {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfbox0 {
    padding: 16px 20px 22px !important;
    justify-content: flex-start !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfttl0.bricks-button {
    font-size: 17px !important;
  }
}

/* ── Responsive: mobile ≤767px → 1 col ─────────────────── */
@media (max-width: 767px) {
  #brxe-sfsec0 {
    grid-template-columns: 1fr !important;
    padding: 0 16px 40px !important;
    gap: 16px !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child {
    grid-column: span 1 !important;
    flex-direction: column !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfimg0 {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfbox0 {
    padding: 16px 20px 22px !important;
  }
  #brxe-sfsec0 > .brxe-sflop0:first-child .brxe-sfttl0.bricks-button {
    font-size: 15px !important;
  }
}
/* === BEGIN /best-rated/ revamp (2026-05-20) === */
.rg-best-rated { font-family: 'Geist', system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink); }
.rg-best-rated * { box-sizing: border-box; }
.rg-best-rated a { color: inherit; text-decoration: none; }
.rg-best-rated .rgbr-wrap { max-width: 1340px; margin: 0 auto; padding: 0 28px; }

/* === HERO === */
.rg-best-rated .rgbr-hero { padding: 56px 0 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.rg-best-rated .rgbr-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: stretch; }
.rg-best-rated .rgbr-crumb { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--ink); color: var(--lime); border-radius: 100px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.04em; }
.rg-best-rated .rgbr-crumb::before { content: "\2605"; }
.rg-best-rated .rgbr-hero-left h1 { font-family: 'Bricolage Grotesque'; font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(44px, 5.4vw, 78px); line-height: 0.96; letter-spacing: -0.03em; margin: 18px 0 16px; color: var(--ink); }
.rg-best-rated .rgbr-hero-left h1 .rgbr-u { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.rg-best-rated .rgbr-lede { font-size: 17px; color: var(--ink-2); line-height: 1.55; max-width: 520px; }
.rg-best-rated .rgbr-jumps { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.rg-best-rated .rgbr-jumphead { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.rg-best-rated .rgbr-jump-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-best-rated .rgbr-jump-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: all .15s; }
.rg-best-rated .rgbr-jump-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }
.rg-best-rated .rgbr-jump-chip:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.rg-best-rated .rgbr-jump-chip:hover::before { background: var(--lime); }

/* Editor's Pick spotlight card */
.rg-best-rated .rgbr-pick-card { background: var(--ink); color: var(--bg); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; text-decoration: none !important; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.rg-best-rated .rgbr-pick-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(14,14,16,0.45), 0 0 0 1px rgba(0,61,165,0.35); }
.rg-best-rated .rgbr-pick-card:hover .rgbr-pick-btn { background: var(--bg); }
.rg-best-rated .rgbr-pick-card::before { content: ""; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(0,61,165,0.18), transparent 60%); filter: blur(40px); pointer-events: none; }
.rg-best-rated .rgbr-pick-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 2; gap: 12px; flex-wrap: wrap; }
.rg-best-rated .rgbr-ribbon { background: var(--lime); color: var(--ink); font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.rg-best-rated .rgbr-why { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.rg-best-rated .rgbr-pick-hero { position: relative; z-index: 2; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); }
.rg-best-rated .rgbr-pick-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-best-rated .rgbr-badge-stack { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rg-best-rated .rgbr-badge-stack span { background: rgba(14,14,16,0.78); backdrop-filter: blur(8px); color: var(--lime); padding: 4px 9px; border-radius: 100px; font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rg-best-rated .rgbr-pick-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.rg-best-rated .rgbr-pick-body h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; color: var(--bg); }
.rg-best-rated .rgbr-sub { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--ink-4); letter-spacing: 0.04em; }
.rg-best-rated .rgbr-pick-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 2; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.rg-best-rated .rgbr-pick-specs .rgbr-cell { display: flex; flex-direction: column; gap: 2px; }
.rg-best-rated .rgbr-pick-specs .rgbr-v { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.01em; color: var(--bg); }
.rg-best-rated .rgbr-pick-specs .rgbr-v small { font-weight: 500; font-size: 11px; color: var(--ink-4); margin-left: 2px; }
.rg-best-rated .rgbr-pick-specs .rgbr-l { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; }
.rg-best-rated .rgbr-pick-specs .rgbr-score .rgbr-v { color: var(--lime); font-size: 26px; }
.rg-best-rated .rgbr-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 2; flex-wrap: wrap; }
.rg-best-rated .rgbr-stars { color: var(--lime); font-size: 14px; letter-spacing: 0.05em; }
.rg-best-rated .rgbr-stars small { color: var(--ink-4); margin-left: 6px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.04em; }
.rg-best-rated .rgbr-pick-btn { background: var(--lime); color: var(--ink); padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.rg-best-rated .rgbr-pick-btn:hover { background: var(--bg); color: var(--ink); }

/* Methodology strip */
.rg-best-rated .rgbr-cred-strip { background: var(--ink); color: var(--bg); padding: 64px 0; border-top: 8px solid var(--lime); }
.rg-best-rated .rgbr-cred-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.rg-best-rated .rgbr-eyebrow { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--lime); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.rg-best-rated .rgbr-cred-head h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; line-height: 1.05; max-width: 800px; color: var(--bg); }
.rg-best-rated .rgbr-cred-head .rgbr-right { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-4); letter-spacing: 0.04em; max-width: 320px; line-height: 1.5; }
.rg-best-rated .rgbr-cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.rg-best-rated .rgbr-cred-item { padding: 8px 0; }
.rg-best-rated .rgbr-cred-item .rgbr-v { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.9; letter-spacing: -0.03em; color: var(--lime); }
.rg-best-rated .rgbr-cred-item .rgbr-l { font-family: 'Geist Mono', monospace; font-size: 11px; color: rgba(251,251,250,0.7); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 10px; max-width: 240px; line-height: 1.4; }
.rg-best-rated .rgbr-cred-item .rgbr-l strong { color: var(--bg); font-weight: 600; }

/* Category grid */
.rg-best-rated .rgbr-picks-section { padding: 72px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.rg-best-rated .rgbr-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.rg-best-rated .rgbr-shleft .rgbr-shey { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--lime-deep); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.rg-best-rated .rgbr-section-head h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.rg-best-rated .rgbr-section-head h2 em { font-style: italic; color: var(--lime-deep); }
.rg-best-rated .rgbr-meta { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.rg-best-rated .rgbr-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rg-best-rated .rgbr-cat-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .15s; text-decoration: none !important; color: inherit; position: relative; }
.rg-best-rated .rgbr-cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -12px rgba(14,14,16,0.18); border-color: var(--ink); }
.rg-best-rated .rgbr-c-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); }
.rg-best-rated .rgbr-c-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.rg-best-rated .rgbr-cat-card:hover .rgbr-c-img img { transform: scale(1.06); }
.rg-best-rated .rgbr-c-tag { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(14,14,16,0.85); backdrop-filter: blur(8px); color: var(--lime); font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 100px; }
.rg-best-rated .rgbr-c-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.rg-best-rated .rgbr-c-flag { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--bg); color: var(--ink); font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.rg-best-rated .rgbr-c-flag.rgbr-hot { background: var(--lime); color: var(--ink); }
.rg-best-rated .rgbr-c-flag.rgbr-new { background: var(--ink); color: var(--lime); }
.rg-best-rated .rgbr-c-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.rg-best-rated .rgbr-c-eyebrow { font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--lime-deep); letter-spacing: 0.1em; text-transform: uppercase; }
.rg-best-rated .rgbr-c-body h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.rg-best-rated .rgbr-c-pick { font-size: 12.5px; color: var(--ink-2); padding: 8px 12px; background: var(--bg-2); border-radius: 8px; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--lime); }
.rg-best-rated .rgbr-c-pick .rgbr-label { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
.rg-best-rated .rgbr-c-pick .rgbr-name { font-weight: 600; color: var(--ink); }
.rg-best-rated .rgbr-c-mentions { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-best-rated .rgbr-c-mentions span { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-2); padding: 4px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 100px; letter-spacing: 0.01em; }
.rg-best-rated .rgbr-c-mentions span.rgbr-more { color: var(--ink-3); border-style: dashed; }
.rg-best-rated .rgbr-c-desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.rg-best-rated .rgbr-c-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); gap: 8px; flex-wrap: wrap; }
.rg-best-rated .rgbr-c-count strong { color: var(--ink); font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 13px; }
.rg-best-rated .rgbr-c-read { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; padding: 6px 12px; background: var(--lime); border-radius: 6px; transition: all .2s; }
.rg-best-rated .rgbr-c-read::after { content: "\2192"; transition: transform .2s; }
.rg-best-rated .rgbr-cat-card:hover .rgbr-c-read { background: var(--ink); color: var(--lime); }
.rg-best-rated .rgbr-cat-card:hover .rgbr-c-read::after { transform: translateX(3px); }

/* CTA filler card */
.rg-best-rated .rgbr-cta-card { grid-column: span 2; background: var(--ink); color: var(--bg); border-color: var(--ink); overflow: hidden; position: relative; }
.rg-best-rated .rgbr-cta-card::before { content: ""; position: absolute; top: -40%; right: -10%; width: 50%; height: 200%; background: radial-gradient(circle, rgba(0,61,165,0.16), transparent 60%); filter: blur(40px); pointer-events: none; }
.rg-best-rated .rgbr-cta-card:hover { border-color: var(--lime); transform: translateY(-4px); }
.rg-best-rated .rgbr-cta-inner { padding: 36px 40px; display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: center; position: relative; z-index: 2; }
.rg-best-rated .rgbr-cta-eyebrow { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--lime); letter-spacing: 0.1em; text-transform: uppercase; }
.rg-best-rated .rgbr-cta-card h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.02em; color: var(--bg) !important; max-width: 480px; margin: 0; }
.rg-best-rated .rgbr-cta-card h3 em { font-style: italic; color: var(--lime); font-weight: 600; }
.rg-best-rated .rgbr-cta-card p { font-size: 14.5px; color: var(--ink-4); max-width: 440px; line-height: 1.5; }
.rg-best-rated .rgbr-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.rg-best-rated .rgbr-cta-stat { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; }
.rg-best-rated .rgbr-cta-stat strong { color: var(--lime); font-family: 'Bricolage Grotesque'; font-size: 14px; font-weight: 700; margin-right: 4px; }
.rg-best-rated .rgbr-cta-go { background: var(--lime); color: var(--ink); padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 13.5px; transition: all .2s; margin-left: auto; }
.rg-best-rated .rgbr-cta-card:hover .rgbr-cta-go { background: var(--bg); }

/* Video duo */
.rg-best-rated .rgbr-video-strip { padding: 72px 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.rg-best-rated .rgbr-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rg-best-rated .rgbr-video-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.rg-best-rated .rgbr-v-frame { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.rg-best-rated .rgbr-v-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rg-best-rated .rgbr-v-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.rg-best-rated .rgbr-v-eyebrow { font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--lime-deep); letter-spacing: 0.1em; text-transform: uppercase; }
.rg-best-rated .rgbr-video-card h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.rg-best-rated .rgbr-v-meta { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; display: flex; gap: 12px; }

/* Archive strip */
.rg-best-rated .rgbr-archive { padding: 48px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.rg-best-rated .rgbr-archive-inner { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.rg-best-rated .rgbr-archive-left .rgbr-shey { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.rg-best-rated .rgbr-archive-left h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); margin: 0; }
.rg-best-rated .rgbr-archive-left p { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }
.rg-best-rated .rgbr-archive-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
.rg-best-rated .rgbr-archive-list a { font-size: 14px; padding: 8px 0; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.rg-best-rated .rgbr-archive-list a:hover { color: var(--ink); }
.rg-best-rated .rgbr-archive-list a::after { content: "\2197"; color: var(--ink-3); font-family: 'Geist Mono', monospace; font-size: 11px; }
.rg-best-rated .rgbr-archive-list a:hover::after { color: var(--lime-deep); }

/* Responsive */
@media (max-width: 1100px) {
  .rg-best-rated .rgbr-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .rg-best-rated .rgbr-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .rg-best-rated .rgbr-cta-card { grid-column: span 2; }
  .rg-best-rated .rgbr-cred-grid { grid-template-columns: 1fr 1fr; }
  .rg-best-rated .rgbr-archive-inner { grid-template-columns: 1fr; gap: 16px; }
  .rg-best-rated .rgbr-archive-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .rg-best-rated .rgbr-video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .rg-best-rated .rgbr-wrap { padding: 0 18px; }
  .rg-best-rated .rgbr-cat-grid { grid-template-columns: 1fr; }
  .rg-best-rated .rgbr-feature, .rg-best-rated .rgbr-cta-card { grid-column: span 1; }
  .rg-best-rated .rgbr-cta-go { margin-left: 0; margin-top: 8px; }
  .rg-best-rated .rgbr-cred-grid { grid-template-columns: 1fr 1fr; }
  .rg-best-rated .rgbr-archive-list { grid-template-columns: 1fr; }
  .rg-best-rated .rgbr-pick-specs { grid-template-columns: repeat(2, 1fr); }
  .rg-best-rated .rgbr-hero-left h1 { font-size: clamp(36px, 9vw, 56px); }
}
/* === END /best-rated/ revamp === */

/* === rgbestrated-card-click: make Best Rated Guides loop cards fully clickable === */
.brxe-uzkkqa { position: relative; cursor: pointer; }
.brxe-uzkkqa .brxe-ojmrlu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}
.brxe-uzkkqa a:not(.brxe-ojmrlu) { position: relative; z-index: 5; }
/* === END rgbestrated-card-click === */

/* Recent best-rated article cards */
.rg-best-rated .rgbr-recent-section { padding: 64px 0; border-top: 1px solid var(--line); background: var(--bg); }
.rg-best-rated .rgbr-recent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.rg-best-rated .rgbr-recent-head h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin: 0; }
.rg-best-rated .rgbr-recent-all { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 6px; transition: background .2s, color .2s; white-space: nowrap; }
.rg-best-rated .rgbr-recent-all:hover { background: var(--ink); color: var(--bg); }
.rg-best-rated .rgbr-recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rg-best-rated .rgbr-rc-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none !important; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .15s; }
.rg-best-rated .rgbr-rc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -8px rgba(14,14,16,0.16); border-color: var(--ink); }
.rg-best-rated .rgbr-rc-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.rg-best-rated .rgbr-rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rg-best-rated .rgbr-rc-card:hover .rgbr-rc-img img { transform: scale(1.05); }
.rg-best-rated .rgbr-rc-nothumb { width: 100%; height: 100%; background: var(--bg-2); }
.rg-best-rated .rgbr-rc-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rg-best-rated .rgbr-rc-date { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.rg-best-rated .rgbr-rc-body h4 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
@media (max-width: 1100px) { .rg-best-rated .rgbr-recent-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rg-best-rated .rgbr-recent-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .rg-best-rated .rgbr-recent-grid { grid-template-columns: 1fr; } }

/* ============================================================
   /about/ page styles  — rg-about namespace
   ============================================================ */
.rg-about { font-family: 'Geist', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--ink); }
.rga-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* HERO */
.rga-hero { padding: 80px 0 72px; background: var(--bg); border-bottom: 1px solid var(--line); }
.rga-eyebrow { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-deep); margin-bottom: 20px; }
.rga-hero h1 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 24px; max-width: 860px; }
.rga-u { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.rga-lede { font-size: 18px; color: #555; line-height: 1.6; max-width: 680px; margin: 0; }

/* STATS BAR */
.rga-stats { background: var(--ink); padding: 48px 0; }
.rga-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.rga-stat { padding: 0 40px; border-right: 1px solid rgba(255,255,255,0.12); }
.rga-stat:first-child { padding-left: 0; }
.rga-stat:last-child { border-right: none; }
.rga-stat-v { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--lime); }
.rga-stat-l { font-family: 'Geist Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; }

/* SECTIONS */
.rga-section { padding: 80px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.rga-section--alt { background: #f7f7f6; }
.rga-label-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-deep); margin-bottom: 20px; }
.rga-label-tag::before { content: ""; display: block; width: 18px; height: 2px; background: var(--lime); border-radius: 2px; }

/* TWO-COL LAYOUT */
.rga-two-col { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; }
.rga-col-label { position: sticky; top: 80px; }
.rga-col-body h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0 0 20px; }
.rga-col-body p { color: #555; line-height: 1.7; margin: 0 0 16px; font-size: 16px; }
.rga-col-body p:last-child { margin-bottom: 0; }

/* SECTION HEADER (full-width) */
.rga-section-hd { max-width: 680px; margin-bottom: 56px; }
.rga-section-hd h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0 0 16px; }
.rga-section-sub { font-size: 17px; color: #666; line-height: 1.6; margin: 0; }

/* TEST METHODOLOGY GRID */
.rga-test-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rga-test-card { background: #f7f7f6; padding: 32px 36px; transition: background .2s; }
.rga-test-card:hover { background: var(--bg); }
.rga-test-num { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 700; color: var(--lime-deep); letter-spacing: 0.1em; margin-bottom: 12px; }
.rga-test-card h3 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; }
.rga-test-card p { font-size: 14.5px; color: #666; line-height: 1.6; margin: 0; }
.rga-test-card p em { color: var(--ink); font-style: italic; }

/* SCORING LIST */
.rga-score-list { margin-top: 28px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rga-score-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--bg); transition: background .15s; }
.rga-score-item:last-child { border-bottom: none; }
.rga-score-item:hover { background: #f7f7f6; }
.rga-score-label { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 15px; color: var(--ink); padding-top: 1px; }
.rga-score-desc { font-size: 14px; color: #666; line-height: 1.55; }

/* CTA STRIP */
.rga-cta { background: var(--ink); padding: 72px 0; }
.rga-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.rga-cta h2 { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.02em; line-height: 1.05; color: var(--bg); margin: 8px 0 0; }
.rga-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.rga-btn { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 8px; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; transition: all .2s; }
.rga-btn--primary { background: var(--lime); color: var(--ink); }
.rga-btn--primary:hover { background: #d4ff6b; }
.rga-btn--ghost { background: transparent; color: var(--bg); border: 1px solid rgba(255,255,255,0.3); }
.rga-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .rga-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .rga-stat { border-right: none; padding: 0; }
  .rga-two-col { grid-template-columns: 1fr; gap: 24px; }
  .rga-col-label { position: static; }
  .rga-test-grid { grid-template-columns: 1fr; }
  .rga-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .rga-wrap { padding: 0 20px; }
  .rga-hero { padding: 48px 0; }
  .rga-section { padding: 56px 0; }
  .rga-stats { padding: 40px 0; }
  .rga-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rga-score-item { grid-template-columns: 1fr; gap: 4px; }
  .rga-cta { padding: 56px 0; }
}

/* =========================================================
   mobile-fix-1 — Comprehensive mobile responsive fixes
   Date: 2026-05-21
   Scope: homepage — fixes overflow + layout on 390-900px
   ========================================================= */

/* ── 1. Hard-clip horizontal overflow ── */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ── 2. Topbar — clip nowrap content instead of letting it bleed ── */
@media (max-width: 900px) {
  #brxe-rgutil {
    overflow: hidden !important;
  }
  #brxe-rgutwp {
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  #brxe-rgutll {
    overflow: hidden !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  #brxe-rgutll > * {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}

/* ── 3. Header — collapse v18 grid back to flex, hide nav ── */
@media (max-width: 900px) {
  /* Override the v18 3-col centering grid — too complex at mobile */
  #brxe-vriwqe {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Show left side full-width, hide right nav */
  #brxe-htbmvg {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #brxe-eahwlq,
  #brxe-ksqflv {
    display: none !important;
  }
}

/* ── 4. Cred strip — remove full-bleed at mobile ── */
@media (max-width: 900px) {
  #brxe-rgcred {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
  }
}

/* ── 5. Compare table head — stack on mobile ── */
@media (max-width: 768px) {
  #brxe-rgcomphd {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
  }
  #brxe-rgcompmta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    text-align: left !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }
}

/* ── 6. Newsletter — single-column stack at ≤700px ── */
@media (max-width: 700px) {
  #brxe-fexgbj {
    padding: 40px 20px 36px !important;
    margin: 32px 16px !important;
    border-radius: 14px !important;
  }
  #brxe-dhkwme {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 24px !important;
  }
  #brxe-dhkwme::after {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: clamp(24px, 7vw, 32px) !important;
  }
  #brxe-azhonh {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 100% !important;
  }
  #brxe-tbgrxy {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

/* ── 7. Footer — single-column at ≤600px ── */
@media (max-width: 600px) {
  #brxe-pgzoew {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 32px !important;
    padding: 40px 20px 32px !important;
  }
  #brxe-pgzoew > #brxe-txqnmn {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #brxe-pgzoew > #brxe-kpprqg {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    align-self: start !important;
  }
  #brxe-pgzoew > #brxe-lfayrm {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  #brxe-pgzoew > #brxe-lfayrm > #brxe-zjwoot,
  #brxe-zjwoot {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #brxe-cveixz {
    padding: 20px !important;
  }
}

/* ── 8. Loop cards — 1-col at 480px (already partially set, reinforce) ── */
@media (max-width: 480px) {
  #brxe-enixjn > .brxe-block,
  #brxe-yomiht > .brxe-block,
  #brxe-aommtq > .brxe-block,
  #brxe-jofdrw > .brxe-block {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── 9. Hero trust stats — 2-col at mobile ── */
@media (max-width: 600px) {
  #brxe-rgherotrust {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
}

/* =========================================================
   mobile-fix-2 — Compare table + cred strip fixes
   Date: 2026-05-21
   ========================================================= */

/* ── 1. Compare table header: stack "heading" and "View all" vertically ── */
@media (max-width: 900px) {
  #brxe-rgcomphd {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #brxe-rgcomphdl {
    width: 100% !important;
    max-width: 100% !important;
  }
  #brxe-rgcompmta {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }
}

/* ── 2. Compare table: hide Speed+Weight on mobile (show Image, Product, Price, Range) ── */
@media (max-width: 768px) {
  /* New 6-col layout — hide Speed + Weight to fit 4-col grid in viewport */
  .brxe-rgrwspd,
  #brxe-rgch5,
  .brxe-rgrwpwr,
  #brxe-rgch6 {
    display: none !important;
  }
  /* Reduce image column */
  .brxe-rgrwimg { width: 80px !important; min-width: 80px !important; max-width: 80px !important; }
  .brxe-rgrwimg img { width: 80px !important; height: 60px !important; object-fit: cover !important; }
  #brxe-rgch2 { width: 80px !important; }
  /* Make the whole compare table horizontally scrollable as fallback */
  #brxe-rgcomp {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 3. Cred strip: 4-col → 2×2 grid at mobile ── */
@media (max-width: 700px) {
  #brxe-rgcred {
    overflow: hidden !important;
  }
  #brxe-rgcrg1 {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
  }
  /* Each stat cell: padding + alignment */
  #brxe-rgcri1,
  #brxe-rgcri2,
  #brxe-rgcri3,
  #brxe-rgcri4 {
    padding: 0 !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  /* Reduce huge number font sizes on mobile */
  #brxe-rgcrv1,
  #brxe-rgcrv2,
  #brxe-rgcrv3,
  #brxe-rgcrv4 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1 !important;
  }
}

/* ── 4. Footer: ensure copyright is always BELOW nav links ── */
@media (max-width: 600px) {
  #brxe-pgzoew {
    /* Clear any grid that might accidentally include cveixz */
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 40px 20px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #brxe-pgzoew > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Make nav columns single-col */
  #brxe-zjwoot {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  #brxe-pgzoew > #brxe-lfayrm > #brxe-zjwoot {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  /* Override body overflow-x to let compare table scroll if needed */
  html, body {
    overflow-x: hidden !important;
  }
}
/* mobile-fix-3 — 2026-05-21
   Targets:
   1. #brxe-rgtriplet  — 3-col grid (608px) is the remaining body-overflow source; stack vertically
   2. .brxe-rgcomprow  — compact data-row grid so compare table fits without horizontal scroll
*/

/* ============================================================
   TRIPLET — 3 category sections side by side → single column
   ============================================================ */
@media (max-width: 768px) {
  #brxe-rgtriplet {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Each section (qjbyiw / nboaso / edlurg) takes full row */
  #brxe-rgtriplet > * {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   COMPARE TABLE ROWS — compact 4-col grid to fit viewport
   Image(60px) | Product(1fr) | Price(72px) | Range(72px)
   Speed + Weight hidden on mobile via media query above
   ============================================================ */
@media (max-width: 768px) {
  .brxe-rgcomprow {
    /* Image | Product | Price | Range — Speed+Weight hidden */
    grid-template-columns: 60px minmax(0, 1fr) 72px 72px !important;
    gap: 4px !important;
  }
  /* Image: grid track controls width — reset any inline sizing */
  .brxe-rgrwimg {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Name column: ellipsis so long names don't push the grid */
  .brxe-rgrwnm {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Price / range columns: tighter font so numbers fit in 72px */
  .brxe-rgrwpri, .brxe-rgrwrng {
    font-size: 12px !important;
  }
}
/* mobile-fix-4 — 2026-05-21
   Root cause: #brxe-pgzoew and #brx-footer have explicit pixel heights from the
   desktop 3-column grid layout (398px and 577px respectively). fix-2 changed
   pgzoew to flex-column so content is now ~775px, but the explicit height
   remains → content overflows visually into #brxe-cveixz (copyright strip).
   Fix: allow both containers to auto-size on mobile.
*/
@media (max-width: 900px) {
  #brxe-pgzoew {
    height: auto !important;
    min-height: 0 !important;
  }
  #brx-footer {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* v55 — Best Rated + Guides headings: 44px Bricolage Grotesque, semantic h1/h2 (2026-05-27) */
.rgbr-shleft h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--rg-ink, #0E0E10) !important;
  margin: 0 !important;
}

#brxe-dkwary,
#brxe-cesppf {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--rg-ink, #0E0E10) !important;
  margin: 0 0 16px !important;
}

/* v56 — suppress hero image banner on 4 legacy review posts (2026-05-27)
   These posts use Bricks' default post.php which sets featured image as
   background on .bricks-post-header.has-image. Remove image, overlay, white
   text, and min-height so the title shows clean like the Juiced Scrambler. */
body.postid-41256 .bricks-post-header.has-image,
body.postid-41351 .bricks-post-header.has-image,
body.postid-41364 .bricks-post-header.has-image,
body.postid-41429 .bricks-post-header.has-image {
  background-image: none !important;
  color: inherit !important;
  min-height: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.postid-41256 .bricks-post-header.has-image::before,
body.postid-41351 .bricks-post-header.has-image::before,
body.postid-41364 .bricks-post-header.has-image::before,
body.postid-41429 .bricks-post-header.has-image::before {
  display: none !important;
}

/* v57 — title + meta typography for 4 legacy review posts (2026-05-27)
   Match site design: Bricolage Grotesque heading, Geist meta, dark ink color. */
body.postid-41256 .bricks-post-header .brxe-post-title,
body.postid-41351 .bricks-post-header .brxe-post-title,
body.postid-41364 .bricks-post-header .brxe-post-title,
body.postid-41429 .bricks-post-header .brxe-post-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #0E0E10 !important;
  margin-bottom: 16px !important;
}
body.postid-41256 .bricks-post-header .brxe-post-meta,
body.postid-41351 .bricks-post-header .brxe-post-meta,
body.postid-41364 .bricks-post-header .brxe-post-meta,
body.postid-41429 .bricks-post-header .brxe-post-meta,
body.postid-42561 .bricks-post-header .brxe-post-meta {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #69686B !important;
  letter-spacing: 0 !important;
}
body.postid-41256 .bricks-post-header .brxe-container,
body.postid-41351 .bricks-post-header .brxe-container,
body.postid-41364 .bricks-post-header .brxe-container,
body.postid-41429 .bricks-post-header .brxe-container,
body.postid-42561 .bricks-post-header .brxe-container {
  max-width: 860px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #e8e8ea !important;
  margin-bottom: 40px !important;
}

/* v58 — collapse .bricks-post-header min-height on 4 legacy posts (2026-05-27)
   PHP override removed .has-image so v56 no longer matches; target base class. */
body.postid-41256 .bricks-post-header,
body.postid-41351 .bricks-post-header,
body.postid-41364 .bricks-post-header,
body.postid-41429 .bricks-post-header,
body.postid-42561 .bricks-post-header {
  min-height: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Post 42561 — rabbit-dropkicks-man-scooter
   TL;DR + gear grid + dark outro (2026-05-27)
   ============================================================ */
body.postid-42561 article p,
body.postid-42561 article h2,
body.postid-42561 article .rg-rabbit-tldr,
body.postid-42561 article .rg-rabbit-outro,
body.postid-42561 article .rg-gear-grid {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body.postid-42561 article p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #1e2021;
}
body.postid-42561 article h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 48px auto 16px;
  color: #1e2021;
}

/* TL;DR aside */
body.postid-42561 .rg-rabbit-tldr {
  background: #f4f4f1;
  border-left: 4px solid #003DA5;
  padding: 22px 26px;
  margin: 0 auto 32px;
  border-radius: 8px;
}
body.postid-42561 .rg-rabbit-tldr .rg-eyebrow {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #69686B;
  margin-bottom: 8px;
}
body.postid-42561 .rg-rabbit-tldr p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #1e2021;
  max-width: none;
}

/* Gear grid */
body.postid-42561 .rg-gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px auto 36px;
}
body.postid-42561 .rg-gear-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1px solid #e6e6e3;
  border-radius: 12px;
  padding: 20px 20px 18px;
  text-decoration: none !important;
  color: #1e2021;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  min-height: 160px;
}
body.postid-42561 .rg-gear-card:hover {
  border-color: #1e2021;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
body.postid-42561 .rg-gear-cat {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #69686B;
}
body.postid-42561 .rg-gear-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: #1e2021;
}
body.postid-42561 .rg-gear-cta {
  display: inline-block;
  align-self: flex-start;
  background: #003DA5;
  color: #fff;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Dark outro callout */
body.postid-42561 .rg-rabbit-outro {
  background: #1e2021;
  color: #ffffff;
  padding: 22px 26px;
  border-radius: 10px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  margin: 40px auto 24px;
}
body.postid-42561 .rg-rabbit-outro strong {
  color: #4D8DFF;
}

/* Reddit embed — center & cap width to match flow */
body.postid-42561 .reddit-embed-bq {
  max-width: 760px;
  margin: 24px auto !important;
}

/* Mobile tightening */
@media (max-width: 600px) {
  body.postid-42561 article h2 { font-size: 24px; margin-top: 36px; }
  body.postid-42561 article p,
  body.postid-42561 .rg-rabbit-tldr p,
  body.postid-42561 .rg-rabbit-outro { font-size: 16px; }
  body.postid-42561 .rg-gear-card { min-height: 140px; padding: 16px; }
}

/* Post 42561 — black headline (2026-05-27) */
body.postid-42561 .bricks-post-header .brxe-post-title,
body.postid-42561 h1.brxe-post-title {
  color: #1e2021 !important;
}

/* Post 42561 — suppress featured image on the article page only.
   Featured image is still used for the homepage card and social/OG image. */
body.postid-42561 .bricks-post-header {
  background-image: none !important;
}
body.postid-42561 .bricks-post-header.has-image::before,
body.postid-42561 .bricks-post-header > .bricks-post-image {
  display: none !important;
}

/* Post 42561 — mobile fixes (2026-05-27)
   - .brxe-container in post header was rendering at 860px on mobile (Bricks default
     container width); force it to fit the viewport.
   - Drop H1 font-size on mobile so the title fits two lines comfortably. */
body.postid-42561 .bricks-post-header .brxe-container {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (max-width: 600px) {
  body.postid-42561 .bricks-post-header .brxe-post-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}

/* ============================================================
   Mobile header fixes (2026-05-27)
   - Hide RIDERGUIDE wordmark; RG square is the brand mark on mobile
   - Compact burger to 44x44, no chrome
   - Hide right-edge search container (search is inside the popup)
   ============================================================ */
@media (max-width: 991px) {
  #brxe-wiuzlz { display: none !important; }
  #brxe-eahwlq { display: none !important; }

  #brxe-hbpwjs {
    width: auto !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
  }

  #brxe-rgburgerbtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    flex: 0 0 44px !important;
    cursor: pointer !important;
  }
  #brxe-rgburgerbtn:hover,
  #brxe-rgburgerbtn:focus { background: rgba(0,0,0,0.06) !important; }
  #brxe-rgburgerbtn .brxe-icon,
  #brxe-rgburgerbtn i { font-size: 22px !important; color: #1e2021 !important; }

  /* Header row: tighten gutters and lock vertical centering */
  #brxe-vriwqe { padding: 8px 0 !important; }
  #brxe-htbmvg { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Burger button — make the icon fill the 44x44 tap area so taps anywhere on
   the button hit the icon (the icon carries the Bricks click-interaction). */
@media (max-width: 991px) {
  #brxe-rgburgerbtn { position: relative !important; }
  #brxe-rgburgerbtn .brxe-icon,
  #brxe-rgburgerbtn i {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
  }
}

/* ============================================================
   Mobile header v2 (2026-05-27)
   Fixes:
     1. Hide black utility ticker bar — text was truncated, bar
        clashed with the white page bg.
     2. Force header chrome to 100% viewport width — Bricks Theme
        Styles ship a width:360px on the section and 308px on the
        inner container, which makes the burger float mid-row.
     3. Force-hide the right-edge search container.
     4. Lock burger to the right edge with a clean gap to wordmark.
     5. iOS scroll safety: use overflow-x:clip instead of hidden so
        html/body don't both register as scroll containers (Safari
        can stall scroll when nested scrollers exist).
   ============================================================ */
@media (max-width: 991px) {
  #brxe-rgutil { display: none !important; }

  #brx-header,
  #brx-header > section,
  #brxe-vriwqe,
  #brxe-htbmvg {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #brxe-htbmvg { padding: 0 16px !important; }

  header #brxe-eahwlq,
  #brx-header #brxe-eahwlq {
    display: none !important;
  }

  #brxe-hbpwjs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #brxe-wiuzlz {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1e2021 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  #brxe-lrclmo { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; }
  #brxe-lrclmo img { width: 44px !important; height: 44px !important; }

  /* iOS scroll safety net */
  html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
    overscroll-behavior-y: auto !important;
  }
}

/* ============================================================
   iOS Safari scroll lockup fix (2026-05-27)
   Symptom: page stops responding to touch scroll after a section.
   Cause: the Bricks popup (position:fixed inset:0 z-index:10000) is
   always mounted at full viewport size. iOS Safari can still claim
   that area for touch hit-testing even with visibility:hidden +
   pointer-events:none, because position:fixed is treated as UI overlay.
   Fix: clip the hidden popup out of hit-testing AND give html momentum
   scroll so iOS uses its accelerated scroll path.
   ============================================================ */
.brx-popup.hide,
.brx-popup-backdrop {
  /* clip-path removes the element from iOS touch hit-testing */
  clip-path: inset(100%) !important;
  -webkit-clip-path: inset(100%) !important;
  pointer-events: none !important;
}
.brx-popup.hide .brx-popup-content,
.brx-popup.hide .brx-popup-backdrop {
  pointer-events: none !important;
}

/* When the popup is OPEN, restore hit-testing */
.brx-popup:not(.hide) {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  pointer-events: auto !important;
}
.brx-popup:not(.hide) .brx-popup-content,
.brx-popup:not(.hide) .brx-popup-backdrop {
  pointer-events: auto !important;
}

html {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Mobile fix: stats + quote section (2026-05-27)
   #brxe-rgcrg1 is a 2-col grid hard-coded to 124px/139px on every
   viewport. The right column squeezes the quote (set at 35px font)
   into 139px → 1 word per line. Stack to single column on mobile
   and right-size the quote.
   ============================================================ */
@media (max-width: 991px) {
  #brxe-rgcrg1 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  #brxe-rgcrv4 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    width: auto !important;
  }
}

/* ============================================================
   Mobile fix: Electric Bike Reviews table (2026-05-27)
   .brxe-rgcomprow uses grid-template-columns: 60px 51px 68px 68px
   which truncates names (Tenways Wayfa) and crops range bars.
   Stack to: image left, name full-width right of image, price+range
   inline below name. Kill the lime winner tint that looks like
   a stuck hover state.
   ============================================================ */
@media (max-width: 991px) {
  .brxe-rgcomprow {
    grid-template-columns: 84px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      img name name
      img price range !important;
    gap: 6px 14px !important;
    padding: 14px 4px !important;
    align-items: center !important;
  }
  .brxe-rgcomprow > :nth-child(1) { grid-area: img !important; }
  .brxe-rgcomprow > :nth-child(2) {
    grid-area: name !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  .brxe-rgcomprow > :nth-child(2) *,
  .brxe-rgcomprow .rg-name,
  .brxe-rgcomprow .rg-name-wrap,
  .brxe-rgcomprow .brxe-rgrwnm {
    overflow: visible !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
  .brxe-rgcomprow > :nth-child(3) { grid-area: price !important; }
  .brxe-rgcomprow > :nth-child(4) { grid-area: range !important; justify-self: end !important; min-width: 110px !important; }

  /* Lime winner tint reads as a stuck hover state on mobile */
  .brxe-rgcomprow.winner {
    background: transparent !important;
  }
}

/* ============================================================
   Footer column spacing on mobile (2026-05-27)
   Each column wrapper (#brxe-rgfbc1..N) holds its own heading + links.
   On desktop they sit side-by-side. On mobile they stack with zero
   gap, so each H4 (Tools

/* ============================================================
   Footer column spacing on mobile (2026-05-27)
   Each column wrapper (#brxe-rgfbc1..N) holds its own heading + links.
   On desktop they sit side-by-side. On mobile they stack with zero
   gap, so each H4 (Tools and Reads, About) visually orphans onto
   the tail of the prior column last link.
   ============================================================ */
@media (max-width: 991px) {
  [id^="brxe-rgfbc"] {
    margin-top: 28px !important;
    height: auto !important;
  }
  [id="brxe-rgfbc1"] {
    margin-top: 0 !important;
  }
  [id^="brxe-rgfbc"] .brxe-heading {
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   Mobile fix v2: Electric Bike Reviews table (2026-05-27)
   Earlier v1 had a CSS syntax bug (grid-template-areas strings
   not in quotes), invalidated the whole rule. This version skips
   grid-template-areas and uses explicit nth-child placement.
   ============================================================ */
@media (max-width: 991px) {
  .brxe-rgcomprow {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 6px 14px !important;
    padding: 14px 4px !important;
    align-items: center !important;
  }
  .brxe-rgcomprow > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  .brxe-rgcomprow > :nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  .brxe-rgcomprow > :nth-child(2) *,
  .brxe-rgcomprow .rg-name,
  .brxe-rgcomprow .rg-name-wrap,
  .brxe-rgcomprow .brxe-rgrwnm {
    overflow: visible !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
  .brxe-rgcomprow > :nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }
  .brxe-rgcomprow > :nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    min-width: 110px !important;
  }
  /* Hide any 5th/6th cells (e.g. speed/weight) on mobile */
  .brxe-rgcomprow > :nth-child(n+5) { display: none !important; }
  /* Lime winner tint reads as stuck hover state on mobile */
  .brxe-rgcomprow.winner { background: transparent !important; }
}

/* ============================================================
   Mobile fix v3: Electric Bike Reviews table (2026-05-27)
   v2 was beaten by a `<style>` block inlined in page body (loaded
   after style.css). Equal specificity → later wins → my rule lost.
   v3 raises specificity with html body prefix (0,0,1,2 vs 0,0,1,0),
   so external style.css now wins regardless of source order.
   ============================================================ */
@media (max-width: 991px) {
  html body .brxe-rgcomprow {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 6px 14px !important;
    padding: 14px 4px !important;
    align-items: center !important;
  }
  html body .brxe-rgcomprow > :nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  html body .brxe-rgcomprow > :nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  html body .brxe-rgcomprow > :nth-child(2) *,
  html body .brxe-rgcomprow .rg-name,
  html body .brxe-rgcomprow .rg-name-wrap,
  html body .brxe-rgcomprow .brxe-rgrwnm {
    overflow: visible !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
  html body .brxe-rgcomprow > :nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }
  html body .brxe-rgcomprow > :nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    min-width: 110px !important;
  }
  html body .brxe-rgcomprow > :nth-child(n+5) { display: none !important; }
  html body .brxe-rgcomprow.winner { background: transparent !important; }
}

/* ============================================================
   Mobile fix v4: Electric Bike Reviews table (2026-05-27)
   v3 placed price (.brxe-rgrwpri) and range (.brxe-rgrwrng) both
   at grid-row 2 col 2 with justify-self start/end. But each cell
   sized to 237px (full column) so they overlapped completely.
   v4: 3-column grid, place price in col 2 and range in col 3.
   Target by class instead of nth-child so child order doesnt matter.
   ============================================================ */
@media (max-width: 991px) {
  html body .brxe-rgcomprow {
    display: grid !important;
    grid-template-columns: 84px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 6px 12px !important;
    padding: 14px 4px !important;
    align-items: center !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwimg {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwnm {
    grid-column: 2 / span 2 !important;
    grid-row: 1 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwnm *,
  html body .brxe-rgcomprow .rg-name,
  html body .brxe-rgcomprow .rg-name-wrap {
    overflow: visible !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwpri {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwrng {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    min-width: 100px !important;
  }
  html body .brxe-rgcomprow > .brxe-rgrwspd,
  html body .brxe-rgcomprow > .brxe-rgrwpwr {
    display: none !important;
  }
  html body .brxe-rgcomprow.winner {
    background: transparent !important;
  }
}

/* ============================================================
   Mobile fix: newsletter section right-side whitespace (2026-05-27)
   #brxe-dhkwme is a 2-col grid hard-coded to `295px 0px` on every
   viewport. The right col was for THE CHARGER pill (now hidden via
   display:none), leaving 0px right col + 295px fixed left col. On
   a 390px viewport this leaves a dead band of ~50-95px on the right
   of the form. Stack to a single 1fr column on mobile.
   ============================================================ */
@media (max-width: 991px) {
  html body #brxe-dhkwme {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Section paddings on mobile so content has consistent gutter */
  html body #brxe-fexgbj {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Let form + heading fill the column */
  html body #brxe-dhkwme > * {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   Hide THE CHARGER pill on mobile (2026-05-27)
   The pill is rendered as a `::before` pseudo on #brxe-dhkwme,
   NOT the `<img id=brxe-oprcog>`. Hiding only the img earlier
   left the pseudo overlapping the chip row. Also: the pseudo
   background-image points at the STAGING URL — left over from
   the May 27 prod migration.
   ============================================================ */
@media (max-width: 991px) {
  html body #brxe-dhkwme::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }
}

/* ============================================================
   Final polish (2026-05-27):
   1. Newsletter section has hard-coded height: 500px. On mobile the
      stacked content is ~92px taller so the last chip overflows into
      the footer divider. Force height: auto.
   2. Burger had `:hover, :focus { background: rgba(0,0,0,0.06) }`.
      The `:focus` state persists after tap, leaving a visible box
      outline. Switch to `:focus-visible` so tap doesnt stick the
      hover bg but keyboard accessibility is preserved.
   ============================================================ */
@media (max-width: 991px) {
  html body #brxe-fexgbj {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Override the earlier #brxe-rgburgerbtn :focus rule */
  #brxe-rgburgerbtn:focus { background: transparent !important; }
  #brxe-rgburgerbtn:focus-visible { background: rgba(0,0,0,0.08) !important; outline: 2px solid #1e2021 !important; outline-offset: 2px !important; }
}

/* ============================================================
   v2 section height override (2026-05-27)
   Earlier rule only overrode min-height. Inline CSS also sets
   max-height: 500px which still constrains. Override all three.
   ============================================================ */
@media (max-width: 991px) {
  html body section#brxe-fexgbj {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ============================================================
   Newsletter section: tighten top padding on mobile (2026-05-27)
   Section had padding-top: 80px (carryover from desktop layout
   where THE CHARGER pill lived in the upper-right column). With
   the pill hidden, that 80px is dead whitespace above the heading.
   ============================================================ */
@media (max-width: 991px) {
  html body section#brxe-fexgbj {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    margin-top: 0 !important;
  }
}

/* ============================================================
   Locked review template mobile fixes (2026-05-28)
   Applies to post IDs 41256, 41351, 41364, 41429 — the four locked
   review posts using the Tenways Wayfarer template.

   Bug 1: post-header .brxe-container renders at 860px on mobile,
   clipping the H1 off-screen (same bug fixed for postid-42561).
   Bug 2: TL;DR verdict aside uses inline `display: grid;
   grid-template-columns: 1fr auto` — on mobile the right col with
   min-width: 120px forces the left col to ~117px, so the 22px
   verdict text wraps 2 words per line (660px tall).
   Bug 3: aside padding: 32px eats horizontal space on small screens.
   ============================================================ */
@media (max-width: 991px) {
  /* === Bug 1: post-header container width + H1 size === */
  body.postid-41256 .bricks-post-header .brxe-container,
  body.postid-41351 .bricks-post-header .brxe-container,
  body.postid-41364 .bricks-post-header .brxe-container,
  body.postid-41429 .bricks-post-header .brxe-container {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.postid-41256 .bricks-post-header .brxe-post-title,
  body.postid-41351 .bricks-post-header .brxe-post-title,
  body.postid-41364 .bricks-post-header .brxe-post-title,
  body.postid-41429 .bricks-post-header .brxe-post-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    width: auto !important;
  }

  /* === Bug 2 + 3: verdict aside stacking === */
  /* Tighten outer aside padding on mobile */
  body.postid-41256 .brxe-post-content aside[style*="border-radius"],
  body.postid-41351 .brxe-post-content aside[style*="border-radius"],
  body.postid-41364 .brxe-post-content aside[style*="border-radius"],
  body.postid-41429 .brxe-post-content aside[style*="border-radius"] {
    padding: 24px !important;
  }
  /* Stack the inner grid to single column */
  body.postid-41256 .brxe-post-content aside > div[style*="display: grid"],
  body.postid-41351 .brxe-post-content aside > div[style*="display: grid"],
  body.postid-41364 .brxe-post-content aside > div[style*="display: grid"],
  body.postid-41429 .brxe-post-content aside > div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Score column: swap left-border for top-border now that it stacks */
  body.postid-41256 .brxe-post-content aside div[style*="border-left"],
  body.postid-41351 .brxe-post-content aside div[style*="border-left"],
  body.postid-41364 .brxe-post-content aside div[style*="border-left"],
  body.postid-41429 .brxe-post-content aside div[style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid #2A2A2E !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   RideFinder slider — iOS Safari scroll lock fix (2026-05-28)
   The budget slider handles (#rgfw-handle-min/max, .rgf-handle)
   ship with `touch-action: none` so the slider JS can capture
   drag. iOS Safari honors that literally — when a finger lands
   on the 18×18 handle during a vertical scroll, the page stops
   scrolling. Change to `touch-action: pan-y` so vertical pans
   pass through to the page while the slider still handles
   horizontal drag for the thumb.
   ============================================================ */
.rgf-handle,
#rgfw-handle-min,
#rgfw-handle-max {
  touch-action: pan-y !important;
}

/* ============================================================
   Mobile header polish v3 (2026-05-28)
   - Bricks injects `margin: 16px 24px 0 0` on the burger icon.
     My earlier `inset: 0` rule positioned the icon container
     correctly but the margin pushed the icon 16px down inside
     it. That made the burger look bottom-aligned to the row.
   - 64px logo with zero header padding put the logo flush
     against the 1px grey border-bottom (no breathing room).
   - Resize logo to 40px to match the burger visual weight and
     add 14px vertical padding so neither sits on the border.
   ============================================================ */
@media (max-width: 991px) {
  /* 1. Reset Bricks default icon margin */
  #brxe-rgburgerbtn i,
  #brxe-rgburgerbtn .brxe-icon {
    margin: 0 !important;
  }

  /* 2. Shrink logo to 40x40 for visual balance with the 44x44 burger */
  #brxe-lrclmo {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  #brxe-lrclmo img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
  }

  /* 3. Give the row breathing room so nothing touches the bottom border */
  #brxe-vriwqe {
    padding: 14px 0 !important;
  }
}

/* ============================================================
   Mobile header polish v4 (2026-05-28)
   v3 set logo height + section padding but both were beaten by
   Bricks inline `<style>` blocks in the page body. Bump
   specificity with html body prefix.
   ============================================================ */
@media (max-width: 991px) {
  html body #brxe-lrclmo,
  html body #brx-header #brxe-lrclmo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  html body #brxe-lrclmo img,
  html body #brx-header #brxe-lrclmo img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
  html body #brxe-vriwqe,
  html body #brx-header #brxe-vriwqe {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ============================================================
   Mobile nav popup (post 125 Cam Menu) — brand restyle (2026-05-28)
   Legacy build uses #003DA5 purple everywhere. Override to current
   brand (near-black #1e2021 + lime #4D8DFF accent).
   ============================================================ */
/* Backdrop tint: near-black, not deep purple */
.brx-popup-backdrop {
  background-color: rgba(30, 32, 33, 0.75) !important;
}

/* Pop content + every container/section inside it = near-black */
.brx-popup-content,
.brx-popup-content section.brxe-section,
.brx-popup-content .brxe-section,
.brx-popup-content .brxe-container,
.brx-popup-content .brxe-block,
.brx-popup-content form.bricks-search-form,
.brx-popup-content form.bricks-search-form input,
.brx-popup-content form.bricks-search-form button {
  background-color: #1e2021 !important;
  border-color: #2A2A2E !important;
}

/* Search input: white text, lime focus */
.brx-popup-content input[type="search"],
.brx-popup-content input[type="text"] {
  color: #ffffff !important;
  caret-color: #4D8DFF !important;
}
.brx-popup-content input::placeholder {
  color: #9e9e9e !important;
}
.brx-popup-content input:focus {
  outline: 2px solid #4D8DFF !important;
  outline-offset: -2px !important;
}

/* Menu links: white text, lime hover/focus */
.brx-popup-content a,
.brx-popup-content .brxe-text-basic,
.brx-popup-content .brxe-text-basic a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
.brx-popup-content a:hover,
.brx-popup-content a:focus-visible,
.brx-popup-content .brxe-text-basic:hover {
  color: #4D8DFF !important;
}

/* Close X icon: lime */
.brx-popup-content .brxe-icon.ion-ios-close,
.brx-popup-content .brxe-icon[class*="close"] {
  color: #4D8DFF !important;
}

/* Search submit button arrow/glyph: lime */
.brx-popup-content form.bricks-search-form button,
.brx-popup-content form.bricks-search-form button svg,
.brx-popup-content form.bricks-search-form button i {
  color: #4D8DFF !important;
  fill: #4D8DFF !important;
}

/* Accordion borders, dividers: subtle near-black gradient */
.brx-popup-content .brxe-divider {
  background-color: #2A2A2E !important;
}
.brx-popup-content [class*="accordion"] [class*="title"],
.brx-popup-content [class*="accordion"] [class*="heading"] {
  color: #ffffff !important;
}
.brx-popup-content [class*="accordion"] button {
  color: #4D8DFF !important;
}

/* ============================================================
   V5 mobile burger menu — live in popup 125 (2026-05-28)
   Scoped to .brxe-popup-16275 to avoid leaking into other popups.
   Uses html body prefix where needed to beat Bricks inline styles.
   ============================================================ */

/* Reset the popup chrome — let our content fill it edge to edge */
html body .brxe-popup-16275 .brx-popup-content,
html body .brxe-popup-16275 .brx-popup-content > .brxe {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}
html body .brxe-popup-16275 {
  --rg-lime: #4D8DFF;
  --rg-lime-dim: #2F6FD6;
  --rg-ink: #1e2021;
  --rg-ink-2: #2A2A2E;
  --rg-ink-3: #3A3A3F;
  --rg-bone: #FBFBFA;
  --rg-mute: #69686B;
  --rg-mute-2: #9E9E9E;
}
html body .brxe-popup-16275 .brx-popup-backdrop {
  background-color: rgba(30, 32, 33, 0.78) !important;
}

/* V5 layout */
.v5-menu {
  position: absolute;
  inset: 0;
  background: var(--rg-ink, #1e2021);
  color: var(--rg-bone, #FBFBFA);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
}

.v5-scroll {
  flex: 1;
  padding: 24px 24px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Top row: eyebrow + close */
.v5-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.v5-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rg-mute-2, #9E9E9E);
}
.v5-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--rg-ink-3, #3A3A3F);
  border-radius: 999px;
  color: var(--rg-bone, #FBFBFA);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s ease, background .15s ease;
}
.v5-close:hover { border-color: var(--rg-bone, #FBFBFA); }
.v5-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill: none; }

/* Search */
.v5-search {
  position: relative;
  margin-bottom: 24px;
  display: block;
}
.v5-search input {
  width: 100%;
  background: var(--rg-ink-2, #2A2A2E) !important;
  border: 1px solid var(--rg-ink-3, #3A3A3F) !important;
  border-radius: 12px !important;
  padding: 14px 16px 14px 44px !important;
  color: var(--rg-bone, #FBFBFA) !important;
  font: 500 16px 'Geist', 'Inter', system-ui, sans-serif !important;
  box-sizing: border-box;
  outline: none;
}
.v5-search input::placeholder { color: var(--rg-mute-2, #9E9E9E) !important; }
.v5-search input:focus {
  border-color: var(--rg-bone, #FBFBFA) !important;
  outline: none !important;
  box-shadow: none !important;
}
.v5-search svg {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--rg-mute-2, #9E9E9E);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

/* Hero RideFinder card */
.v5-hero {
  background: linear-gradient(135deg, var(--rg-lime, #4D8DFF) 0%, var(--rg-lime-dim, #2F6FD6) 100%);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--rg-ink, #1e2021) !important;
  text-decoration: none !important;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.v5-hero::after {
  content: '\2192';
  position: absolute;
  top: 22px; right: 22px;
  font: 700 28px 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--rg-ink, #1e2021);
}
.v5-hero-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rg-ink, #1e2021);
}
.v5-hero-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--rg-ink, #1e2021);
}
.v5-hero-meta {
  font: 500 14px 'Geist', 'Inter', system-ui, sans-serif;
  color: var(--rg-ink, #1e2021);
  opacity: 0.7;
  margin-top: 4px;
}

/* Link list */
.v5-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.v5-list a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rg-ink-2, #2A2A2E);
  text-decoration: none !important;
  color: var(--rg-bone, #FBFBFA) !important;
  font: 600 19px 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
.v5-list a:last-child { border-bottom: none; }
.v5-arrow {
  color: var(--rg-mute, #69686B);
  font: 400 18px 'Bricolage Grotesque', system-ui, sans-serif;
  transition: color .15s ease, transform .15s ease;
}
.v5-list a:hover { color: var(--rg-lime, #4D8DFF) !important; }
.v5-list a:hover .v5-arrow { color: var(--rg-lime, #4D8DFF); transform: translateX(3px); }

/* Footer 3-button utility row */
.v5-foot {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--rg-ink-2, #2A2A2E);
  flex-shrink: 0;
}
.v5-foot a {
  flex: 1;
  text-align: center;
  padding: 18px 8px;
  text-decoration: none !important;
  color: var(--rg-mute-2, #9E9E9E) !important;
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  border-right: 1px solid var(--rg-ink-2, #2A2A2E);
  transition: color .15s ease, background .15s ease;
}
.v5-foot a:last-child { border-right: 0; }
.v5-foot a:hover { color: var(--rg-lime, #4D8DFF) !important; }
.v5-foot a.v5-subscribe {
  background: var(--rg-lime, #4D8DFF);
  color: var(--rg-ink, #1e2021) !important;
  font-weight: 700;
}
.v5-foot a.v5-subscribe:hover {
  background: var(--rg-lime-dim, #2F6FD6);
}

/* Kill the older popup overrides since the V5 markup has its own classes */
html body .brxe-popup-16275 .brx-popup-content section,
html body .brxe-popup-16275 .brx-popup-content > .brxe-section {
  display: none !important;
}

/* V5 hero card: align-items being forced to center by Bricks popup default — override */
html body .brxe-popup-16275 .v5-hero {
  align-items: flex-start !important;
  text-align: left !important;
}
html body .brxe-popup-16275 .v5-hero > * {
  text-align: left !important;
}

/* V5 footer button alignment fix (2026-05-28)
   The <a> elements get `display: flex` from a higher Bricks rule.
   In flex containers, text-align is unreliable across browsers
   (Chrome respects it, Safari ignores). Use justify-content +
   align-items for guaranteed centering on all engines. */
html body .brxe-popup-16275 .v5-foot a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}


/* ============================================================
   v59 — GLOBAL post-header fix (2026-05-28)
   ROOT CAUSE: Bricks core (frontend/content-default.min.css) sets
   `.bricks-post-header { min-height: 50vh }` and centers the title
   block inside it (flex column, align/justify center). With no hero
   background image, every single post shows the short title floating
   in a ~490px empty band — the "big space at the top of every
   article" complaint.

   This was previously patched PER POST ID (v56–v58: 41256, 41351,
   41364, 41429, 42561), so every NEW article regressed to the band.
   This block makes the fix GLOBAL for all single posts (scoped to
   body.single so Bricks pages / homepage are never touched). New
   articles now get the clean header automatically — no per-post CSS.
   ============================================================ */
body.single .bricks-post-header {
  min-height: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Kill the featured-image hero background + overlay if Bricks adds it */
body.single .bricks-post-header.has-image {
  background-image: none !important;
  color: inherit !important;
}
body.single .bricks-post-header.has-image::before {
  display: none !important;
}
/* Title typography — match the brand (Bricolage Grotesque, dark ink) */
body.single .bricks-post-header .brxe-post-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #0E0E10 !important;
  margin-bottom: 16px !important;
}
/* Meta line (author · date · comments) */
body.single .bricks-post-header .brxe-post-meta {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #69686B !important;
  letter-spacing: 0 !important;
}
/* Constrain + divider under the header so it reads as a clean masthead */
body.single .bricks-post-header .brxe-container {
  max-width: 860px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #e8e8ea !important;
  margin-bottom: 40px !important;
}


/* ============================================================
   Post 41522 — Best Commuter eBikes roundup (2026-05-28)
   Comparison-table polish. Visual only; content unchanged.
   Scoped to the post so it can't affect other tables site-wide.
   ============================================================ */
body.postid-41522 figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e4e4e2;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(14, 14, 16, 0.07);
  margin: 10px 0 8px;
}
body.postid-41522 figure.wp-block-table table,
body.postid-41522 figure.wp-block-table table.has-fixed-layout {
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 820px;            /* scroll on phones instead of cramping */
  margin: 0;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14px;
  color: #1e2021;
  background: #fff;
}
/* Header row — dark mono caps */
body.postid-41522 figure.wp-block-table thead th {
  background: #0E0E10;
  color: #fff;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  padding: 14px 16px;
  border: 0;
}
/* Body cells */
body.postid-41522 figure.wp-block-table tbody td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid #ededeb;
  vertical-align: middle;
  line-height: 1.4;
}
body.postid-41522 figure.wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}
/* Zebra striping */
body.postid-41522 figure.wp-block-table tbody tr:nth-child(even) td {
  background: #f7f7f5;
}
/* Hover highlight (faint lime) */
body.postid-41522 figure.wp-block-table tbody tr:hover td {
  background: #f1ffdd;
}
/* First column = product name: bold Bricolage, sticky while scrolling */
body.postid-41522 figure.wp-block-table thead th:first-child,
body.postid-41522 figure.wp-block-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
body.postid-41522 figure.wp-block-table tbody td:first-child {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0E0E10;
  background: #fff;
}
body.postid-41522 figure.wp-block-table tbody tr:nth-child(even) td:first-child {
  background: #f7f7f5;
}
body.postid-41522 figure.wp-block-table tbody tr:hover td:first-child {
  background: #f1ffdd;
}
/* Last column = "Best For": lime accent text */
body.postid-41522 figure.wp-block-table tbody td:last-child {
  font-weight: 600;
  color: #4f7a00;
}

/* v60b — keep short numeric columns on one line so values like "~$3,000+",
   "~800Wh", "~65 lbs" don't break mid-token (2026-05-28). Long text columns
   (Motor / Suspension / Best For) still wrap normally. */
body.postid-41522 figure.wp-block-table td:nth-child(2),
body.postid-41522 figure.wp-block-table td:nth-child(3),
body.postid-41522 figure.wp-block-table td:nth-child(5),
body.postid-41522 figure.wp-block-table td:nth-child(6),
body.postid-41522 figure.wp-block-table td:nth-child(7) {
  white-space: nowrap;
}

/* v61 — comparison table now has a 10th "Buy" column (2026-05-28).
   The lime "Best For" accent was on :last-child; that's now the Buy
   cell, so pin the accent to its fixed position (col 9) and reset col 10.
   Widen min-width so the extra column doesn't cramp the others. */
body.postid-41522 figure.wp-block-table table,
body.postid-41522 figure.wp-block-table table.has-fixed-layout {
  min-width: 980px !important;
}
body.postid-41522 figure.wp-block-table tbody td:last-child {
  font-weight: 400;
  color: inherit;
}
body.postid-41522 figure.wp-block-table tbody td:nth-child(9) {
  font-weight: 600;
  color: #4f7a00;
}
body.postid-41522 figure.wp-block-table th:nth-child(10),
body.postid-41522 figure.wp-block-table td:nth-child(10) {
  text-align: center;
  white-space: nowrap;
}

/* v61b — give product (first) column room so names like "Tenways Wayfarer" do not orphan a letter (2026-05-28) */
body.postid-41522 figure.wp-block-table th:first-child,
body.postid-41522 figure.wp-block-table td:first-child { min-width: 152px; }

/* v61c — stop mid-word breaks in table cells (no orphaned letters) and
   give the table a touch more room now that there are 10 columns. */
body.postid-41522 figure.wp-block-table th,
body.postid-41522 figure.wp-block-table td { word-break: normal; overflow-wrap: normal; hyphens: none; }
body.postid-41522 figure.wp-block-table table,
body.postid-41522 figure.wp-block-table table.has-fixed-layout { min-width: 1040px !important; }
body.postid-41522 figure.wp-block-table th:first-child,
body.postid-41522 figure.wp-block-table td:first-child { min-width: 140px; }






/* === Ride1Up Prodigy V2 promo banner (homepage + /reviews/) === */
html body .rg-prodigy-banner{display:block !important;margin:1.6rem auto 1.2rem !important;line-height:0;text-decoration:none}
.rg-prodigy-banner picture,
.rg-prodigy-banner img{display:block;width:100%;height:auto;border-radius:8px}
/* Desktop: ~35% smaller than full content width, centered */
@media (min-width:1025px){
  html body .rg-prodigy-banner{max-width:920px}
}
/* Homepage only: extra top clearance below the hero's grey divider line */
html body.home .rg-prodigy-banner{margin-top:4rem !important}

/* 2026-05-29 spec-bar-unify: all review spec bars deep-lime (was near-black default + olive winner) */
html body .rg-spec[data-value] .rg-bar-fill { background: #002D7A !important; }

/* 2026-05-29 Mobile right-shift/overflow fix — review post TOC/video section.
   Two compounding causes on <=767px:
   1. .brxe-block kept desktop 64px L/R padding -> content shoved right.
   2. .brxe-container is a flex item with Bricks inline width:457px AND default
      min-width:auto, so it won't shrink below its video iframe's min-content
      (~457px) even with width/max-width:100%. Add min-width:0 + make the inner
      video/iframe fluid so the whole block fits a 360px screen.
   Section-scoped, type-heavy selectors to outrank the Bricks inline ID rule. */
@media (max-width: 767px) {
  html body section#postreviewtoc div.brxe-block {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body section#postreviewtoc div.brxe-container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body section#postreviewtoc .brxe-video,
  html body section#postreviewtoc .brxe-video iframe,
  html body section#postreviewtoc img {
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ============================================================
   v62 — GLOBAL mobile H1 fix for single posts (2026-05-29)
   ROOT CAUSE: the v59 header fix set
   `body.single .bricks-post-header .brxe-container{max-width:860px}`
   but left width:auto. Inside the flex-column / align-center
   post-header, the container sizes to the title's max-content
   (~830px), so on phones the H1 overflows its 860px box and an
   ancestor clips it (title cut off mid-word). Adding width:100%
   + box-sizing makes the header fluid on mobile while staying
   860px-capped and centered on desktop. Fixes the clipped-title
   bug on EVERY article, not just post 42750.
   ============================================================ */
body.single .bricks-post-header .brxe-container {
  width: 100% !important;
  box-sizing: border-box !important;
}
body.single .bricks-post-header .brxe-post-title {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
@media (max-width: 600px) {
  body.single .bricks-post-header .brxe-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   Post 42750 — Redshift "save your ass" gear roundup (2026-05-29)
   Visual polish only; article copy unchanged.
   Fixes desktop "blank white space" (body ran 1070px wide while
   802px images sat left-aligned) by centering a readable ~820px
   column and making images fill + center it. CTA buttons are
   inline-styled in post_content; this only tunes their mobile size.
   ============================================================ */
/* Readable, centered content column */
body.postid-42750 .brxe-post-content {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Intro line reads as a deck/subtitle, not a second headline */
body.postid-42750 .brxe-post-content > h3.wp-block-heading:first-of-type {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: #002D7A !important;
  letter-spacing: -0.01em !important;
  margin: 2px 0 26px !important;
}
/* Section headings (Bricolage, tight) */
body.postid-42750 .brxe-post-content h2.wp-block-heading {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.4vw, 34px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 44px 0 18px !important;
}
/* Trailing utility headings (Ride Safe / Affiliate Disclosure) */
body.postid-42750 .brxe-post-content > h3.wp-block-heading:not(:first-of-type) {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  margin: 40px 0 10px !important;
  padding-top: 22px !important;
  border-top: 1px solid #e8e8ea !important;
}
/* Product images — fill the column, centered, rounded, soft shadow */
body.postid-42750 .brxe-post-content figure.wp-block-image {
  margin: 10px auto 24px !important;
  text-align: center !important;
}
body.postid-42750 .brxe-post-content figure.wp-block-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  background: #F4F4F2 !important;
  box-shadow: 0 14px 34px rgba(14, 14, 16, 0.10) !important;
}
/* Body copy rhythm */
body.postid-42750 .brxe-post-content p.wp-block-paragraph {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #1e2021 !important;
  margin: 0 0 18px !important;
}
/* CTA button hover + small-phone sizing (html body beats the inline style) */
html body .rg-redshift-cta {
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .rg-redshift-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 0 #0E0E10 !important;
}
@media (max-width: 420px) {
  html body .rg-redshift-cta {
    font-size: 12px !important;
    padding: 13px 18px !important;
    letter-spacing: 0 !important;
  }
}

/* 2026-05-29 — even spacing above/below article CTA buttons (post 42750) */
html body .rg-cta-wrap { margin-top: 26px !important; margin-bottom: 26px !important; }


/* ============================================================
   v63 — Best-Rated cards: DYNAMIC labels (2026-05-29)
   Replaces all the hardcoded positional ::before/::after label
   content (chip / eyebrow / "N picks compared · M min read") with
   real per-post elements rendered by [rg_card] in the loop.
   The "#N" rank badge (.brxe-block::after counter) is LEFT ALONE.
   ============================================================ */

/* 1) Kill the old hardcoded pseudo labels (content:none removes the box).
      Do NOT touch .brxe-block::after — that's the dynamic #N rank badge. */
#brxe-enixjn > .brxe-block::before,
#brxe-enixjn > .brxe-block .brxe-ojmrlu::before,
#brxe-enixjn > .brxe-block .brxe-vhqcuu::before,
#brxe-enixjn > .brxe-block .brxe-vhqcuu::after { content: none !important; }

/* 2) Let the real elements flow inside the text block; chip overlays the
      image via the card (.brxe-uzkkqa is position:relative). */
#brxe-enixjn > .brxe-block .brxe-vhqcuu { position: static !important; padding: 16px 18px 18px !important; }
html body #brxe-enixjn .brxe-vhqcuu .brxe-shortcode,
html body #brxe-enixjn .brxe-vhqcuu #brxe-yqsomw {
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  color: inherit !important;
  text-align: left !important;
}

/* 3) Chip (dark pill, lime text + lime dot) — overlays image top-left */
#brxe-enixjn > .brxe-block .rg-card-chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; line-height: 1;
  background: rgba(14, 14, 16, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #4D8DFF; font-family: 'Geist Mono', monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px 5px 19px; border-radius: 100px;
}
#brxe-enixjn > .brxe-block .rg-card-chip::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #4D8DFF;
}

/* 4) Eyebrow (above title) */
#brxe-enixjn > .brxe-block .rg-card-eyebrow {
  display: block; font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
  color: #002D7A; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px;
}

/* 5) Title (clamped to 2 lines) */
#brxe-enixjn > .brxe-block .rg-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px;
  line-height: 1.2; letter-spacing: -0.01em; color: #0E0E10; margin: 0;
}

/* 6) Footer ("N picks compared · M min read →") */
#brxe-enixjn > .brxe-block .rg-card-foot {
  display: block; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #e8e8ea;
  font-family: 'Geist Mono', monospace; font-size: 10px; color: #6E6E73; letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  #brxe-enixjn > .brxe-block .rg-card-title { font-size: 15px; }
}


/* ============================================================
   Post 41494 — Ride1Up Revv1 lineup (News) — visual polish (2026-05-29)
   Copy unchanged. Readable centered column, framed images, deck,
   clean lists, and a colour-coded HT/FS/DRT/EVO comparison table
   (each model gets an accent; EVO — the article's focus — is
   highlighted lime). CTA buttons are inline-styled in post_content;
   this only tunes their hover + small-phone size.
   ============================================================ */

/* Readable, centered content column */
body.postid-41494 .brxe-post-content {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Intro line as a deck/subtitle */
body.postid-41494 .brxe-post-content > h3.wp-block-heading:first-of-type {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: #002D7A !important;
  letter-spacing: -0.01em !important;
  margin: 2px 0 24px !important;
}
/* Section headings */
body.postid-41494 .brxe-post-content h2.wp-block-heading {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.4vw, 34px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 40px 0 16px !important;
}
/* Sub-headings (e.g. "Revv1 EVO Key Specs") that aren't the deck */
body.postid-41494 .brxe-post-content > h3.wp-block-heading:not(:first-of-type) {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  margin: 30px 0 12px !important;
}
/* Body copy rhythm */
body.postid-41494 .brxe-post-content p.wp-block-paragraph {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #1e2021 !important;
  margin: 0 0 16px !important;
}
/* Framed, centered images */
body.postid-41494 .brxe-post-content figure.wp-block-image {
  margin: 12px auto 22px !important;
  text-align: center !important;
}
body.postid-41494 .brxe-post-content figure.wp-block-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  background: #F4F4F2 !important;
  box-shadow: 0 14px 34px rgba(14, 14, 16, 0.10) !important;
}
/* Clean spec lists with lime markers */
body.postid-41494 .brxe-post-content ul.wp-block-list {
  list-style: none !important;
  margin: 4px 0 18px !important;
  padding: 0 !important;
}
body.postid-41494 .brxe-post-content ul.wp-block-list li {
  position: relative !important;
  padding-left: 22px !important;
  margin: 0 0 9px !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #1e2021 !important;
}
body.postid-41494 .brxe-post-content ul.wp-block-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 2px; top: 9px;
  width: 7px; height: 7px;
  background: #003DA5 !important;
  border: 1.5px solid #0E0E10 !important;
  border-radius: 2px !important;
}
body.postid-41494 .brxe-post-content ul.wp-block-list ul.wp-block-list { margin: 8px 0 4px !important; }
/* Subtle section separators */
body.postid-41494 .brxe-post-content hr.wp-block-separator {
  border: 0 !important;
  height: 1px !important;
  background: #e4e4e2 !important;
  margin: 30px 0 !important;
  opacity: 1 !important;
}

/* CTA buttons: hover + small-phone sizing (html body beats the inline style) */
html body .rg-cta { transition: transform .12s ease, box-shadow .12s ease; }
html body .rg-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 0 0 #0E0E10 !important; }
@media (max-width: 420px) {
  html body .rg-cta { font-size: 12px !important; padding: 13px 18px !important; letter-spacing: 0 !important; }
}

/* ---- Colour-coded comparison table (HT / FS / DRT / EVO) ---- */
body.postid-41494 figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e4e4e2;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(14, 14, 16, 0.08);
  margin: 16px auto 26px;
}
body.postid-41494 figure.wp-block-table table,
body.postid-41494 figure.wp-block-table table.has-fixed-layout {
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 760px;
  margin: 0;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14px;
  color: #1e2021;
  background: #fff;
}
/* Header row — dark mono caps, per-model accent underline */
body.postid-41494 figure.wp-block-table thead th {
  background: #0E0E10;
  color: #fff;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 13px 16px;
  border: 0;
  border-bottom: 3px solid #2a2a2e;
}
body.postid-41494 figure.wp-block-table thead th:first-child { text-align: left; }
body.postid-41494 figure.wp-block-table thead th:nth-child(2) { border-bottom-color: #9AA0A6; } /* HT  — grey */
body.postid-41494 figure.wp-block-table thead th:nth-child(3) { border-bottom-color: #38BDF8; } /* FS  — sky  */
body.postid-41494 figure.wp-block-table thead th:nth-child(4) { border-bottom-color: #FB923C; } /* DRT — orange */
body.postid-41494 figure.wp-block-table thead th:nth-child(5) { background: #4D8DFF; color: #0E0E10; border-bottom-color: #0E0E10; } /* EVO — lime, the star */
/* Body cells */
body.postid-41494 figure.wp-block-table tbody td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #ededeb;
  text-align: center;
  vertical-align: middle;
  line-height: 1.45;
}
body.postid-41494 figure.wp-block-table tbody tr:last-child td { border-bottom: 0; }
/* Zebra + hover */
body.postid-41494 figure.wp-block-table tbody tr:nth-child(even) td { background: #f7f7f5; }
body.postid-41494 figure.wp-block-table tbody tr:hover td { background: #EAF1FF; }
/* First column = feature label: sticky, bold Bricolage, opaque */
body.postid-41494 figure.wp-block-table th:first-child,
body.postid-41494 figure.wp-block-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
}
body.postid-41494 figure.wp-block-table tbody td:first-child {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0E0E10;
  background: #fff;
}
body.postid-41494 figure.wp-block-table tbody tr:nth-child(even) td:first-child { background: #f7f7f5; }
body.postid-41494 figure.wp-block-table tbody tr:hover td:first-child { background: #EAF1FF; }
/* EVO column (5th) — highlighted lime tint, framed, bold (beats zebra) */
body.postid-41494 figure.wp-block-table tbody td:nth-child(5) {
  background: #E8EFFF !important;
  box-shadow: inset 1px 0 0 #cdee93, inset -1px 0 0 #cdee93;
  font-weight: 600;
  color: #0A2A66;
}
body.postid-41494 figure.wp-block-table tbody tr:hover td:nth-child(5) { background: #ebffc6 !important; }
body.postid-41494 figure.wp-block-table tbody tr:last-child td:nth-child(5) { box-shadow: inset 1px 0 0 #cdee93, inset -1px 0 0 #cdee93, inset 0 -1px 0 #cdee93; }
/* Last row ("Best For") — set apart */
body.postid-41494 figure.wp-block-table tbody tr:last-child td {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #f0f0ee;
}
body.postid-41494 figure.wp-block-table tbody tr:last-child td:first-child { background: #f0f0ee; }
@media (max-width: 767px) {
  body.postid-41494 .brxe-post-content figure.wp-block-table table { font-size: 13px; }
}


/* ===== RiderGuide Roundup/Review Template — .rg-article =====
   Base brand template, ported from post 41494 (Revv1 EVO).
   To use on any future roundup/review: wrap the post content in a
   Group block with class "rg-article". Everything below styles on-brand.
   Brand: lime #003DA5 · ink #0E0E10/#1e2021 · Bricolage headings · Geist body · Geist Mono labels. */
.rg-article { max-width: 820px; margin-left: auto; margin-right: auto; }
/* deck / subtitle (optional first h3) */
.rg-article > h3.wp-block-heading:first-of-type {
  font-family: 'Geist','Inter',sans-serif !important; font-weight: 400 !important;
  font-size: 19px !important; line-height: 1.5 !important; color: #002D7A !important;
  letter-spacing: -0.01em !important; margin: 2px 0 24px !important;
}
/* section headings */
.rg-article h2.wp-block-heading {
  font-family: 'Bricolage Grotesque',sans-serif !important; font-weight: 800 !important;
  font-size: clamp(26px,3.4vw,34px) !important; letter-spacing: -0.02em !important;
  line-height: 1.15 !important; margin: 40px 0 16px !important;
}
.rg-article h3.wp-block-heading:not(:first-of-type) {
  font-family: 'Bricolage Grotesque',sans-serif !important; font-weight: 700 !important;
  font-size: 21px !important; margin: 30px 0 12px !important;
}
/* body copy */
.rg-article p.wp-block-paragraph { font-size: 17px !important; line-height: 1.7 !important; color: #1e2021 !important; margin: 0 0 16px !important; }
/* framed, centered images */
.rg-article figure.wp-block-image { margin: 12px auto 22px !important; text-align: center !important; }
.rg-article figure.wp-block-image img { width: 100% !important; height: auto !important; border-radius: 16px !important; background: #F4F4F2 !important; box-shadow: 0 14px 34px rgba(14,14,16,0.10) !important; }
/* lime-marker lists */
.rg-article ul.wp-block-list { list-style: none !important; margin: 4px 0 18px !important; padding: 0 !important; }
.rg-article ul.wp-block-list li { position: relative !important; padding-left: 22px !important; margin: 0 0 9px !important; font-size: 16px !important; line-height: 1.55 !important; color: #1e2021 !important; }
.rg-article ul.wp-block-list li::before { content: "" !important; position: absolute !important; left: 2px; top: 9px; width: 7px; height: 7px; background: #003DA5 !important; border: 1.5px solid #0E0E10 !important; border-radius: 2px !important; }
.rg-article ul.wp-block-list ul.wp-block-list { margin: 8px 0 4px !important; }
/* separators */
.rg-article hr.wp-block-separator { border: 0 !important; height: 1px !important; background: #e4e4e2 !important; margin: 30px 0 !important; opacity: 1 !important; }
/* compact mono spec line (per-product) */
.rg-article .rg-spec { font-family: 'Geist Mono',ui-monospace,monospace; font-size: 13px; color: #525257; line-height: 1.6; background: #f6f6f4; padding: 11px 14px; margin: 8px 0 6px; border-left: 3px solid #003DA5; border-radius: 6px; }
/* CTA buttons (base style is inline in content; here: hover + small-phone) */
.rg-article .rg-cta { margin: 4px 0 22px; }
html body .rg-cta { transition: transform .12s ease, box-shadow .12s ease; }
html body .rg-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 0 0 #0E0E10 !important; }
@media (max-width: 420px) { html body .rg-cta { font-size: 12px !important; padding: 13px 18px !important; letter-spacing: 0 !important; } }
/* ---- comparison table (works for both feature-rows and bikes-as-rows) ---- */
.rg-article figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e4e4e2; border-radius: 16px; box-shadow: 0 14px 34px rgba(14,14,16,0.08); margin: 16px auto 26px; }
.rg-article figure.wp-block-table table, .rg-article figure.wp-block-table table.has-fixed-layout {
  table-layout: auto !important; border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; margin: 0;
  font-family: 'Geist','Inter',sans-serif; font-size: 14px; color: #1e2021; background: #fff;
}
.rg-article figure.wp-block-table thead th {
  background: #0E0E10; color: #fff; font-family: 'Geist Mono',monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center; white-space: nowrap;
  padding: 13px 16px; border: 0; border-bottom: 3px solid #4D8DFF;
}
.rg-article figure.wp-block-table thead th:first-child { text-align: left; }
.rg-article figure.wp-block-table tbody td { padding: 12px 16px; border: 0; border-bottom: 1px solid #ededeb; text-align: center; vertical-align: middle; line-height: 1.45; white-space: nowrap; }
.rg-article figure.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.rg-article figure.wp-block-table tbody tr:nth-child(even) td { background: #f7f7f5; }
.rg-article figure.wp-block-table tbody tr:hover td { background: #EAF1FF; }
/* sticky bold first column (feature/product label) */
.rg-article figure.wp-block-table th:first-child, .rg-article figure.wp-block-table td:first-child { position: sticky; left: 0; z-index: 2; text-align: left; white-space: normal; min-width: 132px; }
.rg-article figure.wp-block-table tbody td:first-child { font-family: 'Bricolage Grotesque',sans-serif; font-weight: 700; font-size: 14px; color: #0E0E10; background: #fff; }
.rg-article figure.wp-block-table tbody tr:nth-child(even) td:first-child { background: #f7f7f5; }
.rg-article figure.wp-block-table tbody tr:hover td:first-child { background: #EAF1FF; }
/* highlight the FIRST data row = "Best Overall" pick (lime), beats zebra */
.rg-article figure.wp-block-table tbody tr:first-child td { background: #E8EFFF !important; font-weight: 600; color: #0A2A66; }
.rg-article figure.wp-block-table tbody tr:first-child td:first-child { background: #E8EFFF !important; color: #0E0E10; }
.rg-article figure.wp-block-table figcaption { font-size: 12px; color: #69686b; padding: 0 4px; }
@media (max-width: 767px) { .rg-article figure.wp-block-table table { font-size: 13px; } }

/* compact stat cards (per-product specs) — part of .rg-article template */
.rg-article .rg-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 12px 0 18px; }
.rg-article .rg-stat { background: #f6f6f4; border: 1px solid #e9e9e6; border-top: 2px solid #003DA5; border-radius: 10px; padding: 9px 12px; }
.rg-article .rg-stat .k { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8f; margin-bottom: 3px; }
.rg-article .rg-stat .v { display: block; font-family: 'Geist', 'Inter', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; color: #1e2021; }

/* in-content links: clearly look like links (blue + underline). Excludes .rg-cta buttons & stat cards. */
.rg-article .wp-block-paragraph a, .rg-article .wp-block-list a, .rg-article figcaption a {
  color: #003DA5 !important; text-decoration: underline !important; text-underline-offset: 2px;
}
.rg-article .wp-block-paragraph a:hover, .rg-article .wp-block-list a:hover { color: #002D7A !important; }

/* ===== postid-42574: comparison table — no left/right scroll (added per request) ===== */
body.postid-42574 .rg-article figure.wp-block-table { overflow: visible !important; }
body.postid-42574 .rg-article figure.wp-block-table table,
body.postid-42574 .rg-article figure.wp-block-table table.has-fixed-layout { min-width: 0 !important; width: 100% !important; font-size: 12.5px; }
body.postid-42574 .rg-article figure.wp-block-table thead th,
body.postid-42574 .rg-article figure.wp-block-table tbody td { white-space: normal !important; padding: 10px 9px; }

@media (max-width: 680px) {
  body.postid-42574 .rg-article figure.wp-block-table { border: 0; border-radius: 0; box-shadow: none; }
  body.postid-42574 .rg-article figure.wp-block-table thead { display: none; }
  body.postid-42574 .rg-article figure.wp-block-table tbody,
  body.postid-42574 .rg-article figure.wp-block-table tbody tr,
  body.postid-42574 .rg-article figure.wp-block-table tbody td { display: block; width: auto; }
  body.postid-42574 .rg-article figure.wp-block-table tbody tr {
    border: 1px solid #e4e4e2; border-radius: 14px; box-shadow: 0 8px 22px rgba(14,14,16,.07);
    margin: 0 0 16px; padding: 4px 14px 8px; background: #fff !important;
  }
  body.postid-42574 .rg-article figure.wp-block-table tbody tr:first-child { background: #E8EFFF !important; border-color: #B9CDF2; }
  body.postid-42574 .rg-article figure.wp-block-table tbody td {
    position: static !important; min-width: 0 !important;
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    text-align: right !important; padding: 8px 0 !important;
    border: 0 !important; border-bottom: 1px solid #efefec !important; background: transparent !important;
  }
  body.postid-42574 .rg-article figure.wp-block-table tbody td:last-child { border-bottom: 0 !important; }
  body.postid-42574 .rg-article figure.wp-block-table tbody td::before {
    content: attr(data-label); font-family: 'Geist Mono', monospace; font-size: 10px;
    letter-spacing: .05em; text-transform: uppercase; color: #8a8a8f; text-align: left; flex: 0 0 auto;
  }
  body.postid-42574 .rg-article figure.wp-block-table tbody td:first-child {
    display: block; text-align: left !important; font-size: 17px; line-height: 1.2;
    padding: 6px 0 8px !important; margin-bottom: 4px; border-bottom: 2px solid #0E0E10 !important;
  }
  body.postid-42574 .rg-article figure.wp-block-table tbody td:first-child::before { content: none; }
}

/* ============================================================
   Post 42850 — Lectric Monarc Marker (news / first impressions)
   v64 (2026-06-02): clean suppressed-hero header + .rg-gist box
   + 2-col spec sheet (no h-scroll, no lime "best overall" row)
   ============================================================ */

/* --- clean header (match approved review-post style, suppress hero banner) --- */
body.postid-42850 .bricks-post-header.has-image,
body.postid-42850 .bricks-post-header {
  background-image: none !important;
  color: inherit !important;
  min-height: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.postid-42850 .bricks-post-header.has-image::before { display: none !important; }
body.postid-42850 .bricks-post-header .brxe-post-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #0E0E10 !important;
  margin-bottom: 16px !important;
}
body.postid-42850 .bricks-post-header .brxe-post-meta {
  font-family: 'Geist', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #69686B !important;
  letter-spacing: 0 !important;
}
body.postid-42850 .bricks-post-header .brxe-container {
  max-width: 860px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #e8e8ea !important;
  margin-bottom: 40px !important;
}

/* --- reusable "The Gist" first-impressions box (dark card, lime accents) --- */
.rg-article .rg-gist {
  background: #0E0E10; color: #fff; border: 2px solid #0E0E10;
  border-radius: 16px; padding: 22px 24px; margin: 8px 0 26px;
  box-shadow: 0 14px 34px rgba(14,14,16,.12);
}
.rg-article .rg-gist .rg-eyebrow {
  display: block; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #4D8DFF; margin-bottom: 14px;
}
.rg-article .rg-gist ul { list-style: none; margin: 0; padding: 0; }
.rg-article .rg-gist li {
  position: relative; padding-left: 24px; margin: 0 0 11px;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 16px;
  line-height: 1.55; color: #ededed;
}
.rg-article .rg-gist li:last-child { margin-bottom: 0; }
.rg-article .rg-gist li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; background: #4D8DFF; border-radius: 2px;
}
.rg-article .rg-gist strong { color: #fff; font-weight: 700; }

/* --- 2-column spec sheet: no horizontal scroll, no lime first-row highlight --- */
body.postid-42850 .rg-article figure.wp-block-table { overflow-x: visible; }
body.postid-42850 .rg-article figure.wp-block-table table,
body.postid-42850 .rg-article figure.wp-block-table table.has-fixed-layout { min-width: 0 !important; }
body.postid-42850 .rg-article figure.wp-block-table thead { display: none; }
body.postid-42850 .rg-article figure.wp-block-table tbody td {
  white-space: normal !important; text-align: left !important;
}
body.postid-42850 .rg-article figure.wp-block-table tbody td:last-child {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 13.5px !important; color: #1e2021 !important;
}
body.postid-42850 .rg-article figure.wp-block-table th:first-child,
body.postid-42850 .rg-article figure.wp-block-table td:first-child {
  min-width: 150px; white-space: normal;
}
/* neutralize the template's lime "Best Overall" highlight on the first data row */
body.postid-42850 .rg-article figure.wp-block-table tbody tr:first-child td,
body.postid-42850 .rg-article figure.wp-block-table tbody tr:first-child td:first-child {
  background: #fff !important; color: #0E0E10 !important; font-weight: inherit;
}
body.postid-42850 .rg-article figure.wp-block-table tbody tr:first-child td:first-child {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
}

/* ============================================================
   Review template additions + Post 42839 (Segway MYON review)
   v65 (2026-06-03): reusable .rg-toc + .rg-proscons; clean
   suppressed-hero header + 2-col spec sheet for postid-42839
   ============================================================ */

/* --- reusable Table of Contents (review template) --- */
.rg-article .rg-toc {
  background: #F6F6F4; border: 1px solid #e4e4e2; border-radius: 14px;
  padding: 18px 22px 8px; margin: 0 0 30px;
}
.rg-article .rg-toc .rg-eyebrow {
  display: block; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #69686B; margin-bottom: 12px;
}
.rg-article .rg-toc ol { margin: 0; padding: 0 0 0 18px; columns: 2; column-gap: 30px; }
.rg-article .rg-toc li {
  font-family: 'Geist', 'Inter', sans-serif; font-size: 14px; line-height: 1.45;
  margin: 0 0 9px; break-inside: avoid; padding-left: 4px;
}
.rg-article .rg-toc a { color: #003DA5; text-decoration: none; }
.rg-article .rg-toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .rg-article .rg-toc ol { columns: 1; } }
/* offset anchor jumps so headings aren't hidden under any sticky header */
.rg-article h2[id] { scroll-margin-top: 90px; }

/* --- reusable Pros & Cons two-column cards (review template) --- */
.rg-article .rg-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 26px; }
.rg-article .rg-pc { border-radius: 16px; padding: 20px 22px; border: 1px solid #e4e4e2; }
.rg-article .rg-pc.pros { background: #E8EFFF; border-color: #B9CDF2; }
.rg-article .rg-pc.cons { background: #FBF6EC; border-color: #ecdcb8; }
.rg-article .rg-pc h4 {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; font-weight: 600;
}
.rg-article .rg-pc.pros h4 { color: #003DA5; }
.rg-article .rg-pc.cons h4 { color: #8a6d1f; }
.rg-article .rg-pc ul { list-style: none; margin: 0; padding: 0; }
.rg-article .rg-pc li {
  position: relative; padding-left: 24px; margin: 0 0 10px;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 15px; line-height: 1.5; color: #1e2021;
}
.rg-article .rg-pc li:last-child { margin-bottom: 0; }
.rg-article .rg-pc.pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #003DA5; font-weight: 800; }
.rg-article .rg-pc.cons li::before { content: "–"; position: absolute; left: 3px; top: 0; color: #b58a2a; font-weight: 800; }
@media (max-width: 600px) { .rg-article .rg-proscons { grid-template-columns: 1fr; } }

/* --- FAQ accordion marker polish (native <details>) --- */
.rg-article details > summary { list-style: none; position: relative; padding-right: 28px; }
.rg-article details > summary::-webkit-details-marker { display: none; }
.rg-article details > summary::after {
  content: "+"; position: absolute; right: 2px; top: -2px;
  font-family: 'Geist', sans-serif; font-size: 24px; line-height: 1; color: #4D8DFF;
  background: #0E0E10; width: 24px; height: 24px; border-radius: 6px; text-align: center;
}
.rg-article details[open] > summary::after { content: "–"; }

/* --- clean header (match review-post style, suppress hero banner) --- */
body.postid-42839 .bricks-post-header.has-image,
body.postid-42839 .bricks-post-header {
  background-image: none !important; color: inherit !important; min-height: 0 !important;
  padding-top: 40px !important; padding-bottom: 0 !important; margin-bottom: 0 !important;
}
body.postid-42839 .bricks-post-header.has-image::before { display: none !important; }
body.postid-42839 .bricks-post-header .brxe-post-title {
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important;
  font-size: clamp(30px, 4.2vw, 54px) !important; line-height: 1.08 !important;
  letter-spacing: -0.025em !important; color: #0E0E10 !important; margin-bottom: 16px !important;
}
body.postid-42839 .bricks-post-header .brxe-post-meta {
  font-family: 'Geist', 'Inter', sans-serif !important; font-size: 14px !important;
  font-weight: 400 !important; color: #69686B !important; letter-spacing: 0 !important;
}
body.postid-42839 .bricks-post-header .brxe-container {
  max-width: 860px !important; padding-bottom: 32px !important;
  border-bottom: 1px solid #e8e8ea !important; margin-bottom: 40px !important;
}

/* --- 2-column spec sheet: keep header, no h-scroll, no lime first-row highlight --- */
body.postid-42839 .rg-article figure.wp-block-table { overflow-x: visible; }
body.postid-42839 .rg-article figure.wp-block-table table,
body.postid-42839 .rg-article figure.wp-block-table table.has-fixed-layout { min-width: 0 !important; }
body.postid-42839 .rg-article figure.wp-block-table tbody td {
  white-space: normal !important; text-align: left !important;
}
body.postid-42839 .rg-article figure.wp-block-table tbody td:last-child {
  font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 13.5px !important; color: #1e2021 !important;
}
body.postid-42839 .rg-article figure.wp-block-table th:first-child,
body.postid-42839 .rg-article figure.wp-block-table td:first-child { min-width: 150px; white-space: normal; }
/* neutralize the template's lime "Best Overall" highlight on the first data row (MSRP) */
body.postid-42839 .rg-article figure.wp-block-table tbody tr:first-child td,
body.postid-42839 .rg-article figure.wp-block-table tbody tr:first-child td:first-child {
  background: #fff !important; color: #0E0E10 !important; font-weight: inherit;
}
body.postid-42839 .rg-article figure.wp-block-table tbody tr:first-child td:first-child {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
}

/* --- defensive: keep video embeds inside .rg-article fluid (v65) --- */
.rg-article figure.wp-block-embed { margin: 14px auto 24px; max-width: 100%; }
.rg-article .wp-block-embed__wrapper { border-radius: 14px; overflow: hidden; }
.rg-article iframe { max-width: 100% !important; }

/* === Pillar: Best Electric Scooters of 2026 (post 13818) === */
.rg-article .rg-answer{font-size:1.12em;line-height:1.6;background:#F2F6FE;border-left:4px solid #003DA5;padding:18px 20px;border-radius:0 10px 10px 0;margin-bottom:1.6em;}
.rg-compare-wrap{margin:1.6em 0;overflow:visible;}
.rg-compare{width:100%;border-collapse:collapse;font-family:'Geist',sans-serif;min-width:0;}
.rg-compare thead th{background:#1e2021;color:#fff;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:12px 14px;text-align:left;}
.rg-compare tbody td{padding:12px 14px;border-bottom:1px solid #e6e6e6;font-size:15px;white-space:normal;}
.rg-compare tbody tr:nth-child(even){background:#fafafa;}
.rg-compare tbody tr:first-child{background:#f3ffe0;}
.rg-compare .rg-bestfor{color:#1e2021;font-weight:700;}
.rg-cta{transition:filter .15s ease;}
.rg-cta:hover{filter:brightness(.94);}
@media (max-width:600px){
  .rg-compare thead{display:none;}
  .rg-compare tbody tr{display:block;margin-bottom:14px;border:1px solid #e6e6e6;border-radius:10px;overflow:hidden;}
  .rg-compare tbody td{display:flex;justify-content:space-between;gap:1em;border:none;border-bottom:1px solid #eee;font-size:15px;}
  .rg-compare tbody td::before{content:attr(data-label);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#69686B;align-self:center;}
}

/* Post 27552 (off-road-electric-scooter): hide stale date + 0 comments in post-meta, keep author */
body.postid-27552 .bricks-post-header .brxe-post-meta > span:not(:first-child){display:none !important;}

/* Post 41285 (Juiced Scrambler review): strip the bike thumbnail + product
   name/subtitle from the repeating "Check Latest Price" CTA cards. Keep only
   the button, centered. Requested 2026-06-04. */
body.postid-41285 #brxe-squjfd,
body.postid-41285 #brxe-hbzshk,
body.postid-41285 #brxe-qvmmyk,
body.postid-41285 #brxe-vxpukp,
body.postid-41285 #brxe-ntlfev,
body.postid-41285 #brxe-tzxpwp,
body.postid-41285 #brxe-xcziar,
body.postid-41285 #brxe-cxheiz,
body.postid-41285 #brxe-jzyufl,
body.postid-41285 #brxe-bchpst { display: none !important; }

body.postid-41285 #brxe-tkohpj,
body.postid-41285 #brxe-ugsgtu,
body.postid-41285 #brxe-txyvpn,
body.postid-41285 #brxe-vpgopm,
body.postid-41285 #brxe-laaxsq {
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
}

/* Post 13639 (best-electric-scooters-under-900): mobile horizontal-overflow fix.
   Two Bricks elements ship hardcoded widths that don't shrink below ~327px and
   push the body to ~399px on phones (clipped by overflow-x, but content cut off).
   #brxe-qblbtt = TOC container width:326px; #brxe-rxorrz = specs block
   min-width:327px. Cap both to the content width on phones only. 2026-06-04. */
@media (max-width:600px){
  body.postid-13639 #brxe-qblbtt{width:100% !important;max-width:100% !important;}
  body.postid-13639 #brxe-rxorrz{min-width:0 !important;max-width:100% !important;width:auto !important;}
}

/* Post 13639: two more phone-overflow causes (2026-06-04).
   (a) Spec-sheet containers are flex column-wrap with a fixed height:350px, so
       their 6 rows wrap into a 2nd column that runs off the right edge. Collapse
       to a single column on phones (height:auto + nowrap).
   (b) Pillar-link header row is flex row + nowrap, so the CTA link can't drop
       below the heading and sticks out. Allow wrap. */
@media (max-width:600px){
  body.postid-13639 #brxe-aolgen,
  body.postid-13639 #brxe-zgkdwn,
  body.postid-13639 #brxe-trueiw,
  body.postid-13639 #brxe-xxingd{
    flex-wrap:nowrap !important;height:auto !important;min-height:0 !important;max-height:none !important;width:100% !important;
  }
  body.postid-13639 #brxe-lkdrlc{flex-wrap:wrap !important;}
}

/* ============================================================
   ESG addendum — .rg-article for native Gutenberg content
   (ESG posts use classless p/ul + core buttons + Rank Math TOC,
   unlike RG posts which carry wp-block-* classes throughout)
   ============================================================ */
.rg-article { max-width: 820px; margin-left: auto; margin-right: auto; }
.rg-article p { font-size: 17px !important; line-height: 1.7 !important; color: #1e2021; margin: 0 0 16px; }
.rg-article h2 { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important; font-size: clamp(26px, 3.4vw, 34px) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin: 40px 0 16px !important; color: #0E0E10; }
.rg-article h3 { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 700 !important; font-size: 21px !important; margin: 30px 0 12px !important; color: #0E0E10; }
.rg-article ul:not([class]) { list-style: none !important; margin: 4px 0 18px !important; padding: 0 !important; }
.rg-article ul:not([class]) > li { position: relative !important; padding-left: 22px !important; margin: 0 0 9px !important; font-size: 16px !important; line-height: 1.55 !important; color: #1e2021 !important; }
.rg-article ul:not([class]) > li::before { content: "" !important; position: absolute !important; left: 2px; top: 9px; width: 7px; height: 7px; background: #003DA5 !important; border: 1.5px solid #0E0E10 !important; border-radius: 2px !important; }
.rg-article img { border-radius: 14px; }
.rg-article .wp-block-media-text__media img { border-radius: 14px; }
.rg-article figcaption { font-size: 12.5px; color: #69686b; }
.rg-article hr { border: 0 !important; height: 1px !important; background: #e4e4e2 !important; margin: 30px 0 !important; opacity: 1 !important; }
/* CTA buttons: core Gutenberg buttons + compat-shim buttons, RG CTA pattern in ESG blue */
.rg-article .wp-block-button__link, .rg-article a.esg-cta, .rg-article a.shortc-button {
  background: #003DA5 !important; color: #fff !important;
  font-family: 'Geist', sans-serif !important; font-weight: 800 !important; font-size: 14px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important;
  padding: 15px 26px !important; border-radius: 10px !important; border: 0 !important;
  box-shadow: 0 4px 0 0 #001F54, 0 10px 24px -10px rgba(0,61,165,0.5) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .15s !important;
  display: inline-block !important; line-height: 1 !important;
}
.rg-article .wp-block-button__link:hover, .rg-article a.esg-cta:hover, .rg-article a.shortc-button:hover {
  transform: translateY(-2px); background: #002D7A !important; color: #fff !important;
}
.rg-article .wp-block-buttons { margin: 6px 0 24px !important; }
/* Rank Math TOC block as a branded card */
.rg-article .wp-block-rank-math-toc-block { background: #F6F6F4; border: 1px solid #e4e4e2; border-radius: 14px; padding: 18px 22px 10px; margin: 0 0 30px; }
.rg-article .wp-block-rank-math-toc-block h2 { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #69686B !important; margin: 0 0 12px !important; }
.rg-article .wp-block-rank-math-toc-block nav > ul { columns: 2; column-gap: 30px; list-style: none; padding: 0; margin: 0; }
.rg-article .wp-block-rank-math-toc-block li { font-family: 'Geist', sans-serif; font-size: 14px !important; line-height: 1.45 !important; margin: 0 0 9px !important; break-inside: avoid; }
.rg-article .wp-block-rank-math-toc-block a { color: #003DA5 !important; text-decoration: none !important; }
.rg-article .wp-block-rank-math-toc-block a:hover { text-decoration: underline !important; }
@media (max-width: 600px) { .rg-article .wp-block-rank-math-toc-block nav > ul { columns: 1; } }
/* in-content links read as links */
.rg-article p a:not(.wp-block-button__link):not(.esg-cta):not(.shortc-button),
.rg-article ul li a { color: #003DA5 !important; text-decoration: underline !important; text-underline-offset: 2px; }
/* ez-toc (older posts) */
.rg-article #ez-toc-container { background: #F6F6F4 !important; border: 1px solid #e4e4e2 !important; border-radius: 14px !important; padding: 18px 22px !important; }
.rg-article #ez-toc-container a { color: #003DA5 !important; }

/* ============================================================
   ESG RideFinder (page 8310) — branded restyle
   Hero: dark ink panel. Filters: card panel, 6 primary +
   "More filters" disclosure (JS in functions.php adds classes).
   Table: ink mono header, readable body, blue links/CTAs.
   ============================================================ */
/* --- hero cover -> dark brand panel --- */
body.page-id-8310 .wp-block-cover { background: #0E0E10 !important; border-radius: 18px; padding: 34px 38px !important; min-height: 0 !important; margin-bottom: 26px; overflow: hidden; position: relative; }
body.page-id-8310 .wp-block-cover__image-background, body.page-id-8310 .wp-block-cover__background { display: none !important; }
body.page-id-8310 .wp-block-cover::before { content: ""; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(77,141,255,0.20), transparent 60%); filter: blur(40px); pointer-events: none; }
body.page-id-8310 .wp-block-cover .wp-block-separator { display: none !important; }
body.page-id-8310 .wp-block-cover h2 { font-family: 'Bricolage Grotesque', sans-serif !important; font-size: clamp(24px, 3vw, 34px) !important; font-weight: 700; letter-spacing: -0.02em; color: #fff !important; text-align: left !important; margin: 0 0 14px !important; position: relative; }
body.page-id-8310 .wp-block-cover h2::before { content: "RIDEFINDER DATABASE"; display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: #4D8DFF; margin-bottom: 12px; }
body.page-id-8310 .wp-block-cover p { text-align: left !important; font-size: 16px !important; line-height: 1.65; color: #C9CACE !important; max-width: 720px; margin: 0 0 10px; }
body.page-id-8310 .wp-block-cover p strong { font-weight: 400 !important; color: inherit !important; }
body.page-id-8310 .brxe-post-content > .wp-block-separator { display: none !important; }

/* --- filter panel --- */
body.page-id-8310 .esg-rf-filters { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px 18px; background: #F6F6F4; border: 1px solid #E4E4E2; border-radius: 16px; padding: 22px 22px 18px; margin-bottom: 26px; }
body.page-id-8310 .wpDataTableFilterSection { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; display: flex; flex-direction: column; gap: 7px; }
body.page-id-8310 .wpDataTableFilterSection label { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase; color: #5B5B60 !important; margin: 0 !important; }
body.page-id-8310 .esg-rf-filters .esg-adv { display: none !important; }
body.page-id-8310 .esg-rf-filters.esg-show-adv .esg-adv { display: flex !important; }

/* inputs + bootstrap-select */
body.page-id-8310 .wpDataTableFilterSection .form-control,
body.page-id-8310 .wpDataTableFilterSection input[type="number"],
body.page-id-8310 .wpDataTableFilterSection input[type="text"],
body.page-id-8310 .wpDataTableFilterSection .btn-default {
  width: 100% !important; background: #fff !important; border: 1px solid #DEDEDA !important; border-radius: 10px !important;
  padding: 10px 12px !important; font-family: 'Geist', sans-serif !important; font-size: 14px !important; color: #1e2021 !important;
  box-shadow: none !important; height: auto !important; line-height: 1.3 !important;
}
body.page-id-8310 .wpDataTableFilterSection .btn-default:focus,
body.page-id-8310 .wpDataTableFilterSection input:focus { outline: 2px solid #003DA5 !important; outline-offset: -1px; border-color: transparent !important; }
body.page-id-8310 .wpDataTableFilterSection .bs-placeholder .filter-option { color: #76767E !important; }
body.page-id-8310 .wpDataTableFilterSection .bs-caret .caret { border-top-color: #69686B !important; }
body.page-id-8310 .wpDataTableFilterSection .dropdown-menu { border: 1px solid #E4E4E2 !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(14,14,16,0.12) !important; padding: 6px !important; }
body.page-id-8310 .wpDataTableFilterSection .dropdown-menu li a { border-radius: 7px; padding: 7px 10px; font-family: 'Geist', sans-serif; font-size: 14px; color: #1e2021 !important; }
body.page-id-8310 .wpDataTableFilterSection .dropdown-menu li a:hover,
body.page-id-8310 .wpDataTableFilterSection .dropdown-menu li.selected a { background: #EAF1FF !important; color: #003DA5 !important; }
body.page-id-8310 .wpDataTableFilterSection .check-mark { color: #003DA5 !important; }
/* number-range pairs side by side */
body.page-id-8310 .wdt-filter-number-range { display: flex; gap: 8px; }

/* actions row */
body.page-id-8310 .esg-rf-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid #E4E4E2; margin-top: 4px; flex-wrap: wrap; }
body.page-id-8310 .wdt-pf-search-filters-button { background: #003DA5 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 12px 26px !important; font-family: 'Geist', sans-serif !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 0 0 #001F54 !important; transition: transform .12s ease, background .15s !important; }
body.page-id-8310 .wdt-pf-search-filters-button:hover { background: #002D7A !important; transform: translateY(-1px); }
body.page-id-8310 .wdt-clear-filters-button { background: transparent !important; color: #1e2021 !important; border: 1px solid #DEDEDA !important; border-radius: 10px !important; padding: 12px 20px !important; font-family: 'Geist', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer; box-shadow: none !important; }
body.page-id-8310 .wdt-clear-filters-button:hover { border-color: #0E0E10 !important; }
body.page-id-8310 .esg-rf-more { background: transparent; color: #003DA5; border: 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 12px 6px; margin-left: auto; }
body.page-id-8310 .esg-rf-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- table card --- */
body.page-id-8310 .wpdt-c.wpDataTablesWrapper { font-family: 'Geist', sans-serif !important; }
body.page-id-8310 .dataTables_wrapper { background: #fff; border: 1px solid #E4E4E2; border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 14px 34px rgba(14,14,16,0.07); }
/* header */
body.page-id-8310 #table_1 thead th { background: #0E0E10 !important; color: #fff !important; font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 14px !important; border: 0 !important; border-bottom: 3px solid #4D8DFF !important; }
body.page-id-8310 #table_1 thead th.sorting_asc, body.page-id-8310 #table_1 thead th.sorting_desc { color: #4D8DFF !important; }
body.page-id-8310 #table_1 { border-collapse: separate !important; border-spacing: 0 !important; }
/* body */
body.page-id-8310 #table_1 tbody td { font-family: 'Geist', sans-serif !important; font-size: 14px !important; color: #1e2021 !important; padding: 11px 14px !important; border: 0 !important; border-bottom: 1px solid #EFEFEC !important; background: #fff; line-height: 1.45 !important; }
body.page-id-8310 #table_1 tbody tr:nth-child(even) td { background: #F7F7F5; }
body.page-id-8310 #table_1 tbody tr:hover td { background: #EAF1FF !important; }
body.page-id-8310 #table_1 td.column-make { font-weight: 700 !important; color: #0E0E10 !important; }
body.page-id-8310 #table_1 td.column-modellink a { color: #003DA5 !important; font-weight: 600 !important; text-decoration: none !important; }
body.page-id-8310 #table_1 td.column-modellink a:hover { text-decoration: underline !important; text-underline-offset: 2px; }
body.page-id-8310 #table_1 td.column-discountcode { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 12px !important; color: #5B5B60 !important; }
body.page-id-8310 #table_1 td.column-reliability { font-weight: 700 !important; }
/* sticky cols stay opaque */
body.page-id-8310 #table_1 td.dtfc-fixed-left { background: #fff !important; }
body.page-id-8310 #table_1 tbody tr:nth-child(even) td.dtfc-fixed-left { background: #F7F7F5 !important; }
body.page-id-8310 #table_1 tbody tr:hover td.dtfc-fixed-left { background: #EAF1FF !important; }
/* controls above table */
body.page-id-8310 .dataTables_wrapper input[type="search"],
body.page-id-8310 .wdt-global-search input { background: #FBFBFA !important; border: 1px solid #DEDEDA !important; border-radius: 10px !important; padding: 10px 14px !important; font-family: 'Geist', sans-serif !important; font-size: 14px !important; color: #1e2021 !important; box-shadow: none !important; }
body.page-id-8310 .dataTables_wrapper input[type="search"]:focus { outline: 2px solid #003DA5 !important; border-color: transparent !important; }
body.page-id-8310 .dataTables_length, body.page-id-8310 .dataTables_info { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 12px !important; color: #69686B !important; }
body.page-id-8310 .dataTables_length .selecter, body.page-id-8310 .dataTables_length select { border: 1px solid #DEDEDA !important; border-radius: 8px !important; font-family: 'Geist', sans-serif !important; }
/* pagination */
body.page-id-8310 .dataTables_paginate .paginate_button { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 13px !important; padding: 8px 13px !important; border: 1px solid #DEDEDA !important; border-radius: 8px !important; margin: 0 3px !important; color: #1e2021 !important; background: #fff !important; }
body.page-id-8310 .dataTables_paginate .paginate_button.current { background: #003DA5 !important; color: #fff !important; border-color: #003DA5 !important; }
body.page-id-8310 .dataTables_paginate .paginate_button:hover { border-color: #0E0E10 !important; color: #0E0E10 !important; }

/* --- mobile --- */
@media (max-width: 640px) {
  body.page-id-8310 .wp-block-cover { padding: 26px 22px !important; }
  body.page-id-8310 .esg-rf-filters { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  body.page-id-8310 .esg-rf-actions { gap: 8px; }
  body.page-id-8310 .wdt-pf-search-filters-button, body.page-id-8310 .wdt-clear-filters-button { flex: 1; padding: 12px 10px !important; }
  body.page-id-8310 .dataTables_wrapper { padding: 12px 10px 10px; }
  body.page-id-8310 #table_1 tbody td { font-size: 13px !important; padding: 9px 11px !important; }
}
@media (max-width: 380px) {
  body.page-id-8310 .esg-rf-filters { grid-template-columns: 1fr; }
}

/* RideFinder filter panel: kill the skin's tall section boxes */
body.page-id-8310 .wpDataTableFilterSection { min-height: 0 !important; height: auto !important; }
body.page-id-8310 .wpDataTableFilterSection .filter_column { display: block !important; min-height: 0 !important; }
body.page-id-8310 .esg-rf-filters { align-items: start; }