@import url("https://fonts.googleapis.com/css?family=Inter:400,500,600,700%7CLora:400,400i,500,700i");

/* =====================================================================
   Freshworks community skin: freshworks.com look and feel
   v2 · 2026-10-08 · DRAFT, not published (v1 is frozen in versions/v1.css)
   v2 adds the murmuration hero: text on the left, flow on the right.

   - Written to sit on top of the current Custom CSS (backup/2026-10-08).
   - The @import above must stay the first line of the Custom CSS box.
     Its URL has no "&" or ";" because Gainsight's CSS checker rejects them.
   - Selectors start with #customcss #root (specificity over 200), per
     Gainsight's Custom CSS guidelines.
   - !important is only used where widget HTML has inline styles or the
     current Custom CSS already uses !important.
   ===================================================================== */


/* 1. Tokens ------------------------------------------------------------
   Values come from freshworks.com's design system (research/freshworks-com). */

:root:root,
#customcss {
  --fw-font-heading: "Lora", Georgia, "Times New Roman", serif;
  --fw-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fw-text: #111111;
  --fw-text-muted: #585252;
  --fw-text-meta: #6c6c6a;
  --fw-surface: #ffffff;
  --fw-surface-soft: #f7f7f4;
  --fw-surface-subtle: #efefec;
  --fw-surface-medium: #e4e4e1;
  --fw-border: #cfcfcd;
  --fw-border-soft: #e4e4e1;
  --fw-button: #000000;
  --fw-button-hover: #363635;
  --fw-button-active: #111111;
  --fw-focus: #a538e5;

  --fw-brand: #bc5bf1;
  --fw-brand-base: #f8f2fd;
  --fw-brand-subtle: #f1defb;
  --fw-accent-pink: #eb3da7;
  --fw-accent-orange: #f29e0d;
  --fw-accent-red: #ff574a;
  --fw-accent-green: #73bc29;

  --fw-radius-s: 8px;
  --fw-radius-m: 12px;
  --fw-radius-l: 16px;
  --fw-radius-pill: 9999px;
  --fw-shadow-hover: 0 8px 24px rgba(17, 17, 17, 0.08);
  --fw-section-space: 96px;

  /* v2 murmuration hero: the search row's height, which the band reaches
     down behind */
  --fw-hero-search-h: 176px;

  /* Gainsight theme variables, mapped to the tokens above */
  --config--main-font-base-stack: var(--fw-font-body);
  --config--main-font-secondary: var(--fw-font-body);
  --config--main-header-font-weight: 500;
  --config--main-color-brand: var(--fw-text);
  --config--main-color-contrast: var(--fw-button);
  --config--main-color-info: var(--fw-accent-orange);
  --config--main-color-alert: #de3321;
  --config--main-border-base-color: var(--fw-border);

  --config--main-button-base-font-family: var(--fw-font-body);
  --config--main-button-base-font-weight: 600;
  --config--main-button-base-font-color: var(--fw-text);
  --config--main-button-base-radius: var(--fw-radius-pill);
  --config-button-border-radius: var(--fw-radius-pill);

  --config-button-cta-background-color: var(--fw-button);
  --config-button-cta-border-color: var(--fw-button);
  --config-button-cta-color: #ffffff;
  --config-button-cta-border-radius: var(--fw-radius-pill);
  --config-button-cta-hover-background-color: var(--fw-button-hover);
  --config-button-cta-hover-border-color: var(--fw-button-hover);
  --config-button-cta-active-background-color: var(--fw-button-active);
  --config-button-cta-active-border-color: var(--fw-button-active);
  --config-button-cta-focus-background-color: var(--fw-button-hover);
  --config-button-cta-focus-border-color: var(--fw-focus);

  --config-button-secondary-background-color: transparent;
  --config-button-secondary-border-color: var(--fw-text);
  --config-button-secondary-color: var(--fw-text);
  --config-button-secondary-border-radius: var(--fw-radius-pill);
  --config-button-secondary-hover-background-color: var(--fw-surface-subtle);
  --config-button-secondary-hover-border-color: var(--fw-text);
  --config-button-secondary-hover-color: var(--fw-text);
  --config-button-secondary-active-background-color: var(--fw-surface-medium);
  --config-button-secondary-active-border-color: var(--fw-text);
  --config-button-secondary-active-color: var(--fw-text);
  --config-button-secondary-focus-background-color: var(--fw-surface-subtle);
  --config-button-secondary-focus-border-color: var(--fw-focus);
  --config-button-secondary-focus-color: var(--fw-text);
  --config-button-secondary-spinner-color: var(--fw-text);

  --config-button-toggle-color: var(--fw-text);
  --config-button-toggle-border-color: var(--fw-text);
  --config-button-toggle-border-radius: var(--fw-radius-pill);
  --config-button-toggle-hover-color: var(--fw-text);
  --config-button-toggle-hover-border-color: var(--fw-text);
  --config-button-toggle-hover-background-color: var(--fw-surface-subtle);
  --config-button-toggle-active-color: var(--fw-text);
  --config-button-toggle-active-border-color: var(--fw-text);
  --config-button-toggle-active-background-color: var(--fw-surface-medium);
  --config-button-toggle-on-background-color: var(--fw-button);
  --config-button-toggle-on-border-color: var(--fw-button);
  --config-button-toggle-on-hover-background-color: var(--fw-button-hover);
  --config-button-toggle-on-hover-border-color: var(--fw-button-hover);
  --config-button-toggle-on-active-background-color: var(--fw-button-active);
  --config-button-toggle-on-border-radius: var(--fw-radius-pill);
  --config-button-toggle-filled-background-color: var(--fw-button);
  --config-button-toggle-outline-color: var(--fw-text);
  --config-button-toggle-outline-pseudo-color: var(--fw-text);
  --config-button-cancel-border-radius: var(--fw-radius-pill);

  --config-anchor-base-color: var(--fw-text);
  --config-anchor-base-hover-color: var(--fw-text);
  --config-link-base-color: var(--fw-text);
  --config-link-base-hover-color: var(--fw-text);
  --config-link-hover-decoration: underline;
  --config-meta-text-color: var(--fw-text-meta);
  --config-meta-link-hover-color: var(--fw-text);
  --config-input-focus-color: var(--fw-focus);

  --config-header-color: var(--fw-text);
  --config-hero-color: var(--fw-text);
  --config-sidebar-widget-color: var(--fw-text);
  --config-sidebar-widget-font-family: var(--fw-font-body);
  --config-widget-tabs-forum-list-header-color: var(--fw-text);
  --config-widget-tabs-forum-list-header-hover-color: var(--fw-text);
  --config-widget-cta-background-color: var(--fw-surface-soft);
  --config-cta-icon-background-color: var(--fw-text);
  --config-widget-box-shadow: none;

  --config-main-navigation-background-color: var(--fw-surface-soft);
  --config-main-navigation-border-top-color: transparent;
  --config-main-navigation-border-bottom-color: var(--fw-border-soft);
  --config-main-navigation-nav-color: var(--fw-text);
  --config-main-navigation-nav-link-color: var(--fw-text);
  --config-main-navigation-dropdown-color: var(--fw-text);
  --config-main-navigation-search-placeholder-color: var(--fw-text-meta);

  --config-card-border-radius: var(--fw-radius-l);
  --config-card-border-width: 1px;
  --config-card-border-color: var(--fw-border-soft);
  --config-card-hover-border-color: var(--fw-border);
  --config-card-active-border-color: var(--fw-text);
  --config-card-hover-shadow: var(--fw-shadow-hover);
  --config-card-title-color: var(--fw-text);
  --config-card-hover-title-color: var(--fw-text);

  --config-list-views-card-border-radius: var(--fw-radius-l);
  --config-list-views-card-default-border-color: var(--fw-border-soft);
  --config-list-views-card-hover-border-color: var(--fw-border);
  --config-list-views-card-click-border-color: var(--fw-text);
  --config-list-views-card-default-title-color: var(--fw-text);
  --config-list-views-card-hover-title-color: var(--fw-text);
  --config-list-views-card-click-title-color: var(--fw-text);

  --config-tag-pill-background-color: var(--fw-surface-subtle);
  --config-tag-pill-hover-background-color: var(--fw-brand-subtle);
  --config-tag-pill-hover-border-color: var(--fw-brand);
  --config-tag-pill-hover-color: var(--fw-text);
  --config-tag-modify-link-color: var(--fw-text);
  --config-thread-pill-author-background-color: var(--fw-text);
  --config-thread-pill-sticky-background-color: var(--fw-text);
  --config-thread-pill-question-background-color: var(--fw-accent-orange);
  --config-thread-pill-question-color: var(--fw-text);
  --config-topic-question-color: var(--fw-accent-orange);
  --config-pagination-active-page-color: var(--fw-text);
  --config-paging-item-hover-color: var(--fw-text);
  --config-avatar-notification-background-color: var(--fw-accent-red);
  --config-notification-widget-background-color: var(--fw-brand-subtle);
  --config-notification-widget-color: var(--fw-text);
  --config-editor-comment-toolbar-button-hover-color: var(--fw-text);
  --config-topic-page-post-actions-active: var(--fw-text);
  --config-topic-page-answered-field-link-color: var(--fw-text);

  --config-footer-background-color: var(--fw-surface-soft);
  --config-footer-color: var(--fw-text);
}


/* 2. Base ---------------------------------------------------------------- */

#customcss #root {
  color: var(--fw-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#customcss #root a:focus-visible,
#customcss #root button:focus-visible,
#customcss #root input:focus-visible {
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}


/* 3. Header and navigation ---------------------------------------------- */

#customcss #root .main-navigation--wrapper {
  background: var(--fw-surface-soft);
  border-bottom: 1px solid var(--fw-border-soft);
}

#customcss #root .widget-container--header_navigation .header-navigation-items-wrapper * {
  font-family: var(--fw-font-body) !important;
}

#customcss #root .widget-container--header_navigation .header-navigation_link {
  font-size: 16px !important;
  color: var(--fw-text);
}

#customcss #root .widget-container--header_navigation .main-menu-trigger,
#customcss #root .widget-container--header_navigation .main-menu-trigger * {
  font-size: 16px !important;
  color: var(--fw-text);
}

#customcss #root .widget-container--header_navigation .header-navigation_link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

#customcss #root .main-navigation--wrapper .menu-create-topic.btn--cta {
  border-radius: var(--fw-radius-pill);
  padding: 10px 20px;
  font-weight: 600 !important;
}

#customcss #root .main-navigation--wrapper .btn--notification-center,
#customcss #root .main-navigation--wrapper .community-language-switcher_trigger-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  color: var(--fw-text);
}

#customcss #root .main-navigation--wrapper .btn--notification-center:hover,
#customcss #root .main-navigation--wrapper .community-language-switcher_trigger-button:hover {
  background: var(--fw-surface-subtle);
}


/* 3b. Menu dropdowns, like freshworks.com's menus -----------------------
   Gainsight renders each menu as a list, and items with child links open
   fly-outs. Here an open menu becomes one off-white panel. In menus with
   headings (Products, Resources), the child lists sit side by side as
   columns under grey Lora headings, as on freshworks.com, and a plain link
   among them (Products → Product updates) becomes a footer link.
   Gainsight's markup changed in late October: a heading now sits in a
   .dropdown-container__row next to a .main-menu-submenu-toggle button, so
   both the old and the new markup are styled here.
   Desktop only: under 1024px Gainsight swaps this menu for a slide-out
   one, which keeps its own styles. */

@media (min-width: 1024px) {
  #customcss #root .widget-container--header_navigation .main-menu-trigger,
  #customcss #root .widget-container--header_navigation .main-menu-trigger *,
  #customcss #root .widget-container--header_navigation .header-navigation_link {
    font-size: 18px !important;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown.dropdown--forums-overview {
    width: max-content;
    min-width: 280px;
    margin-top: 14px;
    padding: 12px;
    border: 0;
    border-radius: var(--fw-radius-m);
    background: var(--fw-surface-soft);
    box-shadow: 0 4px 48px -24px rgba(0, 0, 0, 0.24), 0 0 0 1px var(--fw-border-soft);
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview > .arrow {
    display: none;
  }

  /* Gainsight gives the last item a bottom margin, so panels were heavier
     at the bottom than at the top */
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-list,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-list > li {
    margin: 0;
    padding: 0;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-list--overflow-scroll {
    max-height: none;
    overflow: visible;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-link {
    padding: 8px 12px;
    border-radius: var(--fw-radius-s);
    font-size: 16px !important;
    line-height: 24px;
    color: var(--fw-text);
    background: transparent;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-link:hover {
    background: var(--fw-surface-subtle);
    text-decoration: none;
  }

  /* Menus with headings: columns, in a wider panel centred under the menu
     item so the last menus don't run off the right edge */
  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) {
    left: 50%;
    translate: -50% 0;
    padding: 20px 20px 16px;
  }

  /* One column per heading; the count comes from the markup, so a plain
     link can span them all as the footer */
  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list {
    --fw-menu-columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--fw-menu-columns), minmax(180px, max-content));
    column-gap: 32px;
    align-items: start;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list:has(> .dropdown-container ~ .dropdown-container) {
    --fw-menu-columns: 2;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list:has(> .dropdown-container ~ .dropdown-container ~ .dropdown-container) {
    --fw-menu-columns: 3;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list:has(> .dropdown-container ~ .dropdown-container ~ .dropdown-container ~ .dropdown-container) {
    --fw-menu-columns: 4;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list:has(> .dropdown-container ~ .dropdown-container ~ .dropdown-container ~ .dropdown-container ~ .dropdown-container) {
    --fw-menu-columns: 5;
  }

  /* A plain link among the headings (Products → Product updates): a footer
     link under the columns, instead of a lone heading-less column */
  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list > li:not(.dropdown-container) {
    grid-column: 1 / -1;
    order: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fw-border-soft);
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list > li:not(.dropdown-container) > .main-menu-link {
    display: inline-flex;
    font-weight: 500;
  }

  #customcss #root .widget-container--header_navigation .dropdown-container > .dropdown--forums-overview:has(.dropdown--forums-overview--nested) > .main-menu-list--overflow-scroll > .main-menu-list > li:not(.dropdown-container) > .main-menu-link::after {
    content: "→";
    margin-left: 8px;
  }

  /* The heading: grey Lora, like freshworks.com's column titles, with its
     text in line with the links under it */
  #customcss #root .widget-container--header_navigation .header-navigation-items-wrapper .main-menu-link--category--nested,
  #customcss #root .widget-container--header_navigation .header-navigation-items-wrapper .main-menu-link--category--nested *,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row > .main-menu-link,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row > .main-menu-link * {
    font-family: var(--fw-font-heading) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--fw-text-meta) !important;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row {
    display: block;
    margin: 0;
    padding: 0;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-link--category--nested,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row > .main-menu-link {
    padding: 0 12px 10px;
    background: transparent;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row > .main-menu-link:hover,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container__row > .main-menu-link:hover * {
    color: var(--fw-text) !important;
  }

  /* The headings' fly-out toggles: the child links are always shown here */
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .main-menu-submenu-toggle {
    display: none !important;
  }

  #customcss #root .widget-container--header_navigation .main-menu-link--category--nested svg,
  #customcss #root .widget-container--header_navigation .main-menu-link--category--nested + svg,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown-container > button > svg {
    display: none;
  }

  /* The heading's child links: shown in place instead of as a fly-out */
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview .dropdown--forums-overview--nested {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0;
    padding: 0;
    transform: none !important;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview--nested > .dropdown,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview:has(.dropdown--forums-overview--nested) .main-menu-list__item,
  #customcss #root .widget-container--header_navigation .dropdown--forums-overview:has(.dropdown--forums-overview--nested) .dropdown-container > button {
    width: auto !important;
  }

  #customcss #root .widget-container--header_navigation .dropdown--forums-overview--nested > .dropdown {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}


/* 4. Hero: headline (custom HTML widget with the h1) ---------------------
   The widget HTML uses inline styles, so these need !important. Matching
   on :has(h1) keeps this working if widgets are reordered. */

#customcss #root .widget-container--html_widget:has(.custom-html h1) {
  background: var(--fw-surface-soft);
}

#customcss #root .custom-html:has(h1) > div {
  padding: 88px 20px 8px !important;
}

#customcss #root .custom-html:has(h1) h1 {
  max-width: 920px;
  margin: 0 auto !important;
  font-family: var(--fw-font-heading);
  font-size: 64px !important;
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fw-text);
}

#customcss #root .custom-html:has(h1) h1 span {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: inherit !important;
  font-style: italic;
  font-weight: 700 !important;
}

#customcss #root .custom-html:has(h1) p {
  max-width: 640px;
  margin: 24px auto 0 !important;
  font-family: var(--fw-font-body);
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: var(--fw-text-muted) !important;
}


/* 5. Hero: search (generic hero widget) ----------------------------------
   Hides the gradient GIF with the testimonial bubbles and centres the search. */

#customcss #root .generic_hero .forum-featured-image {
  height: auto !important;
  padding: 40px 20px 80px;
  background-color: var(--fw-surface-soft) !important;
  background-image: none !important;
}

#customcss #root .generic_hero .brand-hero {
  height: auto;
  min-height: 0;
  padding: 0;
}

#customcss #root .generic_hero .brand-hero-title:empty {
  display: none;
}

#customcss #root .generic_hero .forum-featured-image__content .col {
  float: none;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

#customcss #root .generic_hero .searchbar-in-hero {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

#customcss #root .generic_hero .searchbox__input {
  float: none;
  width: 100%;
}

#customcss #root .generic_hero .search-box {
  margin: 0 !important;
  height: 60px;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.04);
  overflow: hidden;
}

#customcss #root .generic_hero .search-box:focus-within {
  border-color: var(--fw-text);
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}

#customcss #root .generic_hero .search-box__input {
  height: 100%;
  padding-right: 64px;
  font-family: var(--fw-font-body);
  font-size: 17px;
  text-overflow: ellipsis;
  color: var(--fw-text);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The search and clear icons, in every search box (homepage, category
   pages, Ideas). Gainsight paints them a fixed dark grey, which vanished
   on the dark Developers pages; the theme colours work in both. */
#customcss #root :is(.search-box__submit, .search-box__reset) {
  color: var(--fw-text-muted);
}

#customcss #root :is(.search-box__submit, .search-box__reset):hover {
  color: var(--fw-text);
}


/* 5b. v2: murmuration hero (desktop) -----------------------------------------
   One band behind both hero widgets: the headline widget's background, with
   a shadow of itself that reaches down behind the search widget, so there's
   no seam.
   The flow is drawn in CSS (assets/murmuration.css): thousands of flecks as
   box-shadows on the widget's empty pseudo-elements, so it's sharp on every
   screen. No script, no video, no image to download. The clip keeps it
   inside the band where the headline is short, as on the Developers page.
   Screens under 1200px keep the centred v1 hero. */

@media (min-width: 1200px) {
  #customcss #root .widget-container--html_widget:has(.custom-html h1) {
    position: relative;
    z-index: 0;
    box-shadow: 0 var(--fw-hero-search-h) 0 var(--fw-surface-soft);
    clip-path: inset(0 0 calc(-1 * var(--fw-hero-search-h)) 0);
    /* The CSS flecks drift past the right edge; clip-path hides them, but
       only this stops them adding a sideways scroll (pages without the
       hero-flow widget). Vertically the band still reaches the search row. */
    overflow-x: clip;
  }

  #customcss #root .custom-html:has(h1) > div {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 112px 10px 0 !important;
    text-align: left !important;
  }

  #customcss #root .custom-html:has(h1) h1 {
    max-width: 600px;
    margin: 0 !important;
    text-align: left !important;
  }

  #customcss #root .custom-html:has(h1) p {
    max-width: 480px;
    margin: 24px 0 0 !important;
  }

  /* The search row sits above the band with no background of its own */
  #customcss #root .widget-container--generic_hero {
    position: relative;
    z-index: 1;
  }

  #customcss #root .generic_hero .forum-featured-image {
    box-sizing: border-box;
    height: var(--fw-hero-search-h) !important;
    padding: 36px 20px 0;
    background-color: transparent !important;
  }

  /* Every homepage section sits on Gainsight's grid, the same as the top
     menu and the inner pages: a 1140px .sitewidth with 10px padding, so
     content runs 1120px wide */
  #customcss #root .generic_hero .forum-featured-image__content .sitewidth,
  #customcss #root .widget-container--statistics_bar .sitewidth {
    box-sizing: border-box;
    width: 100%;
    max-width: 1140px;
  }

  #customcss #root .widget-container--statistics_bar .sitewidth {
    padding: 0;
  }

  #customcss #root .generic_hero .forum-featured-image__content .col {
    box-sizing: border-box;
    max-width: 1140px;
    padding: 0 10px;
  }

  #customcss #root .generic_hero .searchbar-in-hero {
    max-width: 520px;
    margin: 0;
  }
}


/* 5c. Ideas page banner (ideation hero widget) ----------------------------
   Gainsight's ideas banner has a purple background image, a 34px Inter
   title pulled up under the menu, and a bold subtitle. This gives it the
   homepage hero's off-white band and Lora headline. */

#customcss #root .widget-container--ideation_hero .brand-hero {
  height: auto;
  min-height: 0;
  padding: 88px 20px 72px;
  background-color: var(--fw-surface-soft) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fw-border-soft);
}

#customcss #root .widget-container--ideation_hero .brand-hero-title {
  margin: 0 !important;
  font-family: var(--fw-font-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Production's widget sets a near-white title colour, inline */
  color: var(--fw-text) !important;
}

/* Production's banner has a photo, so Gainsight puts it in a fixed-height
   box that centres the band: the band spills over the breadcrumb and sits
   20px in from each side. */
#customcss #root .widget-container--ideation_hero .forum-featured-image {
  display: block !important;
  height: auto !important;
  padding: 0 !important;
}

#customcss #root .widget-container--ideation_hero .brand-hero-subtitle {
  margin: 20px 0 0 !important;
  font-family: var(--fw-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fw-text-muted);
}

/* Production's search has no .hero-search wrapper */
#customcss #root .widget-container--ideation_hero .hero-search,
#customcss #root .widget-container--ideation_hero .searchbar-in-hero {
  margin-top: 40px;
}

@media (max-width: 767px) {
  /* Gainsight adds a 16px side margin at full width, which pushed the
     banner 16px past a phone's edge; the padding gives the gutter */
  #customcss #root .widget-container--ideation_hero .brand-hero {
    margin-right: 0;
    margin-left: 0;
    padding: 56px 16px 48px;
  }

  #customcss #root .widget-container--ideation_hero .brand-hero-title {
    font-size: 40px;
  }

  #customcss #root .widget-container--ideation_hero .brand-hero-subtitle {
    font-size: 17px;
  }
}


/* 5d. Ideas portal FAQ (an HTML widget on the Ideas page) -----------------
   The widget switches to light text when the visitor's device is in dark
   mode, but the community stays light, so for those visitors the FAQ all
   but disappeared. These rules give it the v2 palette in both modes.
   The widget defines its own --fw-text, --fw-muted, --fw-line, --fw-bg and
   --fw-accent. --fw-text: initial makes its text fall back to the page's
   colour, and the others point at our tokens. */

#customcss #root .fw-faq {
  --fw-text: initial;
  --fw-muted: var(--fw-text-muted);
  --fw-line: var(--fw-border-soft);
  --fw-bg: var(--fw-surface-subtle);
  --fw-accent: currentColor;
}

#customcss #root .fw-faq h2 {
  font-family: var(--fw-font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

#customcss #root .fw-faq .fw-faq-intro {
  font-size: 16px;
}

/* The three sections: a grey hairline instead of the blue rule */
#customcss #root .fw-faq details.fw-faq-section,
#customcss #root .fw-faq h3 {
  border-bottom: 1px solid var(--fw-border);
}

#customcss #root .fw-faq details.fw-faq-section > summary {
  padding-left: 0;
  font-size: 18px;
  font-weight: 600;
}

#customcss #root .fw-faq .fw-faq-sub {
  margin-left: 0;
}

#customcss #root .fw-faq h3 {
  font-family: var(--fw-font-heading);
  font-size: 20px;
  font-weight: 400;
}

/* The questions inside each section */
#customcss #root .fw-faq details:not(.fw-faq-section) {
  border-radius: var(--fw-radius-m);
  background: var(--fw-surface);
}

#customcss #root .fw-faq summary::after {
  font-weight: 400;
}

#customcss #root .fw-faq summary:focus-visible {
  outline-color: var(--fw-focus);
}

#customcss #root .fw-faq .fw-faq-tag {
  background: var(--fw-brand-subtle);
  color: inherit;
}

#customcss #root .fw-faq a {
  text-underline-offset: 2px;
}


/* 5e. Ideas page: pipeline, list and filters ------------------------------
   Rounds the pipeline columns and the ideas list like the cards elsewhere,
   and lines "Filter by product" up with "Filter by idea status". */

#customcss #root .widget-container--ideation_pipeline .pipeline__column-wrapper,
#customcss #root .widget-container--ideation_list .list-widget-wrapper {
  border-color: var(--fw-border-soft);
  border-radius: var(--fw-radius-l);
  overflow: hidden;
}

#customcss #root .widget-container--ideation_pipeline .pipeline__column-title {
  font-family: var(--fw-font-heading);
  font-size: 20px;
  font-weight: 400;
}

/* Where scroll bars always show, each column drew a full-height track */
#customcss #root .widget-container--ideation_pipeline .pipeline__ideation-list-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--fw-border) transparent;
}

#customcss #root .widget-container--ideation_list .qa-topic-meta-likes-icon {
  border-radius: var(--fw-radius-m);
}

#customcss #root .product-area-filter.box__pad {
  padding-left: 0;
  padding-right: 0;
}


/* 6. Stats bar ------------------------------------------------------------- */

#customcss #root .widget-container--statistics_bar,
#customcss #root .widget-container--statistics_bar .qa-stats-bar {
  background: var(--fw-surface-soft);
}

#customcss #root .widget-container--statistics_bar {
  border-bottom: 1px solid var(--fw-border-soft);
}

#customcss #root .widget-container--statistics_bar * {
  font-family: var(--fw-font-body) !important;
}

#customcss #root .widget-container--statistics_bar .list__item span,
#customcss #root .widget-container--statistics_bar .widget-last-visitors .widget-title {
  opacity: 1;
  color: var(--fw-text-meta);
}

#customcss #root .stats-bar .list strong {
  font-weight: 600;
  color: var(--fw-text);
}


/* 7. Section headings (custom widgets and featured topics) ----------------
   The widget HTML has uppercase headings. lowercase + ::first-letter turns
   "START YOUR JOURNEY" into "Start your journey" without editing the HTML. */

#customcss #root .fwc-head h2,
#customcss #root .fw-product-title,
#customcss #root .featured-topics .featured-topics__heading {
  font-family: var(--fw-font-heading) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1.15;
  letter-spacing: -0.01em !important;
  text-transform: lowercase !important;
  color: var(--fw-text) !important;
}

#customcss #root .fwc-head h2::first-letter,
#customcss #root .fw-product-title::first-letter,
#customcss #root .featured-topics .featured-topics__heading::first-letter {
  text-transform: uppercase;
}

#customcss #root .fwc-head p {
  margin-top: 16px;
  font-size: 18px;
  color: var(--fw-text-muted);
}


/* 8. "Start your journey" cards --------------------------------------------
   Photo-led cards, like freshworks.com's resource tiles: each card's own
   photo in its natural colour across the top, and the title and line of
   text on a white panel below, in the same card style as the topic cards
   and category tiles. (Until 2 Nov they were solid accent colours with the
   photo as a faint texture, which shouted next to the rest of the page.)
   The Developers page's "Explore by topic" cards use the same classes
   without photos and keep their glow (15), so the photo layout only
   applies to cards that have a photo (.fwc-bg). */

#customcss #root .fwc-wrap {
  max-width: 1140px;
  padding: var(--fw-section-space) 10px 48px;
  background: transparent;
}

#customcss #root .fwc-head {
  margin-bottom: 48px;
}

#customcss #root .fwc-grid {
  gap: 24px;
}

#customcss #root .fwc-card {
  min-height: 220px;
  border-radius: var(--fw-radius-l);
  box-shadow: none;
  background: var(--fw-surface-subtle);
  isolation: isolate;
}

#customcss #root .fwc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fw-shadow-hover);
}

#customcss #root .fwc-fade {
  display: none;
}

#customcss #root .fwc-overlay {
  opacity: 1;
}

#customcss #root .fwc-body {
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  color: var(--fw-text);
}

/* Balanced, so a long title (Freshworks User Network) breaks before its
   last word instead of leaving the arrow alone on a line */
#customcss #root .fwc-title {
  margin-bottom: 8px;
  font-family: var(--fw-font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fw-text);
  text-wrap: balance;
}

/* Cards with a photo: a 124px photo strip, which eases in on hover, over
   a white panel */
#customcss #root .fwc-card:has(> .fwc-bg) {
  min-height: 268px;
  border: 1px solid var(--fw-border-soft);
  background: var(--fw-surface);
}

#customcss #root .fwc-card:has(> .fwc-bg):hover {
  border-color: var(--fw-border);
}

#customcss #root .fwc-card:has(> .fwc-bg) .fwc-overlay {
  display: none;
}

#customcss #root .fwc-card > .fwc-bg {
  z-index: 1;
  inset: 0 0 auto 0;
  height: 124px;
  opacity: 1;
  transform: none;
  transition: transform 0.4s ease;
}

#customcss #root .fwc-card:hover > .fwc-bg {
  transform: scale(1.04);
}

#customcss #root .fwc-card:has(> .fwc-bg) .fwc-body {
  top: 124px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 24px;
  background: var(--fw-surface);
}

#customcss #root .fwc-card:has(> .fwc-bg) .fwc-title {
  margin-bottom: 6px;
  font-size: 24px;
}

#customcss #root .fwc-title::after {
  content: " \2192";
  font-family: var(--fw-font-body);
}

#customcss #root .fwc-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fw-text-muted);
}


/* 9. "Pick your product" cards -------------------------------------------- */

#customcss #root .fw-product-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 48px 10px var(--fw-section-space);
  background: transparent;
}

#customcss #root .fw-product-grid {
  gap: 16px;
}

#customcss #root .fw-product-card {
  min-height: 96px;
  padding: 20px 24px;
  justify-content: space-between;
  border-radius: var(--fw-radius-l);
  border: 1px solid var(--fw-border);
  background: var(--fw-surface);
  box-shadow: none;
  color: var(--fw-text);
}

#customcss #root .fw-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--fw-text);
  box-shadow: var(--fw-shadow-hover);
}

#customcss #root .fw-product-card::after {
  content: "\2192";
  margin-left: 12px;
  font-size: 20px;
}

#customcss #root .fw-name {
  font-family: var(--fw-font-body);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}


/* 10. Featured topics ------------------------------------------------------ */

#customcss #root .homepage-widget-container--featured_topics,
#customcss #root .featured-topics {
  background: var(--fw-surface-soft) !important;
}

#customcss #root .featured-topics {
  padding-top: var(--fw-section-space);
  padding-bottom: 80px;
}

#customcss #root .featured-topics .featured-topics__heading {
  margin-bottom: 48px !important;
  text-align: center;
}

#customcss #root .featured-topics .card-widget-wrapper {
  border: 1px solid var(--fw-border-soft);
  border-radius: var(--fw-radius-l);
  background: var(--fw-surface);
}

#customcss #root .featured-topics .featured-topic:hover .card-widget-wrapper {
  border-color: var(--fw-border);
  box-shadow: var(--fw-shadow-hover);
}

#customcss #root .featured-topics .featured-topic__heading {
  font-family: var(--fw-font-body);
  font-weight: 600;
  color: var(--fw-text);
}

#customcss #root .topic__content-type-pill {
  padding: 4px 10px;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-brand-subtle);
  color: var(--fw-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The section's line and cards, in line with the rest of the page: the
   subtitle centred and grey under the heading, as in "Start your journey";
   a 190px photo strip (Gainsight's was 244px) that eases in on hover like
   the journey cards; a white sentence-case label instead of an uppercase
   lilac one; and the topic cards' 18px title and 13px meta. */
#customcss #root .featured-topics {
  & .featured-topics__heading:has(+ .featured-topics__subheading) {
    margin-bottom: 16px !important;
  }

  & .featured-topics__subheading {
    margin: 0 0 48px !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--fw-text-muted);
  }

  & .featured-topic .card-widget-wrapper {
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.15s ease, box-shadow 0.2s ease;
  }

  & .featured-topic:hover .card-widget-wrapper {
    transform: translateY(-4px);
  }

  /* The lift makes the card body a stacking context, which paints it over
     Gainsight's full-card link and swallows the click; the link stays on top */
  & .featured-topic__url-link {
    z-index: 1;
  }

  & .featured-topic figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--fw-radius-l) var(--fw-radius-l) 0 0;
  }

  /* Gainsight sizes the photo by a 9:4 ratio; a fixed height needs the
     width set too, or the ratio shrinks it */
  & .featured-topic__hero {
    width: 100% !important;
    height: 190px !important;
    aspect-ratio: auto !important;
    transition: transform 0.4s ease;
  }

  & .featured-topic:hover .featured-topic__hero {
    transform: scale(1.04);
  }

  /* Sentence case everywhere; white over a photo, lilac on a text-only
     card (production's), where white would vanish */
  & .topic__content-type-pill {
    z-index: 2;
    letter-spacing: 0;
    text-transform: none;
  }

  & .featured-topic--featured-image .topic__content-type-pill {
    background: var(--fw-surface);
    box-shadow: 0 1px 2px rgb(17 17 17 / 8%);
  }

  & .featured-topic__title {
    padding: 20px 24px;
  }

  & .card-widget-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fw-text-muted);
  }

  & .featured-topic__heading {
    margin: 0 0 14px;
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em;
  }

  & .post-meta__container,
  & .post-meta__container :is(time, .thread-meta-item__text) {
    font-size: 13px;
    color: var(--fw-text-meta);
  }

  & .post-meta__container--right {
    gap: 14px;
  }

  & .post-meta__container--right > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  & .post-meta__container--right svg {
    width: 16px;
    height: 16px;
    margin: 0;
  }
}


/* 11. "Join the conversation" and topic stream ----------------------------- */

#customcss #root .custom-widget-title {
  font-family: var(--fw-font-heading) !important;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fw-text);
}

#customcss #root .custom-widget-subtitle {
  font-family: var(--fw-font-body) !important;
  font-size: 18px;
  color: var(--fw-text-muted);
}

#customcss #root .custom-content-stream_with_sidebar {
  padding-top: 48px;
}

#customcss #root .topic-view,
#customcss #root .forum-list > .box {
  border-color: var(--fw-border-soft);
}

#customcss #root .topic-view:hover {
  border-color: var(--fw-border);
}

/* Topic cards (Recent activity, Help others, category pages). Gainsight's
   card is dense: a 16px bold title at 1.19 line height, 14px excerpts in its
   own blue-grey, name, role and "posted in" all at 14px with no leading, the
   body indented 52px, a divider and 18px icons. Here it takes the site's
   type: a small meta line, an 18px title, a two-line excerpt and a quiet
   stats row, with the hover of the category tiles. Read topics no longer
   fade to 70%, so every title has the same weight. */
#customcss #root .topic-list-item-card {
  padding: 24px;
  margin-bottom: 12px;
  border-radius: var(--fw-radius-l);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  &:hover {
    border-color: var(--fw-border);
    box-shadow: 0 4px 16px rgb(17 17 17 / 6%);
  }

  /* Meta line: avatar, name, role, and "Posted in" on the right */
  & .topic-list-item-card_header {
    align-items: center;
    gap: 10px;
  }

  & .topic-list-item-card_user-image-container {
    width: auto;
  }

  & .topic-list-item-card_user-image-container :is(.avatar, .default-avatar, img) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    font-size: 13px;
    line-height: 32px;
  }

  /* Baseline lines the name up with "Posted in" on desktop; on phones
     Gainsight stacks them in a column, where it falls back to left-aligned
     (center would put the name in the middle of the card) */
  & .topic-list-item-card_header_metadata {
    align-items: baseline;
    gap: 2px 12px;
  }

  & .topic-list-item-card_header_user-info,
  & .topic-list-item-card_header_user-info .username {
    font-size: 14px;
    line-height: 1.4;
  }

  & .topic-list-item-card_header_user-info .username {
    font-weight: 600;
    color: var(--fw-text);
  }

  & .topic-list-item-card_header_user-info .user-title,
  & .topic-list-item-card_topic-location-link {
    font-size: 13px;
    line-height: 1.4;
    color: var(--fw-text-meta);
  }

  /* "posted in", capitalised by Gainsight as "Posted In": sentence case */
  & .topic-list-item-card_topic-location-link {
    text-transform: none;
  }

  & .topic-list-item-card_topic-location-link span {
    font-size: inherit;
    line-height: inherit;
  }

  & .topic-list-item-card_topic-location-link > span:first-child {
    display: inline-block;
  }

  & .topic-list-item-card_topic-location-link > span:first-child::first-letter {
    text-transform: uppercase;
  }

  & .topic-list-item-card_topic-name {
    border: 0;
    text-decoration: none;
    color: var(--fw-text-muted);
  }

  & .topic-list-item-card_topic-location-link:hover .topic-list-item-card_topic-name {
    color: var(--fw-text);
    text-decoration: underline;
  }

  /* Title and excerpt, full width under the meta line */
  & .topic-list-item-card_body {
    margin: 14px 0 0;
    padding: 0;
  }

  & .topic-list-item-card_title-text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--fw-text);
  }

  & .topic-list-item-card_title-text--read {
    opacity: 1;
  }

  & .topic-list-item-card_text-preview {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fw-text-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Stats and last activity: one quiet row, no divider */
  & .topic-list-item-card_footer-container {
    margin: 16px 0 0;
    padding: 0;
    border-top: 0;
    font-size: 13px;
    color: var(--fw-text-meta);
  }

  & .topic-list-item-card_topic-metrics {
    gap: 18px;
  }

  & .topic-list-item-card_topic-metrics > *,
  & .topic-list-item-card_topic-metrics > * > :is(a, button),
  & .topic-list-item-card_topic-metrics :is(.topic__likes-count, .topic__views-count, .topic__reply-count) {
    display: inline-flex;
    align-items: center;
    height: 20px;
  }

  & .topic-list-item-card_topic-metrics :is(.topic__likes-count, .topic__views-count, .topic__reply-count) {
    gap: 5px;
    line-height: 1;
  }

  & .topic-list-item-card_topic-metrics :is(.thread-meta-item__icon, svg) {
    margin: 0;
  }

  & .topic-list-item-card_topic-metrics .thread-meta-item__icon {
    font-size: 15px;
  }

  & .topic-list-item-card_topic-metrics svg {
    width: 16px;
    height: 16px;
  }

  & :is(.thread-meta-item__text, .topic-list-item-card_topic-age-container, .topic-list-item-card_topic-age-container time) {
    font-size: 13px;
  }

  & .topic-list-item-card_topic-age-container {
    gap: 8px;
  }

  & .topic-list-item-card_topic-age-container :is(.avatar, .default-avatar, img) {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    font-size: 11px;
    line-height: 22px;
  }
}

/* Tags (tag cloud, topics). Gainsight's hover turns a tag near-white with
   a purple brand border, and on the dark Developers pages the text stays
   light grey, so a hovered tag all but vanished. Here the hover is a step
   darker in either theme, with full-contrast text. (a.tag--pill outranks
   the dark theme's text colour in 15.) */
#customcss #root .tag--pill {
  border-color: var(--fw-border-soft);
  background: var(--fw-surface-subtle);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#customcss #root a.tag--pill:hover,
#customcss #root a.tag--pill:focus-visible {
  border-color: var(--fw-border);
  background: var(--fw-surface-medium);
  color: var(--fw-text);
  text-decoration: none;
}

/* "Show more discussion threads": outline pill instead of a full-width black bar */
#customcss #root .load-more-container {
  text-align: center;
}

#customcss #root .load-more-container .btn--load-more {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 12px 28px;
  font-size: 16px;
  line-height: 1.5;
  background: transparent;
  border: 1px solid var(--fw-text);
  color: var(--fw-text);
}

#customcss #root .load-more-container .btn--load-more:hover {
  background: var(--fw-surface-subtle);
  border-color: var(--fw-text);
  color: var(--fw-text);
}

/* While it loads (.is-loading): Gainsight's loader is white dots, made for
   its black bar, so on the outline pill they sat over the label. The label
   steps aside and a small spinner in the text colour turns in its place,
   so the pill keeps its size. */
#customcss #root .load-more-container .btn--load-more.is-loading {
  position: relative;
  cursor: progress;
}

#customcss #root .load-more-container .btn--load-more.is-loading > span:not(.loader) {
  visibility: hidden;
}

#customcss #root .load-more-container .btn--load-more.is-loading .loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--fw-border);
  border-top-color: var(--fw-text);
  border-radius: 50%;
  box-shadow: none;
  animation: fw-spin 0.7s linear infinite;
}

#customcss #root .load-more-container .btn--load-more.is-loading .loader::before,
#customcss #root .load-more-container .btn--load-more.is-loading .loader::after {
  display: none;
}

@keyframes fw-spin {
  to { transform: rotate(360deg); }
}


/* 11b. "Join the conversation": Categories tab ------------------------------
   Gainsight draws it as one long table: 72px images, 110px rows and 24px
   headings, and production's categories have no images, so each row there
   starts with a 104px gap. Here each group is a heading over two columns of
   compact tiles, like the topic cards. A tile's arrow opens its subcategories
   in place (the back arrow returns); the collapse arrow hides a group by
   adding .is-hidden, so the grid leaves hidden groups alone. */
#customcss #root .widget-container--category_and_topics_stream_only {
  /* The page's last section: room above the footer, even when every group
     is collapsed and the tab is short */
  padding-bottom: 72px;

  & .forum-list {
    padding-top: 8px;
    border: 0;
  }

  & .forum-list > .box {
    padding: 0;
    border: 0;
    background: transparent;
  }

  & .forum-list > .box + .box {
    margin-top: 36px;
  }

  & .forum-list .category-section {
    display: block;
    width: auto;
  }

  & .category-section > .category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
  }

  & .category-section > .category-title:has(> .category-step-backward) {
    justify-content: flex-start;
    gap: 6px;
  }

  & .category-section > .category-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
  }

  & .category-section > .category-title h2 a,
  & .forum-table .flag__body h3 a {
    color: var(--fw-text);
  }

  /* Production's Custom CSS sets 16px on these inner links and counts */
  & .category-section > .category-title h2 a,
  & .forum-table .flag__body h3 a,
  & .forum-table .flag__body ul span {
    font-size: inherit;
    line-height: inherit;
  }

  & .category-section > .category-description {
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fw-text-meta);
  }

  /* Collapse, open and back arrows: round, quiet buttons */
  & .forum-list .table__collapse,
  & .category-step-backward {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--fw-radius-pill);
    color: var(--fw-text-meta);
    cursor: pointer;
  }

  & .forum-list .table__collapse:hover,
  & .category-step-backward:hover {
    background: var(--fw-surface-subtle);
    color: var(--fw-text);
  }

  /* Gainsight centres it with a transform that also flips it when the group
     is collapsed; it sits in the flex row instead, and flips with rotate */
  & .category-section > .category-title .table__collapse {
    top: auto;
    transform: none;
  }

  & .category-section.is-collapsed > .category-title .table__collapse {
    rotate: 180deg;
  }

  & .category-step-backward {
    margin-left: -6px;
  }

  & .forum-table:not(.is-hidden) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: auto;
  }

  & .forum-table > .table__row,
  & .forum-table .table__cell {
    display: block;
    width: auto;
    padding: 0;
  }

  /* The tile; its title link covers it, so the whole tile is clickable */
  & .forum-table .user.flag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--fw-border-soft);
    border-radius: var(--fw-radius-m);
    background: var(--fw-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  & .forum-table .user.flag:hover {
    border-color: var(--fw-border);
    box-shadow: 0 4px 16px rgb(17 17 17 / 6%);
  }

  & .forum-table .user.flag:has(.table__collapse) {
    padding-right: 52px;
  }

  & .forum-table .flag__body h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  & .forum-table .flag__body .table__collapse {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  /* The category's image, when it has one; no image, no gap */
  & .forum-table .flag__image {
    display: block;
    flex: none;
    width: auto;
    padding: 0;
  }

  & .forum-table .flag__image:not(:has(img)) {
    display: none;
  }

  & .forum-table .forum-image,
  & .forum-table .forum-image img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  & .forum-table .flag__body {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 0;
  }

  & .forum-table .flag__body .category-title {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  & .forum-table .flag__body h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
  }

  & .forum-table .flag__body ul {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--fw-text-meta);
  }
}

@media (max-width: 720px) {
  #customcss #root .widget-container--category_and_topics_stream_only .forum-table:not(.is-hidden) {
    grid-template-columns: 1fr;
  }
}


/* 11c. "Join the conversation": the sign-in box over topics and ideas -----
   Signed-out visitors see it over a blurred topic or idea (Gainsight's
   .stay-in-loop modal). It kept Gainsight's own blue button and 8px card, so
   it's now the site's card and black pill button. */
#customcss .stay-in-loop-modal {
  padding: 28px;
  border: 1px solid var(--fw-border-soft);
  border-radius: var(--fw-radius-l);
  background: var(--fw-surface);
  box-shadow: 0 16px 48px -12px rgb(17 17 17 / 18%);
}

#customcss .stay-in-loop-title {
  font-family: var(--fw-font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--fw-text);
}

#customcss .stay-in-loop-modal p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fw-text-muted);
}

#customcss .stay-in-loop-cta {
  height: 44px;
  border: 0;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-button);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

#customcss .stay-in-loop-cta:hover {
  background: var(--fw-button-hover);
}

#customcss .stay-in-loop-cta:focus-visible {
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}


/* 12. Footer --------------------------------------------------------------- */

#customcss #root .Template-footer {
  background: var(--fw-surface-soft);
  border-top: 1px solid var(--fw-border-soft);
}


/* 13. Responsive ----------------------------------------------------------- */

@media (max-width: 767px) {
  #customcss #root .custom-html:has(h1) > div {
    padding-top: 56px !important;
  }

  #customcss #root .custom-html:has(h1) h1 {
    font-size: 40px !important;
  }

  #customcss #root .custom-html:has(h1) p {
    font-size: 17px !important;
  }

  /* No ⌘K on phones, and it collides with the placeholder */
  #customcss #root .generic_hero .search-box__input-open-shortcut {
    display: none;
  }

  #customcss #root .generic_hero .search-box__input {
    padding-right: 16px;
  }

  #customcss #root .fwc-card {
    min-height: 160px;
  }

  /* Phones keep the wider gutter the hero uses */
  #customcss #root .fwc-wrap,
  #customcss #root .fw-product-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  #customcss #root .fwc-head h2,
  #customcss #root .fw-product-title,
  #customcss #root .featured-topics .featured-topics__heading,
  #customcss #root .custom-widget-title {
    font-size: 32px !important;
  }

  #customcss #root {
    --fw-section-space: 64px;
  }
}


/* 14. Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #customcss #root .fwc-card,
  #customcss #root .fwc-card > .fwc-bg,
  #customcss #root .featured-topics .featured-topic .card-widget-wrapper,
  #customcss #root .featured-topics .featured-topic__hero,
  #customcss #root .fw-product-card {
    transition: none;
  }

  #customcss #root .fwc-card:hover,
  #customcss #root .fwc-card:hover > .fwc-bg,
  #customcss #root .featured-topics .featured-topic:hover .card-widget-wrapper,
  #customcss #root .featured-topics .featured-topic:hover .featured-topic__hero,
  #customcss #root .fw-product-card:hover {
    transform: none;
  }
}


/* 15. Developers section: dark theme ----------------------------------------
   The developer landing page (/p/developers) and every page in the
   Developers categories switch to a dark palette, so the section feels like
   its own place while keeping the community's paths and components.
   Gainsight names the page on <body>: custom-page_developers on the landing
   page, and category-<id> on category and topic pages. The ids below are the
   sandbox's (Developers is 55, its categories 56 to 64, and Product 68,
   which holds Product APIs and Customize x Workflows). The Wiki's
   categories (65 to 67) are hidden from members, so they aren't listed.
   Production's categories will have different ids, so this list has to
   change there.
   The tokens in section 1 live on <body> too, so redefining them here
   re-colours everything built on them, Gainsight's theme variables included.
   The nested rules after them fix the parts Gainsight colours itself. */

#customcss:is(.custom-page_developers, .category-55, .category-56, .category-57, .category-58, .category-59, .category-60, .category-61, .category-62, .category-63, .category-64, .category-68) {
  color-scheme: dark;

  --fw-text: #f3f2ee;
  --fw-text-muted: #b9b6b0;
  --fw-text-meta: #9c9993;
  --fw-surface: #121211;
  --fw-surface-soft: #191917;
  --fw-surface-subtle: #242421;
  --fw-surface-medium: #2f2f2c;
  --fw-border: #43423e;
  --fw-border-soft: #2c2c29;
  --fw-button: #f3f2ee;
  --fw-button-hover: #d8d6d0;
  --fw-button-active: #f3f2ee;
  --fw-focus: #c98af2;
  --fw-brand-base: #221a29;
  --fw-brand-subtle: #35233f;
  --fw-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Buttons turn light, so their text turns dark */
  --config-button-cta-color: #121211;

  background: var(--fw-surface);
  color: var(--fw-text);

  /* The logo's wordmark is black. Inverting it and turning the hue back
     round keeps the coloured mark close to its own colours. */
  & .header-navigation_logo {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Cards, panels and the reply box that Gainsight paints white */
  & #root :is(.topic-list-item-card, .topic-wrapper, .topic-reply-composer-inline, .thread-list-title, .stats-bar, .category-page_list-item) {
    border-color: var(--fw-border-soft);
    background: var(--fw-surface-soft);
  }

  & #root .qa-forum-subscribe-button {
    background: transparent !important;
  }

  & #root .editor__input {
    border-color: var(--fw-border);
    background: var(--fw-surface);
    color: var(--fw-text);
  }

  /* The login and sign-up popups, which Gainsight paints white with dark
     input text. They sit outside #root. */
  & :is(.mfp-content, .modals.box) {
    background: var(--fw-surface-soft);
  }

  & :is(.mfp-content, .modals.box) :is(input[type=text], input[type=email], input[type=password]) {
    border-color: var(--fw-border);
    background: var(--fw-surface-subtle);
    color: var(--fw-text);
  }

  /* Text Gainsight colours dark grey */
  & #root :is(.thread-list-view-title, a.username, .qa-link-tab.is-active, .content-type-filters__button.active, .content-type-filters__button.active .content-type-filters__label, .content-type-filters__button.active .content-type-filters__label span) {
    color: var(--fw-text);
  }

  & #root .post__content,
  & #root .post__content :is(p, li, h1, h2, h3, h4, strong) {
    color: var(--fw-text);
  }

  & #root :is(.topic-list-item-card_text-preview, .tag--pill) {
    color: var(--fw-text-muted);
  }

  & #root :is(.thread-meta-item__text, .templatefoot-privacy-links a, .templatefoot-privacy-link-button) {
    color: var(--fw-text-meta);
  }

  /* Code in posts */
  & #root .post__content :is(pre, code) {
    border-color: var(--fw-border);
    background: var(--fw-surface-subtle);
    color: var(--fw-text);
  }

  & #root .profilepicture {
    background: transparent;
  }

  & #root .scroll-to-top-sticky-button {
    background: var(--fw-surface-subtle);
    color: var(--fw-text);
  }
}

/* Landing page: the murmuration's flecks are inverted to their light
   versions and screened onto the dark band, so the birds glow instead */
#customcss.custom-page_developers {
  --fw-murmuration-filter: invert(1) hue-rotate(180deg);
  --fw-murmuration-blend: screen;
}

/* Landing page topic cards: dark, with a glow of each card's accent in the
   corner instead of a solid fill, which would be too loud here */
#customcss.custom-page_developers #root .fwc-card {
  border: 1px solid var(--fw-border-soft);
  background: var(--fw-surface-soft);
}

#customcss.custom-page_developers #root .fwc-card:hover {
  border-color: var(--fw-border);
}

#customcss.custom-page_developers #root .fwc-card:nth-child(1) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(188, 91, 241, 0.45), transparent 65%) !important; }
#customcss.custom-page_developers #root .fwc-card:nth-child(2) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(235, 61, 167, 0.4), transparent 65%) !important; }
#customcss.custom-page_developers #root .fwc-card:nth-child(3) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(242, 158, 13, 0.4), transparent 65%) !important; }
#customcss.custom-page_developers #root .fwc-card:nth-child(4) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(115, 188, 41, 0.4), transparent 65%) !important; }
#customcss.custom-page_developers #root .fwc-card:nth-child(5) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(255, 87, 74, 0.4), transparent 65%) !important; }
#customcss.custom-page_developers #root .fwc-card:nth-child(6) .fwc-overlay { background: radial-gradient(120% 100% at 100% 0%, rgba(243, 242, 238, 0.18), transparent 65%) !important; }

#customcss.custom-page_developers #root .fwc-desc {
  color: var(--fw-text-muted);
}

/* The cards here sit four to a row, so the titles are smaller to keep
   "Developer Ideas →" on one line */
#customcss.custom-page_developers #root .fwc-title {
  font-size: 24px;
}


/* 16. Category and topic pages ----------------------------------------------
   Carries the homepage hero into every category: the off-white band, a Lora
   heading and the pill search, with the topic and reply counts closing the
   band the way the stats close the homepage hero. Each category keeps its own
   image, which is set per category in Control. Topic titles and sidebar
   headings switch to Lora too. The Developers section's dark theme (15)
   builds on these through the same tokens.
   The header comes in two versions: .forum-featured-image when the category
   has an image, and .thread-list-title when it doesn't. */

#customcss #root .widget-container--category_hero :is(.forum-featured-image, .thread-list-title) {
  background-color: var(--fw-surface-soft);
}

/* Gainsight indents the imageless header by 10px, which shows as a strip
   on the left once the band has a colour */
#customcss #root .widget-container--category_hero .thread-list-title {
  margin-left: 0;
}

#customcss #root :is(.hero-subforum-title, .thread-subforum-title) {
  font-family: var(--fw-font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fw-text);
}

#customcss #root .widget-container--category_hero :is(.hero-subforum-description, .thread-list-view-description) {
  max-width: 560px;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fw-text-muted);
}

#customcss #root .widget-container--category_hero .searchbar-in-hero {
  margin-top: 28px;
}

#customcss #root .widget-container--category_hero .search-box__input {
  height: 56px;
  padding-right: 56px !important; /* Gainsight sets 40px with !important */
  font-size: 16px;
  text-overflow: ellipsis;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.04);
}

#customcss #root .widget-container--category_hero .search-box__input:focus {
  border-color: var(--fw-text);
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}

/* A parent category has no stats bar under its header, so the band gets its own edge */
#customcss #root .parent-category .widget-container--category_hero :is(.forum-featured-image, .thread-list-title) {
  border-bottom: 1px solid var(--fw-border-soft);
}

#customcss #root .widget-container--category_stats .stats-bar {
  background: var(--fw-surface-soft);
  border-bottom: 1px solid var(--fw-border-soft);
}

#customcss #root .widget-container--category_stats .list__item span {
  color: var(--fw-text-meta);
}

/* Subcategory tiles on a parent category */
#customcss #root .category-page_list-item {
  border-color: var(--fw-border-soft);
  border-radius: var(--fw-radius-m);
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#customcss #root .category-page_list-item:hover {
  border-color: var(--fw-border);
  box-shadow: var(--fw-shadow-hover);
}

#customcss #root .topic__title {
  font-family: var(--fw-font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#customcss #root :is(h2, h3).widget-title {
  font-family: var(--fw-font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

/* The Ideas disclaimer added under Settings → Footer: small print in line
   with the footer above it, instead of edge-to-edge body text. The wrapper
   round Gainsight's footer gets the same background, so there's no seam. */
#customcss #root .powered-by-insided-footer,
#customcss #root .custom-footer {
  background: var(--fw-surface-soft);
}

#customcss #root .custom-footer {
  padding: 0 max(20px, calc((100% - 1100px) / 2)) 32px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: var(--fw-text-meta);
}

/* Gainsight shows the custom footer on every page; the disclaimer is for
   the Ideas pages only (product counsel, 21 Oct): the Ideas list, and a
   single idea, which is a topic with no category (an empty .category-;
   other topics carry .category-<id>) */
#customcss:not(.twig_page-ideas-overview):not(.twig_page-topic.category-) #root .custom-footer {
  display: none;
}

/* On phones Gainsight stretches the category image behind the text and drops
   the side padding, so the image goes and the text gets the page gutter */
@media (max-width: 767px) {
  #customcss #root .widget-container--category_hero .forum-featured-image {
    background-image: none !important;
  }

  #customcss #root .widget-container--category_hero .forum-featured-image__content {
    padding: 0 20px;
  }

  #customcss #root :is(.hero-subforum-title, .thread-subforum-title) {
    font-size: 36px;
  }

  #customcss #root .topic__title {
    font-size: 26px;
  }
}