/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

*,:after,:before{
	box-sizing:border-box;
}

html{
	font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
	line-height:1.15;
	-webkit-text-size-adjust:100%;
	-moz-tab-size:4;
	  -o-tab-size:4;
	     tab-size:4;
}

body{
	margin:0;
}

b,strong{
	font-weight:bolder;
}

code,kbd,pre,samp{
	font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
	font-size:1em;
}

small{
	font-size:80%;
}

sub,sup{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}

sub{
	bottom:-.25em;
}

sup{
	top:-.5em;
}

table{
	border-color:currentcolor;
}

button,input,optgroup,select,textarea{
	font-family:inherit;
	font-size:100%;
	line-height:1.15;
	margin:0;
}

[type=button],[type=reset],[type=submit],button{
	-webkit-appearance:button;
}

legend{
	padding:0;
}

progress{
	vertical-align:baseline;
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button{
	height:auto;
}

[type=search]{
	-webkit-appearance:textfield;
	outline-offset:-2px;
}

::-webkit-search-decoration{
	-webkit-appearance:none;
}

::-webkit-file-upload-button{
	-webkit-appearance:button;
	font:inherit;
}

summary{
	display:list-item;
}

html{background-color:#fff;min-height:100%; box-sizing:border-box; overflow-y:scroll; line-height:20px; color:#293239;
  font-feature-settings:"kern", "kern";
  font-kerning:normal;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;
  font-size:14px;}

*{ font-weight:inherit; }

*,:after,:before{ box-sizing:inherit; }

a{color:#1f73b7;}

b{font-weight:600;}

button{cursor:pointer;padding:0;}

button,input,optgroup,select,textarea{line-height:inherit;font-family:inherit;}

code{font-size:.95em;}

code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;}

em{ font-style:inherit; }

fieldset,iframe{border-width:0;}

h1,h2,h3,h4,h5,h6{ font-size:inherit; }

blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0;padding:0;}

hr{
  border:none;
  border-top:1px solid;
  border-color:#d8dcde;
}

ins,u{text-decoration-line:none;}

ol,ul{list-style-type:none;}

img{max-width:100%;}

strong{ font-weight:inherit; }

svg{max-height:100%;}

[tabindex="-1"]:focus{ outline:none !important; }

:root {
  color-scheme: light;

  /* Garden/Flora design tokens from @zendesk-ui/react-components. */

  /* Border radius */
  --hc-border-radius-md: 8px;
  --hc-border-radius-lg: 12px;
  --hc-border-radius-xxl: 24px;
  --hc-border-radius-full: 9999px;

  /* Spacing */
  --hc-space-base: 4px;
  --hc-space-xs: 8px;
  --hc-space-sm: 12px;
  --hc-space-md: 20px;
  --hc-space-lg: 32px;
  --hc-space-xl: 40px;

  /* Font sizes */

  --hc-font-size-sm: 12px;
  --hc-font-size-md: 14px;
  --hc-font-size-lg: 18px;
  --hc-font-size-xl: 22px;
  --hc-font-size-xxl: 26px;
  --hc-font-size-xxxl: 36px;

  /* Font weights */
  --hc-font-weight-regular: 400;
  --hc-font-weight-semibold: 600;

  /* Line heights */
  --hc-line-height-sm: 16px;
  --hc-line-height-md: 20px;
  --hc-line-height-lg: 24px;
  --hc-line-height-xl: 28px;
  --hc-line-height-xxl: 32px;
  --hc-line-height-xxxl: 44px;

  /* Container max widths */
  --hc-container-md-max-width: 760px;
  --hc-container-lg-max-width: 1160px;

  /* Sidebar */
  --hc-sidebar-rail-width: 56px;

  /*
   * Color system — two layers:
   *   1. Palette: raw shades (100..1200). `--hc-primary-color-*` and
   *      `--hc-frame-color-*` are set dynamically by `assets/color-scheme.js`
   *      before first paint. `--hc-neutral-*` is static, copied from
   *      `PALETTE.grey` in `@zendesk-ui/react-components` (Flora theme).
   *      Named `neutral` (not `grey`) to match Garden's role-based naming.
   *   2. Semantic: named after Garden's `colors.variables.{light,dark}`
   *      taxonomy. Light values on `:root`; dark overrides under
   *      `[data-hc-color-scheme="dark"]`.
   */

  /* Palette — primary base hue (used by React ThemeProvider; the 12-shade
	 * scale is set on :root dynamically by `assets/color-scheme.js`). */
  --hc-primary-color: #4F6BBF;

  /* Palette — accent base hue (the 12-shade scale is set on :root
   * dynamically by `assets/color-scheme.js`). */
  --hc-accent-color: #885BB3;

  /* Palette — neutral (copied from Flora PALETTE.grey in @zendesk-ui/react-components) */
  --hc-neutral-100: #f7f7f7;
  --hc-neutral-200: #eae9e8;
  --hc-neutral-300: #dcdcda;
  --hc-neutral-400: #b7b7b3;
  --hc-neutral-500: #999b97;
  --hc-neutral-600: #8b8e89;
  --hc-neutral-700: #646864;
  --hc-neutral-800: #404241;
  --hc-neutral-900: #2f3130;
  --hc-neutral-1000: #202121;
  --hc-neutral-1100: #19191a;
  --hc-neutral-1200: #0c0c0d;

  /* Semantic — light (from DEFAULT_THEME.colors.variables.light) */
  --hc-bg-default: #fff; /* palette.white */
  --hc-bg-raised: #fff; /* palette.white */
  --hc-bg-recessed: var(--hc-neutral-100);
  --hc-bg-subtle: var(--hc-neutral-100);
  --hc-bg-emphasis: var(--hc-neutral-700);
  --hc-bg-primary-emphasis: var(--hc-primary-color-700);
  --hc-bg-accent: var(--hc-accent-color-100);
  --hc-widget-action: var(
    --hc-accent-color-700
  ); /* embedded Messenger `action` color (buttons, input border) */

  --hc-border-default: var(--hc-neutral-300);
  --hc-border-emphasis: var(--hc-neutral-600);
  --hc-border-subtle: var(--hc-neutral-200);
  --hc-border-primary-emphasis: var(--hc-primary-color-700);

  --hc-fg-default: var(--hc-neutral-900);
  --hc-fg-subtle: var(--hc-neutral-700);
  --hc-fg-on-emphasis: #fff; /* palette.white */
  --hc-messenger-on-background: var(--hc-neutral-1000);
  --hc-fg-primary: var(--hc-primary-color-700);
  --hc-fg-primary-hover: var(
    --hc-primary-color-800
  ); /* foreground.primary + 100 offset */
  --hc-fg-primary-active: var(
    --hc-primary-color-900
  ); /* foreground.primary + 200 offset */

  /* Button colors */
  --hc-button-bg-emphasis: var(--hc-neutral-900);
  --hc-button-bg-emphasis-hover: var(--hc-neutral-800);
  --hc-button-bg-emphasis-active: var(--hc-neutral-700);

  --hc-frame-color: var(--hc-frame-color-100);
}

/* Semantic — dark (from DEFAULT_THEME.colors.variables.dark) */

[data-hc-color-scheme="dark"] {
  color-scheme: dark;

  --hc-bg-default: var(--hc-neutral-1100);
  --hc-bg-raised: var(--hc-neutral-1000);
  --hc-bg-recessed: var(--hc-neutral-1200);
  --hc-bg-subtle: var(--hc-neutral-1000);
  --hc-bg-emphasis: var(--hc-neutral-600);
  --hc-bg-primary-emphasis: var(--hc-primary-color-600);
  --hc-bg-accent: var(--hc-accent-color-1000);
  --hc-widget-action: var(--hc-accent-color-600);

  --hc-border-default: var(--hc-neutral-800);
  --hc-border-emphasis: var(--hc-neutral-600);
  --hc-border-subtle: var(--hc-neutral-900);
  --hc-border-primary-emphasis: var(--hc-primary-color-600);

  --hc-fg-default: var(--hc-neutral-300);
  --hc-fg-subtle: var(--hc-neutral-500);
  --hc-fg-on-emphasis: var(--hc-neutral-1100);
  --hc-messenger-on-background: var(--hc-neutral-100);
  --hc-fg-primary: var(--hc-primary-color-600);
  --hc-fg-primary-hover: var(
    --hc-primary-color-500
  ); /* foreground.primary - 100 offset */
  --hc-fg-primary-active: var(
    --hc-primary-color-400
  ); /* foreground.primary - 200 offset */

  /* Button colors */
  --hc-button-bg-emphasis: var(--hc-neutral-300);
  --hc-button-bg-emphasis-hover: var(--hc-neutral-200);
  --hc-button-bg-emphasis-active: var(--hc-neutral-100);

  --hc-frame-color: var(--hc-frame-color-1000);
}

body {
  background-color: var(--hc-frame-color);
  color: var(--hc-fg-default);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

#main-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0 var(--hc-space-xs) var(--hc-space-xs);
}

main {
  flex: 1;
  min-height: 0;
  background-color: var(--hc-bg-default);
  border-radius: var(--hc-border-radius-xxl);
  padding: var(--hc-space-md);
  /* Reserve space for the absolute sidebar rail when it overlays main. */
  padding-inline-start: calc(var(--hc-space-md) + var(--hc-sidebar-rail-width));
  overflow-y: auto;
  transition: padding-inline-start 0.25s ease;
  position: relative;
}

/* Flex layout only for pages with sticky search bar */

main:has(.page-scroll-content) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* When the sidebar is open, the rail overlays the panel (not main), so main
   no longer needs the extra rail-width padding. */

html[data-sidebar-open] main {
  padding-inline-start: var(--hc-space-md);
}

@media (max-width: 768px) {
  main {
    padding-inline-start: var(--hc-space-md);
  }
}

.container-md {
  max-width: var(--hc-container-md-max-width);
  margin: 0 auto;
}

.container-lg {
  max-width: var(--hc-container-lg-max-width);
  margin: 0 auto;
}

.skip-navigation {
  align-items: center;
  justify-content: center;
  background-color: var(--hc-bg-emphasis);
  color: var(--hc-fg-on-emphasis);
  display: flex;
  inset-inline-start: -999px;
  padding: var(--hc-space-md);
  overflow: hidden;
  position: absolute;
  top: auto;
  text-decoration: none;
  z-index: -999;

  &:focus,
  &:active {
    inset-inline-start: var(--hc-space-md);
    overflow: auto;
    top: var(--hc-space-md);
    z-index: 999;
  }
}

.powered-by-zendesk {
  display: none;
}

h1 {
  font-size: var(--hc-font-size-xxxl);
}

h2 {
  font-size: var(--hc-font-size-xxl);
}

h3 {
  font-size: var(--hc-font-size-xl);
}

h4 {
  font-size: var(--hc-font-size-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--hc-font-weight-semibold);
}

p + p {
  margin-top: var(--hc-line-height-lg);
}

/* Links — mirrors Garden's `Anchor` component (foreground.primary with
   ±100 / ±200 shade offsets for hover / active). */

a {
  color: var(--hc-fg-primary);
  text-decoration: underline;
}

a:hover {
  color: var(--hc-fg-primary-hover);
}

a:active {
  color: var(--hc-fg-primary-active);
}

/* Skeleton loader animations */

.skeleton {
  --skeleton-color: color-mix(in srgb, var(--hc-neutral-700) 16%, transparent);
  --skeleton-gradient-angle: 45deg;
  --skeleton-animation: skeleton-shimmer;
  position: relative;
  background-color: var(--skeleton-color);
  animation: skeleton-fade-in 750ms linear;
  overflow: hidden;
  border-radius: var(--hc-border-radius-md);
}

[data-hc-color-scheme="dark"] .skeleton {
  --skeleton-color: color-mix(in srgb, #fff 16%, transparent);
}

html[dir="rtl"] .skeleton {
  --skeleton-gradient-angle: -45deg;
  --skeleton-animation: skeleton-shimmer-rtl;
}

.skeleton::before {
  position: absolute;
  top: 0;
  width: 1000px;
  height: 100%;
  content: "";
  background-image: linear-gradient(
    var(--skeleton-gradient-angle),
    transparent,
    var(--skeleton-color),
    transparent
  );
  animation: var(--skeleton-animation) 1.5s ease-in-out 300ms infinite;
}

/* Size variants */

.skeleton-text-sm {
  height: 17px;
}

.skeleton-text-md {
  height: 26px;
}

.skeleton-component {
  border-radius: calc(var(--hc-border-radius-lg) * 2);
}

/* Animations */

@keyframes skeleton-fade-in {
  0%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes skeleton-shimmer-rtl {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: skeleton-fade-in 750ms linear;
  }

  .skeleton::before {
    animation: none;
  }
}

header.page-header {
  position: relative;
  z-index: 102;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-space-sm);
  height: 48px;
  padding: 0 calc(var(--hc-space-base) * 4);
  flex-shrink: 0;

  .left-container,
  .right-container {
    display: flex;
    align-items: center;
    gap: var(--hc-space-xs);
  }

  .left-container {
    min-width: 0;
  }

  .right-container {
    flex-shrink: 0;
  }

  .user-menu-skeleton {
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--hc-border-radius-full);
  }

  .logo {
    display: flex;
    align-items: center;
  }

  .logo-link {
    display: flex;
    align-items: center;
    gap: var(--hc-space-xs);
    min-width: 0;
    text-decoration: none;
    color: inherit;
    font-weight: var(--hc-font-weight-semibold);

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
      color: inherit;
    }
  }

  .header-nav-list {
    display: flex;
    align-items: center;
    gap: var(--hc-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* An unavailable page renders no link, which would leave an empty list. */
  .header-nav:not(:has(a)) {
    display: none;
  }

  /* On mobile the navigation links collapse into a menu beside the user menu. */
  .header-navigation-menu {
    display: none;
  }

  @media (max-width: 768px) {
    .header-nav {
      display: none;
    }

    .header-navigation-menu:not(:empty) {
      display: flex;
    }
  }

  .header-link {
    color: var(--hc-fg-default);
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-semibold);
    line-height: var(--hc-line-height-sm);
    padding: 0 var(--hc-space-sm);
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &:focus,
    &:active {
      color: var(--hc-fg-default);
      text-decoration: none;
    }
  }

  .logo-container {
    width: 32px;
    height: 32px;
    border-radius: var(--hc-border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .logo-image {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  /*
   * Toggle visibility of the light/dark logo variants based on the
   * resolved color scheme stamped on <html> by assets/color-scheme.js
   * (before first paint, so there is no flash of the wrong logo).
   */
  [data-hc-color-scheme="light"] & .logo-container-dark,
  [data-hc-color-scheme="dark"] & .logo-container-light {
    display: none;
  }
}

/* Page container — center all article page content */

.article-container {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-lg);
  padding-top: var(--hc-space-md);
}

/* Article typography */

.article-header {
  padding-left: 0;
  margin: var(--hc-space-md) 0 var(--hc-space-lg) 0;
}

.article-title {
  font-size: var(--hc-font-size-xxxl);
  line-height: var(--hc-line-height-xxxl);
  font-weight: var(--hc-font-weight-semibold);
}

.title-lock {
  margin-inline-start: var(--hc-space-base);
  color: var(--hc-fg-subtle);
  vertical-align: bottom;
  height: var(--hc-line-height-xxxl);
}

/* Article body content */

.wysiwyg-content {
  line-height: var(--hc-line-height-lg);
}

.wysiwyg-content p {
  font-size: var(--hc-font-size-md);
}

.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
  margin: calc(var(--hc-space-base) * 6) 0;
}

.wysiwyg-content img {
  height: auto;
  max-width: 100%;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
  padding-left: var(--hc-space-md);
  list-style-position: outside;
  margin: var(--hc-space-xs) 0 var(--hc-space-xs) var(--hc-space-md);
}

.wysiwyg-content ul > ul,
.wysiwyg-content ol > ol,
.wysiwyg-content ol > ul,
.wysiwyg-content ul > ol,
.wysiwyg-content li > ul,
.wysiwyg-content li > ol {
  margin: 0;
}

.wysiwyg-content ul {
  list-style-type: disc;
}

.wysiwyg-content ol {
  list-style-type: decimal;
}

.wysiwyg-content div + div {
  margin-top: var(--hc-line-height-lg);
}

.wysiwyg-content :not(pre) > code {
  background: var(--hc-bg-recessed);
  border: 1px solid var(--hc-border-default);
  border-radius: var(--hc-border-radius-md);
  margin: 0 var(--hc-space-base);
}

.wysiwyg-content pre {
  background: var(--hc-bg-recessed);
  border: 1px solid var(--hc-border-default);
  border-radius: var(--hc-border-radius-md);
  padding: var(--hc-space-md);
  overflow: auto;
  white-space: pre;
}

.wysiwyg-content blockquote {
  border-inline-start: 1px solid var(--hc-border-default);
  font-style: italic;
  padding-inline-start: calc(var(--hc-space-base) * 4);
  margin-top: var(--hc-line-height-md);
}

.wysiwyg-content blockquote + p {
  margin-top: var(--hc-line-height-md);
}

.wysiwyg-content span em {
  font-style: italic;
}

.wysiwyg-content a {
  text-decoration: underline;
}

/***** Attachments *****/

/* Styles attachments inside posts, articles and comments */

.attachments .attachment-item {
  padding-left: var(--hc-space-md);
  position: relative;
  margin-bottom: var(--hc-space-sm);
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item .attachment-icon {
  color: var(--hc-fg-primary);
  left: 0;
  position: absolute;
  top: var(--hc-space-base);
}

.attachment-group > ul > li > a,
.attachment-item > a {
  text-decoration: none;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: var(--hc-space-md);
}

[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

/***** Metadata *****/

/* used in attachments */

.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir="rtl"] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  font-size: var(--hc-font-size-md);
  text-decoration: none;
}

.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 var(--hc-space-base);
}

/* Content tags */

.content-tags > p {
  color: var(--hc-fg-subtle);
  margin-top: var(--hc-space-lg);
  margin-bottom: var(--hc-space-xs);
}

.content-tags-add-hint {
  color: var(--hc-fg-subtle);
  font-size: var(--hc-font-size-md);
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
  margin-bottom: var(--hc-space-md);
}

.content-tag-list li {
  border-right: 1px solid var(--hc-border-default);
  margin-bottom: var(--hc-space-base);
}

[dir="ltr"] .content-tag-list li {
  padding-right: var(--hc-space-xs);
  margin-right: var(--hc-space-xs);
}

[dir="rtl"] .content-tag-list li {
  padding-left: var(--hc-space-xs);
  margin-left: var(--hc-space-xs);
}

.content-tag-list li:last-child {
  border: none;
}

/* Breadcrumbs */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hc-font-size-md);
}

.breadcrumbs li {
  font-size: inherit;
  line-height: calc(var(--hc-line-height-md) / var(--hc-font-size-md));
  white-space: nowrap;
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs-separator {
  display: flex;
  align-items: center;
  margin-inline: var(--hc-space-base);
  color: var(--hc-fg-subtle);
}

html[dir="rtl"] .breadcrumbs-separator svg {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .breadcrumbs li {
    display: none;
  }

  .breadcrumbs li:first-child,
  .breadcrumbs li:last-child {
    display: inline;
  }

  .breadcrumbs li.breadcrumbs-separator:nth-last-child(2) {
    display: flex;
  }
}

.page-heading {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-xs);
  padding-top: var(--hc-space-md);
  margin-bottom: var(--hc-space-xl);
}

.page-title {
  font-size: var(--hc-font-size-xxxl);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-xxxl);
  color: var(--hc-fg-default);
  margin: 0;
}

.page-description {
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-regular);
  line-height: var(--hc-line-height-md);
  margin: 0;
  color: var(--hc-fg-subtle);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hc-space-lg);
  row-gap: var(--hc-space-xl);

  /* Ensure grid items can shrink for text truncation */
  > * {
    min-width: 0;
  }
}

.articles-grid-item {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-md);
}

.articles-grid-header-link {
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-default);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    text-decoration: underline;
    color: var(--hc-fg-default);
  }
}

.articles-grid-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-sm);
}

.article-item-link {
  color: var(--hc-fg-subtle);
  text-decoration: none;

  &:hover {
    color: var(--hc-fg-subtle);
    text-decoration: underline;
  }
}

@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.icon {
  color: var(--hc-fg-subtle);
  display: inline-flex;
  align-items: center;
}

.icon-lock {
  margin-inline-start: var(--hc-space-base);
}

.icon-star {
  margin-inline-end: var(--hc-space-base);
}

.section-lock {
  width: 12px;
  height: 12px;
}

/* Reusable link styles */

.more-link {
  display: block;
  margin-top: var(--hc-space-sm);
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-regular);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-primary);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
    color: var(--hc-fg-primary);
  }
}

/* Home page */

.home-page {
  padding-top: calc(var(--hc-space-base) * 45);
}

/* Gradient background for home page only */

main:has(.home-page) {
  background-image: linear-gradient(
    to left,
    color-mix(in srgb, var(--hc-accent-color) 10%, transparent),
    transparent
  );
}

.search-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--hc-container-md-max-width);
  margin: 0 auto;
}

#hero-section-root {
  width: 100%;

  .hero-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-base);
    width: 100%;
  }

  .hero-loader-greeting {
    width: 160px;
    margin-bottom: calc(var(--hc-space-xs) * 2);
  }

  .hero-loader-heading {
    width: 323px;
    margin-bottom: var(--hc-space-lg);
  }

  .hero-loader-search {
    width: 100%;
    margin-bottom: var(--hc-space-lg);
  }
}

.browse-articles {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-lg);
  margin-top: var(--hc-space-xl);

  .browse-articles-title {
    font-size: var(--hc-font-size-lg);
    font-weight: var(--hc-font-weight-semibold);
    line-height: var(--hc-line-height-lg);
    color: var(--hc-fg-default);
    margin: 0;
  }
}

/* Section page */

.section-subsections {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: var(--hc-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-sm);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--hc-space-xl);
  gap: var(--hc-space-base);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-base);
  padding: 0 var(--hc-space-xs);
  height: var(--hc-space-lg);
  border-radius: var(--hc-border-radius-md);
  font-size: var(--hc-font-size-md);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-subtle);
  background-color: transparent;
  text-decoration: none;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;

  &:hover {
    background-color: rgb(from var(--hc-bg-primary-emphasis) r g b / 0.08);
    color: var(--hc-neutral-800);
  }

  &:active {
    background-color: rgb(from var(--hc-bg-primary-emphasis) r g b / 0.16);
    color: var(--hc-neutral-900);
  }
}

[data-hc-color-scheme="dark"] .pagination-link {
  &:hover {
    color: var(--hc-neutral-400);
  }

  &:active {
    color: var(--hc-neutral-300);
  }
}

.pagination-icon-first {
  transform: rotate(180deg);
}

.pagination-icon-previous {
  transform: rotate(180deg);
}

[dir="rtl"] .pagination-icon-first {
  transform: none;
}

[dir="rtl"] .pagination-icon-previous {
  transform: none;
}

[dir="rtl"] .pagination-icon-next {
  transform: rotate(180deg);
}

[dir="rtl"] .pagination-icon-last {
  transform: rotate(180deg);
}

/* Button Styles - Garden Design System */

.button {
  display: inline-block;
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-md);
  padding: var(--hc-space-xs) var(--hc-space-md);
  border-radius: var(--hc-border-radius-full);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center;
  text-decoration: none;
  user-select: none;
  margin: var(--hc-space-xs);
}

.button.primary {
  background-color: var(--hc-button-bg-emphasis);
  color: var(--hc-fg-on-emphasis);
}

.button.primary:hover,
.button.primary:focus {
  background-color: var(--hc-button-bg-emphasis-hover);
  text-decoration: none;
}

.button.primary:active {
  background-color: var(--hc-button-bg-emphasis-active);
}

.error-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--hc-space-lg) var(--hc-space-md);
  max-width: var(--hc-container-md-max-width);
  margin: 0 auto;
  gap: var(--hc-space-xs);
}

.error-page h1 {
  font-size: var(--hc-font-size-xxxl);
  line-height: var(--hc-line-height-xxxl);
  color: var(--hc-fg-default);
  margin: 0;
}

.error-page p {
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-regular);
  color: var(--hc-fg-subtle);
  line-height: var(--hc-line-height-lg);
  margin: 0;
}

.error-page-link {
  margin-top: var(--hc-space-base);
}

/* Search results page */

.search-results-container {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-lg);
  padding-top: var(--hc-space-md);

  &:has(.search-no-results) {
    min-height: 100%;
    justify-content: center;
    padding-top: 0;
  }
}

.search-results-heading {
  font-size: var(--hc-font-size-lg);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-lg);
  color: var(--hc-fg-subtle);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-xs);
}

.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-space-sm);
  padding: var(--hc-space-sm);
  border-radius: var(--hc-border-radius-lg);
  text-decoration: none;
  color: inherit;

  &:hover {
    background-color: var(--hc-bg-subtle);
  }
}

.search-result-content {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-base);
  min-width: 0;
  flex: 1 0 0;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: var(--hc-space-base);
}

.search-result-source {
  font-size: var(--hc-font-size-sm);
  line-height: var(--hc-line-height-sm);
  color: var(--hc-fg-subtle);
}

.search-result-breadcrumbs {
  font-size: var(--hc-font-size-sm);
  color: var(--hc-fg-subtle);
}

.search-result-title {
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-default);
  margin: 0;
}

.search-result-description {
  font-size: var(--hc-font-size-md);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-subtle);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-action-icon {
  flex-shrink: 0;
}

.search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hc-space-lg);
  width: 100%;
}

.search-no-results-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hc-space-xs);
}

.search-no-results-title {
  font-size: var(--hc-font-size-lg);
  font-weight: var(--hc-font-weight-semibold);
  line-height: var(--hc-line-height-lg);
  color: var(--hc-fg-subtle);
  margin: 0;
}

.search-no-results-description {
  font-size: var(--hc-font-size-md);
  line-height: var(--hc-line-height-md);
  color: var(--hc-fg-subtle);
  margin: 0;
  text-align: center;
}

.chat-page {
  height: 100%;
}

.chat-message-log {
  height: 100%;
}

/***** Comments *****/

/* Request Main - Comment Field Visibility Controls */

.request-main .comment-fields,
.request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: var(--hc-border-radius-md);
  border: 1px solid var(--hc-border-default);
  color: var(--hc-fg-subtle);
  text-align: inherit;
  padding: var(--hc-space-xs) var(--hc-space-lg);
  width: 100%;
  background: none;
  cursor: pointer;
}

.request-main .comment-show-container.hidden {
  display: none;
}

/* Comment CCs field styling */

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid var(--hc-fg-primary);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid var(--hc-fg-primary);
}

/* Comment List */

.comment-list {
  list-style: none;
  padding: 0;
  margin: var(--hc-space-lg) 0 0 0;
}

.comment {
  border-bottom: 1px solid var(--hc-border-default);
  padding: var(--hc-space-lg) 0;
}

.comment:first-child {
  padding-top: 0;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-info {
  min-width: 0;
  padding-inline-end: var(--hc-space-md);
  width: 100%;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--hc-space-md);
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-inline-end: var(--hc-space-sm);
}

.comment-meta {
  flex: 1 1 auto;
}

.comment-meta span a {
  text-decoration: none;
}

.comment-meta span a:hover {
  text-decoration: underline;
}

.comment-body {
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  line-height: 1.6;
  overflow-x: auto;
}

/* Comment Form */

.comment-form {
  display: flex;
  gap: var(--hc-space-sm);
  padding-top: var(--hc-space-xl);
  word-wrap: break-word;
}

.comment-form .avatar {
  flex-shrink: 0;
}

.comment-form .comment-avatar {
  margin-inline-end: 0;
}

.comment-container {
  flex: 1;
  min-width: 0;
}

.comment-form-controls {
  display: none;
  margin-top: var(--hc-space-sm);
  text-align: start;
}

@media (min-width: 768px) {
  .comment-form-controls {
    text-align: end;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: var(--hc-space-md);
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-inline-start: var(--hc-space-md);
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-inline-end: var(--hc-space-base);
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: var(--hc-space-sm);
}

.comment-attachments {
  margin-top: var(--hc-space-sm);
}

/* Upload widget */

.upload-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--hc-font-size-sm);
  color: var(--hc-fg-default);
}

.upload-link:hover {
  text-decoration: underline;
}

.upload-path,
.upload-item p[data-upload-issue] {
  display: none;
}

.upload-remove {
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--hc-border-radius-md);
  color: var(--hc-fg-subtle);
  stroke: var(--hc-fg-subtle);
  transition: background-color 0.15s ease;
}

.upload-remove:hover {
  background-color: var(--hc-bg-recessed);
  color: var(--hc-fg-default);
  stroke: var(--hc-fg-default);
}

.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--hc-bg-primary-emphasis);
  border-radius: var(--hc-border-radius-md);
  transition: width 0.3s ease;
}

.upload-item[aria-busy="false"] .upload-progress {
  display: none;
}

.upload-dropzone span {
  color: var(--hc-fg-subtle);
}

#request-attachments-pool > li > a {
  color: var(--hc-fg-default);
}

/***** Request Page *****/

/* Request Page Container Wrapper */

.request-page-container {
  max-width: var(--hc-container-lg-max-width);
  margin: 0 auto;
  padding: var(--hc-space-lg) var(--hc-space-md);
}

/* Request Container Layout */

.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--hc-space-lg);
  }
}

/* Request Title */

.request-title {
  width: 100%;
  margin: var(--hc-space-xl) 0;
}

@media (min-width: 1024px) {
  .request-title {
    margin-bottom: var(--hc-space-lg);
    max-width: 66%;
    padding-bottom: var(--hc-space-md);
  }
}

/* Request Main Content Area */

.request-main {
  flex: 1 0 auto;
  max-width: 100%;
  order: 1;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 70%;
    max-width: 70%;
    order: 0;
    min-width: 0;
  }
}

.request-main input#mark_as_solved {
  display: none;
}

/* Request Follow-up */

.request-follow-up {
  padding-top: var(--hc-space-md);
}

/* Request Sidebar */

.request-sidebar {
  border-bottom: 1px solid var(--hc-border-default);
  border-top: 1px solid var(--hc-border-default);
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: var(--hc-bg-subtle);
    border: 0;
    font-size: var(--hc-font-size-sm);
    flex: 0 0 30%;
    width: 30%;
  }
}

.request-sidebar h2 {
  font-size: var(--hc-font-size-md);
  font-weight: var(--hc-font-weight-semibold);
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}

/* Collapsible Sidebar */

.collapsible-sidebar {
  flex: 1;
  max-height: 50px;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  inset-inline-end: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}

.collapsible-sidebar-toggle-icon {
  color: var(--hc-fg-default);
  display: none;
}

.collapsible-sidebar-toggle[aria-expanded="false"] .request-chevron-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid var(--hc-fg-primary);
}

.collapsible-sidebar-body {
  display: none;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}

.request-details {
  border-bottom: 1px solid var(--hc-border-default);
  font-size: 0;
  margin: 0 20px;
  padding-bottom: var(--hc-space-md);
}

.request-details:last-child {
  border: 0;
}

.request-details dt,
.request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: var(--hc-font-size-sm);
  margin-top: var(--hc-space-md);
}

.request-details dd {
  padding: 0 var(--hc-space-sm);
  width: 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.request-details dd::after {
  content: "\a";
  white-space: pre;
}

.request-details dt {
  line-break: strict;
  color: var(--hc-fg-subtle);
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt,
.request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: var(--hc-space-sm) 0 0 0;
}

/* Avatar Styles */

.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}

.avatar img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.avatar .icon-agent {
  color: var(--hc-fg-primary);
  fill: var(--hc-fg-primary);
  border: 2px solid var(--hc-bg-default);
  border-radius: 50%;
  bottom: -4px;
  background-color: var(--hc-bg-default);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  inset-inline-end: -2px;
  text-align: center;
  width: 17px;
}

/* Status Label Badges */

.status-label {
  background-color: #038153;
  border-radius: var(--hc-border-radius-md);
  color: #fff;
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-semibold);
  margin-inline-end: 2px;
  padding: 3px var(--hc-space-sm);
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover,
.status-label:active,
.status-label:focus {
  text-decoration: none;
}

.status-label-closed {
  background-color: var(--hc-neutral-700);
}

.status-label-pending {
  background-color: #1f73b7;
  text-align: center;
}

.status-label-open {
  background-color: #c72a1c;
}

.status-label-solved {
  background-color: #68737d;
}

.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}

.status-label-hold {
  background-color: #000;
}

.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/* Form Styles */

.hbs-form input,
.hbs-form textarea {
  font-size: var(--hc-font-size-md);
}

.hbs-form input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}

.hbs-form input:where(:not([type="checkbox"])) {
  outline: none;
}

.hbs-form input:where(:not([type="checkbox"])):focus {
  border: 1px solid var(--hc-fg-primary);
}

.hbs-form input[disabled] {
  background-color: var(--hc-bg-subtle);
}

.hbs-form select {
  color: var(--hc-fg-default);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A")
    no-repeat var(--hc-bg-default);
  background-position: right var(--hc-space-sm) center;
  border: 1px solid var(--hc-border-emphasis);
  border-radius: var(--hc-border-radius-md);
  padding: var(--hc-space-xs) var(--hc-space-lg) var(--hc-space-xs)
    var(--hc-space-sm);
  outline: none;
  width: 100%;
}

.hbs-form select:focus {
  border: 1px solid var(--hc-fg-primary);
}

.hbs-form select::-ms-expand {
  display: none;
}

.hbs-form textarea {
  border: 1px solid var(--hc-border-emphasis);
  border-radius: var(--hc-border-radius-md);
  resize: vertical;
  width: 100%;
  outline: none;
  padding: var(--hc-space-sm);
}

.hbs-form textarea:focus {
  border: 1px solid var(--hc-fg-primary);
}

/* Form Field */

.form-field ~ .form-field {
  margin-top: var(--hc-space-lg);
}

.form-field label {
  display: block;
  font-size: var(--hc-font-size-sm);
  margin-bottom: var(--hc-space-base);
}

.form-field input {
  border: 1px solid var(--hc-border-emphasis);
  border-radius: var(--hc-border-radius-md);
  padding: var(--hc-space-sm);
  width: 100%;
}

.form-field input:focus {
  border: 1px solid var(--hc-fg-primary);
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"] + label {
  margin: 0 0 0 var(--hc-space-sm);
}

.form-field .optional {
  color: var(--hc-fg-subtle);
  margin-inline-start: var(--hc-space-base);
}

.form-field p {
  color: var(--hc-fg-subtle);
  font-size: var(--hc-font-size-sm);
  margin: var(--hc-space-base) 0;
}

/* Scrollable content wrapper for pages with search bar */

.page-scroll-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Search bar at bottom of page */

.search-bar-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: var(--hc-space-xs);

  & > * {
    max-width: var(--hc-container-md-max-width);
    width: 100%;
  }
}

/***** Service Catalog *****/

/* Category rail beside the results column. Single column until there is room
   for both, so the rail never squeezes the cards. */

.service-catalog-page {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--hc-space-xl);
  margin-block-start: var(--hc-space-lg);

  /* The rail moves above the results rather than squeezing them. */
  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hc-space-lg);
  }
}

/* An account with no categories renders no rail, and the results column must
   not be left sitting in the rail's 200px track. */

.service-catalog-page:not(:has(> .service-catalog-sidebar)) {
  grid-template-columns: minmax(0, 1fr);
}

.service-catalog-sidebar {
  position: sticky;
  align-self: start;
  /* Nothing sticky sits above the rail and the frame's padding already keeps it
     off the edge. Any larger offset exceeds the grid's own distance from the top
     and pushes the rail below the results before the page is even scrolled. */
  inset-block-start: 0;

  @media (max-width: 768px) {
    position: static;
  }
}

.service-catalog-list {
  min-width: 0;
}

.service-catalog-item {
  /* Clears the breadcrumbs, which the heading otherwise sits flush against. */
  margin-block-start: var(--hc-space-xl);
}

.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--hc-space-md);
}

/* Marker set on <html> by the inline script in service_page.hbs when the page
   is opened with ?preview=true, and by the React app when the API reports a
   draft item. The selector reaches into Zendesk product chrome rendered
   outside this theme, so it is brittle by nature and must be revisited if the
   shell changes its DOM. It is the only bar observed on a help center page;
   add others only with evidence that they appear. */

.is-service-catalog-preview #navbar-container {
  display: none !important;
}