/* EasyRoutes / Help Scout Docs — understated edition, September 2026
   REPLACE the previous custom stylesheet; load after Help Scout's CSS.
   Works with the existing Help Scout markup and header. Font Awesome 4.7
   is required for category badges. Keep this import first in the file.
   Brand tokens and category mappings are the main customization points. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. Foundation — keep resets inside the help center, away from widgets. */
:root {
  --rt-bg: #f5f5f5;
  --rt-surface: #fafafa;
  --rt-soft: #ededed;
  --rt-text: #262626;
  --rt-heading: #0a0a0a;
  --rt-muted: #666666;
  --rt-brand: #171717;
  --rt-link: #171717;
  --rt-link-hover: #525252;
  --rt-tint: #e6e6e6;
  --rt-border: #e2e2e2;
  --rt-control-border: #d4d4d4;
  --rt-radius: 8px;
  --rt-width: 1248px;
  --rt-content-inset: 24px;
  --rt-logo-width: 135px;
  --rt-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rt-shadow: none;
}
body {
  margin: 0;
  padding: 0;
  background: var(--rt-bg);
  color: var(--rt-text);
  font-family: var(--rt-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:where(#mainNav, #docsSearch, #contentArea, #contactModal),
:where(#mainNav, #docsSearch, #contentArea, #contactModal) *,
:where(#mainNav, #docsSearch, #contentArea, #contactModal) *::before,
:where(#mainNav, #docsSearch, #contentArea, #contactModal) *::after {
  box-sizing: border-box;
}
:where(#mainNav, #docsSearch, #contentArea, #contactModal) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--rt-heading);
  font-family: var(--rt-font);
  font-weight: 600;
  text-rendering: optimizeLegibility;
}
:where(#docsSearch, #contentArea, #contactModal) :is(input, button, select, textarea) {
  font-family: var(--rt-font);
}
#contentArea a { color: var(--rt-link); }
#contentArea a:hover { color: var(--rt-link-hover); }
#mainNav .container-fluid, #contentArea.container-fluid {
  width: calc(100% - 64px);
  max-width: var(--rt-width);
  margin-inline: auto;
  padding: 0;
}
/* Help Scout removes some outlines with !important; restore keyboard focus. */
:is(#mainNav, #docsSearch, #contentArea, #contactModal) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #525252 !important;
  outline-offset: 3px;
}
#sidebar #searchBar .search-query:focus-visible {
  outline: 2px solid #525252 !important;
  outline-offset: 3px;
}

/* 2. Navigation — preserve Help Scout's 768px collapse behavior. */
#mainNav { position: relative; z-index: 20; margin: 0; }
#mainNav .navbar-inner {
  padding: 0;
  border: 0;
  background: var(--rt-bg);
  box-shadow: none;
}
#mainNav .container-fluid {
  min-height: 88px;
  padding-inline: var(--rt-content-inset);
  line-height: normal;
}
/* Help Scout clearfixes otherwise become empty items in the flex navigation. */
#mainNav .container-fluid::before,
#mainNav .container-fluid::after { content: none; }
#mainNav .brand {
  display: flex;
  align-items: center;
  width: var(--rt-logo-width);
  max-width: calc(100% - 64px);
  min-height: 88px;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
}
#mainNav .brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40px;
  min-width: 0;
  object-fit: contain;
}
#mainNav .nav > li > a {
  padding: 12px 13px;
  border-radius: 8px;
  color: var(--rt-muted);
  font: 500 14px/1.4 var(--rt-font);
  text-shadow: none;
  transition: color 160ms ease, background-color 160ms ease;

  font-weight: 400;
}
#mainNav .nav > li > a:hover, #mainNav .nav > li > a:focus {
  color: var(--rt-heading);
  background: transparent;
}
#mainNav .nav > .active > a,
#mainNav .nav > .active > a:hover,
#mainNav .nav > .active > a:focus {
  color: var(--rt-heading);
  background: transparent;
  box-shadow: none;

  font-weight: 600;
}
#mainNav .nav .caret { display: none; }
#mainNav .icon-private-w { color: currentColor; }
#mainNav .btn-navbar {
  top: 18px;
  right: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 14px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
#mainNav .btn-navbar .icon-bar {
  width: 22px;
  height: 2px;
  background: var(--rt-heading);
  box-shadow: none;
}
@media (min-width: 769px) {
  #mainNav .container-fluid { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  #mainNav .brand { flex-shrink: 0; }
  #mainNav .nav-collapse { margin-left: auto; }
  #mainNav .nav { position: static; display: flex; float: none; flex-wrap: wrap; gap: 2px; margin: 0; }
  #mainNav .nav > li { float: none; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  #mainNav .container-fluid { gap: 0; }
  #mainNav .nav-collapse { flex-basis: 100%; padding-bottom: 16px; }
  #mainNav .nav > li > a { padding-inline: 12px; }
}

/* 3. Search — separate the hero form from the compact sidebar form. */
#docsSearch {
  position: relative;
  z-index: 10;
  height: auto;
  margin: 0 0 48px;
  padding: 56px 24px 60px;
  border: 0;
  background: var(--rt-bg);
}
#docsSearch h1 {
  max-width: 800px;
  margin: 0 auto 28px;
  padding: 0;
  color: var(--rt-heading);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
}
#docsSearch #searchBar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
#docsSearch #searchBar .search-query {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--rt-control-border);
  border-radius: 8px;
  background: var(--rt-surface);
  color: var(--rt-heading);
  font: 400 16px/1.5 var(--rt-font);
  box-shadow: var(--rt-shadow);
}
#docsSearch #searchBar button {
  position: static;
  flex: 0 0 124px;
  width: auto;
  height: 58px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--rt-heading);
  color: white;
  font: 600 15px/1.4 var(--rt-font);
  text-shadow: none;
  transition: background-color 160ms ease;
}
#docsSearch #searchBar button:hover { background: var(--rt-link); }
#docsSearch #searchBar button span { display: inline; width: auto; font-size: inherit; text-indent: 0; }
#docsSearch #searchBar button .icon-search { display: none; }
#searchBar .search-query::placeholder { color: var(--rt-muted); opacity: 1; }
#docsSearch #searchBar .search-query:focus, #sidebar #searchBar.sm .search-query:focus { border-color: #737373; box-shadow: none; }
#sidebar #searchBar.sm { width: 100%; margin: 0 0 24px; padding: 0; }
#sidebar #searchBar.sm .search-query {
  height: 48px;
  margin: 0;
  padding: 0 48px 0 14px;
  border: 1px solid var(--rt-control-border);
  border-radius: 8px;
  background: var(--rt-surface);
  color: var(--rt-heading);
  font: 400 16px/1.5 var(--rt-font);
}
#sidebar #searchBar.sm button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--rt-link);
  background: transparent;
  text-shadow: none;
}
#sidebar #searchBar.sm button:hover { background: var(--rt-tint); }
#sidebar #searchBar.sm button .icon-search { display: inline-block; color: inherit; font-size: 20px; }
/* Keep Help Scout's native icon font and its glyph. No global icon reset. */
#searchBar #serp-dd, #searchBar #serp-dd.sb {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 30;
  width: 100%;
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  background: var(--rt-surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 7%);
  overflow: hidden;
}
#serp-dd .result { max-height: min(420px, 55vh); padding: 6px; }
#serp-dd .result > li { margin: 0; border-radius: 7px; }
#serp-dd .result a { padding: 12px; color: var(--rt-text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#serp-dd .result > li.active, #serp-dd .result a:hover { background: var(--rt-tint); }
#serp-dd .result > li.active a { color: var(--rt-link); }

/* 4. Homepage and collection grids — reset ALL legacy tile margins. */
#contentArea { position: relative; padding-bottom: 24px; }
.collection-category h2 { font-weight: 600; text-align: left; margin: 0 0 20px; font-size: 20px; line-height: 1.35; letter-spacing: -0.025em; }
#contentArea .collection-category > h2 { padding: 0 var(--rt-content-inset); }
#contentArea .collection-category h2 a { color: var(--rt-heading); }
#contentArea .category-list, #contentArea .category-list.two-col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 48px;
  text-align: left;
}
/* Help Scout clearfix pseudo-elements must not become empty grid cells. */
#contentArea .category-list::before, #contentArea .category-list::after { content: none; }
#contentArea .category-list .category, #contentArea .category-list.two-col .category {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: var(--rt-radius);
  background: transparent;
  color: var(--rt-text);
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 160ms ease;
}
#contentArea .category-list .category:hover {
  background: var(--rt-soft);
  box-shadow: none;
}
#contentArea .category-list h3 {
  margin: 0 0 8px;
  color: var(--rt-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-align: left;
}
#contentArea .category-list .category p {
  margin: 0;
  color: var(--rt-muted);
  font-size: 14px;
  line-height: 1.6;
}
#contentArea .category-list .category .article-count { display: none; }
/* Preserve current collection visibility. These are presentation rules only. */
#mainNav #supertime:not(.active), #mainNav #tipgenius:not(.active),
#collection-category-1, #collection-category-121 { display: none; }
@media (min-width: 769px) {
  #contentArea #collection-category-203 .category-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1099px) {
  #contentArea .category-list, #contentArea .category-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5. Article/category shell. Order follows the desktop Help Scout layout. */
#contentArea > .row-fluid {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
#contentArea > .row-fluid::before, #contentArea > .row-fluid::after { content: none; }
#contentArea #main-content, #contentArea #sidebar {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
}
#contentArea #sidebar { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
#contentArea #main-content { grid-column: 2; grid-row: 1; }
#sidebar h3 { margin: 0 0 12px; color: var(--rt-muted); font-size: 12px; letter-spacing: 0.08em; }
#sidebar .nav-list { margin: 0 0 24px; padding: 0; }
#sidebar .nav-list li { margin: 2px 0; }
#sidebar .nav-list a {
  position: relative;
  display: block;
  min-height: 44px;
  margin: 0;
  padding: 10px 10px 10px 40px;
  border-radius: 8px;
  color: var(--rt-muted);
  font-size: 14px;
  line-height: 1.5;
  text-shadow: none;
}
#sidebar .nav-list a:hover, #sidebar .nav-list a:focus { background: var(--rt-soft); color: var(--rt-link); }
#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
  color: var(--rt-link);
  background: var(--rt-tint);
  font-weight: 500;
}
#contentArea #sidebar .nav-list a .icon-arrow { display: none; }
#sidebar .contactUs, #sbContact { color: var(--rt-muted); font-size: 14px; }
#main-content .contentWrapper {
  min-height: 0;
  padding: 16px clamp(24px, 3vw, 40px) 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rt-text);
  box-shadow: none;
  overflow-wrap: anywhere;
}
.contentWrapper h1 { font-size: clamp(26px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.035em; }
.contentWrapper p.descrip { margin: 12px 0 20px; color: var(--rt-muted); font-size: 16px; line-height: 1.6; }
#categoryHead h1 { margin: 0; }
#categoryHead .sort { position: static; margin: 20px 0 0; }
#categoryHead .sort form { margin: 0; }
#categoryHead .sort #sortBy {
  width: auto;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--rt-control-border);
  border-radius: 8px;
  background: var(--rt-surface);
  color: var(--rt-text);
  font-size: 14px;
  line-height: normal;
  cursor: pointer;
}
.contentWrapper .articleList { margin: 24px 0 0; padding: 0; list-style: none; }
.contentWrapper .articleList > li { margin: 0; padding: 0; border-bottom: 0; }
.contentWrapper .articleList > li:last-child { border-bottom: 0; }
#contentArea .articleList > li > a {
  display: block;
  margin: 0;
  padding: 16px 8px;
  border-radius: 8px;
  color: var(--rt-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}
#contentArea .articleList > li > a:hover { color: var(--rt-link); background: var(--rt-tint); }
.articleList .icon-article-doc { display: none; }
#serp h1 strong { color: var(--rt-link); }
#serp .articleList > li { padding: 12px 0; 
  border-bottom: 1px solid var(--rt-border);
}
#serp .articleList > li > a { padding-block: 8px; font-weight: 600; }
#serp .articleList > li > p { margin: 0 8px 8px; color: var(--rt-muted); font-size: 15px; line-height: 1.6; white-space: normal; }
#serp .articlesFound, #serp .nada { color: var(--rt-muted); }
.most-pop-articles .popArticles a { font-size: 16px; line-height: 1.6; }
/* Compact pagination; reset Help Scout's white link backgrounds explicitly. */
#contentArea .pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#contentArea .pagination ul li a,
#contentArea .pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--rt-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  box-shadow: none;
}
#contentArea .pagination ul li:not(.active):not(.disabled) a:hover {
  background: var(--rt-soft);
  color: var(--rt-heading);
}
#contentArea .pagination ul .active a,
#contentArea .pagination ul .active span {
  color: var(--rt-heading);
  background: var(--rt-tint);
  font-weight: 500;
}
#contentArea .pagination ul .disabled a,
#contentArea .pagination ul .disabled span { color: #a3a3a3; background: transparent; }

/* 6. Article reading. Reset legacy div margins without styling all divs as prose. */
#fullArticle { max-width: 780px; margin: 0 auto; color: var(--rt-text); font-size: 16px; line-height: 1.7; overflow: visible; }
#fullArticle :is(p, ul, ol, li, div, blockquote, dd, table) { color: inherit; font-size: inherit; line-height: inherit; }
#fullArticle div { margin-bottom: 0; }
#fullArticle :is(p, ul, ol, dl, blockquote) { margin-top: 0; margin-bottom: 1.25em; }
#fullArticle :is(ul, ol) { margin-left: 1.5em; padding-left: 0; }
#fullArticle li { margin-bottom: 0.5em; }
#fullArticle li > :is(ul, ol) { margin-top: 0.5em; margin-bottom: 0; }
#fullArticle li > p { margin: 0 0 0.5em; }
#fullArticle :is(strong, b) { color: inherit; font-weight: 600; }
#fullArticle :is(h1, h2, h3, h4, h5, h6) { color: var(--rt-heading); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; scroll-margin-top: 24px; }
#fullArticle h1.title { margin: 0 30px 32px 0; font-size: clamp(26px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.035em; }
#fullArticle h2 { margin: 2em 0 0.7em; font-size: 26px; }
#fullArticle h3 { margin: 1.8em 0 0.65em; font-size: 22px; }
#fullArticle h4 { margin: 1.6em 0 0.6em; font-size: 19px; }
#fullArticle :is(h5, h6) { margin: 1.5em 0 0.5em; font-size: 16px; }
#fullArticle .title + :is(h2, h3) { margin-top: 0; }
#fullArticle a, #fullArticle strong a, #fullArticle a strong {
  color: var(--rt-link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  font-weight: 500;
}
#fullArticle a:hover { color: var(--rt-link-hover); text-decoration-thickness: 1px; 
  text-decoration: underline;
}
#fullArticle a:focus-visible { text-decoration: underline; }
#fullArticle .printArticle { top: 30px; right: 20px; padding: 10px; color: var(--rt-muted); text-decoration: none; }
#fullArticle img { max-width: 100%; height: auto; margin: 20px 0 28px; padding: 0; border: 0; border-radius: 6px; }
#fullArticle img.noBdr { border: 0; border-radius: 0; }
#fullArticle figure { max-width: 100%; }
#fullArticle figcaption, #fullArticle .image-caption { color: var(--rt-muted); font-size: 13px; line-height: 1.5; }
#fullArticle video, #fullArticle iframe { max-width: 100%; }
#fullArticle video { height: auto; }
#fullArticle .video { margin-bottom: 24px; }
#fullArticle hr { margin: 32px 0; border: 0; border-top: 1px solid var(--rt-border); }
#fullArticle blockquote { padding: 12px 20px; border-left: 3px solid var(--rt-control-border); color: var(--rt-muted); font-style: normal; }
#fullArticle :is(.callout, .callout-blue, .callout-green, .callout-yellow, .callout-red, .private-note) {
  margin: 24px 0;
  padding: 18px 20px;
  border-left: 2px solid #b8b8b8;
  border-radius: 0 6px 6px 0;
  background: var(--rt-soft);
  color: var(--rt-text);
  font-size: 16px;
}
#fullArticle .callout-red { border-color: #737373; }
#fullArticle .dashed { border-style: dashed; border-width: 1px; }
#fullArticle :is(.callout, .callout-blue, .callout-green, .callout-yellow, .callout-red, .private-note) > :is(h2, h3, h4) { margin-top: 0; line-height: 1.4; font-weight: 600; }
#fullArticle :is(.callout, .callout-blue, .callout-green, .callout-yellow, .callout-red, .private-note) > :last-child { margin-bottom: 0; }
#fullArticle .index-list { margin: 24px 0; padding: 20px; border: 0; border-radius: 8px; background: var(--rt-soft); }
#fullArticle .index-list h4 { margin: 0 0 12px; font-size: 14px; }
#fullArticle .index-list ul { margin: 0; list-style: none; }
#fullArticle .index-list li { margin: 0; padding: 4px 0; }
#fullArticle dt { float: none; display: block; width: auto; margin: 16px 0 4px; padding: 0; border-radius: 0; background: transparent; color: var(--rt-heading); font-size: 16px; font-weight: 600; line-height: 1.6; text-align: left; white-space: normal; }
#fullArticle dd { margin: 0 0 16px; padding: 0; }

/* Tables scroll individually. Header enhancement preserves native table display.
   Without that enhancement, the table itself is a scrollable CSS fallback. */
#fullArticle table { display: block; max-width: 100%; width: 100%; margin: 24px 0; overflow-x: auto; border: 0; border-collapse: separate; border-spacing: 0; border-radius: 0; font-size: 14px; }
#fullArticle :is(th, td) { min-width: 120px; padding: 12px 16px; border-top: 1px solid var(--rt-border); text-align: left; vertical-align: top; }
#fullArticle th { background: var(--rt-soft); color: var(--rt-heading); font-weight: 600; }
#fullArticle :is(th, td) > :last-child { margin-bottom: 0; }
#fullArticle .rt-table-scroll { max-width: 100%; margin: 24px 0; overflow-x: auto; border-radius: 8px; }
#fullArticle .rt-table-scroll > table { display: table; margin: 0; overflow: visible; }
/* Preserve the existing EasyRoutes 101 image-card component. */
#fullArticle .custom-table-wrapper { max-width: 100%; margin: 24px 0; }
#fullArticle .custom-table-wrapper table { display: table; table-layout: fixed; border: 0; }
#fullArticle .custom-table-wrapper :is(th, td) { min-width: 0; padding: 10px; border: 0; }
#fullArticle .custom-table-wrapper img { margin: 0; padding: 0; border: 0; }
#fullArticle .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 24px 0; }
#fullArticle .card { width: auto; padding: 20px; border: 0; border-radius: 8px; background: var(--rt-soft); }
#fullArticle .card h3 { margin-top: 0; }
/* Merchant snippets only; no retired syntax-highlighting/copy-button system. */
#fullArticle code { padding: 2px 5px; border: 0; border-radius: 4px; background: var(--rt-soft); color: var(--rt-heading); font: 0.88em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
#fullArticle pre { max-width: 100%; margin: 24px 0; padding: 18px; overflow-x: auto; border: 0; border-radius: 8px; background: var(--rt-soft); color: var(--rt-heading); font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; overflow-wrap: normal; }
#fullArticle pre code { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; overflow-wrap: normal; }
.articleRatings { flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 20px; border: 0; border-radius: 0; background: transparent; color: var(--rt-text); box-shadow: none; 
  border-top: 1px solid var(--rt-border);
}
.articleFoot { margin: 24px 0 0; padding: 16px 0 0; }
.articleFoot p, .articleFoot time, .articleFoot .lu { color: var(--rt-muted); font: 400 13px/1.6 var(--rt-font); }
#main-content .related { margin-top: 20px; padding: 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; 
  border-top: 1px solid var(--rt-border);
}
.related h3 { padding: 0; color: var(--rt-muted); font-size: 13px; letter-spacing: 0.06em; }
.related ul { margin: 8px 0 0; }
.related ul > li a { display: block; margin: 0; padding: 4px 0; font-size: 15px; }

/* 7. Contact forms — leave checkbox, file, hidden and widget controls alone. */
:is(#contactModal, #contactForm) :is(input[type='text'], input[type='email'], textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rt-control-border);
  border-radius: 8px;
  background: var(--rt-surface);
  color: var(--rt-text);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
:is(#contactModal, #contactForm) textarea { min-height: 140px; resize: vertical; }
:is(#contactModal, #contactForm) :is(button[type='submit'], input[type='submit']) {
  min-height: 44px; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--rt-heading); color: white; font-size: 15px; font-weight: 600; text-shadow: none;
}
:is(#contactModal, #contactForm) :is(button[type='submit'], input[type='submit']):hover { background: var(--rt-link); }
#contactModal { width: min(560px, calc(100% - 32px)); margin-left: 0; left: 50%; top: 5vh; transform: translateX(-50%); border: 1px solid var(--rt-border); border-radius: 8px; }
#contactModal .modal-body { max-height: 70vh; overflow-y: auto; padding: 24px; }
#contactModal h2 { padding: 24px 56px 0 24px; color: var(--rt-heading); font-size: 26px; }
#contactModal .control-label { float: none; width: auto; margin-bottom: 6px; padding: 0; color: var(--rt-text); font-size: 14px; text-align: left; }
#contactModal .controls { margin-left: 0; }
#contactModal .form-actions { padding: 0; background: transparent; border: 0; }
#contactModal #closeBtn { top: 16px; right: 16px; }
/* Preserve Help Scout's success/error colors; customize only the container. */
#contentArea .appMessage { max-width: 100%; border-radius: 8px; font-size: 15px; line-height: 1.6; }
#errorContainer p { color: var(--rt-muted); }
#contentArea footer { padding: 32px 0 40px; }
#contentArea footer p, #contentArea footer p a { color: var(--rt-muted); font-size: 13px; line-height: 1.6; }
#contentArea footer p a:hover { color: var(--rt-link); }

/* 8. Monochrome category glyphs; no colored badges or background tiles. */
.category-list .category, #sidebar :where(.nav-list a[href*='/category/']) { --rt-icon: '\f07b'; }
.category-list .category::before, #sidebar .nav-list a[href*='/category/']::before {
  content: var(--rt-icon);
  content: var(--rt-icon) / ""; /* Decorative glyph; category text supplies the name. */
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0 16px;
  border-radius: 0;
  background: transparent;
  color: var(--rt-muted);
  font: normal 19px/24px 'FontAwesome';
  text-align: center;
  flex-shrink: 0;
}
#sidebar .nav-list a[href*='/category/']::before { position: absolute; top: 10px; left: 8px; width: 24px; height: 24px; margin: 0; border-radius: 7px; font-size: 12px; line-height: 24px; }
#category-283, #sidebar a[href*='/category/283-'] { --rt-icon: '\f135'; }
#category-693, #sidebar a[href*='/category/693-'] { --rt-icon: '\f14e'; }
#category-357, #sidebar a[href*='/category/357-'] { --rt-icon: '\f277'; }
#category-356, #sidebar a[href*='/category/356-'] { --rt-icon: '\f044'; }
#category-359, #sidebar a[href*='/category/359-'] { --rt-icon: '\f0d1'; }
#category-358, #sidebar a[href*='/category/358-'] { --rt-icon: '\f2c1'; }
#category-354, #sidebar a[href*='/category/354-'] { --rt-icon: '\f0f3'; }
#category-687, #sidebar a[href*='/category/687-'] { --rt-icon: '\f0ed'; }
#category-689, #sidebar a[href*='/category/689-'] { --rt-icon: '\f0d0'; }
#category-688, #sidebar a[href*='/category/688-'] { --rt-icon: '\f02f'; }
#category-360, #sidebar a[href*='/category/360-'] { --rt-icon: '\f1e6'; }
#category-605, #sidebar a[href*='/category/605-'] { --rt-icon: '\f121'; }
#category-48, #sidebar a[href*='/category/48-'] { --rt-icon: '\f09d'; }
#category-41, #sidebar a[href*='/category/41-'] { --rt-icon: '\f0ad'; }
#category-696, #sidebar a[href*='/category/696-'] { --rt-icon: '\f05a'; }
#category-364, #sidebar a[href*='/category/364-'] { --rt-icon: '\f018'; }
#category-366, #sidebar a[href*='/category/366-'] { --rt-icon: '\f124'; }
#category-365, #sidebar a[href*='/category/365-'] { --rt-icon: '\f071'; }

/* 9. Responsive overrides. Search and categories stay above the mobile article. */
@media (min-width: 769px) and (max-width: 1099px) {
  #contentArea > .row-fluid { grid-template-columns: 224px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  :root { --rt-content-inset: 22px; }
  #mainNav .container-fluid, #contentArea.container-fluid { width: calc(100% - 32px); }
  #mainNav .nav { float: none; position: static; margin: 0; padding: 0 0 12px; text-align: left; }
  #mainNav .nav > li > a { margin: 2px 0; padding: 12px; font-size: 16px; line-height: 1.5; }
  #docsSearch { padding: 32px 16px 36px; margin-bottom: 28px; }
  #docsSearch h1 { margin-bottom: 24px; }
  #docsSearch #searchBar { gap: 8px; }
  #docsSearch #searchBar .search-query { height: 54px; padding-inline: 14px; }
  #docsSearch #searchBar button { flex-basis: 88px; height: 54px; padding-inline: 12px; font-size: 14px; }
  #contentArea > .row-fluid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 16px; }
  #contentArea #sidebar { grid-column: 1; grid-row: 1; }
  #contentArea #main-content { grid-column: 1; grid-row: 2; }
  #sidebar #searchBar.sm { margin-bottom: 18px; }
  #sidebar h3 { margin-bottom: 8px; }
  #sidebar .nav-list { display: flex; gap: 6px; max-width: 100%; margin: 0; padding: 4px 3px 10px; overflow-x: auto; }
  #sidebar .nav-list li { flex: 0 0 auto; margin: 0; }
  #sidebar .nav-list a { padding-right: 12px; border: 0; background: transparent; white-space: nowrap; }
  #main-content .contentWrapper { padding: 16px 4px 24px; }
  #fullArticle { font-size: 16px; }
  #fullArticle h2 { font-size: 24px; }
  #fullArticle h3 { font-size: 21px; }
  #fullArticle .printArticle { position: static; float: right; margin: -16px -8px 4px 4px; }
  #fullArticle h1.title { margin-right: 0; }
  .articleFoot .lu { float: none; }
  #contentArea .category-list .category { padding: 22px; }
}
@media (max-width: 600px) {
  :root { --rt-content-inset: 18px; }
  #contentArea .category-list, #contentArea .category-list.two-col { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 36px; }
  #contentArea .category-list .category { position: relative; padding: 20px 16px 20px 60px; }
  .category-list .category::before { position: absolute; left: 18px; top: 22px; margin: 0; }
  #fullArticle .custom-table-wrapper :is(table, tbody, tr, td) { display: block; width: 100%; }
  #fullArticle .custom-table-wrapper td { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #mainNav *, #docsSearch *, #contentArea *, #contactModal { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: white; color: black; font-size: 11pt; }
  #mainNav, #docsSearch, #sidebar, .related, .articleRatings, .printArticle, #contactModal, .modal-backdrop, #contentArea footer { display: none !important; }
  #contentArea.container-fluid, #contentArea > .row-fluid, #contentArea #main-content { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
  #main-content .contentWrapper { padding: 0; border: 0; box-shadow: none; }
  #fullArticle { max-width: none; font-size: 11pt; }
  #fullArticle :is(h1, h2, h3, h4) { break-after: avoid; }
  #fullArticle img { break-inside: avoid; }
  #fullArticle .rt-table-scroll { overflow: visible; }
  #fullArticle table { display: table; overflow: visible; font-size: 9pt; }
  #fullArticle :is(th, td) { min-width: 0; padding: 6px; }
  #fullArticle pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

#contentArea #sidebar {
  padding-inline-start: var(--rt-content-inset, 24px);
}
#fullArticle {
  margin: 0;
}