/* ==========================================================================
   BRS Help Scout Docs — Custom Stylesheet v4
   Author: Drafted for Saad / Bounce Rental Solutions
   Upload path: Manage > Docs > BRS Docs Site > Custom Code > External CSS

   v4 changes (vs v3):
   - FIXED narrow left-column layout: Help Scout wraps the home page in a
     bootstrap-ish .row > .span9 grid, leaving an empty right gutter. v4
     uses a full-bleed breakout on #docsSearch, .popularArticles, and
     .categories so they span the full viewport width with centered content.
   - FIXED icons rendering as the same generic fallback for every card:
     in Help Scout, each .category IS the <a> (not a wrapper around it),
     so :has(a[href*="..."]) never matched. v4 makes :nth-of-type the
     primary strategy (icons render no matter the HTML), with slug-based
     .category[href*="..."] selectors as a refinement.
   - Removed the generic ? fallback icon — every card now gets a real icon
     via position or slug.

   v3 changes (vs v2):
   - Switched icon matching from numeric IDs to URL slugs
   - Switched grid to auto-fit so cards reflow
   - Muted article-count color, added focus-visible a11y rings
   ========================================================================== */


/* ==========================================================================
   1. FONT IMPORT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ==========================================================================
   2. BASE TYPOGRAPHY & RESET
   ========================================================================== */
body,
html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #0F172A;
  background: #F8FAFC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

*:focus-visible {
  outline: 2px solid #7C3AED;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ==========================================================================
   3. TOP NAVBAR (logo bar)
   ========================================================================== */
.navbar,
.navbar .navbar-inner {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: none;
  height: 72px;
}

a.brand > img {
  max-height: 40px;
  width: auto;
  margin-left: 8px;
  vertical-align: middle;
}


/* ==========================================================================
   3b. HELP SCOUT GRID OVERRIDES
   Help Scout wraps the home in a bootstrap-style .row > .span9 grid that
   leaves an empty right gutter. Break key sections out to full width.
   ========================================================================== */
.row,
.row-fluid,
.container,
.container-fluid,
.docsBody,
.body-container,
#mainContent,
#main-content,
.main-content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.row > [class*="span"],
.row-fluid > [class*="span"],
.span9,
.span12 {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
}


/* ==========================================================================
   4. HOME PAGE HERO (search banner) — full-bleed
   ========================================================================== */
#docsSearch {
  background: linear-gradient(180deg, #FAFAFB 0%, #F1F5F9 100%);
  border-bottom: 1px solid #E2E8F0;
  padding: 96px 24px 104px;
  position: relative;
  overflow: hidden;
  /* Full-bleed breakout from any narrow parent container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Subtle radial accent for depth */
#docsSearch::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#docsSearch > * {
  position: relative;
  z-index: 1;
}

#docsSearch h1 {
  font-size: 44px;
  font-weight: 700;
  color: #0F172A;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

/* Subtitle injected under the H1 */
#docsSearch h1::after {
  content: 'Everything you need to run your rental business on BRS.';
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: #64748B;
  margin-top: 12px;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

#searchBar {
  max-width: 620px;
  margin: 40px auto 0;
  display: flex;
  align-items: stretch;
}

#searchBar .search-query {
  height: 56px;
  padding: 0 22px;
  border-radius: 12px 0 0 12px;
  border: 1px solid #E2E8F0;
  border-right: none;
  background: #FFFFFF;
  font-size: 16px;
  color: #0F172A;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex: 1;
}

#searchBar .search-query:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  z-index: 2;
}

#searchBar .search-query::placeholder {
  color: #94A3B8;
}

#searchBar button {
  height: 56px;
  padding: 0 32px;
  background: #7C3AED;
  border: none;
  border-radius: 0 12px 12px 0;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}

#searchBar button:hover {
  background: #6D28D9;
}

#searchBar button:active {
  transform: translateY(1px);
}


/* ==========================================================================
   5. "MOST POPULAR ARTICLES" SECTION
   ========================================================================== */
.popularArticles,
.popular {
  max-width: 1100px;
  margin: 64px auto 24px;
  padding: 0 24px;
  /* Full-bleed breakout, then re-center via auto margins */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
}

.popularArticles > *,
.popular > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.popularArticles h2,
.popular h2,
h2.popular-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.popularArticles ul,
.popular ul {
  list-style: none;
  padding: 0;
}

.popularArticles ul li,
.popular ul li {
  padding: 8px 0;
}

.popularArticles ul li a,
.popular ul li a {
  color: #475569;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}

.popularArticles ul li a:hover,
.popular ul li a:hover {
  color: #7C3AED;
}


/* ==========================================================================
   6. CATEGORY CARDS — fixed in v3
   - auto-fit grid so cards reflow naturally
   - slug-based icon matching (was ID-only in v2)
   - nth-of-type fallback so order-based icons fire even if slugs change
   ========================================================================== */
.categories {
  max-width: 1100px;
  margin: 24px auto 80px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  /* Full-bleed breakout — escape Help Scout's narrow .span9 column */
  width: min(1148px, calc(100vw - 32px));
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* Base card style */
.category,
.categories .category {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Icon container — no default image; per-card icons are set below via
   :nth-of-type (primary) and slug-based selectors (refinement) */
.category::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #F5F3FF;
  margin-bottom: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  flex-shrink: 0;
}

.category:hover {
  transform: translateY(-3px);
  border-color: #C4B5FD;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.category:hover::before {
  background-color: #EDE9FE;
}

.category h4,
.category h3 {
  font-size: 17px;
  font-weight: 600;
  color: #0F172A;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.category h4 a,
.category h3 a {
  color: inherit;
  text-decoration: none;
}

/* Article count — muted slate, not loud purple link color */
.category .article-count,
.category a.article-count,
.category h4 + a,
.category h3 + a,
.category > a:last-child:not(:only-child) {
  font-size: 13px;
  color: #64748B !important;
  font-weight: 500;
  text-decoration: none;
}

.category:hover .article-count,
.category:hover h4 + a,
.category:hover h3 + a {
  color: #7C3AED !important;
}

/* ==========================================================================
   6b. PER-CATEGORY ICONS
   PRIMARY: :nth-of-type — works regardless of HTML structure.
            Order must match your KB's current category order:
            1. Emails & Texts        7. Checkout Settings
            2. General               8. Product Listings
            3. Importing Historical  9. Rental Settings & Availability
            4. Delivery & Taxes      10. Troubleshooting
            5. Getting Started       11. Website & Tracking
            6. Orders & Booking
   REFINEMENT: slug-based selectors below cover both
            <a class="category" href="..."> and <div class="category"><a href="...">
   ========================================================================== */

/* 1. Emails & Texts — envelope.
   Uses :nth-of-type(1), :first-of-type, AND :first-child so the icon
   matches even if Help Scout drops an unexpected element at position 1.
   Path uses <polyline> with space-separated points — more reliably
   parsed by mobile browsers than the older relative-coord <path>. */
.categories .category:nth-of-type(1)::before,
.categories .category:first-of-type::before,
.categories .category:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' ry='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") !important;
}
/* 2. General — info */
.categories .category:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
/* 3. Importing Historical Data — upload */
.categories .category:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}
/* 4. Delivery & Taxes — truck */
.categories .category:nth-of-type(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}
/* 5. Getting Started — rocket */
.categories .category:nth-of-type(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}
/* 6. Orders & Booking — calendar */
.categories .category:nth-of-type(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* 7. Checkout Settings — card */
.categories .category:nth-of-type(7)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}
/* 8. Product Listings — box */
.categories .category:nth-of-type(8)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
/* 9. Rental Settings & Availability — sliders */
.categories .category:nth-of-type(9)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}
/* 10. Troubleshooting — wrench */
.categories .category:nth-of-type(10)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
/* 11. Website & Tracking — chart */
.categories .category:nth-of-type(11)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
}

/* Slug-based refinement — applies whether .category IS the link
   or contains the link. Wins over :nth-of-type if order changes.
   Uses the cleaner polyline-based envelope SVG. */
.category[href*="emails"]::before,
.category[href*="email"]::before,
.category[href*="-texts"]::before,
.category[href*="text"]::before,
.category:has(a[href*="emails"])::before,
.category:has(a[href*="email"])::before,
.category:has(a[href*="-texts"])::before,
.category:has(a[href*="text"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' ry='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") !important;
}

.category[href*="general"]::before,
.category:has(a[href*="general"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.category[href*="import"]::before,
.category[href*="historical"]::before,
.category:has(a[href*="import"])::before,
.category:has(a[href*="historical"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}

.category[href*="delivery"]::before,
.category[href*="tax"]::before,
.category:has(a[href*="delivery"])::before,
.category:has(a[href*="tax"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

.category[href*="getting-started"]::before,
.category[href*="started"]::before,
.category:has(a[href*="getting-started"])::before,
.category:has(a[href*="started"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

.category[href*="orders"]::before,
.category[href*="booking"]::before,
.category:has(a[href*="orders"])::before,
.category:has(a[href*="booking"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.category[href*="checkout"]::before,
.category:has(a[href*="checkout"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}

.category[href*="product"]::before,
.category[href*="listing"]::before,
.category:has(a[href*="product"])::before,
.category:has(a[href*="listing"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.category[href*="rental"]::before,
.category[href*="availability"]::before,
.category:has(a[href*="rental"])::before,
.category:has(a[href*="availability"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E");
}

.category[href*="troubleshoot"]::before,
.category[href*="trouble"]::before,
.category:has(a[href*="troubleshoot"])::before,
.category:has(a[href*="trouble"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.category[href*="website"]::before,
.category[href*="tracking"]::before,
.category:has(a[href*="website"])::before,
.category:has(a[href*="tracking"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
}

/* Mobile: stack the category cards */
@media (max-width: 600px) {
  .categories {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   7. "STILL NEED HELP?" FOOTER SECTION
   Updated 2026-05-13:
   - Native Help Scout footer content (copyright + "Powered by Help Scout")
     was rendering at top-right because Help Scout's own footer styles
     position it separately. We hide the native content entirely and
     re-render the copyright via the ::after pseudo-element so everything
     stays cleanly centered and the Help Scout credit is removed.
   ========================================================================== */
footer,
.footer {
  background: #FFFFFF;
  color: #94A3B8;
  font-size: 13px;
  padding: 56px 24px 40px;
  text-align: center;
  border-top: 1px solid #E2E8F0;
  margin-top: 64px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide every native footer child (the misaligned copyright line and the
   Help Scout credit). Pseudo-elements below remain visible. */
footer > *,
.footer > * {
  display: none !important;
}

footer::before,
.footer::before {
  content: 'Still need help?';
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  text-align: center;
  margin: 0 auto 12px;
  letter-spacing: -0.015em;
}

footer::after,
.footer::after {
  content: 'Email info@bouncerentalsolutions.com and our team will get back to you within one business day.\A\A© Bounce Rental Solutions 2026.';
  display: block;
  font-size: 15px;
  color: #64748B;
  text-align: center;
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.6;
  white-space: pre-line;
}


/* ==========================================================================
   8. ARTICLE PAGE
   ========================================================================== */
.article,
.docsArticle,
article {
  max-width: 760px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 56px 64px;
  margin: 40px auto;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  border: 1px solid #E2E8F0;
}

/* Kill nested container styling from Help Scout's default theme */
.article .article,
.docsArticle .docsArticle,
article article,
.article-container,
.content-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Article title */
.article h1,
.docsArticle h1,
article h1 {
  font-size: 34px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #F1F5F9;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Section headers */
.article h2,
.article h3 {
  font-size: 19px;
  font-weight: 600;
  color: #0F172A;
  margin-top: 36px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

/* Bold paragraph as fake section header */
.article p > strong:first-child:last-child {
  font-size: 18px;
  font-weight: 600;
  color: #0F172A;
  display: block;
  margin-top: 32px;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}

/* Body copy */
.article p,
.docsArticle p,
article p {
  font-size: 16px;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 18px;
}

/* Links */
.article a,
.docsArticle a,
article a {
  color: #7C3AED;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid #DDD6FE;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.article a:hover,
.docsArticle a:hover,
article a:hover {
  border-bottom-color: #7C3AED;
  color: #6D28D9;
}

/* Lists */
.article ul,
.article ol {
  padding-left: 26px;
  margin-bottom: 24px;
}

.article ul li,
.article ol li {
  margin-bottom: 10px;
  line-height: 1.75;
  color: #334155;
}

/* Inline code */
.article code {
  background: #F1F5F9;
  color: #6D28D9;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 14px;
  font-family: 'SF Mono', 'JetBrains Mono', Monaco, Consolas, monospace;
  font-weight: 500;
}


/* ==========================================================================
   9. "NOTE:" / "IMPORTANT:" CALLOUTS
   ========================================================================== */
.article p em:first-child {
  display: block;
  background: linear-gradient(135deg, #FAF5FF 0%, #F5F3FF 100%);
  border-left: 3px solid #A78BFA;
  padding: 18px 22px;
  margin: 28px 0;
  border-radius: 0 10px 10px 0;
  font-style: normal;
  color: #4C1D95;
  font-size: 15px;
  line-height: 1.65;
}


/* ==========================================================================
   10. IMAGES & SCREENSHOTS
   ========================================================================== */
.article img,
.docsArticle img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  margin: 20px 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
  display: block;
}


/* ==========================================================================
   11. "LAST UPDATED ON" FOOTER LINE
   ========================================================================== */
.article .meta,
.article .lastUpdated {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #F1F5F9;
  font-size: 13px;
  color: #94A3B8;
}


/* ==========================================================================
   12. ARTICLE-PAGE SIDEBAR NAV
   ========================================================================== */
.sidebar,
.sidebar-nav,
.docsSidebar {
  background: transparent;
  padding: 32px 16px;
}

.sidebar h4,
.sidebar-nav h4,
.sidebar .categories-heading {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-left: 12px;
}

.sidebar ul li,
.sidebar-nav ul li {
  list-style: none;
}

.sidebar ul li a,
.sidebar-nav ul li a {
  display: block;
  padding: 9px 12px;
  margin: 2px 0;
  color: #475569;
  font-size: 14px;
  font-weight: 400;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar ul li a:hover,
.sidebar-nav ul li a:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.sidebar ul li.active a,
.sidebar-nav ul li.active a,
.sidebar ul li.current a {
  background: #F5F3FF;
  color: #6D28D9;
  font-weight: 600;
}


/* ==========================================================================
   13. CATEGORY LISTING PAGE
   ========================================================================== */
.collectionList,
.articleList,
.category-articles {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.collectionList ul,
.articleList ul,
.category-articles ul {
  list-style: none;
  padding: 0;
}

.collectionList ul li,
.articleList ul li,
.category-articles ul li {
  margin-bottom: 8px;
}

.collectionList ul li a,
.articleList ul li a,
.category-articles ul li a {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  color: #0F172A;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.collectionList ul li a::before,
.articleList ul li a::before,
.category-articles ul li a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.collectionList ul li a::after,
.articleList ul li a::after,
.category-articles ul li a::after {
  content: '→';
  margin-left: auto;
  color: #CBD5E1;
  font-size: 16px;
  transition: transform 0.18s ease, color 0.18s ease;
}

.collectionList ul li a:hover,
.articleList ul li a:hover,
.category-articles ul li a:hover {
  border-color: #C4B5FD;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.collectionList ul li a:hover::after,
.articleList ul li a:hover::after,
.category-articles ul li a:hover::after {
  color: #7C3AED;
  transform: translateX(4px);
}


/* ==========================================================================
   14. SEARCH RESULTS PAGE
   ========================================================================== */
.searchResults li,
.search-results li {
  padding: 20px 0;
  border-bottom: 1px solid #F1F5F9;
}

.searchResults li a,
.search-results li a {
  color: #0F172A;
  font-weight: 600;
  font-size: 16px;
}

.searchResults li a:hover,
.search-results li a:hover {
  color: #7C3AED;
}


/* ==========================================================================
   15. MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  #docsSearch {
    padding: 56px 16px 64px;
  }

  #docsSearch h1 {
    font-size: 30px;
  }

  #docsSearch h1::after {
    font-size: 15px;
  }

  #searchBar {
    margin-top: 28px;
  }

  #searchBar .search-query,
  #searchBar button {
    height: 50px;
    font-size: 15px;
  }

  #searchBar button {
    padding: 0 20px;
  }

  .article,
  .docsArticle,
  article {
    padding: 28px 24px;
    margin: 16px;
  }

  .article h1 {
    font-size: 26px;
  }

  .categories {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ==========================================================================
   16. HOMEPAGE SEARCH FIXES
   Added 2026-05-13
   Purpose:
   - Keep the homepage search suggestions visible above the hero/content.
   - Remove the small purple submit block that overlaps the right side of
     the homepage search input.
   - Leave the rest of the Help Scout layout unchanged.
   ========================================================================== */

#docsSearch {
  overflow: visible !important;
  z-index: 20;
}

#docsSearch #searchBar {
  position: relative;
  z-index: 9999;
  overflow: visible !important;
  max-width: 620px;
}

#docsSearch #searchBar .search-query {
  width: 100% !important;
  border: 1px solid #7C3AED !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10), 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* Hide only the homepage search submit button.
   This fixes the purple block sitting on top of the search field. */
#docsSearch #searchBar button,
#docsSearch #searchBar input[type="submit"],
#docsSearch #searchBar .search-submit,
#docsSearch #searchBar .btn {
  display: none !important;
}

/* Help Scout autocomplete/search suggestion dropdowns */
#docsSearch .ui-autocomplete,
#docsSearch .autocomplete,
#docsSearch .typeahead,
#docsSearch .tt-menu,
#docsSearch .search-autocomplete,
#docsSearch .searchAutocomplete,
#docsSearch .search-results,
#docsSearch .searchResults,
#docsSearch #searchResults {
  position: absolute !important;
  z-index: 10000 !important;
  overflow: visible !important;
}

/* Common Help Scout/jQuery UI autocomplete dropdown styling */
.ui-autocomplete,
.autocomplete,
.typeahead,
.tt-menu,
.search-autocomplete,
.searchAutocomplete {
  z-index: 10000 !important;
}

/* Make the dropdown feel connected to the search box when it appears */
.ui-autocomplete,
.tt-menu {
  margin-top: 8px !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
  overflow: hidden !important;
}
/* ==========================================================================
   17. HOMEPAGE SEARCH DROPDOWN SPACING FIX
   Added 2026-05-13
   Purpose:
   - Push autocomplete/search suggestions below the search input.
   - Prevent the first suggestion from sitting underneath the input border.
   ========================================================================== */

#docsSearch #searchBar {
  margin-bottom: 18px !important;
}

/* Most common Help Scout/jQuery autocomplete dropdown */
#docsSearch .ui-autocomplete,
.ui-autocomplete {
  margin-top: 12px !important;
  padding-top: 8px !important;
}

/* Other possible autocomplete dropdown classes */
#docsSearch .autocomplete,
#docsSearch .typeahead,
#docsSearch .tt-menu,
#docsSearch .search-autocomplete,
#docsSearch .searchAutocomplete,
.autocomplete,
.typeahead,
.tt-menu,
.search-autocomplete,
.searchAutocomplete {
  margin-top: 12px !important;
  padding-top: 8px !important;
}

/* Give individual suggestions breathing room */
.ui-autocomplete li,
.ui-autocomplete li a,
.autocomplete li,
.autocomplete li a,
.tt-menu .tt-suggestion,
.typeahead .tt-suggestion,
.search-autocomplete li,
.search-autocomplete li a,
.searchAutocomplete li,
.searchAutocomplete li a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.45 !important;
}

/* If Help Scout positions the dropdown directly under the input,
   this creates visual separation without changing the rest of the layout. */
#docsSearch #searchBar + .ui-autocomplete,
#docsSearch #searchBar + .autocomplete,
#docsSearch #searchBar + .tt-menu,
#docsSearch #searchBar + .typeahead {
  margin-top: 14px !important;
}
/* ==========================================================================
   18. FINAL HOMEPAGE SEARCH DROPDOWN + SUBTITLE FIX
   Added 2026-05-13
   Purpose:
   - Remove the subtitle under "BRS Knowledge Base".
   - Force the autocomplete dropdown to start below the search input instead
     of overlapping behind it.
   ========================================================================== */

/* Remove injected subtitle */
#docsSearch h1::after {
  content: none !important;
  display: none !important;
}

/* Make the search bar a clean positioning container */
#docsSearch #searchBar {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

/* The input should occupy the full search bar now that the submit button is hidden */
#docsSearch #searchBar .search-query,
#docsSearch #searchBar input[type="search"],
#docsSearch #searchBar input[type="text"] {
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

/* Hide the homepage search button/purple block */
#docsSearch #searchBar button,
#docsSearch #searchBar input[type="submit"],
#docsSearch #searchBar .search-submit,
#docsSearch #searchBar .btn {
  display: none !important;
}

/* Dropdowns that are rendered INSIDE the search bar */
#docsSearch #searchBar ul,
#docsSearch #searchBar .ui-autocomplete,
#docsSearch #searchBar .autocomplete,
#docsSearch #searchBar .typeahead,
#docsSearch #searchBar .tt-menu,
#docsSearch #searchBar .search-autocomplete,
#docsSearch #searchBar .searchAutocomplete,
#docsSearch #searchBar #searchResults,
#docsSearch #searchBar .searchResults {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
  z-index: 10000 !important;
  overflow-y: auto !important;
}

/* Dropdowns that are rendered elsewhere but still inside the hero */
#docsSearch .ui-autocomplete,
#docsSearch .autocomplete,
#docsSearch .typeahead,
#docsSearch .tt-menu,
#docsSearch .search-autocomplete,
#docsSearch .searchAutocomplete,
#docsSearch #searchResults,
#docsSearch .searchResults {
  margin-top: 12px !important;
  padding-top: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
  z-index: 10000 !important;
}

/* Give each suggestion enough internal spacing */
#docsSearch #searchBar li,
#docsSearch #searchBar li a,
#docsSearch .ui-autocomplete li,
#docsSearch .ui-autocomplete li a,
#docsSearch .autocomplete li,
#docsSearch .autocomplete li a,
#docsSearch .tt-menu .tt-suggestion,
#docsSearch .typeahead .tt-suggestion,
#docsSearch .search-autocomplete li,
#docsSearch .search-autocomplete li a,
#docsSearch .searchAutocomplete li,
#docsSearch .searchAutocomplete li a {
  display: block !important;
  padding: 9px 16px !important;
  line-height: 1.45 !important;
}
/* ==========================================================================
   19. LOGO + ARTICLE SIDEBAR FIX
   Added 2026-05-13
   Purpose:
   - Make the top logo larger and centered.
   - Restore article category navigation as a left-side menu instead of
     letting it fall underneath the article.
   ========================================================================== */

/* Larger centered logo */
.navbar,
.navbar .navbar-inner {
  height: 96px !important;
  min-height: 96px !important;
}

.navbar .navbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

a.brand,
.navbar .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 100% !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
}

a.brand > img,
.navbar .brand img {
  max-height: 68px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
}


/* ==========================================================================
   19b. ARTICLE-PAGE SIDEBAR LAYOUT — REVISED 2026-05-13
   Earlier section 3b force-sets every .span9 / .span12 / .span* to
   width: 100% to fix the homepage's empty right gutter. On article and
   category pages that override is what's pushing the sidebar BELOW the
   article instead of leaving it on the left.

   This block reverses 3b on any page that contains a sidebar column, and
   rebuilds the two-column layout. We target .span3 directly (Help Scout's
   standard sidebar column class — present whether the inner class is
   .sidebar, .docsSidebar, .sidebar-nav, or anything else).
   ========================================================================== */

/* Any row that contains a Help Scout .span3 sidebar column → 2-column grid */
.row:has(> .span3),
.row-fluid:has(> .span3) {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  column-gap: 44px !important;
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 32px auto 80px !important;
  align-items: start !important;
}

/* Sidebar column (Help Scout puts the nav inside .span3) */
.row:has(> .span3) > .span3,
.row-fluid:has(> .span3) > .span3 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  float: none !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  position: sticky !important;
  top: 24px !important;
  align-self: start !important;
  box-sizing: border-box !important;
}

/* Article/content column */
.row:has(> .span3) > .span9,
.row-fluid:has(> .span3) > .span9,
.row:has(> .span3) > .span8,
.row-fluid:has(> .span3) > .span8 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Make the article itself fill its grid column instead of being capped */
.row:has(> .span3) .article,
.row-fluid:has(> .span3) .article,
.row:has(> .span3) .docsArticle,
.row-fluid:has(> .span3) .docsArticle,
.row:has(> .span3) article,
.row-fluid:has(> .span3) article {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Sidebar visual polish (transparent column, clean list) */
.row:has(> .span3) > .span3 .sidebar,
.row:has(> .span3) > .span3 .sidebar-nav,
.row:has(> .span3) > .span3 .docsSidebar,
.row:has(> .span3) > .span3 nav,
.row:has(> .span3) > .span3 ul {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

/* Mobile: stack sidebar above content on small screens */
@media (max-width: 900px) {
  .row:has(> .span3),
  .row-fluid:has(> .span3) {
    display: block !important;
    width: calc(100% - 28px) !important;
    margin: 20px auto 56px !important;
  }

  .row:has(> .span3) > .span3,
  .row-fluid:has(> .span3) > .span3 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 24px !important;
  }

  .row:has(> .span3) > .span9,
  .row-fluid:has(> .span3) > .span9,
  .row:has(> .span3) > .span8,
  .row-fluid:has(> .span3) > .span8 {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ==========================================================================
   20. MOBILE RESPONSIVE OVERHAUL (v2 — more aggressive)
   Updated 2026-05-13

   Earlier attempt at max-width: 768px wasn't gripping Help Scout's mobile
   structure (the 2-column Popular Articles list and the right-side gutter
   were surviving). This version:
     - widens the breakpoint to 1024px so tablet-portrait viewports also
       get the mobile treatment
     - uses universal selectors and broader wrapper class patterns
       ([class*="home"], [class*="docs"], [class*="landing"], etc.) to
       force every possible Help Scout container to 100% width
     - kills column-based layouts on Popular Articles via columns:1,
       column-count:1, display:block, grid-template-columns:1fr, AND
       flex-direction:column simultaneously, on the <ul>, its parent,
       and every descendant — so whichever element Help Scout actually
       applied the column layout to, it gets neutralized
     - forces Popular Articles link color with !important
   ========================================================================== */

@media (max-width: 1024px) {
  /* Prevent horizontal scroll from any leftover overflowing elements */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Force every Help Scout container/wrapper to fill the viewport.
     Broad attribute selectors catch class names like .docs-home,
     .homeContent, .docs-landing, .docs-body, .span9, etc. — whatever
     Help Scout actually used. */
  body,
  body > div,
  body > section,
  body > main,
  body > article,
  .row,
  .row-fluid,
  .container,
  .container-fluid,
  .docsBody,
  .docs-body,
  .body-container,
  #mainContent,
  #main-content,
  .main-content,
  .docs-wrapper,
  #docs-wrapper,
  .docs-content,
  [class*="docs-home"],
  [class*="docsHome"],
  [class*="home-content"],
  [class*="homeContent"],
  [class*="docs-landing"],
  [class*="docsLanding"],
  [class*="docs-container"],
  [class*="docs-wrapper"],
  [class*="span"],
  [id*="docs-home"],
  [id*="docsHome"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* Disable desktop full-bleed math on mobile.
     calc(50% - 50vw) and left:50%/translateX(-50%) only center correctly
     when the parent is centered in the viewport. On mobile we just want
     100% width with no offset. */
  #docsSearch,
  .popularArticles,
  .popular,
  .categories {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: relative !important;
  }

  /* Hero — tighter spacing, smaller heading */
  #docsSearch {
    padding: 44px 16px 52px !important;
  }

  #docsSearch h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  /* Search bar — keep input legible, shrink button on phones */
  #searchBar {
    margin: 24px auto 0 !important;
    max-width: 100% !important;
    padding: 0 4px;
    width: 100% !important;
  }

  #docsSearch #searchBar .search-query,
  #searchBar .search-query,
  #searchBar input[type="search"],
  #searchBar input[type="text"] {
    height: 48px !important;
    font-size: 15px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }

  #searchBar button,
  #searchBar input[type="submit"],
  #searchBar .btn {
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  /* Popular Articles — keep the 2-column layout, just make it fit
     within the viewport instead of overflowing. Constrain the section
     to 100% width, use a tight column-gap, and shrink the link font
     so two columns fit comfortably on a phone screen. */
  .popularArticles,
  .popular {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 28px auto 16px !important;
    box-sizing: border-box !important;
    display: block !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .popularArticles ul,
  .popular ul,
  [class*="popular"] ul,
  [class*="Popular"] ul {
    columns: 1 !important;
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-gap: 0 !important;
    -webkit-column-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .popularArticles ul li,
  .popular ul li,
  [class*="popular"] ul li,
  [class*="Popular"] ul li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .popularArticles ul li a,
  .popular ul li a,
  [class*="popular"] ul li a,
  [class*="Popular"] ul li a {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
  }

  .popularArticles h2,
  .popular h2 {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }

  /* Categories — single column with comfortable edge padding */
  .categories {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
    margin: 16px auto 48px !important;
  }

  .category,
  .categories .category {
    padding: 22px 20px !important;
    min-height: 0 !important;
  }

  .category::before {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 12px !important;
    background-size: 20px !important;
  }

  .category h4,
  .category h3 {
    font-size: 16px !important;
  }

  /* Footer — trim spacing on phones */
  footer,
  .footer {
    padding: 40px 20px 32px !important;
    margin-top: 36px !important;
  }

  footer::before,
  .footer::before {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  footer::after,
  .footer::after {
    font-size: 14px !important;
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  /* Article pages — readable padding on phones */
  .article,
  .docsArticle,
  article {
    padding: 24px 18px !important;
    margin: 12px !important;
    border-radius: 10px !important;
  }

  .article h1,
  .docsArticle h1,
  article h1 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    padding-bottom: 18px !important;
  }

  .article h2,
  .article h3 {
    font-size: 17px !important;
  }

  .article p,
  .docsArticle p,
  article p {
    font-size: 15px !important;
  }

  /* Navbar / logo — keep it compact on phones */
  .navbar,
  .navbar .navbar-inner {
    height: 64px !important;
    min-height: 64px !important;
  }

  a.brand,
  .navbar .brand {
    min-height: 64px !important;
  }

  a.brand > img,
  .navbar .brand img {
    max-height: 44px !important;
  }
}

/* Extra-small phones (iPhone SE, older Android) */
@media (max-width: 400px) {
  #docsSearch {
    padding: 36px 12px 44px !important;
  }

  #docsSearch h1 {
    font-size: 22px !important;
  }

  .popularArticles,
  .popular,
  .categories {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .category,
  .categories .category {
    padding: 20px 16px !important;
  }

  footer,
  .footer {
    padding: 32px 16px 28px !important;
  }
}


/* ==========================================================================
   21. MOBILE SPACING FIX + EMAILS & TEXTS ICON
   Added 2026-05-13
   Purpose:
   - Reduce the oversized vertical gap between the "Most Popular Articles"
     section and the first category card on mobile/tablet viewports
     (was ~64px combined margin; now collapses to a clean ~12px).
   - Guarantee the envelope icon renders on the Emails & Texts category
     card. The card was showing as an empty purple square because the
     desktop :nth-of-type / slug rules weren't winning specificity once
     the mobile cascade took over.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Tighten the vertical gap between Popular Articles → Categories */
  .popularArticles,
  .popular {
    margin: 28px auto 4px !important;
    padding-bottom: 0 !important;
  }

  .popularArticles ul,
  .popular ul {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .categories {
    margin: 8px auto 48px !important;
    padding-top: 0 !important;
  }
}

/* Emails & Texts envelope icon — the real URL slug is "communications"
   (e.g. /category/68-communications), NOT "emails" or "texts". That's why
   every previous attempt at [href*="email"] / [href*="text"] failed: the
   strings simply weren't in the URL. This rule matches the actual slug. */
.category[href*="communications"]::before,
.category[href*="communication"]::before,
.category:has(a[href*="communications"])::before,
.category:has(a[href*="communication"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' ry='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E") !important;
  background-color: #F5F3FF !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
}

/* The "spacing issue" is actually a literal <hr> Help Scout renders between
   the Popular Articles list and the category grid. The dashed line in the
   screenshot IS that <hr>. Hide it (and any sibling divider variants) so
   the two sections sit cleanly next to each other. */
.popularArticles + hr,
.popular + hr,
hr.divider,
.docsBody hr,
#mainContent hr,
.body-container hr,
body > hr,
main > hr,
section > hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   FINAL MOBILE FIX — Hide Popular Articles icons + safe two-column spacing
   Added 2026-05-13

   What this fixes:
   - On mobile, Help Scout's document icons next to Popular Articles were
     escaping to the far-left edge of the screen.
   - This hides those icons on mobile only.
   - Keeps the Popular Articles list in two columns.
   - Adds safe left/right gutters.
   - Adds space between Popular Articles and the category cards.
   - Desktop untouched.
   ========================================================================== */

@media (max-width: 768px) {
  /* Safe gutter around the Popular Articles section. */
  .popularArticles,
  .popular,
  body:has(.categories) .popularArticles,
  body:has(.categories) .popular {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Controlled two-column layout. */
  .popularArticles ul,
  .popular ul,
  body:has(.categories) .popularArticles ul,
  body:has(.categories) .popular ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    columns: auto !important;
    column-count: auto !important;
    -webkit-column-count: auto !important;
    -moz-column-count: auto !important;

    list-style: none !important;
    overflow: visible !important;
  }

  .popularArticles ul li,
  .popular ul li,
  body:has(.categories) .popularArticles ul li,
  body:has(.categories) .popular ul li {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    list-style: none !important;
  }

  /* Hide the document icons next to Popular Articles on mobile.
     This covers pseudo-icons, inline icons, SVGs, images, and Bootstrap-style icons. */
  .popularArticles ul li::before,
  .popular ul li::before,
  .popularArticles ul li a::before,
  .popular ul li a::before,
  .popularArticles ul li i,
  .popular ul li i,
  .popularArticles ul li svg,
  .popular ul li svg,
  .popularArticles ul li img,
  .popular ul li img,
  .popularArticles ul li [class*="icon"],
  .popular ul li [class*="icon"],
  body:has(.categories) .popularArticles ul li::before,
  body:has(.categories) .popular ul li::before,
  body:has(.categories) .popularArticles ul li a::before,
  body:has(.categories) .popular ul li a::before,
  body:has(.categories) .popularArticles ul li i,
  body:has(.categories) .popular ul li i,
  body:has(.categories) .popularArticles ul li svg,
  body:has(.categories) .popular ul li svg,
  body:has(.categories) .popularArticles ul li img,
  body:has(.categories) .popular ul li img,
  body:has(.categories) .popularArticles ul li [class*="icon"],
  body:has(.categories) .popular ul li [class*="icon"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove any left padding reserved for the icon, so text aligns cleanly. */
  .popularArticles ul li a,
  .popular ul li a,
  body:has(.categories) .popularArticles ul li a,
  body:has(.categories) .popular ul li a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Add space before the first category card. */
  .categories {
    margin-top: 32px !important;
  }
}

/* ==========================================================================
   22. FINAL OVERRIDE — MOBILE HOMEPAGE POPULAR ARTICLES EDGE FIX
   Added 2026-05-14

   This is intentionally placed at the very end of the file so it wins over
   the earlier broad mobile rules in sections 20 and 21.

   Fixes the screenshot issue:
   - Popular Article document icons were still being rendered/clipped on mobile.
   - The article list was too tight to the left/right edge.
   - Category cards below needed to stay inside the same safe mobile gutter.
   ========================================================================== */

@media (max-width: 768px) {
  /* Homepage-only safety rail. This prevents the full-bleed desktop math and
     the earlier broad mobile reset from pushing homepage sections to the edge. */
  body:has(#docsSearch):has(.categories) .popularArticles,
  body:has(#docsSearch):has(.categories) .popular,
  body:has(#docsSearch):has(.categories) [class*="popular"],
  body:has(#docsSearch):has(.categories) [class*="Popular"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px auto 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Force the Popular Articles list into a clean two-column grid.
     This overrides the earlier section 20 rule that forced display:block
     and column-count:1. */
  body:has(#docsSearch):has(.categories) .popularArticles ul,
  body:has(#docsSearch):has(.categories) .popular ul,
  body:has(#docsSearch):has(.categories) [class*="popular"] ul,
  body:has(#docsSearch):has(.categories) [class*="Popular"] ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    columns: auto !important;
    column-count: auto !important;
    -webkit-column-count: auto !important;
    -moz-column-count: auto !important;
    column-gap: 22px !important;

    list-style: none !important;
    overflow: hidden !important;
  }

  body:has(#docsSearch):has(.categories) .popularArticles li,
  body:has(#docsSearch):has(.categories) .popular li,
  body:has(#docsSearch):has(.categories) [class*="popular"] li,
  body:has(#docsSearch):has(.categories) [class*="Popular"] li {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
    list-style: none !important;
    overflow: hidden !important;
    background: none !important;
  }

  /* This is the key icon fix.
     Help Scout may render the document icon as a pseudo-element, an inline
     element, a classed icon, or a background image. Remove all of those inside
     the Popular Articles section on mobile only. */
  body:has(#docsSearch):has(.categories) .popularArticles li::before,
  body:has(#docsSearch):has(.categories) .popular li::before,
  body:has(#docsSearch):has(.categories) [class*="popular"] li::before,
  body:has(#docsSearch):has(.categories) [class*="Popular"] li::before,
  body:has(#docsSearch):has(.categories) .popularArticles li::after,
  body:has(#docsSearch):has(.categories) .popular li::after,
  body:has(#docsSearch):has(.categories) [class*="popular"] li::after,
  body:has(#docsSearch):has(.categories) [class*="Popular"] li::after,
  body:has(#docsSearch):has(.categories) .popularArticles a::before,
  body:has(#docsSearch):has(.categories) .popular a::before,
  body:has(#docsSearch):has(.categories) [class*="popular"] a::before,
  body:has(#docsSearch):has(.categories) [class*="Popular"] a::before,
  body:has(#docsSearch):has(.categories) .popularArticles a::after,
  body:has(#docsSearch):has(.categories) .popular a::after,
  body:has(#docsSearch):has(.categories) [class*="popular"] a::after,
  body:has(#docsSearch):has(.categories) [class*="Popular"] a::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
  }

  body:has(#docsSearch):has(.categories) .popularArticles i,
  body:has(#docsSearch):has(.categories) .popular i,
  body:has(#docsSearch):has(.categories) [class*="popular"] i,
  body:has(#docsSearch):has(.categories) [class*="Popular"] i,
  body:has(#docsSearch):has(.categories) .popularArticles svg,
  body:has(#docsSearch):has(.categories) .popular svg,
  body:has(#docsSearch):has(.categories) [class*="popular"] svg,
  body:has(#docsSearch):has(.categories) [class*="Popular"] svg,
  body:has(#docsSearch):has(.categories) .popularArticles img,
  body:has(#docsSearch):has(.categories) .popular img,
  body:has(#docsSearch):has(.categories) [class*="popular"] img,
  body:has(#docsSearch):has(.categories) [class*="Popular"] img,
  body:has(#docsSearch):has(.categories) .popularArticles [class*="icon"],
  body:has(#docsSearch):has(.categories) .popular [class*="icon"],
  body:has(#docsSearch):has(.categories) [class*="popular"] [class*="icon"],
  body:has(#docsSearch):has(.categories) [class*="Popular"] [class*="icon"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:has(#docsSearch):has(.categories) .popularArticles a,
  body:has(#docsSearch):has(.categories) .popular a,
  body:has(#docsSearch):has(.categories) [class*="popular"] a,
  body:has(#docsSearch):has(.categories) [class*="Popular"] a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;

    background: none !important;
    background-image: none !important;
    background-position: initial !important;

    color: #7C3AED !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Keep category cards below the article list inside the mobile viewport.
     The earlier .categories rules use full-bleed/transform behavior on desktop;
     this resets that behavior only on mobile homepage. */
  body:has(#docsSearch):has(.categories) .categories {
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px auto 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  body:has(#docsSearch):has(.categories) .category,
  body:has(#docsSearch):has(.categories) .categories .category {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Very small phones: one column is cleaner and avoids cramped article titles. */
@media (max-width: 380px) {
  body:has(#docsSearch):has(.categories) .popularArticles ul,
  body:has(#docsSearch):has(.categories) .popular ul,
  body:has(#docsSearch):has(.categories) [class*="popular"] ul,
  body:has(#docsSearch):has(.categories) [class*="Popular"] ul {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   23. EMERGENCY OVERRIDE — REMOVE MOBILE POPULAR ARTICLE DOCUMENT ICONS
   Added 2026-05-14

   The prior fix used body:has() for homepage scoping. Help Scout/custom CSS
   appears not to be applying those selectors reliably, so this block avoids
   :has() entirely and targets the Popular Articles block directly.

   Fix:
   - Remove the small document icons on mobile, regardless of whether Help
     Scout renders them as pseudo-elements, list-style images, inline icons,
     or background images.
   - Keep the article list inside the phone viewport with safe gutters.
   - Keep category cards inside the viewport below.
   ========================================================================== */

@media only screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Reset the Popular Articles section itself. */
  html body .popularArticles,
  html body .popular,
  html body div.popularArticles,
  html body section.popularArticles {
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px auto 20px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body .popularArticles *,
  html body .popular * {
    box-sizing: border-box !important;
  }

  /* The list must be a controlled grid, not Help Scout columns. */
  html body .popularArticles ul,
  html body .popular ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 22px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;

    columns: auto !important;
    column-count: auto !important;
    -webkit-column-count: auto !important;
    -moz-column-count: auto !important;
    column-gap: normal !important;

    overflow: hidden !important;
    background: none !important;
    background-image: none !important;
  }

  html body .popularArticles li,
  html body .popular li {
    display: block !important;
    position: static !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    float: none !important;
    clear: none !important;

    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;

    overflow: hidden !important;
    background: transparent !important;
    background-image: none !important;
  }

  /* Nuclear icon removal inside Popular Articles.
     This is intentionally broad but scoped only to mobile + Popular Articles. */
  html body .popularArticles *::before,
  html body .popularArticles *::after,
  html body .popular *::before,
  html body .popular *::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    background-image: none !important;
  }

  html body .popularArticles i,
  html body .popularArticles svg,
  html body .popularArticles img,
  html body .popularArticles [class^="icon"],
  html body .popularArticles [class*=" icon"],
  html body .popularArticles [class*="Icon"],
  html body .popularArticles [class*="article-icon"],
  html body .popularArticles [class*="ArticleIcon"],
  html body .popularArticles [class*="docs-icon"],
  html body .popularArticles [class*="file"],
  html body .popularArticles [class*="File"],
  html body .popular i,
  html body .popular svg,
  html body .popular img,
  html body .popular [class^="icon"],
  html body .popular [class*=" icon"],
  html body .popular [class*="Icon"],
  html body .popular [class*="article-icon"],
  html body .popular [class*="ArticleIcon"],
  html body .popular [class*="docs-icon"],
  html body .popular [class*="file"],
  html body .popular [class*="File"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html body .popularArticles a,
  html body .popular ul a,
  html body .popularArticles li a,
  html body .popular li a {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    background: none !important;
    background-image: none !important;

    color: #7C3AED !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Keep the cards below inside the same mobile viewport. */
  html body .categories {
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px auto 48px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  html body .categories .category,
  html body .category {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Smaller phones: one column avoids cramped wrapping. */
@media only screen and (max-width: 380px) {
  html body .popularArticles ul,
  html body .popular ul {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   24. ROOT-CAUSE FIX — CATEGORY/ARTICLE LIST ICONS ON MOBILE
   Added 2026-05-14

   What was actually broken:
   Sections 21, 22, and 23 only hide icons inside .popularArticles / .popular.
   But the icons in the mobile screenshot are NOT from those sections — they
   are the purple document ::before icons that THIS very file adds in
   Section 13 (lines ~851-863) to:
     .collectionList ul li a::before
     .articleList    ul li a::before
     .category-articles ul li a::before

   Those ::before icons have never been hidden on mobile in any earlier
   block, so they keep rendering against the left edge of the screen on
   category/article-listing pages. This block fixes exactly that, mobile
   only. Desktop styling (Section 13) is left fully intact.
   ========================================================================== */

@media only screen and (max-width: 768px) {
  /* Kill the document ::before icon on every list-page variant.
     This is the actual selector that was missing from sections 21-23. */
  html body .collectionList ul li a::before,
  html body .articleList ul li a::before,
  html body .category-articles ul li a::before,
  html body [class*="collectionList"] ul li a::before,
  html body [class*="articleList"] ul li a::before,
  html body [class*="article-list"] ul li a::before,
  html body [class*="categoryArticles"] ul li a::before,
  html body [class*="category-articles"] ul li a::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    background-image: none !important;
    visibility: hidden !important;
  }

  /* Defense in depth: also hide any native <i>/<svg>/<img>/[class*="icon"]
     Help Scout might inject inside list items on these same pages. */
  html body .collectionList ul li i,
  html body .collectionList ul li svg,
  html body .collectionList ul li img,
  html body .collectionList ul li [class*="icon"],
  html body .articleList ul li i,
  html body .articleList ul li svg,
  html body .articleList ul li img,
  html body .articleList ul li [class*="icon"],
  html body .category-articles ul li i,
  html body .category-articles ul li svg,
  html body .category-articles ul li img,
  html body .category-articles ul li [class*="icon"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Safe container gutter so nothing can sit flush against the screen edge,
     even if a future Help Scout template change reintroduces an icon. */
  html body .collectionList,
  html body .articleList,
  html body .category-articles {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* The link was a flex row sized around the icon. With the icon gone,
     tighten padding so titles read naturally on a phone. */
  html body .collectionList ul li a,
  html body .articleList ul li a,
  html body .category-articles ul li a {
    padding: 14px 16px !important;
    gap: 0 !important;
  }
}