/*
 * TalkBox.Mom — Help Scout Docs Custom Stylesheet
 * Prepared September 2026
 *
 * Brand:
 * Primary teal:     #009ca6
 * Text:             #253238
 * Soft background:  #f7fbfb
 * Font:             Outfit
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --tbm-teal: #009ca6;
  --tbm-text: #253238;
  --tbm-muted: #66767c;
  --tbm-bg: #f7fbfb;
  --tbm-card: #ffffff;
  --tbm-border: #dce9e9;
  --tbm-soft-teal: #eaf8f8;
  --tbm-radius: 14px;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body,
input,
button,
select,
textarea {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  background: var(--tbm-bg);
  color: var(--tbm-text);
  font-size: 16px;
  line-height: 1.65;
}

a,
.contentWrapper a,
.collection a,
.most-pop-articles .popArticles a,
#full-Article a {
  color: var(--tbm-teal);
  text-decoration-color: rgba(0, 156, 166, 0.35);
}

a:hover,
a:focus,
.contentWrapper a:hover,
.collection a:hover,
#full-Article a:hover {
  color: #007b83;
}

::selection {
  background: rgba(0, 156, 166, 0.22);
  color: var(--tbm-text);
}

/* =========================================================
   TOP NAV / LOGO
   ========================================================= */

.navbar .navbar-inner {
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 0 var(--tbm-border);
}

.navbar .nav li,
.navbar .nav li a,
.navbar .icon-private-w {
  font-family: "Outfit", sans-serif !important;
}

.navbar .nav li a {
  color: var(--tbm-text);
  font-weight: 500;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus {
  color: var(--tbm-teal);
}

.navbar .brand {
  text-shadow: none;
}

a.brand > img {
  display: block;
  max-height: 48px;
  width: auto;
}

/* =========================================================
   SEARCH HERO
   ========================================================= */

#docsSearch {
  background: var(--tbm-teal);
  border: 0;
  margin-bottom: 38px;
  padding: 48px 20px;
  position: relative;
}

#docsSearch h1 {
  color: #ffffff;
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 auto 24px;
  max-width: 820px;
  padding: 0;
  text-align: center;
}

#searchBar {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  width: 100%;
}

#searchBar form {
  align-items: stretch !important;
  display: flex !important;
  margin: 0 !important;
  position: relative;
  width: 100%;
}

#searchBar .search-query,
#searchBar input.search-query,
input.search-query {
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 8px 24px rgba(0, 67, 72, 0.12);
  color: var(--tbm-text);
  font-family: "Outfit", sans-serif !important;
  font-size: 17px;
  font-weight: 400;
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 52px !important;
  margin: 0 !important;
  min-height: 52px;
  min-width: 0;
}

#searchBar .search-query:focus,
#searchBar input.search-query:focus {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 28px rgba(0, 67, 72, 0.18);
  outline: none;
}

#searchBar button {
  background: #111111;
  border: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
  color: #ffffff;
  font-family: "Outfit", sans-serif !important;
  box-sizing: border-box;
  flex: 0 0 auto;
  font-weight: 600;
  height: 52px !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 52px;
  padding: 0 24px !important;
  position: static !important;
  text-shadow: none;
  top: auto !important;
}

#searchBar button:hover,
#searchBar button:focus {
  background: #000000;
  border-color: transparent;
  color: #ffffff;
  text-shadow: none;
}

/* Search suggestion dropdown */
#serp-dd {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28, 62, 66, 0.14);
  overflow: hidden;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background: var(--tbm-soft-teal);
  color: var(--tbm-teal);
}

/* =========================================================
   HOMEPAGE CATEGORY / COLLECTION CARDS
   ========================================================= */

/* Give each collection its own visual breathing room.
   This specifically keeps the second collection title from
   crowding the final row of categories above it. */
.collection + .collection,
.collection-category + .collection-category,
#main-content .collection-category:not(:first-child) {
  margin-top: 72px !important;
}


/* Help Scout's default category layout can render as two narrow
   floated columns. Force a centered, even 3-column grid instead. */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1140px;
  width: 100%;
}

.category-list::before,
.category-list::after {
  display: none !important;
  content: none !important;
}

.category-list .category {
  box-sizing: border-box;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
}

.category-list .category,
.twoCol .collection,
.threeCol .collection {
  background: var(--tbm-card);
  border: 1px solid var(--tbm-border);
  border-radius: var(--tbm-radius);
  box-shadow: 0 4px 14px rgba(31, 71, 74, 0.045);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.category-list .category:hover,
.twoCol .collection:hover,
.threeCol .collection:hover {
  border-color: rgba(0, 156, 166, 0.42);
  box-shadow: 0 9px 24px rgba(31, 71, 74, 0.08);
  transform: translateY(-2px);
}

.category-list .category h3,
.category-list .category h3 a,
.collection h3,
.collection h3 a {
  color: var(--tbm-text);
  font-family: "Outfit", sans-serif !important;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.category-list .category h3 a:hover,
.collection h3 a:hover {
  color: var(--tbm-teal);
}

.category-list .category .article-count {
  color: var(--tbm-teal);
  font-weight: 600;
}

.category-list .category:hover .article-count {
  color: var(--tbm-teal);
}

.collection a,
.most-pop-articles .popArticles a {
  color: var(--tbm-text);
  font-family: "Outfit", sans-serif !important;
  font-weight: 500;
  text-transform: none;
}

.collection a:hover,
.most-pop-articles .popArticles a:hover {
  color: var(--tbm-teal);
}

/* =========================================================
   BREADCRUMBS / SIDEBAR / ARTICLE NAVIGATION
   ========================================================= */

.breadcrumb,
.breadcrumb a {
  font-family: "Outfit", sans-serif !important;
}

.breadcrumb a {
  color: var(--tbm-muted);
}

.breadcrumb a:hover {
  color: var(--tbm-teal);
}

#sidebar a,
.sidebar a,
.nav-list a {
  color: var(--tbm-text);
  font-family: "Outfit", sans-serif !important;
}

#sidebar a:hover,
.sidebar a:hover,
.nav-list a:hover {
  color: var(--tbm-teal);
}

/* =========================================================
   ARTICLES
   ========================================================= */

.contentWrapper,
#full-Article {
  color: var(--tbm-text);
}

#full-Article h1,
#full-Article h2,
#full-Article h3,
#full-Article h4,
.contentWrapper h1,
.contentWrapper h2,
.contentWrapper h3,
.contentWrapper h4 {
  color: var(--tbm-text);
  font-family: "Outfit", sans-serif !important;
  line-height: 1.2;
}

#full-Article h1,
.contentWrapper h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

#full-Article h2,
.contentWrapper h2 {
  border-bottom: 2px solid var(--tbm-soft-teal);
  font-weight: 700;
  margin-top: 1.8em;
  padding-bottom: 0.32em;
}

#full-Article h3,
.contentWrapper h3 {
  font-weight: 650;
}

#full-Article p,
#full-Article li,
.contentWrapper p,
.contentWrapper li {
  font-size: 16px;
  line-height: 1.72;
}

#full-Article strong,
.contentWrapper strong {
  color: #172327;
  font-weight: 650;
}

/* Lists */
#full-Article ul,
#full-Article ol {
  padding-left: 1.45em;
}

#full-Article li {
  margin-bottom: 0.35em;
}

/* Images */
#full-Article img,
.contentWrapper img {
  border-radius: 10px;
}

/* Blockquotes / callouts */
#full-Article blockquote,
.contentWrapper blockquote {
  background: var(--tbm-soft-teal);
  border-left: 4px solid var(--tbm-teal);
  border-radius: 0 10px 10px 0;
  color: var(--tbm-text);
  margin: 1.5em 0;
  padding: 16px 20px;
}

/* Code */
#full-Article code,
.contentWrapper code {
  background: #edf4f4;
  border: 1px solid #d9e6e6;
  border-radius: 5px;
  color: #305054;
  padding: 2px 5px;
}

/* Tables */
#full-Article table,
.contentWrapper table {
  background: #ffffff;
  border: 1px solid var(--tbm-border);
  border-collapse: separate;
  border-radius: 10px;
  border-spacing: 0;
  overflow: hidden;
}

#full-Article th,
.contentWrapper th {
  background: var(--tbm-soft-teal);
  color: var(--tbm-text);
  font-weight: 650;
}

#full-Article th,
#full-Article td,
.contentWrapper th,
.contentWrapper td {
  border-color: var(--tbm-border);
  padding: 10px 12px;
}

/* Horizontal rules */
#full-Article hr,
.contentWrapper hr {
  border: 0;
  border-top: 1px solid var(--tbm-border);
  margin: 2em 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button,
input[type="submit"] {
  font-family: "Outfit", sans-serif !important;
}

.btn-primary,
input[type="submit"].btn-primary {
  background: var(--tbm-teal);
  border-color: var(--tbm-teal);
  border-radius: 9px;
  box-shadow: none;
  color: #ffffff;
  font-weight: 600;
  text-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
input[type="submit"].btn-primary:hover {
  background: #007f87;
  border-color: #007f87;
  color: #ffffff;
}

/* =========================================================
   ARTICLE FOOTER / FEEDBACK
   ========================================================= */

.articleFoot {
  border-top-color: var(--tbm-border);
  color: var(--tbm-muted);
}

/*
 * Uncomment these 3 lines if you do NOT want Help Scout's
 * "Last updated" date shown publicly.
 */
/*
.articleFoot time.lu {
  display: none;
}
*/

/* =========================================================
   FOOTER
   ========================================================= */

footer,
#footer {
  color: var(--tbm-muted);
}

footer a,
#footer a {
  color: var(--tbm-teal);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(51, 204, 204, 0.5);
  outline-offset: 2px;
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .category-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body {
    font-size: 15px;
  }

  #docsSearch {
    margin-bottom: 26px;
    padding: 34px 14px;
  }

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

  #searchBar .search-query,
  #searchBar input.search-query,
  #searchBar button {
    height: 48px !important;
    min-height: 48px;
  }

  .category-list .category,
  .twoCol .collection,
  .threeCol .collection {
    border-radius: 12px;
  }

  #full-Article h1,
  .contentWrapper h1 {
    font-size: 30px;
  }

  #full-Article h2,
  .contentWrapper h2 {
    font-size: 24px;
  }

  #full-Article table,
  .contentWrapper table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Respect users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================================
   V3 — HELP SCOUT LAYOUT OVERRIDES
   Added with higher specificity to override Help Scout defaults.
   ========================================================= */

/* Categories: 3 centered columns on desktop */
body .collection-category .category-list,
body .category-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
  text-align: initial !important;
}

body .collection-category .category-list .category,
body .category-list .category {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Search: force the field and button onto one shared row */
body #searchBar,
body #searchBar form {
  width: 100% !important;
  max-width: 960px !important;
}

body #searchBar form {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body #searchBar .search-query,
body #searchBar input.search-query {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 52px !important;
  border-radius: 12px 0 0 12px !important;
  box-sizing: border-box !important;
}

body #searchBar button,
body #searchBar .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  top: 0 !important;
  bottom: auto !important;
  position: static !important;
  line-height: 1 !important;
  vertical-align: top !important;
  border-radius: 0 12px 12px 0 !important;
  box-sizing: border-box !important;
}

/* Search button: black with white text. */
body #searchBar button,
body #searchBar .btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

body #searchBar button:hover,
body #searchBar button:focus,
body #searchBar .btn:hover,
body #searchBar .btn:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body .collection-category .category-list,
  body .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body .collection-category .category-list,
  body .category-list {
    grid-template-columns: 1fr !important;
  }

  body #searchBar .search-query,
  body #searchBar input.search-query,
  body #searchBar button,
  body #searchBar .btn {
    height: 48px !important;
    min-height: 48px !important;
  }
}

/* =========================================================
   V5 — SEARCH BAR + FOOTER FIXES
   ========================================================= */

/* Help Scout uses #searchBar as the form itself on this template.
   Make the entire search control wide, centered, and one horizontal row. */
body form#searchBar,
body #docsSearch #searchBar {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(100%, 1100px) !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
}

body form#searchBar input.search-query,
body #docsSearch #searchBar input.search-query,
body #docsSearch #searchBar .search-query {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  line-height: normal !important;
  border-radius: 12px 0 0 12px !important;
  box-sizing: border-box !important;
}

body form#searchBar button,
body #docsSearch #searchBar button,
body #docsSearch #searchBar .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  position: static !important;
  float: none !important;
  border-radius: 0 12px 12px 0 !important;
  box-sizing: border-box !important;
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

/* Give the page a clear visual ending before Help Scout's footer text. */
body footer,
body #footer,
body .footer {
  margin-top: 88px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

@media (max-width: 767px) {
  body form#searchBar,
  body #docsSearch #searchBar {
    width: 100% !important;
    max-width: 100% !important;
  }

  body form#searchBar input.search-query,
  body #docsSearch #searchBar input.search-query,
  body #docsSearch #searchBar .search-query,
  body form#searchBar button,
  body #docsSearch #searchBar button,
  body #docsSearch #searchBar .btn {
    height: 52px !important;
    min-height: 52px !important;
  }

  body form#searchBar button,
  body #docsSearch #searchBar button,
  body #docsSearch #searchBar .btn {
    flex-basis: 112px !important;
    width: 112px !important;
    max-width: 112px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================
   V6 — INNER CATEGORY / ARTICLE LIST PAGES
   Compact sidebar search + modern article-list icon
   ========================================================= */

/* The search box on category pages lives in the left sidebar.
   Keep the large centered search treatment on the homepage,
   but turn the sidebar version into a compact utility control. */
body #sidebar form#searchBar,
body #sidebar #searchBar,
body .sidebar form#searchBar,
body .sidebar #searchBar,
body .docs-sidebar form#searchBar,
body .docs-sidebar #searchBar {
  align-items: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 0 26px !important;
  max-width: 365px !important;
  min-width: 0 !important;
  width: 100% !important;
}

body #sidebar #searchBar input.search-query,
body #sidebar #searchBar .search-query,
body .sidebar #searchBar input.search-query,
body .sidebar #searchBar .search-query,
body .docs-sidebar #searchBar input.search-query,
body .docs-sidebar #searchBar .search-query {
  border: 1px solid #e3e7e8 !important;
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: 0 7px 22px rgba(31, 71, 74, 0.08) !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  font-size: 17px !important;
  height: 54px !important;
  margin: 0 !important;
  min-height: 54px !important;
  min-width: 0 !important;
  padding: 0 18px !important;
  width: auto !important;
}

body #sidebar #searchBar button,
body #sidebar #searchBar .btn,
body .sidebar #searchBar button,
body .sidebar #searchBar .btn,
body .docs-sidebar #searchBar button,
body .docs-sidebar #searchBar .btn {
  align-items: center !important;
  background: #111111 !important;
  border: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 58px !important;
  height: 54px !important;
  justify-content: center !important;
  margin: 0 !important;
  max-width: 58px !important;
  min-height: 54px !important;
  min-width: 58px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: static !important;
  text-indent: -9999px !important;
  width: 58px !important;
}

/* Preserve Help Scout's existing magnifying-glass glyph while hiding
   any visible Search label on the compact sidebar button. */
body #sidebar #searchBar button i,
body #sidebar #searchBar .btn i,
body .sidebar #searchBar button i,
body .sidebar #searchBar .btn i,
body .docs-sidebar #searchBar button i,
body .docs-sidebar #searchBar .btn i,
body #sidebar #searchBar button [class*="icon-search"],
body .sidebar #searchBar button [class*="icon-search"],
body .docs-sidebar #searchBar button [class*="icon-search"] {
  color: #ffffff !important;
  display: inline-block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-indent: 0 !important;
}

/* Fallback magnifying glass if the template's icon is a pseudo-element. */
body #sidebar #searchBar button::before,
body .sidebar #searchBar button::before,
body .docs-sidebar #searchBar button::before {
  color: #ffffff;
  content: "⌕";
  display: block;
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-indent: 0;
  transform: rotate(-18deg);
}

body #sidebar #searchBar button:hover,
body .sidebar #searchBar button:hover,
body .docs-sidebar #searchBar button:hover {
  background: #000000 !important;
}

/* ---------------------------------------------------------
   ARTICLE LIST ICONS
   Remove Help Scout's old document-sheet icon and replace it
   with a lightweight contemporary chevron.
   --------------------------------------------------------- */

/* Hide common Help Scout document icon classes/elements. */
.article-list [class*="icon-doc"],
.articleList [class*="icon-doc"],
.article-list [class*="icon-article"],
.articleList [class*="icon-article"],
#main-content [class*="icon-doc"],
#main-content [class*="icon-article"] {
  display: none !important;
}

/* Remove icon-font pseudo glyphs attached to article rows/links. */
.article-list li > a::before,
.articleList li > a::before,
.article-list .article > a::before,
.articleList .article > a::before {
  content: none !important;
  display: none !important;
}

/* Make article rows a clean aligned list. */
.article-list li,
.articleList li,
#main-content ul.article-list li,
#main-content ul.articleList li {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* New icon: a small teal chevron in a soft circular container. */
.article-list li::before,
.articleList li::before,
#main-content ul.article-list li::before,
#main-content ul.articleList li::before {
  align-items: center;
  background: rgba(0, 156, 166, 0.10);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--tbm-teal);
  content: "›";
  display: inline-flex !important;
  flex: 0 0 24px;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0 0 2px 1px;
  width: 24px;
}

.article-list li > a,
.articleList li > a,
#main-content ul.article-list li > a,
#main-content ul.articleList li > a {
  margin: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 767px) {
  body #sidebar form#searchBar,
  body #sidebar #searchBar,
  body .sidebar form#searchBar,
  body .sidebar #searchBar,
  body .docs-sidebar form#searchBar,
  body .docs-sidebar #searchBar {
    max-width: none !important;
  }
}

/* =========================================================
   V7 — READABILITY + SIDEBAR SEARCH ICON CLEANUP
   ========================================================= */

/* Help Scout already supplies the magnifying-glass icon on the
   compact sidebar search button. Remove our V6 fallback glyph. */
body #sidebar #searchBar button::before,
body .sidebar #searchBar button::before,
body .docs-sidebar #searchBar button::before {
  content: none !important;
  display: none !important;
}

/* Category-page article titles should read like content first,
   links second. Keep global hyperlinks teal elsewhere. */
.article-list li > a,
.articleList li > a,
#main-content ul.article-list li > a,
#main-content ul.articleList li > a {
  color: var(--tbm-text) !important;
  font-family: "Outfit", sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.article-list li > a:hover,
.articleList li > a:hover,
#main-content ul.article-list li > a:hover,
#main-content ul.articleList li > a:hover,
.article-list li > a:focus,
.articleList li > a:focus,
#main-content ul.article-list li > a:focus,
#main-content ul.articleList li > a:focus {
  color: var(--tbm-teal) !important;
}

/* Slightly more breathing room between article choices. */
.article-list li,
.articleList li,
#main-content ul.article-list li,
#main-content ul.articleList li {
  margin-bottom: 24px !important;
}

/* Improve readability inside individual help articles too. */
#full-Article p,
#full-Article li,
.contentWrapper p,
.contentWrapper li {
  font-size: 18px !important;
  line-height: 1.72 !important;
}

#full-Article h1,
.contentWrapper h1 {
  font-size: 38px !important;
  line-height: 1.15 !important;
}

#full-Article h2,
.contentWrapper h2 {
  font-size: 27px !important;
  line-height: 1.25 !important;
}

#full-Article h3,
.contentWrapper h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

@media (max-width: 767px) {
  .article-list li > a,
  .articleList li > a,
  #main-content ul.article-list li > a,
  #main-content ul.articleList li > a {
    font-size: 18px !important;
  }

  #full-Article p,
  #full-Article li,
  .contentWrapper p,
  .contentWrapper li {
    font-size: 17px !important;
  }
}


/* =========================================================
   V8 — ARTICLE TYPOGRAPHY + SORT/FILTER + ARTICLE FOOTER
   ========================================================= */

/* Make normal article copy visibly lighter so bold text actually
   stands out. Help Scout can apply heavier inherited weights to
   nested article elements, so set the reading copy explicitly. */
#full-Article,
#full-Article p,
#full-Article li,
#full-Article span,
#full-Article div:not([class*="btn"]),
.contentWrapper,
.contentWrapper p,
.contentWrapper li,
.contentWrapper span {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
}

/* Preserve a clear hierarchy for emphasis and headings. */
#full-Article strong,
#full-Article b,
.contentWrapper strong,
.contentWrapper b {
  font-weight: 700 !important;
}

#full-Article h1,
.contentWrapper h1 {
  font-weight: 700 !important;
}

#full-Article h2,
.contentWrapper h2 {
  font-weight: 600 !important;
}

#full-Article h3,
#full-Article h4,
.contentWrapper h3,
.contentWrapper h4 {
  font-weight: 600 !important;
}

/* If an article contains intentionally italicized copy, keep the
   italics but use Outfit rather than a serif fallback. */
#full-Article em,
#full-Article i:not([class*="icon"]),
.contentWrapper em,
.contentWrapper i:not([class*="icon"]) {
  font-family: "Outfit", sans-serif !important;
}

/* ---------------------------------------------------------
   SORT CONTROL
   Style Help Scout's closed select control in Outfit.
   Browsers/operating systems may still render the OPEN native
   dropdown menu in their system UI font (especially on macOS).
   --------------------------------------------------------- */
select,
select option,
.sort select,
.sorter select,
[class*="sort"] select,
#main-content select {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------
   ARTICLE FOOTER / CONTACT + LAST UPDATED
   Remove Help Scout's old serif/italic treatment.
   --------------------------------------------------------- */
.articleFoot,
.articleFoot *,
.article-foot,
.article-foot *,
.articleFooter,
.articleFooter *,
.article-footer,
.article-footer * {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
}

.articleFoot,
.article-foot,
.articleFooter,
.article-footer {
  border-top: 1px solid var(--tbm-border) !important;
  color: #7a8589 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin-top: 56px !important;
  padding-top: 26px !important;
}

.articleFoot a,
.article-foot a,
.articleFooter a,
.article-footer a {
  color: var(--tbm-text) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.articleFoot a:hover,
.article-foot a:hover,
.articleFooter a:hover,
.article-footer a:hover {
  color: var(--tbm-teal) !important;
}

.articleFoot time,
.articleFoot .lu,
.article-foot time,
.articleFooter time,
.article-footer time {
  color: #8b9599 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

/* Keep any envelope/contact icon understated and modern. */
.articleFoot [class*="icon"],
.article-foot [class*="icon"],
.articleFooter [class*="icon"],
.article-footer [class*="icon"] {
  color: #8b9599 !important;
  font-style: normal !important;
}

/* =========================================================
   V9 — ARTICLE FOOTER CONTACT ICON
   Replace Help Scout's legacy icon-font glyph with a heart envelope.
   ========================================================= */

/* The legacy Help Scout icon font can render the wrong glyph after
   we override its typography. Hide that glyph and supply our own. */
.articleFoot [class*="icon"],
.article-foot [class*="icon"],
.articleFooter [class*="icon"],
.article-footer [class*="icon"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  margin-right: 10px !important;
  overflow: visible !important;
  color: transparent !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.articleFoot [class*="icon"]::before,
.article-foot [class*="icon"]::before,
.articleFooter [class*="icon"]::before,
.article-footer [class*="icon"]::before {
  content: "💌" !important;
  display: block !important;
  color: initial !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}


/* =========================================================
   V12 — ARTICLE TEXT HIERARCHY
   Keep all existing heading sizes unchanged.
   Only adjust text color/weight hierarchy.
   ========================================================= */

/* Regular article copy: softer charcoal */
#full-Article p,
#full-Article li,
.contentWrapper p,
.contentWrapper li {
  color: #3f474b !important;
  font-weight: 400 !important;
}

/* Headings: darker for stronger contrast, but preserve existing sizes */
#full-Article h1,
#full-Article h2,
#full-Article h3,
#full-Article h4,
.contentWrapper h1,
.contentWrapper h2,
.contentWrapper h3,
.contentWrapper h4 {
  color: #111111 !important;
}

/* Bold text remains clearly distinct from regular body copy */
#full-Article strong,
#full-Article b,
.contentWrapper strong,
.contentWrapper b {
  color: #111111 !important;
  font-weight: 700 !important;
}


/* =========================================================
   V13 — SUBTLE TEAL ACCENTS ON INNER PAGES
   ========================================================= */

/* Small branded accent on sidebar label */
#sidebar h3,
.sidebar h3,
#sidebar .nav-header,
.sidebar .nav-header {
  color: #009CA6 !important;
}

/* Active/current category: soft teal background + teal edge */
#sidebar .active > a,
.sidebar .active > a,
#sidebar li.active > a,
.sidebar li.active > a,
#sidebar a.active,
.sidebar a.active {
  background: rgba(0, 156, 166, 0.08) !important;
  border-left: 3px solid #009CA6 !important;
  border-radius: 8px !important;
  color: #1f2a30 !important;
  padding-left: 12px !important;
}

/* Keep active category text strong, but not teal-heavy */
#sidebar .active > a:hover,
.sidebar .active > a:hover,
#sidebar li.active > a:hover,
.sidebar li.active > a:hover {
  background: rgba(0, 156, 166, 0.12) !important;
  color: #111111 !important;
}

/* Small teal focus treatment for sort/select controls */
select:focus,
.sort select:focus,
.articleSort select:focus {
  border-color: #009CA6 !important;
  box-shadow: 0 0 0 3px rgba(0, 156, 166, 0.14) !important;
  outline: none !important;
}


/* =========================================================
   V14 — HIDE ARTICLE SORT CONTROL
   ========================================================= */

.sort,
.articleSort,
#sort,
select[name*="sort"],
select[id*="sort"] {
  display: none !important;
}


/* =========================================================
   V20 — SEARCH RESULTS
   Used with the TalkBox.Mom search-page Custom Code snippet.
   ========================================================= */

.tbm-search-results {
  margin-top: 30px !important;
}

.tbm-search-result {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 22px 24px 20px 62px !important;

  background: #ffffff !important;
  border: 1px solid #e1eaec !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(31, 71, 74, 0.04) !important;

  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.tbm-search-result::before {
  content: "›";
  position: absolute;
  left: 22px;
  top: 22px;

  width: 28px;
  height: 28px;

  background: rgba(0, 156, 166, 0.09);
  border-radius: 50%;
  color: #009CA6;

  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}

.tbm-search-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;

  color: #1f2a30 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.tbm-search-title:hover {
  color: #009CA6 !important;
}

.tbm-search-preview {
  display: -webkit-box !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 0 13px !important;
  overflow: hidden !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;

  color: #59666b !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.tbm-read-more {
  display: inline-block !important;
  margin-top: 1px !important;

  color: #009CA6 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.tbm-read-more:hover {
  color: #007f87 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.tbm-search-result:hover {
  border-color: rgba(0, 156, 166, 0.26) !important;
  box-shadow: 0 7px 18px rgba(31, 71, 74, 0.07) !important;
}

/* Neutralize Help Scout's old result layout inside transformed cards */
.tbm-search-result [class*="span"],
.tbm-search-result .row-fluid {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tbm-search-result > *:not(.tbm-search-title):not(.tbm-search-preview):not(.tbm-read-more) {
  display: none !important;
}

@media (max-width: 767px) {
  .tbm-search-result {
    padding: 18px 18px 18px 54px !important;
  }

  .tbm-search-result::before {
    left: 18px;
    top: 18px;
  }

  .tbm-search-title {
    font-size: 18px !important;
  }

  .tbm-search-preview {
    font-size: 15px !important;
    -webkit-line-clamp: 2 !important;
  }
}