@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Cormorant+Infant:wght@600;700&display=swap");

/* ==================================================
   REVİDE HELP SCOUT CUSTOM CSS
   Cleaned / sequenced / deduplicated version
   ================================================== */

/* =========================
   01. DESIGN TOKENS
   ========================= */

:root {
  --rv-black: #212121;
  --rv-blush: #d6bab5;
  --rv-cream: #e9eae5;
  --rv-soft: #f8f8f7;
  --rv-orange: #ee6f44;
  --rv-red: #7a0c16;
  --rv-border: #e5e5e5;

  --rv-font-sans: "Hanken Grotesk", Arial, sans-serif;
  --rv-font-serif: "Cormorant Infant", Georgia, serif;

  --rv-container: 1280px;
  --rv-container-pad: 20px;
}

/* =========================
   02. GLOBAL RESET
   ========================= */

* {
  box-sizing: border-box !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: var(--rv-cream) !important;
  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
}

a {
  text-decoration: none !important;
}

.row-fluid {
  max-width: var(--rv-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   03. HEADER - DESKTOP
   ========================= */

body #mainNav,
body #mainNav.navbar,
body #mainNav .navbar-inner {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--rv-blush) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Stop Help Scout container from controlling header alignment */
body #mainNav .container-fluid,
body #mainNav .navbar-inner > .container-fluid {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo */
body #mainNav .brand {
  position: absolute !important;
  top: 50% !important;
  left: max(var(--rv-container-pad), calc((100vw - var(--rv-container)) / 2 + var(--rv-container-pad))) !important;
  transform: translateY(-50%) !important;

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

  float: none !important;
  width: 174px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: 1 !important;
}

body #mainNav .brand img,
a.brand img {
  display: block !important;
  width: auto !important;
  max-width: 140px !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
}

/* Navigation wrapper */
body #mainNav .nav-collapse,
body #mainNav .nav-collapse.collapse {
  position: absolute !important;
  top: 50% !important;
  right: max(var(--rv-container-pad), calc((100vw - var(--rv-container)) / 2 + var(--rv-container-pad))) !important;
  transform: translateY(-50%) !important;

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

  float: none !important;
  clear: none !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body #mainNav nav {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}

body #mainNav ul.nav,
body #mainNav .nav {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;

  float: none !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body #mainNav ul.nav > li {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #mainNav ul.nav > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body #mainNav ul.nav > li > a:hover {
  opacity: 0.75 !important;
}

/* Header CTA buttons */
body #mainNav ul.nav > li.rv-ask > a {
  padding: 0 24px !important;
  background: var(--rv-black) !important;
  color: #fff !important;
}

body #mainNav ul.nav > li.rv-claim > a {
  padding: 0 24px !important;
  background: var(--rv-red) !important;
  color: #fff !important;
}

body #mainNav ul.nav > li.rv-sign > a {
  padding: 0 16px !important;
  background: #fff !important;
  color: var(--rv-black) !important;
}

body #mainNav .caret,
body #mainNav .btn-navbar {
  display: none !important;
}

/* Desktop: hamburger hidden */
@media (min-width: 769px) {
  .rv-mobile-toggle {
    display: none !important;
  }
}

/* =========================
   04. HERO SEARCH
   ========================= */

#docsSearch {
  width: 100% !important;
  min-height: 500px !important;
  margin: 0 !important;
  padding: 58px 20px 56px !important;

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

  background-color: #fff !important;
  background-image: url("https://revide.vercel.app/assets/hero-section.png") !important;
  background-size: cover !important;
  background-position: center !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rv-border) !important;

  text-align: center !important;
}

#docsSearch h1 {
  max-width: 750px !important;
  margin: 0 auto 30px !important;
  padding: 0 !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.22) !important;
}

#docsSearch #searchBar {
  position: relative !important;

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

  width: 560px !important;
  max-width: calc(100% - 32px) !important;
  height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 999px !important;
  box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.18) !important;
}

#docsSearch #searchBar::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 18px !important;
  height: 18px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 0.7 !important;
}

#docsSearch #searchBar input.search-query,
#docsSearch #searchBar .search-query {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 18px 0 46px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 48px !important;
}

#docsSearch #searchBar input.search-query::placeholder {
  color: rgba(33, 33, 33, 0.5) !important;
}

/* Hide default Help Scout search button */
#docsSearch #searchBar button,
#docsSearch #searchBar input[type="submit"] {
  display: none !important;
}

/* =========================
   05. CONTENT / CATEGORY CARDS
   ========================= */

#contentArea.container-fluid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(214, 186, 181, 0.22), transparent 28%),
    var(--rv-cream) !important;
}

.collection-category {
  width: min(100% - 40px, var(--rv-container)) !important;
  max-width: var(--rv-container) !important;
  margin: 0 auto !important;
  padding: 0px 0 90px !important;
}

.collection-category > h2,
.collection-category h2 {
  position: relative !important;
  margin: 0 0 34px !important;
  padding: 0 !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
}

.collection-category h2 a {
  color: var(--rv-black) !important;
}

.collection-category > h2::after {
  content: "Everything stores need to launch, connect bookings, and manage Revide confidently.";
  display: block !important;
  margin-top: 10px !important;

  color: rgba(33, 33, 33, 0.58) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.category-list,
.category-list.two-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 420px)) !important;
  justify-content: center !important;
  gap: 24px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.category-list .category,
.category-list.two-col .category {
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;

  float: none !important;
  width: 100% !important;
  min-height: 220px !important;
  margin: 0 !important;
  padding: 26px 26px 24px !important;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)) !important;
  border: 1px solid rgba(33, 33, 33, 0.07) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 44px rgba(33, 33, 33, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

  text-align: left !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

.category-list .category::before,
.category-list.two-col .category::before {
  content: "" !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;

  width: 190px !important;
  height: 190px !important;

  background: radial-gradient(
    circle,
    rgba(238, 111, 68, 0.28),
    rgba(214, 186, 181, 0.18) 42%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}

.category-list .category::after,
.category-list.two-col .category::after {
  content: "Resource" !important;
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;

  padding: 7px 11px !important;
  background: rgba(248, 248, 247, 0.82) !important;
  border: 1px solid rgba(33, 33, 33, 0.08) !important;
  border-radius: 999px !important;

  color: rgba(33, 33, 33, 0.7) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

.category-list .category:nth-child(1) h3::before {
  content: "01";
}

.category-list .category:nth-child(2) h3::before {
  content: "02";
}

.category-list .category h3::before {
  position: absolute !important;
  right: 2px !important;
  bottom: 78px !important;

  color: rgba(33, 33, 33, 0.055) !important;
  font-family: var(--rv-font-serif) !important;
  font-size: 86px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  pointer-events: none !important;
}

.category-list .category:hover,
.category-list.two-col .category:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(33, 33, 33, 0.13) !important;
  box-shadow:
    0 24px 56px rgba(33, 33, 33, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.category-list .category h3,
.category-list.two-col .category h3 {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 9px !important;
  padding: 0 !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.category-list .category p,
.category-list.two-col .category p {
  position: relative !important;
  z-index: 2 !important;

  max-width: 310px !important;
  margin: 0 0 14px !important;

  color: rgba(33, 33, 33, 0.68) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.category-list .category .article-count,
.category-list.two-col .category .article-count {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 !important;
  padding: 6px 10px !important;

  background: rgba(33, 33, 33, 0.045) !important;
  border-radius: 999px !important;

  color: rgba(33, 33, 33, 0.62) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.category-list .category .article-count::after,
.category-list.two-col .category .article-count::after {
  content: " →" !important;
  display: inline-block !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.category-list .category:hover .article-count::after,
.category-list.two-col .category:hover .article-count::after {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}

/* =========================
   06. FOOTER - DESKTOP
   ========================= */

footer.center,
footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.rv-footer-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 32px 0 26px !important;

  background-color: var(--rv-orange) !important;
  background-image:
    url("https://revide.vercel.app/assets/gradientp.png"),
    linear-gradient(105deg, var(--rv-blush) 0%, var(--rv-orange) 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;

  color: var(--rv-black) !important;
}

.rv-footer-grid,
.rv-footer-bottom {
  width: min(100% - 40px, var(--rv-container)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

.rv-footer-grid {
  display: grid !important;
  grid-template-columns: 0.5fr 1fr 1fr !important;
  gap: 70px !important;
  align-items: start !important;
  padding-right: 64px !important;
  padding-left: 64px !important;
  max-width: 1020px !important;
}

.rv-footer-logo {
  width: 174px !important;
  height: 48px !important;

  background-image: url("https://d33v4339jhl8k0.cloudfront.net/docs/assets/69d5e9a51e89eed8b9262469/images/69d7c10002da94dc0d6c8f8b/Revide-Black-Logo-(3).png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.rv-footer-title {
  margin: 0 0 10px !important;
  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

.rv-footer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.rv-footer-links a,
.rv-footer-bottom a {
  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

.rv-footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;

  margin-top: 34px !important;
  padding: 22px 64px 0 !important;
  border-top: 1px solid rgba(229, 229, 229, 0.9) !important;

  color: var(--rv-black) !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  max-width: 1020px;
}

.rv-footer-bottom a {
  margin-left: 18px !important;
}

.icon-article-doc:before {
    margin-right: 0px;
    margin-bottom: 4px;
}

.related .icon-article-doc:before {
    margin-right: 6px;
}

/* ==================================================
   REMOVE CLICK/FOCUS OUTLINE
   ================================================== */

a,
button,
input,
select,
textarea,
[tabindex],
#mainNav a,
#sidebar a,
.articleList a,
.rv-footer-wrap a,
#docsSearch #searchBar,
#docsSearch input,
#sidebar #searchBar,
#sidebar input {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

a:focus,
a:active,
button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
[tabindex]:focus,
[tabindex]:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Better: keep focus only for keyboard users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Keyboard accessibility: subtle premium focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(33, 33, 33, 0.28) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* =========================
   07. TABLET / iPAD
   ========================= */

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --rv-container-pad: 24px;
  }

  /* Header */
  body #mainNav,
  body #mainNav.navbar,
  body #mainNav .navbar-inner {
    height: 52px !important;
    min-height: 52px !important;
  }

  body #mainNav .container-fluid,
  body #mainNav .navbar-inner > .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    width: min(100% - 28px, 960px) !important;
    max-width: 960px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body #mainNav .brand {
    position: static !important;
    transform: none !important;

    width: 130px !important;
    max-width: 130px !important;
    height: 52px !important;
  }

  body #mainNav .brand img {
    width: 126px !important;
    max-width: 126px !important;
    max-height: 34px !important;
  }

  body #mainNav .brand::before,
  .rv-mobile-toggle {
    display: none !important;
    content: none !important;
  }

  body.rv-menu-open {
    overflow: auto !important;
  }

  body #mainNav .nav-collapse,
  body #mainNav .nav-collapse.collapse {
    position: static !important;
    transform: none !important;

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

    width: auto !important;
    height: 52px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  body #mainNav nav {
    width: auto !important;
    height: 52px !important;
  }

  body #mainNav ul.nav,
  body #mainNav .nav {
    flex-direction: row !important;
    gap: 6px !important;

    width: auto !important;
    height: 52px !important;
    max-height: none !important;
  }

  body #mainNav ul.nav > li {
    width: auto !important;
    height: 52px !important;
  }

  body #mainNav ul.nav > li > a {
    width: auto !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;

    font-size: 12px !important;
    line-height: 34px !important;
  }

  body #mainNav ul.nav > li.rv-ask > a,
  body #mainNav ul.nav > li.rv-claim > a,
  body #mainNav ul.nav > li.rv-sign > a {
    width: auto !important;
    height: 34px !important;
    padding: 0 12px !important;

    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
  }

  /* Hero */
  #docsSearch {
    min-height: 420px !important;
    padding: 76px 24px 70px !important;
    background-position: center top !important;
  }

  #docsSearch h1 {
    max-width: 620px !important;
    margin: 0 auto 24px !important;
    font-size: 44px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
  }

  #docsSearch #searchBar {
    width: 430px !important;
    max-width: calc(100% - 40px) !important;
    height: 44px !important;
  }

  #docsSearch #searchBar input.search-query,
  #docsSearch #searchBar .search-query {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    line-height: 44px !important;
  }

  /* Category */
  .collection-category {
    width: min(100% - 48px, 960px) !important;
    max-width: 960px !important;
    padding: 56px 0 66px !important;
  }

  .collection-category > h2,
  .collection-category h2 {
    margin-bottom: 28px !important;
    font-size: 24px !important;
    text-align: center !important;
  }

  .collection-category > h2::after {
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .category-list .category,
  .category-list.two-col .category {
    min-height: 190px !important;
    padding: 24px !important;
  }

  /* Footer */
  .rv-footer-wrap {
    padding: 32px 0 26px !important;
    text-align: left !important;
  }

  .rv-footer-grid,
  .rv-footer-bottom {
    width: min(100% - 48px, 960px) !important;
    max-width: 960px !important;
  }

  .rv-footer-grid {
    grid-template-columns: 1.1fr 0.8fr 0.8fr !important;
    gap: 40px !important;
    justify-items: start !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .rv-footer-grid > div {
    text-align: left !important;
  }

  .rv-footer-logo {
    margin: 0 !important;
    background-position: left center !important;
  }

  .rv-footer-title {
    text-align: left !important;
  }

  .rv-footer-links {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .rv-footer-links a {
    text-align: left !important;
  }

  .rv-footer-bottom {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .rv-footer-bottom > div {
    width: auto !important;
    text-align: left !important;
  }

  .rv-footer-bottom a {
    margin-right: 0 !important;
    margin-left: 16px !important;
  }
}

/* =========================
   08. MOBILE
   ========================= */

@media (max-width: 768px) {
  /* Header */
  body #mainNav,
  body #mainNav.navbar,
  body #mainNav .navbar-inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--rv-blush) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body #mainNav .container-fluid,
  body #mainNav .navbar-inner > .container-fluid {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
  }

  body #mainNav .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

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

    float: none !important;
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 1 !important;
  }

  body #mainNav .brand img {
    display: block !important;
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain !important;
  }

  body #mainNav .brand::before {
    display: none !important;
    content: none !important;
  }

  /* Hamburger */
  .rv-mobile-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    width: 38px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .rv-mobile-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--rv-black) !important;
    border-radius: 999px !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
  }

  body.rv-menu-open .rv-mobile-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.rv-menu-open .rv-mobile-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.rv-menu-open .rv-mobile-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Mobile dropdown nav */
  body #mainNav .nav-collapse,
  body #mainNav .nav-collapse.collapse {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;

    transition: max-height 0.28s ease, opacity 0.2s ease, padding-top 0.2s ease !important;
  }

  body.rv-menu-open #mainNav .nav-collapse,
  body.rv-menu-open #mainNav .nav-collapse.collapse {
    max-height: 340px !important;
    padding-top: 12px !important;
    opacity: 1 !important;
  }

  body #mainNav nav {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  body #mainNav ul.nav,
  body #mainNav .nav {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body #mainNav ul.nav > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #mainNav ul.nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: var(--rv-black) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    text-shadow: none !important;
  }

  body #mainNav ul.nav > li.rv-ask > a,
  body #mainNav ul.nav > li.rv-claim > a,
  body #mainNav ul.nav > li.rv-sign > a {
    justify-content: center !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
  }

  /* Hero */
  #docsSearch {
    min-height: 390px !important;
    padding: 58px 18px 54px !important;
  }

  #docsSearch h1 {
    max-width: 440px !important;
    margin-bottom: 22px !important;
    font-size: 38px !important;
    line-height: 1 !important;
  }

  #docsSearch #searchBar {
    width: 100% !important;
    max-width: calc(100% - 12px) !important;
    height: 46px !important;
  }

  #docsSearch #searchBar input.search-query,
  #docsSearch #searchBar .search-query {
    height: 46px !important;
    min-height: 46px !important;
    line-height: 46px !important;
  }

  /* Category */
  .collection-category {
    width: min(100% - 28px, var(--rv-container)) !important;
    padding: 42px 0 50px !important;
  }

  .collection-category > h2,
  .collection-category h2 {
    margin-bottom: 28px !important;
    font-size: 24px !important;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .category-list .category,
  .category-list.two-col .category {
    min-height: 200px !important;
  }

  /* Footer */
  .rv-footer-wrap {
    padding: 34px 0 28px !important;
    text-align: center !important;
  }

  .rv-footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 26px !important;

    width: min(100% - 28px, var(--rv-container)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  .rv-footer-grid > div {
    width: 100% !important;
    text-align: center !important;
  }

  .rv-footer-logo {
    margin: 0 auto !important;
    background-position: center center !important;
  }

  .rv-footer-title {
    text-align: center !important;
  }

  .rv-footer-links {
    align-items: center !important;
    text-align: center !important;
  }

  .rv-footer-links a {
    text-align: center !important;
  }

  .rv-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: min(100% - 28px, var(--rv-container)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  .rv-footer-bottom > div {
    width: 100% !important;
    text-align: center !important;
  }

  .rv-footer-bottom a {
    display: inline-block !important;
    margin-right: 8px !important;
    margin-left: 8px !important;
    text-align: center !important;
  }
}


/* ==================================================
   CATEGORY PAGE - PREMIUM LOOK
   For Help Scout category/article listing page
   ================================================== */

/* Page background */
body #contentArea.container-fluid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 54px 0 0px !important;

  background:
    radial-gradient(circle at 14% 18%, rgba(214, 186, 181, 0.42), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(238, 111, 68, 0.14), transparent 26%),
    linear-gradient(180deg, #f3f2ed 0%, #e9eae5 100%) !important;
}

/* Main page grid wrapper */
body #contentArea > .row-fluid {
  width: min(100% - 40px, 1240px) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

/* Help Scout default float reset */
body #main-content,
body #sidebar {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Put sidebar left, content right */
body #sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body #main-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0 !important;
}

/* Main content premium card */
body #main-content .contentWrapper {
  min-height: 460px !important;
  margin: 0 !important;
  padding: 46px 48px 52px !important;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)) !important;
  border: 1px solid rgba(33, 33, 33, 0.07) !important;
  border-radius: 24px !important;
  box-shadow:
    0 26px 70px rgba(33, 33, 33, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Decorative soft wash */
body #main-content .contentWrapper::before {
  content: "" !important;
  position: absolute !important;
  top: -130px !important;
  right: -120px !important;
  width: 330px !important;
  height: 330px !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle, rgba(238, 111, 68, 0.18), rgba(214, 186, 181, 0.12) 42%, transparent 72%) !important;

  pointer-events: none !important;
}

/* Category heading area */
body #categoryHead {
  margin: 0 0 32px !important;
  padding: 0 0 26px !important;
  border-bottom: 1px solid rgba(33, 33, 33, 0.08) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px 28px !important;
  align-items: start !important;

  position: relative !important;
  z-index: 2 !important;
}

/* Tiny label above heading */
body #categoryHead::before {
  content: "Help Center" !important;
  grid-column: 1 / -1 !important;

  width: fit-content !important;
  margin: 0 0 2px !important;
  padding: 7px 11px !important;

  background: rgba(214, 186, 181, 0.28) !important;
  border: 1px solid rgba(33, 33, 33, 0.08) !important;
  border-radius: 999px !important;

  color: rgba(33, 33, 33, 0.72) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Category title */
body #categoryHead h1 {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
}

/* Description */
body #categoryHead .descrip {
  grid-column: 1 !important;
  max-width: 620px !important;
  margin: -8px 0 0 !important;
  padding: 0 !important;

  color: rgba(33, 33, 33, 0.64) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Sort dropdown */
body #categoryHead .sort {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 4px 0 0 !important;
}

body #categoryHead .sort form {
  margin: 0 !important;
}

body #categoryHead #sortBy {
  width: 174px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 34px 0 14px !important;

  appearance: auto !important;
  -webkit-appearance: auto !important;

  background: rgba(248, 248, 247, 0.92) !important;
  border: 1px solid rgba(33, 33, 33, 0.13) !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  color: rgba(33, 33, 33, 0.76) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  outline: none !important;
}

/* Article list reset */
body ul.articleList {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;

  position: relative !important;
  z-index: 2 !important;
}

body ul.articleList li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Article row card */
body ul.articleList li a {
  min-height: 64px !important;
  margin: 0 !important;
  padding: 16px 18px !important;

  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 24px !important;
  gap: 14px !important;
  align-items: center !important;

  background: rgba(248, 248, 247, 0.76) !important;
  border: 1px solid rgba(33, 33, 33, 0.07) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(33, 33, 33, 0.035) !important;

  color: #212121 !important;
  text-decoration: none !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}

body ul.articleList li a:hover {
  transform: translateY(-3px) !important;
  background: #ffffff !important;
  border-color: rgba(238, 111, 68, 0.28) !important;
  box-shadow: 0 18px 38px rgba(33, 33, 33, 0.075) !important;
}

/* Article icon */
body ul.articleList li a i,
body ul.articleList li a .icon-article-doc {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;

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

  background: rgba(214, 186, 181, 0.28) !important;
  border: 1px solid rgba(33, 33, 33, 0.07) !important;
  border-radius: 12px !important;

  color: rgba(33, 33, 33, 0.62) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Article title */
body ul.articleList li a span {
  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

/* Right arrow */
body ul.articleList li a::after {
  content: "→" !important;

  width: 24px !important;
  height: 24px !important;

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

  color: rgba(33, 33, 33, 0.45) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;

  transform: translateX(-4px) !important;
  opacity: 0 !important;
  transition: transform 0.22s ease, opacity 0.22s ease !important;
}

body ul.articleList li a:hover::after {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* ================= Sidebar ================= */

body #sidebar {
  position: sticky !important;
  top: 88px !important;

  padding: 22px !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.54), rgba(255,255,255,0.24)) !important;
  border: 1px solid rgba(33, 33, 33, 0.07) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(33, 33, 33, 0.055) !important;
  backdrop-filter: blur(10px) !important;
}

/* Sidebar search */
body #sidebar #searchBar,
body #sidebar form#searchBar.sm {
  width: 100% !important;
  height: 46px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;

  position: relative !important;
  display: flex !important;
  align-items: center !important;

  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(33, 33, 33, 0.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(33, 33, 33, 0.05) !important;
  overflow: hidden !important;
}

body #sidebar #searchBar input.search-query {
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 44px 0 16px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

body #sidebar #searchBar input.search-query::placeholder {
  color: rgba(33, 33, 33, 0.46) !important;
}

body #sidebar #searchBar button {
  width: 42px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;

  position: absolute !important;
  right: 2px !important;
  top: 0 !important;

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

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: rgba(33, 33, 33, 0.42) !important;
}

/* Sidebar heading */
body #sidebar h3 {
  margin: 0 0 14px !important;
  padding: 0 !important;

  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Category nav */
body #sidebar ul.nav,
body #sidebar ul.nav-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body #sidebar ul.nav-list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body #sidebar ul.nav-list > li > a {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;

  color: rgba(33, 33, 33, 0.62) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}

body #sidebar ul.nav-list > li > a:hover {
  background: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(33, 33, 33, 0.06) !important;
  color: #212121 !important;
}

body #sidebar ul.nav-list > li.active > a {
  background: #212121 !important;
  border-color: #212121 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(33, 33, 33, 0.15) !important;
}

body #sidebar ul.nav-list > li > a i {
  color: inherit !important;
  opacity: 0.7 !important;
}

/* No results */
body #noResults {
  width: min(100% - 40px, 1240px) !important;
  margin: 20px auto 0 !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(33, 33, 33, 0.08) !important;

  color: rgba(33, 33, 33, 0.68) !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 14px !important;
}

.related {
  margin-top: 30px !important;
    padding: 46px 48px 52px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)) !important;
    border: 1px solid rgba(33, 33, 33, 0.07) !important;
    border-radius: 24px !important;
    box-shadow: 0 26px 70px rgba(33, 33, 33, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    position: relative !important;
    overflow: hidden !important;
}

#serp p {
      margin-top: 12px;
}

/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  body #contentArea.container-fluid {
    padding: 42px 0 0px !important;
  }

  body #contentArea > .row-fluid {
    width: min(100% - 48px, 960px) !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  body #main-content .contentWrapper {
    padding: 38px 34px 42px !important;
    border-radius: 22px !important;
  }

  body #categoryHead {
    grid-template-columns: 1fr !important;
  }

  body #categoryHead h1 {
    font-size: 36px !important;
  }

  body #categoryHead .sort {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }

  body #sidebar {
    top: 72px !important;
    padding: 18px !important;
  }
}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 768px) {
  body #contentArea.container-fluid {
    padding: 28px 0 0px !important;
  }

  body #contentArea > .row-fluid {
    width: min(100% - 28px, 1240px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  body #sidebar {
    position: relative !important;
    top: auto !important;
    order: 1 !important;
    width: 100% !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }

  body #main-content {
    order: 2 !important;
    width: 100% !important;
  }

  body #main-content .contentWrapper {
    min-height: auto !important;
    padding: 30px 20px 32px !important;
    border-radius: 20px !important;
  }

  body #categoryHead {
    margin-bottom: 22px !important;
    padding-bottom: 22px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body #categoryHead h1 {
    font-size: 34px !important;
    line-height: 1 !important;
  }

  body #categoryHead .descrip {
    margin: 0 !important;
    font-size: 14px !important;
  }

  body #categoryHead .sort {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    margin-top: 6px !important;
  }

  body #categoryHead #sortBy {
    width: 100% !important;
    max-width: 220px !important;
  }

  body ul.articleList {
    gap: 10px !important;
  }

  body ul.articleList li a {
    min-height: 60px !important;
    padding: 14px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body ul.articleList li a::after {
    display: none !important;
  }

  body ul.articleList li a i,
  body ul.articleList li a .icon-article-doc {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  body ul.articleList li a span {
    font-size: 14px !important;
  }
}


/* ==================================================
   SORT DROPDOWN CUSTOM ARROW FIX
   ================================================== */

body #categoryHead .sort {
  position: relative !important;
}

body #categoryHead .sort::after {
  content: "" !important;

  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;

  width: 5px !important;
  height: 5px !important;

  border-right: 2px solid #212121 !important;
  border-bottom: 2px solid #212121 !important;

  pointer-events: none !important;
  opacity: 0.75 !important;
}

body #categoryHead #sortBy {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding-right: 38px !important;
  background-image: none !important;
  cursor: pointer !important;
}


/* ==================================================
   SIDEBAR SEARCH DROPDOWN FIX
   Help Scout autocomplete results visible
   ================================================== */

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

body #sidebar #searchBar,
body #sidebar form#searchBar.sm {
  overflow: visible !important;
  position: relative !important;
  z-index: 50 !important;
}

/* Search input wrapper remains pill */
body #sidebar #searchBar input.search-query {
  position: relative !important;
  z-index: 2 !important;
}

/* Search button stays on top */
body #sidebar #searchBar button {
  z-index: 3 !important;
}

/* Autocomplete dropdown */
body #sidebar #searchBar #serp-dd,
body #sidebar #serp-dd.sb {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  display: block;
  z-index: 9999 !important;

  background: #ffffff !important;
  border: 1px solid rgba(33, 33, 33, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 48px rgba(33, 33, 33, 0.16) !important;

  padding: 8px !important;
}

/* Keep hidden when Help Scout sets inline display:none */
body #sidebar #searchBar #serp-dd[style*="display: none"] {
  display: none !important;
}

/* Result list reset */
body #sidebar #serp-dd ul.result {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  max-height: none !important;
  overflow: visible !important;
}

/* Result items */
body #sidebar #serp-dd ul.result li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Result links */
body #sidebar #serp-dd ul.result li a {
  display: block !important;
  padding: 10px 12px !important;

  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  border-radius: 10px !important;
  background: transparent !important;
}

body #sidebar #serp-dd ul.result li a:hover {
  background: rgba(214, 186, 181, 0.22) !important;
}

/* Search dropdown text safety */
body #sidebar #serp-dd,
body #sidebar #serp-dd * {
  visibility: visible !important;
  opacity: 1 !important;
}



/* ==================================================
   HOMEPAGE HERO SEARCH DROPDOWN FIX
   Help Scout autocomplete results visible
   ================================================== */

body #docsSearch {
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

body #docsSearch #searchBar {
  overflow: visible !important;
  position: relative !important;
  z-index: 50 !important;
}

/* Keep input and icon above pill */
body #docsSearch #searchBar input.search-query,
body #docsSearch #searchBar .search-query {
  position: relative !important;
  z-index: 2 !important;
}

body #docsSearch #searchBar::before {
  z-index: 3 !important;
}

/* Autocomplete dropdown */
body #docsSearch #searchBar #serp-dd,
body #docsSearch #serp-dd.sb {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  max-height: 360px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  z-index: 99999 !important;

  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(33, 33, 33, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 54px rgba(33, 33, 33, 0.18) !important;

  padding: 8px !important;
  text-align: left !important;
}

/* Respect Help Scout hidden state */
body #docsSearch #searchBar #serp-dd[style*="display: none"],
body #docsSearch #serp-dd.sb[style*="display: none"] {
  display: none !important;
}

/* Results list reset */
body #docsSearch #serp-dd ul.result {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  max-height: none !important;
  overflow: visible !important;
}

body #docsSearch #serp-dd ul.result li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Result links */
body #docsSearch #serp-dd ul.result li a {
  display: block !important;
  padding: 11px 13px !important;

  color: #212121 !important;
  font-family: "Hanken Grotesk", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  border-radius: 11px !important;
  background: transparent !important;
}

body #docsSearch #serp-dd ul.result li a:hover {
  background: rgba(214, 186, 181, 0.24) !important;
}

/* Text visibility safety */
body #docsSearch #serp-dd,
body #docsSearch #serp-dd * {
  visibility: visible !important;
  opacity: 1 !important;
}