/* ===== DEPRECATED HEADER EXPERIMENTS (kept for rollback) =====
   Everything above CANONICAL DARK HEADER is legacy/experimental.
   Canonical block below should be the ONLY source of truth.
===== */
/* === 2CP FINAL HEADER OVERRIDES 2025-12-06 === */

/* 1) Global header tweaks (both mobile + desktop) */
#headerfloat {
    /* Base height; mobile uses this, desktop overrides below */
    height: 50px !important;
    min-height: 50px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2) MOBILE: phones + small tablets */
@media (max-width: 768px) {

    /* Bob & Ken logo box (mobile) */
    #headerlogo {
        background: url('/img/logo-bob-ken-700.png')
                    no-repeat left center !important;
        background-size: contain !important;

        /* These are your “good looking” devtools values */
        width: 314px !important;
        height: 49px !important;
        margin: -4px -1px -2px -5px !important;
    }

    /* Hamburger / menu icon vertical alignment */
    .menu-icon,
    .hamburger,
    .mobile-menu-button {
        /* nudge it down a bit so it lines up with the logo */
        margin-top: 8px !important;
    }

    /* Tiny gap below header if you want breathing room */
    .headerbg {
        margin-bottom: 2px !important;
    }
}

/* 3) DESKTOP: wider than tablets */
@media (min-width: 769px) {

    /* Desktop header height */
    #headerfloat {
        height: 60px !important;      /* adjust this up/down to taste */
        min-height: 60px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Placeholder for desktop logo tuning later if needed */
    /*
    #headerlogo {
        width: 340px !important;
        height: 56px !important;
        margin: 2px 0 0 0 !important;
    }
}

/* === Mobile header: hamburger left, logo centered (2025-12-10) === */
@media (max-width: 768px) {
  /* Use flex just on mobile */
  #headerfloat {
    display: flex;
    align-items: center;
  }

  /* Hamburger container (ul.menu) on the left */
  #myTopnav {
    order: 1;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  /* Ensure the hamburger icon itself is visible */
  #myTopnav .icon {
    display: block;
  }

  /* Logo block takes remaining space and centers */
  #headerleft {
    order: 2;
    flex: 1 1 auto;
    text-align: center;
  }

  #headerleft #headerlogo {
    margin: 0 auto;
  }
}
/* === 2CP MOBILE HEADER + NAV (SINGLE SOURCE OF TRUTH) 2025-12-16 === */
@media (max-width: 768px){

  #headerbg, .headerbg, #headerfloat{
    width:100% !important;
    margin:0 !important;
    height:54px !important;
    min-height:54px !important;
    background-color:#1B262C !important;
  }

  ul.menu#myTopnav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
  }

  ul.menu#myTopnav > li.icon{
    flex:0 0 56px !important;
    width:56px !important;
    margin:0 !important;
  }
  #mobile-menu-toggle{
    width:56px !important;
    height:54px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
  }

  #headerleft{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }
  #headerleft > a{
    display:block !important;
    width:auto !important;
    height:45px !important;
    padding:0 8px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  #headerlogo{
    width:310px !important;
    max-width:calc(100vw - 72px) !important;
    height:45px !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:right center !important;
    display:block !important;
  }
  img[src*="bob-ken-header"]{
    max-height:48px !important;
    width:auto !important;
    max-width:calc(100vw - 72px) !important;
    display:block !important;
  }

  #mobile-nav.mobile-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:100% !important;
    transform:none !important;
  }
  #mobile-nav .mobile-nav__panel{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:320px !important;
    max-width:86vw !important;
    transform:translate3d(-100%,0,0) !important;
  }
  #mobile-nav.mobile-nav--open .mobile-nav__panel,
  body.mobile-nav-open #mobile-nav .mobile-nav__panel{
    transform:translate3d(0,0,0) !important;
  }
}

/* === 2CP MOBILE HEADER ALIGN FIX 2025-12-16B === */
@media (max-width: 768px){

  .headerbg, #headerfloat{
    height:54px !important;
    min-height:54px !important;
  }

  #headerfloat{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* Hamburger: keep it inset left */
  #mobile-menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:60px !important;
    height:54px !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 60px !important;
  }

  /* Logo: absolutely center it so it can't get pushed off */
  img[src*="bob-ken-header"]{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;

    display:block !important;
    max-width:180px !important;
    max-height:48px !important;
    width:auto !important;
    height:auto !important;
  }

}

/* === 2CP MOBILE HEADER ALIGN FIX (headerleft/headerlogo) 2025-12-16C === */
@media (max-width: 768px){

  /* header bar container */
  .headerbg, #headerfloat{
    height:54px !important;
    min-height:54px !important;
  }

  #headerfloat{
    position:relative !important;
    overflow:hidden !important;
  }

  /* Hamburger: force it to the left edge + topmost */
  #mobile-menu-toggle{
    position:relative !important;
    z-index:50 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:60px !important;
    height:54px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Center the REAL logo block */
  #headerleft{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    z-index:10 !important;
  }

  /* Keep the clickable area sane */
  #headerleft > a{
    display:block !important;
    width:310px !important;   /* your known good target */
    height:45px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Make sure the logo div fits inside the bar */
  #headerlogo{
    width:310px !important;
    height:45px !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
  }
}

/* === 2CP MOBILE HEADER: PIN HAMBURGER LEFT 2025-12-16D === */
@media (max-width: 768px){

  /* absolutely pin toggle */
  #mobile-menu-toggle{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:60px !important;
    height:54px !important;
    z-index:9999 !important;
  }

  /* make sure whatever icon inside is visible */
  #mobile-menu-toggle,
  #mobile-menu-toggle *{
    color:#fff !important;
    fill:#fff !important;
  }

  /* keep logo clickable but below hamburger */
  #headerleft{ z-index:10 !important; }
}

/* === 2CP MOBILE HEADER FINAL LOCK 2025-12-16F === */
@media (max-width: 768px){

  .headerbg, #headerfloat{
    height:54px !important;
    min-height:54px !important;
  }

  #headerfloat{
    position:relative !important;
    overflow:hidden !important;
    padding:0 !important;
  }

  /* prevent old menu items from affecting layout on mobile */
  #myTopnav{
    margin:0 !important;
    padding:0 !important;
    height:54px !important;
    list-style:none !important;
  }
  #myTopnav > li,
  #myTopnav > div{
    display:none !important;
  }
  #myTopnav > li.icon{
    display:block !important;
  }

  /* hamburger: pin left + vertically centered */
  #mobile-menu-toggle{
    position:absolute !important;
    left:6px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    width:60px !important;
    height:54px !important;
    line-height:54px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    z-index:9999 !important;
  }

  #mobile-menu-toggle,
  #mobile-menu-toggle *{
    color:#fff !important;
  }

  /* logo container: truly centered, cannot be pushed */
  #headerleft{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    z-index:50 !important;
  }

  #headerleft > a{
    display:block !important;
    width:310px !important;
    height:45px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #headerlogo{
    width:310px !important;
    height:45px !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
  }
}

/* DISABLED 2026-01-12-1805 
/* === 2CP FORCE HEADERLOGO IMAGE (Bob+Ken) 2025-12-16G === */
#headerlogo{
  background-image:url(/img/logo-bob-ken-700.png) !important;
}

/* === 2CP MOBILE HEADER: FINAL ALIGN PASS 2025-12-16F === */
@media (max-width: 768px){

  /* tweakables */
  :root{
    --hdr-h: 54px;
    --hamb-w: 60px;
    --hamb-left: 6px;
    --logo-w: 310px;
    --logo-h: 45px;
    --logo-y: -1px;          /* nudge up/down: try -2px..+2px */
    --logo-x: 8px;           /* nudge left/right: try -12px..+12px */
    --side-pad: 10px;        /* keep logo away from edges */
  }

  .headerbg, #headerfloat{
    height: var(--hdr-h) !important;
    min-height: var(--hdr-h) !important;
  }

  #headerfloat{
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* kill legacy layout influence */
  #myTopnav{
    margin: 0 !important;
    padding: 0 !important;
    height: var(--hdr-h) !important;
    list-style: none !important;
    position: relative !important;
  }

  /* Hamburger pinned left */
  #mobile-menu-toggle{
    position: absolute !important;
    left: var(--hamb-left) !important;
    top: 0 !important;
    width: var(--hamb-w) !important;
    height: var(--hdr-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
  }

  /* Center logo, but PREVENT COLLISION by limiting max width */
  #headerleft{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) translateX(var(--logo-x)) translateY(var(--logo-y)) !important;
    z-index: 50 !important;
    width: var(--logo-w) !important;
    max-width: calc(100vw - (var(--hamb-w) + var(--hamb-left) + var(--side-pad)) - var(--side-pad)) !important;
    height: var(--logo-h) !important;
    pointer-events: auto !important;
  }

  #headerleft > a{
    display: block !important;
    width: 100% !important;
    height: var(--logo-h) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #headerlogo{
    width: 100% !important;
    height: var(--logo-h) !important;
    background-image: url(/img/logo-bob-ken-700.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}

/* === 2CP MOBILE HEADER: HAMBURGER + MENU POLISH (2025-12-16) === */
@media (max-width: 768px) {

  /* Ensure header is a stable positioning context */
  #headerbg, #headerfloat, header, .headerbg {
    position: relative;
  }

  /* Hamburger/toggle: consistent hit-box + centered icon */
  #mobile-menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;      /* your desired hit target */
    height: 54px;     /* match header height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* If the toggle is an <a> or <button>, make it fill the hit-box */
  #mobile-menu-toggle a,
  #mobile-menu-toggle button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    background: transparent;
  }

  /* Keep the logo from being overlapped by the toggle hit area */
  img[src*="bob-ken-header"] {
    display: block;
    max-height: 48px;
  }

  /* Menu panel: prevent weird scrolling + make it usable on small screens
     (We’ll re-target selectors once we confirm your actual menu container) */
  .mobile-menu, .mobile-nav, #mobile-menu, #mobile-nav {
    max-height: calc(100vh - 54px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === 2CP MOBILE NAV: TARGETED FIXES (2025-12-16) === */
@media (max-width: 768px) {

  /* Reserve space so logo never sits under the hamburger hitbox */
  #headerleft, #headerleft a {
    padding-right: 60px !important;
    box-sizing: border-box;
  }

  /* Make sure the toggle sits above everything and stays tappable */
  a#mobile-menu-toggle {
    text-decoration: none;
    line-height: 1;
  }

  /* Mobile drawer sizing + scroll */
  #mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 9998;
  }

  #mobile-nav .mobile-nav__panel {
    /* keep the panel below the header height so it feels “attached” */
    padding-top: 54px;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Backdrop should cover screen behind panel */
  #mobile-nav-backdrop {
    position: fixed;
    inset: 0;
  }

  /* Close button stays reachable */
  #mobile-nav .mobile-nav__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }
}
@media (max-width: 768px){
  a#mobile-menu-toggle{
    font-size: 28px;
    font-weight: 700;
    color: #fff;
  }
}

/* === Breadcrumb (mobile): on /questions/ pages, hide ONLY the question-title crumb (keep Leak link) === */
@media (max-width: 520px) {
  ul#breadcrumb.bc-no-title > li.bc-hide-title{
    display:none !important;
  }
}

/* === Mobile: tighten spacing between breadcrumb and question title === */
@media (max-width: 520px) {

  /* Reduce bottom gap under breadcrumb */
  ul#breadcrumb{
    margin-bottom: 6px !important; /* was ~16–20px visually */
  }

  /* Pull the question title card up slightly */
  .question-header,
  .question-title,
  .question-top,
  .qtitle,
  .qbox{
    margin-top: 4px !important;
  }
}

/* === MOBILE: tighten space between breadcrumb strip and the question header card === */
@media (max-width: 520px) {

  /* Breadcrumb strip: reduce bottom padding/margin */
  ul#breadcrumb{
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }

  /* The "postheader" block directly under breadcrumbs: pull it up slightly */
  .content.postheader{
    margin-top: 0 !important;
  }
}

/* ===== DISABLED: legacy NextGen Home Feed CSS (2026-01-19) ===== */
/* === NextGen Home Feed (DB-driven) === */
/* .home-feed { margin: 18px 0; } */
/* .home-feed__title { font-size: 1.2rem; margin: 0 0 10px; } */
/* .home-feed__list { display: grid; gap: 10px; } */
/* .home-feed__item { padding: 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); background: #fff; } */
/* .home-feed__qtitle { font-weight: 600; line-height: 1.3; } */
/* .home-feed__meta { margin-top: 6px; font-size: .9rem; opacity: .8; display: flex; gap: 10px; flex-wrap: wrap; } */
/* .home-feed__link { text-decoration: none; color: inherit; display: block; } */
/* .home-feed__link:hover .home-feed__qtitle { text-decoration: underline; } */
/*  */
/* slightly denser on wide screens */
/* @media (min-width: 900px) { */
/*   .home-feed__list { grid-template-columns: 1fr 1fr; } */
/* } */

/* === HERO ALIAS (v2): homepage markup uses .hero/.hero__* but legacy overrides used .home-hero/.home-hero__* === */
.hero {
  background: linear-gradient(135deg,#f5f7fb,#e7f2ff);
  border-bottom: 1px solid #dde6f0;
  padding: 18px 12px 24px;
  box-sizing: border-box;
}
.hero__inner { max-width: 980px; margin: 0 auto; }
.hero__content { text-align: center; }
.hero__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6c7a89;
}
.hero__title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  color: #152238;
  font-weight: 700;
}
.hero__subtitle {
  margin: 0 auto 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5a6a;
  max-width: 650px;
}

.hero__search { margin: 0 auto 14px; max-width: 620px; }
.hero__search-label { display: block; font-size: 11px; color: #6c7a89; margin-bottom: 4px; text-align: left; }
.hero__search-row { display: flex; align-items: stretch; gap: 8px; }
.hero__search-input,
.hero__search-row input[type="text"],
.hero__search-row input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid #c5d3e2;
  box-sizing: border-box;
}
.hero__search-input:focus,
.hero__search-row input[type="text"]:focus,
.hero__search-row input[type="search"]:focus {
  outline: none;
  border-color: #007ac3;
  box-shadow: 0 0 0 1px rgba(0,122,195,.15);
}
.hero__search-button,
.hero__search-row button {
  padding: 0 16px;
  font-size: 14px;
  border-radius: 999px;
  border: none;
  background-color: #007ac3;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.hero__search-button:hover,
.hero__search-row button:hover { background-color: #005f96; }

/* hero stats row */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  margin-top: 10px;
}
.hero__stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.hero__stat-number { font-weight: 700; color: #152238; }
.hero__stat-label { font-size: 12px; color: #4b5a6a; }

/* trust badges line */
.hero__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: #6c7a89;
}
.hero__trust-sep { opacity: .7; }

/* image container */
.hero__image { margin-top: 14px; }

/* funded badge block (your HTML uses home-hero__funded on the hero section) */
.home-hero__funded,
.home-hero__funding {
  margin-top: 12px;
  font-size: 12px;
  color: #666;
  text-align: center;
}
.home-hero__funding-text { margin-right: 6px; }
.home-hero__funding-logo { height: 18px; width: auto; vertical-align: middle; }

@media (min-width: 768px) {
  .hero { padding: 26px 16px 30px; }
  .hero__title { font-size: 28px; }
  .hero__subtitle { font-size: 15px; max-width: 540px; }
}
@media (min-width: 1024px) {
  .hero { padding: 30px 20px 34px; }
  .hero__inner { max-width: 980px; }
  .hero__title { font-size: 30px; }
  .hero__subtitle { font-size: 16px; }
}

/* === HERO FINISH: complete missing rules for v2 hero layout === */

.hero__search-button{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #007ac3;
  background: #007ac3;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.hero__search-button:hover{ filter: brightness(0.95); }

.hero__stats{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}
.hero__stat{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d6e2ef;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  text-decoration: none;
}
.hero__stat-number{ font-weight: 800; color: #152238; font-size: 14px; line-height: 1.1; }
.hero__stat-label{ color: #4b5a6a; font-size: 12px; margin-top: 2px; }

.hero__trust-badges{
  margin-top: 6px;
  font-size: 12px;
  color: #4b5a6a;
}
.hero__trust-badges strong{ color:#152238; font-weight: 700; }
.hero__trust-sep{ margin: 0 6px; opacity: .7; }

.hero__image{
  margin: 14px auto 0;
  max-width: 980px;
  display: flex;
  justify-content: center;
}

/* Funded badge (markup currently uses home-hero__funded inside .hero__image) */
.home-hero__funding-text{
  font-size: 12px;
  color: #4b5a6a;
  font-weight: 600;
}
/* Responsive */
@media (min-width: 768px){
  .hero{ padding: 26px 16px 34px; }
  .hero__title{ font-size: 30px; }
  .hero__subtitle{ font-size: 15px; }
  .hero__stat-number{ font-size: 15px; }
}

/* === HOME SECTIONS (NextGen blocks) === */
/* Scope to homepage wrapper so legacy pages are unaffected */
body #wrapper #container .home-reviews,
body #wrapper #container .home-how{
  padding: 18px 12px;
  box-sizing: border-box;
}

body #wrapper #container .home-reviews__inner,
body #wrapper #container .home-how__inner{
  max-width: 980px;
  margin: 0 auto;
}

body #wrapper #container .home-reviews{
  background: #ffffff;
  border-top: 1px solid #eef2f6;
}

body #wrapper #container .home-reviews__head{
  text-align: center;
  margin-bottom: 14px;
}

body #wrapper #container .home-reviews__title{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: #152238;
  font-weight: 800;
}

body #wrapper #container .home-reviews__subtitle{
  margin: 0 auto;
  max-width: 680px;
  font-size: 14px;
  color: #4b5a6a;
  line-height: 1.5;
}

body #wrapper #container .home-reviews__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body #wrapper #container .home-reviews__google{
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #d6e2ef;
  border-radius: 16px;
  padding: 14px;
  background: #f7fbff;
}

body #wrapper #container .home-reviews__badge{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body #wrapper #container .home-reviews__rating{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

body #wrapper #container .home-reviews__stars{
  letter-spacing: 2px;
  font-size: 14px;
}

body #wrapper #container .home-reviews__score{
  font-weight: 900;
  font-size: 18px;
  color: #152238;
}

body #wrapper #container .home-reviews__meta{
  text-align: right;
  color: #4b5a6a;
  font-size: 12px;
  line-height: 1.2;
}

body #wrapper #container .home-reviews__cta{
  margin-top: 10px;
  font-weight: 700;
  color: #007ac3;
}

body #wrapper #container .home-reviews__quotes{
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 14px;
  background: #ffffff;
}

body #wrapper #container .home-reviews__quote{
  margin: 0 0 12px;
}

body #wrapper #container .home-reviews__quote:last-child{
  margin-bottom: 0;
}

body #wrapper #container .home-reviews__quote blockquote{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #152238;
}

body #wrapper #container .home-reviews__quote figcaption{
  font-size: 12px;
  color: #6c7a89;
}

/* HOW IT WORKS */
body #wrapper #container .home-how{
  background: #f8fafc;
  border-top: 1px solid #eef2f6;
}

body #wrapper #container .home-how__head{
  text-align: center;
  margin-bottom: 12px;
}

body #wrapper #container .home-how__title{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: #152238;
  font-weight: 800;
}

body #wrapper #container .home-how__subtitle{
  margin: 0 auto;
  max-width: 680px;
  font-size: 14px;
  color: #4b5a6a;
  line-height: 1.5;
}

body #wrapper #container .home-how__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body #wrapper #container .home-how__step{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d6e2ef;
  border-radius: 16px;
  background: #ffffff;
}

body #wrapper #container .home-how__num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #e7f2ff;
  color: #007ac3;
  display: grid;
  place-items: center;
  font-weight: 900;
}

body #wrapper #container .home-how__h{
  margin: 0 0 4px;
  font-size: 14px;
  color: #152238;
  font-weight: 800;
}

body #wrapper #container .home-how__p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5a6a;
}

@media (min-width: 900px){
  body #wrapper #container .home-reviews__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
  body #wrapper #container .home-how__steps{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  body #wrapper #container .home-how__step{
    grid-template-columns: 34px 1fr;
  }
}

/* === MOBILE HEADER STABILIZER (legacy header markup + new mobile overlay) === */
/* Goal: clean mobile header bar: hamburger left, logo centered, no legacy menu clutter */

@media (max-width: 900px){

  /* Header bar container */
  .headerbg{
    position: relative;
    z-index: 9999;
  }

  #headerfloat{
    position: relative;
    min-height: 56px;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  /* Center the logo block */
  #headerleft{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
  }

  /* Make sure the logo has reasonable size (background-image comes from existing CSS) */
  #headerlogo{
    width: 180px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* Hide legacy top menu items on mobile (we use the overlay mobile-nav instead) */
  #myTopnav > li:not(.icon),
  #myTopnav > div.mobileshow{
    display: none !important;
  }

  /* Place hamburger on the left */
  #myTopnav{
    margin: 0 !important;
    padding: 0 !important;
  }

  #myTopnav li.icon{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    z-index: 3;
  }

  #myTopnav li.icon a#mobile-menu-toggle{
    display: inline-block;
    font-size: 28px;
    line-height: 1;
    padding: 8px 10px;
    text-decoration: none;
    color: #fff;
  }

  /* Kill leftover legacy header middle search row on mobile (it crowds the hero) */
  #headermiddle{
    display: none !important;
  }

  /* Breadcrumb/social strip usually looks weird under the new hero on mobile */
  #headboxbg{
    display: none !important;
  }
}

/* ===== MICRO POLISH v2: REAL header spacing nudge (layout, not transform) =====
   Shrink side columns slightly so brand sits closer to menu while staying centered.
/*DEPRECATED*/ .ng-header__inner{
  grid-template-columns: 96px 1fr 96px !important;
}

/*DEPRECATED*/ /* ===== HEADER: fix logo/badge intrusion (ng-brand) =====
   Ensure logo glyph and Bob/Ken mark never overlap and have a tiny breathing space.
/*DEPRECATED*/ .ng-brand{
  display: inline-flex;
  align-items: center;
  gap: 6px;              /* adjust 4-8px if desired */
  white-space: nowrap;
}

/* Just in case any legacy CSS tries to overlap/offset the mark */
/*DEPRECATED*/ .ng-brand__mark{
  display: block;
  margin-left: 0 !important;
  position: relative;
  left: 0 !important;
}

/* ===== NEXTGEN DRAWER: HARDEN AGAINST BULLET/RAW LIST REGRESSION ===== */
/*DEPRECATED*/ .ng-drawer__list{ list-style:none !important; margin:0 !important; padding:0 !important; }
/*DEPRECATED*/ .ng-drawer__list li{ list-style:none !important; margin:0 !important; padding:0 !important; }
/*DEPRECATED*/ .ng-drawer__list a{ display:block; text-decoration:none; }

   NEXTGEN DRAWER OVERLAY WINNER (2026-01-15)
   This file loads LAST. These rules intentionally win.
   ========================================================= */
@media (max-width: 768px){

/*DEPRECATED*/   body.ng .ng-drawer{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    pointer-events: none !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__backdrop{
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    opacity: 0 !important;
    transition: opacity 160ms ease !important;
  }

   NEXTGEN DRAWER MENU VISIBILITY (2026-01-15)
   ========================================================= */
/*DEPRECATED*/   body.ng .ng-drawer__panel{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: min(82vw, 320px) !important;
    background: #fff !important;
    transform: translateX(-105%) !important;
    transition: transform 180ms ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer.is-open{
    pointer-events: auto !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer.is-open .ng-drawer__backdrop{
    opacity: 1 !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer.is-open .ng-drawer__panel{
    transform: translateX(0) !important;
  }
}

   NEXTGEN DRAWER MENU CONTENT (2026-01-15)
   ========================================================= */

/*DEPRECATED*/   body.ng .ng-drawer__top{
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 10px !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__close{
    font-size: 28px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list a{
    display:block !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    color: #0b2545 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list a:active{
    opacity: 0.85 !important;
  }
}

/*DEPRECATED*/   body.ng .ng-drawer__top{
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    margin-bottom: 10px !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__close{
    font-size: 28px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list a{
    display:block !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    color: #0b2545 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

/*DEPRECATED*/   body.ng .ng-drawer__list a:hover{
    background: rgba(0,0,0,0.04) !important;
  }
}

   NEXTGEN DRAWER ENGINE (ALL WIDTHS) (2026-01-15)
   Ensures drawer works on desktop + mobile.
   ========================================================= */
/*DEPRECATED*/ body.ng .ng-drawer{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

/*DEPRECATED*/ body.ng .ng-drawer__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
  opacity: 0 !important;
}

/*DEPRECATED*/ body.ng .ng-drawer__panel{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 360px !important;
  max-width: 90vw !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  transform: translateX(-105%) !important;
}

/*DEPRECATED*/ body.ng .ng-drawer.is-open{
  pointer-events: auto !important;
}

/*DEPRECATED*/ body.ng .ng-drawer.is-open .ng-drawer__backdrop{
  opacity: 1 !important;
}

/*DEPRECATED*/ body.ng .ng-drawer.is-open .ng-drawer__panel{
  transform: translateX(0) !important;
}

/* Keep the body scroll lock ONLY on small screens (optional) */
@media (max-width: 768px){
/*DEPRECATED*/   body.ng.ng-drawer-open{
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* ===== NEXTGEN HEADER POLISH (2026-01-16) =====
   Goal: tighter alignment, better tap targets, cleaner drawer feel.
*/
/*DEPRECATED*/ body.ng .ng-header{
  /* keep header stable */
  position: sticky;
  top: 0;
  z-index: 9999;
}

/*DEPRECATED*/ body.ng .ng-header__inner{
  align-items: center;
  min-height: 56px;
  padding: 8px 12px;
  gap: 10px;
}

/* bigger, friendlier tap target */
/*DEPRECATED*/ body.ng .ng-menu{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* keep brand from feeling cramped */
/*DEPRECATED*/ body.ng .ng-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 14px;
}

/* keep the Bob/Ken mark consistent and not oversized */
/*DEPRECATED*/ body.ng .ng-brand__mark{
  height: 28px;
  width: auto;
  display: block;
}

/* actions: align + spacing */
/*DEPRECATED*/ body.ng .ng-header__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* drawer links: comfortable tap area */
/*DEPRECATED*/ body.ng .ng-drawer__list a{
  padding: 14px 16px;
  border-radius: 12px;
}

/* visible focus ring for keyboard users */
body.ng a:focus,
body.ng button:focus{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* mobile: reduce padding a hair on small screens */
@media (max-width: 360px){
/*DEPRECATED*/   body.ng .ng-header__inner{ padding: 6px 10px; }
/*DEPRECATED*/   body.ng .ng-brand__mark{ height: 26px; }
}

/* ===== NEXTGEN HEADER POLISH v2 (2026-01-16) ===== */
/*DEPRECATED*/ body.ng .ng-header{
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* subtle button feedback */
/*DEPRECATED*/ body.ng .ng-menu,
/*DEPRECATED*/ body.ng .ng-header__actions .ng-btn{
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

/*DEPRECATED*/ body.ng .ng-menu:hover{
  background: rgba(0,0,0,0.04);
}

/*DEPRECATED*/ body.ng .ng-menu:active{
  transform: scale(0.98);
}

/* drawer panel depth */
/*DEPRECATED*/ body.ng .ng-drawer__panel{
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}

/* drawer link hover */
/*DEPRECATED*/ body.ng .ng-drawer__list a:hover{
  background: rgba(0,0,0,0.04);
}

/* ===== LOGO CHIP (Bob/Ken mark visibility on light header) ===== */
/*DEPRECATED*/ body.ng .ng-brand{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/*DEPRECATED*/ body.ng .ng-brand__mark{
  /* crisp rendering */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* ===== DRAWER MOTION + BACKDROP POLISH (2026-01-16) ===== */
/*DEPRECATED*/ body.ng .ng-drawer__backdrop{
  background: rgba(0,0,0,0.40);
  opacity: 0;
  transition: opacity 160ms ease;
}

/*DEPRECATED*/ body.ng .ng-drawer__panel{
  transform: translateX(-10px);
  transition: transform 180ms ease;
  will-change: transform;
}

/*DEPRECATED*/ body.ng .ng-drawer.is-open .ng-drawer__backdrop{
  opacity: 1;
}

/*DEPRECATED*/ body.ng .ng-drawer.is-open .ng-drawer__panel{
  transform: translateX(0);
}

/* ===== BRAND CHIP: blue tint (2026-01-16) ===== */
/*DEPRECATED*/ body.ng .ng-brand{
  background: rgba(15, 90, 170, 0.10);          /* soft blue tint */
  border: 1px solid rgba(15, 90, 170, 0.22);
  box-shadow: 0 6px 18px rgba(15, 90, 170, 0.10);
}

/* ===== FORCE MOBILE HEADER ELEMENTS VISIBLE (2026-01-16) =====
/*DEPRECATED*/    home.css hides .ng-brand__mark, and some overrides may hide actions.
   We want a modern app header with logo + Login/Join visible.
*/

/* Always show the Bob/Ken mark (overrides home.css display:none !important) */
/*DEPRECATED*/ body.ng .ng-header .ng-brand__mark{
  display: block !important;
}

/* Always show the actions area */
/*DEPRECATED*/ body.ng .ng-header .ng-header__actions{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Make the buttons compact enough for 390px wide screens */
/*DEPRECATED*/ body.ng .ng-header .ng-header__actions a.ng-btn{
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  border-radius: 12px;
  white-space: nowrap;
}

/* Keep the mark from hogging space on tiny widths */
/*DEPRECATED*/ body.ng .ng-header .ng-brand__mark{
  height: 26px !important;
  width: auto !important;
  max-width: 140px;
}

/* Ultra-small phones: slightly tighter */
@media (max-width: 360px){
/*DEPRECATED*/   body.ng .ng-header .ng-header__actions a.ng-btn{
    padding: 7px 9px;
    font-size: 13px;
  }
/*DEPRECATED*/   body.ng .ng-header .ng-brand__mark{
    max-width: 120px;
  }
}

/* ===== MODERN APP HEADER (2026-01-16) ===== */

/* Cleaner chip: subtle blue tint, less “boxy” */
/*DEPRECATED*/ body.ng .ng-brand{
  background: rgba(15, 90, 170, 0.08);
  border: 1px solid rgba(15, 90, 170, 0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* Badge sizing for the new image */
/*DEPRECATED*/ body.ng .ng-header .ng-brand__mark{
  height: 28px !important;
  max-width: 150px;
}

/* App-like buttons */
/*DEPRECATED*/ body.ng .ng-header__actions a.ng-btn{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.1px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

/* Ghost button should look like a modern outline pill */
/*DEPRECATED*/ body.ng .ng-header__actions a.ng-btn--ghost{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: none;
}

/* Hover/active feedback (app feel) */
/*DEPRECATED*/ body.ng .ng-header__actions a.ng-btn:hover,
/*DEPRECATED*/ body.ng .ng-menu:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

/*DEPRECATED*/ body.ng .ng-header__actions a.ng-btn:active,
/*DEPRECATED*/ body.ng .ng-menu:active{
  transform: scale(0.99);
}

/* ===== THEME SYSTEM (LIGHT + DARK) (2026-01-16) =====
   Uses prefers-color-scheme now; later we can add a manual toggle via body[data-theme].
*/
body.ng{
  --ng-bg: #ffffff;
  --ng-text: #0f172a;
  --ng-border: rgba(0,0,0,0.10);

/*DEPRECATED*/   --ng-header-bg: rgba(255,255,255,0.92);
/*DEPRECATED*/   --ng-header-border: rgba(0,0,0,0.08);

  --ng-chip-bg: rgba(15, 90, 170, 0.08);
  --ng-chip-border: rgba(15, 90, 170, 0.18);

  --ng-hover: rgba(0,0,0,0.04);

/*DEPRECATED*/   --ng-drawer-backdrop: rgba(0,0,0,0.40);
/*DEPRECATED*/   --ng-drawer-shadow: 0 18px 48px rgba(0,0,0,0.22);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
  body.ng{
    --ng-bg: #0b1220;
    --ng-text: #e5e7eb;
    --ng-border: rgba(255,255,255,0.14);

/*DEPRECATED*/     --ng-header-bg: rgba(12, 18, 32, 0.92);
/*DEPRECATED*/     --ng-header-border: rgba(255,255,255,0.10);

    /* Keep chip slightly light so white-background logos still look great */
    --ng-chip-bg: rgba(255,255,255,0.10);
    --ng-chip-border: rgba(255,255,255,0.14);

    --ng-hover: rgba(255,255,255,0.06);

/*DEPRECATED*/     --ng-drawer-backdrop: rgba(0,0,0,0.55);
/*DEPRECATED*/     --ng-drawer-shadow: 0 18px 52px rgba(0,0,0,0.55);
  }
}

/* Apply theme tokens */
body.ng{ background: var(--ng-bg); color: var(--ng-text); }

/*DEPRECATED*/ body.ng .ng-header{
/*DEPRECATED*/   background: var(--ng-header-bg);
/*DEPRECATED*/   border-bottom: 1px solid var(--ng-header-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/*DEPRECATED*/ body.ng .ng-brand{
  background: var(--ng-chip-bg);
  border: 1px solid var(--ng-chip-border);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/*DEPRECATED*/ body.ng .ng-menu:hover,
/*DEPRECATED*/ body.ng .ng-drawer__list a:hover{
  background: var(--ng-hover);
}

/*DEPRECATED*/ body.ng .ng-drawer__backdrop{ background: var(--ng-drawer-backdrop); }
/*DEPRECATED*/ body.ng .ng-drawer__panel{ box-shadow: var(--ng-drawer-shadow); }

/*DEPRECATED*/ /* ===== 2CarPros LOGO (uses existing span.ng-brand__logo) =====
   Works with white-background PNG because it sits on the chip.
*/
/*DEPRECATED*/ body.ng .ng-brand__logo{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-image: none; /* removed 2cp-logo */   background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

/* Tighten spacing so icon + badge + buttons fit nicely */
/*DEPRECATED*/ body.ng .ng-brand{ gap: 10px; }

/* ===== CANONICAL DARK HEADER (2026-01-16) =====
   Header stays dark in both light/dark modes (logo requires dark field).
*/
body.ng .ng-header{
  background: rgba(11,18,32,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.ng .ng-header__inner{
  min-height: 56px;
  padding: 8px 12px;
  gap: 10px;
}

/* Brand area: no “chip” box now; let the logo be the hero */
body.ng .ng-brand{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 6px;
  border-radius: 14px;
}

body.ng .ng-header .ng-brand__mark{
  display: block !important;
  height: 30px !important;
  width: auto !important;
  max-width: 220px;
  filter: none !important;
}

/* Menu button: app-like */
body.ng .ng-menu{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
}

/* Actions: always visible on mobile */
body.ng .ng-header .ng-header__actions{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Buttons: modern pills, readable on dark */
body.ng .ng-header__actions a.ng-btn{
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

body.ng .ng-header__actions a.ng-btn--ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

body.ng .ng-header__actions a.ng-btn:not(.ng-btn--ghost){
  background: rgba(255,255,255,0.92);
  color: rgba(11,18,32,0.95);
  border: 1px solid rgba(255,255,255,0.18);
}

body.ng .ng-menu:hover,
body.ng .ng-header__actions a.ng-btn:hover{
  background: rgba(255,255,255,0.10);
}

/* Tiny phones: keep it fitting */
@media (max-width: 360px){
  body.ng .ng-header .ng-brand__mark{ height: 28px !important; max-width: 190px; }
  body.ng .ng-header__actions a.ng-btn{ padding: 7px 9px; font-size: 13px; }
}

/* ===== HEADER TUNING (FIT + MODERN) (2026-01-16) ===== */

/* Make the hamburger feel lighter and “app-like” */
body.ng .ng-menu{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none !important;
}

/* If header inner is a grid, make columns fit mobile better */
body.ng .ng-header__inner{
  grid-template-columns: 56px 1fr auto !important; /* menu | brand | actions */
}

/* Keep logo from stealing the whole row */
body.ng .ng-header .ng-brand__mark{
  max-width: 190px !important;
}

/* Buttons: a touch tighter so they fit beside the logo */
body.ng .ng-header__actions a.ng-btn{
  padding: 7px 9px !important;
  font-size: 13px !important;
}

/* Very small screens: shrink logo a bit more */
@media (max-width: 390px){
  body.ng .ng-header .ng-brand__mark{ max-width: 170px !important; }
}

/* Ultra tiny: prioritize fit */
@media (max-width: 360px){
  body.ng .ng-header .ng-brand__mark{ max-width: 150px !important; }
  body.ng .ng-header__actions a.ng-btn{
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

/* ===== HEADER FINAL FIT (LOGO-009) (2026-01-16) =====
   Goal: iPhone 390px shows Hamburger | Logo | Login + Join (both visible)
*/

body.ng .ng-header__inner{
  display: grid !important;
  grid-template-columns: 56px minmax(0,1fr) auto !important; /* menu | logo | actions */
  align-items: center;
  gap: 10px;
}

body.ng .ng-brand{
  min-width: 0 !important;     /* KEY: allows shrink in grid */
  padding: 6px 4px !important;
}

body.ng .ng-header .ng-brand__mark{
  display: block !important;
  height: 30px !important;
  width: auto !important;
  max-width: 210px !important;
  object-fit: contain;
}

body.ng .ng-header .ng-header__actions{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.ng .ng-header__actions a.ng-btn{
  padding: 7px 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* iPhone 12 Pro and similar */
@media (max-width: 390px){
  body.ng .ng-header .ng-brand__mark{ max-width: 175px !important; }
  body.ng .ng-header__actions a.ng-btn{ padding: 6px 8px !important; font-size: 12px !important; }
}

/* Ultra small */
@media (max-width: 360px){
  body.ng .ng-header .ng-brand__mark{ max-width: 155px !important; }
  body.ng .ng-header__actions a.ng-btn{ padding: 6px 7px !important; font-size: 12px !important; }
}

/* ===== HEADER: disable legacy wordmark (2cp-logo.png) =====
   We are using ONLY the <img.ng-brand__mark> logo-bob-ken-009.png now.
*/
body.ng .ng-brand__logo{
  display: none !important;
  background-image: none !important;
}

/* ===== HEADER: hard-kill legacy wordmark layer ===== */
.ng-brand__logo,
.ng-brand__logo:before,
.ng-brand__logo:after{
  display: none !important;
  background: none !important;
  content: none !important;
}

/* ===== MOBILE HEADER POLISH (ALWAYS DARK) (2026-01-16) =====
   - Hamburger icon: white + slightly thicker
   - Logo: a bit larger (but still fits iPhone 390)
   - Drawer tray: dark always (ignores light/dark mode)
*/

/* Always-dark header */
body.ng .ng-header{
  background: #0f1720 !important;
  color: #fff !important;
}

/* Bigger logo */
body.ng .ng-header .ng-brand__mark{
  height: 34px !important;     /* was 30 */
  max-width: 240px !important; /* allow a bit bigger */
  width: auto !important;
  object-fit: contain !important;
}

/* Keep fit on smaller screens */
@media (max-width: 390px){
  body.ng .ng-header .ng-brand__mark{
    height: 32px !important;
    max-width: 220px !important;
  }
}
@media (max-width: 360px){
  body.ng .ng-header .ng-brand__mark{
    height: 30px !important;
    max-width: 200px !important;
  }
}

/* Hamburger button + icon: WHITE, thicker */
body.ng .ng-menu,
body.ng .ng-menu button,
body.ng .ng-menu a{
  color: #fff !important;
}

/* Common SVG hamburger patterns */
body.ng .ng-menu svg,
body.ng .ng-menu svg *{
  stroke: #fff !important;
  fill: none !important;
}

/* If icon uses paths with fills */
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.5 !important; /* thicker lines */
  stroke-linecap: round !important;
}

/* Some icon systems use a pseudo-element */
body.ng .ng-menu__icon,
body.ng .ng-menu__icon:before,
body.ng .ng-menu__icon:after{
  background: #fff !important;
}

/* ===== DRAWER TRAY: ALWAYS DARK ===== */
body.ng .ng-drawer,
body.ng .ng-drawer__panel,
body.ng .ng-drawer__sheet,
body.ng .ng-drawer__content{
  background: #0f1720 !important;
  color: #fff !important;
}

/* Links/text inside drawer */
body.ng .ng-drawer a,
body.ng .ng-drawer button,
body.ng .ng-drawer .ng-link{
  color: #fff !important;
}

/* Divider lines inside drawer (if any) */
body.ng .ng-drawer hr,
body.ng .ng-drawer .ng-divider{
  border-color: rgba(255,255,255,.12) !important;
}

/* ===== FIX: drawer styles were too broad (prevent whole-page dark) ===== */

/* Ensure main page surfaces stay normal (not forced dark) */
body.ng,
body.ng .ng-main,
body.ng main,
body.ng .ng-content,
body.ng .page,
body.ng .container{
  background: transparent !important;
  color: inherit !important;
}

/* Keep ONLY the header always dark */
body.ng .ng-header{
  background: #0f1720 !important;
  color: #fff !important;
}

/* Hamburger button: slightly lighter gray background, white icon */
body.ng .ng-menu,
body.ng .ng-menu button,
body.ng .ng-menu a{
  color: #fff !important;
}

body.ng .ng-menu button,
body.ng .ng-menu a{
  background: rgba(255,255,255,.10) !important;  /* lighter tile */
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
}

/* Hamburger icon: white + a touch thicker */
body.ng .ng-menu svg,
body.ng .ng-menu svg *{
  stroke: #fff !important;
  fill: none !important;
}
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.75 !important;
  stroke-linecap: round !important;
}

/* Logo slightly larger */
body.ng .ng-header .ng-brand__mark{
  height: 36px !important;
  max-width: 260px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 390px){
  body.ng .ng-header .ng-brand__mark{
    height: 34px !important;
    max-width: 235px !important;
  }
}
@media (max-width: 360px){
  body.ng .ng-header .ng-brand__mark{
    height: 32px !important;
    max-width: 215px !important;
  }
}

/* ===== DRAWER: always dark, but ONLY the panel/sheet (not whole page) ===== */
body.ng .ng-drawer__panel,
body.ng .ng-drawer__sheet{
  background: #0f1720 !important;
  color: #fff !important;
}

/* overlay stays overlay (don’t paint page) */
body.ng .ng-drawer{
  background: transparent !important;
}

/* links/text inside drawer */
body.ng .ng-drawer__panel a,
body.ng .ng-drawer__panel button,
body.ng .ng-drawer__sheet a,
body.ng .ng-drawer__sheet button{
  color: #fff !important;
}

/* ===== HEADER TUNING (lighter bg, stronger menu tile, logo spacing) ===== */

/* Lighter header background to match logo panel feel */
body.ng .ng-header{
  background: #24313b !important;   /* lighter than #0f1720 */
}

/* Make hamburger tile more noticeable */
body.ng .ng-menu button,
body.ng .ng-menu a{
  background: rgba(255,255,255,.18) !important; /* brighter tile */
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
}

/* Slightly bigger/thicker hamburger lines */
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke-width: 3.0 !important;
}

/* Add space between menu and logo (nudge logo right) */
body.ng .ng-header__inner{
  gap: 14px !important;  /* was ~10 */
}

body.ng .ng-brand{
  padding-left: 8px !important; /* pushes logo right a touch */
}

/* ===== MICRO TWEAKS (2026-01-16) ===== */

/* Header: darken just a touch vs #24313b */
body.ng .ng-header{
  background: #1f2a33 !important;
}

/* Hamburger tile: more noticeable */
body.ng .ng-menu button,
body.ng .ng-menu a{
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.35) !important;
}

/* Keep icon thick/clear */
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke-width: 3.2 !important;
}

/* Nudge logo right a bit more */
body.ng .ng-header__inner{
  gap: 16px !important;
}
body.ng .ng-brand{
  padding-left: 12px !important;
}

/* ===== HEADER FINAL COLOR + MENU BUTTON REFINE (2026-01-16) ===== */

/* Exact match to logo panel background */
body.ng .ng-header{
  background: #1B262C !important;
}

/* Hamburger tile: smaller footprint, still pops */
body.ng .ng-menu button,
body.ng .ng-menu a{
  background: rgba(255,255,255,.20) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.40) !important;

  padding: 8px 10px !important;     /* smaller tile */
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}

/* If the menu icon is an SVG, make strokes thicker & clearer */
body.ng .ng-menu svg,
body.ng .ng-menu svg *{
  stroke: #fff !important;
  fill: none !important;
}
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 3.6 !important;     /* thicker lines */
  stroke-linecap: round !important;
}

/* If icon is made of CSS bars, thicken them too */
body.ng .ng-menu__icon,
body.ng .ng-menu__icon:before,
body.ng .ng-menu__icon:after{
  background: #fff !important;
  height: 3px !important;
}

/* Tiny extra “pop” ring without making it loud */
body.ng .ng-menu button:focus,
body.ng .ng-menu a:focus{
  outline: 2px solid rgba(255,255,255,.35) !important;
  outline-offset: 2px !important;
}

/* ===== MENU SHRINK + THICKER ICON + LOGO NUDGE (2026-01-16) ===== */

/* Shrink hamburger button container */
body.ng .ng-menu button,
body.ng .ng-menu a{
  padding: 6px 8px !important;     /* smaller than 8/10 */
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
}

/* Thicken hamburger icon if SVG */
body.ng .ng-menu svg path,
body.ng .ng-menu svg rect,
body.ng .ng-menu svg line{
  stroke-width: 4.2 !important;    /* thicker lines */
}

/* Thicken hamburger icon if CSS bars */
body.ng .ng-menu__icon,
body.ng .ng-menu__icon:before,
body.ng .ng-menu__icon:after{
  height: 4px !important;
}

/* Nudge logo right a touch more */
body.ng .ng-brand{
  padding-left: 16px !important;
}
body.ng .ng-header__inner{
  gap: 18px !important;
}

/* ===== FINAL TWEAK: ☰ hamburger + logo nudge (2026-01-16) ===== */

/* Make the hamburger button a touch more prominent */
body.ng .ng-menu{
  background: rgba(255,255,255,.26) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 3px 16px rgba(0,0,0,.45) !important;
}

/* The icon is a character (☰), so style the span directly */
body.ng .ng-menu__bars{
  color: #fff !important;
  font-size: 22px !important;     /* bigger */
  font-weight: 900 !important;    /* bolder */
  line-height: 1 !important;
  display: inline-block !important;
  transform: translateY(-1px) !important; /* optical center */
  text-shadow: 0 1px 2px rgba(0,0,0,.40) !important; /* pop */
}

/* Nudge logo right one more step */
body.ng .ng-brand{
  padding-left: 20px !important;
}
body.ng .ng-header__inner{
  gap: 20px !important;
}

/* ===== HEADER: remove blue tap highlight / focus ring (2026-01-16) ===== */
body.ng .ng-header a,
body.ng .ng-header button,
body.ng .ng-header .ng-brand,
body.ng .ng-header .ng-brand *{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

body.ng .ng-header a:focus,
body.ng .ng-header a:focus-visible,
body.ng .ng-header button:focus,
body.ng .ng-header button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ===== DRAWER: make close button visible/clickable (2026-01-16) ===== */
body.ng .ng-drawer__panel{
  position: relative !important;
}

body.ng .ng-drawer__close{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 9999 !important;

  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;

  font-size: 26px !important;
  font-weight: 900 !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

body.ng .ng-drawer__close:hover,
body.ng .ng-drawer__close:active{
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* Remove any default focus rings */
body.ng .ng-drawer__close:focus,
body.ng .ng-drawer__close:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) !important;
}

/* ===== DRAWER POLISH: offset under header + crisp typography (2026-01-16) ===== */

/* 1) Make drawer panel start BELOW the header so close button isn't hidden */
:root{
  --ng-header-h: 56px; /* adjust if needed: 54-60 */
}

body.ng .ng-drawer__panel{
  top: var(--ng-header-h) !important;
  height: calc(100vh - var(--ng-header-h)) !important;
  overflow: hidden !important; /* panel contains its own scroll areas */
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

/* Keep close button pinned inside the panel top-right */
body.ng .ng-drawer__close{
  top: 10px !important;
  right: 12px !important;
}

/* 2) Drawer background + subtle border so it feels intentional */
body.ng .ng-drawer__panel,
body.ng .ng-drawer__sheet{
  background: #0f1720 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
}

/* 3) Make text crisp (remove fuzz/shadow/filters) */
body.ng .ng-drawer__panel,
body.ng .ng-drawer__panel *{
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 4) Constrain menu height + scroll inside list (prevents “too long”) */
body.ng .ng-drawer__list{
  max-height: calc(100vh - var(--ng-header-h) - 84px) !important; /* leaves room for top row */
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 18px !important;
}

/* 5) Make links look clean & modern */
body.ng .ng-drawer__list a{
  display: block !important;
  padding: 12px 14px !important;
  margin: 6px 10px !important;

  color: rgba(255,255,255,.92) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: .1px !important;

  border-radius: 12px !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

body.ng .ng-drawer__list a:hover,
body.ng .ng-drawer__list a:active{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* 6) Remove blue focus rings inside the drawer too (keep subtle accessibility ring) */
body.ng .ng-drawer__panel a:focus,
body.ng .ng-drawer__panel a:focus-visible,
body.ng .ng-drawer__panel button:focus,
body.ng .ng-drawer__panel button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) !important;
}

/* 7) Optional: tighten top area if it's too tall */
body.ng .ng-drawer__top{
  padding: 12px 12px 6px 12px !important;
}

/* 8) Make close button clearly visible */
body.ng .ng-drawer__close{
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;

  font-size: 26px !important;
  font-weight: 900 !important;
}

/* ===== DRAWER: CRISP TEXT + CENTERED CLOSE (2026-01-16) ===== */

/* 1) Remove the #1 cause of “muddy” text: opacity/filters/transforms on the panel */
body.ng .ng-drawer__panel{
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* 2) Force crisp text rendering (and remove any remaining shadows) */
body.ng .ng-drawer__panel,
body.ng .ng-drawer__panel *{
  text-shadow: none !important;
  filter: none !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

/* 3) Make drawer links “clean” (no blur from semi-transparent text) */
body.ng .ng-drawer__list a{
  color: #ffffff !important;         /* full white = crisp */
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
}

/* 4) Center the X perfectly */
body.ng .ng-drawer__close{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  text-indent: 0 !important;

  line-height: 1 !important;         /* stop vertical drift */
  font-size: 26px !important;
}

/* Some browsers treat &times; oddly; this keeps it visually centered */
body.ng .ng-drawer__close{
  transform: translateY(-1px) !important;
}

/* ===== DRAWER: RESTORE OPEN/CLOSE + SHORTEN (2026-01-16) ===== */

/* Use aria-hidden as the source of truth for open/closed state */
body.ng .ng-drawer[aria-hidden="true"] .ng-drawer__panel{
  transform: translateX(-110%) !important; /* fully off-screen */
  pointer-events: none !important;
}

body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__panel{
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Backdrop should only catch clicks when open */
body.ng .ng-drawer[aria-hidden="true"] .ng-drawer__backdrop{
  opacity: 0 !important;
  pointer-events: none !important;
}
body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__backdrop{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Shorten the drawer: panel height hugs content and never fills the whole screen */
body.ng .ng-drawer__panel{
  height: auto !important;
  max-height: calc(100vh - 92px) !important;  /* leaves breathing room under header */
  overflow: hidden !important;                 /* no big empty scroll area */
}

/* Keep the list scrollable only if it ever needs to be, but usually it won’t */
body.ng .ng-drawer__list{
  max-height: calc(100vh - 160px) !important;
  overflow-y: auto !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

/* ===== Drawer Click Fix (2026-01-18)
   Ensure header background does NOT intercept taps
*/
.headerbg{
  pointer-events: none !important;
}

/* Explicitly allow menu button clicks */
.ng-menu{
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

/* ===== HERO CARD v1 (2026-01-19) =====
   Goal: modern “carded” hero (dark card, strong CTA, clean stats)
   Markup source: includes/nextgen/hero.php
*/
body.ng .hero{
  padding: 26px 0;
  background: #f4f7f9;
}

body.ng .hero__inner{
  background: #0f1b24;
  color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  padding: 22px 18px;
  display: grid;
  gap: 18px;
}

body.ng .hero__eyebrow{
  opacity: .9;
  font-weight: 700;
  letter-spacing: .2px;
}

body.ng .hero__title{
  margin: 6px 0 0 0;
}

body.ng .hero__subtitle{
  margin: 10px 0 0 0;
  opacity: .92;
  line-height: 1.45;
  max-width: 48ch;
}

/* Search “pill” */
body.ng .hero__search{
  margin-top: 6px;
}

body.ng .hero__search-label{
  color: rgba(255,255,255,.92);
}

body.ng .hero__search-row{
  margin-top: 8px;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

body.ng .hero__search-input{
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 10px;
  font-size: 16px;
}

body.ng .hero__search-button{
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
}

/* Stats as mini-cards */
body.ng .hero__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

body.ng .hero__stat{
  border-radius: 14px;
  padding: 12px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
}

body.ng .hero__stat-number{
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
}

body.ng .hero__stat-label{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .92;
}

/* Trust badges */
body.ng .hero__trust-badges{
  opacity: .92;
}

/* Image area polish (if present) */
body.ng .hero__image img{
  border-radius: 14px;
}

/* Desktop layout: text + image side-by-side if hero has an image block */
@media (min-width: 980px){
  body.ng .hero__inner{
    padding: 28px 28px;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 22px;
  }
  body.ng .hero__content{
    max-width: 720px;
  }
}
/* ===== /HERO CARD v1 ===== */

/* ===== HERO HEADER GAP TIGHTEN (2026-01-19) =====
   Goal: visually connect header + hero card
*/
body.ng .hero{
  padding-top: 14px;   /* was 26px */
}
/* ===== /HERO HEADER GAP TIGHTEN ===== */

/* ===== HERO BG GRADIENT + LIFT (2026-01-19) =====
   Goal: make the hero card pop (subtle “section” feel)
*/
body.ng .hero{
  background: linear-gradient(180deg, #eef3f7 0%, #f6f8fa 55%, #ffffff 100%);
}

body.ng .hero__inner{
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}

/* Slightly soften the bottom radius to feel “pillowed” on mobile */
@media (max-width: 520px){
  body.ng .hero__inner{
    border-radius: 20px;
  }
}
/* ===== /HERO BG GRADIENT + LIFT ===== */

/* ===== HERO SIDE PADDING (2026-01-19) =====
   Goal: add left/right breathing room around hero card
*/
body.ng .hero{
  padding-left: 14px;
  padding-right: 14px;
}

/* Slightly more space on larger screens */
@media (min-width: 768px){
  body.ng .hero{
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ===== /HERO SIDE PADDING ===== */

/* ===== HERO POLISH PACK v1 (2026-01-19) ===== */

/* 1) SEARCH INPUT — more breathing room */
body.ng .hero__search-row{
  padding: 4px;
}

body.ng .hero__search-input{
  padding: 14px 14px;
  font-size: 16px;
}

body.ng .hero__search-button{
  padding: 14px 20px;
}

/* 2) STAT CARDS — subtle interaction */
body.ng .hero__stat{
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.ng .hero__stat:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Mobile tap feedback */
body.ng .hero__stat:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

/* 3) HERO CARD — inner highlight (very subtle) */
body.ng .hero__inner{
  position: relative;
}

body.ng .hero__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.02) 35%,
      rgba(0,0,0,.08) 100%
    );
}

/* Extra vertical breathing room on mobile */
@media (max-width: 520px){
  body.ng .hero__inner{
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

/* ===== /HERO POLISH PACK v1 ===== */

/* ===== TRUSTED BY DRIVERS polish v1 (2026-01-19) =====
   Goal: modern trust section (spacing + carded panel + cleaner quotes)
*/

/* Section spacing + gentle separation from hero */
body.ng .home-reviews{
  padding: 28px 14px 10px;
}

/* Match the hero side padding rhythm */
@media (min-width: 768px){
  body.ng .home-reviews{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Make it feel like a contained “trust panel” */
body.ng .home-reviews__inner{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 22px 16px;
}

/* Head spacing */
body.ng .home-reviews__head{
  text-align: center;
  margin-bottom: 16px;
}

body.ng .home-reviews__title{
  margin: 0;
}

body.ng .home-reviews__subtitle{
  margin: 8px auto 0;
  max-width: 52ch;
  line-height: 1.45;
}

/* Grid spacing */
body.ng .home-reviews__grid{
  gap: 16px;
  align-items: start;
}

/* Make the Google badge feel like its own card */
body.ng .home-reviews__google{
  display: block;
  text-decoration: none;
}

body.ng .home-reviews__badge{
  border-radius: 16px;
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid rgba(0,0,0,.06);
}

/* Quotes: give each quote its own “breath” */
body.ng .home-reviews__quotes{
  display: grid;
  gap: 12px;
}

body.ng .home-reviews__quote{
  margin: 0;
  padding: 14px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

body.ng .home-reviews__quote p{
  margin: 0 0 10px 0;
  line-height: 1.5;
}

body.ng .home-reviews__quote figcaption{
  opacity: .8;
  font-size: 12px;
}

/* Desktop: badge left, quotes right */
@media (min-width: 980px){
  body.ng .home-reviews__inner{
    padding: 26px 22px;
  }
  body.ng .home-reviews__grid{
    grid-template-columns: 340px 1fr;
    gap: 18px;
  }
  body.ng .home-reviews__head{
    margin-bottom: 18px;
  }
}

/* ===== /TRUSTED BY DRIVERS polish v1 ===== */

/* ===== GOOGLE REVIEWS TRUST CARD (Aio v1) =====
   Goal: unmistakable trust signal, clean Google vibe, better spacing
*/

body.ng .home-reviews__google{
  position: relative;
  display: block;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #e3efff;
  border-radius: 16px;
  padding: 18px 16px 16px 58px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Subtle lift on hover */
body.ng .home-reviews__google:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: #cfe3ff;
}

/* Google "G" badge (CSS-only, no image) */
body.ng .home-reviews__google::before{
  content: "G";
  position: absolute;
  left: 16px;
  top: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #4285F4 0%, #34A853 35%, #FBBC05 65%, #EA4335 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* Make the source line feel official */
body.ng .home-reviews__source{
  font-weight: 800;
}

/* Slightly soften the count line */
body.ng .home-reviews__count{
  opacity: .88;
}

/* CTA polish */
body.ng .home-reviews__cta{
  margin-top: 8px;
  color: #1a73e8;
  font-weight: 800;
}

/* Badge internal spacing (mobile) */
body.ng .home-reviews__badge{
  padding: 16px 14px;
}

body.ng .home-reviews__meta{
  margin-top: 6px;
}

/* ===== /GOOGLE REVIEWS TRUST CARD ===== */

/* ===== HERO -> REVIEWS GAP TIGHTEN v1 (2026-01-19) =====
   Goal: reduce the vertical gap between hero card and Trusted by Drivers panel
*/
body.ng .hero{
  padding-bottom: 12px;  /* was effectively ~26px */
}

body.ng .home-reviews{
  padding-top: 16px;     /* was 28px in reviews polish */
}
/* ===== /HERO -> REVIEWS GAP TIGHTEN v1 ===== */

/* ===== HOME HOW (Aio polish v1) (2026-01-19) =====
   Goal: modern step cards + cleaner spacing + better CTA row
*/

body.ng .home-how{
  padding: 22px 14px 6px;
}

/* match our site padding rhythm */
@media (min-width: 768px){
  body.ng .home-how{
    padding-left: 20px;
    padding-right: 20px;
  }
}

body.ng .home-how__inner{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 22px 16px 18px;
}

body.ng .home-how__head{
  text-align: center;
  margin-bottom: 14px;
}

body.ng .home-how__title{
  margin: 0;
}

body.ng .home-how__subtitle{
  margin: 8px auto 0;
  max-width: 56ch;
  line-height: 1.45;
  opacity: .92;
}

/* Steps: turn each step into a crisp card row */
body.ng .home-how__steps{
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

body.ng .home-how__step{
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #e6effa;
  border-radius: 16px;
  padding: 14px 14px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

body.ng .home-how__num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #e9f2ff;
  border: 1px solid #d7e7ff;
}

body.ng .home-how__h{
  margin: 0;
}

body.ng .home-how__p{
  margin: 6px 0 0 0;
  line-height: 1.45;
  opacity: .92;
}

/* CTA row: modern buttons + spacing */
body.ng .home-how__cta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Make the two buttons feel intentional on mobile */
body.ng .home-how__btn{
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
}

/* Desktop: slightly roomier */
@media (min-width: 980px){
  body.ng .home-how__inner{
    padding: 26px 22px 20px;
  }
  body.ng .home-how__steps{
    gap: 14px;
  }
  body.ng .home-how__step{
    padding: 16px 16px;
    grid-template-columns: 46px 1fr;
  }
  body.ng .home-how__num{
    width: 38px;
    height: 38px;
  }
}

/* ===== /HOME HOW (Aio polish v1) ===== */

/* ===== HOME LINKS + TOPICS PANEL (Aio v1) (2026-01-19) =====
   Goal: style Top Level Site Links + Popular Repair Topics as a clean unified panel
*/

/* Shared outer rhythm */
body.ng .home-top-links,
body.ng .home-popular-topics{
  padding-left: 14px;
  padding-right: 14px;
}

/* Match our larger-screen rhythm */
@media (min-width: 768px){
  body.ng .home-top-links,
  body.ng .home-popular-topics{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Make the two sections feel like ONE stacked card */
body.ng .home-top-links{
  padding-top: 18px;
  padding-bottom: 0;
}

body.ng .home-popular-topics{
  padding-top: 0;
  padding-bottom: 10px;
}

/* Card surface on the FIRST section */
body.ng .home-top-links{
  background: transparent;
}

body.ng .home-top-links::before{
  content: "";
  display: block;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  height: 1px; /* creates the stacking context without markup changes */
  margin-bottom: -1px;
}

/* Apply the card background to both sections by styling their direct contents */
body.ng .home-top-links,
body.ng .home-popular-topics{
  position: relative;
}

body.ng .home-top-links{
  border-radius: 18px 18px 0 0;
}

body.ng .home-popular-topics{
  border-radius: 0 0 18px 18px;
}

/* Build the “panel” look using a shared background layer */
body.ng .home-top-links,
body.ng .home-popular-topics{
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Remove duplicate shadow where they touch */
body.ng .home-popular-topics{
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  margin-top: -6px; /* visually stitches the two together */
}

/* Titles */
body.ng .home-top-links__title,
body.ng .home-popular-topics__title{
  margin: 0;
  padding: 18px 16px 10px;
  font-weight: 800;
  letter-spacing: .2px;
}

body.ng .home-popular-topics__title{
  padding-top: 14px;
}

/* Lists: turn bullets into clean tap rows */
body.ng .home-top-links ul,
body.ng .home-popular-topics ul{
  list-style: none;
  margin: 0;
  padding: 0 12px 18px;
  display: grid;
  gap: 10px;
}

/* Link rows */
body.ng .home-top-links li a,
body.ng .home-popular-topics li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  background: #f6f8fa;
  border: 1px solid #eef2f6;
  font-weight: 700;
}

/* Subtle hover/tap */
body.ng .home-top-links li a:hover,
body.ng .home-popular-topics li a:hover{
  background: #f2f7ff;
  border-color: #dbeaff;
}

body.ng .home-top-links li a:active,
body.ng .home-popular-topics li a:active{
  transform: translateY(0);
}

/* Add a small chevron to signal “tap” (CSS-only) */
body.ng .home-top-links li a::after,
body.ng .home-popular-topics li a::after{
  content: "›";
  opacity: .55;
  font-size: 18px;
  line-height: 1;
}

/* Desktop: two columns inside each section list */
@media (min-width: 980px){
  body.ng .home-top-links ul,
  body.ng .home-popular-topics ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== /HOME LINKS + TOPICS PANEL (Aio v1) ===== */

/* ===== LATEST QUESTIONS (Aio panel v2) (2026-01-19) =====
   Targets: .home-feed / .home-feed__*
   Goal: carded feed with clean question rows + muted meta
*/

/* Outer rhythm like the other home panels */
body.ng .home-feed{
  padding: 14px 14px 12px;
}
@media (min-width: 768px){
  body.ng .home-feed{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Card surface (apply to the list container) */
body.ng .home-feed__list{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 18px 16px 14px;
  display: grid;
  gap: 10px;
  margin: 0;
}

/* Title */
body.ng .home-feed__title{
  margin: 0 0 12px 0;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Each row */
body.ng .home-feed__item{
  margin: 0;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.015);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
body.ng .home-feed__item:hover{
  background: rgba(0,0,0,.02);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Link row */
body.ng a.home-feed__link{
  display: block;
  text-decoration: none;
}

/* Question title */
body.ng .home-feed__qtitle{
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: #0f172a;
}

/* Meta line */
body.ng .home-feed__meta{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(15, 23, 42, .70);
}
body.ng .home-feed__by,
body.ng .home-feed__answers{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Make answers count pop slightly */
body.ng .home-feed__answers{
  font-weight: 700;
  color: rgba(15, 23, 42, .75);
}

/* Tighten on small screens */
@media (max-width: 420px){
  body.ng .home-feed__list{
    padding: 16px 12px 12px !important;
  }
  body.ng .home-feed__item{
    padding: 11px 11px 9px !important;
  }
}

/* ===== /LATEST QUESTIONS (Aio panel v2) ===== */

/* --- Home: Most Common Repairs (Guides & Videos) --- */
.home-popular__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.home-popular__item{ margin:0; }
.home-popular__item > a{
  display:block;
  text-decoration:none;
}
.home-popular__item img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:12px;
}
.home-popular__meta{ padding:10px 4px 0; }
.home-popular__meta h3{ margin:6px 0 6px; }
.home-popular__meta p{ margin:0; }

/* --- Home: Most Common Repairs (Guides & Videos) (force-win) --- */
body.ng .home-popular{ margin: 22px 0; }
body.ng .home-popular__title{ margin: 0 0 14px; }
body.ng ul.home-popular__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}
body.ng ul.home-popular__list > li.home-popular__item{
  margin: 0 !important;
  padding: 0 !important;
}
body.ng ul.home-popular__list > li.home-popular__item > a{
  display: block !important;
  text-decoration: none !important;
  text-align: left !important; /* defeat any inherited centering */
}
body.ng ul.home-popular__list > li.home-popular__item img{
  width: 100% !important;
  display: block !important;
  border-radius: 12px !important;

  /* keep thumbs sane across browsers */
  height: 140px !important;
  object-fit: cover !important;
}
body.ng .home-popular__meta{ padding: 10px 4px 0 !important; text-align:left !important; }
body.ng .home-popular__meta h3{ margin: 6px 0 6px !important; }
body.ng .home-popular__meta p{ margin: 0 !important; }

/* Mobile: 2-up grid, slightly shorter thumbs */
@media (max-width: 520px){
  body.ng ul.home-popular__list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body.ng ul.home-popular__list > li.home-popular__item img{
    height: 120px !important;
  }
}

/* Tiny phones: 1-up grid */
@media (max-width: 360px){
  body.ng ul.home-popular__list{
    grid-template-columns: 1fr !important;
  }
}

/* --- Home Popular (no-scope fallback, in case body.ng is missing) --- */
.home-popular__list{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:16px !important;
}
.home-popular__item{ margin:0 !important; padding:0 !important; }
.home-popular__item > a{ display:block !important; text-align:left !important; text-decoration:none !important; }
.home-popular__item img{ width:100% !important; height:140px !important; object-fit:cover !important; display:block !important; border-radius:12px !important; }

@media (max-width:520px){
  .home-popular__list{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .home-popular__item img{ height:120px !important; }
}
@media (max-width:360px){
  .home-popular__list{ grid-template-columns:1fr !important; }
}

/* --- Home Popular: mobile polish (section padding, thumbs, spacing) --- */
section.home-popular{
  padding: 14px 12px !important;
}
section.home-popular .home-popular__title{
  margin: 0 0 12px 0 !important;
  line-height: 1.15 !important;
}
section.home-popular ul.home-popular__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

/* Card */
section.home-popular li.home-popular__item{
  margin: 0 !important;
  padding: 0 !important;
}
section.home-popular li.home-popular__item > a{
  display: block !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.06) !important;
}

/* Thumbnail: consistent aspect ratio */
section.home-popular li.home-popular__item img{
  width: 100% !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Meta spacing */
section.home-popular .home-popular__meta{
  padding: 10px 12px 12px 12px !important;
}
section.home-popular .home-popular__meta h3{
  margin: 6px 0 6px 0 !important;
  line-height: 1.15 !important;
}
section.home-popular .home-popular__meta p{
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Badges: tighten */
section.home-popular .badge{
  display: inline-block !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
}

/* Phones: 2-up grid */
@media (max-width: 520px){
  section.home-popular ul.home-popular__list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  section.home-popular .home-popular__meta{
    padding: 9px 10px 10px 10px !important;
  }
  section.home-popular .home-popular__meta h3{
    font-size: 14px !important;
  }
  section.home-popular .home-popular__meta p{
    font-size: 12px !important;
  }
}

/* Tiny phones: 1-up */
@media (max-width: 360px){
  section.home-popular ul.home-popular__list{
    grid-template-columns: 1fr !important;
  }
}

/* --- Home Topics: mobile pills + spacing (REAPPLY clean) --- */
section.home-popular-topics{
  padding: 14px 12px !important;
}
section.home-popular-topics .home-popular-topics__title{
  margin: 0 0 4px 0 !important;
  line-height: 1.15 !important;
}
section.home-popular-topics ul.home-popular-topics__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
section.home-popular-topics ul.home-popular-topics__list > li{
  margin: 0 !important;
  padding: 0 !important;
}
section.home-popular-topics ul.home-popular-topics__list > li > a{
  display: block !important;
  text-decoration: none !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.06) !important;
  line-height: 1.1 !important;
}

/* Slightly roomier on bigger phones */
@media (min-width: 420px){
  section.home-popular-topics ul.home-popular-topics__list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tiny phones: 1-up pills */
@media (max-width: 360px){
  section.home-popular-topics ul.home-popular-topics__list{
    grid-template-columns: 1fr !important;
  }
}

/* --- Home Popular: guide thumbs (make white/text thumbs readable) --- */
section.home-popular li.home-popular__item > a[href^="/guides/"] img{
  object-fit: contain !important;
  background: #f3f5f7 !important;
  padding: 10px !important;
}

/* --- Home Latest: mobile cards + tidy typography --- */
section.home-latest{
  padding: 14px 12px !important;
}
section.home-latest .home-latest__head{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px 0 !important;
}
section.home-latest .home-latest__title{
  margin: 0 !important;
  line-height: 1.15 !important;
}
section.home-latest .home-latest__more{
  white-space: nowrap !important;
  text-decoration: none !important;
}

section.home-latest ul.home-latest__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

section.home-latest li.home-latest__item{
  margin: 0 !important;
  padding: 0 !important;
}

section.home-latest a.home-latest__link{
  display: block !important;
  text-decoration: none !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.06) !important;
}

/* Subject clamp */
section.home-latest .home-latest__subject{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Vehicle/meta */
section.home-latest .home-latest__meta{
  display: block !important;
  opacity: .85 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.1 !important;
}

/* Replies + age row */
section.home-latest .home-latest__subrow{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: .75 !important;
  line-height: 1.1 !important;
}
section.home-latest .home-latest__ago{
  white-space: nowrap !important;
}

/* Mobile font sizing */
@media (max-width: 520px){
  section.home-latest a.home-latest__link{
    padding: 11px 11px !important;
  }
  section.home-latest .home-latest__subject{ font-size: 14px !important; }
  section.home-latest .home-latest__meta{ font-size: 12px !important; }
  section.home-latest .home-latest__subrow{ font-size: 12px !important; }
}

/* --- Home: spacing rhythm + remove topic chevrons --- */
section.home-popular-topics,
section.home-latest,
section.home-popular{
  margin: 0 0 14px 0 !important;
}

/* Kill legacy ">" chevrons on topic pills */
section.home-popular-topics ul.home-popular-topics__list > li > a::after{
  content: none !important;
  display: none !important;
}

/* Give the "See More Common Repairs" link breathing room */
section.home-popular .home-popular__more{
  margin-top: 12px !important;
}

/* --- Home: footer mobile stack + popular card description clamp --- */

/* Clamp card descriptions to keep the grid tidy */
@media (max-width: 520px){
  section.home-popular .home-popular__meta p{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Mobile footer: stack and center */
@media (max-width: 520px){
  .ng-footer .ng-footer__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .ng-footer .ng-footer__grid > *{
    text-align: center !important; /* overrides inline style on the second block */
  }
}

   NEXTGEN: HEADER SHOULD BE STICKY (NOT FIXED) + NO TOP GAP
   (2026-01-28) wins-last in custom-overrides.css
   ========================================================= */
body.ng .ng-header{
  position: sticky !important;
  top: 0 !important;
}

body.ng .ng-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* If any older rules made the header fixed, neutralize them */
body.ng header.ng-header[style*="position:fixed"],
body.ng header.ng-header[style*="position: fixed"]{
  position: sticky !important;
  top: 0 !important;
}

   NEXTGEN HOME: KILL THE MYSTERY GAP ABOVE HERO (2026-01-28)
   Scoped: only affects homepage hero section.
   ========================================================= */
body.ng main.ng-main > section.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If any desktop rule is translating/pushing the hero inner wrapper */
body.ng main.ng-main > section.hero .hero__inner{
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
}

/* Absolute last resort: if something is positioning the hero down */
body.ng main.ng-main > section.hero{
  top: auto !important;
}

   NEXTGEN: DISABLE LEGACY MOBILE NAV OVERLAY (2026-01-28)
   Prevent invisible fixed overlays (#mobile-nav / backdrop) from stealing taps.
   Scoped ONLY to NextGen pages.
   ========================================================= */
body.ng #mobile-nav,
body.ng #mobile-nav-backdrop{
  display: none !important;
  pointer-events: none !important;
}

   NEXTGEN: FIX DESKTOP HERO GAP CAUSED BY ng-drawer IN FLOW (2026-01-28)
   The ng-drawer markup sits between </header> and <main>.
   If it is not position:fixed, it can consume viewport height and push hero down.
   Scope: NextGen only (body.ng)
   ========================================================= */
@media (max-width: 991px){
body.ng .ng-drawer{
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 9999 !important;
  pointer-events: none !important; /* closed = ignore clicks */
}

/* children should be overlay too (belt + suspenders) */
body.ng .ng-drawer .ng-drawer__backdrop{
  position: fixed !important;
  inset: 0 !important;
}

body.ng .ng-drawer .ng-drawer__panel{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* when open, allow interaction */
body.ng .ng-drawer.is-open{
  pointer-events: auto !important;
}
}

   NEXTGEN HOME: ADD INTENTIONAL BREATHING ROOM UNDER HEADER (2026-01-28)
   We previously zeroed hero top spacing to kill a mystery gap.
   Now add back a small controlled gap so hero isn’t glued to header.
   Scope: homepage hero only.
   ========================================================= */
body.ng main.ng-main > section.hero{
  padding-top: 14px !important; /* desktop */
}

@media (max-width: 520px){
  body.ng main.ng-main > section.hero{
    padding-top: 10px !important; /* mobile */
  }
}

/* --- NextGen: Auth (Sign Up / Sign In) IO-style (2026-01-31) --- */
body.ng .ng-auth{
  max-width: 980px;
  margin: 18px auto 40px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  body.ng .ng-auth{ grid-template-columns: 1.1fr .9fr; gap: 18px; }
}

body.ng .ng-auth__card,
body.ng .ng-auth__side-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

body.ng .ng-auth__card{ padding: 18px; }
@media (min-width: 600px){ body.ng .ng-auth__card{ padding: 22px; } }

body.ng .ng-auth__header{ margin-bottom: 12px; }
body.ng .ng-auth__title{ margin: 0; font-size: 24px; line-height: 1.15; }
body.ng .ng-auth__sub{ margin: 8px 0 0; color: #666; font-size: 14px; }

body.ng .ng-auth__social{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: #111;
}
body.ng .ng-auth__social:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.06); }
body.ng .ng-auth__social-icon{
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #1877f2;
  color: #fff;
  font-family: Arial, sans-serif;
}

body.ng .ng-auth__divider{
  margin: 14px 0;
  position: relative;
  text-align: center;
}
body.ng .ng-auth__divider:before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background: rgba(0,0,0,.10);
}
body.ng .ng-auth__divider span{
  position: relative;
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  color: #666;
  font-size: 13px;
  text-transform: lowercase;
}

body.ng .ng-auth__form{ display: grid; gap: 10px; }
body.ng .ng-auth__label span{ display:block; font-size: 12px; color:#444; margin: 0 0 4px; }

body.ng .ng-auth__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: 15px;
  outline: none;
  background: #fff;
}
body.ng .ng-auth__input:focus{ box-shadow: 0 0 0 4px rgba(0,0,0,.06); }

body.ng .ng-auth__captcha{
  margin-top: 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}
body.ng .ng-auth__captcha-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
body.ng .ng-auth__captcha-label{ font-size: 12px; color:#444; font-weight: 700; }

body.ng .ng-auth__tos{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-top: 4px;
  color:#444;
  font-size: 13px;
}
body.ng .ng-auth__tos a{ text-decoration: underline; }

body.ng .ng-auth__submit{
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  background: #111;
  color: #fff;
}
body.ng .ng-auth__submit:hover{ opacity: .92; }

body.ng .ng-auth__fine{
  margin: 10px 0 0;
  font-size: 13px;
  color:#666;
  text-align: center;
}
body.ng .ng-auth__fine a{ text-decoration: underline; }

body.ng .ng-auth__side-card{ padding: 16px; }
body.ng .ng-auth__side-card h2{ margin: 0 0 10px; font-size: 16px; }
body.ng .ng-auth__side-card ul{ margin: 0 0 12px 18px; }
body.ng .ng-auth__side-card li{ margin: 6px 0; color:#333; font-size: 14px; }
body.ng .ng-auth__trust{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  color:#666;
  font-size: 13px;
}

/* Admin dashboard legacy layout -> NextGen grid feel */
body.ng #left, body.ng #right{
  max-width:980px;
  margin:0 auto;
  padding:0 12px;
}
body.ng #left .adminlinkbox{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
body.ng #left .adminlink{ margin:0 !important; }
body.ng #left .adminlink a{
  display:block;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
body.ng #left .adminlink a:hover{ text-decoration:underline; }

/* If the stats box is empty, collapse the empty area */
body.ng #right .adminlinkbox:empty{ display:none; }

/* --- NextGen: Admin dashboard FORCE-WIN (cards + kill legacy columns) --- */
body.ng main.ng-main #left,
body.ng main.ng-main #right{
  float: none !important;
  width: auto !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
}

/* Put left+right into a single stacked flow (stats under menu) */
body.ng main.ng-main #right{ margin-top: 14px !important; }

/* If legacy boxes impose weird padding/margins, normalize */
body.ng main.ng-main #left .box.white,
body.ng main.ng-main #right .box.white{
  border-radius: 14px;
}

/* Cards grid */
body.ng main.ng-main #left .adminlinkbox{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px 0 0 !important;
}

/* Handle empty stats box content safely */
body.ng main.ng-main #right .adminlinkbox,
body.ng main.ng-main #right .adminlinkbox:empty{
  display: none !important;
}

/* Make each link a real card */
body.ng main.ng-main #left .adminlinkbox .adminlink{
  margin: 0 !important;
  padding: 0 !important;
}
body.ng main.ng-main #left .adminlinkbox .adminlink a{
  display: block !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}
body.ng main.ng-main #left .adminlinkbox .adminlink a:hover{
  text-decoration: underline !important;
}

/* ovr touch 2026-01-31-183718 */

/* --- NextGen: Dashboard spacing polish (Aio) --- */
body.ng main.ng-main{
  padding-top: 18px;
  padding-bottom: 22px;
}

/* Center the legacy dashboard/admin containers inside NextGen main */
body.ng main.ng-main .dashboard,
body.ng main.ng-main #left,
body.ng main.ng-main #right{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* H1: slightly smaller + less top air */
body.ng main.ng-main h1{
  margin: 6px 0 12px !important;
  font-size: 26px !important;
}

/* --- NextGen: Dashboard header alignment (Aio) --- */
/* Align H1 with centered dashboard content (not full viewport) */
body.ng main.ng-main > h1{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* --- NextGen: Dashboard H1 alignment FINAL (Aio) --- */
/* Align "Dashboard" header with centered dashboard content */
body.ng main.ng-main h1{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* --- NextGen: Dashboard goback indent (Aio) --- */
body.ng main.ng-main .goback{
  max-width: 980px !important;
  margin: 10px auto 0 !important;     /* center the whole block */
  padding: 0 12px !important;         /* same inner gutter as H1/cards */
}
body.ng main.ng-main .goback a{
  display: inline-flex !important;
  align-items: center !important;
}

/* --- NextGen: Dashboard goback hardfix (Aio) --- */
body.ng main.ng-main .goback{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  float: none !important;

  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  max-width: 980px !important;
  margin: 10px auto 0 !important;
  padding: 0 12px !important;
}
body.ng main.ng-main .goback a{
  position: static !important;
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* --- NextGen: legacy .goback -> styled button --- */
body.ng .goback { margin-top: 14px; }
body.ng .goback a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}
body.ng .goback a:hover{ text-decoration: none; }
body.ng .gobackimg{ display:none !important; }

/* --- NextGen: Dashboard list facelift (scoped) --- */
body.ng .dashboard ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  gap: 10px;
}
body.ng .dashboard ul li#myaccount,
body.ng .dashboard ul li#expert,
body.ng .dashboard ul li#admin{
  font-weight: 700;
  margin-top: 10px;
  padding: 6px 2px;
}
body.ng .dashboard ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
}
body.ng .dashboard ul li a:hover{ text-decoration: none; }

/* slightly tighter on wide screens */
@media (min-width: 900px){
  body.ng .dashboard ul{ max-width: 520px; }
}

/* --- NextGen: Dashboard card chevron hint --- */
body.ng .dashboard ul li a:after{
  content: "›";
  opacity: .55;
  font-size: 18px;
  line-height: 1;
}

/* --- NextGen: Dashboard chevron alignment polish --- */
body.ng .dashboard ul li a{ gap: 10px; }
body.ng .dashboard ul li a:after{ margin-left: auto; }

/* MSG_BADGE */
#messages a { position: relative; }
#messages a .msgbadge{
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  display: none;
  vertical-align: middle;
  background: #d12c2c;
  color: #fff;
}

/* AIO: Standardize Section category guide lists (2026-02-10) */
.ng-section-guides .ng-guide-h2{
  margin: 18px 0 0;
  font-size: 18px;
}
.ng-section-guides ul.ng-guide-list{
  margin: 10px 0 0 18px;
}
.ng-section-guides li.ng-guide-item{
  margin: 7px 0;
}

/* AIO: Section guide "cards" (title + excerpt) (2026-02-10) */
.ng-section-guides ul.ng-guide-list{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.ng-section-guides li.ng-guide-item{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
}
.ng-section-guides a.ng-guide-title{
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.ng-section-guides .ng-guide-excerpt{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  opacity: .85;
}

   AIO: /section/ hub styling (cards)
   ========================================================= */
@media (min-width: 1px) {
  /* Scope to /section/ via canonical link to avoid global impact */
  .content.section ul.ng-list {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .content.section ul.ng-list > li {
    margin: 0;
    padding: 0;
  }

  .content.section ul.ng-list > li > a {
    display: block;
    padding: 14px 14px;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }

  .content.section ul.ng-list > li > a:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }

  .content.section ul.ng-list > li > a:focus {
    outline: 2px solid rgba(0,0,0,.22);
    outline-offset: 2px;
  }

  /* Make the hub intro paragraph breathe */
  .content.section > p {
    margin: 10px 0 14px 0;
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Responsive columns */
@media (min-width: 680px) {
  .content.section ul.ng-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (min-width: 1020px) {
  .content.section ul.ng-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

   AIO: /section/ hub card polish
   ========================================================= */
@media (min-width: 1px) {
  .content.section ul.ng-list > li > a {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    will-change: transform;
  }

  .content.section ul.ng-list > li > a:hover {
    border-color: rgba(0,0,0,.14);
  }

  /* If links include headings/spans, make them breathe without breaking unknown markup */
  .content.section ul.ng-list > li > a * {
    line-height: 1.25;
  }
}

/* --- AIO: admin/user dropdown keep-open + hover-bridge (preview) --- */
/* Fix: dropdown disappears when moving mouse from the user/admin button to the submenu. */
#user { position: relative; }

/* Be conservative: only affect submenus inside #user */
#user ul { 
  /* no change to typography here */
}

/* Ensure submenus are above header chrome */
#user ul,
#user ul.admin {
  z-index: 99999 !important;
}

/* Keep menus open when hovering/focusing either the trigger LI or the submenu itself */
#user:hover > ul,
#user:focus-within > ul,
#user > ul:hover,
#user:hover ul.admin,
#user:focus-within ul.admin,
#user ul.admin:hover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover-bridge: invisible strip above submenu so pointer can travel without leaving hover state */
#user > ul,
#user ul.admin {
  position: absolute; /* only applies if your existing CSS already uses absolute; harmless otherwise */
  top: 100%;
}

#user > ul::before,
#user ul.admin::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;     /* bridge height */
  height: 10px;   /* bridge height */
}

/* Optional: prevent “dead” submenu due to pointer-events somewhere else */
#user > ul,
#user ul.admin,
#user > ul *,
#user ul.admin * {
  pointer-events: auto !important;
}
/* --- AIO: end admin/user dropdown patch --- */

/* --- AIO: drawer-only mode (hide legacy hover account/admin panel) --- */
body.ng li#user > .panel { display: none !important; }
/* --- AIO: end drawer-only mode --- */

/* --- AIO: DESKTOP SIDEBAR (CLEAN SINGLE BLOCK) --- */
@media (min-width: 992px){
  :root{ --aio-brand-nudge: -260px; }
  :root { --aio-sidebar-w: 300px; }

  .ng-drawer{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--aio-sidebar-w) !important;
    max-width: var(--aio-sidebar-w) !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    overflow: visible !important;

    z-index: 99999 !important;
  }

  .ng-drawer__backdrop{ display:none !important; }

  .ng-drawer__panel{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    transform: none !important;
    translate: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: #0f1720 !important;
    overflow-y: auto !important;
  }

  /* Sidebar always open on desktop */
  .ng-menu{ display:none !important; }
  .ng-drawer__close{ display:none !important; }

  /* Shift site right */
  .ng-header, .ng-main, .ng-footer{
    margin-left: var(--aio-sidebar-w) !important;
  }

  /* Readable links */
  .ng-drawer__panel a{ color:#fff !important; }
}
/* --- AIO: END DESKTOP SIDEBAR (CLEAN SINGLE BLOCK) --- */

   AIO: DESKTOP DRAWER FORCE VISIBLE (wins over deprecated rules)
   Reason: custom-overrides.css loads AFTER sidebar-desktop.css,
           and still contains old "drawer closed" !important rules.
   ============================================================ */
@media (min-width: 1024px){

  /* Ensure drawer + panel are visible and interactive on desktop */
  body.ng .ng-drawer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.ng .ng-drawer__panel{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* If aria-hidden stays "true" on desktop, do NOT allow it to hide the panel */
  body.ng .ng-drawer[aria-hidden="true"]{
    pointer-events: auto !important;
  }
  body.ng .ng-drawer[aria-hidden="true"] .ng-drawer__panel{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Desktop: no overlay/backdrop */
  body.ng .ng-drawer__backdrop{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

   AIO: DESKTOP DRAWER GEOMETRY FORCE (2026-02-23)
   Goal: Make the left sidebar physically occupy the reserved lane.
   Why here: custom-overrides.css loads AFTER sidebar-desktop.css.
   ============================================================ */
@media (min-width: 1024px){

  :root{
    --aio-sidebar-w: 312px;
    --aio-header-h: 64px;
  }

  /* Drawer container: lock it to the viewport */
  body.ng .ng-drawer{
    position: fixed !important;
    left: 0 !important;
    top: var(--aio-header-h) !important;
    width: var(--aio-sidebar-w) !important;
    max-width: var(--aio-sidebar-w) !important;
    height: calc(100vh - var(--aio-header-h)) !important;
    overflow: hidden !important;
    z-index: 40 !important; /* under header, above page background */
    background: #fff !important; /* ensure it paints */
    border-right: 1px solid rgba(0,0,0,0.10) !important;
  }

  /* Panel: same geometry as container (some CSS targets panel instead) */
  body.ng .ng-drawer__panel{
    position: fixed !important;
    left: 0 !important;
    top: var(--aio-header-h) !important;
    width: var(--aio-sidebar-w) !important;
    max-width: var(--aio-sidebar-w) !important;
    height: calc(100vh - var(--aio-header-h)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 41 !important;
    background: #fff !important;
    border-right: 1px solid rgba(0,0,0,0.10) !important;
    transform: none !important;
  }

  /* List scroll area */
  body.ng .ng-drawer__list{
    max-height: calc(100vh - var(--aio-header-h)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Desktop: no backdrop overlay */
  body.ng .ng-drawer__backdrop{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

   AIO: DESKTOP RAIL POLISH (2026-02-23)
   Goal: Make the left rail feel intentional + integrated with header.
   - Adds a subtle rail background so the empty lane disappears.
   - Keeps main content clean and bright.
   ============================================================ */
@media (min-width: 1024px){

  :root{
    --aio-sidebar-w: 312px;
    --aio-header-h: 64px;
    --aio-rail-bg: #f6f7f9; /* soft neutral, not bright white */
    --aio-rail-border: rgba(0,0,0,0.08);
  }

  /* Paint the rail behind the drawer so it never looks empty */
  body.ng{
    background:
      linear-gradient(to right,
        var(--aio-rail-bg) 0,
        var(--aio-rail-bg) var(--aio-sidebar-w),
        #fff var(--aio-sidebar-w),
        #fff 100%) !important;
  }

  /* Header: add the same rail tone on the left so it feels connected */
  body.ng header.ng-header{
    background:
      linear-gradient(to right,
        var(--aio-rail-bg) 0,
        var(--aio-rail-bg) var(--aio-sidebar-w),
        #fff var(--aio-sidebar-w),
        #fff 100%) !important;
    border-bottom: 1px solid var(--aio-rail-border) !important;
  }

  /* Slightly soften sidebar interior so it feels “built-in” */
  body.ng .ng-drawer,
  body.ng .ng-drawer__panel{
    background: transparent !important; /* rail is painted by body/header */
    border-right: 1px solid var(--aio-rail-border) !important;
  }

  /* Optional: give sidebar links a little more modern “chip” hover */
  body.ng .ng-drawer__list a:hover{
    background: rgba(0,0,0,0.04) !important;
  }
}

   AIO: DESKTOP DRAWER TEXT + RAIL TONE FIX (2026-02-23)
   Problem: a legacy rule sets .ng-drawer__panel a { color:#fff !important; }
            making the desktop sidebar look "empty" on light backgrounds.
   Fix: Desktop-only restore readable link colors + subtle rail fill.
   ============================================================ */
@media (min-width: 1024px){

  :root{
    --aio-sidebar-w: 312px;
    --aio-header-h: 64px;
    --aio-rail-bg: #f6f7f9;
    --aio-rail-border: rgba(0,0,0,0.08);
    --aio-rail-text: #0f1720;
    --aio-rail-text-muted: rgba(15,23,32,0.72);
  }

  /* Ensure the rail lane is painted even if other wrappers are white */
  html, body.ng{
    background:
      linear-gradient(to right,
        var(--aio-rail-bg) 0,
        var(--aio-rail-bg) var(--aio-sidebar-w),
        #fff var(--aio-sidebar-w),
        #fff 100%) !important;
  }

  /* Desktop drawer: make sure it reads on light rail */
  body.ng .ng-drawer__panel,
  body.ng .ng-drawer__sheet{
    color: var(--aio-rail-text) !important;
  }

  body.ng .ng-drawer__panel a,
  body.ng .ng-drawer__panel .ng-link,
  body.ng .ng-drawer__sheet a,
  body.ng .ng-drawer__sheet .ng-link{
    color: var(--aio-rail-text) !important; /* beats the legacy #fff !important */
    text-decoration: none !important;
  }

  body.ng .ng-drawer__panel a:visited,
  body.ng .ng-drawer__sheet a:visited{
    color: var(--aio-rail-text) !important;
  }

  /* Make list items feel intentional on desktop */
  body.ng .ng-drawer__list{
    padding: 10px 10px 14px !important;
  }
  body.ng .ng-drawer__list a{
    border-radius: 10px !important;
  }
  body.ng .ng-drawer__list a:hover{
    background: rgba(0,0,0,0.04) !important;
  }

  /* Divider / subtle structure */
  body.ng .ng-drawer,
  body.ng .ng-drawer__panel{
    border-right: 1px solid var(--aio-rail-border) !important;
  }
}

   AIO: DESKTOP SIDEBAR POLISH (v3) (2026-02-23)
   Goal: Modernize the always-visible sidebar:
   - Better spacing/typography
   - Clear section separation
   - Nicer hover + subtle focus ring
   ============================================================ */
@media (min-width: 1024px){

  :root{
    --aio-sidebar-w: 312px;
    --aio-header-h: 64px;
    --aio-rail-bg: #f4f6f8;            /* slightly warmer/softer than v2 */
    --aio-rail-border: rgba(0,0,0,0.08);
    --aio-rail-text: #0f1720;
    --aio-rail-hover: rgba(15,23,32,0.05);
    --aio-rail-focus: rgba(0,122,195,0.22);
  }

  /* Rail paint (keep consistent) */
  html, body.ng{
    background:
      linear-gradient(to right,
        var(--aio-rail-bg) 0,
        var(--aio-rail-bg) var(--aio-sidebar-w),
        #fff var(--aio-sidebar-w),
        #fff 100%) !important;
  }

  /* Sidebar list: tighter + consistent */
  body.ng .ng-drawer__list{
    padding: 12px 14px 16px !important;
    margin: 0 !important;
  }

  body.ng .ng-drawer__list li{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng .ng-drawer__list a{
    display: block !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    color: var(--aio-rail-text) !important;
  }

  body.ng .ng-drawer__list a:hover{
    background: var(--aio-rail-hover) !important;
  }

  body.ng .ng-drawer__list a:focus,
  body.ng .ng-drawer__list a:focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 3px var(--aio-rail-focus) !important;
  }

  /* Add a visual section break before "How It Works" (item 8 in your list) */
  body.ng .ng-drawer__list li:nth-child(8){
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--aio-rail-border) !important;
  }

  /* Add another break before Login (item 12) */
  body.ng .ng-drawer__list li:nth-child(12){
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--aio-rail-border) !important;
  }
}

   NextGen Drawer: geometry + layering + scroll lock
   NOTE: MOBILE ONLY. Desktop rail is owned by sidebar-desktop.css.
   ========================= */
@media (max-width: 1023px){

  .ng-drawer__backdrop{
    position: fixed;
    inset: 0;
    z-index: 9998;
  }

  .ng-drawer__panel{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 360px);
    max-width: 360px;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

}

/* AIO: DESKTOP DRAWER ALWAYS OPEN START
   Force left nav to be permanently visible on desktop, regardless of aria-hidden.
   (Mobile drawer behavior remains controlled by existing rules.) */
@media (min-width: 1024px){

  /* Even if JS leaves aria-hidden="true", treat it as open on desktop */
  body.ng .ng-drawer[aria-hidden="true"],
  body.ng .ng-drawer[aria-hidden="false"]{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
  }

  /* Panel must never be translated off-canvas on desktop */
  body.ng .ng-drawer[aria-hidden="true"] .ng-drawer__panel,
  body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__panel,
  body.ng .ng-drawer.is-open .ng-drawer__panel{
    transform: none !important;
    translate: none !important;
    left: 0 !important;
    position: fixed !important;
  }

  /* Backdrop/overlay disabled on desktop */
  body.ng .ng-drawer[aria-hidden="true"] .ng-drawer__backdrop,
  body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__backdrop{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Close button not needed when it's a fixed sidebar */
  body.ng .ng-drawer__close{ display: none !important; }
}
/* AIO: DESKTOP DRAWER ALWAYS OPEN END */

/* AIO: HEADER + RAIL POLISH START
   Desktop-only cosmetics: make header/rail feel integrated + modern. */
@media (min-width: 1024px){

  /* Global sizing knobs (easy to tweak) */
  :root{
    --aio-header-h: 64px;
    --aio-rail-radius: 12px;
    --aio-rail-gap: 10px;
  }

  /* Header: consistent height, subtle separation */
  body.ng header.ng-header{
    height: var(--aio-header-h) !important;
    min-height: var(--aio-header-h) !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  }

  /* Header inner: vertically centered and aligned with main column */
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    display: flex !important;
    align-items: center !important;
    height: var(--aio-header-h) !important;
  }

  /* If header inner is being offset for the rail, keep it clean */
  body.ng header.ng-header > .ng-header__inner,
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    margin-left: var(--aio-sidebar-w) !important;
    width: calc(100% - var(--aio-sidebar-w)) !important;
  }

  /* Brand/logo: better vertical centering, reduce “floaty” feel */
  body.ng .ng-brand{
    display: flex !important;
    align-items: center !important;
    height: var(--aio-header-h) !important;
  }

  body.ng .ng-brand__logo{
    display: block !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Header actions: align buttons and tighten spacing */
  body.ng .ng-header__actions{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Rail container: same top as below header already, give it polish */
  body.ng .ng-drawer__panel{
    border-right: 1px solid rgba(0,0,0,0.08) !important;
    background: #fff !important;
  }

  /* Rail buttons/links: more “button-like”, consistent spacing */
  body.ng .ng-drawer__list{
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--aio-rail-gap) !important;
  }

  body.ng .ng-drawer__list a{
    border-radius: var(--aio-rail-radius) !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(0,0,0,0.03) !important;
    color: #111 !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
  }

  body.ng .ng-drawer__list a:hover{
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.12) !important;
  }

  /* Optional: make the “Home” item look active if it has aria-current */
  body.ng .ng-drawer__list a[aria-current="page"]{
    background: rgba(0,0,0,0.10) !important;
    border-color: rgba(0,0,0,0.16) !important;
  }
}

/* AIO: HEADER + RAIL POLISH START
   Desktop-only: dark integrated header + left rail, no visible scrollbar. */
@media (min-width: 1024px){

  :root{
    --aio-header-h: 64px;
    --aio-frame-bg: #0b111b;          /* deep navy/black */
    --aio-frame-border: rgba(255,255,255,0.10);
    --aio-frame-shadow: 0 2px 14px rgba(0,0,0,0.22);

    --aio-rail-w: var(--aio-sidebar-w); /* already set in sidebar-desktop.css */
    --aio-rail-gap: 10px;
    --aio-rail-radius: 12px;

    --aio-rail-item-bg: rgba(255,255,255,0.06);
    --aio-rail-item-border: rgba(255,255,255,0.10);
    --aio-rail-item-hover: rgba(255,255,255,0.10);
    --aio-rail-text: rgba(255,255,255,0.92);
  }

  /* =========================
     HEADER (full-width dark bar)
     ========================= */
  body.ng header.ng-header{
    height: var(--aio-header-h) !important;
    min-height: var(--aio-header-h) !important;
    background: var(--aio-frame-bg) !important;
    border-bottom: 1px solid var(--aio-frame-border) !important;
    box-shadow: var(--aio-frame-shadow) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Keep header inner aligned with main column (to the right of the rail) */
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    height: var(--aio-header-h) !important;
    display: flex !important;
    align-items: center !important;

    margin-left: var(--aio-rail-w) !important;
    width: calc(100% - var(--aio-rail-w)) !important;
  }

  /* Brand alignment */
  body.ng .ng-brand{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: var(--aio-header-h) !important;
  }

  /* Bob & Ken mark (img) sits nicely on dark header */
  body.ng header.ng-header .ng-brand__mark{
    opacity: 1 !important;
    filter: none !important;
  }

  /* Header actions (Login/Join) — invert for dark header */
  body.ng header.ng-header .ng-header__actions{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.ng header.ng-header .ng-header__actions a.ng-btn,
  body.ng header.ng-header .ng-header__actions a.ng-btn--ghost{
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.92) !important;
    background: transparent !important;
  }

  body.ng header.ng-header .ng-header__actions a.ng-btn:not(.ng-btn--ghost){
    background: rgba(255,255,255,0.10) !important;
  }

  body.ng header.ng-header .ng-header__actions a.ng-btn:hover{
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.26) !important;
  }

  /* Hamburger: hidden on desktop rail layout */
  body.ng header.ng-header .ng-menu{ display: none !important; }

  /* =========================
     LEFT RAIL (dark, integrated)
     ========================= */
  body.ng .ng-drawer{
    background: var(--aio-frame-bg) !important;
    border-right: 1px solid var(--aio-frame-border) !important;
  }

  body.ng .ng-drawer__panel{
    background: var(--aio-frame-bg) !important;
    border-right: 0 !important;
    box-shadow: none !important;

    /* If content exceeds viewport, allow scroll, but hide scrollbar */
    overflow-y: auto !important;
    scrollbar-width: none;           /* Firefox */
  }
  body.ng .ng-drawer__panel::-webkit-scrollbar{ width: 0; height: 0; } /* Chrome/Safari */

  /* Remove the little top row brand/close in the rail (not needed on desktop) */
  body.ng .ng-drawer__top{ display: none !important; }

  /* Rail list styling */
  body.ng .ng-drawer__list{
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--aio-rail-gap) !important;
  }

  body.ng .ng-drawer__list li{ margin: 0 !important; }

  body.ng .ng-drawer__list a{
    display: block !important;
    padding: 12px 14px !important;
    border-radius: var(--aio-rail-radius) !important;

    background: var(--aio-rail-item-bg) !important;
    border: 1px solid var(--aio-rail-item-border) !important;

    color: var(--aio-rail-text) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  body.ng .ng-drawer__list a:hover{
    background: var(--aio-rail-item-hover) !important;
  }

  /* Make the final two items (Login/Become a Member) look consistent */
  body.ng .ng-drawer__list a[rel~="nofollow"]{
    opacity: 0.98 !important;
  }
}
/* AIO: HEADER + RAIL POLISH END */

/* AIO: FRAME COLOR FIX START
   Desktop-only: header/rail unified color, fill top-left corner, hide scrollbar, kill debug borders. */
@media (min-width: 1024px){

  :root{
    --aio-header-h: 64px;
    --aio-frame-bg: #1B262C;                 /* Kenny requested */
    --aio-frame-border: rgba(255,255,255,0.10);
    --aio-frame-shadow: 0 2px 14px rgba(0,0,0,0.22);
  }

  /* Header: full-width color */
  body.ng header.ng-header{
    background: var(--aio-frame-bg) !important;
    border-bottom: 1px solid var(--aio-frame-border) !important;
    box-shadow: var(--aio-frame-shadow) !important;
  }

  /* Header inner aligned to the right of the rail (keeps layout) */
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    margin-left: var(--aio-sidebar-w) !important;
    width: calc(100% - var(--aio-sidebar-w)) !important;
  }

  /* =========
     TOP-LEFT CORNER FILL:
     Make the rail background extend up behind the header area (no white gap)
     ========= */
  body.ng .ng-drawer{
    top: 0 !important;
    height: 100vh !important;
    background: var(--aio-frame-bg) !important;
    border-right: 1px solid var(--aio-frame-border) !important;

    /* absolutely kill any debug border/outline */
    outline: none !important;
    box-shadow: none !important;
  }

  body.ng .ng-drawer__panel{
    top: 0 !important;
    height: 100vh !important;
    background: var(--aio-frame-bg) !important;

    /* start the clickable list BELOW the header */
    padding-top: var(--aio-header-h) !important;

    /* kill red borders/outlines if any exist */
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    /* allow scroll if needed, but hide scrollbar */
    overflow-y: auto !important;
    scrollbar-width: none;
  }
  body.ng .ng-drawer__panel::-webkit-scrollbar{ width: 0; height: 0; }

  /* Hide the drawer “top row” (brand/close) on desktop rail */
  body.ng .ng-drawer__top{ display: none !important; }

  /* Backdrop never on desktop rail */
  body.ng .ng-drawer__backdrop{ display: none !important; }

  /* List: also hide scrollbar */
  body.ng .ng-drawer__list{
    scrollbar-width: none;
  }
  body.ng .ng-drawer__list::-webkit-scrollbar{ width: 0; height: 0; }
}
/* AIO: FRAME COLOR FIX END */

/* AIO: RAIL WIDTH + HEADER HEIGHT START
   Desktop-only: slimmer rail, header 5px shorter, slightly larger logo, hero width matches body sections. */
@media (min-width: 1024px){

  /* Kenny tweaks */
  :root{
    --aio-header-h: 59px;     /* 64 - 5 */
    --aio-sidebar-w: 260px;   /* rail width */
  }

  /* Rail width (drawer + panel) */
  body.ng .ng-drawer,
  body.ng .ng-drawer__panel{
    width: var(--aio-sidebar-w) !important;
    max-width: var(--aio-sidebar-w) !important;
  }

  /* Header height */
  body.ng header.ng-header{
    height: var(--aio-header-h) !important;
    min-height: var(--aio-header-h) !important;
  }

  /* Header inner stays aligned to the right of the rail */
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    margin-left: var(--aio-sidebar-w) !important;
    width: calc(100% - var(--aio-sidebar-w)) !important;
    height: var(--aio-header-h) !important;
  }

  /* Menu panel content starts below header */
  body.ng .ng-drawer__panel{
    padding-top: var(--aio-header-h) !important;
  }

  /* Slightly bigger logo in header (fills vertical space better) */
  body.ng header.ng-header .ng-brand__mark{
    height: 34px !important;     /* was ~30 */
    width: auto !important;
    max-height: calc(var(--aio-header-h) - 14px) !important;
  }

  /* HERO: reduce side whitespace to match the sections below */
  body.ng .hero .hero__inner{
    max-width: 1180px !important;
    width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* AIO: RAIL WIDTH + HEADER HEIGHT END */

/* AIO: HERO + LOGO SPECIFIC FIX START
   Desktop-only: hero width matches sections below (uses the MOST specific selector we saw),
   and logo fills header a bit more. */
@media (min-width: 1024px){

  /* HERO: match the selector that already exists earlier in the file */
  body.ng main.ng-main > section.hero .hero__inner{
    max-width: 1180px !important;
    width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Header logo: slightly larger */
  body.ng header.ng-header .ng-brand__mark{
    height: 36px !important; /* small bump */
    width: auto !important;
  }
}
/* AIO: HERO + LOGO SPECIFIC FIX END */

/* AIO: HERO TIGHTEN + READABILITY START
   Desktop-only: center hero content within the hero panel (single column) + improve contrast/readability. */
@media (min-width: 1024px){

  /* Logo: a touch bigger */
  body.ng header.ng-header .ng-brand__mark{
    height: 38px !important;
    width: auto !important;
  }

  /* HERO outer container: match the body column and center properly */
  body.ng main.ng-main > section.hero{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep hero panel centered in the content column */
  body.ng main.ng-main > section.hero .hero__inner{
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;

    /* KEY: single centered column */
    display: flex !important;
    justify-content: center !important;
  }

  /* Center the actual content so it doesn't drift left */
  body.ng main.ng-main > section.hero .hero__content{
    width: 100% !important;
    max-width: 860px !important;   /* tweak 820–900 */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The right column is empty on home — remove it so it can't steal layout width */
  body.ng main.ng-main > section.hero .hero__image{
    display: none !important;
  }

  /* Tighten vertical spacing slightly */
  body.ng main.ng-main > section.hero .hero__content{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Readability: brighten key text on dark hero */
  body.ng main.ng-main > section.hero .hero__eyebrow{
    color: rgba(255,255,255,0.85) !important;
    letter-spacing: 0.08em !important;
  }
  body.ng main.ng-main > section.hero .hero__title{
    color: rgba(255,255,255,0.96) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  }
  body.ng main.ng-main > section.hero .hero__subtitle{
    color: rgba(255,255,255,0.78) !important;
  }
  body.ng main.ng-main > section.hero .hero__trust-badges,
  body.ng main.ng-main > section.hero .hero__trust-badges strong{
    color: rgba(255,255,255,0.70) !important;
  }
  body.ng main.ng-main > section.hero .hero__stat-label{
    color: rgba(255,255,255,0.70) !important;
  }
}
/* AIO: HERO TIGHTEN + READABILITY END */

/* AIO: HOME SECTIONS CENTER START
   Desktop-only: Center "Trusted by Drivers" + "How 2CarPros Works" into same content column as hero. */
@media (min-width: 1024px){

  /* Trusted by Drivers (home-reviews) */
  body.ng main.ng-main > section.home-reviews{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.ng main.ng-main > section.home-reviews .home-reviews__inner{
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* How it Works (home-how) */
  body.ng main.ng-main > section.home-how{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.ng main.ng-main > section.home-how .home-how__inner{
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* AIO: HOME SECTIONS CENTER END */

/* AIO: RAIL PANEL HEIGHT FIX START
   V8 POLISH (desktop): header 58->52 (~10% more), slightly tighter pills, and bottom lift for last item. */
@media (min-width: 1024px){

  /* ===== Header: reduce ~10% more (58px -> 52px) ===== */
  body.ng{ --aio-header-h: 52px !important; }

  body.ng header.ng-header{
    height: var(--aio-header-h) !important;
    min-height: var(--aio-header-h) !important;
  }
  body.ng header.ng-header > .ng-wrap.ng-header__inner{
    height: var(--aio-header-h) !important;
  }
  body.ng header.ng-header .ng-brand__mark{
    max-height: calc(var(--aio-header-h) - 12px) !important;
  }

  /* ===== Rail panel: fill under header, no scroll ===== */
  body.ng .ng-drawer .ng-drawer__panel,
  body.ng .ng-drawer[aria-hidden="true"]  .ng-drawer__panel,
  body.ng .ng-drawer[aria-hidden="false"] .ng-drawer__panel,
  body.ng .ng-drawer.is-open .ng-drawer__panel{
    position: fixed !important;
    top: var(--aio-header-h) !important;
    bottom: 0 !important;

    height: auto !important;
    max-height: none !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important; /* KEY: no rail scrollbar */
  }

  /* Remove the desktop-only top gap above Home */
  body.ng .ng-drawer__top{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove the two section spacer paddings */
  body.ng .ng-drawer__list li:nth-child(8),
  body.ng .ng-drawer__list li:nth-child(12){
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  /* List: keep a little breathing room at bottom so last pill isn't glued to the edge */
  body.ng .ng-drawer__list{
    margin: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important; /* <-- lifts "Become a Member" off the bottom */
    max-height: none !important;
    height: auto !important;
  }

  /* Pills: tighten slightly more */
  body.ng .ng-drawer__list a,
  body.ng .ng-drawer__list button{
    min-height: 36px !important;
    padding: 5px 12px !important;
    font-size: 12.75px !important;
    line-height: 1.15 !important;
  }

  body.ng .ng-drawer__list li{
    margin: 0 0 5px 0 !important;
  }
  body.ng .ng-drawer__list li:last-child{
    margin-bottom: 0 !important;
  }
}

/* Short-screen insurance (still no scroll) */
@media (min-width: 1024px) and (max-height: 780px){
  body.ng .ng-drawer__list a,
  body.ng .ng-drawer__list button{
    min-height: 34px !important;
    padding: 4px 12px !important;
    font-size: 12.5px !important;
  }
  body.ng .ng-drawer__list li{ margin-bottom: 4px !important; }
}
/* AIO: RAIL PANEL HEIGHT FIX END */

/* AIO: RAIL PILL TEXT ALIGN START
   Desktop-only: make left-rail pill labels vertically centered + uniform regardless of a/button/span structure. */
@media (min-width: 1024px){

  /* Make each pill a flex row so text is always vertically centered */
  body.ng .ng-drawer__list a,
  body.ng .ng-drawer__list button{
    display: flex !important;
    align-items: center !important;        /* vertical center */
    justify-content: flex-start !important; /* keep left aligned */
    line-height: 1.1 !important;           /* prevent “text rides high” */
    box-sizing: border-box !important;
  }

  /* If the label is wrapped (span/em/strong), remove weird baseline spacing */
  body.ng .ng-drawer__list a > span,
  body.ng .ng-drawer__list a > strong,
  body.ng .ng-drawer__list a > em,
  body.ng .ng-drawer__list button > span,
  body.ng .ng-drawer__list button > strong,
  body.ng .ng-drawer__list button > em{
    display: block !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Prevent icons or inline elements from nudging text baseline */
  body.ng .ng-drawer__list a > * ,
  body.ng .ng-drawer__list button > *{
    align-self: center !important;
  }
}
/* AIO: RAIL PILL TEXT ALIGN END */

/* AIO: RAIL WIDTH TIGHTEN START
   Desktop-only: reduce rail width + slightly tighten pill padding/gap to reclaim main content space. */
@media (min-width: 1024px){

  /* Rail width (was being overridden to 300–312px). 240px feels tight but still premium. */
  body.ng{
    --aio-sidebar-w: 240px !important;
  }

  /* Slightly tighter vertical rhythm (optional, but helps the “air” feel intentional) */
  body.ng{
    --aio-rail-gap: 8px !important;
  }

  /* Pill internal padding: reduces “empty space” to the right without making it cramped */
  body.ng .ng-drawer__list a,
  body.ng .ng-drawer__list button{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
 /* AIO: RAIL WIDTH TIGHTEN END */

/* AIO: HEADER INNER CENTER START
   Desktop-only: center the header content within the main lane (match hero/reviews centering). */
@media (min-width: 1024px){

  /* Center the inner container */
  body.ng header.ng-header > .ng-wrap.ng-header__inner,
  body.ng header.ng-header > .ng-header__inner{
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* remove “bias” padding that can make it look left-shifted */
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Ensure actions stay on the right edge inside the centered container */
  body.ng header.ng-header .ng-header__actions{
    margin-left: auto !important;
  }
}
/* AIO: HEADER INNER CENTER END */

/* AIO: NEXTGEN HEADER CENTER-TO-HERO START

/* AIO: HEADER HEIGHT LOCK START
   Goal: reduce header bar height ~10% by controlling the container, not just button text.
*/
:root{ --aio-header-h: 54px; }
header.ng-header{ height: var(--aio-header-h) !important; }
header.ng-header .ng-header__inner{ height: 100% !important; display:flex !important; align-items:center !important; }
header.ng-header .ng-header__actions{ display:flex !important; align-items:center !important; }
header.ng-header .ng-header__actions a.ng-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; }
/* AIO: HEADER HEIGHT LOCK END */

   Goal:
   - Keep menu perfect (left) + actions (right)
   - Center the brand over the CONTENT/HERO area (accounting for desktop sidebar)
   - Tighten header height ~10%
*/

/* Tighten header height */
.ng-header{ padding-top:0 !important; padding-bottom:0 !important; }
.ng-header .ng-header__inner{ padding-top:4px !important; padding-bottom:4px !important; }

/* Tighten controls */
.ng-header .ng-header__actions a.ng-btn{
  height:25px !important;
  line-height:25px !important;
  padding:0 10px !important;
}

/* Tighten logo/badge */
.ng-header .ng-brand__logo{ height:29px !important; }
.ng-header .ng-brand__mark{ height:14px !important; }

/* Cancel homepage nudges */
.ng-header .ng-brand{ margin-left:0 !important; transform:none !important; }

/* Desktop: center brand over CONTENT (viewport-center + sidebar/2) */
@media (min-width: 992px){
  .ng-header .ng-header__inner{ position:relative !important; }
  .ng-header .ng-brand{
    position:absolute !important;
    left: calc(50% + (var(--aio-sidebar-w, 0px) / 2) + var(--aio-brand-nudge, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
  }
}

/* Mobile/tablet: no sidebar offset */
@media (max-width: 991px){
  .ng-header .ng-brand{ position:static !important; transform:none !important; }
}

/* AIO: NEXTGEN HEADER CENTER-TO-HERO END */

/* AIO: MOBILE HEADER LAYOUT V2 START
   Goal: mobile header elements must not overlap.
   - Hamburger stays left
   - Login/Join stay right (clickable)
   - Brand occupies the middle and clamps (no peeking behind buttons)
   Desktop rules unaffected.
*/
@media (max-width: 991px){

  /* Ensure our desktop centering nudge does NOT apply on mobile */
  :root{ --aio-brand-nudge: 0px; }

  header.ng-header .ng-header__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: relative !important;
  }

  /* Left: hamburger / drawer toggle area (shrink-to-fit) */
  header.ng-header .ng-header__menu,
  header.ng-header .ng-header__toggle,
  header.ng-header .ng-drawer__toggle,
  header.ng-header .ng-header__hamburger{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Middle: brand (must never overlap actions) */
  header.ng-header .ng-brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;             /* KEY for flex shrink */
    overflow: hidden !important;          /* clip if needed */
    max-width: calc(100% - 150px) !important; /* reserve room for Login/Join slab */
    position: relative !important;
    z-index: 10 !important;
  }

  header.ng-header .ng-brand__mark{
    max-width: 100% !important;
    height: 14px !important;
    transform: none !important;           /* kill any prior translate */
  }

  /* Right: actions (must stay on top + shrink-to-fit) */
  header.ng-header .ng-header__actions{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 30 !important;               /* buttons always clickable */
    margin-left: 6px !important;
    background: transparent !important;
  }
}
/* AIO: MOBILE HEADER LAYOUT V2 END */

/* AIO: MOBILE BRAND CENTER TWEAK START
   Goal: center the logo between hamburger (left) and Login/Join (right) WITHOUT overlap.
*/
@media (max-width: 991px){
  header.ng-header .ng-brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* tiny cosmetic nudge right so it reads visually centered */
  header.ng-header .ng-brand__mark{
    transform: translateX(-7px) !important;
  }
}
/* AIO: MOBILE BRAND CENTER TWEAK END */

/* AIO: MOBILE ACTIONS TIGHTEN START
   Shrink Login/Join container to true content width
*/
@media (max-width: 991px){

  header.ng-header .ng-header__actions{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  header.ng-header .ng-header__actions a,
  header.ng-header .ng-header__actions button{
    padding: 4px 8px !important;
  }

}

/* AIO: HEADER PERFECT FREEZE MARKER
   GOLDEN bundle: GOLDEN-header-perfect-2026-02-25-130730.tgz
   SHA256 custom-overrides.css: 044f93fbc1a1c8e32bb8acc6087f0bdd6af8c60fdd46d503140b1da7ac3b52d2
   SHA256 header.php:           442a16175dadb5968ae1e7cd91995d24ed300a429713644d45ea86ce84eccbc8
*/

/* AIO: HERO ALIGNMENT V2 START
   Homepage hero uses .hero/.hero__*
   - Desktop: center subtitle paragraph (it was reading left-skewed)
   - Mobile: vertically center hero content within the hero cell
   NOTE: Header is frozen; do NOT modify header rules here.
*/

/* Desktop: center hero text + constrain subtitle width so it feels balanced */
@media (min-width: 992px){
  .hero__content{
    text-align: center !important;
  }
  .hero__subtitle{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 720px !important;
  }
}

/* Mobile: center hero block vertically (fix “text too high”) */
@media (max-width: 991px){
  .hero__inner{
    display: flex !important;
    align-items: center !important;
  }
  .hero__content{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}
/* AIO: HERO ALIGNMENT V2 END */

/* AIO: SEARCH PAGE START */
/* Internal search styling (search.php) */
.search-page{
  max-width: 980px;
  margin: 18px auto 40px;
  padding: 0 14px 28px;
}
.search-page__title{
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.search-page__subline{
  margin: 0 0 16px;
  color: #555;
  font-size: .95rem;
}
.search-results__count{
  margin: 10px 0 14px;
  font-size: .9rem;
  color: #777;
}

/* results */
.search-result{
  transition: box-shadow .18s ease, transform .18s ease;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.search-result:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.search-result__title{
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  margin: 0 0 6px;
  line-height: 1.25;
}
.search-result__title a{
  color: inherit;
  text-decoration: none;
}
.search-result__title a:hover{
  text-decoration: underline;
}
.search-result__meta{
  font-size: .8rem;
  color: #888;
  margin-bottom: 8px;
}
.search-result__type-badge{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1b6fb8;
  font-size: .72rem;
  font-weight: 700;
  margin-right: 8px;
}
.search-result__snippet{
  line-height: 1.45;
  font-size: .92rem;
  color: #333;
  margin: 0;
}

/* highlight */
.search-result__snippet mark{
  background: rgba(255, 214, 102, .55);
  padding: 0 .15em;
  border-radius: .2em;
}

/* empty/error */
.search-empty{
  margin-top: 16px;
  color: #666;
}
.search-error{
  margin-top: 16px;
  color: #c00;
  font-size: .92rem;
}

@media (min-width: 700px){
  .search-page__title{ font-size: 1.85rem; }
  .search-result{ padding: 16px 18px; }
}

/* refine bar */
.search-refine{margin:10px 0 14px}
.search-refine__label{display:block;font-size:.78rem;color:#777;margin:0 0 6px}
.search-refine__row{display:flex;gap:8px;align-items:center}
.search-refine__input{flex:1;min-width:0;padding:10px 12px;border:1px solid #ddd;border-radius:12px;font-size:.95rem;outline:none}
.search-refine__input:focus{border-color:#b8cde6;box-shadow:0 0 0 3px rgba(27,111,184,.12)}
.search-refine__btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;border:1px solid #d7d7d7;background:#fff;font-weight:700;font-size:.9rem;white-space:nowrap;text-decoration:none;color:inherit}
.search-refine__btn:hover{box-shadow:0 3px 10px rgba(0,0,0,.06)}
.search-refine__btn--ghost{opacity:.85}

/* AIO: SEARCH PAGE END */

/* AIO: SEARCH SUGGEST START */
/* Autocomplete dropdown for search refine bar */
.search-refine__row{ position: relative; }

.search-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none;              /* JS toggles to block */
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  overflow: hidden;
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
}

.search-suggest__item{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  font-size: .92rem;
  line-height: 1.25;
  border-top: 1px solid #f3f3f3;
}
.search-suggest__item:first-child{ border-top: 0; }

.search-suggest__item:hover,
.search-suggest__item[aria-selected="true"]{
  background: #f6f9ff;
}
/* AIO: SEARCH SUGGEST END */

/* AIO: HERO SIMPLE SEARCH CSS START */
/* v8: desktop polish — force trust line BELOW stats + centered; KEEP v5 mobile fix */

/* Desktop: center the CONTENT column inside the grid cell */
@media (min-width: 980px){
  body.ng .hero__content{
    justify-self: center;
    width: 100%;
    max-width: 820px;
  }
}

/* Desktop: constrain + center the search area */
body.ng .hero__search{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
body.ng .hero__search-row{
  justify-content: center;
}
body.ng .hero__search-input{
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop: center stats */
body.ng .hero__stats{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: TRUST line must break to its own row and center */
@media (min-width: 641px){
  body.ng .hero__trust-badges{
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    flex-basis: 100%;     /* if parent is flex */
    grid-column: 1 / -1;  /* if parent is grid */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Minor: tighten vertical rhythm a touch (desktop only) */
@media (min-width: 641px){
  body.ng .hero__search{ margin-top: 4px; }
  body.ng .hero__stats{ margin-top: 8px; }
}

/* ===== v5 MOBILE FIX (DO NOT TOUCH) ===== */
@media (max-width: 640px){
  /* Stack */
  .hero__search-row{
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  /* KEY: kill the pill container on the row (it comes from body.ng earlier) */
  body.ng .hero__search-row{
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Give each control its own pill */
  body.ng .hero__search-input{
    width: 100%;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 16px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    border: 1px solid rgba(197,211,226,1) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  body.ng .hero__search-button{
    width: 100%;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 18px !important;
    border-radius: 999px !important;
    line-height: 46px;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}
/* ===== /v5 MOBILE FIX ===== */

/* AIO: HERO SIMPLE SEARCH CSS END */

/* ===== AIO: HOME LINKS PANEL WIDTH TUNE (2026-03-17) =====
   Keep side room for future skyscraper ads while making the
   Top Level Site Links + Popular Repair Topics panel feel less stretched.
*/
body.ng .home-top-links,
body.ng .home-popular-topics{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* ===== /AIO: HOME LINKS PANEL WIDTH TUNE ===== */

/* ===== AIO: CENTER POPULAR HOME SECTIONS (2026-03-17) =====
   Center the two lower homepage sections that were still visually left-justified
   after the shared lane width tune.
*/
body.ng .home-popular-topics,
body.ng .home-popular{
  margin-left: auto !important;
  margin-right: auto !important;
}

body.ng .home-popular-topics__list,
body.ng .home-popular__list{
  margin-left: auto !important;
  margin-right: auto !important;
}

body.ng .home-popular__title,
body.ng .home-popular__more{
  max-width: 1120px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== /AIO: CENTER POPULAR HOME SECTIONS ===== */

/* ===== AIO: LOWER 3 SECTIONS ALIGN ONLY (2026-03-17) =====
   Align only Automotive Basics, Latest Questions, and Most Common Repairs
   to the same visual lane as the upper homepage panels.
   Do NOT touch Top Level Site Links / Popular Repair Topics.
*/
body.ng.ng-home section.home-latest,
body.ng.ng-home section.home-popular{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-latest{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.ng.ng-home section.home-popular{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.ng.ng-home section.home-latest .home-latest__inner{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-popular .home-popular__title,
body.ng.ng-home section.home-popular .home-popular__more{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.ng.ng-home section.home-popular ul.home-popular__list{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Automotive Basics block sits between upper and lower sections */
body.ng.ng-home .home-latest.home-autobasics{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ng.ng-home .home-latest.home-autobasics .home-latest__inner{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ===== /AIO: LOWER 3 SECTIONS ALIGN ONLY ===== */

/* ===== AIO: LATEST QUESTIONS NARROW ONLY (2026-03-17) =====
   Latest Questions is currently too wide versus the sections above/below.
   Narrow only this section to the shared inner lane.
*/
body.ng.ng-home section.home-latest:not(.home-autobasics){
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-latest:not(.home-autobasics) .home-latest__inner{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-latest:not(.home-autobasics) ul.home-latest__list{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ===== /AIO: LATEST QUESTIONS NARROW ONLY ===== */

/* ===== AIO: HOME FEED (LATEST QUESTIONS) WIDTH FIX (2026-03-17) =====
   The Latest Questions section is .home-feed, not .home-latest.
   Bring it onto the same shared lane as other sections.
*/
body.ng.ng-home section.home-feed{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-feed .home-feed__inner{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.ng.ng-home section.home-feed .home-feed__list{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ===== /AIO: HOME FEED WIDTH FIX ===== */

/* ===== AIO: HOME FOOTER STYLES (2026-03-17) ===== */
body.ng.ng-home .home-footer{
  max-width: 1180px !important;
  margin: 28px auto 0 !important;
  padding: 0 12px 24px !important;
  box-sizing: border-box !important;
}

body.ng.ng-home .home-footer__inner{
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
  padding: 22px 20px !important;
  box-sizing: border-box !important;
}

body.ng.ng-home .home-footer__top{
  margin: 0 0 16px 0 !important;
}

body.ng.ng-home .home-footer__title{
  margin: 0 0 6px 0 !important;
  line-height: 1.1 !important;
}

body.ng.ng-home .home-footer__subtitle{
  margin: 0 !important;
  color: rgba(15,23,42,.78) !important;
}

body.ng.ng-home .home-footer__grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

body.ng.ng-home .home-footer__card{
  background: rgba(0,0,0,.015) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

body.ng.ng-home .home-footer__cardhead{
  margin: 0 0 12px 0 !important;
}

body.ng.ng-home .home-footer__cardtitle{
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

body.ng.ng-home .home-footer__cardhint{
  color: rgba(15,23,42,.72) !important;
}

body.ng.ng-home .home-footer__iframe{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #000 !important;
}

body.ng.ng-home .home-footer__iframe iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

body.ng.ng-home .home-footer__socialrow{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
}

body.ng.ng-home .home-footer__socialbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  background: #eef6ff !important;
  border: 1px solid rgba(0,122,195,.16) !important;
}

body.ng.ng-home .home-footer__links{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px 0 !important;
}

body.ng.ng-home .home-footer__links a{
  text-decoration: none !important;
}

body.ng.ng-home .home-footer__toplink{
  display: inline-block !important;
  margin: 0 0 14px 0 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

body.ng.ng-home .home-footer__fineprint{
  color: rgba(15,23,42,.74) !important;
  line-height: 1.4 !important;
}

body.ng.ng-home .home-footer__powered{
  margin-bottom: 6px !important;
}

@media (max-width: 900px){
  body.ng.ng-home .home-footer__grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px){
  body.ng.ng-home .home-footer{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.ng.ng-home .home-footer__inner{
    padding: 16px 14px !important;
  }

  body.ng.ng-home .home-footer__card{
    padding: 14px !important;
  }

  body.ng.ng-home .home-footer__socialbtn{
    width: 100% !important;
  }
}
/* ===== /AIO: HOME FOOTER STYLES ===== */

/* ===== AIO: HOMEPAGE AUTOMOTIVE BASICS CARD POLISH (2026-03-18) =====
   Convert curated Automotive Basics block into a proper NextGen card
   without affecting Latest Questions or other home sections.
*/
body.ng.ng-home .home-latest.home-autobasics{
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

body.ng.ng-home .home-latest.home-autobasics .home-latest__inner{
  background: #ffffff !important;
  border: 1px solid #dfe7ef !important;
  border-radius: 22px !important;
  padding: 26px 28px 24px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

body.ng.ng-home .home-latest.home-autobasics .home-latest__head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

body.ng.ng-home .home-latest.home-autobasics .home-latest__title{
  margin: 0 !important;
  line-height: 1.15 !important;
}

body.ng.ng-home .home-latest.home-autobasics .home-latest__more{
  white-space: nowrap !important;
  font-weight: 700 !important;
}

body.ng.ng-home .home-latest.home-autobasics .content.section{
  margin: 0 !important;
  padding: 0 !important;
}

body.ng.ng-home .home-latest.home-autobasics .thin{
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #edf2f7 !important;
}

body.ng.ng-home .home-latest.home-autobasics .thin:first-child{
  border-top: 0 !important;
}

body.ng.ng-home .home-latest.home-autobasics .thin h3{
  margin: 0 !important;
}

body.ng.ng-home .home-latest.home-autobasics .thin a.puser{
  display: block !important;
  padding: 12px 0 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body.ng.ng-home .home-latest.home-autobasics .thin a.puser:hover{
  text-decoration: underline !important;
}

@media (max-width: 768px){
  body.ng.ng-home .home-latest.home-autobasics .home-latest__inner{
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  body.ng.ng-home .home-latest.home-autobasics .home-latest__head{
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.ng.ng-home .home-latest.home-autobasics .thin a.puser{
    padding: 11px 0 !important;
  }
}
/* ===== /AIO: HOMEPAGE AUTOMOTIVE BASICS CARD POLISH ===== */

/* ===== AIO: UNIVERSAL FOOTER ALIGNMENT TUNE (2026-03-19) =====
   Make copyright and legal row sit level with breathing room
   above the browser edge, and stack cleanly on smaller screens.
*/
body.ng .ng-footer{
  margin-top: 24px;
  padding: 18px 0 26px;
}

body.ng .ng-footer .ng-footer__grid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

body.ng .ng-footer .ng-footer__small{
  line-height: 1.5;
}

body.ng .ng-footer .ng-footer__small:last-child{
  text-align: right !important;
}

@media (max-width: 900px){
  body.ng .ng-footer .ng-footer__grid{
    flex-direction: column;
    align-items: flex-start;
  }

  body.ng .ng-footer .ng-footer__small:last-child{
    text-align: left !important;
  }
}

/* ===== AIO: UNIVERSAL FOOTER DESKTOP POLISH (2026-03-19) =====
   Keep legal row visually closer to copyright line and off the hard edge.
*/
@media (min-width: 901px){
  body.ng .ng-footer{
    padding: 16px 0 30px;
  }

  body.ng .ng-footer .ng-wrap.ng-footer__grid{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
  }

  body.ng .ng-footer .ng-footer__small:last-child{
    max-width: 62%;
  }
}

/* ===== AIO: HOME FOOTER SOCIAL LOGO POLISH (2026-03-19) ===== */
body.ng.ng-home .home-footer__socialrow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:14px 0 18px;
}

body.ng.ng-home .home-footer__socialbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #b9d9fb;
  background:#f7fbff;
  color:#0b6fcf;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.ng.ng-home .home-footer__socialbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(13,110,253,.10);
  background:#ffffff;
}

body.ng.ng-home .home-footer__socialicon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

body.ng.ng-home .home-footer__socialicon svg{
  width:18px;
  height:18px;
  display:block;
}

body.ng.ng-home .home-footer__sociallabel{
  line-height:1;
}

body.ng.ng-home .home-footer__toplink{
  display:inline-flex;
  align-items:center;
  margin-top:2px;
  margin-bottom:14px;
}

body.ng.ng-home .home-footer__fineprint{
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid #e5edf7;
}

body.ng.ng-home .home-footer__powered{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color:#4c5b70;
}

body.ng.ng-home .home-footer__powered-label{
  font-weight:700;
}

body.ng.ng-home .home-footer__powered-sep{
  color:#6d7d92;
  font-weight:600;
}

body.ng.ng-home .home-footer__brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d7e5f4;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

body.ng.ng-home .home-footer__brand:hover{
  background:#fbfdff;
}

body.ng.ng-home .home-footer__brand--mitchell img{
  display:block;
  height:18px;
  width:auto;
  max-width:140px;
}

body.ng.ng-home .home-footer__brand--alldata span{
  display:block;
  font-weight:900;
  letter-spacing:.04em;
  color:#1b5fae;
}

@media (max-width: 640px){
  body.ng.ng-home .home-footer__socialbtn{
    width:100%;
    justify-content:center;
  }

  body.ng.ng-home .home-footer__powered{
    gap:8px;
  }
}
/* ===== /AIO: HOME FOOTER SOCIAL LOGO POLISH ===== */

/* ===== AIO: HOME FOOTER POWERED LOGO FILES (2026-03-19) ===== */
body.ng.ng-home .home-footer__brand{
  min-height:38px;
  padding:7px 12px;
}

body.ng.ng-home .home-footer__brand img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
}

body.ng.ng-home .home-footer__brand--mitchell img{
  height:20px;
  max-width:150px;
}

body.ng.ng-home .home-footer__brand--alldata img{
  height:18px;
  max-width:140px;
}

@media (max-width: 640px){
  body.ng.ng-home .home-footer__brand--mitchell img{
    height:18px;
    max-width:130px;
  }

  body.ng.ng-home .home-footer__brand--alldata img{
    height:16px;
    max-width:120px;
  }
}
/* ===== /AIO: HOME FOOTER POWERED LOGO FILES ===== */

/* ===== AIO: HOME FOOTER LEGAL ROW MOBILE POLISH (2026-03-19) ===== */
body.ng.ng-home .site-footer,
body.ng.ng-home footer.site-footer,
body.ng.ng-home .footer-bottom,
body.ng.ng-home .footer-bottom-inner{
  width:100%;
}

body.ng.ng-home .footer-bottom-inner,
body.ng.ng-home .site-footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  text-align:center;
}

body.ng.ng-home .footer-bottom-inner > *,
body.ng.ng-home .site-footer__inner > *{
  float:none !important;
}

body.ng.ng-home .footer-bottom-inner .copyright,
body.ng.ng-home .site-footer__copyright,
body.ng.ng-home .site-footer .copyright{
  margin:0;
  line-height:1.5;
  color:#4c5b70;
}

body.ng.ng-home .footer-bottom-inner .footer-links,
body.ng.ng-home .site-footer__links,
body.ng.ng-home .site-footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 10px;
  margin:0;
  padding:0;
}

body.ng.ng-home .footer-bottom-inner .footer-links a,
body.ng.ng-home .site-footer__links a,
body.ng.ng-home .site-footer .footer-links a{
  display:inline-block;
  line-height:1.5;
  white-space:nowrap;
}

@media (max-width: 640px){
  body.ng.ng-home .footer-bottom-inner,
  body.ng.ng-home .site-footer__inner{
    gap:8px 10px;
    padding-left:14px;
    padding-right:14px;
  }

  body.ng.ng-home .footer-bottom-inner .footer-links,
  body.ng.ng-home .site-footer__links,
  body.ng.ng-home .site-footer .footer-links{
    gap:6px 8px;
  }

  body.ng.ng-home .footer-bottom-inner .footer-links a,
  body.ng.ng-home .site-footer__links a,
  body.ng.ng-home .site-footer .footer-links a{
    white-space:normal;
  }
}
/* ===== /AIO: HOME FOOTER LEGAL ROW MOBILE POLISH ===== */

/* ===== AIO: HOME FOOTER LEGAL ROW FORCE CENTER (2026-03-19) ===== */
body.ng.ng-home .footer,
body.ng.ng-home .footer .container,
body.ng.ng-home .footer .row,
body.ng.ng-home .footer .col,
body.ng.ng-home .footer .col-md-6,
body.ng.ng-home .footer .col-lg-6,
body.ng.ng-home .footer-bottom,
body.ng.ng-home .footer-bottom .container,
body.ng.ng-home .footer-bottom .row,
body.ng.ng-home .footer-bottom [class*="col-"]{
  float:none !important;
}

body.ng.ng-home .footer .row,
body.ng.ng-home .footer-bottom .row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:10px 14px !important;
}

body.ng.ng-home .footer .row > *,
body.ng.ng-home .footer-bottom .row > *{
  width:auto !important;
  max-width:none !important;
  flex:0 1 auto !important;
  text-align:center !important;
}

body.ng.ng-home .footer .copyright,
body.ng.ng-home .footer-bottom .copyright{
  margin:0 !important;
  padding:0 !important;
  line-height:1.5 !important;
}

body.ng.ng-home .footer .footer-links,
body.ng.ng-home .footer-bottom .footer-links{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px 10px !important;
  margin:0 !important;
  padding:0 !important;
}

body.ng.ng-home .footer .footer-links a,
body.ng.ng-home .footer-bottom .footer-links a{
  display:inline-block !important;
  white-space:nowrap !important;
}

@media (max-width: 640px){
  body.ng.ng-home .footer .row,
  body.ng.ng-home .footer-bottom .row{
    gap:8px 10px !important;
  }

  body.ng.ng-home .footer .footer-links a,
  body.ng.ng-home .footer-bottom .footer-links a{
    white-space:normal !important;
  }
}
/* ===== /AIO: HOME FOOTER LEGAL ROW FORCE CENTER ===== */

/* ===== AIO: HOME WATCH & FOLLOW TRUST BADGES (2026-03-19) ===== */
body.ng .home-footer__trust{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e7edf3;
}

body.ng .home-footer__trust-label{
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  color: #516170;
  margin-bottom: 10px;
}

body.ng .home-footer__trust-badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body.ng .home-footer__trust-badge{
  display: block;
  height: auto;
  width: auto;
  max-height: 72px;
  max-width: 120px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

body.ng .home-footer__trust-badge--ase{
  max-width: 92px;
  max-height: 92px;
}

body.ng .home-footer__trust-badge--sema{
  max-width: 108px;
  max-height: 92px;
}

@media (max-width: 700px){
  body.ng .home-footer__trust-badges{
    gap: 10px;
  }

  body.ng .home-footer__trust-badge{
    max-height: 64px;
    max-width: 104px;
  }

  body.ng .home-footer__trust-badge--ase{
    max-width: 84px;
    max-height: 84px;
  }

  body.ng .home-footer__trust-badge--sema{
    max-width: 96px;
    max-height: 84px;
  }
}
/* ===== /AIO ===== */

/* ===== AIO: HOME WATCH & FOLLOW BADGE SIZE TUNE (2026-03-19) ===== */
body.ng .home-footer__trust{
  margin-top: 12px;
  padding-top: 12px;
}

body.ng .home-footer__trust-label{
  margin-bottom: 8px;
}

body.ng .home-footer__trust-badges{
  gap: 10px;
}

body.ng .home-footer__trust-badge{
  max-height: 64px;
  max-width: 96px;
  border-radius: 10px;
  padding: 5px;
}

body.ng .home-footer__trust-badge--ase{
  max-width: 74px;
  max-height: 74px;
}

body.ng .home-footer__trust-badge--sema{
  max-width: 82px;
  max-height: 74px;
}
/* ===== /AIO ===== */

/* ===== AIO: HOME FOOTER LOGO BALANCE TUNE (2026-03-20) =====
   Center standalone Back-to-top under the whole Watch & Follow section.
   Increase Mitchell1 + ALLDATA presence.
   Reduce GovFleet Motors logo so it fits the badge family better.
*/
body.ng.ng-home .home-footer__inner{
  text-align:left;
}

body.ng.ng-home .home-footer__toplink{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:18px auto 4px;
  text-align:center;
}

body.ng.ng-home .home-footer__trust{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e5edf7;
}

body.ng.ng-home .home-footer__trust-badges{
  gap:14px;
  align-items:center;
}

body.ng.ng-home .home-footer__brand--mitchell{
  min-height:40px;
  padding:8px 14px;
}

body.ng.ng-home .home-footer__brand--mitchell img{
  height:24px;
  max-width:180px;
}

body.ng.ng-home .home-footer__brand--alldata{
  min-height:40px;
  padding:8px 14px;
}

body.ng.ng-home .home-footer__brand--alldata img{
  height:22px;
  max-width:170px;
}

body.ng.ng-home .home-footer__brand--govfleet{
  min-height:44px;
  padding:6px 12px;
}

body.ng.ng-home .home-footer__brand--govfleet img{
  height:30px;
  width:auto;
  max-width:220px;
}

@media (max-width: 640px){
  body.ng.ng-home .home-footer__toplink{
    margin:16px auto 2px;
  }

  body.ng.ng-home .home-footer__brand--mitchell img{
    height:20px;
    max-width:150px;
  }

  body.ng.ng-home .home-footer__brand--alldata img{
    height:18px;
    max-width:138px;
  }

  body.ng.ng-home .home-footer__brand--govfleet img{
    height:24px;
    max-width:180px;
  }
}
/* ===== /AIO: HOME FOOTER LOGO BALANCE TUNE ===== */

/* ===== AIO: HOME FOOTER FINAL VISIBILITY BUMP (2026-03-20) =====
   Add breathing room above Back-to-top and enlarge key support logos slightly.
*/
body.ng.ng-home .home-footer__toplink{
  margin:28px auto 6px;
}

body.ng.ng-home .home-footer__brand--mitchell{
  min-height:44px;
  padding:9px 16px;
}

body.ng.ng-home .home-footer__brand--mitchell img{
  height:27px;
  max-width:195px;
}

body.ng.ng-home .home-footer__brand--alldata{
  min-height:44px;
  padding:9px 16px;
}

body.ng.ng-home .home-footer__brand--alldata img{
  height:25px;
  max-width:185px;
}

body.ng.ng-home .home-footer__brand--govfleet{
  min-height:48px;
  padding:8px 16px;
}

body.ng.ng-home .home-footer__brand--govfleet img{
  height:34px;
  max-width:245px;
}

@media (max-width: 640px){
  body.ng.ng-home .home-footer__toplink{
    margin:22px auto 4px;
  }

  body.ng.ng-home .home-footer__brand--mitchell img{
    height:22px;
    max-width:160px;
  }

  body.ng.ng-home .home-footer__brand--alldata img{
    height:20px;
    max-width:148px;
  }

  body.ng.ng-home .home-footer__brand--govfleet img{
    height:28px;
    max-width:195px;
  }
}
/* ===== /AIO: HOME FOOTER FINAL VISIBILITY BUMP ===== */

/* ===== AIO: HOME FOOTER BADGES BIGGER + TOPLINK SPACING (2026-03-20) =====
   Final readability bump for support badges and more breathing room above Back-to-top.
*/
body.ng.ng-home .home-footer__toplink{
  margin:42px auto 8px;
}

body.ng.ng-home .home-footer__trust-badges{
  gap:16px;
}

body.ng.ng-home .home-footer__brand--mitchell{
  min-height:48px;
  padding:10px 18px;
}

body.ng.ng-home .home-footer__brand--mitchell img{
  height:30px;
  max-width:210px;
}

body.ng.ng-home .home-footer__brand--alldata{
  min-height:48px;
  padding:10px 18px;
}

body.ng.ng-home .home-footer__brand--alldata img{
  height:28px;
  max-width:200px;
}

body.ng.ng-home .home-footer__trust-badge--ase{
  height:68px;
  width:auto;
  max-width:92px;
}

body.ng.ng-home .home-footer__trust-badge--sema{
  height:68px;
  width:auto;
  max-width:92px;
}

body.ng.ng-home .home-footer__brand--govfleet{
  min-height:52px;
  padding:9px 18px;
}

body.ng.ng-home .home-footer__brand--govfleet img{
  height:38px;
  max-width:265px;
}

@media (max-width: 640px){
  body.ng.ng-home .home-footer__toplink{
    margin:28px auto 6px;
  }

  body.ng.ng-home .home-footer__brand--mitchell img{
    height:24px;
    max-width:175px;
  }

  body.ng.ng-home .home-footer__brand--alldata img{
    height:22px;
    max-width:165px;
  }

  body.ng.ng-home .home-footer__trust-badge--ase{
    height:58px;
    max-width:78px;
  }

  body.ng.ng-home .home-footer__trust-badge--sema{
    height:58px;
    max-width:78px;
  }

  body.ng.ng-home .home-footer__brand--govfleet img{
    height:31px;
    max-width:215px;
  }
}
/* ===== /AIO: HOME FOOTER BADGES BIGGER + TOPLINK SPACING ===== */

/* ===== AIO: MOBILE LOGGED-IN HEADER TUNE (2026-03-20) =====
   Mobile only:
   - hide Messages button in header
   - shorten Dashboard label to Dash
   Desktop remains unchanged.
*/
.ng-header__dash-short { display: none; }

@media (max-width: 767px) {
  body.ng .ng-header__messages {
    display: none !important;
  }
  body.ng .ng-header__dash-full {
    display: none !important;
  }
  body.ng .ng-header__dash-short {
    display: inline !important;
  }
}

/* ===== AIO: MOBILE LOGGED-IN HEADER FINAL CLEANUP (2026-03-20) =====
   Mobile only:
   - keep Dashboard full text
   - hide Messages
   - hide Logout
   Drawer already contains those actions.
*/
@media (max-width: 767px) {
  body.ng .ng-header__dash-full {
    display: inline !important;
  }
  body.ng .ng-header__dash-short {
    display: none !important;
  }
  body.ng .ng-header__messages,
  body.ng .ng-header__logout {
    display: none !important;
  }
}

/* ===== AIO: MOBILE HEADER HIDE MESSAGES + LOGOUT HARD OVERRIDE (2026-03-20) ===== */
@media (max-width: 767px) {
  body.ng .ng-header .ng-header__actions a#messages,
  body.ng .ng-header .ng-header__actions a.ng-header__messages,
  body.ng .ng-header .ng-header__actions a.ng-header__logout,
  body.ng .ng-header .ng-header__actions a[href*="logout=yes"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* ===== AIO: HOME FOOTER CARLSBAD BADGE BALANCE (2026-03-20) =====
   Reduce Carlsbad Precision visual weight so it matches GovFleet better.
*/
body.ng.ng-home .home-footer__brand--carlsbad{
  min-width: 0 !important;
}

body.ng.ng-home .home-footer__brand--carlsbad img{
  max-width: 142px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ===== AIO: HOME FOOTER CARLSBAD BADGE PADDING TUNE (2026-03-20) =====
   Add a bit more left/right breathing room so the Carlsbad badge
   matches the looser visual proportion of GovFleet.
*/
body.ng.ng-home .home-footer__brand--carlsbad{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ===== AIO: ASK FORM ONE-PAGE MODE (2026-03-20) =====
   Make /questions/new render as one continuous form instead of wizard steps.
   Keep legacy PHP/HTML intact; override behavior safely in CSS/JS.
*/
body.ng #msform{
  text-align:left;
}

body.ng #msform fieldset{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  background:#fff;
  border:1px solid #d9e2ea;
  border-radius:12px;
  padding:22px 22px 18px;
  margin:0 0 18px 0 !important;
  box-sizing:border-box;
}

body.ng #msform fieldset:not(:first-of-type){
  display:block !important;
}

body.ng #msform .previous,
body.ng #msform .next{
  display:none !important;
}

body.ng #msform .upload-btn-wrapper input[type="file"]{
  display:none !important;
}

body.ng #msform .upload-btn-wrapper{
  position:static !important;
  overflow:visible !important;
}

body.ng #msform .upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:10px 14px;
  border:1px solid #c7d5e2;
  border-radius:8px;
  background:#f7fbff;
  color:#0f5f95;
  font-size:14px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  line-height:1.2;
}

body.ng #msform .upload-btn:hover{
  background:#eef7ff;
  border-color:#9fc2de;
  opacity:1 !important;
  cursor:pointer;
}

body.ng #msform .upload-btn-wrapper::after{
  content:"Use the button above to add photos or video.";
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#6b7785;
}

body.ng #msform .fs-title{
  color:#152238;
  font-size:18px;
  line-height:1.25;
  margin:0 0 10px 0;
  text-transform:none;
}

body.ng #msform h3{
  color:#33485c;
  font-size:14px;
  line-height:1.5;
  margin:0 0 16px 0;
  padding:0 !important;
}

body.ng #msform input[type="text"],
body.ng #msform textarea,
body.ng #msform select{
  max-width:100%;
}

body.ng #msform input#subject{
  margin-bottom:12px;
}

body.ng #msform textarea#problem{
  min-height:180px;
}

body.ng #msform .capmsg{
  margin-top:8px !important;
  margin-bottom:14px;
}

body.ng #msform input.submit.action-button{
  width:auto !important;
  min-width:140px;
  border-radius:10px;
  padding:12px 20px;
  font-size:15px;
}

@media (max-width: 767px){
  body.ng #msform fieldset{
    padding:16px 14px 14px;
    border-radius:10px;
  }

  body.ng #msform .upload-btn{
    width:100%;
    min-width:0;
  }
}
/* ===== /AIO: ASK FORM ONE-PAGE MODE ===== */

/* ===== AIO: ASK FORM LAYOUT POLISH (2026-03-20) =====
   Make the one-page ask form feel modern without changing backend flow.
*/
body.ng #left .box.white{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ng #left .box.white > .content{
  margin: 18px 18px 28px 18px !important;
}

body.ng #msform{
  max-width: 980px;
  margin: 0 auto;
}

body.ng #msform fieldset{
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

body.ng #msform #selcar,
body.ng #msform div.inputs,
body.ng #msform .inputs{
  display: block !important;
  width: 100% !important;
}

body.ng #msform select,
body.ng #msform input[type="text"],
body.ng #msform textarea{
  width: 100% !important;
  display: block !important;
  margin: 0 0 12px 0 !important;
  padding: 13px 14px !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #223548 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

body.ng #msform select:focus,
body.ng #msform input[type="text"]:focus,
body.ng #msform textarea:focus{
  border-color: #1f8fe5 !important;
  box-shadow: 0 0 0 3px rgba(31,143,229,.12) !important;
  outline: none !important;
}

body.ng #msform textarea#problem{
  min-height: 220px !important;
}

body.ng #msform input#subject{
  max-width: 100% !important;
}

body.ng #msform #mileage{
  max-width: 260px !important;
}

body.ng #msform #car_year,
body.ng #msform #car_make,
body.ng #msform #car_model{
  max-width: 100% !important;
}

body.ng #msform .add_image{
  margin: 4px 0 0 0 !important;
}

body.ng #msform .upload-btn-wrapper::after{
  content: "Photos and short videos help our experts diagnose the problem faster.";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #66758a;
}

body.ng #msform #upload_gallery{
  margin-top: 12px;
}

body.ng #msform .capmsg{
  max-width: 320px;
}

body.ng #msform input.submit.action-button{
  background: #0b76c5 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.10);
}

body.ng #msform input.submit.action-button:hover{
  background: #095f9d !important;
}

body.ng #msform .errorWrap{
  margin: 0 0 12px 0 !important;
}

body.ng #msform .errorMessage{
  font-size: 13px;
  line-height: 1.45;
}

/* Optional info: make existing selects look like compact chips for now */
body.ng #msform fieldset:nth-of-type(2) select{
  display: inline-block !important;
  width: auto !important;
  min-width: 130px;
  margin: 0 8px 10px 0 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: #f7fbff !important;
  border: 1px solid #bfd4e6 !important;
  font-size: 14px !important;
}

/* Problem section: stack fields in sane order */
body.ng #msform fieldset:nth-of-type(3) input#subject{
  margin-bottom: 12px !important;
}

body.ng #msform fieldset:nth-of-type(3) textarea#problem{
  margin-bottom: 14px !important;
}

/* Mobile polish */
@media (max-width: 767px){
  body.ng #left .box.white > .content{
    margin: 12px 8px 24px 8px !important;
  }

  body.ng #msform{
    max-width: 100%;
  }

  body.ng #msform #mileage{
    max-width: 100% !important;
  }

  body.ng #msform fieldset:nth-of-type(2) select{
    display: block !important;
    width: 100% !important;
    min-width: 0;
    border-radius: 10px !important;
    margin-right: 0 !important;
  }

  body.ng #msform .capmsg{
    max-width: 100%;
  }
}
/* ===== /AIO: ASK FORM LAYOUT POLISH ===== */

/* ===== AIO: ASK OPTIONAL TOGGLES PASS 2 (2026-03-20) ===== */
body.ng #msform .ask-toggle-group{
  display:block;
  margin-top:2px;
}

body.ng #msform .ask-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid #e7edf3;
}

body.ng #msform .ask-toggle-row:first-child{
  border-top:0;
  padding-top:6px;
}

body.ng #msform .ask-toggle-row__label{
  flex:1 1 auto;
  min-width:0;
  color:#1380cf;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}

body.ng #msform .ask-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  cursor:pointer;
  box-shadow:none !important;
}

body.ng #msform .ask-toggle__track{
  position:relative;
  display:inline-block;
  width:54px;
  height:30px;
  border-radius:999px;
  background:#c9d4df;
  transition:background .18s ease;
  vertical-align:middle;
}

body.ng #msform .ask-toggle__knob{
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.18);
  transition:left .18s ease;
}

body.ng #msform .ask-toggle[aria-pressed="true"] .ask-toggle__track{
  background:#2d8fe3;
}

body.ng #msform .ask-toggle[aria-pressed="true"] .ask-toggle__knob{
  left:27px;
}

body.ng #msform .ask-toggle:focus .ask-toggle__track,
body.ng #msform .ask-toggle:hover .ask-toggle__track{
  box-shadow:0 0 0 3px rgba(45,143,227,.14);
}

body.ng #msform .ask-toggle-row input[type="hidden"]{
  display:none !important;
}

@media (max-width: 767px){
  body.ng #msform .ask-toggle-row{
    gap:12px;
    padding:12px 0;
  }

  body.ng #msform .ask-toggle-row__label{
    font-size:15px;
  }
}
/* ===== /AIO: ASK OPTIONAL TOGGLES PASS 2 ===== */

/* ===== AIO: ASK QUESTION POST-SUBMIT AUTH GATE STYLING (2026-03-21) ===== */
.ask-auth-gate{
  max-width:760px;
  margin:35px auto 10px;
  padding:28px 28px 24px;
  border:1px solid #dbe4ea;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(17,24,39,.06);
}
.ask-auth-gate .fs-title{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.1;
  font-weight:800;
  color:#14212b;
}
.ask-auth-gate h3{
  margin:0 0 20px;
  font-size:18px;
  line-height:1.55;
  font-weight:600;
  color:#1f2d3a;
}
.ask-auth-gate h3 a{
  color:#0675c1;
  text-decoration:none;
}
.ask-auth-gate h3 a:hover,
.ask-auth-gate h3 a:focus{
  text-decoration:underline;
}
.ask-auth-gate .facebooklog{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  margin:0 0 16px;
  border-radius:10px;
  font-weight:700;
}
.ask-auth-gate .or{
  margin:14px 0 18px;
  text-align:center;
}
.ask-auth-gate .or span{
  display:inline-block;
  padding:0 12px;
  font-weight:700;
  color:#62707c;
  background:#fff;
}
.ask-auth-gate form#signup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:8px;
}
.ask-auth-gate form#signup input.username,
.ask-auth-gate form#signup input.email,
.ask-auth-gate form#signup input.password,
.ask-auth-gate form#signup input.passwordagain{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid #cfd9e2;
  border-radius:10px;
  background:#fff;
  font-size:16px;
  box-sizing:border-box;
}
.ask-auth-gate form#signup input.username:focus,
.ask-auth-gate form#signup input.email:focus,
.ask-auth-gate form#signup input.password:focus,
.ask-auth-gate form#signup input.passwordagain:focus{
  border-color:#2490d0;
  box-shadow:0 0 0 3px rgba(36,144,208,.12);
  outline:none;
}
.ask-auth-gate .toswrap{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:2px 0 4px;
}
.ask-auth-gate .toswrap input.terms{
  margin-top:4px !important;
  width:auto;
}
.ask-auth-gate .toswrap h5{
  margin:0;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  color:#22313d;
}
.ask-auth-gate .toswrap a{
  color:#0675c1;
  text-decoration:none;
}
.ask-auth-gate .toswrap a:hover,
.ask-auth-gate .toswrap a:focus{
  text-decoration:underline;
}
.ask-auth-gate form#signup input[type=submit]{
  grid-column:1 / -1;
  justify-self:start;
  min-height:48px;
  padding:0 24px !important;
  border:0;
  border-radius:10px !important;
  background:#0b7ec2;
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:none;
}
.ask-auth-gate form#signup input[type=submit]:hover,
.ask-auth-gate form#signup input[type=submit]:focus{
  background:#086aa4;
}
@media (max-width: 700px){
  .ask-auth-gate{
    padding:20px 18px 18px;
    border-radius:12px;
  }
  .ask-auth-gate .fs-title{
    font-size:32px;
  }
  .ask-auth-gate form#signup{
    grid-template-columns:1fr;
  }
  .ask-auth-gate form#signup input[type=submit]{
    width:100%;
    justify-self:stretch;
  }
}
/* ===== /AIO: ASK QUESTION POST-SUBMIT AUTH GATE STYLING ===== */

/* AIO: post-question logged-out sign-up step polish */
body.ng .ng-postask-auth{
  margin: 18px auto 0;
  max-width: 980px;
}
body.ng .ng-postask-auth__card,
body.ng .ng-postask-auth__side{
  min-height: 100%;
}
body.ng .ng-postask-auth__submit{
  width: 100% !important;
  max-width: 100%;
  height: 48px;
  margin: 8px 0 0;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: .2px;
}
body.ng .ng-postask-auth .facebooklog{
  display: block;
  width: 100%;
  padding-right: 16px;
  box-sizing: border-box;
}
body.ng .ng-postask-auth .facebookl{
  float: none;
  margin-right: 14px;
}
body.ng .ng-postask-auth .toswrap{
  display: block;
  text-align: left;
  margin-top: 4px;
}
body.ng .ng-postask-auth .toswrap h5{
  display: inline;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
body.ng .ng-postask-auth .g-recaptcha{
  transform-origin: left top;
}
@media (max-width: 767px){
  body.ng .ng-postask-auth{
    margin-top: 14px;
  }
  body.ng .ng-postask-auth .g-recaptcha{
    transform: scale(.92);
  }
}
@media (max-width: 479px){
  body.ng .ng-postask-auth .g-recaptcha{
    transform: scale(.84);
  }
  body.ng .ng-postask-auth__submit{
    height: 46px;
    font-size: 14px;
  }
}

/* AIO: pre-submit ask-question auth gate */
body.ng .ng-preask-auth-wrap{
  margin-top: 16px;
}
body.ng .ng-preask-auth-fieldset{
  margin-top: 20px !important;
  border: 0;
  padding: 0;
}
body.ng .ng-preask-auth{
  max-width: 980px;
  margin: 0 auto;
}
body.ng .ng-preask-auth__card,
body.ng .ng-preask-auth__side{
  min-height: 100%;
}
body.ng .ng-preask-auth__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.ng .ng-preask-auth__captcha-row{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}
body.ng .ng-preask-auth__captcha-row .capimg{
  display: block;
  max-width: 100%;
  height: auto;
}
body.ng .ng-preask-auth__captcha-row .capmsg{
  margin: 0;
}
body.ng .ng-preask-auth__captcha-row .captcha{
  width: 100%;
}
body.ng .ng-preask-auth__facebook{
  text-decoration: none;
}
body.ng .ng-preask-auth__facebook .facebookl{
  float: none;
  margin-right: 12px;
}
body.ng .ng-preask-auth__tos{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  text-align: left;
}
body.ng .ng-preask-auth__tos input{
  margin-top: 3px;
}
body.ng .ng-preask-auth__submit{
  width: 100% !important;
  max-width: 100%;
  height: 48px;
  margin-top: 14px;
  border-radius: 12px;
  font-size: 15px;
}
@media (max-width: 767px){
  body.ng .ng-preask-auth__grid,
  body.ng .ng-preask-auth__captcha-row{
    grid-template-columns: 1fr;
  }
}

/* AIO: ask-question logged-out gate, email only */
body.ng .ng-preask-auth-wrap{
  margin: 18px auto 0;
}
body.ng .ng-preask-auth-fieldset{
  margin-top: 18px !important;
  border: 0;
  padding: 0;
}
body.ng .ng-preask-auth{
  max-width: 860px;
  margin: 0 auto;
}
body.ng .ng-preask-auth--single{
  display: block;
}
body.ng .ng-preask-auth__card--wide{
  max-width: 860px;
  margin: 0 auto;
}
body.ng .ng-preask-auth__divider{
  margin-top: 8px;
}
body.ng .ng-preask-auth__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.ng .ng-preask-auth__captcha-row{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}
body.ng .ng-preask-auth__captcha-row .capimg{
  display: block;
  max-width: 100%;
  height: auto;
}
body.ng .ng-preask-auth__captcha-row .capmsg{
  margin: 0;
}
body.ng .ng-preask-auth__captcha-row .captcha{
  width: 100%;
}
body.ng .ng-preask-auth__tos{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  text-align: left;
}
body.ng .ng-preask-auth__tos input{
  margin-top: 3px;
}
body.ng .ng-preask-auth__submit{
  width: 100% !important;
  max-width: 100%;
  height: 48px;
  margin-top: 14px;
  border-radius: 12px;
  font-size: 15px;
}
body.ng .ng-preask-auth__fine{
  margin-top: 14px;
  text-align: center;
}
@media (max-width: 767px){
  body.ng .ng-preask-auth__grid,
  body.ng .ng-preask-auth__captcha-row{
    grid-template-columns: 1fr;
  }
}

/* AIO: tiny polish pass for ask-question auth gate */
body.ng .ng-preask-auth__card--wide{
  max-width: 920px;
}

body.ng .ng-preask-auth__grid{
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
}

body.ng .ng-preask-auth__form .ng-auth__input{
  width: 100%;
}

body.ng .ng-preask-auth__tos{
  gap: 12px;
  margin-top: 18px;
  line-height: 1.45;
}

body.ng .ng-preask-auth__tos span{
  display: inline-block;
  padding-top: 1px;
}

body.ng .ng-preask-auth__submit{
  margin-top: 22px;
}

body.ng .ng-preask-auth__fine{
  margin-top: 18px;
}

@media (max-width: 767px){
  body.ng .ng-preask-auth__grid{
    grid-template-columns: 1fr;
  }
}

/* === AIO_NATIVE_UPLOAD_INPUT_OVERLAY === */
.aio-native-upload-wrap{
  position:relative;
  display:inline-block;
}
.aio-native-upload-wrap .upload-btn{
  position:relative;
  z-index:1;
}
.aio-native-upload-wrap .aio-native-upload-input{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:pointer !important;
  z-index:2 !important;
  display:block !important;
}
/* === /AIO_NATIVE_UPLOAD_INPUT_OVERLAY === */

/* === AIO: question page visual pass (preview) === */
#question,
#replies {
  max-width: 980px;
}

.box.white.phdr {
  max-width: 980px;
  margin: 18px 0 14px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.box.white.phdr .content.postheader {
  padding: 22px 26px;
}

.box.white.phdr h1 {
  margin: 0;
  line-height: 1.15;
  font-size: 40px;
}

#question,
#replies .content,
#question > .content {
  box-sizing: border-box;
}

#question > .content,
#replies > .content,
#replies .content {
  padding: 24px 26px;
}

#question {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  margin-bottom: 22px;
}

#replies {
  margin-top: 6px;
}

#replies > .content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  margin-bottom: 18px;
}

#question .admin,
#replies .admin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
}

#question .admin li,
#replies .admin li {
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef3f8;
  border: 1px solid #d8e3ee;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

#question .admin li.red,
#replies .admin li.red {
  color: #9f1d1d;
  border-color: #efc1c1;
  background: #fff3f3;
}

#question .user,
#replies .user {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

#question .avatar,
#replies .avatar {
  flex: 0 0 96px;
}

#question .avatar img,
#replies .avatar img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  background: #f3f5f7;
}

#question .infowrap,
#replies .infowrap {
  min-width: 0;
  flex: 1 1 auto;
}

#question .username,
#replies .username {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 8px;
}

#question .infowrap ul,
#replies .infowrap ul {
  margin: 0;
  padding-left: 18px;
}

#question .infowrap li,
#replies .infowrap li {
  margin: 0 0 4px 0;
}

#question p,
#question .text,
#replies p,
#replies .text {
  font-size: 17px;
  line-height: 1.65;
}

#question img,
#replies img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

#question .imgcontainer,
#replies .imgcontainer {
  margin: 12px 10px 0 0;
}

#question table,
#replies table {
  width: 100%;
  max-width: 100%;
}

#replies > .content + .content,
#replies .content + .content {
  margin-top: 18px;
}

@media (max-width: 960px) {
  .box.white.phdr,
  #question,
  #replies > .content {
    border-radius: 14px;
  }

  .box.white.phdr .content.postheader,
  #question > .content,
  #replies > .content,
  #replies .content {
    padding: 18px 18px;
  }

  .box.white.phdr h1 {
    font-size: 28px;
  }

  #question .user,
  #replies .user {
    gap: 14px;
  }

  #question .avatar,
  #replies .avatar {
    flex-basis: 72px;
  }

  #question .avatar img,
  #replies .avatar img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  #question .username,
  #replies .username {
    font-size: 18px;
  }

  #question p,
  #question .text,
  #replies p,
  #replies .text {
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  .box.white.phdr {
    margin-top: 12px;
  }

  .box.white.phdr h1 {
    font-size: 24px;
  }

  #question .admin li,
  #replies .admin li {
    font-size: 12px;
    padding: 6px 10px;
  }

  #question .user,
  #replies .user {
    display: block;
  }

  #question .avatar,
  #replies .avatar {
    margin-bottom: 12px;
  }

  #question .avatar img,
  #replies .avatar img {
    width: 84px;
    height: 84px;
  }
}
/* === /AIO: question page visual pass (preview) === */

/* === AIO: question page visual pass 2 === */
/* DISABLED /var/www/html/www/html */
/** === AIO: question page visual pass 2 === **/

/** Hide legacy sponsored label text inside replies/question bodies **/
#question .text,
#replies .text,
#question .content,
#replies .content {
  word-wrap: break-word;
}

#question *[class],
#replies *[class] {
  box-sizing: border-box;
}

/** Hide plain "SPONSORED LINKS" text blocks that legacy output injects **/
#replies .content,
#question .content {
  position: relative;
}

#replies .content {
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 28px;
}

#replies > .content:first-of-type {
  border-top: 0;
  padding-top: 24px;
}

/** tighter metadata spacing **/
#question .user + *,
#replies .user + * {
  margin-top: 4px;
}

#question .admin + .user,
#replies .admin + .user {
  margin-top: 2px;
}

/** Hide standalone sponsored label lines **/
#replies .content {
  font-size: 0;
}

#replies .content > * {
  font-size: initial;
}

/** specifically suppress plain text nodes rendered as sponsored labels via legacy markup containers **/
#replies .content .relheaderb,
#replies .content .magicbox,
#replies .content h2 {
  display: none !important;
}

/** restore readable text sizing for actual content areas **/
#question .user,
#question .infowrap,
#question .text,
#question p,
#question li,
#question div,
#replies .user,
#replies .infowrap,
#replies .text,
#replies p,
#replies li,
#replies div {
  font-size: 17px;
}

/** reply blocks feel more separated **/
#replies > .content {
  padding-bottom: 26px;
}

/** timestamps and short meta lines **/
#question .content > div[style*="font-size:10px"],
#replies .content > div[style*="font-size:10px"] {
  opacity: .8;
}

/** large inline images/doc captures **/
#replies img,
#question img {
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/** mobile tighten **/
@media (max-width: 640px) {
  #replies > .content {
    padding-bottom: 20px;
  }

  #question .user,
  #replies .user {
    margin-bottom: 14px;
  }

  #question .username,
  #replies .username {
    margin-bottom: 6px;
  }
}
/** === /AIO: question page visual pass 2 === **/
/* === /AIO: question page visual pass 2 === */

/* === AIO: question page card polish 1 === */
#question .reply,
#replies .reply {
  background: #fff;
  border: 1px solid #dde5ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  overflow: hidden;
}

#question .reply > .content,
#replies .reply > .content {
  margin: 22px 24px 20px;
}

#question .avatar,
#replies .avatar {
  width: 56px;
  height: 56px;
}

#question .avatar a img,
#question .avatar img,
#replies .avatar a img,
#replies .avatar img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
}

#question .infowrap,
#replies .infowrap {
  margin-left: 70px;
}

#question .infowrap .username,
#replies .infowrap .username {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

#question ul.info,
#replies ul.info {
  margin-top: 0;
}

#question ul.info li,
#replies ul.info li {
  border-radius: 999px;
  letter-spacing: .5px;
  font-size: 11px;
  line-height: 1.2;
  padding: 5px 8px;
  margin-right: 6px;
  margin-bottom: 6px;
}

#question .text,
#replies .text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.72;
  color: #24313c;
}

#question .date,
#replies .date {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #edf2f6;
  color: #7a8793;
  font-size: 11px;
  letter-spacing: .7px;
}

@media all and (max-width: 550px) {
  #question .reply > .content,
  #replies .reply > .content {
    margin: 16px 14px 16px;
  }

  #question .avatar,
  #replies .avatar {
    width: 44px;
    height: 44px;
  }

  #question .avatar a img,
  #question .avatar img,
  #replies .avatar a img,
  #replies .avatar img {
    width: 44px;
    height: 44px;
  }

  #question .infowrap,
  #replies .infowrap {
    margin-left: 56px;
  }

  #question .infowrap .username,
  #replies .infowrap .username {
    font-size: 17px;
  }

  #question .text,
  #replies .text {
    font-size: 15px;
    line-height: 1.65;
  }
}
/* === /AIO: question page card polish 1 === */

/* === AIO: question page media/date polish 1 === */

/* Hide public-facing dates by default; keep available for admins/mods */
#question .date,
#replies .date {
  display: none;
}

body.admin #question .date,
body.admin #replies .date,
#question .adminpanelvote + .date,
#replies .adminpanelvote + .date {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #edf2f6;
  color: #8a96a3;
  font-size: 11px;
  letter-spacing: .6px;
}

/* Media section becomes part of the answer, not tiny attachments */
#question .gallery,
#replies .gallery {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #edf2f6;
  color: #5b6773;
  font-size: 13px;
  font-weight: 600;
}

#question .image-gallery,
#replies .image-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

#question .thumbnail,
#replies .thumbnail {
  margin: 0;
}

#question .thumbnail > a,
#replies .thumbnail > a {
  position: relative;
  display: block;
  background: #f6f8fb;
  border: 1px solid #dde5ec;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: transform .15s ease, box-shadow .15s ease;
}

#question .thumbnail > a:hover,
#replies .thumbnail > a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

#question .thumbnail img,
#replies .thumbnail img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none !important;
  display: block;
  border-radius: 0;
}

#question .zoom-btn,
#question .play-btn,
#replies .zoom-btn,
#replies .play-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(17,24,39,.78);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

#question .zoom-btn::before,
#replies .zoom-btn::before {
  content: "⌕";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 21px;
  line-height: 38px;
  text-align: center;
}

#question .play-btn::before,
#replies .play-btn::before {
  content: "▶";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 17px;
  line-height: 38px;
  text-align: center;
  padding-left: 2px;
}

/* Single asset can breathe more */
#question .image-gallery:has(.thumbnail:only-child),
#replies .image-gallery:has(.thumbnail:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* Mobile: one clean column */
@media all and (max-width: 700px) {
  #question .image-gallery,
  #replies .image-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #question .gallery,
  #replies .gallery {
    font-size: 12px;
  }
}

/* === /AIO: question page media/date polish 1 === */

/* ==== question page cleanup pass 4: visual polish ==== */
#question .text,
#replies .text {
  margin-top: 18px !important;
}

#replies .reply {
  margin-bottom: 16px !important;
}

#replies .reply > .content {
  padding-bottom: 6px !important;
}

#question .date,
#replies .date {
  margin-top: 14px !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  color: #8d98a1 !important;
}

#question .adminpanelvote,
#replies .adminpanelvote {
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px solid #eef2f5 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #66737d !important;
}

#question .adminpanelvote .commentdesc,
#replies .adminpanelvote .commentdesc {
  color: #4f5b65 !important;
}

@media all and (max-width: 550px) {
  #question .text,
  #replies .text {
    margin-top: 14px !important;
  }

  #question .date,
  #replies .date {
    margin-top: 12px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }

  #replies .reply {
    margin-bottom: 14px !important;
  }
}

/* ===== AIO: HOME LATEST HEADER ACTIONS POLISH (2026-04-01) ===== */
section.home-latest .home-latest__actions{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

section.home-latest .home-latest__actions .home-latest__more{
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 640px){
  section.home-latest .home-latest__head{
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  section.home-latest .home-latest__actions{
    width: 100% !important;
    justify-content: flex-start !important;
  }
}
/* ===== /AIO: HOME LATEST HEADER ACTIONS POLISH ===== */

/* ===== AIO: QUESTION PAGE RIGHT-RAIL JUNK HIDE ONLY (2026-04-01) ===== */
body.ng main.ng-main #right .box.p20.noborder:has(a[href="/articles/we-are-hiring"]),
body.ng main.ng-main #right .box.p20.noborder:has(a[href="/manuals/manuals.php"]){
  display:none !important;
}

body.ng main.ng-main #right hr.post-line:has(+ .box.p20.noborder a[href="/articles/we-are-hiring"]),
body.ng main.ng-main #right hr.post-line:has(+ .box.p20.noborder a[href="/manuals/manuals.php"]){
  display:none !important;
}
/* ===== /AIO: QUESTION PAGE RIGHT-RAIL JUNK HIDE ONLY ===== */

/* ===== AIO: QUESTION PAGE RIGHT-RAIL ASK/AD STACK HIDE ONLY (2026-04-01) ===== */
body.ng main.ng-main #right #askbox,
body.ng main.ng-main #right #askbox + .slink,
body.ng main.ng-main #right #askbox + .slink + div{
  display:none !important;
}

body.ng main.ng-main #right > .box.white{
  margin-top:0 !important;
}

body.ng main.ng-main #right .box.white:first-of-type{
  margin-top:0 !important;
}
/* ===== /AIO: QUESTION PAGE RIGHT-RAIL ASK/AD STACK HIDE ONLY ===== */

/* ===== AIO: QUESTION PAGE BREADCRUMB STYLING (2026-04-01) ===== */
body.ng .qcrumbs{
  max-width: 980px !important;
  margin: 14px 0 12px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

body.ng .qcrumbs > .content{
  padding: 12px 18px !important;
}

body.ng .qcrumbs .breadcrumb{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.ng .qcrumbs .breadcrumb li{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.ng .qcrumbs .breadcrumb li a{
  text-decoration: none !important;
}

body.ng .qcrumbs .breadcrumb li a.current,
body.ng .qcrumbs .breadcrumb li:last-child a{
  font-weight: 700 !important;
}

@media (max-width: 640px){
  body.ng .qcrumbs{
    margin-top: 10px !important;
    border-radius: 12px !important;
  }

  body.ng .qcrumbs > .content{
    padding: 10px 14px !important;
  }

  body.ng .qcrumbs .breadcrumb li{
    font-size: 12px !important;
  }
}
/* ===== /AIO: QUESTION PAGE BREADCRUMB STYLING ===== */

/* ===== AIO: CATEGORY LANDING STYLE BRIDGE (2026-04-01) ===== */
body.ng main.ng-main #left.ng-category-landing-page{
  width: 100% !important;
}

body.ng main.ng-main #left.ng-category-landing-page #selbox{
  border: 1px solid #e4e9ee !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
  padding: 26px !important;
}

body.ng main.ng-main #left.ng-category-landing-page #selbox h1{
  margin: 0 0 18px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

body.ng main.ng-main #left.ng-category-landing-page #selbox .container{
  margin-top: 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page #spinarea{
  max-width: 420px !important;
}

body.ng main.ng-main #left.ng-category-landing-page #spinarea select,
body.ng main.ng-main #left.ng-category-landing-page #catSearch{
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .refbg{
  margin: 6px 0 16px !important;
  border: 1px solid #dfe6ec !important;
  background: #f6f8fa !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .refinetags{
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

body.ng main.ng-main #left.ng-category-landing-page a.catbox.cl{
  display: inline-block !important;
  margin: 0 8px 8px 0 !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: #0b7fc1 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: .3px !important;
}

body.ng main.ng-main #left.ng-category-landing-page a.catbox.cl:hover{
  opacity: .9 !important;
}

body.ng main.ng-main #left.ng-category-landing-page #results{
  margin-left: 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page .paginationtt{
  margin: 18px 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul{
  margin: 0 !important;
  padding: 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul > li{
  margin: 0 4px 4px 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul > li > a,
body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul > li > span{
  display: inline-block !important;
  min-width: 34px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #eef3f7 !important;
}

body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul > li.active > a,
body.ng main.ng-main #left.ng-category-landing-page .paginationtt ul > li.active > span{
  background: #0b7fc1 !important;
  color: #fff !important;
}

body.ng main.ng-main #left.ng-category-landing-page .askqa{
  display: inline-block !important;
  text-decoration: none !important;
}

body.ng main.ng-main #left.ng-category-landing-page .askq2{
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin-top: 8px !important;
}

@media (max-width: 700px){
  body.ng main.ng-main #left.ng-category-landing-page #selbox{
    padding: 18px !important;
    border-radius: 14px !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page #selbox h1{
    font-size: 21px !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page a.catbox.cl{
    font-size: 11px !important;
    padding: 6px 9px !important;
  }
}
/* ===== /AIO: CATEGORY LANDING STYLE BRIDGE ===== */

/* ===== AIO: QUESTION PAGE POLISH PASS 1 (2026-04-01) ===== */
/* Scope: question thread layout only; no PHP/JS behavior changes */

body[data-route^="questions/view"] .qcrumbs,
body.questions-view .qcrumbs,
#question {
  scroll-margin-top: 90px;
}

.qcrumbs {
  margin-bottom: 12px !important;
}

.phdr {
  margin-bottom: 14px !important;
}

.phdr .content.postheader {
  margin: 22px 24px 20px 24px !important;
}

.phdr .logoheader h1 {
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
}

#question > .content,
.reply > .content {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

#question .user,
.reply .user {
  margin-bottom: 10px !important;
}

#question .text,
.reply .text {
  margin-top: 16px !important;
  line-height: 1.65 !important;
}

#question .date,
.reply .date {
  margin-top: 16px !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  color: #8a9199 !important;
}

#question .gallery,
.reply .gallery {
  margin-top: 18px !important;
}

#question .gallery img,
.reply .gallery img {
  border-radius: 8px !important;
}

#question .thumbnail,
.reply .thumbnail {
  vertical-align: top !important;
}

.box.nmbreplies {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

.box.nmbreplies > h2 {
  line-height: 1.25 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#replies .reply.white {
  margin-bottom: 14px !important;
}

#repw .content,
form#reply {
  margin-top: 22px !important;
}

form#reply textarea {
  min-height: 160px !important;
}

.upload-btn-wrapper,
#upload_gallery {
  margin-top: 8px !important;
}

@media (max-width: 960px) {
  .qcrumbs {
    margin-bottom: 8px !important;
  }

  .phdr {
    margin-bottom: 10px !important;
  }

  .phdr .content.postheader {
    margin: 18px 18px 16px 18px !important;
  }

  #question > .content,
  .reply > .content {
    margin: 18px !important;
  }

  #question .text,
  .reply .text {
    margin-top: 14px !important;
    line-height: 1.6 !important;
  }

  #question .gallery img,
  .reply .gallery img {
    max-height: 260px !important;
  }

  .box.nmbreplies > h2 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 18px !important;
  }
}
/* ===== /AIO: QUESTION PAGE POLISH PASS 1 ===== */

/* ===== AIO: CERTIFIED EXPERT + VEHICLE HERO (2026-04-01) ===== */

.vehicle-hero-line{
  margin-top: 10px;
  font: 700 15px/1.45 'Roboto Condensed', Helvetica, Arial, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #4d5c6a;
}

ul.info li.expert-badge{
  position: relative;
  padding-right: 26px !important;
}

.expert-badge-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 50%;
  background: #ffffff;
  color: #4f8f2f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 960px){
  .vehicle-hero-line{
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ===== /AIO: CERTIFIED EXPERT + VEHICLE HERO ===== */

/* ===== AIO: QUESTION HERO PROMOTION (2026-04-02) ===== */
.phdr .question-hero-copy{
  display:block;
}

.phdr .question-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px 0;
}

.phdr .question-hero-badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font:700 11px/1 'Roboto Condensed', Arial, sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
}

.phdr .question-hero-badge-status{
  background:#0f7cc0;
  color:#fff;
}

.phdr .question-hero-badge-posts{
  background:#eef5fb;
  color:#35506a;
  border:1px solid #d8e5f0;
}

.phdr .question-title-display{
  margin:0 0 10px 0;
  font:700 42px/1.1 'Roboto Condensed', Arial, sans-serif;
  text-transform:none;
  letter-spacing:0;
  color:#14212b;
}

.phdr .vehicle-hero-line{
  margin:0 0 8px 0;
  font:700 24px/1.2 'Roboto Condensed', Arial, sans-serif;
  letter-spacing:.5px;
  color:#0f7cc0;
}

.phdr .vehicle-meta-line{
  margin:0;
  font:600 13px/1.5 'Roboto', Arial, sans-serif;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#5d6d79;
}

#question .stats ul.info{
  margin-top:10px;
}

@media (max-width: 900px){
  .phdr .question-title-display{
    font-size:32px;
  }

  .phdr .vehicle-hero-line{
    font-size:20px;
  }
}

@media (max-width: 550px){
  .phdr .question-hero-badges{
    gap:6px;
    margin-bottom:8px;
  }

  .phdr .question-hero-badge{
    padding:4px 8px;
    font-size:10px;
  }

  .phdr .question-title-display{
    font-size:24px;
    line-height:1.15;
  }

  .phdr .vehicle-hero-line{
    font-size:17px;
  }

  .phdr .vehicle-meta-line{
    font-size:11px;
    line-height:1.45;
  }
}
/* ===== /AIO: QUESTION HERO PROMOTION ===== */

/* ===== AIO: QUESTION HERO USER ROLE CHIP (2026-04-02) ===== */
#question .infowrap .username .role-chip{
  display:inline-block;
  margin-left:10px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef5fb;
  border:1px solid #d8e5f0;
  color:#35506a;
  font:700 10px/1 'Roboto Condensed', Arial, sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  vertical-align:middle;
}

#question .infowrap .username .role-chip.role-chip-expert{
  background:#eaf7ee;
  border-color:#cfe7d6;
  color:#2f7a45;
}

@media (max-width: 550px){
  #question .infowrap .username .role-chip{
    margin-left:8px;
    padding:3px 7px;
    font-size:9px;
  }
}
/* ===== /AIO: QUESTION HERO USER ROLE CHIP ===== */

/* ===== AIO: CERTIFIED EXPERT + HEADER POLISH (2026-04-02) ===== */
.phdr .question-hero-copy{
  margin-top:-2px;
}

.phdr .question-title-display{
  margin:0 0 10px 0;
  font:700 46px/1.06 'Roboto Condensed', Arial, sans-serif;
  text-transform:capitalize;
  letter-spacing:.2px;
  color:#14212b;
}

.phdr .vehicle-hero-line{
  margin:0 0 6px 0;
  font:700 19px/1.18 'Roboto Condensed', Arial, sans-serif;
  letter-spacing:.3px;
  color:#1775ba;
}

.phdr .vehicle-meta-line{
  margin:0;
  font:600 12px/1.42 'Roboto', Arial, sans-serif;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#62727f;
}

#question .content{
  padding-top:18px;
}

#question .user{
  margin-top:4px;
}

#question .stats ul.info li.expert-badge-row{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#question .stats ul.info li.expert-badge-row .expert-badge-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff;
  color:#2f7a45;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

@media (max-width: 900px){
  .phdr .question-title-display{
    font-size:34px;
  }
  .phdr .vehicle-hero-line{
    font-size:17px;
  }
}

@media (max-width: 550px){
  .phdr .question-title-display{
    font-size:26px;
    line-height:1.1;
  }
  .phdr .vehicle-hero-line{
    font-size:16px;
  }
  .phdr .vehicle-meta-line{
    font-size:11px;
    line-height:1.4;
  }
}
/* ===== /AIO: CERTIFIED EXPERT + HEADER POLISH ===== */

/* ===== AIO: TOP SECTION REBALANCE (2026-04-02) ===== */
.phdr .content.postheader{
  padding-top: 18px;
  padding-bottom: 10px;
}

.phdr .logoheader{
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.phdr .question-hero-copy{
  margin-top: 0;
}

.phdr .question-title-display{
  margin: 0 0 8px 0;
  font: 700 40px/1.08 'Roboto Condensed', Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: #14212b;
}

.phdr .vehicle-hero-line{
  margin: 0 0 4px 0;
  font: 700 17px/1.2 'Roboto Condensed', Arial, sans-serif;
  letter-spacing: .2px;
  color: #1775ba;
}

.phdr .vehicle-meta-line{
  margin: 0;
  font: 600 11px/1.4 'Roboto', Arial, sans-serif;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: #6a7884;
}

#question .content{
  padding-top: 10px;
}

#question .user{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  max-width: 760px;
  margin: 2px auto 18px auto;
}

#question .avatar{
  width: 72px;
  min-width: 72px;
  margin: 0;
}

#question .avatar img,
#question .avatar a img{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}

#question .infowrap{
  width: auto;
  margin: 0;
  padding: 0;
}

#question .infowrap .username{
  margin: 0 0 6px 0;
  font: 700 18px/1.1 'Roboto Condensed', Arial, sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #111;
}

#question .infowrap .experience{
  display: block;
  margin-top: 4px;
  font: 400 11px/1.3 'Roboto', Arial, sans-serif;
  color: #6f7d88;
}

#question .stats{
  margin: 0;
}

#question .stats ul.info{
  margin: 0;
  padding: 0;
}

#question .stats ul.info li{
  margin: 0 8px 8px 0;
  vertical-align: middle;
}

#question .stats ul.info li.expert-badge-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#question .stats ul.info li.follow,
#question .stats ul.info li.qid,
#question .stats ul.info li.uid{
  opacity: .92;
}

#question .qbody{
  max-width: 760px;
  margin: 0 auto;
}

#question .user + .qbody{
  margin-top: 6px;
}

@media (max-width: 900px){
  .phdr .logoheader{
    max-width: 100%;
  }

  .phdr .question-title-display{
    font-size: 32px;
  }

  .phdr .vehicle-hero-line{
    font-size: 16px;
  }

  #question .user{
    max-width: 100%;
  }
}

@media (max-width: 550px){
  .phdr .question-title-display{
    font-size: 26px;
    line-height: 1.12;
  }

  .phdr .vehicle-hero-line{
    font-size: 15px;
  }

  .phdr .vehicle-meta-line{
    font-size: 10px;
    line-height: 1.35;
  }

  #question .user{
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 12px;
    margin-bottom: 14px;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 58px;
    height: 58px;
  }

  #question .infowrap .username{
    font-size: 16px;
  }

  #question .stats ul.info li{
    margin-right: 6px;
    margin-bottom: 6px;
  }
}
/* ===== /AIO: TOP SECTION REBALANCE ===== */

/* ===== AIO: ADMIN OVERLAY / EDIT FORM POLISH (2026-04-02) ===== */

/* keep top notices and admin prompts from clipping into header */
body .fancybox-overlay,
body #fancybox-overlay {
  z-index: 99999 !important;
}

body .fancybox-wrap,
body #fancybox-wrap {
  z-index: 100000 !important;
}

body .fancybox-skin,
body #fancybox-content {
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
}

/* generic toolbox/admin popup body */
#toolbox,
#adminbox {
  box-sizing: border-box;
  width: min(92vw, 720px);
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 24px;
  background: #fff;
  color: #13202b;
  border-radius: 14px;
  overflow-wrap: break-word;
}

#toolbox h1,
#toolbox h2,
#toolbox h3,
#adminbox h1,
#adminbox h2,
#adminbox h3 {
  margin: 0 0 14px 0;
  font: 700 22px/1.15 'Roboto Condensed', Arial, sans-serif;
  color: #13202b;
}

#toolbox p,
#toolbox div,
#adminbox p,
#adminbox div {
  font: 400 15px/1.5 'Roboto', Arial, sans-serif;
}

/* merge / delete / why modal buttons */
#toolbox input[type="button"],
#toolbox button,
#adminbox input[type="button"],
#adminbox button {
  height: 36px;
  padding: 0 14px;
  margin: 8px 8px 0 0;
  border: 1px solid #b8c6d3;
  border-radius: 9px;
  background: #f4f8fb;
  color: #13202b;
  font: 600 14px/1 'Roboto', Arial, sans-serif;
  cursor: pointer;
}

#toolbox input[type="text"],
#toolbox input[type="search"],
#toolbox textarea,
#adminbox input[type="text"],
#adminbox input[type="search"],
#adminbox textarea {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-top: 10px;
  border: 1px solid #bcc8d4;
  border-radius: 10px;
  background: #fff;
  color: #13202b;
  font: 400 15px/1.45 'Roboto', Arial, sans-serif;
}

/* edit form cleanup */
form#edit {
  display: block;
  max-width: 760px;
  margin: 18px 0 8px 0;
}

form#edit textarea {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 140px;
  box-sizing: border-box;
  margin: 0 0 12px 0 !important;
  padding: 12px 14px;
  border: 1px solid #bcc8d4;
  border-radius: 12px;
  background: #fff;
  color: #13202b;
  font: 400 16px/1.55 'Roboto', Arial, sans-serif;
  resize: vertical;
  overflow: auto;
}

form#edit textarea + textarea {
  min-height: 220px;
}

form#edit input[type="button"],
form#edit input[type="submit"],
form#edit button {
  height: 38px;
  padding: 0 14px;
  margin: 0 8px 10px 0;
  border: 1px solid #b8c6d3;
  border-radius: 9px;
  background: #f4f8fb;
  color: #13202b;
  font: 600 14px/1 'Roboto', Arial, sans-serif;
  cursor: pointer;
}

form#edit input[type="file"] {
  margin-top: 8px;
}

form#edit .upload-btn,
form#edit .uploadBtn,
form#edit .addimage,
form#edit .addvideo {
  display: inline-block;
  margin-top: 8px;
}

/* top status banner spacing */
body > .success,
body > .error,
body > .notice,
body > .warning,
.reload + .success,
.reload + .error {
  margin-top: 18px !important;
}

/* mobile safety */
@media (max-width: 700px) {
  #toolbox,
  #adminbox {
    width: calc(100vw - 22px);
    padding: 16px 16px 18px;
  }

  #toolbox h1,
  #toolbox h2,
  #toolbox h3,
  #adminbox h1,
  #adminbox h2,
  #adminbox h3 {
    font-size: 20px;
  }

  form#edit textarea {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* ===== /AIO: ADMIN OVERLAY / EDIT FORM POLISH ===== */

/* ===== AIO: FANCYBOX INNER SCROLL / MESSAGE LAYOUT FIX (2026-04-02) ===== */

/* kill cramped fancybox inner scrolling for small admin prompts */
.fancybox-opened,
#fancybox-wrap {
  overflow: visible !important;
}

.fancybox-outer,
.fancybox-inner,
#fancybox-outer,
#fancybox-inner,
#fancybox-content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* keep admin/toolbox prompts compact and centered */
.fancybox-wrap:has(#adminbox),
.fancybox-wrap:has(#toolbox) {
  width: min(92vw, 760px) !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
}

#adminbox,
#toolbox {
  min-height: 0 !important;
}

/* merge / delete / reindex / why prompt copy */
#adminbox,
#toolbox,
#adminbox *,
#toolbox * {
  box-sizing: border-box;
}

#adminbox {
  padding-top: 20px !important;
  padding-bottom: 18px !important;
}

#toolbox {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

#adminbox h1,
#adminbox h2,
#adminbox h3,
#toolbox h1,
#toolbox h2,
#toolbox h3 {
  margin: 0 0 12px 0 !important;
}

#adminbox input[type="text"],
#toolbox input[type="text"] {
  margin: 8px 0 0 0 !important;
}

#adminbox input[type="button"],
#adminbox button,
#toolbox input[type="button"],
#toolbox button {
  margin-top: 12px !important;
}

/* make simple response messages cleaner */
#toolbox {
  font: 400 17px/1.55 'Roboto', Arial, sans-serif;
}

#toolbox br + br {
  display: none;
}

#toolbox .success,
#toolbox .error,
#toolbox .notice,
#toolbox .warning {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* mobile */
@media (max-width: 700px) {
  .fancybox-wrap:has(#adminbox),
  .fancybox-wrap:has(#toolbox) {
    width: calc(100vw - 20px) !important;
  }
}

/* ===== /AIO: FANCYBOX INNER SCROLL / MESSAGE LAYOUT FIX ===== */

/* ===== AIO: FANCYBOX TOP OFFSET FIX (2026-04-02) ===== */
.fancybox-wrap,
#fancybox-wrap {
  top: 110px !important;
}

@media (max-width: 700px) {
  .fancybox-wrap,
  #fancybox-wrap {
    top: 86px !important;
  }
}
/* ===== /AIO: FANCYBOX TOP OFFSET FIX ===== */

/* ===== AIO: PAGE 1 REPLY FLOW NORMALIZE (2026-04-02) ===== */

/* keep reply list reading like a thread */
#replies .reply.white{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  clear: both !important;
}

/* normalize reply body cards */
#replies .reply.white > .content{
  display: block !important;
  margin: 18px 20px !important;
  padding: 0 0 14px 0 !important;
}

/* pagination card should not look like a reply */
#replies .reply.white .paginationtt{
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

#replies .reply.white .paginationtt ul{
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#replies .reply.white .paginationtt li{
  margin: 0 !important;
  padding: 0 !important;
}

#replies .reply.white .paginationtt a{
  display: inline-block !important;
  min-width: 34px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: #eef3f7 !important;
  text-decoration: none !important;
}

#replies .reply.white .paginationtt .active a,
#replies .reply.white .paginationtt li.active a{
  background: #0b7fc1 !important;
  color: #fff !important;
}

/* tighten the giant air gaps between first replies */
#replies .reply{
  margin-bottom: 12px !important;
}

#replies .text{
  margin-top: 10px !important;
  line-height: 1.58 !important;
}

#replies .user{
  margin-bottom: 8px !important;
}

/* keep the reply form separate from thread items */
#repw{
  margin-top: 16px !important;
}

/* AIO: question pagination restore (logged-out nextgen pages) */
.paginationtt{
  clear: both;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
}
.paginationtt ul{
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
}
.paginationtt ul > li{
  display: inline-block;
  list-style: none;
  margin: 0 2px;
  padding: 0;
  border-radius: 2px;
}
.paginationtt ul > li > a,
.paginationtt ul > li > span{
  display: inline-block;
  color: #000;
  text-align: center;
  margin: 3px 6px;
  text-decoration: none !important;
}
.paginationtt ul > li:first-child{
  margin-left: -6px;
}
.paginationtt ul > .active > a,
.paginationtt ul > .active > span{
  color: #fff;
  cursor: default;
  font-weight: 800;
}
.paginationtt ul > .disabled > a,
.paginationtt ul > .disabled > span{
  cursor: default;
}
@media all and (max-width:520px){
  .paginationtt ul li.page{
    display: none;
  }
}

/* AIO: paginationtt polish pass */
.paginationtt{
  clear: both;
  margin: 14px 0 18px !important;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.paginationtt ul{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.paginationtt ul > li{
  display: inline-block;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px;
}

.paginationtt ul > li > a,
.paginationtt ul > li > span{
  display: inline-block;
  min-width: 18px;
  padding: 8px 11px;
  margin: 0 !important;
  border-radius: 999px;
  color: #1f2d3a !important;
  background: transparent;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.paginationtt ul > li.page > a:hover,
.paginationtt ul > li.prev > a:hover,
.paginationtt ul > li.next_page > a:hover{
  background: #e9f4fb;
  color: #0b79b7 !important;
}

.paginationtt ul > li.active > a,
.paginationtt ul > li.active > span{
  background: #0b79b7 !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.paginationtt ul > li.gap > a,
.paginationtt ul > li.gap > span,
.paginationtt ul > li.disabled > a,
.paginationtt ul > li.disabled > span{
  color: #6f7d89 !important;
}

.paginationtt ul > li.prev > a,
.paginationtt ul > li.next_page > a{
  font-weight: 600;
  letter-spacing: .02em;
}

@media all and (max-width: 640px){
  .paginationtt{
    margin: 12px 0 16px !important;
    font-size: 14px;
  }

  .paginationtt ul{
    gap: 4px;
  }

  .paginationtt ul > li > a,
  .paginationtt ul > li > span{
    padding: 7px 9px;
  }
}

@media all and (max-width:520px){
  .paginationtt ul li.page{
    display: none;
  }
  .paginationtt ul li.prev,
  .paginationtt ul li.next_page,
  .paginationtt ul li.active,
  .paginationtt ul li.gap{
    display: inline-block;
  }
}

/* === AIO QUESTION PAGE TOP POLISH 2026-04-08 === */
@media (min-width: 769px){

  body.ng #postwrap #question{
    margin-top: 8px;
  }

  body.ng #postwrap #question > .content:first-child,
  body.ng #question > .content:first-child{
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  body.ng #question h1{
    margin: 0 0 8px 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -.2px !important;
    text-transform: none !important;
  }

  body.ng #question h2{
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }

  body.ng #question .titledesc,
  body.ng #question .question-meta,
  body.ng #question .vehicle-meta,
  body.ng #question .vehicle-stats{
    margin-top: 4px !important;
    margin-bottom: 18px !important;
  }

  body.ng #replies .reply.white:first-of-type,
  body.ng #replies .reply:first-of-type{
    border: 1px solid #e6ebf0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
    overflow: hidden !important;
  }

  body.ng #replies .reply .content{
    margin: 24px 28px 22px 28px !important;
  }

  body.ng #replies .reply .user{
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    float: none !important;
    display: block !important;
    width: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    display: block !important;
    object-fit: cover !important;
  }

  body.ng #replies .reply .infowrap{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.ng #replies .reply .username{
    font-size: 18px !important;
    line-height: 1.15 !important;
    letter-spacing: .2px !important;
    margin: 0 0 10px 0 !important;
  }

  body.ng #replies .reply .stats{
    margin: 0 !important;
  }

  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user,
  body.ng #replies .reply .stats ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.ng #replies .reply .stats ul.info li,
  body.ng #replies .reply .stats ul.user li,
  body.ng #replies .reply .stats ul li{
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    letter-spacing: .8px !important;
  }

  body.ng #replies .reply .stats ul.info li::marker,
  body.ng #replies .reply .stats ul.user li::marker,
  body.ng #replies .reply .stats ul li::marker{
    content: "" !important;
  }

  body.ng #replies .reply li.follow{
    background: #eef6ff !important;
    color: #0d6fb8 !important;
    border: 1px solid #cfe4fb !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: all .15s ease !important;
  }

  body.ng #replies .reply li.follow:hover{
    background: #dfefff !important;
    color: #085e9d !important;
    border-color: #b8d9fb !important;
  }

  body.ng #replies .reply .text{
    clear: both !important;
    margin-top: 6px !important;
  }

  body.ng #replies .reply .qbody{
    font-size: 18px !important;
    line-height: 1.65 !important;
  }

  body.ng #replies .reply .date{
    margin-top: 18px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    color: #9aa6b2 !important;
  }

  body.ng .nmbreplies{
    margin-top: 26px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.ng .nmbreplies > h2{
    padding-left: 18px !important;
    line-height: 46px !important;
    font-size: 28px !important;
    letter-spacing: -.2px !important;
  }
}

@media (max-width: 768px){

  body.ng #question h1{
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  body.ng #replies .reply .content{
    margin: 18px 18px 20px 18px !important;
  }

  body.ng #replies .reply .user{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    float: none !important;
    width: 56px !important;
    min-width: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
  }

  body.ng #replies .reply .username{
    margin: 0 0 8px 0 !important;
  }

  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user,
  body.ng #replies .reply .stats ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.ng #replies .reply .stats ul.info li,
  body.ng #replies .reply .stats ul.user li,
  body.ng #replies .reply .stats ul li{
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  body.ng #replies .reply .qbody{
    line-height: 1.6 !important;
  }

  body.ng .nmbreplies{
    margin-top: 22px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
}
/* === END AIO QUESTION PAGE TOP POLISH 2026-04-08 === */

/* === AIO PHDR HERO TIGHTEN 2026-04-07 === */
@media (min-width: 769px){
  body.ng .box.white.phdr{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
  }

  body.ng .phdr .content.postheader{
    padding: 8px 0 4px 0 !important;
    background: transparent !important;
  }

  body.ng .phdr .logoheader{
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
  }

  body.ng .phdr .question-hero-copy{
    text-align: left !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 44px !important;
    line-height: 1.12 !important;
    letter-spacing: -.45px !important;
    margin: 0 0 10px 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: -.35px !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: .8px !important;
    margin: 0 !important;
    opacity: .92 !important;
  }

  body.ng #question{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ng .box.nmbreplies,
  body.ng #replies{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px){
  body.ng .box.white.phdr{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.ng .phdr .content.postheader{
    padding: 6px 0 2px 0 !important;
    background: transparent !important;
  }

  body.ng .phdr .logoheader{
    padding: 0 16px !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -.5px !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 24px !important;
    line-height: 1.12 !important;
    margin: 0 0 6px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .7px !important;
    margin: 0 !important;
  }
}
/* === END AIO PHDR HERO TIGHTEN 2026-04-07 === */

/* === AIO DESKTOP BALANCE OVERRIDE 2026-04-07 === */
@media (min-width: 1100px){

  /* use the available center-column space better */
  body.ng .phdr .logoheader,
  body.ng #question,
  body.ng .box.nmbreplies,
  body.ng #replies{
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* top hero should feel wide, not poster-narrow */
  body.ng .phdr .content.postheader{
    padding: 10px 0 10px 0 !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 42px !important;
    line-height: 1.08 !important;
    letter-spacing: -.35px !important;
    margin: 0 0 6px 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 26px !important;
    line-height: 1.12 !important;
    margin: 0 0 4px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: .7px !important;
  }

  /* replies: give them more room and better proportion */
  body.ng #replies .reply .content{
    margin: 26px 30px 26px 30px !important;
  }

  body.ng #replies .reply .user{
    gap: 18px !important;
    margin-bottom: 18px !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    width: 76px !important;
    min-width: 76px !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
  }

  body.ng #replies .reply .text{
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  /* let image galleries breathe */
  body.ng #replies .image-gallery,
  body.ng #question .image-gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body.ng #replies .thumbnail img,
  body.ng #question .thumbnail img{
    max-height: 420px !important;
  }
}
/* === END AIO DESKTOP BALANCE OVERRIDE 2026-04-07 === */

/* === AIO QUESTION PAGE FINISH PASS 2026-04-07 === */
@media (min-width: 1100px){

  /* keep page comfortably wide, but not stretched */
  body.ng .phdr .logoheader,
  body.ng #question,
  body.ng .box.nmbreplies,
  body.ng #replies{
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* make hero align with the text column, not the avatar column */
  body.ng .phdr .logoheader{
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 32px !important;
    align-items: start !important;
  }

  body.ng .phdr .question-hero-copy{
    grid-column: 2 !important;
    max-width: none !important;
    text-align: left !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 6px 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 26px !important;
    line-height: 1.12 !important;
    margin: 0 0 3px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: .6px !important;
    margin: 0 !important;
  }

  /* original question layout */
  body.ng #question > .content{
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 32px !important;
    align-items: start !important;
  }

  body.ng #question .user{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 220px !important;
    margin: 0 !important;
  }

  body.ng #question .avatar{
    float: none !important;
    width: 96px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
    display: block !important;
  }

  body.ng #question .infowrap{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    clear: both !important;
  }

  body.ng #question .username{
    display: block !important;
    width: 100% !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px 0 !important;
  }

  body.ng #question .stats{
    width: 100% !important;
  }

  body.ng #question .stats ul.info{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.ng #question .stats ul.info li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  body.ng #question .stats ul.info li.follow{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 140px !important;
    padding: 10px 14px !important;
    border: 1px solid #cfe4fb !important;
    border-radius: 999px !important;
    background: #eef6ff !important;
    color: #0d6fb8 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  body.ng #question .stats ul.info li.follow:hover{
    background: #dfefff !important;
    color: #085e9d !important;
    border-color: #b8d9fb !important;
  }

  body.ng #question .text{
    margin: 0 !important;
    max-width: none !important;
  }

  body.ng #question .qbody{
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  /* replies keep the improved card look */
  body.ng #replies .reply .content{
    margin: 26px 32px 26px 32px !important;
  }

  body.ng #replies .reply .text{
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  /* diagrams should be 2 across, not 3 */
  body.ng #replies .image-gallery,
  body.ng #question .image-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.ng #replies .thumbnail img,
  body.ng #question .thumbnail img{
    max-height: 620px !important;
  }
}

/* visible close button for image popups */
body.ng .fancybox-close,
body.ng .fancybox-close-small,
body.ng .fancybox-button--close{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 999999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.92) !important;
}

body.ng .fancybox-button--close svg,
body.ng .fancybox-close-small svg{
  color: #fff !important;
  fill: #fff !important;
}
/* === END AIO QUESTION PAGE FINISH PASS 2026-04-07 === */

/* === AIO QUESTION PAGE MICRO TUNE 2026-04-07 === */
@media (min-width: 1100px){

  /* tighten left column so title/body starts a bit further left */
  body.ng .phdr .logoheader,
  body.ng #question > .content{
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  body.ng #question .user{
    width: 170px !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 38px !important;
    line-height: 1.08 !important;
    letter-spacing: -.25px !important;
    margin: 0 0 6px 0 !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 24px !important;
    margin: 0 0 2px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 12px !important;
    letter-spacing: .55px !important;
  }

  body.ng #question .avatar{
    width: 88px !important;
    margin: 0 0 12px 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width: 88px !important;
    height: 88px !important;
  }

  body.ng #question .username{
    font-size: 16px !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng #question .stats ul.info{
    gap: 6px !important;
  }

  body.ng #question .stats ul.info li:not(.follow){
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #f5f8fb !important;
    border: 1px solid #e3ebf3 !important;
    font-size: 11px !important;
    letter-spacing: .35px !important;
    line-height: 1 !important;
  }

  /* make reply detail lines feel grouped instead of drifting apart */
  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user,
  body.ng #replies .reply .stats ul{
    gap: 6px !important;
  }

  body.ng #replies .reply .stats ul.info li,
  body.ng #replies .reply .stats ul.user li,
  body.ng #replies .reply .stats ul li{
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #f5f8fb !important;
    border: 1px solid #e3ebf3 !important;
    font-size: 11px !important;
    letter-spacing: .35px !important;
    line-height: 1 !important;
  }
}
/* === END AIO QUESTION PAGE MICRO TUNE 2026-04-07 === */

/* === AIO HERO + REPLY TIGHTEN 2026-04-07 === */
@media (min-width: 1100px){

  /* hero should span the whole main container */
  body.ng .phdr .logoheader{
    display: block !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
  }

  body.ng .phdr .question-hero-copy{
    display: block !important;
    max-width: 1080px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: -.2px !important;
    margin: 0 0 6px 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 24px !important;
    line-height: 1.12 !important;
    margin: 0 0 3px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .5px !important;
    margin: 0 !important;
  }

  /* breadcrumbs: more visible, still clean */
  body.ng ul.breadcrumb{
    margin: 8px 0 18px 0 !important;
    padding: 0 !important;
  }

  body.ng ul.breadcrumb li,
  body.ng ul.breadcrumb li a{
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #4b6580 !important;
  }

  body.ng ul.breadcrumb li.current,
  body.ng ul.breadcrumb li:last-child,
  body.ng ul.breadcrumb li:last-child a{
    color: #156fb8 !important;
    font-weight: 700 !important;
  }

  /* original question stays two-column, but a bit tighter */
  body.ng #question > .content{
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 22px !important;
  }

  /* reply card header: bring avatar closer to name/meta */
  body.ng #replies .reply .content{
    margin: 24px 28px 24px 28px !important;
  }

  body.ng #replies .reply .user{
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    margin-bottom: 14px !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    width: 74px !important;
    min-width: 74px !important;
    margin: 0 !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width: 74px !important;
    height: 74px !important;
  }

  body.ng #replies .reply .infowrap{
    margin: 0 !important;
    padding-top: 2px !important;
  }

  body.ng #replies .reply .username{
    font-size: 17px !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng #replies .reply .stats{
    margin: 0 !important;
  }

  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user,
  body.ng #replies .reply .stats ul{
    gap: 5px !important;
  }

  body.ng #replies .reply .stats ul.info li,
  body.ng #replies .reply .stats ul.user li,
  body.ng #replies .reply .stats ul li{
    padding: 5px 9px !important;
    font-size: 10px !important;
    letter-spacing: .3px !important;
  }
}
/* === END AIO HERO + REPLY TIGHTEN 2026-04-07 === */

/* === AIO TITLE ALIGN + REPLY LABEL FIX V2 2026-04-07 === */
@media (min-width: 1100px){

  /* remove leftover inset so hero lines up cleanly */
  body.ng .box.white.qcrumbs .content,
  body.ng .box.white.phdr .content.postheader{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ng .box.white.qcrumbs,
  body.ng .box.white.phdr{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.ng .qcrumbs,
  body.ng .phdr,
  body.ng #question,
  body.ng .box.nmbreplies,
  body.ng #replies{
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ng .phdr .logoheader,
  body.ng .phdr .question-hero-copy{
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* optical alignment tweak for the headline only */
  body.ng .phdr .question-title-display{
    margin-left: -12px !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }

  body.ng .phdr .vehicle-hero-line,
  body.ng .phdr .vehicle-meta-line{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* === END AIO TITLE ALIGN + REPLY LABEL FIX V2 2026-04-07 === */

/* === AIO MOBILE QUESTION/REPLY PASS 2026-04-07 === */
@media (max-width: 768px){

  /* make crumbs a little clearer on mobile */
  body.ng .qcrumbs{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 6px !important;
  }

  body.ng .qcrumbs .content{
    padding: 0 16px 0 16px !important;
  }

  body.ng ul.breadcrumb{
    margin: 8px 0 14px 0 !important;
    padding: 0 !important;
  }

  body.ng ul.breadcrumb li,
  body.ng ul.breadcrumb li a{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* top hero */
  body.ng .box.white.phdr{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 6px !important;
  }

  body.ng .phdr .content.postheader{
    padding: 0 16px 2px 16px !important;
    background: transparent !important;
  }

  body.ng .phdr .logoheader,
  body.ng .phdr .question-hero-copy{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .question-title-display{
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -.35px !important;
    margin: 0 0 8px 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .vehicle-hero-line{
    font-size: 21px !important;
    line-height: 1.12 !important;
    margin: 0 0 4px 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .45px !important;
    margin: 0 !important;
  }

  /* original question card */
  body.ng #question{
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  body.ng #question > .content{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #question .user{
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start !important;
    margin: 18px 18px 12px 18px !important;
  }

  body.ng #question .avatar{
    float: none !important;
    width: 64px !important;
    min-width: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    display: block !important;
  }

  body.ng #question .infowrap{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #question .username{
    display: block !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng #question .stats{
    margin: 0 !important;
  }

  body.ng #question .stats ul.info{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.ng #question .stats ul.info li{
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #f5f8fb !important;
    border: 1px solid #e3ebf3 !important;
    font-size: 10px !important;
    letter-spacing: .3px !important;
    line-height: 1 !important;
  }

  body.ng #question .stats ul.info li.follow{
    background: #eef6ff !important;
    border-color: #cfe4fb !important;
    color: #0d6fb8 !important;
    font-weight: 700 !important;
  }

  body.ng #question .text{
    margin: 0 18px 18px 18px !important;
  }

  body.ng #question .qbody{
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  /* replies */
  body.ng .box.nmbreplies,
  body.ng #replies{
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  body.ng #replies .reply .content{
    margin: 18px 18px 18px 18px !important;
  }

  body.ng #replies .reply .user{
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    margin-bottom: 12px !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    width: 56px !important;
    min-width: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
  }

  body.ng #replies .reply .infowrap{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng #replies .reply .username{
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 0 7px 0 !important;
  }

  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user,
  body.ng #replies .reply .stats ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.ng #replies .reply .stats ul.info li,
  body.ng #replies .reply .stats ul.user li,
  body.ng #replies .reply .stats ul li{
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: #f5f8fb !important;
    border: 1px solid #e3ebf3 !important;
    font-size: 10px !important;
    letter-spacing: .25px !important;
    line-height: 1 !important;
  }

  body.ng #replies .reply .text{
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* mobile galleries stay 2 across */
  body.ng #replies .image-gallery,
  body.ng #question .image-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
/* === END AIO MOBILE QUESTION/REPLY PASS 2026-04-07 === */

/* === AIO MOBILE FINISH PASS 2026-04-07 === */
@media (max-width: 768px){

  /* lock mobile hero lines together */
  body.ng .phdr .content.postheader{
    padding: 0 16px 2px 16px !important;
  }

  body.ng .phdr .logoheader,
  body.ng .phdr .question-hero-copy{
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  body.ng .phdr .question-title-display{
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    letter-spacing: -.25px !important;
  }

  body.ng .phdr .vehicle-hero-line{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.ng .phdr .vehicle-meta-line{
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
  }

  /* mobile gallery should be single-column */
  body.ng #replies .image-gallery,
  body.ng #question .image-gallery{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
/* === END AIO MOBILE FINISH PASS 2026-04-07 === */

/* === AIO CERTIFIED EXPERT BADGE 2026-04-07 === */

/* desktop + mobile: make the first expert pill feel more official */
body.ng #question .stats ul.info li.gbg:first-child,
body.ng #replies .reply .stats ul.info li.gbg:first-child{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px 6px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #eef7ff 0%, #dceeff 100%) !important;
  border: 1px solid #b8d9fb !important;
  color: #0b67ad !important;
  font-weight: 800 !important;
  letter-spacing: .35px !important;
  box-shadow: 0 1px 2px rgba(13,111,184,.10) !important;
}

/* add the badge/check visual */
body.ng #question .stats ul.info li.gbg:first-child::before,
body.ng #replies .reply .stats ul.info li.gbg:first-child::before{
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #0d6fb8 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex: 0 0 16px !important;
}

/* keep the posts pill calmer so the expert badge stands out */
body.ng #question .stats ul.info li.gbg:not(:first-child),
body.ng #replies .reply .stats ul.info li.gbg:not(:first-child){
  background: #f5f8fb !important;
  border: 1px solid #e3ebf3 !important;
  color: #3d5368 !important;
  font-weight: 700 !important;
}

/* mobile: give it just a little more presence without crowding */
@media (max-width: 768px){
  body.ng #question .stats ul.info li.gbg:first-child,
  body.ng #replies .reply .stats ul.info li.gbg:first-child{
    padding: 5px 10px 5px 8px !important;
    font-size: 10px !important;
  }

  body.ng #question .stats ul.info li.gbg:first-child::before,
  body.ng #replies .reply .stats ul.info li.gbg:first-child::before{
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    flex: 0 0 14px !important;
  }
}
/* === END AIO CERTIFIED EXPERT BADGE 2026-04-07 === */

/* === question bottom related strip refresh === */
body.ng .relqc.mandi {
  padding-top: 0;
  padding-bottom: 0;
}

body.ng .relqc.mandi .ng-related-item {
  padding: 0;
}

body.ng .relqc.mandi .ng-related-media-card {
  margin: 0;
}

body.ng .relqc.mandi .ng-related-media-link,
body.ng .relqc.mandi .ng-related-item-video .ng-related-media-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 16px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}

body.ng .relqc.mandi .ng-related-media-link:hover,
body.ng .relqc.mandi .ng-related-item-video .ng-related-media-card:hover {
  background: #f7fafc;
  box-shadow: inset 0 0 0 1px #e6eef5;
}

body.ng .relqc.mandi .ng-related-media-thumb,
body.ng .relqc.mandi .ng-related-media-thumb img {
  width: 148px;
  height: 84px;
  max-width: 148px;
  min-width: 148px;
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
}

body.ng .relqc.mandi .ng-related-media-copy {
  width: auto;
  max-width: none;
  padding-left: 0;
  text-align: left;
  text-transform: none;
}

body.ng .relqc.mandi .ng-related-media-kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5fb;
  color: #1c6ea4;
  font: 700 11px/1 Roboto, Arial, sans-serif;
  letter-spacing: .8px;
}

body.ng .relqc.mandi .ng-related-media-title {
  color: #163247;
  font: 700 20px/1.25 "Roboto Condensed", Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  text-transform: none;
}

body.ng .relqc.mandi .post-line {
  width: calc(100% - 36px);
  height: 1px;
  margin: 0 auto;
  background: #e8eef3;
}

body.ng .relqc.mandi .videopop_grey {
  width: 38px;
  height: 30px;
  margin-top: -15px;
}

@media (max-width: 700px) {
  body.ng .relqc.mandi .ng-related-media-link,
  body.ng .relqc.mandi .ng-related-item-video .ng-related-media-card {
    gap: 12px;
    padding: 14px;
  }

  body.ng .relqc.mandi .ng-related-media-thumb,
  body.ng .relqc.mandi .ng-related-media-thumb img {
    width: 120px;
    height: 72px;
    max-width: 120px;
    min-width: 120px;
  }

  body.ng .relqc.mandi .ng-related-media-title {
    font-size: 17px;
  }
}

/* === question bottom simplify to 3 related questions === */
body.ng .ng-q-helpbox {
  margin: 18px 0 6px;
  padding: 18px 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #f8fbfd;
}

body.ng .ng-q-helpbox-title {
  margin-bottom: 6px;
  color: #143247;
  font: 700 22px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
}

body.ng .ng-q-helpbox-copy {
  margin-bottom: 14px;
  color: #4f6575;
  font: 400 16px/1.5 Roboto, Arial, sans-serif;
}

body.ng .ng-q-helpbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.ng .ng-q-helpbtn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1185c9;
  color: #fff !important;
  text-decoration: none;
  font: 700 13px/1 Roboto, Arial, sans-serif;
  letter-spacing: .3px;
}

body.ng .ng-q-helpbtn.alt {
  background: #e8f1f8;
  color: #174263 !important;
}

body.ng .relheaderb.nmbreplies h2 {
  text-transform: none;
}

body.ng .content.index .preview.p-user {
  margin-bottom: 18px;
}

body.ng .content.index .preview.p-user img,
body.ng .content.index .preview.p-user .reltype,
body.ng .content.index .preview.p-user .guide,
body.ng .content.index .preview.p-user .video,
body.ng .content.index .preview.p-user .article,
body.ng .content.index .preview.p-user .vmore + img {
  display: none !important;
}

/* === question bottom final cleanup === */
body.ng .ng-q-helpbox {
  margin: 18px 0 6px;
  padding: 18px 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #f8fbfd;
}
body.ng .ng-q-helpbox-title {
  margin-bottom: 6px;
  color: #143247;
  font: 700 22px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
  text-transform: none;
}
body.ng .ng-q-helpbox-copy {
  margin-bottom: 14px;
  color: #4f6575;
  font: 400 16px/1.5 Roboto, Arial, sans-serif;
  text-transform: none;
}
body.ng .ng-q-helpbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.ng .ng-q-helpbtn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1185c9;
  color: #fff !important;
  text-decoration: none;
  font: 700 13px/1 Roboto, Arial, sans-serif;
  letter-spacing: .3px;
}
body.ng .ng-q-helpbtn.alt {
  background: #e8f1f8;
  color: #174263 !important;
}

/* === question bottom final linefix === */
body.ng .ng-q-helpbox {
  margin: 18px 0 8px;
  padding: 18px 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #f8fbfd;
}
body.ng .ng-q-helpbox-title {
  margin-bottom: 6px;
  color: #143247;
  font: 700 22px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
  text-transform: none;
}
body.ng .ng-q-helpbox-copy {
  margin-bottom: 14px;
  color: #4f6575;
  font: 400 16px/1.5 Roboto, Arial, sans-serif;
  text-transform: none;
}
body.ng .ng-q-helpbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.ng .ng-q-helpbtn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #1185c9;
  color: #fff !important;
  text-decoration: none;
  font: 700 13px/1 Roboto, Arial, sans-serif;
}
body.ng .ng-q-helpbtn.alt {
  background: #e8f1f8;
  color: #174263 !important;
}

/* === AIO reply-flow pass 1: compact reply identity, stronger text flow === */
#replies .reply.white{
  border-radius: 12px;
}

#replies .reply > .content{
  margin: 18px 28px 22px 28px;
}

#replies .reply .user{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#replies .reply .avatar{
  float: none;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
}

#replies .reply .avatar a img,
#replies .reply .avatar img{
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

#replies .reply .infowrap{
  margin-left: 0;
  min-width: 0;
  flex: 1 1 auto;
}

#replies .reply .username{
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: .4px;
  margin: 0 0 6px 0;
}

#replies .reply .stats{
  min-height: 0;
}

#replies .reply ul.info{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#replies .reply ul.info li{
  margin: 0;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .4px;
  border-radius: 999px;
}

#replies .reply .text{
  margin-top: 8px;
  margin-left: 54px;
  font-size: 1.08rem;
  line-height: 1.72;
}

#replies .reply .date{
  margin-top: 10px;
  margin-left: 54px;
  font-size: 10px;
  letter-spacing: 1px;
}

#replies .reply .gallery{
  margin-left: 54px;
}

@media (max-width: 770px){
  #replies .reply > .content{
    margin: 16px 16px 18px 16px;
  }

  #replies .reply .user{
    gap: 10px;
    margin-bottom: 8px;
  }

  #replies .reply .avatar{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 36px;
    height: 36px;
    border-radius: 7px;
  }

  #replies .reply .username{
    font-size: 12px;
    margin-bottom: 5px;
  }

  #replies .reply ul.info li{
    font-size: 9px;
    padding: 4px 7px;
  }

  #replies .reply .text,
  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 0;
  }

  #replies .reply .text{
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.68;
  }
}

/* === AIO reply-flow pass 2: micro-tighten for stronger reading rhythm === */
#replies .reply.white{
  border-radius: 10px;
}

#replies .reply > .content{
  margin: 16px 24px 20px 24px;
}

#replies .reply .user{
  gap: 10px;
  margin-bottom: 8px;
}

#replies .reply .avatar{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

#replies .reply .avatar a img,
#replies .reply .avatar img{
  width: 36px;
  height: 36px;
  border-radius: 7px;
}

#replies .reply .username{
  font-size: 12px;
  line-height: 1.1;
  margin: 0 0 5px 0;
}

#replies .reply ul.info{
  gap: 5px;
}

#replies .reply ul.info li{
  padding: 3px 7px;
  font-size: 9px;
  letter-spacing: .35px;
}

#replies .reply .text{
  margin-top: 4px;
  margin-left: 46px;
  font-size: 1.03rem;
  line-height: 1.68;
}

#replies .reply .date{
  margin-left: 46px;
}

#replies .reply .gallery{
  margin-left: 46px;
}

@media (max-width: 770px){
  #replies .reply > .content{
    margin: 14px 14px 16px 14px;
  }

  #replies .reply .user{
    gap: 8px;
    margin-bottom: 6px;
  }

  #replies .reply .avatar{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }

  #replies .reply .username{
    font-size: 11px;
    margin-bottom: 4px;
  }

  #replies .reply ul.info li{
    font-size: 8px;
    padding: 3px 6px;
  }

  #replies .reply .text{
    margin-top: 4px;
    font-size: .98rem;
    line-height: 1.62;
  }
}

/* === AIO reply-flow pass 3: stronger text-first layout === */
#replies .reply.white{
  border: 1px solid #dfe6eb;
  border-radius: 8px;
  box-shadow: none;
}

#replies .reply > .content{
  margin: 14px 18px 16px 18px;
}

#replies .reply .user{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

#replies .reply .avatar{
  float: none;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
}

#replies .reply .avatar a img,
#replies .reply .avatar img{
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

#replies .reply .infowrap{
  margin-left: 0;
  min-width: 0;
  flex: 1 1 auto;
}

#replies .reply .username{
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: .25px;
  margin: 0 0 4px 0;
}

#replies .reply .stats{
  min-height: 0;
}

#replies .reply ul.info{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#replies .reply ul.info li{
  margin: 0;
  padding: 2px 6px;
  font-size: 8px;
  line-height: 1.05;
  letter-spacing: .25px;
  border-radius: 999px;
}

#replies .reply .text{
  margin-top: 2px;
  margin-left: 38px;
  font-size: 1rem;
  line-height: 1.58;
}

#replies .reply .date{
  margin-top: 8px;
  margin-left: 38px;
  font-size: 9px;
  letter-spacing: .8px;
}

#replies .reply .gallery{
  margin-left: 38px;
}

#replies .reply .gallery img{
  border-radius: 6px;
}

@media (max-width: 770px){
  #replies .reply > .content{
    margin: 12px 12px 14px 12px;
  }

  #replies .reply .user{
    gap: 7px;
    margin-bottom: 4px;
  }

  #replies .reply .avatar{
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 28px;
    height: 28px;
    border-radius: 5px;
  }

  #replies .reply .username{
    font-size: 10px;
    margin-bottom: 3px;
  }

  #replies .reply ul.info li{
    font-size: 7px;
    padding: 2px 5px;
  }

  #replies .reply .text,
  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 0;
  }

  #replies .reply .text{
    margin-top: 4px;
    font-size: .98rem;
    line-height: 1.56;
  }
}

/* === AIO reply-flow pass 4: desktop left rail, mobile compact stack === */
@media (min-width: 771px){
  #replies .reply > .content{
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 18px;
    align-items: start;
    margin: 14px 18px 16px 18px;
  }

  #replies .reply .user{
    display: block;
    margin: 0;
    width: 96px;
  }

  #replies .reply .avatar{
    float: none;
    width: 54px;
    height: 54px;
    margin: 0 0 8px 0;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 54px;
    height: 54px;
    border-radius: 8px;
  }

  #replies .reply .infowrap{
    margin: 0;
    min-width: 0;
  }

  #replies .reply .username{
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .2px;
    margin: 0 0 5px 0;
    word-break: break-word;
  }

  #replies .reply .stats{
    min-height: 0;
  }

  #replies .reply ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #replies .reply ul.info li{
    margin: 0;
    padding: 2px 6px;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: .2px;
    border-radius: 999px;
    max-width: 92px;
    white-space: normal;
  }

  #replies .reply .text{
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.66;
    align-self: start;
  }

  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 114px;
  }
}

@media (max-width: 770px){
  #replies .reply > .content{
    display: block;
    margin: 12px 12px 14px 12px;
  }

  #replies .reply .user{
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 4px;
  }

  #replies .reply .avatar{
    float: none;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 26px;
    height: 26px;
    border-radius: 5px;
  }

  #replies .reply .infowrap{
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  #replies .reply .username{
    font-size: 10px;
    line-height: 1.05;
    margin: 0 0 3px 0;
  }

  #replies .reply ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  #replies .reply ul.info li{
    font-size: 7px;
    padding: 2px 5px;
    line-height: 1.05;
  }

  #replies .reply .text,
  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 0;
  }

  #replies .reply .text{
    margin-top: 4px;
    font-size: .98rem;
    line-height: 1.56;
  }
}

/* === AIO reply-flow pass 5: desktop rail fix after pass 4 over-compression === */
@media (min-width: 771px){
  #replies .reply > .content{
    grid-template-columns: 150px 1fr;
    column-gap: 22px;
  }

  #replies .reply .user{
    width: 150px;
  }

  #replies .reply .avatar{
    width: 46px;
    height: 46px;
    margin: 0 0 8px 0;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 46px;
    height: 46px;
    border-radius: 7px;
  }

  #replies .reply .username{
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .2px;
    margin: 0 0 6px 0;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  #replies .reply ul.info{
    gap: 5px;
  }

  #replies .reply ul.info li{
    max-width: 140px;
    white-space: nowrap;
    font-size: 9px;
    padding: 3px 8px;
  }

  #replies .reply .text{
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.66;
  }

  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 172px;
  }
}

/* === AIO question-flow pass 1: tighten opener to match quieter reply rhythm === */

/* keep reply separators very faint */
#replies .reply.white{
  border-color: #e8edf1;
}

/* tighten question card overall */
#question > .content{
  margin: 16px 22px 18px 22px;
}

/* desktop: make opener feel like a quieter lead paragraph with compact author stamp */
@media (min-width: 771px){
  #question .user{
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 26px;
    align-items: start;
    margin-bottom: 6px;
  }

  #question .avatar{
    float: none;
    width: 64px;
    height: 64px;
    margin: 0 0 8px 0;
  }

  #question .avatar a img,
  #question .avatar img{
    width: 64px;
    height: 64px;
    border-radius: 9px;
  }

  #question .infowrap{
    margin: 0;
    min-width: 0;
    width: 120px;
  }

  #question .username{
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .2px;
    margin: 0 0 6px 0;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  #question .stats{
    min-height: 0;
  }

  #question ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  #question ul.info li{
    margin: 0;
    padding: 3px 8px;
    font-size: 9px;
    line-height: 1.08;
    letter-spacing: .2px;
    border-radius: 999px;
    max-width: 120px;
    white-space: nowrap;
  }

  #question .text{
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.68;
    align-self: start;
  }

  #question .qbody{
    margin-top: 0;
  }
}

/* mobile: keep it compact and understated */
@media (max-width: 770px){
  #question > .content{
    margin: 12px 14px 14px 14px;
  }

  #question .user{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }

  #question .avatar{
    float: none;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  #question .avatar a img,
  #question .avatar img{
    width: 40px;
    height: 40px;
    border-radius: 7px;
  }

  #question .infowrap{
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  #question .username{
    font-size: 11px;
    line-height: 1.08;
    margin: 0 0 4px 0;
  }

  #question ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  #question ul.info li{
    font-size: 8px;
    padding: 2px 6px;
    line-height: 1.05;
  }

  #question .text{
    margin-top: 4px;
    font-size: 1rem;
    line-height: 1.58;
  }
}

/* tighten the space leading into the replies heading */
.box.nmbreplies{
  margin-top: 8px;
  margin-bottom: 14px;
}

/* === AIO reply-flow pass 6: compact desktop author stamp like mockup === */
@media (min-width: 771px){
  #replies .reply.white{
    border-color: #e9eef2;
  }

  #replies .reply > .content{
    display: grid;
    grid-template-columns: 170px 1fr;
    column-gap: 20px;
    align-items: start;
    margin: 12px 16px 14px 16px;
  }

  #replies .reply .user{
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 10px;
    align-items: start;
    width: 170px;
    margin: 0;
    padding-top: 2px;
  }

  #replies .reply .avatar{
    float: none;
    width: 54px;
    height: 54px;
    margin: 0;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 54px;
    height: 54px;
    border-radius: 7px;
  }

  #replies .reply .infowrap{
    margin: 0;
    min-width: 0;
    width: auto;
  }

  #replies .reply .username{
    display: block;
    font-size: 11px;
    line-height: 1.08;
    letter-spacing: .15px;
    margin: 2px 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #replies .reply .stats{
    min-height: 0;
  }

  #replies .reply ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
  }

  #replies .reply ul.info li{
    margin: 0;
    padding: 2px 6px;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: .15px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: none;
  }

  #replies .reply .text{
    margin: 0;
    padding-top: 2px;
    font-size: 1.02rem;
    line-height: 1.68;
  }

  #replies .reply .date,
  #replies .reply .gallery{
    margin-left: 190px;
  }

  /* make any top divider feel very faint */
  #replies .reply .user:before{
    content: "";
    display: block;
    grid-column: 1 / -1;
    height: 1px;
    background: #f1f4f7;
    margin: 0 0 10px 0;
  }
}

@media (max-width: 770px){
  #replies .reply .avatar{
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  #replies .reply .avatar a img,
  #replies .reply .avatar img{
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }

  #replies .reply .username{
    font-size: 9px;
    margin: 0 0 3px 0;
  }

  #replies .reply ul.info li{
    font-size: 7px;
    padding: 2px 4px;
  }

  #replies .reply .text{
    font-size: .97rem;
    line-height: 1.54;
  }
}

/* === AIO reply-flow pass 7: real author-stamp markup layout === */
@media (min-width: 771px){
  #replies .reply > .content{
    display: block !important;
    margin: 12px 16px 14px 16px !important;
  }

  #replies .reply .text{
    margin: 0 !important;
    padding-top: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.68 !important;
  }

  #replies .reply .reply-stamp{
    float: left;
    width: 165px;
    margin: 0 16px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
  }

  #replies .reply .reply-stamp::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 1px;
    background: #f1f4f7;
  }

  #replies .reply .reply-stamp .avatar{
    float: none !important;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0 !important;
  }

  #replies .reply .reply-stamp .avatar a img,
  #replies .reply .reply-stamp .avatar img{
    width: 42px;
    height: 42px;
    border-radius: 6px;
  }

  #replies .reply .reply-stamp-meta{
    min-width: 0;
    flex: 1 1 auto;
  }

  #replies .reply .reply-stamp .username{
    display: block;
    font-size: 11px;
    line-height: 1.08;
    letter-spacing: .15px;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #replies .reply .reply-stamp .stats{
    min-height: 0;
  }

  #replies .reply .reply-stamp ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
  }

  #replies .reply .reply-stamp ul.info li{
    margin: 0;
    padding: 2px 6px;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: .15px;
    border-radius: 999px;
    white-space: nowrap;
  }

  #replies .reply .date,
  #replies .reply .gallery{
    clear: both;
    margin-left: 0 !important;
  }
}

@media (max-width: 770px){
  #replies .reply > .content{
    display: block !important;
  }

  #replies .reply .text{
    margin: 0 !important;
    font-size: .97rem !important;
    line-height: 1.54 !important;
  }

  #replies .reply .reply-stamp{
    float: none;
    width: auto;
    margin: 0 0 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
  }

  #replies .reply .reply-stamp::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 1px;
    background: #f3f6f8;
  }

  #replies .reply .reply-stamp .avatar{
    float: none !important;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0 !important;
  }

  #replies .reply .reply-stamp .avatar a img,
  #replies .reply .reply-stamp .avatar img{
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }

  #replies .reply .reply-stamp .username{
    font-size: 9px;
    line-height: 1.05;
    margin: 0 0 3px 0;
  }

  #replies .reply .reply-stamp ul.info{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  #replies .reply .reply-stamp ul.info li{
    font-size: 7px;
    line-height: 1.05;
    padding: 2px 4px;
  }

  #replies .reply .date,
  #replies .reply .gallery{
    clear: both;
    margin-left: 0 !important;
  }
}

/* === AIO question-page polish pass 1: smoother opener -> replies transition === */

/* keep opener airy, but make the transition into replies feel intentional */
#question{
  margin-bottom: 14px;
}

.box.nmbreplies{
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dfe6eb;
  box-shadow: none;
}

.box.nmbreplies > h2{
  padding-left: 16px;
  font-size: 18px;
  line-height: 44px;
  letter-spacing: .2px;
}

/* cleaner pager */
.reply-pager{
  padding: 6px 0 10px !important;
  margin: 0 0 6px 0;
}

.reply-pager .paginationtt{
  font-size: 13px;
  line-height: 13px;
}

.reply-pager .paginationtt ul{
  margin: 0;
  padding: 0;
}

.reply-pager .paginationtt ul > li{
  margin: 0 3px;
  border-radius: 999px;
  border: 1px solid #dfe6eb;
  background: #fff;
}

.reply-pager .paginationtt ul > li > a,
.reply-pager .paginationtt ul > li > span{
  margin: 0;
  padding: 8px 11px;
  display: inline-block;
}

.reply-pager .paginationtt ul > .active{
  background: #3f4b55;
  border-color: #3f4b55;
}

.reply-pager .paginationtt ul > .active > a,
.reply-pager .paginationtt ul > .active > span{
  color: #fff;
}

/* first reply should sit a touch closer under the replies bar */
#replies{
  margin-top: 0;
}

#replies .reply.white:first-child{
  margin-top: 0;
}

/* soften all reply card chrome a bit */
#replies .reply.white{
  border-color: #e6edf2;
  box-shadow: none;
}

/* keep faint separators subtle */
#replies .reply .reply-stamp::before{
  background: #f3f6f8 !important;
}

@media (max-width: 770px){
  .box.nmbreplies{
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    border-radius: 7px;
  }

  .box.nmbreplies > h2{
    padding-left: 12px;
    font-size: 15px;
    line-height: 38px;
  }

  .reply-pager{
    padding: 4px 0 8px !important;
  }

  .reply-pager .paginationtt{
    font-size: 12px;
    line-height: 12px;
  }

  .reply-pager .paginationtt ul > li{
    margin: 0 2px;
  }

  .reply-pager .paginationtt ul > li > a,
  .reply-pager .paginationtt ul > li > span{
    padding: 7px 9px;
  }
}

/* === AIO: desktop-only reply layout to match question block === */
@media (min-width: 961px){

  #replies .reply{
    overflow: hidden;
  }

  #replies .reply .reply-stamp{
    float: left;
    width: 185px;
    margin: 0 28px 12px 0;
    padding-top: 0;
    min-height: 120px;
  }

  #replies .reply .reply-stamp::before{
    display: none !important;
    content: none !important;
    border: 0 !important;
  }

  #replies .reply .reply-stamp .avatar{
    float: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    display: block;
  }

  #replies .reply .reply-stamp-meta{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp .username{
    display: block !important;
    width: 100% !important;
    font: 700 18px/1.12 'Roboto Condensed', Arial, sans-serif !important;
    letter-spacing: .25px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    margin: 0 0 8px 0 !important;
  }

  #replies .reply .reply-stamp .stats{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #replies .reply .reply-stamp ul.info{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #replies .reply .reply-stamp ul.info li{
    margin: 0 !important;
  }

  #replies .reply .text{
    overflow: hidden;
    min-height: 120px;
    margin-top: 0 !important;
  }
}

/* === AIO: desktop-only remove faint separator above reply author block === */
@media (min-width: 961px){

  #replies .reply .reply-stamp,
  #replies .reply .reply-stamp-meta,
  #replies .reply .text{
    border-top: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  #replies .reply .reply-stamp::before,
  #replies .reply .reply-stamp::after,
  #replies .reply .text::before,
  #replies .reply .text::after{
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
  }
}

/* === AIO: desktop-only hard kill reply-stamp separator line === */
@media (min-width: 961px){
  body.ng #replies .reply .reply-stamp::before,
  #replies .reply .reply-stamp::before{
    display: none !important;
    content: none !important;
    height: 0 !important;
    top: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* === AIO: desktop-only remove top rule from reply content wrapper === */
@media (min-width: 961px){
  body.ng #replies .reply.white,
  body.ng #replies .reply .content,
  body.ng #replies .reply .user,
  #replies .reply.white,
  #replies .reply .content,
  #replies .reply .user{
    border-top: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  body.ng #replies .reply.white::before,
  body.ng #replies .reply.white::after,
  body.ng #replies .reply .content::before,
  body.ng #replies .reply .content::after,
  body.ng #replies .reply .user::before,
  body.ng #replies .reply .user::after,
  #replies .reply.white::before,
  #replies .reply.white::after,
  #replies .reply .content::before,
  #replies .reply .content::after,
  #replies .reply .user::before,
  #replies .reply .user::after{
    display: none !important;
    content: none !important;
    border-top: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
  }
}

/* === AIO: desktop-only make replies use same vertical left-rail format as question === */
@media (min-width: 961px){

  #replies .reply .content{
    margin: 24px 28px 24px 28px !important;
  }

  #replies .reply .reply-stamp{
    float: left !important;
    display: block !important;
    width: 185px !important;
    margin: 0 28px 12px 0 !important;
    min-height: 120px !important;
    position: static !important;
  }

  #replies .reply .reply-stamp .avatar{
    display: block !important;
    float: none !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 0 12px 0 !important;
  }

  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    border-radius: 14px !important;
  }

  #replies .reply .reply-stamp-meta{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp .username{
    display: block !important;
    width: 100% !important;
    font: 700 18px/1.12 'Roboto Condensed', Arial, sans-serif !important;
    letter-spacing: .25px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 0 10px 0 !important;
  }

  #replies .reply .reply-stamp .stats{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #replies .reply .reply-stamp ul.info{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #replies .reply .reply-stamp ul.info li{
    margin: 0 !important;
  }

  #replies .reply .text{
    overflow: hidden !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
}

/* === AIO: desktop-only make reply text wrap to the right of the left rail === */
@media (min-width: 961px){

  #replies .reply .text,
  body.ng #replies .reply .text{
    clear: none !important;
    float: none !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding-top: 0 !important;
    min-height: 120px !important;
  }

  #replies .reply .content::after,
  body.ng #replies .reply .content::after{
    content: "" !important;
    display: table !important;
    clear: both !important;
  }
}

/* === AIO: desktop-only tighten author left rail and give content more room === */
@media (min-width: 961px){

  /* original question */
  #question .user{
    width: 150px !important;
    margin-right: 22px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 76px !important;
    height: 76px !important;
  }

  #question .infowrap .username,
  #question .username{
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin: 0 0 8px 0 !important;
  }

  #question .stats ul.info li,
  #question ul.info li{
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* replies */
  #replies .reply .reply-stamp{
    width: 150px !important;
    margin: 0 22px 10px 0 !important;
    min-height: 100px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 76px !important;
    height: 76px !important;
  }

  #replies .reply .reply-stamp .username{
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin: 0 0 8px 0 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  #replies .reply .text,
  body.ng #replies .reply .text{
    min-height: 100px !important;
  }
}

/* === AIO: desktop-only widen main content lane and slim author rail further === */
@media (min-width: 961px){

  /* widen the central page lane */
  body.ng #left,
  #left{
    width: min(1240px, calc(100vw - 230px)) !important;
    max-width: 1240px !important;
  }

  body.ng .box.white.phdr,
  body.ng #question.box.white,
  body.ng #replies,
  .box.white.phdr,
  #question.box.white,
  #replies{
    max-width: 1240px !important;
  }

  /* original question rail */
  #question .user{
    width: 132px !important;
    margin-right: 18px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 68px !important;
    height: 68px !important;
    border-radius: 12px !important;
  }

  #question .infowrap .username,
  #question .username{
    font-size: 14px !important;
    line-height: 1.08 !important;
    margin: 0 0 7px 0 !important;
  }

  #question .stats ul.info li,
  #question ul.info li{
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  /* reply rail */
  #replies .reply .reply-stamp{
    width: 132px !important;
    margin: 0 18px 8px 0 !important;
    min-height: 92px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 68px !important;
    height: 68px !important;
    border-radius: 12px !important;
  }

  #replies .reply .reply-stamp .username{
    font-size: 14px !important;
    line-height: 1.08 !important;
    margin: 0 0 7px 0 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    padding: 3px 7px !important;
    font-size: 10px !important;
  }

  #replies .reply .text,
  body.ng #replies .reply .text{
    min-height: 92px !important;
  }
}

/* === AIO: desktop-only widen the real question-thread lane and rebalance rail === */
@media (min-width: 961px){

  /* widen the actual thread lane */
  body.ng main.ng-main #left{
    width: min(1380px, calc(100vw - 250px)) !important;
    max-width: min(1380px, calc(100vw - 250px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* let the inner thread boxes use the full lane */
  body.ng main.ng-main #left .box.white,
  body.ng main.ng-main #left #replies,
  body.ng main.ng-main #left #question,
  body.ng main.ng-main #left .phdr{
    max-width: none !important;
    width: 100% !important;
  }

  /* slightly relax the rail so it doesn't feel cramped */
  #question .user{
    width: 142px !important;
    margin-right: 20px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 72px !important;
    height: 72px !important;
  }

  #question .infowrap .username,
  #question .username{
    font-size: 15px !important;
    line-height: 1.08 !important;
  }

  #question .stats ul.info li,
  #question ul.info li{
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  #replies .reply .reply-stamp{
    width: 142px !important;
    margin: 0 20px 8px 0 !important;
    min-height: 96px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 72px !important;
    height: 72px !important;
  }

  #replies .reply .reply-stamp .username{
    font-size: 15px !important;
    line-height: 1.08 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

/* === AIO: desktop-only override legacy 980/1120 caps and widen question thread lane === */
@media (min-width: 1024px){

  /* real thread lane */
  body.ng main.ng-main #left{
    width: calc(100vw - 320px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* keep right column from introducing its own narrow centering rules */
  body.ng main.ng-main #right{
    width: calc(100vw - 320px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* let thread boxes actually use the widened lane */
  body.ng main.ng-main #left .box.white,
  body.ng main.ng-main #left #question,
  body.ng main.ng-main #left #replies,
  body.ng main.ng-main #left .phdr{
    width: 100% !important;
    max-width: none !important;
  }

  /* soften the rail just a touch so spacing feels balanced again */
  #question .user{
    width: 138px !important;
    margin-right: 20px !important;
  }

  #replies .reply .reply-stamp{
    width: 138px !important;
    margin: 0 20px 8px 0 !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img,
  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 70px !important;
    height: 70px !important;
  }

  #question .username,
  #question .infowrap .username,
  #replies .reply .reply-stamp .username{
    font-size: 15px !important;
    line-height: 1.08 !important;
  }

  #question ul.info li,
  #question .stats ul.info li,
  #replies .reply .reply-stamp ul.info li{
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

/* === AIO: desktop-only final polish for avatar/name/chips left rail === */
@media (min-width: 1024px){

  /* original question */
  #question .user{
    width: 126px !important;
    margin-right: 18px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 62px !important;
    height: 62px !important;
    border-radius: 10px !important;
  }

  #question .infowrap,
  #question .stats{
    margin: 0 !important;
    padding: 0 !important;
  }

  #question .username,
  #question .infowrap .username{
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: .15px !important;
    margin: 0 0 6px 0 !important;
  }

  #question ul.info,
  #question .stats ul.info{
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #question ul.info li,
  #question .stats ul.info li{
    padding: 2px 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
  }

  /* replies */
  #replies .reply .reply-stamp{
    width: 126px !important;
    margin: 0 18px 8px 0 !important;
    min-height: 86px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 62px !important;
    height: 62px !important;
    border-radius: 10px !important;
  }

  #replies .reply .reply-stamp-meta,
  #replies .reply .reply-stamp .stats{
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp .username{
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: .15px !important;
    margin: 0 0 6px 0 !important;
  }

  #replies .reply .reply-stamp ul.info{
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    padding: 2px 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
  }
}

/* === AIO: desktop-only add breathing room inside left identity rail === */
@media (min-width: 1024px){

  /* question rail */
  #question .user{
    padding-top: 4px !important;
  }

  #question .avatar{
    margin: 0 0 14px 0 !important;
  }

  #question .username,
  #question .infowrap .username{
    margin: 0 0 10px 0 !important;
  }

  #question ul.info,
  #question .stats ul.info{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #question ul.info li,
  #question .stats ul.info li{
    margin: 0 !important;
  }

  /* reply rails */
  #replies .reply .reply-stamp{
    padding-top: 4px !important;
  }

  #replies .reply .reply-stamp .avatar{
    display: block !important;
    margin: 0 0 14px 0 !important;
  }

  #replies .reply .reply-stamp .username{
    margin: 0 0 10px 0 !important;
  }

  #replies .reply .reply-stamp ul.info{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    margin: 0 !important;
  }
}

/* === AIO: desktop-only rebalance lane width and add air to identity rails === */
@media (min-width: 1024px){

  /* give back some side room for skyscraper ads */
  body.ng main.ng-main #left{
    width: calc(100vw - 410px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.ng main.ng-main #right{
    width: calc(100vw - 410px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* question rail */
  #question .user{
    width: 134px !important;
    margin-right: 22px !important;
    padding-top: 8px !important;
  }

  #question .avatar{
    margin: 0 0 16px 0 !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
  }

  #question .username,
  #question .infowrap .username{
    font-size: 13px !important;
    line-height: 1.08 !important;
    margin: 0 0 12px 0 !important;
  }

  #question ul.info,
  #question .stats ul.info{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #question ul.info li,
  #question .stats ul.info li{
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* reply rails */
  #replies .reply .reply-stamp{
    width: 134px !important;
    margin: 0 22px 8px 0 !important;
    min-height: 96px !important;
    padding-top: 8px !important;
  }

  #replies .reply .reply-stamp .avatar{
    display: block !important;
    margin: 0 0 16px 0 !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
  }

  #replies .reply .reply-stamp .username{
    font-size: 13px !important;
    line-height: 1.08 !important;
    margin: 0 0 12px 0 !important;
  }

  #replies .reply .reply-stamp ul.info{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #replies .reply .reply-stamp ul.info li{
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
}

/* === AIO: desktop-only fix avatar/name overlap in left rails === */
@media (min-width: 1024px){

  /* keep question rail tidy */
  #question .user{
    width: 136px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 58px !important;
    height: 58px !important;
  }

  #question .avatar{
    margin: 0 0 14px 0 !important;
  }

  #question .username,
  #question .infowrap .username{
    display: block !important;
    clear: both !important;
    margin: 0 0 10px 0 !important;
  }

  /* reply rails */
  #replies .reply .reply-stamp{
    width: 136px !important;
    min-height: 96px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 58px !important;
    height: 58px !important;
  }

  #replies .reply .reply-stamp .avatar{
    float: none !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
  }

  #replies .reply .reply-stamp .username{
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #replies .reply .reply-stamp-meta{
    display: block !important;
    clear: both !important;
    width: 100% !important;
  }
}

/* === AIO: desktop-only reduce avatar footprint and separate username cleanly === */
@media (min-width: 1024px){

  #question .user{
    width: 132px !important;
  }

  #question .avatar,
  #question .avatar img,
  #question .avatar a img{
    width: 54px !important;
    height: 54px !important;
  }

  #question .avatar{
    margin: 0 0 16px 0 !important;
  }

  #question .username,
  #question .infowrap .username{
    margin: 0 0 12px 0 !important;
  }

  #replies .reply .reply-stamp{
    width: 132px !important;
    min-height: 92px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 54px !important;
    height: 54px !important;
  }

  #replies .reply .reply-stamp .avatar{
    margin: 0 0 16px 0 !important;
  }

  #replies .reply .reply-stamp .username{
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.12 !important;
  }

  #replies .reply .reply-stamp-meta{
    width: 100% !important;
  }
}

/* === AIO: desktop-only make reply avatar smaller and separate name more === */
@media (min-width: 1024px){

  #replies .reply .reply-stamp{
    width: 134px !important;
    padding-top: 6px !important;
  }

  #replies .reply .reply-stamp .avatar,
  #replies .reply .reply-stamp .avatar a,
  #replies .reply .reply-stamp .avatar img{
    width: 46px !important;
    height: 46px !important;
  }

  #replies .reply .reply-stamp .avatar{
    margin: 0 0 18px 0 !important;
  }

  #replies .reply .reply-stamp .username{
    margin: 0 0 14px 0 !important;
    line-height: 1.14 !important;
  }
}

/* === AIO: desktop-only hard box fix for crowded reply avatar/badge === */
@media (min-width: 1024px){

  #replies .reply .reply-stamp{
    width: 132px !important;
  }

  #replies .reply .reply-stamp .avatar{
    float: none !important;
    display: block !important;
    flex: none !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 0 20px 0 !important;
    overflow: hidden !important;
  }

  #replies .reply .reply-stamp .avatar a{
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  #replies .reply .reply-stamp .avatar img{
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  #replies .reply .reply-stamp .username{
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding-top: 2px !important;
  }

  #replies .reply .reply-stamp-meta{
    display: block !important;
    clear: both !important;
    width: 100% !important;
  }
}

/* === AIO RESTORE: /questions manufacturer grid === */
.qs-makes { padding: 18px 0; }
.qs-makes__inner { max-width: 1100px; margin: 0 auto; padding: 0 14px; }
.qs-makes__head { margin-bottom: 12px; }
.qs-makes__title { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
.qs-makes__sub { margin: 0; opacity: .85; }

.qs-makes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}

.qs-makes__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  overflow: hidden;
}

.qs-makes__logo {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 72px;
  max-height: 72px;
  object-fit: contain;
  margin: 0 auto 10px;
}

.qs-makes__name {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  color: #1d2733;
  font-weight: 600;
}

.qs-makes__footer { margin-top: 14px; text-align: center; }
.qs-makes__ask {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: #0b67b2;
  color: #fff;
}
.qs-makes__allmakes { margin-top: 12px; }
.qs-makes__label { display: block; font-size: 13px; margin: 0 0 6px; }
.qs-makes__select { width: 100%; max-width: 320px; padding: 8px; }
.qs-makes__az { margin-top: 10px; }
.qs-makes__azlist { margin-top: 8px; line-height: 1.9; }
.qs-makes__azlist a { display: inline-block; margin-right: 10px; }

@media (min-width: 700px) {
  .qs-makes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qs-makes__logo { max-width: 140px; height: 68px; max-height: 68px; }
}

@media (min-width: 1024px) {
  .qs-makes__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .qs-makes__card {
    min-height: 132px;
    padding: 14px 10px;
  }
  .qs-makes__logo {
    max-width: 120px;
    height: 56px;
    max-height: 56px;
  }
}
/* === /AIO RESTORE: /questions manufacturer grid === */

/* === AIO TUNEUP: /questions landing breadcrumbs/footer spacing === */
.breadcrumbs + .qs-makes{
  padding-top: 8px;
}
.breadcrumbs .breadcrumbs__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}
.breadcrumbs{
  margin-bottom: 0;
}
.qs-makes__head{
  text-align: center;
}
@media (max-width: 699px){
  .breadcrumbs .breadcrumbs__inner{
    padding: 0 12px;
  }
  .breadcrumbs + .qs-makes{
    padding-top: 4px;
  }
}
/* === /AIO TUNEUP: /questions landing breadcrumbs/footer spacing === */

/* === AIO TUNEUP: /questions breadcrumb top breathing room === */
body .breadcrumbs{
  margin-top: 10px;
}
@media (max-width: 699px){
  body .breadcrumbs{
    margin-top: 12px;
  }
}
/* === /AIO TUNEUP: /questions breadcrumb top breathing room === */

/* === AIO RESTORE: /makes/<make> model chooser === */
.qs-models { padding: 18px 0 26px; }
.qs-models__inner { max-width: 1100px; margin: 0 auto; padding: 0 14px; }
.qs-models__head { margin-bottom: 14px; text-align: center; }
.qs-models__title { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.qs-models__sub { margin: 0; opacity: .85; }

.qs-models__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.qs-models__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  text-align: center;
}

.qs-models__name {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  color: #1d2733;
  font-weight: 700;
}

.qs-models__footer {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.qs-models__back,
.qs-models__ask {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

.qs-models__back {
  background: #eef3f8;
  color: #17324d;
}

.qs-models__ask {
  background: #0b67b2;
  color: #fff;
}

@media (min-width: 700px) {
  .qs-models__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .qs-models__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* === /AIO RESTORE: /makes/<make> model chooser === */

/* === AIO RESTORE: /makes/<make> model chooser v2 === */
.qs-models { padding: 18px 0 26px; }
.qs-models__inner { max-width: 1100px; margin: 0 auto; padding: 0 14px; }
.qs-models__head { margin-bottom: 14px; text-align: center; }
.qs-models__title { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.qs-models__sub { margin: 0; opacity: .85; }

.qs-models__brand { text-align: center; margin: 10px 0 18px; }
.qs-models__brand-logo {
  display: inline-block;
  width: 100%;
  max-width: 120px;
  height: 60px;
  object-fit: contain;
}

.qs-models__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.qs-models__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  text-align: center;
}

.qs-models__name {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  color: #1d2733;
  font-weight: 700;
}

.qs-models__footer {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.qs-models__back,
.qs-models__ask {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

.qs-models__back {
  background: #eef3f8;
  color: #17324d;
}

.qs-models__ask {
  background: #0b67b2;
  color: #fff;
}

@media (min-width: 700px) {
  .qs-models__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .qs-models__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* === /AIO RESTORE: /makes/<make> model chooser v2 === */

/* AIO: category landing search polish */
body.ng main.ng-main #left.ng-category-landing-page #catSearch{
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(16,24,40,.06) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  margin: 0 0 14px 0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page #catSearch:focus{
  outline: none !important;
  border-color: #8fb3d9 !important;
  box-shadow: 0 0 0 4px rgba(35,102,170,.10), 0 10px 28px rgba(16,24,40,.08) !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbox{
  border: 1px solid #dbe4ee !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%) !important;
  box-shadow: 0 10px 28px rgba(16,24,40,.06) !important;
  padding: 18px 18px !important;
  margin: 18px 0 22px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbox-title{
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: #16324f !important;
  margin-bottom: 8px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbox-copy{
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #4d5f73 !important;
  margin-bottom: 14px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbox-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.ng main.ng-main #left.ng-category-landing-page .ng-q-helpbtn.alt{
  background: #fff !important;
  border: 1px solid #d4deea !important;
}

/* AIO: category landing cleanup + stronger CTA + actionable search */
body.ng main.ng-main #left.ng-category-landing-page .aio-cat-topbar{
  display:none !important;
}

body.ng main.ng-main #left.ng-category-landing-page .aio-cat-search-wrap{
  max-width: 760px !important;
}

body.ng main.ng-main #left.ng-category-landing-page .aio-cat-search-row{
  display:flex !important;
  align-items:stretch !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

body.ng main.ng-main #left.ng-category-landing-page #catSearch{
  flex:1 1 420px !important;
  max-width:none !important;
  margin:0 !important;
}

body.ng main.ng-main #left.ng-category-landing-page #catSearchBtn.aio-cat-search-btn{
  min-height:52px !important;
  padding:0 18px !important;
  border:1px solid #136fb8 !important;
  border-radius:14px !important;
  background:#1780d0 !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 8px 24px rgba(16,24,40,.08) !important;
}

body.ng main.ng-main #left.ng-category-landing-page #catSearchBtn.aio-cat-search-btn:hover{
  transform:translateY(-1px) !important;
}

body.ng main.ng-main #left.ng-category-landing-page a.askqa.aio-askqa{
  display:block !important;
  margin:18px 0 10px !important;
  text-decoration:none !important;
}

body.ng main.ng-main #left.ng-category-landing-page .askq2.aio-askq2{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding:0 18px !important;
  border-radius:14px !important;
  font-size:17px !important;
  font-weight:800 !important;
  box-shadow:0 10px 28px rgba(16,24,40,.10) !important;
}

@media (max-width: 700px){
  body.ng main.ng-main #left.ng-category-landing-page .aio-cat-search-row{
    flex-direction:column !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page #catSearchBtn.aio-cat-search-btn{
    width:100% !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page .askq2.aio-askq2{
    width:100% !important;
  }
}

/* ===== AIO: LIVE TOPICS PAGE POLISH (2026-04-09) ===== */
body.ng main.ng-main #left{
  width: 100% !important;
  max-width: 1180px !important;
}

body.ng main.ng-main #left .aio-topics-shell{
  border: 1px solid #e4e9ee !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
}

body.ng main.ng-main #left .aio-topics-index{
  margin: 0 !important;
  padding: 28px 34px !important;
}

body.ng main.ng-main #left .aio-topics-head{
  padding-bottom: 14px !important;
}

body.ng main.ng-main #left .aio-topics-list{
  padding-top: 6px !important;
}

body.ng main.ng-main #left .aio-topics-index h1,
body.ng main.ng-main #left .aio-topics-index h2{
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.ng main.ng-main #left .aio-topics-index h1{
  font-size: 34px !important;
  line-height: 1.1 !important;
  margin: 0 0 10px !important;
}

body.ng main.ng-main #left .aio-topics-index h2,
body.ng main.ng-main #left .aio-topics-index h3,
body.ng main.ng-main #left .aio-topics-index b{
  color: #0f172a !important;
}

body.ng main.ng-main #left .aio-topics-shell .content.index > b,
body.ng main.ng-main #left .aio-topics-shell .content.index > h2,
body.ng main.ng-main #left .aio-topics-shell .content.index > h3{
  display: block !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 24px 0 12px !important;
}

body.ng main.ng-main #left .aio-topics-shell .content.index a{
  color: #0b7fc1 !important;
  border-bottom: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

body.ng main.ng-main #left .aio-topics-shell .content.index a:hover{
  color: #075985 !important;
}

body.ng main.ng-main #left .aio-topics-shell .content.index{
  font-size: 18px !important;
  line-height: 1.75 !important;
}

body.ng main.ng-main #left .aio-topics-back{
  margin-top: 22px !important;
}

body.ng main.ng-main #left .aio-topics-back a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border: 1px solid #d8e1e8 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0b7fc1 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

body.ng main.ng-main #left .aio-topics-back a:hover{
  background: #f8fbfd !important;
}

@media (min-width: 1100px){
  body.ng main.ng-main #left .aio-topics-shell .content.index{
    column-gap: 56px;
  }
}

@media (max-width: 700px){
  body.ng main.ng-main #left .aio-topics-index{
    padding: 20px 18px !important;
  }

  body.ng main.ng-main #left .aio-topics-index h1{
    font-size: 26px !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .content.index{
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}
/* ===== /AIO: LIVE TOPICS PAGE POLISH ===== */

/* ===== AIO: LIVE TOPICS RESPONSIVE COLUMN TUNING (2026-04-09) ===== */
@media (min-width: 980px){
  body.ng main.ng-main #left .aio-topics-list{
    column-count: 2;
    column-gap: 72px;
  }

  body.ng main.ng-main #left .aio-topics-list > b,
  body.ng main.ng-main #left .aio-topics-list > h2,
  body.ng main.ng-main #left .aio-topics-list > h3{
    break-after: avoid;
  }

  body.ng main.ng-main #left .aio-topics-list a{
    break-inside: avoid;
  }
}

@media (max-width: 979px){
  body.ng main.ng-main #left .aio-topics-list{
    column-count: 1;
  }
}

@media (max-width: 700px){
  body.ng main.ng-main #left .aio-topics-shell{
    border-radius: 14px !important;
  }

  body.ng main.ng-main #left .aio-topics-index{
    padding: 18px 16px !important;
  }

  body.ng main.ng-main #left .aio-topics-list{
    column-count: 1 !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .content.index > b,
  body.ng main.ng-main #left .aio-topics-shell .content.index > h2,
  body.ng main.ng-main #left .aio-topics-shell .content.index > h3{
    font-size: 17px !important;
    margin: 20px 0 10px !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .content.index{
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  body.ng main.ng-main #left .aio-topics-back a{
    padding: 9px 14px !important;
  }
}
/* ===== /AIO: LIVE TOPICS RESPONSIVE COLUMN TUNING ===== */

/* ===== AIO: LIVE TOPICS REAL GRID (2026-04-09) ===== */
body.ng main.ng-main #left .aio-topics-shell .topictext2{
  display: block !important;
  margin: 26px 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
}

body.ng main.ng-main #left .aio-topics-shell .topictext2 h2{
  display: block !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.ng main.ng-main #left .aio-topics-shell .subcat{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px 48px;
  padding-top: 2px !important;
  line-height: 1.45 !important;
}

body.ng main.ng-main #left .aio-topics-shell .subcat h2.new{
  display: contents !important;
}

body.ng main.ng-main #left .aio-topics-shell .subcat .listing{
  display: block !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  break-inside: avoid;
}

body.ng main.ng-main #left .aio-topics-shell .subcat .listing a{
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.ng main.ng-main #left .aio-topics-shell .subcat .listing .numpost{
  font-size: 14px !important;
  top: 0 !important;
  padding-left: 4px !important;
}

@media (min-width: 980px){
  body.ng main.ng-main #left .aio-topics-shell .subcat{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}

@media (max-width: 979px){
  body.ng main.ng-main #left .aio-topics-shell .subcat{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  body.ng main.ng-main #left .aio-topics-shell .topictext2{
    margin: 22px 0 12px !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .topictext2 h2{
    font-size: 22px !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .subcat{
    gap: 8px 0;
  }

  body.ng main.ng-main #left .aio-topics-shell .subcat .listing a{
    font-size: 15px !important;
    line-height: 1.32 !important;
  }

  body.ng main.ng-main #left .aio-topics-shell .subcat .listing .numpost{
    font-size: 13px !important;
  }
}
/* ===== /AIO: LIVE TOPICS REAL GRID ===== */

/* AIO: topic question card meta reorder + polish */
.preview .preview-vehicle-meta,
.preview .preview-stats-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.preview .preview-vehicle-meta {
  margin: 8px 0 10px 0;
}

.preview .preview-stats-meta {
  margin: 12px 0 10px 0;
}

.preview .preview-vehicle-meta .badgebg.blue {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: .3px;
}

.preview .preview-stats-meta .badgebg {
  font-size: 11px;
  line-height: 11px;
  letter-spacing: .4px;
}

.preview .askedby {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7785;
}

.preview .askedby b,
.preview .askedby a {
  color: #304253;
  font-weight: 700;
}

.preview .hypen {
  margin-top: 2px;
}

/* AIO: topic/model question list visual polish */
body.ng main.ng-main #left .preview.p-user{
  padding: 0 0 22px 0;
  margin: 0 0 22px 0;
  border-bottom: 1px solid rgba(26, 84, 128, 0.10);
}

body.ng main.ng-main #left .preview.p-user:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.ng main.ng-main #left .preview.p-user h2{
  margin: 0 0 10px 0 !important;
  line-height: 1.18 !important;
}

body.ng main.ng-main #left .preview.p-user h2 a{
  display: inline-block;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta a{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  text-decoration: none !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .45px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.08);
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue.cl{
  padding-left: 12px;
  padding-right: 12px;
}

body.ng main.ng-main #left .preview.p-user .preview-stats-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px 0;
}

body.ng main.ng-main #left .preview.p-user .preview-stats-meta .badgebg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef4f8;
  color: #355066;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .35px;
  font-weight: 700;
  border: 1px solid rgba(53, 80, 102, 0.10);
}

body.ng main.ng-main #left .preview.p-user .askedby{
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: #7a8794;
}

body.ng main.ng-main #left .preview.p-user .askedby b,
body.ng main.ng-main #left .preview.p-user .askedby a{
  color: inherit !important;
  font-weight: 700;
  text-decoration: none !important;
}

body.ng main.ng-main #left .preview.p-user .hypen{
  margin-top: 0;
}

@media (max-width: 640px){
  body.ng main.ng-main #left .preview.p-user{
    padding: 0 0 18px 0;
    margin: 0 0 18px 0;
  }

  body.ng main.ng-main #left .preview.p-user h2{
    margin-bottom: 9px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue{
    min-height: 26px;
    padding: 0 9px;
    font-size: 11px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-stats-meta .badgebg{
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px !important;
  }
}

/* AIO: visually merge year + make/model into one vehicle chip */
body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta{
  gap: 0 !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta a{
  display: inline-flex;
  align-items: stretch;
  gap: 0 !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue{
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.08);
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:first-child{
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-right: 8px !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:last-child{
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-left: 8px !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue + .badgebg.blue{
  margin-left: -1px !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue.cl{
  padding-left: 10px !important;
}

@media (max-width: 640px){
  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:first-child{
    padding-right: 7px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:last-child{
    padding-left: 7px !important;
  }
}

/* AIO: tighten seam so vehicle chip reads as one unit */
body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta{
  font-size: 0 !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta a{
  font-size: 0 !important;
  white-space: nowrap;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue{
  font-size: 12px !important;
  vertical-align: top;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue + .badgebg.blue{
  margin-left: -2px !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:first-child{
  padding-right: 7px !important;
}

body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:last-child{
  padding-left: 7px !important;
}

@media (max-width: 640px){
  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue{
    font-size: 11px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue + .badgebg.blue{
    margin-left: -2px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:first-child{
    padding-right: 6px !important;
  }

  body.ng main.ng-main #left .preview.p-user .preview-vehicle-meta .badgebg.blue:last-child{
    padding-left: 6px !important;
  }
}

/* AIO: desktop-only question/reply admin bar neutralizer */
@media (min-width: 1024px) {
  body.ng #question > .content > ul.admin,
  body.ng #replies .reply > .content > ul.admin {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 30 !important;
  }

  body.ng #question > .content > ul.admin + .user,
  body.ng #replies .reply > .content > ul.admin + .reply-stamp {
    clear: both !important;
  }

  body.ng #question > .content > ul.admin + .user + .text,
  body.ng #replies .reply > .content > ul.admin + .reply-stamp + .text {
    clear: both !important;
  }

  body.ng #question > .content > ul.admin li.manage,
  body.ng #question > .content > ul.admin li.read,
  body.ng #replies .reply > .content > ul.admin li.manage,
  body.ng #replies .reply > .content > ul.admin li.read {
    position: relative !important;
    z-index: 31 !important;
    pointer-events: auto !important;
  }
}

/* AIO: logged-in desktop question layout fix v2 */
@media (min-width: 961px) {
  body.ng #question > .content {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 30px !important;
    row-gap: 18px !important;
    align-items: start !important;
  }

  body.ng #question > .content > ul.admin,
  body.ng #question > .content > .admin {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    float: none !important;
    clear: none !important;
  }

  body.ng #question > .content > .user {
    grid-column: 1 !important;
    width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: block !important;
  }

  body.ng #question > .content > .text {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: block !important;
  }

  body.ng #question .avatar,
  body.ng #question .infowrap {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.ng #question .avatar {
    text-align: center !important;
    padding: 0 0 14px 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img {
    width: 90px !important;
    height: 90px !important;
    display: inline-block !important;
    object-fit: cover !important;
  }

  body.ng #question .infowrap .username {
    display: block !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
  }

  body.ng #question ul.info {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  body.ng #question ul.info li {
    margin: 0 !important;
  }

  body.ng #question .qbody,
  body.ng #question .text,
  body.ng #question .text div,
  body.ng #question .text p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  body.ng #question .text > .qbody {
    display: block !important;
  }
}

@media (max-width: 960px) {
  body.ng #question > .content {
    display: block !important;
  }

  body.ng #question > .content > .user,
  body.ng #question > .content > .text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
  }
}

/* AIO: logged-in desktop question layout polish final */
@media (min-width: 961px) {
  body.ng #question {
    margin-top: 6px !important;
  }

  body.ng #question > .content {
    row-gap: 12px !important;
    column-gap: 34px !important;
  }

  body.ng #question > .content > ul.admin,
  body.ng #question > .content > .admin {
    margin: 0 0 2px 0 !important;
  }

  body.ng #question > .content > .user {
    padding-top: 2px !important;
  }

  body.ng #question .avatar {
    padding-bottom: 10px !important;
  }

  body.ng #question .infowrap .username {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng #question ul.info {
    gap: 6px !important;
  }

  body.ng #question .text {
    padding-top: 2px !important;
  }

  body.ng #question .qbody {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }

  body.ng #question .date {
    margin-top: 14px !important;
  }
}

/* AIO: question layout micro polish */
@media (min-width: 961px) {
  body.ng #question > .content {
    row-gap: 8px !important;
    column-gap: 28px !important;
  }

  body.ng #question > .content > ul.admin,
  body.ng #question > .content > .admin {
    margin: 0 0 -2px 0 !important;
  }

  body.ng #question > .content > .user {
    width: 200px !important;
    max-width: 200px !important;
    padding-top: 0 !important;
  }

  body.ng #question > .content {
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }

  body.ng #question .avatar {
    padding-bottom: 6px !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img {
    width: 84px !important;
    height: 84px !important;
  }

  body.ng #question .infowrap .username {
    font-size: 15px !important;
    margin: 0 0 6px 0 !important;
  }

  body.ng #question ul.info {
    gap: 5px !important;
  }

  body.ng #question .text {
    padding-top: 0 !important;
  }

  body.ng #question .qbody {
    margin-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 960px) {
  body.ng #question > .content {
    display: block !important;
  }

  body.ng #question > .content > .user,
  body.ng #question > .content > .text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
  }
}

/* AIO: consolidated final question desktop layout */
@media (min-width: 961px) {
  body.ng #question {
    margin-top: 0 !important;
  }

  body.ng #question > .content {
    display: grid !important;
    grid-template-columns: 205px minmax(0, 1fr) !important;
    column-gap: 26px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  body.ng #question > .content > ul.admin,
  body.ng #question > .content > .admin {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 0 -10px 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
  }

  body.ng #question > .content > .user {
    grid-column: 1 !important;
    width: 205px !important;
    max-width: 205px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    align-self: start !important;
  }

  body.ng #question > .content > .text {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    align-self: start !important;
  }

  body.ng #question .avatar,
  body.ng #question .infowrap {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.ng #question .avatar {
    text-align: center !important;
    padding: 0 0 8px 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img {
    width: 80px !important;
    height: 80px !important;
    display: inline-block !important;
    object-fit: cover !important;
  }

  body.ng #question .infowrap .username {
    display: block !important;
    position: static !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
  }

  body.ng #question ul.info {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body.ng #question ul.info li {
    margin: 0 !important;
  }

  body.ng #question .qbody,
  body.ng #question .text,
  body.ng #question .text div,
  body.ng #question .text p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  body.ng #question .qbody {
    margin-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.84 !important;
  }
}

@media (max-width: 960px) {
  body.ng #question > .content {
    display: block !important;
  }

  body.ng #question > .content > .user,
  body.ng #question > .content > .text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
  }
}

/* AIO: question logged-in last nudge */

/* AIO: desktop menu click fix */

/* AIO: desktop sidebar click priority fix */
@media (min-width: 961px) {
  body.ng .ng-drawer,
  body.ng .ng-drawer__panel,
  body.ng .ng-drawer__content,
  body.ng .sidebar-desktop,
  body.ng .desktop-sidebar,
  body.ng [class*="sidebar"],
  body.ng aside {
    position: relative !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
  }

  body.ng .ng-drawer *,
  body.ng .ng-drawer__panel *,
  body.ng .ng-drawer__content *,
  body.ng .sidebar-desktop *,
  body.ng .desktop-sidebar *,
  body.ng [class*="sidebar"] *,
  body.ng aside * {
    pointer-events: auto !important;
  }

  body.ng main.ng-main,
  body.ng .ng-main,
  body.ng #question,
  body.ng #replies,
  body.ng #question > .content,
  body.ng #replies .reply,
  body.ng #replies .reply > .content {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* === AIO: prevent header/logo horizontal jump between short/tall pages === */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
/* === /AIO: prevent header/logo horizontal jump between short/tall pages === */

/* AIO: Shared section-page polish v1 (2026-04-11) */
.content.section > p:first-of-type{
  margin: 2px 0 18px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #38424b;
}

.ng-section-guides{
  margin-top: 2px;
}

.ng-section-guides .ng-guide-h2{
  margin: 24px 0 10px 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111820;
}

.ng-section-guides ul.ng-guide-list{
  list-style: none;
  margin: 0 0 8px 0;
  padding-left: 0;
}

.ng-section-guides li.ng-guide-item{
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.ng-section-guides li.ng-guide-item + li.ng-guide-item{
  margin-top: 8px;
}

.ng-section-guides a.ng-guide-title{
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #006fcf;
  text-decoration: none;
  border-bottom: 0 !important;
}

.ng-section-guides a.ng-guide-title:hover{
  color: #0059a6;
  border-bottom: 0 !important;
}

.ng-section-guides .ng-guide-excerpt{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #4c5966;
  opacity: 1;
}

@media (max-width: 768px){
  .ng-section-guides .ng-guide-h2{
    font-size: 18px;
  }

  .ng-section-guides li.ng-guide-item{
    padding: 12px 13px;
    border-radius: 10px;
  }

  .ng-section-guides a.ng-guide-title{
    font-size: 14px;
  }

  .ng-section-guides .ng-guide-excerpt{
    font-size: 13px;
  }
}

/* AIO: topic/question list cards should never split across columns */
#qlist .preview,
#qlist .preview > a,
#qlist .preview.p-user {
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* AIO: active topic pagination bubble should keep strong contrast */
.paginationtt ul li.active a,
.paginationtt ul li.active span,
.paginationtt ul li.selected a,
.paginationtt ul li.selected span,
.paginationtt ul li.current a,
.paginationtt ul li.current span,
.paginationtt ul li.on a,
.paginationtt ul li.on span {
  color: #fff !important;
}


/* ===== AIO: TOPIC PAGE REAL POLISH (2026-04-12) ===== */
body.ng #left.aio-topics-page{
  float: none !important;
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  margin: 14px auto 24px !important;
  padding: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-inner{
  padding: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-shell{
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
}

body.ng #left.aio-topics-page .aio-topics-shell + .aio-topics-shell{
  margin-top: 16px !important;
}

body.ng #left.aio-topics-page .aio-topics-head{
  padding: 24px 28px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

body.ng #left.aio-topics-page .aio-topics-head .underline-user{
  margin: 0 0 14px 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-head h1{
  margin: 0 !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

body.ng #left.aio-topics-page #filters{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 12px 0 !important;
}

body.ng #left.aio-topics-page #filters .filter-label{
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

body.ng #left.aio-topics-page #filter-options,
body.ng #left.aio-topics-page #selcar select,
body.ng #left.aio-topics-page #selcar input[type="button"]{
  height: 38px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 0 12px !important;
  box-shadow: none !important;
}

body.ng #left.aio-topics-page #change{
  margin: 0 !important;
  font-size: 14px !important;
}

body.ng #left.aio-topics-page #change a{
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.ng #left.aio-topics-page #selcar{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list{
  padding: 18px 28px 22px !important;
}

body.ng #left.aio-topics-page #qlist{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 26px !important;
}

body.ng #left.aio-topics-page #qlist > .preview,
body.ng #left.aio-topics-page #qlist > a.preview,
body.ng #left.aio-topics-page #qlist .preview.p-user{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 18px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

body.ng #left.aio-topics-page #qlist .preview h3,
body.ng #left.aio-topics-page #qlist .preview .title,
body.ng #left.aio-topics-page #qlist .preview b a:first-child,
body.ng #left.aio-topics-page #qlist .preview > a{
  font-size: 18px !important;
  line-height: 1.3 !important;
}

body.ng #left.aio-topics-page #qlist .preview .vehicle,
body.ng #left.aio-topics-page #qlist .preview strong{
  display: inline-block !important;
  margin-top: 8px !important;
}

body.ng #left.aio-topics-page .paginationtt{
  grid-column: 1 / -1 !important;
  margin: 6px 0 0 0 !important;
  padding-top: 8px !important;
}

body.ng #left.aio-topics-page .aio-topics-back{
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-back a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page{
    width: calc(100% - 16px) !important;
    margin: 10px auto 18px !important;
  }

  body.ng #left.aio-topics-page .aio-topics-head{
    padding: 22px 16px 16px !important;
  }

  body.ng #left.aio-topics-page .aio-topics-head h1{
    font-size: 26px !important;
  }

  body.ng #left.aio-topics-page .aio-topics-list{
    padding: 14px 16px 18px !important;
  }

  body.ng #left.aio-topics-page #qlist{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.ng #left.aio-topics-page #filter-options,
  body.ng #left.aio-topics-page #selcar select,
  body.ng #left.aio-topics-page #selcar input[type="button"]{
    width: 100% !important;
  }

  body.ng #left.aio-topics-page #selcar{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}
/* ===== /AIO: TOPIC PAGE REAL POLISH ===== */

/* ===== AIO: TOPIC PAGE HARD 2-COLUMN FORCE (2026-04-12) ===== */
body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 26px !important;

  columns: auto !important;
  column-count: auto !important;
  column-gap: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > a.preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview.p-user{
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list #qlist{
    grid-template-columns: 1fr !important;
  }
}
/* ===== /AIO: TOPIC PAGE HARD 2-COLUMN FORCE ===== */

/* ===== AIO: TOPIC PREVIEW INNER HARD RESET (2026-04-12) ===== */
body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px 30px !important;
  columns: initial !important;
  column-count: initial !important;
  column-gap: initial !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > *{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview > a,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .text,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .left,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .right,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .user,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .desc,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview .content{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview br{
  display: none !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview{
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list #qlist{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
/* ===== /AIO: TOPIC PREVIEW INNER HARD RESET ===== */

/* ===== AIO: TOPIC PAGE TRUE FLEX 2-COLUMN (2026-04-12) ===== */
body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 22px 30px !important;

  columns: unset !important;
  column-count: unset !important;
  column-gap: 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview.p-user,
body.ng #left.aio-topics-page .aio-topics-list #qlist > a.preview{
  flex: 0 0 calc(50% - 15px) !important;
  width: calc(50% - 15px) !important;
  max-width: calc(50% - 15px) !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 0 18px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .paginationtt,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topics-back{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview h2{
  margin: 0 0 10px 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview h2 a{
  display: inline-block !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview-vehicle-meta,
body.ng #left.aio-topics-page .aio-topics-list #qlist .preview-stats-meta,
body.ng #left.aio-topics-page .aio-topics-list #qlist .askedby{
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .preview-stats-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 8px !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .hypen{
  display: none !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list #qlist{
    display: block !important;
  }

  body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview,
  body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview.p-user,
  body.ng #left.aio-topics-page .aio-topics-list #qlist > a.preview{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ===== /AIO: TOPIC PAGE TRUE FLEX 2-COLUMN ===== */

/* ===== AIO: TOPIC COL WRAPPER FINAL FIX (2026-04-12) ===== */
body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:22px 30px !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col{
  flex:0 0 calc(50% - 15px) !important;
  width:calc(50% - 15px) !important;
  max-width:calc(50% - 15px) !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  clear:none !important;
  display:block !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 18px 0 !important;
  float:none !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview h2{
  margin:0 0 10px 0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview h2 a{
  display:inline-block !important;
  font-size:20px !important;
  line-height:1.28 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview .preview-vehicle-meta,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview .preview-stats-meta,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview .askedby{
  width:100% !important;
  float:none !important;
  clear:both !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview .preview-stats-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:10px 0 8px !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .paginationtt,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topics-back,
body.ng #left.aio-topics-page .aio-topics-list #qlist > div[style*="flex:0 0 100%"]{
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}
/* ===== /AIO: TOPIC COL WRAPPER FINAL FIX ===== */

/* ===== AIO: TOPIC PAGE FINAL WINNING 2-COLUMN OVERRIDE (2026-04-13) ===== */
body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:22px 30px !important;

  columns:unset !important;
  column-count:unset !important;
  column-gap:0 !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  clear:none !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .preview.p-user,
body.ng #left.aio-topics-page .aio-topics-list #qlist > a.preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > .preview.p-user,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topic-col > a.preview{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 18px 0 !important;
  float:none !important;
  clear:none !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist > .paginationtt,
body.ng #left.aio-topics-page .aio-topics-list #qlist > .aio-topics-back{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:100% !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist .hypen{
  display:none !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list #qlist{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}
/* ===== /AIO: TOPIC PAGE FINAL WINNING 2-COLUMN OVERRIDE ===== */

/* ===== AIO: TOPIC PAGE PARENT COLUMN KILL (2026-04-13) ===== */
body.ng #left.aio-topics-page .aio-topics-list{
  display:block !important;
  columns:auto !important;
  column-count:1 !important;
  column-gap:0 !important;
  column-width:auto !important;
}

body.ng #left.aio-topics-page .aio-topics-list > *{
  -webkit-column-break-inside:avoid !important;
  break-inside:auto !important;
}

body.ng #left.aio-topics-page .aio-topics-list #qlist{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:22px 30px !important;
}

@media (max-width: 900px){
  body.ng #left.aio-topics-page .aio-topics-list{
    column-count:1 !important;
  }

  body.ng #left.aio-topics-page .aio-topics-list #qlist{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}
/* ===== /AIO: TOPIC PAGE PARENT COLUMN KILL ===== */

/* ===== AIO: DESKTOP REPLY RAIL GAP FIX (2026-04-13) ===== */
@media (min-width: 1100px){

  body.ng #replies .reply > .content{
    display:grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 34px !important;
    align-items:start !important;
  }

  body.ng #replies .reply .user{
    grid-column:1 !important;
    display:block !important;
    width:190px !important;
    max-width:190px !important;
    min-width:190px !important;
    margin:0 !important;
    padding:0 10px 0 0 !important;
  }

  body.ng #replies .reply .avatar,
  body.ng #replies .reply li.avatar{
    width:74px !important;
    min-width:74px !important;
    margin:0 0 10px 0 !important;
    padding:0 !important;
    float:none !important;
  }

  body.ng #replies .reply .avatar img,
  body.ng #replies .reply li.avatar img{
    width:74px !important;
    height:74px !important;
    display:block !important;
  }

  body.ng #replies .reply .infowrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ng #replies .reply .username{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px 0 !important;
    line-height:1.15 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  body.ng #replies .reply .stats,
  body.ng #replies .reply .stats ul,
  body.ng #replies .reply .stats ul.info,
  body.ng #replies .reply .stats ul.user{
    max-width:100% !important;
  }

  body.ng #replies .reply .text,
  body.ng #replies .reply .qbody,
  body.ng #replies .reply .date,
  body.ng #replies .reply .gallery,
  body.ng #replies .reply .image-gallery,
  body.ng #replies .reply .adminpanelvote,
  body.ng #replies .reply .adminbox,
  body.ng #replies .reply .controls,
  body.ng #replies .reply .paginationtt,
  body.ng #replies .reply .relheaderb,
  body.ng #replies .reply .magicbox{
    grid-column:2 !important;
    min-width:0 !important;
  }
}
/* ===== /AIO: DESKTOP REPLY RAIL GAP FIX ===== */

/* ===== AIO: DESKTOP QUESTION USER STACK LOWER (2026-04-13) ===== */
@media (min-width: 1100px){
  body.ng #question .user{
    padding-top: 18px !important;
  }

  body.ng #question .avatar{
    width: 88px !important;
    min-width: 88px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width: 88px !important;
    height: 88px !important;
    display: block !important;
  }

  body.ng #question .infowrap{
    margin: 0 !important;
    padding-top: 2px !important;
  }

  body.ng #question .username,
  body.ng #question .infowrap .username{
    display: block !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
  }
}
/* ===== /AIO: DESKTOP QUESTION USER STACK LOWER ===== */

/* ===== AIO: QUESTION DESKTOP/MOBILE BALANCE FIX (2026-04-13) ===== */

/* desktop: keep clear avatar + stacked user rail */
@media (min-width: 1100px){
  body.ng #question > .content{
    display:grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 34px !important;
    align-items:start !important;
  }

  body.ng #question > .content > .user{
    grid-column:1 !important;
    width:190px !important;
    max-width:190px !important;
    min-width:190px !important;
    padding-top:18px !important;
    margin:0 !important;
  }

  body.ng #question > .content > .text{
    grid-column:2 !important;
    min-width:0 !important;
    margin:0 !important;
  }

  body.ng #question .avatar{
    width:88px !important;
    min-width:88px !important;
    margin:0 0 14px 0 !important;
    padding:0 !important;
    float:none !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width:88px !important;
    height:88px !important;
    display:block !important;
  }

  body.ng #question .infowrap{
    margin:0 !important;
    padding-top:2px !important;
  }

  body.ng #question .username,
  body.ng #question .infowrap .username{
    display:block !important;
    margin:0 0 10px 0 !important;
    line-height:1.15 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
}

/* mobile + tablet: stack user block above body so text never runs into avatar */
@media (max-width: 1099px){
  body.ng #question > .content{
    display:block !important;
  }

  body.ng #question > .content > .user{
    display:grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap:14px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 16px 0 !important;
    padding:0 !important;
  }

  body.ng #question > .content > .text{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    clear:both !important;
  }

  body.ng #question .avatar{
    grid-column:1 !important;
    width:64px !important;
    min-width:64px !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width:64px !important;
    height:64px !important;
    display:block !important;
  }

  body.ng #question .infowrap{
    grid-column:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:2px 0 0 0 !important;
  }

  body.ng #question .username,
  body.ng #question .infowrap .username{
    display:block !important;
    margin:0 0 8px 0 !important;
    line-height:1.15 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  body.ng #question .stats,
  body.ng #question .stats ul.info{
    width:100% !important;
    max-width:100% !important;
  }

  body.ng #question .qbody{
    margin-top:0 !important;
  }
}

@media (max-width: 700px){
  body.ng #question > .content > .user{
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap:12px !important;
  }

  body.ng #question .avatar{
    width:58px !important;
    min-width:58px !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img{
    width:58px !important;
    height:58px !important;
  }
}
/* ===== /AIO: QUESTION DESKTOP/MOBILE BALANCE FIX ===== */

/* ===== AIO: TRUE DESKTOP QUESTION USER STACK FIX (2026-04-13) ===== */
@media (min-width: 1100px){
  body.ng #question > .content > .user{
    display:block !important;
    width:190px !important;
    max-width:190px !important;
    min-width:190px !important;
    margin:0 !important;
    padding-top:18px !important;
  }

  body.ng #question > .content > .user::after{
    content:"";
    display:block;
    clear:both;
  }

  body.ng #question .avatar,
  body.ng #question li.avatar{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:88px !important;
    min-width:88px !important;
    margin:0 0 14px 0 !important;
    padding:0 !important;
    height:auto !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img,
  body.ng #question li.avatar img{
    display:block !important;
    width:88px !important;
    height:88px !important;
  }

  body.ng #question .infowrap,
  body.ng #question .stats{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ng #question .username,
  body.ng #question .infowrap .username{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px 0 !important;
    line-height:1.15 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  body.ng #question .stats ul.info{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ng #question .stats ul.info li{
    margin:0 !important;
  }
}
/* ===== /AIO: TRUE DESKTOP QUESTION USER STACK FIX ===== */

/* ===== AIO: DESKTOP QUESTION STACK CENTER ALIGN FIX (2026-04-13) ===== */
@media (min-width: 1100px){
  body.ng #question > .content > .user{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:190px !important;
    max-width:190px !important;
    min-width:190px !important;
    margin:0 !important;
    padding-top:18px !important;
    text-align:center !important;
  }

  body.ng #question .avatar,
  body.ng #question li.avatar{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:88px !important;
    min-width:88px !important;
    margin:0 auto 14px auto !important;
    padding:0 !important;
    height:auto !important;
  }

  body.ng #question .avatar img,
  body.ng #question .avatar a img,
  body.ng #question li.avatar img{
    display:block !important;
    width:88px !important;
    height:88px !important;
    margin:0 auto !important;
  }

  body.ng #question .infowrap,
  body.ng #question .stats{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  body.ng #question .username,
  body.ng #question .infowrap .username{
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px 0 !important;
    line-height:1.15 !important;
    text-align:center !important;
  }

  body.ng #question .stats ul.info{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
  }
}
/* ===== /AIO: DESKTOP QUESTION STACK CENTER ALIGN FIX ===== */

/* ===== AIO: FANCYBOX CLOSE BUTTON FIX (2026-04-13) ===== */
body.ng .fancybox-wrap,
body.ng #fancybox-wrap{
  z-index: 100000 !important;
}

body.ng .fancybox-skin,
body.ng #fancybox-content{
  position: relative !important;
}

body.ng .fancybox-close,
body.ng .fancybox-close-small,
body.ng .fancybox-button--close{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 100001 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.88) !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
  cursor: pointer !important;
}

body.ng .fancybox-close::before,
body.ng .fancybox-close-small::before,
body.ng .fancybox-button--close::before{
  content: "×" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  font: 700 28px/38px Arial, sans-serif !important;
  text-align: center !important;
}

body.ng .fancybox-close-small svg,
body.ng .fancybox-button--close svg{
  display: none !important;
}

body.ng .fancybox-close:hover,
body.ng .fancybox-close-small:hover,
body.ng .fancybox-button--close:hover{
  background: rgba(0,0,0,.96) !important;
  transform: scale(1.04) !important;
}

@media (max-width: 700px){
  body.ng .fancybox-close,
  body.ng .fancybox-close-small,
  body.ng .fancybox-button--close{
    top: 8px !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
  }

  body.ng .fancybox-close::before,
  body.ng .fancybox-close-small::before,
  body.ng .fancybox-button--close::before{
    font-size: 26px !important;
    line-height: 34px !important;
  }
}
/* ===== /AIO: FANCYBOX CLOSE BUTTON FIX ===== */

/* ===== AIO: LIGHT MOBILE FANCYBOX PAN PATCH (2026-04-13) ===== */
@media (max-width: 900px){

  /* keep existing open behavior; only make inner area pan-friendly */
  body.ng .fancybox-inner,
  body.ng #fancybox-inner,
  body.ng #fancybox-content{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    max-width: 100% !important;
    max-height: calc(100vh - 40px) !important;
  }

  /* let the opened image keep its natural size inside a scrollable area */
  body.ng .fancybox-image,
  body.ng #fancybox-img,
  body.ng .fancybox-inner > img,
  body.ng #fancybox-content > img{
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /* keep the popup within the visible phone height without overriding placement */
  body.ng .fancybox-skin,
  body.ng .fancybox-outer{
    max-height: calc(100vh - 16px) !important;
  }
}
/* ===== /AIO: LIGHT MOBILE FANCYBOX PAN PATCH ===== */

/* ===== AIO: AUTOMOTIVE BASICS PAGE POLISH (2026-04-13) ===== */
body.ng #left.aio-automotive-basics-page{
  max-width: 1120px !important;
  margin: 0 auto !important;
}

body.ng #left.aio-automotive-basics-page .box.white{
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

body.ng #left.aio-automotive-basics-page .content > .underline-user{
  padding: 22px 28px 8px 28px !important;
  border-bottom: 0 !important;
}

body.ng #left.aio-automotive-basics-page .content > .underline-user h1{
  margin: 0 !important;
  font-size: 44px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

body.ng #left.aio-automotive-basics-page .content > p{
  margin: 0 !important;
  padding: 0 28px 18px 28px !important;
  max-width: 920px !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

body.ng #left.aio-automotive-basics-page .content.section{
  padding: 0 18px 22px 18px !important;
}

body.ng #left.aio-automotive-basics-page .content.section .thin{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.ng #left.aio-automotive-basics-page .content.section .thin h2{
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.ng #left.aio-automotive-basics-page .content.section .thin h2 a{
  display: block !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
  color: #0b66c3 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

body.ng #left.aio-automotive-basics-page .content.section .thin h2 a:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(11, 102, 195, 0.22) !important;
  text-decoration: none !important;
}

@media (max-width: 900px){
  body.ng #left.aio-automotive-basics-page .content > .underline-user{
    padding: 18px 16px 6px 16px !important;
  }

  body.ng #left.aio-automotive-basics-page .content > .underline-user h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  body.ng #left.aio-automotive-basics-page .content > p{
    padding: 0 16px 14px 16px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  body.ng #left.aio-automotive-basics-page .content.section{
    padding: 0 12px 16px 12px !important;
  }

  body.ng #left.aio-automotive-basics-page .content.section .thin h2 a{
    padding: 16px 16px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    border-radius: 14px !important;
  }
}
/* ===== /AIO: AUTOMOTIVE BASICS PAGE POLISH ===== */

/* ===== AIO: AUTOMOTIVE BASICS STRUCTURE FIX (2026-04-13) ===== */
body.ng #left.aio-automotive-basics-page{
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 14px 22px 14px !important;
}

body.ng #left.aio-automotive-basics-page > .box.white{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content:first-child{
  padding: 22px 28px 6px 28px !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content:first-child .underline-user{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content:first-child .underline-user h1{
  margin: 0 !important;
  font-size: 44px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > p{
  margin: 0 !important;
  padding: 0 28px 18px 28px !important;
  max-width: 920px !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content.section{
  padding: 0 18px 22px 18px !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content.section .thin{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content.section .thin h2{
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content.section .thin h2 a{
  display: block !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.04) !important;
  color: #0b66c3 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

body.ng #left.aio-automotive-basics-page > .box.white > .content.section .thin h2 a:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  border-color: rgba(11,102,195,.22) !important;
  text-decoration: none !important;
}

@media (max-width: 900px){
  body.ng #left.aio-automotive-basics-page{
    padding: 0 10px 16px 10px !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white{
    border-radius: 18px !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white > .content:first-child{
    padding: 18px 16px 6px 16px !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white > .content:first-child .underline-user h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white > p{
    padding: 0 16px 14px 16px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white > .content.section{
    padding: 0 12px 16px 12px !important;
  }

  body.ng #left.aio-automotive-basics-page > .box.white > .content.section .thin h2 a{
    padding: 16px 16px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    border-radius: 14px !important;
  }
}
/* ===== /AIO: AUTOMOTIVE BASICS STRUCTURE FIX ===== */

/* ===== AIO: LIVE AUTOMOTIVE BASICS PAGE POLISH (2026-04-13) ===== */
body.ng .box.white.aio-automotive-basics-live{
  max-width: 1120px !important;
  margin: 0 auto 24px auto !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

body.ng .box.white.aio-automotive-basics-live > .content{
  padding: 22px 28px 24px 28px !important;
}

body.ng .box.white.aio-automotive-basics-live .underline-user{
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.ng .box.white.aio-automotive-basics-live .underline-user h1{
  margin: 0 !important;
  font-size: 44px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

body.ng .box.white.aio-automotive-basics-live .aio-automotive-basics-live__intro{
  margin: 0 0 18px 0 !important;
  max-width: 920px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

body.ng .box.white.aio-automotive-basics-live .content.section{
  padding: 0 !important;
}

body.ng .box.white.aio-automotive-basics-live .content.section .thin{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.ng .box.white.aio-automotive-basics-live .content.section .thin h2{
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.ng .box.white.aio-automotive-basics-live .content.section .thin h2 a{
  display: block !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.04) !important;
  color: #0b66c3 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

body.ng .box.white.aio-automotive-basics-live .content.section .thin h2 a:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  border-color: rgba(11,102,195,.22) !important;
  text-decoration: none !important;
}

@media (max-width: 900px){
  body.ng .box.white.aio-automotive-basics-live{
    margin: 0 10px 16px 10px !important;
    border-radius: 18px !important;
  }

  body.ng .box.white.aio-automotive-basics-live > .content{
    padding: 18px 16px 16px 16px !important;
  }

  body.ng .box.white.aio-automotive-basics-live .underline-user h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  body.ng .box.white.aio-automotive-basics-live .aio-automotive-basics-live__intro{
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  body.ng .box.white.aio-automotive-basics-live .content.section .thin h2 a{
    padding: 16px 16px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    border-radius: 14px !important;
  }
}
/* ===== /AIO: LIVE AUTOMOTIVE BASICS PAGE POLISH ===== */

/* ===== AIO: CATEGORY LANDING MOBILE SEARCH HEIGHT FIX (2026-04-13) ===== */
@media (max-width: 820px){
  body.ng main.ng-main #left.ng-category-landing-page .aio-cat-search-wrap{
    margin: 10px 0 16px !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page .aio-cat-search-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page #catSearch{
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    line-height: 1.25 !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page #catSearchBtn.aio-cat-search-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.ng main.ng-main #left.ng-category-landing-page #catResults{
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* ===== /AIO: CATEGORY LANDING MOBILE SEARCH HEIGHT FIX ===== */

/* ===== AIO: Question Tool polish ===== */
body.ng #left .aio-qtool-label{
  display:block;
  margin:6px 0 8px 4px;
  font:700 12px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#5b6b79;
}

body.ng #left .aio-qtool-label .aio-qtool-note{
  display:inline-block;
  margin-left:6px;
  padding:3px 7px;
  border:1px solid #ead7b8;
  background:#fff5e6;
  color:#8a5a17;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.6px;
  vertical-align:middle;
}

body.ng #left .aio-qtool-box{
  border:1px solid #dfe6ec;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

body.ng #left .aio-qtool-box .data{
  min-height:78px;
}

body.ng #left .aio-qtool-stats .content{
  padding-top:4px;
}

body.ng #left .aio-qtool-stats-title{
  display:block;
  margin-bottom:14px;
  font:700 18px/1.3 "Roboto Condensed", Roboto, Arial, sans-serif;
  color:#2f3c48;
  text-transform:none;
}

body.ng #left .aio-qtool-mini-stats{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #eef2f5;
}

body.ng #left .aio-qtool-mini-stats-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  font-size:14px;
  color:#42515d;
}

body.ng #left .aio-qtool-mini-stats-row strong{
  font-size:18px;
  line-height:1;
  color:#1f2d38;
}

body.ng #left table.qt{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

body.ng #left table.qt .trhead th{
  background:#f5f8fb;
  color:#4d5d6b;
  font:700 11px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
  letter-spacing:.9px;
  text-transform:uppercase;
  border-bottom:1px solid #e2e8ee;
  padding:12px 10px;
}

body.ng #left table.qt tr td{
  padding:12px 10px;
  border-bottom:1px solid #edf1f4;
  vertical-align:top;
  background:#fff;
}

body.ng #left table.qt tr:last-child td{
  border-bottom:none;
}

body.ng #left table.qt td.subject a{
  color:#1f5f95;
  font-weight:700;
  border-bottom:none !important;
}

body.ng #left table.qt td.subject a:hover{
  color:#0395D4;
  text-decoration:underline;
}

body.ng #left table.qt td.type{
  width:42px;
  text-align:center;
  font:700 11px/1 "Roboto Condensed", Roboto, Arial, sans-serif;
  letter-spacing:.8px;
  border-radius:0;
}

body.ng #left table.qt td.type.yellow{
  color:#8a6400;
  background:#fff3cd;
}

body.ng #left table.qt td.type.green{
  color:#166534;
  background:#dcfce7;
}

body.ng #left table.qt td.similar,
body.ng #left table.qt td.catname,
body.ng #left table.qt td.vehicle,
body.ng #left table.qt td.time{
  color:#546472;
  font-size:13px;
}

body.ng #left .paginationtt{
  margin:10px 0 0;
  padding:0 10px 14px;
}

body.ng #left .paginationtt ul{
  padding:0;
  margin:0;
}

body.ng #left .paginationtt ul > li > a,
body.ng #left .paginationtt ul > li > span{
  border-radius:999px;
  padding:6px 10px;
}

@media (max-width: 700px){
  body.ng #left table.qt .catname,
  body.ng #left table.qt .vehicle{
    display:none;
  }

  body.ng #left table.qt .trhead .catname,
  body.ng #left table.qt .trhead .vehicle{
    display:none;
  }

  body.ng #left .aio-qtool-mini-stats-row{
    font-size:13px;
  }
}
/* ===== /AIO: Question Tool polish ===== */


/* ===== AIO: First GAM question-page inline slot ===== */
body.ng .aio-gam-q-inline-wrap{
  display:none;
}

@media (min-width: 992px){
  body.ng .aio-gam-q-inline-wrap{
    display:block;
    clear:both;
    margin:22px 0 18px;
    padding:14px 0 6px;
    border-top:1px solid #e9eef3;
    border-bottom:1px solid #e9eef3;
  }

  body.ng .aio-gam-q-inline-label{
    margin:0 0 10px;
    font:700 11px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#72808d;
    text-align:center;
  }

  body.ng .aio-gam-q-inline-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    width:100%;
    min-height:250px;
  }
}
/* ===== /AIO: First GAM question-page inline slot ===== */


/* ===== AIO: Second GAM question-page mobile slot ===== */
body.ng .aio-gam-q-mobile-wrap{
  display:none;
}

@media (max-width: 991px){
  body.ng .aio-gam-q-mobile-wrap{
    display:block;
    clear:both;
    margin:16px 0 20px;
    padding:12px 0 4px;
    border-top:1px solid #e9eef3;
    border-bottom:1px solid #e9eef3;
  }

  body.ng .aio-gam-q-mobile-label{
    margin:0 0 8px;
    font:700 10px/1.2 "Roboto Condensed", Roboto, Arial, sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#72808d;
    text-align:center;
  }

  body.ng .aio-gam-q-mobile-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    width:100%;
    min-height:50px;
  }
}
/* ===== /AIO: Second GAM question-page mobile slot ===== */


/* ===== AIO: Article/guide mobile image uncrop fix ===== */
@media (max-width: 767px){
  body.ng .content.article .image,
  body.ng .content.article a.fancybox,
  body.ng .content.article p > a.fancybox,
  body.ng .content.article .imagebg{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    overflow:visible !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.ng .content.article .image{
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
  }

  body.ng .content.article .image img,
  body.ng .content.article a.fancybox img,
  body.ng .content.article p img,
  body.ng .content.article img[itemprop="image"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  body.ng .content.article .imagebg{
    position:static !important;
    background:none !important;
    height:auto !important;
    line-height:1.35 !important;
    padding:8px 0 0 !important;
  }

  body.ng .content.article .imagedesc,
  body.ng .content.article .zoom{
    display:none !important;
  }
}
/* ===== /AIO: Article/guide mobile image uncrop fix ===== */


/* ===== AIO: Article/guide mobile center-crop pass ===== */
@media (max-width: 767px){
  body.ng .content.article .image{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin: 8px 0 16px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f3f5f7 !important;
  }

  body.ng .content.article .image > img,
  body.ng .content.article .image a > img,
  body.ng .content.article a.fancybox > .image > img,
  body.ng .content.article img[itemprop="image"]{
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  body.ng .content.article > img[itemprop="image"]:first-of-type,
  body.ng .content.article > p:first-of-type img[itemprop="image"]:first-of-type{
    height: 250px !important;
  }

  body.ng .content.article .imagebg{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.18)) !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    overflow: hidden !important;
  }

  body.ng .content.article .imagedesc{
    width: auto !important;
    float: none !important;
    display: block !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body.ng .content.article .zoom{
    display: none !important;
  }
}
/* ===== /AIO: Article/guide mobile center-crop pass ===== */


/* ===== AIO: Direct rendered article image mobile crop fix ===== */
@media (max-width: 767px){
  body.ng article a.fancybox,
  body.ng article p > a.fancybox{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 16px !important;
    overflow:hidden !important;
    border-radius:10px !important;
    line-height:0 !important;
    background:#f3f5f7 !important;
  }

  body.ng article a.fancybox > img,
  body.ng article p > a.fancybox > img,
  body.ng article img.imgsize{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:230px !important;
    min-height:230px !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    border-radius:10px !important;
  }

  body.ng article > p:first-of-type a.fancybox > img,
  body.ng article > p:first-of-type img.imgsize{
    height:250px !important;
    min-height:250px !important;
  }
}
/* ===== /AIO: Direct rendered article image mobile crop fix ===== */


/* ===== AIO: Broaden mobile article image coverage ===== */
@media (max-width: 767px){
  body.ng article a[rel="lightbox"],
  body.ng article p > a[rel="lightbox"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 16px !important;
    overflow:hidden !important;
    border-radius:10px !important;
    line-height:0 !important;
    background:#f3f5f7 !important;
  }

  body.ng article a[rel="lightbox"] > img,
  body.ng article p > a[rel="lightbox"] > img,
  body.ng article img#imgsize,
  body.ng article img[id="imgsize"],
  body.ng article img.imgsize{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:230px !important;
    min-height:230px !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    border-radius:10px !important;
  }
}
/* ===== /AIO: Broaden mobile article image coverage ===== */


/* ===== AIO: Broaden mobile article image coverage ===== */
@media (max-width: 767px){
  body.ng article a[rel="lightbox"],
  body.ng article p > a[rel="lightbox"]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 16px !important;
    overflow:hidden !important;
    border-radius:10px !important;
    line-height:0 !important;
    background:#f3f5f7 !important;
  }

  body.ng article a[rel="lightbox"] > img,
  body.ng article p > a[rel="lightbox"] > img,
  body.ng article img#imgsize,
  body.ng article img[id="imgsize"],
  body.ng article img.imgsize{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:230px !important;
    min-height:230px !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    border-radius:10px !important;
  }
}
/* ===== /AIO: Broaden mobile article image coverage ===== */


/* ===== AIO: Article mobile video polish ===== */
@media (max-width: 767px){
  body.ng article .responsive-iframe,
  body.ng article p > .responsive-iframe,
  body.ng .article .responsive-iframe,
  body.ng .article p > .responsive-iframe{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 18px !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #000 !important;
  }

  body.ng article .responsive-iframe iframe,
  body.ng article p > .responsive-iframe iframe,
  body.ng .article .responsive-iframe iframe,
  body.ng .article p > .responsive-iframe iframe{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
  }
}
/* ===== /AIO: Article mobile video polish ===== */


/* ===== AIO: Disable article-only image lightbox cues ===== */
body.ng article a.fancybox,
body.ng article a[rel="lightbox"]{
  pointer-events:none !important;
  cursor:default !important;
}

body.ng article img.imgsize,
body.ng article img[id="imgsize"],
body.ng article a.fancybox > img,
body.ng article a[rel="lightbox"] > img{
  cursor:default !important;
}
/* ===== /AIO: Disable article-only image lightbox cues ===== */