/* Bob Shop Help Center - paste this into Zoho's CSS tab.

   GENERATED FILE. Do not edit here; edit build/bobshop-helpcenter.css and run
   python3 tools/build-css.py

   Comments are stripped because Zoho's CSS field caps at 65535 bytes. The
   commented source explains every rule and lives in the repo. */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {

  --brand-indigo:      #1e055b;
  --brand-indigo-70:   #61508c;
  --brand-indigo-40:   #a59bbd;
  --brand-indigo-20:   #d2cdde;

  --brand-pink:        #d8328d;
  --brand-pink-70:     #e46faf;
  --brand-pink-40:     #efadd1;
  --brand-pink-20:     #f7d6e8;

  --brand-grey:        #3b3b3b;
  --brand-grey-70:     #767676;
  --brand-grey-40:     #b1b1b1;
  --brand-grey-20:     #d8d8d8;

  --brand-accent:        #ff7212;
  --brand-accent-70:     #ff9c59;
  --brand-accent-40:     #ffc7a0;
  --brand-accent-20:     #ffe3d0;

  --brand-white: #ffffff;

  --ui-accent: var(--brand-accent);
  --ui-accent-hover: var(--brand-indigo);
  --ui-shadow-soft: rgba(30, 5, 91, 0.06);
  --ui-shadow-card: rgba(30, 5, 91, 0.10);

  --ui-radius-pill: 1600px;
  --ui-radius-container: 40px;

  --ui-font: "Onest", Arial, sans-serif;

  --ui-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ui-transition-med: 0.25s ease;
}

body {
  color: var(--brand-grey) !important;
}

#headerContainer.Header__header .Header__bgColor {
  background-color: var(--brand-white) !important;
  opacity: 1 !important;
}

.bg-hero-search {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1100px;

  margin: 16px auto 8px;
  padding: 0 24px;
  position: relative;
  box-sizing: border-box;
}

.bg-hero-search #searchBtnContainer,
.bg-hero-search #searchContainer,
.bg-hero-search .SearchCon__searchCon,
.bg-hero-search #searchContainer1,
.bg-hero-search .SearchBox__searchpart,
.bg-hero-search .SearchBox__searchTextbox,
.bg-hero-search .Header__searchBox,
.bg-hero-search .Header__searchalt,
.bg-hero-search .Header__searchLink,
.bg-hero-search #autoSearchContainer {
  position: static !important;
  top: auto !important;
}

.bg-search-fake-placeholder {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--ui-font);
  font-size: 16px;
  color: var(--brand-grey-70);
  padding-left: 24px;

  width: calc(100% - 48px);
  max-width: 900px;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-hero-search:has(#autoSearchContainer:placeholder-shown) .bg-search-fake-placeholder {
  display: block;
}

.bg-hero-search:has(#autoSearchContainer:placeholder-shown) .bg-search-ph-short {
  display: none;
}

@media (max-width: 600px) {
  .bg-hero-search:has(#autoSearchContainer:placeholder-shown) .bg-search-ph-long {
    display: none;
  }
  .bg-hero-search:has(#autoSearchContainer:placeholder-shown) .bg-search-ph-short {
    display: block;
  }
}

.bg-hero-search #searchBtnContainer,
.bg-hero-search #searchContainer,
.bg-hero-search .SearchCon__searchCon,
.bg-hero-search #searchContainer1,
.bg-hero-search .SearchBox__searchpart,
.bg-hero-search .SearchBox__searchTextbox,
.bg-hero-search .Header__searchBox,
.bg-hero-search .Header__searchalt,
.bg-hero-search .Header__searchLink {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 900px !important;
}
#autoSearchContainer {
  font-family: var(--ui-font) !important;
  font-size: 16px !important;
  color: var(--brand-indigo) !important;
  background-color: var(--brand-white) !important;
  border: 1px solid var(--brand-grey-20) !important;
  border-radius: var(--ui-radius-pill) !important;
  padding: 14px 24px !important;
  width: 100% !important;
  max-width: 900px !important;
}
#autoSearchContainer:focus {
  border-color: var(--brand-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--brand-accent-20) !important;
}
#autoSearchContainer::placeholder {
  color: transparent !important;
}

.Header__panelbtns {
  display: none !important;
}

.bg-breadcrumb-wrap {
  width: 100%;

  max-width: 1170px;
  margin: 0 auto;
  padding: 32px 15px 0;
  box-sizing: border-box;
}
.BreadCrumbs__breadcrumbsView {
  display: block;
}
.BreadCrumbs__breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.BreadCrumbs__breadCrumbText {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--brand-grey-70);
}
.BreadCrumbs__breadCrumbText:not(:last-child)::after {
  content: '/';
  color: var(--brand-grey-40);
  margin-left: 6px;
}
.BreadCrumbs__breadCrumbsLink {
  color: var(--brand-grey-70) !important;
  font-family: var(--ui-font) !important;
  text-decoration: none !important;
  display: inline-block;
  padding: 4px 0;
}
.BreadCrumbs__breadCrumbsLink:hover {
  color: var(--brand-accent) !important;
}

.BreadCrumbs__breadCrumbText span[aria-current="page"] {
  color: var(--brand-indigo);
  font-weight: 600;
}
.BreadCrumbs__clear {
  clear: both;
}

.TitleContainer__container {
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  border: none !important;
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.TitleContainer__container:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}

.TitleContainer__listView {
  display: flex !important;
  background-color: var(--brand-white) !important;
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  margin-bottom: 0 !important;
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.TitleContainer__listView:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}
.TitleContainer__listView:last-child {
  margin-bottom: 0 !important;
}

.ModuleCategoryContainer__containerListView {
  border: none !important;
  box-shadow: none !important;
}

.KBSubCategoryContainer__boxView {
  border: none !important;
  box-shadow: none !important;
}

.ModuleItem__moduleHeader {
  background-color: var(--brand-white) !important;
  border-radius: var(--ui-radius-container) !important;
  box-shadow: 0 4px 24px var(--ui-shadow-soft) !important;
  padding: 32px !important;
  margin-bottom: 20px !important;
  align-items: center !important;
  transition: box-shadow var(--ui-transition-med), transform var(--ui-transition-med) !important;
}
.ModuleItem__moduleHeader:hover {
  box-shadow: 0 8px 32px var(--ui-shadow-card) !important;
  transform: translateY(-2px);
}
.ModuleItem__moduleHeader:last-child {
  margin-bottom: 0 !important;
}
.ModuleItem__titleIcon {
  background-color: var(--brand-accent) !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  align-items: center !important;
  justify-content: center !important;
}
.ModuleItem__titleIcon .Icon__icon {
  fill: var(--brand-white) !important;
  color: var(--brand-white) !important;
}
.ModuleItem__moduleDescription {
  color: var(--brand-grey) !important;
  font-family: var(--ui-font) !important;
  margin-top: 4px !important;
}
.ModuleItem__moduleDescription.emptydescription {
  display: none !important;
}
.ModuleItem__moduleCount {
  color: var(--brand-grey-70) !important;
  font-family: var(--ui-font) !important;
  font-size: 14px !important;
}

.Link__link {
  color: var(--brand-accent) !important;
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
}
.Link__link:hover {
  color: var(--brand-indigo) !important;
}

.ArticlesContainer__title {
  font-family: var(--ui-font) !important;
  color: var(--brand-indigo) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 24px !important;
}
.ArticlesContainer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-accent);
}
.ArticlesContainer__articleListWidget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none !important;
  box-shadow: none !important;

  background: transparent !important;
  border-radius: 0 !important;
}

.ArticlesContainer__articleListWidget .ModuleItem__moduleListItem:nth-child(n + 7) {
  display: none;
}

.WidgetsContainer__lftWd {
  border: none !important;
  box-shadow: none !important;
}

.search__searchPanel {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search__searchPanel .ModuleItem__moduleListItem {
  padding: 18px 28px !important;
  border-radius: 24px !important;
  margin: 0 !important;
}
.search__searchPanel .ModuleItem__artList a.Link__link {
  padding: 0 !important;
}

.ArticleListContainer__boxView {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ModuleItem__moduleListItem {
  background-color: var(--brand-white);
  border-radius: var(--ui-radius-pill);
  box-shadow: 0 2px 12px var(--ui-shadow-soft);

  padding: 0;
  transition: box-shadow var(--ui-transition-med),
              transform var(--ui-transition-fast);
}

.ModuleItem__moduleListItem .ModuleItem__modulein,
.ModuleItem__moduleListItem .ModuleItem__artList {
  display: block;
  width: 100%;
}

.ModuleItem__moduleListItem:hover {
  box-shadow: 0 8px 24px var(--ui-shadow-card);
  transform: translateY(-2px);
}
.ModuleItem__artList a.Link__link {
  color: var(--brand-indigo) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  display: block;
  padding: 16px 28px;
  transition: color var(--ui-transition-fast);
}
.ModuleItem__artList a.Link__link:hover {
  color: var(--brand-accent) !important;
}

.ArticleDetailLeftContainer__kbTitle {
  font-family: var(--ui-font) !important;
  color: var(--brand-indigo) !important;
  font-weight: 500 !important;
}

.ArticleDetail_description p,
.ArticleDetail_description li,
.ArticleDetail_description span,
.ArticleDetail_description div,
.ArticleDetail_description td,
.ArticleDetail_description th {
  white-space: pre-wrap;
}

.ArticleDetail_description pre,
.ArticleDetail_description code {
  white-space: pre;
}

.ArticleDetailLeftContainer__box {
  border: none !important;
  box-shadow: none !important;
}

.ArticleCmd__articleLike {
  display: none !important;
}

.ArticleDetailRightContainer__wrapper {
  display: none !important;
}

.portalContainer.articleDetail .Layout__layout1 {
  width: 100% !important;
  max-width: 100% !important;
}

.ArticleDetailLeftContainer__wrapper,
.ArticleDetailLeftContainer__wrapper.commonStyle__positionRel {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

.ArticleDetailLeftContainer__IconExPrint {
  display: none !important;
}

.Layout__collapsefullWidth {
  width: 80vw !important;
  max-width: 80vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.Readingprogress__progressContainer {
  display: none !important;
}

.Button__tagPrimary {
  display: none !important;
}

.SubscribeDepart__followContent {
  display: none !important;
}

.Button__neutral.Button__basic.commonStyle__inlineBlock.commonStyle__cursor.commonStyle__overflowDotted.Button__btnlarge {
  background-color: var(--brand-white) !important;
  color: var(--brand-accent) !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--ui-radius-pill) !important;
}
.Button__neutral.Button__basic.commonStyle__inlineBlock.commonStyle__cursor.commonStyle__overflowDotted.Button__btnlarge:hover {
  background-color: var(--brand-accent-20) !important;
}

#container {
  overflow-x: clip;
}
.ArticleDetailLeftContainer__box {
  overflow-x: auto;
}

.Footer__footer {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  border: none !important;
}

::selection { background: var(--brand-accent-20); color: var(--brand-indigo); }

.bg-header * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.bg-subnav-wrapper {
  background-color: #14043b;

  padding: 10px 24px 0;
  margin: 0;
}
.bg-subnav {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.bg-subnav a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 0 4px 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease;
}
.bg-subnav a:hover { color: rgba(255, 255, 255, 0.9); }
.bg-subnav a.is-current {
  color: #ffffff;
  border-bottom-color: var(--brand-accent);
}
.bg-subnav img { height: 16px; width: auto; display: block; }

.bg-navbar {

  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: max-content;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 48px;
  row-gap: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  border: none;
  border-radius: 800px;

  padding: 12px 20px;
}
.bg-navbar-inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.bg-logo img {
  height: 50px;
  width: auto;
  display: block;
  transform: translateY(-7px);
}

.bg-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;

}
.bg-nav-links > a {
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background-color var(--ui-transition-fast),
              color var(--ui-transition-fast);
}

.bg-nav-links > a:hover {
  background-color: var(--brand-indigo-20);
  color: var(--brand-indigo);
}

.bg-dropdown { position: relative; }

.bg-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-white);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: var(--brand-accent);
  border: none;
  font-family: inherit;
  padding: 10px 20px;
  border-radius: 999px;
  transition: background-color var(--ui-transition-fast);
}
.bg-dropdown-toggle:hover { background-color: var(--brand-indigo); }
.bg-dropdown-arrow { display: inline-block; font-size: 11px; transition: transform 0.2s ease; }
.bg-dropdown:hover .bg-dropdown-arrow { transform: rotate(180deg); }
.bg-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding-top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-white);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(30, 5, 91, 0.18);
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  min-width: 200px;
  z-index: 20;
}

.bg-dropdown:hover .bg-dropdown-menu,
.bg-dropdown:focus-within .bg-dropdown-menu,
.bg-dropdown-menu:hover {
  display: block;
}
.bg-dropdown-menu a {
  display: block;
  margin-bottom: 4px;
  padding: 10px 16px;
  color: var(--brand-indigo);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
}
.bg-dropdown-menu a:hover { background-color: var(--brand-accent-20); color: var(--brand-accent); }

.bg-dropdown-menu a.bg-dropdown-cta {
  margin-top: 6px;
  background-color: var(--brand-accent);
  color: var(--brand-white);
  font-weight: 600;
  text-align: center;
}
.bg-dropdown-menu a.bg-dropdown-cta:hover {
  background-color: var(--brand-indigo);
  color: var(--brand-white);
}

.bg-nav-actions { display: flex; align-items: center; gap: 12px; }
.bg-nav-actions a.bg-login {
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 8px;
}
.bg-nav-actions a.bg-login:hover { color: var(--brand-accent); }

.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.15s ease, color 0.25s ease;
}
.bg-btn-outline {
  background-color: var(--brand-white);
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
}
.bg-btn-outline:hover { background-color: var(--brand-accent-20); }
.bg-btn-filled {
  background-color: var(--brand-accent);
  color: var(--brand-white);
  border: none;
}
.bg-btn-filled:hover { background-color: var(--brand-indigo); transform: translateY(-1px); }

.bg-menu-checkbox { display: none; }
.bg-hamburger { display: none; }
.bg-mobile-menu { display: none; }

@media (max-width: 1024px) {
  .bg-subnav-wrapper { display: none; }

  .bg-header {

    background-color: transparent;
    padding: 12px;
  }
  .bg-navbar {
    width: calc(100% - 24px);
    max-width: 640px;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(30, 5, 91, 0.08);
    border-bottom: none;
    padding: 12px 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .bg-navbar-inner {
    margin: 0;
    width: 100%;
    max-width: none;
  }

  .bg-nav-links, .bg-nav-actions { display: none; }

  .bg-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    width: 28px;
    height: 24px;
    cursor: pointer;
  }
  .bg-hamburger span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--brand-indigo);
    transition: width 0.2s ease;
  }
  .bg-hamburger span:nth-child(1) { width: 24px; }
  .bg-hamburger span:nth-child(2) { width: 24px; }
  .bg-hamburger span:nth-child(3) { width: 16px; }

  .bg-mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
    margin: 10px 0 0;
    width: 100%;
    padding: 16px 20px 28px;
    border-radius: 24px;
    background-color: var(--brand-white);
    box-shadow: 0 4px 24px rgba(30, 5, 91, 0.08);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bg-mobile-menu a {
    padding: 14px 4px;
    color: var(--brand-indigo);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;

  }
  .bg-mobile-menu a.bg-btn {
    text-align: center;
    margin-top: 12px;
  }
  .bg-mobile-menu a.bg-btn-filled {
    color: var(--brand-white);
  }
  .bg-mobile-menu a.bg-btn-filled:hover {
    background-color: var(--brand-indigo);
    color: var(--brand-white);
  }
  .bg-mobile-subnav {
    background-color: #14043b;
    border-radius: 24px;
    padding: 24px 20px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bg-mobile-subnav-logo {
    height: 20px;
    width: auto;
    margin-bottom: 4px;
    align-self: flex-start;
  }

  .bg-mobile-subnav a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding-top: 6px;
    padding-bottom: 4px;
    border-bottom: 3px solid transparent;
    width: fit-content;
  }
  .bg-mobile-subnav a.is-current {
    color: var(--brand-white);
    font-weight: 600;
    border-bottom-color: var(--brand-accent);
  }
  .bg-menu-checkbox {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bg-menu-checkbox:focus-visible ~ .bg-navbar-inner .bg-hamburger {
    outline: 3px solid var(--brand-accent);
    outline-offset: 6px;
    border-radius: 3px;
  }
  .bg-menu-checkbox:checked ~ .bg-mobile-menu {
    display: flex;
  }
}

@media (max-width: 479px) {
  .bg-navbar {
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    min-height: auto;
    box-shadow: none;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 600px) {
  .bg-hero-ctas { flex-direction: column; }

  .bg-hero .bg-hero-btn { width: 100%; }
}

.bg-footer * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-footer i[class*="fa-"] {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

.bg-footer {
  background-color: #14043b;
  color: var(--brand-white);
  padding: 64px 24px 32px;
  text-align: left;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-footer, .bg-footer * { text-align: left; }

.bg-footer-inner { max-width: 1280px; margin: 0 auto; }

.bg-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
}

.bg-footer-left { max-width: 280px; }
.bg-footer-logo img { height: 70px; width: auto; margin-bottom: 20px; }
.bg-footer-contact-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.bg-footer-contact { margin-bottom: 4px; font-weight: 400; }

.bg-footer-contact a {
  color: var(--brand-white);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
.bg-footer-contact a:hover { text-decoration: underline; }

.bg-footer-social { display: flex; gap: 12px; margin-top: 24px; }
.bg-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-pink);
  color: var(--brand-white);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.bg-footer-social a:hover { background-color: var(--brand-pink-70); transform: scale(1.08); }
.bg-footer-social i { font-size: 15px; }

.bg-footer-menus {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}
.bg-footer-col-heading {
  color: var(--brand-pink);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.bg-footer-col a {
  display: block;
  color: var(--brand-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 0;
  margin-bottom: 6px;
}

.bg-footer-col a:hover { color: var(--brand-accent); }

.bg-footer-family {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 32px 0;

}

.bg-footer-family img { height: 34px; width: auto; }

.bg-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;

}
.bg-footer-credit { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.bg-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.bg-footer-legal a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: underline;
  display: inline-block;
  padding: 6px 0;
}
.bg-footer-legal a:hover { color: var(--brand-white); }

@media (max-width: 768px) {
  .bg-footer-top { flex-direction: column; }
  .bg-footer-menus { gap: 32px; }
  .bg-footer-bottom { flex-direction: column; align-items: flex-start; }
  .bg-footer-family {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.bg-hero * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-hero {
  background-color: var(--brand-white);
  text-align: center;

  padding: 140px 24px 24px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bg-hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.bg-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--brand-white);
  border: 1px solid rgba(2, 0, 5, 0.1);
  border-radius: var(--ui-radius-pill);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-indigo);
  box-shadow: 0 1px 2px rgba(30, 5, 91, 0.04);
  margin-bottom: 24px;
}
.bg-hero-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--brand-accent);
  color: var(--brand-white);
  font-size: 11px;
  line-height: 1;
}

.bg-hero h1 {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0 0 20px;

  text-wrap: balance;
}

.bg-hero p.bg-hero-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--brand-grey);
  max-width: 620px;
  margin: 0 auto 32px;
}

.bg-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bg-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  transition: background-color 0.25s ease, transform 0.15s ease, color 0.25s ease;
}
.bg-hero-btn-filled {
  background-color: var(--brand-accent);
  color: var(--brand-white);
  border: none;
}
.bg-hero-btn-filled:hover { background-color: var(--brand-indigo); transform: translateY(-1px); }
.bg-hero-btn-outline {
  background-color: transparent;
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
}
.bg-hero-btn-outline:hover { background-color: var(--brand-accent-20); }

@media (max-width: 600px) {
  .bg-hero h1 { font-size: 32px; }
  .bg-hero p.bg-hero-sub { font-size: 16px; }

}

.bg-cta * { box-sizing: border-box; font-family: var(--ui-font); }

.bg-cta {

  padding: 16px 15px 64px;
}

.portalContainer.home .Layout__oneColumn {
  padding-bottom: 0 !important;
}
.bg-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.bg-cta-feature {
  position: relative;

  max-width: 1140px;
  margin: 0 auto;

  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.bg-cta-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: center 70%;
  z-index: -1;
}
.bg-cta-feature-content {
  width: 34%;
  min-width: 250px;
  padding: 48px 24px 48px 56px;
}
.bg-cta-feature-heading {
  font-family: var(--ui-font);
  font-size: 30px;
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0 0 10px;
  line-height: 1.15;
}
.bg-cta-feature-sub {
  font-family: var(--ui-font);
  font-size: 16px;
  color: var(--brand-grey);
  margin: 0 0 22px;
  line-height: 1.5;
}

.bg-cta-feature-content .bg-cta-btn-group {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .bg-cta-feature {
    display: block;
    min-height: 0;
    background: #eef0f3;
  }
  .bg-cta-feature-img {
    position: static;
    width: 100%;
    height: 200px;
    z-index: 0;
  }
  .bg-cta-feature-content {
    width: 100%;
    min-width: 0;
    padding: 28px 24px 32px;
  }
  .bg-cta-feature-heading { font-size: 24px; }
}

.bg-cta-card {
  flex: 1 1 400px;
  min-width: 280px;
  border-radius: 16px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.bg-cta-card-gradient {
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-accent));
}
.bg-cta-card-light {
  background-color: #d7dbec;
}

.bg-cta-card-img {
  width: 350px;
  max-width: 100%;
  height: auto;
  display: block;
}
.bg-cta-phone-img {
  width: 250px;
  max-width: 100%;
  height: auto;
  display: block;
}

.bg-cta-heading {
  font-size: 32px;
  font-weight: 600;
  color: var(--brand-indigo);
  margin: 0;
}
.bg-cta-text {
  font-size: 18px;
  color: var(--brand-indigo);
  margin: 0;
}
.bg-cta-text-white {
  color: var(--brand-white);
  max-width: 480px;
}

.bg-cta-btn-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bg-cta-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ui-radius-pill);
  padding: 12px 16px;
}
.bg-cta-btn-white {
  background-color: var(--brand-white);
  color: var(--brand-accent) !important;
  border: 1px solid var(--brand-accent);
}
.bg-cta-btn-outline-white {
  background-color: var(--brand-accent);
  color: var(--brand-white) !important;
  border: none;
  padding: 12px 24px;
}

.bg-cta-badge {
  height: 48px;
  width: auto;
  display: block;
}

body:has(.ArticleDetailLeftContainer__wrapper) .bg-hero {
  display: none !important;
}

body:has(.ArticleDetailLeftContainer__wrapper) .bg-hero-search {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  max-width: 640px !important;
  margin-top: 96px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1024px) {
  body:has(.ArticleDetailLeftContainer__wrapper) .bg-hero-search {
    margin-top: 106px !important;
  }
}

.portalContainer.home .bg-breadcrumb-wrap {
  display: none !important;
}

.portalContainer.kbLanding .bg-breadcrumb-wrap {
  display: none !important;
}

.ModuleCategoryContainer__containerListView,
.KBSubCategoryContainer__boxView {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
}

.ModuleCategoryContainer__containerListView > *,
.KBSubCategoryContainer__boxView > * {
  flex: 0 1 calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
  margin: 0 !important;
}

.TitleContainer__container,
.TitleContainer__listView {

  display: flex !important;

  background-color: var(--brand-white) !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  padding: 32px 24px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.TitleContainer__boxLink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.TitleContainer__container:hover .Link__link,
.TitleContainer__listView:hover .Link__link {
  color: var(--brand-indigo) !important;
}

.TitleContainer__container:has(a:focus-visible),
.TitleContainer__listView:has(a:focus-visible) {
  box-shadow: 0 0 0 3px var(--brand-accent-20),
              0 8px 32px var(--ui-shadow-card) !important;
}

.TitleContainer__container .TitleContainer__description,
.TitleContainer__listView .TitleContainer__description {
  text-align: left !important;
  width: 100%;
}

.TitleContainer__container .Avatar__square,
.TitleContainer__listView .Avatar__square,
.Avatar__avatar.Avatar__square {
  background-color: transparent !important;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 auto !important;
}
.Avatar__avatar.Avatar__square img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

@media (max-width: 1024px) {
  .ModuleCategoryContainer__containerListView > *,
  .KBSubCategoryContainer__boxView > * {
    flex: 0 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
@media (max-width: 600px) {
  .ModuleCategoryContainer__containerListView > *,
  .KBSubCategoryContainer__boxView > * {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
}

*:has(> .Button__tagPrimary) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.ModuleCategoryContainer__containerListView {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

svg:has(use[*|href="#rowView"]),
svg:has(use[href="#rowView"]),
svg:has(use[*|href="#columnView"]),
svg:has(use[href="#columnView"]),
svg:has(use[*|href="#gridView"]),
svg:has(use[href="#gridView"]),
svg:has(use[*|href="#boxView"]),
svg:has(use[href="#boxView"]),
svg:has(use[*|href="#listView"]),
svg:has(use[href="#listView"]),
*:has(> svg use[*|href="#rowView"]),
*:has(> svg use[href="#rowView"]),
*:has(> svg use[*|href="#columnView"]),
*:has(> svg use[href="#columnView"]),
*:has(> svg use[*|href="#gridView"]),
*:has(> svg use[href="#gridView"]),
*:has(> svg use[*|href="#boxView"]),
*:has(> svg use[href="#boxView"]),
*:has(> svg use[*|href="#listView"]),
*:has(> svg use[href="#listView"]),
svg[alt="Grid view"],
*:has(> svg[alt="Grid view"]),
svg[alt="List view"],
*:has(> svg[alt="List view"]),
svg[alt="Row view"],
*:has(> svg[alt="Row view"]),
svg[alt="Column view"],
*:has(> svg[alt="Column view"]) {
  display: none !important;
}

.AppContainer__homeWidget:has(.ModuleCategoryContainer__gridView) {
  padding-top: 8px !important;
}