/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* ==========================================================================
   S-5! KNOWLEDGE CENTER — BRAND OVERRIDE STYLESHEET
   
   FONTS: Arial per S-5! Corporate Style Guide (06.24.24)
   ========================================================================== */
   Transforms the stock HubSpot Knowledge Base to match s-5.com design language
   
   VERSION: 1.7
   LAST UPDATED: 2026-02-21
   
   KEY v1.7 CHANGES:
   - Search button icon: span background forced transparent (was dark, hiding gold)
   - SVG icon sized to 16px with white fill for clear magnifying glass on gold
   
   PREVIOUS FIXES (v1.6):
   - Header left/right padding (24px) on wrapper rows
   - Search button repositioned inside input (top: 57px, form relative)
   
   PREVIOUS FIXES (v1.5):
   - Logo replacement in header and footer via CSS content property
   - Logo URL stored in --s5-logo-url custom property for easy updates
   
   PREVIOUS FIXES (v1.4):
   - Header uses background SHORTHAND to override HubSpot theme's white bg
   - Header padding drastically reduced for compact appearance
   - Search hero is flat #1a1a1a (no gradient) for seamless header integration
   - Footer empty wrapper collapsed, tighter spacing overall
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  --s5-gold:            #FDC82F;
  --s5-gold-hover:      #E8B520;
  --s5-gold-dark:       #C29F3D;
  --s5-gold-light:      #FCD34D;
  --s5-black:           #1a1a1a;
  --s5-charcoal:        #2b2b2b;
  --s5-dark-gray:       #333333;
  --s5-white:           #ffffff;
  --s5-off-white:       #f8f8f6;
  --s5-light-gray:      #f0f0ec;
  --s5-mid-gray:        #888888;
  --s5-border-gray:     #e0e0dc;
  --s5-font-body:       'PT Sans', Arial, Helvetica, sans-serif;
  --s5-font-heading:    'PT Sans', Arial, Helvetica, sans-serif;
  --s5-section-padding: 48px;
  --s5-card-padding:    28px;
  --s5-container-max:   1200px;
  --s5-transition:      all 0.25s ease;

  /* Logo — change this URL to swap logos site-wide */
  --s5-logo-url:        url('https://www.s-5.com/wp-content/uploads/2020/04/E27FDA9C-8B1A-456C-AD8A-43AB83459AB6.png');
}

/* --------------------------------------------------------------------------
   GLOBAL / BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--s5-font-body) !important;
  color: var(--s5-dark-gray) !important;
  background-color: var(--s5-off-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, p, li, td, th, span, div, label, input, textarea, select, button {
  font-family: var(--s5-font-body) !important;
}
h1, h2, h3 {
  font-family: var(--s5-font-heading) !important;
  color: var(--s5-dark-gray) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
h4, h5, h6 {
  font-family: var(--s5-font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--s5-dark-gray) !important;
}
a {
  color: var(--s5-gold-dark) !important;
  text-decoration: none !important;
  transition: var(--s5-transition) !important;
}
a:hover { color: var(--s5-gold-hover) !important; }


/* --------------------------------------------------------------------------
   HEADER — one seamless dark bar, compact
   
   CRITICAL: HubSpot theme sets .header__top and .header__bottom to white
   via the `background` shorthand. We MUST override with `background`
   (not just background-color) to win specificity.
   -------------------------------------------------------------------------- */

/* Blanket rule: force dark on the header and every descendant */
.header {
  background: var(--s5-black) !important;
  border: none !important;
  border-bottom: 3px solid var(--s5-gold) !important;
  box-shadow: none !important;
}

/* Explicit override on the two main sections — uses background shorthand */
.header__top {
  background: var(--s5-black) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 0 !important;
}
.header__bottom {
  background: var(--s5-black) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
}

/* All other header descendants */
.header__wrapper--top,
.header__wrapper--bottom {
  background: var(--s5-black) !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.header__container,
.header__container--left,
.header__container--right,
.header__row,
.header .hs_cos_wrapper,
.header > .hs_cos_wrapper,
.header nav,
.header ul,
.header li {
  background: var(--s5-black) !important;
  border: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   LOGO REPLACEMENT — Header
   Uses CSS content property to swap the <img> source without JS.
   Supported in Chrome 1+, Firefox 1+, Safari 1+, Edge 12+.
   -------------------------------------------------------------------------- */
.header__logo-image {
  content: var(--s5-logo-url) !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Utility row (English, Contact Support, Customer Portal, Sign In) */
.header__top a,
.header__top .header__language-switcher-current-label {
  color: rgba(255,255,255,0.6) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
.header__top a:hover { color: var(--s5-gold) !important; }

/* Logo container — compact */
.header__logo {
  padding: 0 !important;
  margin: 0 !important;
}

/* Nav links — transparent bg so hover works */
.header__menu-link,
.header__nav-link {
  color: var(--s5-white) !important;
  background: transparent !important;
  font-family: var(--s5-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
  transition: var(--s5-transition) !important;
}
.header__menu-link:hover,
.header__nav-link:hover { color: var(--s5-gold) !important; }

/* Hide "Default HubSpot Blog" in header */
.header__menu-item--depth-1 .header__menu-link[href="/blog"] {
  font-size: 0 !important; visibility: hidden !important;
  width: 0 !important; padding: 0 !important; margin: 0 !important;
  overflow: hidden !important;
}

/* "Return to S-5.com" — solid gold CTA */
.header__button, a.header__button {
  background: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 6px 16px !important;
  font-family: var(--s5-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: var(--s5-transition) !important;
  text-decoration: none !important;
}
.header__button:hover, a.header__button:hover {
  background: var(--s5-gold-hover) !important;
  box-shadow: 0 2px 8px rgba(253,200,47,0.35) !important;
}

/* CTA-style nav items */
.header__menu-item--button .header__menu-link {
  background: var(--s5-gold) !important;
  color: var(--s5-black) !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
}
.header__menu-item--button .header__menu-link:hover {
  background: var(--s5-gold-hover) !important;
  color: var(--s5-black) !important;
}

/* Language icon */
.header__language-switcher-icon svg,
.header__language-switcher-icon path { fill: rgba(255,255,255,0.6) !important; }

/* Mobile menu */
.header__menu-toggle svg,
.header__menu-toggle path { fill: var(--s5-white) !important; }
.header__menu-container--mobile {
  background: var(--s5-black) !important;
  border: none !important;
  border-top: 2px solid var(--s5-gold) !important;
}
.header__menu--mobile .header__menu-link {
  color: var(--s5-white) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}


/* --------------------------------------------------------------------------
   HERO / SEARCH
   
   FLAT background — matches header nav exactly for seamless dark block.
   No gradient, no decorative gold bar at top.
   -------------------------------------------------------------------------- */
.hs-kb-search-input-wrapper {
  background: var(--s5-black) !important;
  background-image: none !important;
  padding: 50px 24px 40px !important;
  position: relative !important;
  text-align: center !important;
  border: none !important;
}
/* Remove the decorative gold bar between nav and search */
.hs-kb-search-input-wrapper::before {
  display: none !important;
}
.hs-search-field__label {
  color: var(--s5-white) !important;
  font-family: var(--s5-font-heading) !important;
  font-size: 26px !important; font-weight: 400 !important;
  line-height: 1.3 !important; letter-spacing: -0.01em !important;
  margin-bottom: 18px !important; display: block !important;
}
.hs-search-field__bar {
  max-width: 600px !important; margin: 0 auto !important; position: relative !important;
}
.hs-search-field__form {
  position: relative !important;
}
.hs-search-field__input {
  background: rgba(255,255,255,0.95) !important;
  border: 2px solid transparent !important; border-radius: 6px !important;
  padding: 12px 48px 12px 16px !important; font-size: 14px !important;
  font-family: var(--s5-font-body) !important; color: var(--s5-dark-gray) !important;
  width: 100% !important; box-sizing: border-box !important;
  transition: var(--s5-transition) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.hs-search-field__input::placeholder { color: var(--s5-mid-gray) !important; font-style: italic !important; }
.hs-search-field__input:focus {
  outline: none !important; border-color: var(--s5-gold) !important;
  box-shadow: 0 0 0 3px rgba(253,200,47,0.25), 0 4px 20px rgba(0,0,0,0.3) !important;
}
.hs-search-field__button {
  position: absolute !important; right: 5px !important; top: 57px !important;
  bottom: auto !important; transform: none !important;
  background: var(--s5-gold) !important; border: none !important; border-radius: 4px !important;
  width: 34px !important; height: 34px !important;
  cursor: pointer !important; transition: var(--s5-transition) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.hs-search-field__button:hover { background: var(--s5-gold-hover) !important; }

/* Search icon: span wrapper must be transparent to show gold button */
.hs-search-field__button span,
.hs-search-field__button .hs_cos_wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
}
.hs-search-field__button svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
}
.hs-search-field__button svg,
.hs-search-field__button svg g,
.hs-search-field__button svg path {
  fill: var(--s5-black) !important;
}

/* Search suggestions */
.hs-search-field__suggestions-container {
  background: var(--s5-white) !important;
  border: 1px solid var(--s5-border-gray) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
}
.hs-search-field__suggestions li {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--s5-border-gray) !important;
  font-size: 14px !important;
}
.hs-search-field__suggestions li:hover,
.hs-search-field__suggestions li:focus { background: rgba(253,200,47,0.08) !important; }
.hs-search-field__suggestions li a { color: var(--s5-dark-gray) !important; }
.hs-search-field__suggestions li a:hover { color: var(--s5-gold-dark) !important; }


/* --------------------------------------------------------------------------
   CATEGORY CARDS
   -------------------------------------------------------------------------- */
.hs-kb-home-list--tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: var(--s5-section-padding) 24px !important;
  max-width: var(--s5-container-max) !important;
  margin: 0 auto !important;
  background: var(--s5-off-white) !important;
}
@media (max-width: 992px) { .hs-kb-home-list--tiles { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .hs-kb-home-list--tiles { grid-template-columns: 1fr !important; } }

.hs-kb-home-list__category {
  background: var(--s5-white) !important; border-radius: 6px !important;
  border-left: 4px solid var(--s5-gold) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: var(--s5-transition) !important;
  overflow: hidden !important; position: relative !important;
}
.hs-kb-home-list__category:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px) !important;
  border-left-color: var(--s5-gold-hover) !important;
}
.hs-kb-home-list__category-link {
  display: flex !important; flex-direction: column !important;
  padding: var(--s5-card-padding) !important;
  text-decoration: none !important; height: 100% !important;
}
.hs-kb-home-list__icon, .hs-kb-home-list__image {
  margin-bottom: 14px !important; display: flex !important;
  align-items: center !important; justify-content: flex-start !important;
}
.hs-kb-home-list__icon svg, .hs-kb-home-list__image img {
  width: 44px !important; height: 44px !important;
  object-fit: contain !important; opacity: 0.75 !important;
  transition: var(--s5-transition) !important;
}
.hs-kb-home-list__category:hover .hs-kb-home-list__icon svg,
.hs-kb-home-list__category:hover .hs-kb-home-list__image img {
  opacity: 1 !important;
  filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(0.95) !important;
}
.hs-kb-home-list__text__category-title {
  font-family: var(--s5-font-heading) !important;
  font-size: 18px !important; font-weight: 600 !important;
  color: var(--s5-dark-gray) !important;
  margin-bottom: 8px !important; line-height: 1.3 !important;
  text-align: left !important;
}
.hs-kb-home-list__text__category-description {
  font-family: var(--s5-font-body) !important;
  font-size: 13px !important; line-height: 1.6 !important;
  color: var(--s5-mid-gray) !important; text-align: left !important;
}
.hs-kb-home-list--tiles .hs-kb-home-list__text { text-align: left !important; }


/* --------------------------------------------------------------------------
   ARTICLE LISTING PAGE
   -------------------------------------------------------------------------- */
.hs-kb-article-list__item {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--s5-border-gray) !important;
}
.hs-kb-article-list__item a {
  color: var(--s5-dark-gray) !important; font-weight: 400 !important;
  font-size: 15px !important; transition: var(--s5-transition) !important;
  display: inline-block !important; padding: 4px 0 !important;
}
.hs-kb-article-list__item a:hover {
  color: var(--s5-gold-dark) !important; padding-left: 8px !important;
}
.hs-breadcrumb, [class*="breadcrumb"] {
  font-size: 12px !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important; color: var(--s5-mid-gray) !important;
  padding: 16px 0 !important;
}
.hs-breadcrumb a, [class*="breadcrumb"] a { color: var(--s5-mid-gray) !important; }
.hs-breadcrumb a:hover, [class*="breadcrumb"] a:hover { color: var(--s5-gold-dark) !important; }


/* --------------------------------------------------------------------------
   ARTICLE DETAIL PAGE
   -------------------------------------------------------------------------- */
.hs-kb-article-body, .hs-kb-article {
  max-width: 800px !important; margin: 0 auto !important;
  padding: 36px 24px 48px !important;
  line-height: 1.75 !important; font-size: 16px !important;
  color: var(--s5-dark-gray) !important;
}
.hs-kb-article-body h1, .hs-kb-article h1 {
  font-family: var(--s5-font-heading) !important;
  font-size: 32px !important; font-weight: 600 !important;
  margin-bottom: 20px !important; padding-bottom: 14px !important;
  border-bottom: 3px solid var(--s5-gold) !important;
}
.hs-kb-article-body h2, .hs-kb-article h2 {
  font-family: var(--s5-font-heading) !important;
  font-size: 24px !important; font-weight: 600 !important;
  margin-top: 36px !important; margin-bottom: 14px !important;
}
.hs-kb-article-body h3, .hs-kb-article h3 {
  font-family: var(--s5-font-heading) !important;
  font-size: 19px !important; font-weight: 600 !important;
  margin-top: 28px !important; margin-bottom: 10px !important;
}
.hs-kb-article-body img, .hs-kb-article img {
  max-width: 100% !important; height: auto !important;
  border-radius: 6px !important; margin: 20px 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
}
.hs-kb-article-body code, .hs-kb-article code {
  background: var(--s5-light-gray) !important;
  padding: 2px 6px !important; border-radius: 3px !important; font-size: 0.9em !important;
}
.hs-kb-article-body table, .hs-kb-article table {
  width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important;
}
.hs-kb-article-body th, .hs-kb-article th {
  background: var(--s5-black) !important; color: var(--s5-white) !important;
  font-weight: 600 !important; text-align: left !important;
  padding: 10px 14px !important; font-size: 13px !important;
  text-transform: uppercase !important; letter-spacing: 0.04em !important;
}
.hs-kb-article-body td, .hs-kb-article td {
  padding: 10px 14px !important; border-bottom: 1px solid var(--s5-border-gray) !important;
  font-size: 14px !important;
}
.hs-kb-article-body tr:hover td, .hs-kb-article tr:hover td {
  background: rgba(253,200,47,0.04) !important;
}
.hs-kb-article-body blockquote, .hs-kb-article blockquote {
  border-left: 4px solid var(--s5-gold) !important;
  background: var(--s5-light-gray) !important;
  padding: 16px 20px !important; margin: 20px 0 !important;
  border-radius: 0 6px 6px 0 !important;
  font-style: normal !important; color: var(--s5-dark-gray) !important;
}
.hs-kb-article-rating, [class*="article-rating"], [class*="article-feedback"] {
  margin-top: 40px !important; padding-top: 24px !important;
  border-top: 1px solid var(--s5-border-gray) !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR / TOC
   -------------------------------------------------------------------------- */
.hs-kb-sidebar, [class*="kb-sidebar"] {
  background: var(--s5-white) !important;
  border: 1px solid var(--s5-border-gray) !important;
  border-radius: 6px !important; padding: 20px !important;
}
.hs-kb-sidebar h3, .hs-kb-sidebar h4,
[class*="kb-sidebar"] h3, [class*="kb-sidebar"] h4 {
  font-family: var(--s5-font-body) !important;
  font-size: 11px !important; text-transform: uppercase !important;
  letter-spacing: 0.1em !important; color: var(--s5-mid-gray) !important;
  margin-bottom: 14px !important; padding-bottom: 10px !important;
  border-bottom: 2px solid var(--s5-gold) !important;
}


/* --------------------------------------------------------------------------
   FOOTER — compact, legible, logo replaced, empty wrapper collapsed
   -------------------------------------------------------------------------- */
.footer, footer {
  background: var(--s5-black) !important;
  color: rgba(255,255,255,0.9) !important;
  border: none !important;
  border-top: 3px solid var(--s5-gold) !important;
  padding: 16px 24px 12px !important;
}
/* Kill all child borders */
.footer *, footer * { border: none !important; }

/* Collapse the empty nav/menu wrapper HubSpot leaves behind */
.footer > .hs_cos_wrapper,
.footer > .hs_cos_wrapper > nav {
  height: 0 !important; min-height: 0 !important; max-height: 0 !important;
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
}

/* LOGO REPLACEMENT — Footer */
.footer img.hs-image-widget,
footer img.hs-image-widget {
  content: var(--s5-logo-url) !important;
  max-height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* All footer text — bright and readable */
.footer, .footer p, .footer span, .footer div,
footer, footer p, footer span, footer div {
  color: rgba(255,255,255,0.9) !important;
}

/* Footer links */
.footer a, .footer__menu-link, footer a {
  color: var(--s5-white) !important; font-size: 13px !important;
  transition: var(--s5-transition) !important;
}
.footer a:hover, .footer__menu-link:hover, footer a:hover { color: var(--s5-gold) !important; }

/* Hide "Default HubSpot Blog" in footer */
.footer__menu-link[href="/blog"],
.footer__menu-item .footer__menu-link[href="/blog"] { display: none !important; }

.footer__menu {
  display: flex !important; gap: 20px !important; flex-wrap: wrap !important;
  justify-content: center !important; margin-bottom: 12px !important;
}
.footer .hs-image-widget img, footer img {
  max-height: 24px !important; opacity: 0.9 !important; margin-bottom: 4px !important;
}

/* Social icons — compact */
.hs-kb-social_follow {
  display: flex !important; gap: 8px !important;
  justify-content: center !important; margin: 8px 0 !important;
}
.hs-kb-social_follow__link {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important; transition: var(--s5-transition) !important;
}
.hs-kb-social_follow__link:hover { background: var(--s5-gold) !important; }
.hs-kb-social_follow__icon svg, .hs-kb-social_follow__icon path {
  fill: rgba(255,255,255,0.9) !important; width: 14px !important; height: 14px !important;
}
.hs-kb-social_follow__link:hover svg,
.hs-kb-social_follow__link:hover path { fill: var(--s5-black) !important; }

/* Copyright row — minimal */
.footer__bottom {
  padding: 8px 0 0 !important; margin-top: 4px !important;
}
.footer__bottom, .footer__bottom--left, .footer__bottom--right {
  color: rgba(255,255,255,0.6) !important; font-size: 11px !important;
  min-height: 0 !important; padding: 0 !important;
}
.footer__bottom a { color: rgba(255,255,255,0.6) !important; }
.footer__bottom a:hover { color: var(--s5-gold) !important; }


/* --------------------------------------------------------------------------
   SEARCH RESULTS
   -------------------------------------------------------------------------- */
.hs-search-results__title {
  font-family: var(--s5-font-heading) !important;
  font-size: 18px !important; color: var(--s5-dark-gray) !important; font-weight: 500 !important;
}
.hs-search-results__title:hover { color: var(--s5-gold-dark) !important; }
.hs-search-results__description {
  color: var(--s5-mid-gray) !important; font-size: 13px !important; line-height: 1.6 !important;
}
.hs-search-results__description strong,
.hs-search-results__description b,
.hs-search-highlight {
  color: var(--s5-dark-gray) !important;
  background: rgba(253,200,47,0.2) !important;
  font-weight: 600 !important; padding: 1px 3px !important; border-radius: 2px !important;
}
.hs-pagination a, [class*="pagination"] a {
  color: var(--s5-dark-gray) !important; padding: 6px 12px !important;
  border-radius: 4px !important; transition: var(--s5-transition) !important;
}
.hs-pagination a:hover, [class*="pagination"] a:hover {
  background: var(--s5-gold) !important; color: var(--s5-black) !important;
}
.hs-pagination .active a, [class*="pagination"] .active a {
  background: var(--s5-gold) !important; color: var(--s5-black) !important; font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
button[type="submit"], input[type="submit"], .hs-button, .button, .btn-primary {
  background: var(--s5-gold) !important; color: var(--s5-black) !important;
  border: none !important; border-radius: 4px !important;
  padding: 10px 22px !important; font-family: var(--s5-font-body) !important;
  font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important;
  cursor: pointer !important; transition: var(--s5-transition) !important;
}
button[type="submit"]:hover, input[type="submit"]:hover,
.hs-button:hover, .button:hover, .btn-primary:hover {
  background: var(--s5-gold-hover) !important;
  box-shadow: 0 4px 12px rgba(253,200,47,0.3) !important;
}
.btn-secondary, .button--secondary {
  background: transparent !important; color: var(--s5-gold) !important;
  border: 2px solid var(--s5-gold) !important;
}
.btn-secondary:hover, .button--secondary:hover {
  background: var(--s5-gold) !important; color: var(--s5-black) !important;
}


/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.hs-form input[type="text"], .hs-form input[type="email"],
.hs-form input[type="tel"], .hs-form input[type="url"],
.hs-form textarea, .hs-form select {
  border: 1px solid var(--s5-border-gray) !important; border-radius: 4px !important;
  padding: 11px 14px !important; font-family: var(--s5-font-body) !important;
  font-size: 14px !important; transition: var(--s5-transition) !important;
  background: var(--s5-white) !important;
}
.hs-form input:focus, .hs-form textarea:focus, .hs-form select:focus {
  outline: none !important; border-color: var(--s5-gold) !important;
  box-shadow: 0 0 0 3px rgba(253,200,47,0.15) !important;
}
.hs-form label {
  font-weight: 500 !important; color: var(--s5-dark-gray) !important;
  margin-bottom: 4px !important; font-size: 13px !important;
}


/* --------------------------------------------------------------------------
   SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--s5-off-white); }
::-webkit-scrollbar-thumb { background: var(--s5-border-gray); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--s5-gold-dark); }


/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .hs-kb-search-input-wrapper { display: none !important; }
  body { background: white !important; color: black !important; }
  .hs-kb-article-body h1 { border-bottom-color: #333 !important; }
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.s5-gold-accent { border-left: 4px solid var(--s5-gold) !important; padding-left: 16px !important; }
.s5-dark-bg { background: var(--s5-black) !important; color: var(--s5-white) !important; }
.s5-caps-label { text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 11px !important; font-weight: 500 !important; color: var(--s5-mid-gray) !important; }
.s5-arial { font-family: var(--s5-font-body) !important; }