/*
 * LOGO.com Help Scout Docs theme, v1.
 * Selectors checked against help.logo.com on 2026-10-13 (default Docs theme).
 *
 * The variables mirror Stitch tokens:
 * - Inter and its Arial fallback metrics: apps/stitch/src/styles/fonts.css
 * - Blue scale (#1890ff logo blue, #0074df primary, #0057a7 hover):
 *   packages/tailwind-config/tailwind.config.ts
 * - Text, border, surface, and shadow roles: packages/tailwind-config/theme.css
 * - Button and card shapes: packages/ui/src/core/button/button-variants.ts and
 *   apps/stitch/src/features/marketing/contact/help-center-callout.tsx
 *
 * Help Scout prints a color <style> block and Bootstrap 2 rules after nothing
 * we control, so selectors start with `body` and an id to win on specificity
 * instead of using !important.
 */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

html body {
  --logo-text: #111827;
  --logo-text-body: #374151;
  --logo-text-muted: #6b7280;
  --logo-text-faint: #9ca3af;
  --logo-border: #e5e7eb;
  --logo-border-light: #f3f4f6;
  --logo-surface: #ffffff;
  --logo-surface-muted: #f8fafc;
  --logo-surface-hover: #f1f5f9;
  --logo-brand: #1890ff;
  --logo-link: #0074df;
  --logo-link-hover: #0057a7;
  --logo-tint: #e8f4ff;
  --logo-tint-strong: #bbdeff;
  --logo-ring: #6ab7ff;
  --logo-radius-sm: 8px;
  --logo-radius-md: 12px;
  --logo-radius-lg: 16px;
  --logo-radius-xl: 24px;
  --logo-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --logo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --logo-page: 1120px;
  --logo-gutter: 24px;

  --logo-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
  --logo-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  --logo-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
  --logo-icon-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z'/%3E%3C/svg%3E");

  margin: 0;
  padding: 0;
  background: var(--logo-surface);
  color: var(--logo-text);
  font-family: Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body #mainNav *,
body #docsSearch *,
body #contentArea * {
  box-sizing: border-box;
}

html body h1,
html body h2,
html body h3,
html body h4 {
  color: var(--logo-text);
  font-family: inherit;
  text-rendering: optimizeLegibility;
}

html body a {
  color: var(--logo-link);
}

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible {
  outline: 3px solid var(--logo-ring);
  outline-offset: 2px;
}

/* Header */

body #mainNav.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin: 0;
  border-bottom: 1px solid var(--logo-border-light);
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

body #mainNav .navbar-inner {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

body #mainNav .navbar-inner .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  height: 72px;
  margin: 0 auto;
  padding: 0 var(--logo-gutter);
}

body #mainNav .container-fluid::before,
body #mainNav .container-fluid::after {
  content: none;
}

body #mainNav .brand {
  float: none;
  display: flex;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

body #mainNav .brand img {
  width: 40px;
  height: 40px;
  max-height: none;
}

body #mainNav .btn-navbar,
body #mainNav #contactMobile {
  display: none;
}

body #mainNav .nav-collapse,
body #mainNav .nav-collapse.collapse {
  position: static;
  display: block;
  float: none;
  clear: none;
  height: auto;
  overflow: visible;
}

body #mainNav .nav {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  float: none;
  margin: 0;
  text-align: left;
}

body #mainNav .nav > li {
  display: flex;
  float: none;
}

body #mainNav .nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--logo-radius-sm);
  background: transparent;
  color: var(--logo-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

body #mainNav .nav > li > a:hover,
body #mainNav .nav > li > a:focus {
  background: var(--logo-surface-hover);
  color: var(--logo-text);
}

body #mainNav #backToLogo svg {
  width: 14px;
  height: 14px;
}

body #mainNav #contact {
  display: flex;
}

body #mainNav #contact > a {
  border-color: var(--logo-border);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
}

/* Home: hero and search */

body #docsSearch {
  margin: 0;
  padding: 72px var(--logo-gutter) 64px;
  border: 0;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0) 55%, var(--logo-surface)),
    radial-gradient(70% 90% at 50% 0%, var(--logo-tint) 0%, rgb(232 244 255 / 0) 70%),
    radial-gradient(45% 70% at 0% 100%, #fff7ed 0%, rgb(255 247 237 / 0) 70%),
    radial-gradient(40% 70% at 100% 100%, #faf5ff 0%, rgb(250 245 255 / 0) 70%), var(--logo-surface);
  text-align: center;
}

body #docsSearch::before {
  content: 'Help Center';
  display: inline-flex;
  margin-bottom: 20px;
  padding: 4px 12px;
  border: 1px solid var(--logo-tint-strong);
  border-radius: 999px;
  background: var(--logo-surface);
  color: var(--logo-link);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

body #docsSearch h1 {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  color: var(--logo-text);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

body #docsSearch #searchBar {
  position: relative;
  width: min(640px, 100%);
  margin: 32px auto 0;
  padding: 0;
  text-align: left;
}

body #docsSearch #searchBar .search-query {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 124px 0 48px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-md);
  background: var(--logo-surface);
  box-shadow:
    var(--logo-shadow-xs),
    0 12px 32px -12px rgb(24 144 255 / 0.25);
  color: var(--logo-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

body #docsSearch #searchBar::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 1;
  width: 20px;
  height: 20px;
  background: var(--logo-text-muted);
  -webkit-mask: var(--logo-icon-search) center / contain no-repeat;
  mask: var(--logo-icon-search) center / contain no-repeat;
  pointer-events: none;
}

body #docsSearch #searchBar .search-query::placeholder {
  color: var(--logo-text-muted);
}

body #docsSearch #searchBar .search-query:focus {
  border-color: var(--logo-brand);
  outline: none;
  box-shadow: 0 0 0 4px rgb(24 144 255 / 0.15);
}

body #docsSearch #searchBar button {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--logo-radius-sm);
  background: var(--logo-link);
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

body #docsSearch #searchBar button:hover {
  background: var(--logo-link-hover);
}

body #docsSearch #searchBar button span {
  display: inline;
  width: auto;
  font-size: 15px;
  font-weight: 600;
  text-indent: 0;
}

body #docsSearch #searchBar button .icon-search {
  display: none;
}

/* Search typeahead, on the home hero and the sidebar */

body #searchBar #serp-dd,
body #searchBar #serp-dd.sb {
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-md);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-lg);
  overflow: hidden;
  z-index: 20;
}

body #searchBar #serp-dd .result > li {
  margin: 0;
  border-radius: var(--logo-radius-sm);
}

body #searchBar #serp-dd .result a {
  padding: 10px 12px;
  border-radius: var(--logo-radius-sm);
  color: var(--logo-text);
  font-size: 14px;
  font-weight: 500;
}

body #searchBar #serp-dd .result a:hover,
body #searchBar #serp-dd .result > li.active,
body #searchBar #serp-dd .result > li.active a {
  background: var(--logo-tint);
  color: var(--logo-link-hover);
}

/* Home: topics */

body #contentArea.container-fluid {
  max-width: none;
  margin: 0;
  padding: 0;
}

body #contentArea.container-fluid::before,
body #contentArea.container-fluid::after {
  content: none;
}

body #contentArea .category-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--logo-page);
  margin: 0 auto;
  padding: 56px var(--logo-gutter) 0;
  text-align: left;
}

body #contentArea .category-list > h2 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 0;
  color: var(--logo-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

body #contentArea .category-list .category {
  --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25'/%3E%3C/svg%3E");
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-lg);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
  color: var(--logo-text);
  text-align: left;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

body #contentArea .category-list .category::before {
  content: '';
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--logo-radius-md);
  background: var(--logo-tint);
}

body #contentArea .category-list .category::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 32px;
  width: 20px;
  height: 20px;
  background: var(--logo-link-hover);
  -webkit-mask: var(--logo-icon) center / contain no-repeat;
  mask: var(--logo-icon) center / contain no-repeat;
}

body #contentArea .category-list .category:hover,
body #contentArea .category-list .category:focus-visible {
  border-color: var(--logo-tint-strong);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-lg);
  transform: translateY(-2px);
  text-decoration: none;
}

body #contentArea .category-list h3 {
  margin: 0 0 4px;
  color: var(--logo-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

body #contentArea .category-list .category > p:empty {
  display: none;
}

body #contentArea .category-list .category > p:not(.article-count) {
  margin: 0 0 8px;
  color: var(--logo-text-muted);
  font-size: 14px;
}

body #contentArea .category-list .category .article-count,
body #contentArea .category-list .category:hover .article-count {
  margin: 0;
  color: var(--logo-text-muted);
  font-size: 14px;
  font-weight: 400;
}

/*
 * Topic icons, keyed by the Help Scout category id in each card's id.
 * Heroicons outline, the set Stitch uses. A new category falls back to the
 * book icon above.
 */
/* prettier-ignore */
body #contentArea #category-51 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-5 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-53 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-36 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.750l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-83 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-78 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-27 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.250-3.285Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-104 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-18 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-56 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-68 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z'/%3E%3C/svg%3E"); }
/* prettier-ignore */
body #contentArea #category-54 { --logo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18'/%3E%3C/svg%3E"); }

/* Home: popular articles and contact, inserted by footer.html */

body .logo-home-extra {
  display: grid;
  gap: 56px;
  max-width: var(--logo-page);
  margin: 0 auto;
  padding: 56px var(--logo-gutter) 0;
}

body .logo-popular h2 {
  margin: 0;
  color: var(--logo-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

body .logo-popular-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  margin: 16px 0 0;
  padding: 4px 24px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-lg);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
  list-style: none;
}

body .logo-popular-list li {
  margin: 0;
  border-bottom: 1px solid var(--logo-border-light);
}

body .logo-popular-list li:last-child,
body .logo-popular-list li:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

body .logo-popular-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  color: var(--logo-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

body .logo-popular-list a:hover {
  color: var(--logo-link);
  text-decoration: none;
}

body .logo-see-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: var(--logo-link);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

body .logo-see-all:hover {
  color: var(--logo-link-hover);
  text-decoration: none;
}

body .logo-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 24px;
  padding: 32px;
  border-radius: var(--logo-radius-xl);
  background: linear-gradient(to bottom right, var(--logo-tint), #f3e8ff);
}

body .logo-support-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--logo-radius-md);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
  color: var(--logo-link-hover);
}

body .logo-support-mark svg {
  width: 24px;
  height: 24px;
}

body .logo-support h2 {
  margin: 0;
  color: var(--logo-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

body .logo-support p {
  margin: 4px 0 0;
  color: var(--logo-text-body);
  font-size: 15px;
  line-height: 1.5;
}

body .logo-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body .logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--logo-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

body .logo-btn:hover {
  text-decoration: none;
}

body .logo-btn-primary,
body .logo-btn-primary:hover,
body .logo-btn-primary:focus {
  background: var(--logo-link);
  color: #fff;
}

body .logo-btn-primary:hover {
  background: var(--logo-link-hover);
}

body .logo-btn-secondary,
body .logo-btn-secondary:hover,
body .logo-btn-secondary:focus {
  border-color: var(--logo-border);
  background: var(--logo-surface);
  color: var(--logo-text);
}

body .logo-btn-secondary:hover {
  background: var(--logo-surface-hover);
}

/* Category, article, collection, and search pages */

body #contentArea .row-fluid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  max-width: var(--logo-page);
  margin: 0 auto;
  padding: 40px var(--logo-gutter) 0;
}

body #contentArea .row-fluid::before,
body #contentArea .row-fluid::after {
  content: none;
}

body #contentArea #sidebar,
body #contentArea #sidebar.span3 {
  position: sticky;
  top: 96px;
  grid-row: 1;
  grid-column: 1;
  float: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* The sidebar is about 560px tall; on shorter screens it scrolls with the page. */
@media (max-height: 699px) {
  body #contentArea #sidebar,
  body #contentArea #sidebar.span3 {
    position: static;
  }
}

body #contentArea #main-content,
body #contentArea #main-content.span9 {
  grid-row: 1;
  grid-column: 2;
  float: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

body #contentArea .contentWrapper,
body #contentArea .contentWrapper.withRelated {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--logo-text);
  overflow-wrap: break-word;
}

body .logo-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  color: var(--logo-text-muted);
  font-size: 14px;
  font-weight: 500;
}

body .logo-crumbs a {
  color: var(--logo-text-muted);
  text-decoration: none;
}

body .logo-crumbs a:hover {
  color: var(--logo-link);
}

body .logo-crumbs span[aria-hidden] {
  width: 12px;
  height: 12px;
  background: var(--logo-text-faint);
  -webkit-mask: var(--logo-icon-chevron) center / contain no-repeat;
  mask: var(--logo-icon-chevron) center / contain no-repeat;
}

body #contentArea .contentWrapper h1,
body #contentArea #fullArticle h1.title {
  margin: 0;
  padding: 0;
  color: var(--logo-text);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

body #contentArea #categoryHead {
  margin-bottom: 24px;
}

body #contentArea #categoryHead h1 {
  margin-right: 0;
}

body #contentArea #categoryHead .sort {
  display: none;
}

body #contentArea .contentWrapper p {
  margin-top: 0;
  color: var(--logo-text-body);
}

body #contentArea .contentWrapper p.descrip {
  margin: 8px 0 0;
  color: var(--logo-text-muted);
  font-size: 16px;
}

body #contentArea .contentWrapper p.descrip:empty {
  display: none;
}

/* Article lists: categories, collections, search results, related */

body #contentArea .articleList,
body #contentArea .related ul {
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-lg);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
  font-size: 16px;
  list-style: none;
  overflow: hidden;
}

body #contentArea #categoryHead + .articleList {
  margin-top: 0;
}

body #contentArea .articleList > li,
body #contentArea .related ul > li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--logo-border-light);
}

body #contentArea .articleList > li:first-child,
body #contentArea .related ul > li:first-child {
  border-top: 0;
}

body #contentArea .articleList a,
body #contentArea .related ul > li a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 20px;
  color: var(--logo-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

body #contentArea .articleList a::before,
body #contentArea .related ul > li a::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--logo-link);
  -webkit-mask: var(--logo-icon-doc) center / contain no-repeat;
  mask: var(--logo-icon-doc) center / contain no-repeat;
}

body #contentArea .articleList a::after,
body #contentArea .related ul > li a::after,
body .logo-popular-list a::after {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--logo-text-faint);
  -webkit-mask: var(--logo-icon-chevron) center / contain no-repeat;
  mask: var(--logo-icon-chevron) center / contain no-repeat;
  transition: transform 150ms ease;
}

body #contentArea .articleList a:hover,
body #contentArea .related ul > li a:hover {
  background: var(--logo-surface-muted);
  color: var(--logo-link);
}

body #contentArea .articleList a:hover span,
body #contentArea .related ul > li a:hover span {
  text-decoration: none;
}

body #contentArea .articleList a:hover::after,
body #contentArea .related ul > li a:hover::after,
body .logo-popular-list a:hover::after {
  background: var(--logo-link);
  transform: translateX(2px);
}

body #contentArea .articleList .icon-article-doc,
body #contentArea .related .icon-article-doc {
  display: none;
}

body #contentArea #serp h1 {
  font-size: 28px;
}

body #contentArea #serp .articlesFound {
  margin: 8px 0 24px;
  color: var(--logo-text-muted);
  font-size: 14px;
}

body #contentArea #serp .articleList > li {
  padding: 16px 20px;
}

body #contentArea #serp .articleList > li a {
  display: flex;
  padding: 0;
  font-size: 16px;
}

body #contentArea #serp .articleList > li a::after {
  content: none;
}

body #contentArea #serp .articleList > li a:hover {
  background: transparent;
}

body #contentArea #serp .articleList > li p {
  margin: 6px 0 0 32px;
  color: var(--logo-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

body #contentArea .pagination ul {
  display: flex;
  gap: 4px;
  margin: 24px 0 0;
  box-shadow: none;
}

body #contentArea .pagination ul > li > a {
  float: none;
  display: inline-flex;
  min-width: 36px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-sm);
  background: var(--logo-surface);
  color: var(--logo-text);
  font-weight: 500;
}

body #contentArea .pagination ul > li.active > a {
  border-color: var(--logo-link);
  background: var(--logo-link);
  color: #fff;
}

body #contentArea .related {
  max-width: 760px;
  margin-top: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

body #contentArea .related h3 {
  margin: 0 0 12px;
  padding: 0;
  color: var(--logo-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

body #contentArea .related ul {
  margin-top: 0;
}

/* Article body */

body #contentArea #fullArticle {
  position: relative;
  max-width: 760px;
}

body #contentArea #fullArticle h1.title {
  margin-bottom: 24px;
  padding-right: 48px;
}

body #contentArea #fullArticle .printArticle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--logo-radius-sm);
  color: transparent;
}

body #contentArea #fullArticle .printArticle:hover {
  background: var(--logo-surface-hover);
}

body #contentArea #fullArticle .printArticle .icon-print {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--logo-text-muted);
  -webkit-mask: var(--logo-icon-print) center / contain no-repeat;
  mask: var(--logo-icon-print) center / contain no-repeat;
}

body #contentArea #fullArticle .printArticle .icon-print::before {
  content: none;
}

body #contentArea #fullArticle,
body #contentArea #fullArticle p,
body #contentArea #fullArticle ul,
body #contentArea #fullArticle ol,
body #contentArea #fullArticle li,
body #contentArea #fullArticle div,
body #contentArea #fullArticle blockquote,
body #contentArea #fullArticle dd,
body #contentArea #fullArticle table {
  color: var(--logo-text-body);
  font-size: 16px;
  line-height: 1.75;
}

body #contentArea #fullArticle p {
  margin: 0 0 16px;
}

/* Help Scout's editor puts <br> between blocks as spacing; block margins already space them. */
body #contentArea #fullArticle > br {
  display: none;
}

body #contentArea #fullArticle h2:empty {
  display: none;
}

body #contentArea #fullArticle h2 {
  margin: 40px 0 12px;
  color: var(--logo-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

body #contentArea #fullArticle h3 {
  margin: 32px 0 8px;
  color: var(--logo-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

body #contentArea #fullArticle h2 strong,
body #contentArea #fullArticle h3 strong {
  font-weight: inherit;
}

body #contentArea #fullArticle strong,
body #contentArea #fullArticle b {
  color: var(--logo-text);
  font-weight: 600;
}

body #contentArea #fullArticle a,
body #contentArea #fullArticle strong a,
body #contentArea #fullArticle a strong {
  color: var(--logo-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--logo-tint-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body #contentArea #fullArticle a:hover {
  color: var(--logo-link-hover);
  text-decoration-color: currentColor;
}

body #contentArea #fullArticle ul,
body #contentArea #fullArticle ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

body #contentArea #fullArticle li {
  margin: 4px 0;
}

body #contentArea #fullArticle img {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-md);
}

body #contentArea #fullArticle table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0 24px;
  border: 1px solid var(--logo-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--logo-radius-md);
  font-size: 14px;
  overflow-x: auto;
}

body #contentArea #fullArticle td,
body #contentArea #fullArticle th {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--logo-border-light);
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

body #contentArea #fullArticle tr:last-child td {
  border-bottom: 0;
}

body #contentArea #fullArticle tr:first-child td,
body #contentArea #fullArticle th {
  background: var(--logo-surface-muted);
  color: var(--logo-text);
  font-weight: 600;
}

body #contentArea #fullArticle blockquote,
body #contentArea #fullArticle .callout,
body #contentArea #fullArticle .callout-blue,
body #contentArea #fullArticle .callout-green,
body #contentArea #fullArticle .callout-red,
body #contentArea #fullArticle .callout-yellow {
  margin: 16px 0 24px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--logo-radius-md);
  background: var(--logo-tint);
  color: var(--logo-text-body);
  font-size: 15px;
}

body #contentArea #fullArticle .callout-green {
  background: #f0fdf4;
}

body #contentArea #fullArticle .callout-red {
  background: #fef2f2;
}

body #contentArea #fullArticle .callout-yellow {
  background: #fefce8;
}

body #contentArea #fullArticle code {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--logo-surface-hover);
  color: var(--logo-text);
  font-size: 0.9em;
}

body #contentArea .articleRatings {
  justify-content: space-between;
  max-width: 760px;
  margin-top: 40px;
  padding: 16px 20px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-lg);
  box-shadow: none;
  color: var(--logo-text);
  font-size: 15px;
  font-weight: 500;
}

body #contentArea .articleRatings .rating-face {
  fill: var(--logo-text-faint);
}

body #contentArea .rateAction.selected .rating-face,
body #contentArea .rateAction:hover:not([disabled='disabled']) .rating-face,
body #contentArea .rateAction:focus:not([disabled='disabled']) .rating-face {
  fill: var(--logo-link);
}

body #contentArea .articleFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 760px;
  margin-top: 16px;
}

body #contentArea .articleFoot .icon-contact {
  display: none;
}

body #contentArea .articleFoot p,
body #contentArea .articleFoot time,
body #contentArea .articleFoot p.lu,
body #contentArea .articleFoot time.lu {
  float: none;
  margin: 0;
  color: var(--logo-text-muted);
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
}

body #contentArea .articleFoot .help {
  color: var(--logo-text-body);
}

body #contentArea #sbContact,
body #contentArea #sbContactMobile {
  border-bottom: 0;
  color: var(--logo-link);
  font-weight: 600;
}

/* Sidebar */

body #contentArea #sidebar form {
  position: relative;
  margin: 0 0 24px;
}

body #contentArea #sidebar form::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 12px;
  z-index: 1;
  width: 18px;
  height: 18px;
  background: var(--logo-text-muted);
  -webkit-mask: var(--logo-icon-search) center / contain no-repeat;
  mask: var(--logo-icon-search) center / contain no-repeat;
  pointer-events: none;
}

body #contentArea #sidebar form .search-query {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px 0 38px;
  border: 1px solid var(--logo-border);
  border-radius: var(--logo-radius-sm);
  background: var(--logo-surface);
  box-shadow: var(--logo-shadow-xs);
  color: var(--logo-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

body #contentArea #sidebar form .search-query:focus {
  border-color: var(--logo-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgb(24 144 255 / 0.15);
}

body #contentArea #sidebar form button {
  display: none;
}

body #contentArea #sidebar h3 {
  margin: 0 0 8px;
  padding: 0 12px;
  color: var(--logo-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

body #contentArea #sidebar .nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}

body #contentArea #sidebar .nav-list li {
  margin: 0;
}

body #contentArea #sidebar .nav-list a,
body #contentArea #sidebar .nav-list .active a {
  display: block;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--logo-radius-sm);
  background: transparent;
  color: var(--logo-text-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

body #contentArea #sidebar .nav-list a:hover,
body #contentArea #sidebar .nav-list a:focus {
  background: var(--logo-surface-hover);
  color: var(--logo-text);
}

body #contentArea #sidebar .nav-list .active a,
body #contentArea #sidebar .nav-list .active a:hover,
body #contentArea #sidebar .nav-list .active a:focus {
  background: var(--logo-tint);
  color: var(--logo-link-hover);
  font-weight: 600;
}

body #contentArea #sidebar .nav-list .icon-arrow,
body #contentArea #sidebar .nav-list .active a .icon-arrow {
  display: none;
}

/* Footer. The Help Scout credit is the only span in this line. */

body #contentArea > footer {
  max-width: var(--logo-page);
  margin: 72px auto 0;
  padding: 32px var(--logo-gutter) 40px;
  border-top: 1px solid var(--logo-border-light);
}

body #contentArea > footer p,
body #contentArea > footer.center p {
  margin: 0;
  color: var(--logo-text-muted);
  font-size: 14px;
  text-align: center;
}

body #contentArea > footer p > span {
  display: none;
}

body #contentArea > footer p a {
  color: var(--logo-text);
  font-weight: 500;
}

body #contentArea > footer p a:hover {
  color: var(--logo-link);
}

/* Tablet */

@media (max-width: 1023px) {
  body #contentArea .category-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body #contentArea .row-fluid {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }
}

/* Phone and small tablet: one column, sidebar categories become a chip row. */

@media (max-width: 767px) {
  html body {
    --logo-gutter: 16px;
  }

  body #mainNav .navbar-inner .container-fluid {
    height: 60px;
  }

  body #mainNav .brand img {
    width: 36px;
    height: 36px;
  }

  body #mainNav .nav {
    gap: 4px;
  }

  body #mainNav .nav > li > a {
    padding: 8px 10px;
  }

  body #mainNav .logo-long {
    display: none;
  }

  body #docsSearch {
    padding: 40px var(--logo-gutter) 36px;
  }

  body #docsSearch::before {
    margin-bottom: 14px;
    font-size: 12px;
  }

  body #docsSearch h1 {
    font-size: 30px;
    line-height: 1.15;
  }

  body #docsSearch #searchBar {
    margin-top: 24px;
  }

  body #docsSearch #searchBar .search-query {
    height: 52px;
    padding-right: 96px;
    padding-left: 44px;
  }

  body #docsSearch #searchBar::before {
    top: 16px;
    left: 14px;
  }

  body #docsSearch #searchBar button {
    top: 6px;
    right: 6px;
    height: 40px;
    padding: 0 14px;
  }

  body #contentArea .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 36px;
  }

  body #contentArea .category-list > h2,
  body .logo-popular h2,
  body .logo-support h2 {
    font-size: 18px;
  }

  body #contentArea .category-list .category {
    padding: 14px;
    border-radius: var(--logo-radius-md);
  }

  body #contentArea .category-list .category::before {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  body #contentArea .category-list .category::after {
    top: 23px;
    left: 23px;
    width: 18px;
    height: 18px;
  }

  body #contentArea .category-list h3 {
    font-size: 15px;
  }

  body #contentArea .category-list .category .article-count {
    font-size: 13px;
  }

  body .logo-home-extra {
    gap: 40px;
    padding-top: 40px;
  }

  body .logo-popular-list {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px;
  }

  body .logo-popular-list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--logo-border-light);
  }

  body .logo-popular-list a {
    padding: 14px 0;
  }

  body .logo-support {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 20px;
    border-radius: var(--logo-radius-lg);
  }

  body .logo-support-actions {
    flex-direction: column;
  }

  body .logo-support-actions .logo-btn {
    width: 100%;
  }

  body #contentArea .row-fluid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 20px;
  }

  body #contentArea #sidebar,
  body #contentArea #sidebar.span3 {
    position: static;
    grid-row: 1;
    grid-column: 1;
  }

  body #contentArea #main-content,
  body #contentArea #main-content.span9 {
    grid-row: 2;
    grid-column: 1;
  }

  body #contentArea #sidebar form {
    margin-bottom: 12px;
  }

  body #contentArea #sidebar h3 {
    display: none;
  }

  body #contentArea #sidebar .nav-list {
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(var(--logo-gutter) * -1);
    padding: 0 var(--logo-gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body #contentArea #sidebar .nav-list::-webkit-scrollbar {
    display: none;
  }

  body #contentArea #sidebar .nav-list li {
    flex-shrink: 0;
  }

  body #contentArea #sidebar .nav-list a,
  body #contentArea #sidebar .nav-list .active a {
    padding: 6px 14px;
    border: 1px solid var(--logo-border);
    border-radius: 999px;
    background: var(--logo-surface);
    white-space: nowrap;
  }

  body #contentArea #sidebar .nav-list .active a,
  body #contentArea #sidebar .nav-list .active a:hover {
    border-color: var(--logo-tint-strong);
    background: var(--logo-tint);
  }

  body #contentArea .contentWrapper h1,
  body #contentArea #fullArticle h1.title {
    font-size: 28px;
  }

  body #contentArea #fullArticle h2 {
    margin-top: 32px;
    font-size: 21px;
  }

  body #contentArea .articleList a,
  body #contentArea .related ul > li a {
    padding: 14px 16px;
    font-size: 15px;
  }

  body #contentArea .articleRatings {
    flex-wrap: wrap;
    gap: 8px;
  }

  body #contentArea > footer {
    margin-top: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #contentArea .category-list .category,
  body #contentArea .category-list .category:hover {
    transition: none;
    transform: none;
  }
}

@media print {
  body #mainNav.navbar,
  body #contentArea #sidebar,
  body #contentArea .articleRatings {
    display: none;
  }

  body #contentArea .row-fluid {
    display: block;
  }
}