@charset "UTF-8";

/* ==========================================================================
   PVcase Help Center — Fusion design system
   Rebuilt August 2026 to match the "Help Center 6c Final" Claude Design.
   Tokens mirror PVcase Fusion (fusion-web design-tokens). Configurable
   values are wired to the Zendesk theme settings (rgba(5, 5, 5, 1), etc.) so the
   Guide admin can adjust brand colors without editing CSS.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');


/* --------------------------------------------------------------- Tokens */
:root {
  /* Font Family */
  --fusion-font-family: "Host Grotesk", "Inter", Arial, sans-serif, -apple-system, BlinkMacSystemFont;
  --fusion-font-headers: "Rethink Sans", "Host Grotesk", "Inter", Arial, sans-serif, -apple-system, BlinkMacSystemFont;
  --fusion-font-body: var(--fusion-font-family);
  
  /* Font Sizes */
  --fusion-font-size-h1: 48px;
  --fusion-font-size-h2: 36px;
  --fusion-font-size-h3: 28px;
  --fusion-font-size-h4: 24px;
  --fusion-font-size-body: 14px;

  /* Absolutes */
  --fusion-ui-absolute-black: #000000;
  --fusion-ui-absolute-white: #ffffff;

  /* Gray */
  --fusion-ui-gray-50:  #fcfcfc;
  --fusion-ui-gray-75:  #fafafa;
  --fusion-ui-gray-100: #f6f6f6;
  --fusion-ui-gray-200: #eeeeee;
  --fusion-ui-gray-300: #dedede;
  --fusion-ui-gray-400: #d1d1d1;
  --fusion-ui-gray-500: #b2b2b2;
  --fusion-ui-gray-600: #919191;
  --fusion-ui-gray-700: #6b6b6b;
  --fusion-ui-gray-800: #424242;
  --fusion-ui-gray-900: #1f1f1f;

  /* Slate — brand-neutral */
  --fusion-ui-slate-100: #f2f6fa;
  --fusion-ui-slate-200: #e6eef7;
  --fusion-ui-slate-300: #c5d7ed;
  --fusion-ui-slate-700: #2e4a6e;

  /* Status */
  --fusion-ui-red-100: #ffe9eb;
  --fusion-ui-red-500: #d91a2a;
  --fusion-ui-red-600: #b11727;
  --fusion-ui-red-700: #7c1522;
  --fusion-ui-yellow-100: #fff7de;
  --fusion-ui-yellow-500: #edae1a;
  --fusion-ui-yellow-700: #914716;
  --fusion-ui-green-100: #e6faeb;
  --fusion-ui-green-400: #4ed972;
  --fusion-ui-green-500: #24be52;
  --fusion-ui-green-600: #12993f;
  --fusion-ui-green-700: #146b34;
  --fusion-ui-blue-100: #e8f1fc;
  --fusion-ui-blue-500: #307cf0;
  --fusion-ui-blue-600: #185fc9;
  --fusion-ui-blue-700: #19478c;

  /* Tag colors */
  --fusion-tag-purple-bg: #f1e9ff;
  --fusion-tag-purple-fg: #3d158a;
  --fusion-tag-orange-bg: #ffe9cf;
  --fusion-tag-orange-fg: #6a2f03;

  /* Semantic */
  --fusion-text-primary:   var(--fusion-ui-gray-900);
  --fusion-text-secondary: var(--fusion-ui-gray-700);
  --fusion-text-tertiary:  var(--fusion-ui-gray-600);
  --fusion-text-inverse:   var(--fusion-ui-absolute-white);
  --fusion-surface-primary:   var(--fusion-ui-absolute-white);
  --fusion-surface-secondary: var(--fusion-ui-gray-100);
  --fusion-surface-border:    var(--fusion-ui-gray-300);

  /* Spacing */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;

  /* Radius */
  --fusion-radius-s: 3px;
  --fusion-radius-m: 4px;
  --fusion-radius-l: 8px;
  --fusion-radius-pill: 999px;

  /* Shadows */
  --fusion-shadow-100: 0px 1px 0.5px rgba(0,0,0,0.025), 0px 2px 1.5px rgba(0,0,0,0.05);
  --fusion-shadow-200: 0px 1px 1.2px rgba(0,0,0,0.08), 0px 3px 5px rgba(0,0,0,0.13);
  --fusion-shadow-300: 0px 0.4px 0.73px rgba(0,0,0,0.11), 0px 1.34px 4.46px rgba(0,0,0,0.15), 0px 6px 11px rgba(0,0,0,0.14);

  /* Layout */
  --page-max: 1280px;
  --content-max: 1180px;
  --page-pad: 48px;
  --header-height: 64px;
  --subnav-height: 52px;

  /* ------- Configurable brand tokens, wired to Guide theme settings ------- */
  --brand:        rgba(5, 5, 5, 1);         /* near-black #050505 */
  --brand-text:   rgba(0, 0, 0, 1);    /* #000 */
  --near-black:   rgba(5, 5, 5, 1);
  --text:         rgba(5, 5, 5, 1);          /* body text */
  --link:         rgba(36, 47, 158, 1);          /* links */
  --link-hover:   rgba(0, 0, 0, 1);
  --link-visited: rgba(36, 47, 158, 1);
  --bg:           #FFFFFF;
  --accent:       #D7F45B;        /* lime #D7F45B */
  --secondary:    #2300AF;     /* deep purple #2300AF */
  --hero-bg:      #F4F4EB;/* #F4F4EB */
  --pvcase-green: var(--accent);        /* article TOC active indicator */
  --announcement-bg:   rgba(255, 170, 18, 1);  /* lime #D7F45B */
  --announcement-text: rgba(5, 5, 5, 1);/* near-black */

  --heading-font: 'Rethink Sans', 'Host Grotesk', 'Inter', Arial, sans-serif, -apple-system, BlinkMacSystemFont;
  --text-font:    'Host Grotesk', 'Inter', Arial, sans-serif, -apple-system, BlinkMacSystemFont;

  --focus-ring: 0 0 0 2px var(--fusion-ui-absolute-white), 0 0 0 4px var(--fusion-ui-blue-500);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--text-font, var(--fusion-font-family));
  font-size: var(--fusion-font-size-body);
  line-height: 1.5;
  color: var(--text, var(--fusion-text-primary));
  background: var(--bg, #fff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Pin the footer to the bottom of the viewport on short pages instead of
     leaving a blank gap below it, without needing a single wrapper element
     around every template's page content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; border: 0; }
svg { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font, var(--fusion-font-family));
  color: var(--text, var(--fusion-text-primary));
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.2;
}

h1 {font-size: var(--fusion-font-size-h1);}
h2 {font-size: var(--fusion-font-size-h2);}
h3 {font-size: var(--fusion-font-size-h3);}
h4 {font-size: var(--fusion-font-size-h4);}

p { margin: 0 0 1em; }

a {
  color: var(--link, var(--fusion-ui-blue-600));
  text-decoration: none;
}
a:hover { color: var(--link-hover, var(--fusion-ui-blue-700)); text-decoration: underline; }
a:visited {   color: var(--link, var(--fusion-ui-blue-600)); text-decoration: none; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font-family: inherit; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--fusion-surface-border); margin: var(--sp-24) 0; }

/* ---------------------------------------------------- Accessibility */
:focus-visible {
  outline: 2px solid var(--fusion-ui-blue-500);
  outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus, [role="menuitem"]:focus {
  outline: 2px solid var(--fusion-ui-blue-500);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.visibility-hidden,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-navigation {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--near-black, #0a0a0a);
  color: #fff;
  border-radius: 0 0 var(--fusion-radius-m) 0;
  font-weight: 600;
}
.skip-navigation:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px 0px;
}
.container-divider { border-top: 0; height: 0; }

/* Generic centered content wrapper used in composed sections */
.hc-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Full-bleed band that keeps inner content centered */
.band { width: 100%; }
.band > .hc-wrap { padding: 0 var(--page-pad); }

/* --------------------------------------------------------- Buttons */
.button,
button.button,
a.button,
input[type="submit"],
[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--fusion-radius-m);
  background: var(--near-black, #0a0a0a);
  color: #fff;
  font: 600 14px/1 var(--fusion-font-family);
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.button:hover,
a.button:hover,
input[type="submit"]:hover {
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
}
.button:disabled,
.button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.button-secondary,
.button.secondary {
  background: #fff;
  color: var(--fusion-text-primary);
  border-color: var(--fusion-surface-border);
}
.button-secondary:hover,
.button.secondary:hover {
  background: var(--fusion-ui-gray-100);
  color: var(--fusion-text-primary);
  border-color: var(--fusion-ui-gray-700);
}

.button-large { padding: 14px 26px; font-size: 16px; }

/* Accent "chip" square that trails a primary CTA (design motif) */
.btn-chip {
  width: 8px; height: 8px;
  background: var(--accent, #d7f45b);
  display: inline-block;
  flex: none;
}

/* ----------------------------------------------------------- Tables
   (Framework tables — request/profile lists. Article content tables
   are styled separately further down.) */
.table, table.table {
  width: 100%;
  border-collapse: collapse;
  font-size:  var(--fusion-font-size-body);
}
.table th, .table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
  text-align: left;
  vertical-align: middle;
}
.table th {
  font-weight: 600;
  color: var(--fusion-text-secondary);
  border-bottom-color: var(--fusion-surface-border);
}

/* ------------------------------------------------------------ Forms */
.form { max-width: 760px; }
.form-field, fieldset {
  margin: 0 0 var(--sp-24);
  padding: 0;
  border: 0;
}
label, .form-field label {
  display: block;
  font: 500 var(--fusion-font-size-body)/1.4 var(--fusion-font-family);
  color: var(--fusion-text-primary);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
input[type="tel"], input[type="date"], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--fusion-ui-gray-400);
  border-radius: var(--fusion-radius-m);
  background: #fff;
  color: var(--fusion-text-primary);
  font: 400 var(--fusion-font-size-body)/1.4 var(--fusion-font-family);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--fusion-ui-blue-500);
  box-shadow: 0 0 0 3px var(--fusion-ui-blue-100);
  outline: none;
}
textarea { min-height: 140px; resize: vertical; }
.form-header, .form-field .description, .optional {
  color: var(--fusion-text-tertiary);
  font-size: 12px;
}

/* =================================================== Contact support page */
.new-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.new-request-main { min-width: 0; }
.new-request-card {
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  box-shadow: var(--fusion-shadow-100);
  padding: 32px;
}
.new-request-card .form { max-width: none; }

.new-request-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.new-request-sidebar-card {
  background: var(--fusion-surface-secondary);
  border-radius: var(--fusion-radius-l);
  padding: 24px;
}
.new-request-sidebar-card h2 {
  font: 700 16px/1.3 var(--heading-font, var(--fusion-font-family));
  margin: 0 0 8px;
}
.new-request-sidebar-card p {
  color: var(--fusion-text-secondary);
  font-size: 13px;
  margin: 0 0 14px;
}
.new-request-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--fusion-ui-gray-300);
  color: var(--fusion-text-primary);
  font: 600 13px/1.3 var(--fusion-font-family);
}
.new-request-sidebar-link:first-of-type { border-top: 0; padding-top: 0; }
.new-request-sidebar-link:visited { color: var(--fusion-text-primary); }
.new-request-sidebar-link:hover, .new-request-sidebar-link:visited:hover { color: var(--near-black); text-decoration: none; }
.new-request-sidebar-link svg { flex: none; color: var(--fusion-ui-gray-700); }
.new-request-sidebar-link:hover svg { color: var(--near-black); }

.new-request-steps { display: flex; flex-direction: column; gap: 14px; }
.new-request-steps li { display: flex; align-items: flex-start; gap: 12px; }
.new-request-step-index {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--near-black, #0a0a0a);
  color: #fff;
  font: 700 12px/1 var(--fusion-font-family);
}
.new-request-steps li span:last-child {
  font-size: 13px;
  color: var(--fusion-text-secondary);
  line-height: 1.5;
}
.new-request-steps li a { color: var(--fusion-text-primary); font-weight: 600; }

@media (max-width: 900px) {
  .new-request-layout { grid-template-columns: 1fr; }
  .new-request-sidebar { order: -1; }
}

/* Best-effort styling for fields Zendesk's new-request-form web component
   (Zendesk Garden) renders into #new-request-form. It outputs real native
   input/textarea/select/button elements, so these still take effect
   alongside whatever classes the component generates for itself. */
#new-request-form label {
  font: 600 13px/1.4 var(--fusion-font-family);
  color: var(--fusion-text-primary);
}
#new-request-form input[type="text"],
#new-request-form input[type="email"],
#new-request-form textarea,
#new-request-form select {
  font-family: var(--fusion-font-family);
  border-radius: var(--fusion-radius-m);
}
#new-request-form button[type="submit"] {
  font: 600 14px/1 var(--fusion-font-family);
  border-radius: var(--fusion-radius-m);
}

/* ======================================================================
   HEADER  (two-tier marketing bar + Help Center nav)
   ====================================================================== */
.hc-header {
  position: relative;
  z-index: 40;
  background: #fff;
}

/* Freeze the Help Center nav (tier 2): the marketing bar scrolls away, then
   tier 2 sticks to the top of the viewport for the rest of the page. Pinning
   the whole header with a negative top offset (rather than making .hc-navbar
   itself sticky) is required because .hc-navbar's containing block would
   otherwise be the ~116px-tall header box, which leaves no room to stick. */
@media (min-width: 769px) {
  .hc-header {
    position: sticky;
    top: calc(-1 * var(--header-height));
  }
}

/* Single-row layout: hide the marketing mega-links, keep one compact bar */
.hc-header--single .hc-marketing-nav { display: none; }
.hc-header--single .hc-topbar { border-bottom-color: var(--fusion-surface-border); }

/* Tier 1 — marketing bar */
.hc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
  padding: 0 var(--page-pad);
  background: #fff;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
}
.hc-topbar__left,
.hc-topbar__right { display: flex; align-items: center; gap: 24px; }
.hc-logo { display: inline-flex; align-items: center; color: var(--near-black, #0a0a0a); }
.hc-logo:hover { text-decoration: none; }
.hc-logo img { max-height: 26px; width: auto; display: block; }
.hc-logo .hc-logo-name { font: 700 16px/1 var(--fusion-font-family); }
.hc-logo img.hc-logo-mark {
  display: block;
  width: 132px;
  height: auto;
  max-height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}

.hc-marketing-nav { display: flex; align-items: center; gap: 24px; }
.hc-marketing-nav a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--near-black, #0a0a0a);
  font: 700 13px/1 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hc-marketing-nav a:hover { text-decoration: none; color: #000; }

.hc-topbar__right .hc-signin {
  color: var(--near-black, #0a0a0a);
  font: 600 14px/1 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hc-topbar__right .hc-signin:hover { text-decoration: none; }

/* Tier 2 — Help Center nav */
.hc-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--subnav-height);
  padding: 0 var(--page-pad);
  background: #fff;
  border-bottom: 1px solid var(--fusion-surface-border);
}
.hc-navbar__left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.hc-navbar__right { display: flex; align-items: center; gap: 16px; }
/* Lets the relocated .hc-user (see header.hbs) sit as a normal flex item of
   .hc-navbar__right instead of being wrapped by this slot's own box. */
.hc-navbar-user-slot { display: contents; }

/* Hidden until the header is fully scrolled/stuck (see .hc-header.is-stuck
   toggle in header.hbs) — tier 1 already shows the logo before that point. */
.hc-navbar-logo {
  display: none;
  width: 92px;
  height: auto;
  max-height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
}
.hc-header.is-stuck .hc-navbar-logo { display: block; }

.hc-hc-title {
  margin: 0;
  color: var(--near-black, #0a0a0a);
  font: 600 18px/1 var(--fusion-font-family);
  display: inline-flex;
  align-items: center;
  height: calc(var(--subnav-height) - 2px);
  border-bottom: 2px solid var(--accent, #d7f45b);
}
.hc-hc-title a { color: inherit; }
.hc-hc-title a:hover { text-decoration: none; }

.hc-hc-nav { display: flex; align-items: center; gap: 20px; }
.hc-hc-nav a {
  color: var(--fusion-text-secondary);
  font: 500 14px/1 var(--fusion-font-family);
}
.hc-hc-nav a:hover { color: var(--near-black, #0a0a0a); text-decoration: none; }
.hc-hc-nav a[aria-current="page"] { color: var(--near-black, #0a0a0a); }

/* "Products" dropdown in the Help Center nav */
.hc-products-nav { position: relative; }
.hc-products-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--fusion-text-secondary);
  font: 500 14px/1 var(--fusion-font-family);
  cursor: pointer;
}
.hc-products-toggle:hover { color: var(--near-black, #0a0a0a); }
.hc-products-toggle svg { color: var(--fusion-ui-gray-700); }
.hc-products-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-200);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.hc-products-menu[hidden] { display: none; }
.hc-products-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--fusion-radius-s);
  font: 500 var(--fusion-font-size-body).2 var(--fusion-font-family);
  color: var(--fusion-text-primary);
}
.hc-products-menu__item:visited { color: var(--fusion-text-primary); }
.hc-products-menu__item:hover { background: var(--fusion-ui-gray-100); text-decoration: none; }
.hc-pm-icon { width: 26px; height: 26px; border-radius: var(--fusion-radius-s); flex: none; }
.hc-pm-icon > svg { width: 18px; height: 18px; margin: 4px; }

.hc-navbar__right a { color: var(--fusion-text-secondary); font: 500 var(--fusion-font-size-body) var(--fusion-font-family); white-space: nowrap; flex: none; }
.hc-navbar__right a:hover { color: var(--near-black, #0a0a0a); text-decoration: none; }

/* Nav items waiting on a category that doesn't exist in Zendesk yet */
.is-placeholder { opacity: .45; pointer-events: none; cursor: default; }

/* Header search (JS-enhanced toggle; visible by default without JS) */
.hc-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: var(--fusion-radius-m);
  color: var(--near-black, #0a0a0a);
}
.hc-search-toggle:hover { background: var(--fusion-ui-gray-100); }
/* Inline expanding search box (sits in the nav row, pushing links left) */
.hc-header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  max-width: 34vw;
  background: #fff;
  border-radius: var(--fusion-radius-m);
  padding: 6px 8px 6px 12px;
  box-shadow: inset 0 0 0 1px var(--fusion-ui-gray-400);
}
/* Compact product filter (down-arrow only) sitting to the left of the
   header search input, mirroring the hero's product filter but without
   the "All products" label — the box is too narrow for it. */
.hc-search-product-filter { position: relative; flex: none; }
.hspf-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 0; background: transparent; padding: 0;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-secondary);
  cursor: pointer;
}
.hspf-toggle:hover, .hspf-toggle[aria-expanded="true"] { color: var(--near-black, #0a0a0a); background: var(--fusion-ui-gray-100); }
.hspf-toggle.has-selection { color: var(--fusion-ui-blue-600, #242f9e); }
.hspf-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-200);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.hspf-menu[hidden] { display: none; }
.hspf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--fusion-radius-s);
  font: 500 var(--fusion-font-size-body).2 var(--fusion-font-family);
  color: var(--fusion-text-primary);
  cursor: pointer;
  user-select: none;
}
.hspf-option:hover { background: var(--fusion-ui-gray-100); }
.hspf-option input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--near-black, #0a0a0a); }

.hc-header-search .search-icon {
  flex: none;
  position: static;
  left: auto;
  transform: none;
  width: 15px; height: 15px;
  color: var(--fusion-text-secondary);
}
.hc-header-search form,
.hc-header-search .search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; margin: 0; border: 0; box-shadow: none; background: transparent;
}
.hc-header-search input[type="search"],
.hc-header-search .search-input {
  width: 100%;
  border: 0; box-shadow: none; padding: 2px 0;
  background: transparent; font-size: 13px;
}
.hc-header-search input[type="search"]:focus { box-shadow: none; outline: none; }
.hc-header-search__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 0; background: transparent;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-secondary);
  cursor: pointer;
}
.hc-header-search__close:hover { background: var(--fusion-ui-gray-100); color: var(--near-black, #0a0a0a); }

/* Progressive enhancement: with JS the field collapses behind the toggle and
   expands inline on click. Without JS the field is simply visible. */
.hc-search-toggle { display: none; }
.js .hc-search-toggle { display: inline-flex; }
.js .hc-header-search { display: none; }
.js .hc-navbar__right.is-searching .hc-header-search { display: flex; }
.js .hc-navbar__right.is-searching .hc-search-toggle { display: none; }

/* User dropdown (signed in) */
.hc-user { position: relative; }
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-primary);
  font: 500 14px/1 var(--fusion-font-family);
}
.dropdown-toggle:hover { background: var(--fusion-ui-gray-100); }
.dropdown-chevron-icon { color: var(--fusion-text-secondary); }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-300);
  padding: 6px;
  z-index: 60;
  display: none;
}
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.dropdown-menu.is-open { display: block; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-menu-top { top: auto; bottom: calc(100% + 6px); }
.dropdown-menu a,
.dropdown-menu [role="menuitem"] {
  display: block;
  padding: 9px 10px;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-primary);
  font: 500 var(--fusion-font-size-body).2 var(--fusion-font-family);
}
.dropdown-menu a:hover,
.dropdown-menu [role="menuitem"]:hover { background: var(--fusion-ui-gray-100); text-decoration: none; }
.dropdown-menu .separator { height: 1px; background: var(--fusion-ui-gray-200); margin: 6px 0; }

/* Desktop / mobile nav wrappers */
.nav-wrapper-mobile { display: none; }
.menu-button-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fusion-surface-border);
  background: #fff;
  border-radius: var(--fusion-radius-m);
  padding: 8px 10px;
  color: var(--near-black, #0a0a0a);
}
.menu-list-mobile { display: none; }

/* ======================================================= Announcement */
.hc-announcement {
  background: var(--announcement-bg, #d7f45b);
  color: var(--announcement-text, #0a0a0a);
  padding: 12px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 16px;
}
.hc-announcement[hidden] { display: none; }
.hc-announcement__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.hc-announcement__tag {
  background: var(--announcement-text, #0a0a0a);
  color: var(--announcement-bg, #fff);
  font: 700 11px/1 var(--fusion-font-family);
  letter-spacing: 0.06em;
  padding: 5px 8px;
}
.hc-announcement__text { font: 500 14px/1.4 var(--fusion-font-family); }
.hc-announcement__link { font: 600 14px/1 var(--fusion-font-family); color: var(--announcement-text, #0a0a0a); text-decoration: underline; }
.hc-announcement__link:visited { color: var(--announcement-text, #0a0a0a); }
.hc-announcement__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 0; background: transparent; color: var(--announcement-text, #0a0a0a);
  border-radius: var(--fusion-radius-s);
}
.hc-announcement__dismiss:hover { background: rgba(0,0,0,0.08); }

/* ============================================================= HERO */
.hero {
  background: var(--hero-bg, #f4f4eb);
  padding: 130px var(--page-pad) 130px;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.hero-heading {
  margin: 0;
  font: 700 48px/1.15 var(--heading-font, var(--fusion-font-family));
  letter-spacing: -0.01em;
  color: var(--near-black, #0a0a0a);
  text-align: center;
}
.hero-heading .accent-word { color: var(--fusion-ui-absolute-black); }

main { display: block; }
main:focus { outline: none; }

/* Generic search wrapper */
.search-container { width: 100%; max-width: 760px; position: relative; }
.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--fusion-ui-gray-700);
  pointer-events: none;
  z-index: 2;
}

#kb-heading {
	padding-bottom: 10px;
	text-align: left;
	font: 700 28px / 1.25 var(--heading-font, var(--fusion-font-family));
}

/* Hero search box — white rounded box holding a product filter, icon and the
   Zendesk {{search}} field, matching the design. */
.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: var(--fusion-radius-m);
  padding: 8px;
  box-shadow: inset 0 0 0 1px var(--fusion-ui-gray-400), var(--fusion-shadow-100);
}
.hero-search:focus-within { box-shadow: inset 0 0 0 1px var(--fusion-ui-blue-500), 0 0 0 3px var(--fusion-ui-blue-100); }
.hero-product-filter { position: relative; flex: none; max-width: 20%; }
.hpf-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--fusion-ui-gray-100);
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-s);
  padding: 10px 12px;
  font: 500 var(--fusion-font-size-body) var(--fusion-font-family);
  color: var(--fusion-text-primary);
  cursor: pointer;
}
.hpf-toggle:hover { border-color: var(--fusion-ui-gray-700); }
.hpf-toggle svg { flex: none; margin-left: auto; color: var(--fusion-ui-gray-700); }
.hpf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-200);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.hpf-menu[hidden] { display: none; }
.hpf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--fusion-radius-s);
  font: 500 var(--fusion-font-size-body).2 var(--fusion-font-family);
  color: var(--fusion-text-primary);
  cursor: pointer;
  user-select: none;
}
.hpf-option:hover { background: var(--fusion-ui-gray-100); }
.hpf-option input {
  width: 16px; height: 16px;
  flex: none;
  margin: 0;
  accent-color: var(--near-black, #0a0a0a);
}
@media (max-width: 640px) {
  /* Collapse to an icon-only toggle instead of wrapping the full "All products"
     label onto its own row — mirrors the header's compact product filter
     (.hspf-toggle) which exists for the same narrow-space reason. The label
     stays in the DOM (visually hidden, not display:none) so screen readers
     still announce the current selection, and updateLabel() in the script
     below keeps working unchanged. */
  .hero-product-filter { max-width: none; flex: none; }
  .hpf-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .hpf-toggle svg { margin-left: 0; }
  .hpf-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}
.hero-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* Magnifier sits inside the text field, on the left */
.hero-search-submit {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--fusion-ui-gray-700);
  cursor: pointer;
}
.hero-search-submit:hover { color: var(--near-black, #0a0a0a); }
.hero-search-icon { flex: none; width: 18px; height: 18px; }
.hero-search .hero-search-input {
  width: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 10px 12px 10px 38px;
  font: 400 15px/1.2 var(--fusion-font-family);
  color: var(--fusion-text-primary);
}
.hero-search .hero-search-input:focus { border: 0; box-shadow: none; outline: none; }
.hero-search .hero-search-input::placeholder { font-style: italic; color: var(--fusion-ui-gray-700); }

/* Instant search suggestions for the custom hero, header and results forms. */
.instant-search-host { position: relative; }
.instant-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 70;
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-m);
  background: #fff;
  box-shadow: var(--fusion-shadow-200);
  text-align: left;
}
.instant-search-suggestions[hidden] { display: none; }
.instant-search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-primary);
  font: 500 var(--fusion-font-size-body)/1.35 var(--fusion-font-family);
  text-decoration: none;
  white-space: normal;
}
.instant-search-suggestion:hover,
.instant-search-suggestion:focus,
.instant-search-suggestion.is-active {
  background: var(--fusion-ui-gray-100);
  color: var(--near-black, #0a0a0a);
  outline: none;
  text-decoration: none;
}
.instant-search-suggestion__content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}
.instant-search-suggestion__title {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.instant-search-suggestion__tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--fusion-radius-pill);
  background: var(--fusion-ui-blue-100);
  color: var(--fusion-ui-blue-700, #242f9e);
  font: 600 11px/1.3 var(--fusion-font-family);
  white-space: nowrap;
}
.instant-search-suggestion__tag[hidden] { display: none; }
.instant-search-suggestion__icon {
  flex: none;
  color: var(--fusion-text-secondary);
  font-size: 14px;
}

/* The compact header form needs to establish the dropdown's containing box. */
.hc-header-search-form.instant-search-host { position: relative; }
.hc-header-search-form .instant-search-suggestions {
  right: 0;
  left: auto;
  box-sizing: border-box;
  width: 360px;
  min-width: 300px;
  max-width: calc(100vw - 32px);
}

@media (max-width: 640px) {
  .hc-header-search-form .instant-search-suggestions {
    right: 0;
    left: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* Popular queries under hero */
.hero-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.hero-popular a {
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-pill);
  padding: 6px 12px;
  color: var(--fusion-text-primary);
  font: 500 12px/1 var(--fusion-font-family);
  background: #fff;
}
.hero-popular a:hover { border-color: var(--fusion-ui-gray-700); text-decoration: none; }

/* ================================================= Breadcrumbs / sub-nav */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 0 20px 0;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
  margin-bottom: 32px;
}
.sub-nav .search-container { max-width: 320px; position: relative; }
.sub-nav .search-container input[type="search"] {
  width: 100%;
  padding: 9px 12px 9px 38px;
  border: 1px solid var(--fusion-ui-gray-400);
  border-radius: var(--fusion-radius-m);
  font: 400 13px/1.2 var(--fusion-font-family);
}
.sub-nav .search-icon { left: 14px; width: 14px; height: 14px; }

/* Search-results product filter. This keeps the compact sub-nav appearance
   while providing the same multi-product behavior as the home-page search. */
.sub-nav .search-container.search-results-search { max-width: 520px; }
.search-results-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.search-results-product-filter { position: relative; flex: none; }
.srpf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 140px;
  min-height: 35px;
  padding: 8px 10px;
  border: 1px solid var(--fusion-ui-gray-400);
  border-radius: var(--fusion-radius-m);
  background: #fff;
  color: var(--fusion-text-primary);
  font: 500 12px/1.2 var(--fusion-font-family);
  cursor: pointer;
}
.srpf-toggle:hover, .srpf-toggle[aria-expanded="true"] { border-color: var(--fusion-ui-gray-700); }
.srpf-toggle svg { flex: none; color: var(--fusion-text-secondary); }
.srpf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srpf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--fusion-ui-gray-300);
  border-radius: var(--fusion-radius-m);
  background: #fff;
  box-shadow: var(--fusion-shadow-200);
}
.srpf-menu[hidden] { display: none; }
.srpf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-primary);
  font: 500 var(--fusion-font-size-body)/1.2 var(--fusion-font-family);
  cursor: pointer;
  user-select: none;
}
.srpf-option:hover { background: var(--fusion-ui-gray-100); }
.srpf-option input {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  accent-color: var(--near-black, #0a0a0a);
}
.search-results-search-field { position: relative; flex: 1 1 auto; min-width: 180px; }
.search-results-search-submit {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fusion-ui-gray-700);
  transform: translateY(-50%);
  cursor: pointer;
}
.search-results-search-submit:hover { color: var(--near-black, #0a0a0a); }

@media (max-width: 640px) {
  .sub-nav .search-container.search-results-search { max-width: none; }
  .search-results-search-form { align-items: stretch; }
  .srpf-toggle { height: 100%; }
  .search-results-search-field { min-width: 0; }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font: 400 var(--fusion-font-size-body) var(--fusion-font-family);
  color: var(--fusion-text-secondary);
  min-width: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 8px;
  border-right: 1.5px solid var(--fusion-ui-gray-500);
  border-bottom: 1.5px solid var(--fusion-ui-gray-500);
  transform: rotate(-45deg);
}
.breadcrumbs a { color: var(--fusion-text-secondary); }
.breadcrumbs a:hover { color: var(--near-black); text-decoration: none; }
.breadcrumbs li:last-child a { color: var(--near-black); font-weight: 500; }

/* ================================================= Home: product cards
   The home page renders Zendesk categories as product-style cards. */
.knowledge-base { padding: 24px 0 8px; }
.blocks { margin: 0; }
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.blocks-list {
	margin: 0px;
}
.blocks-item { flex: 0 1 180px; min-width: 0; }
.blocks-item.full-width { flex: 0 1 180px; }
.blocks-item-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-100);
  padding: 28px 20px 24px;
  background: #fff;
  color: var(--fusion-text-primary);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.blocks-item-link:visited { color: var(--fusion-text-primary); }
.blocks-item-link:hover {
  border-color: var(--fusion-ui-gray-700);
  box-shadow: var(--fusion-shadow-200);
  text-decoration: none;
}

/* note that these also affect the navigation dropdown list */
.blocks-item-icon {
  width: 24px; height: 24px;
  border-radius: var(--fusion-radius-l);
  flex: none;
  overflow: hidden;
  background: var(--fusion-ui-gray-200) center/cover no-repeat;
}
/* Hard-coded, product-specific icons (SVG assets). Keyed by category name. */
.blocks-item-icon.pc-ground   { background-image: url('/hc/theming_assets/01M1ECGA4RS7D0M13V4212N1YD'); }
.blocks-item-icon.pc-roof     { background-image: url('/hc/theming_assets/01M1ECGAA1Z795S63VD5GAR6KE'); }
.blocks-item-icon.pc-prospect { background-image: url('/hc/theming_assets/01M1ECGA8N7HDZ1AVZF6NY9P5B'); }
.blocks-item-icon.pc-concept  { background-image: url('/hc/theming_assets/01M1ECG8PC93NMD0HD8MHBKSAS'); }
.blocks-item-icon.pc-yield    { background-image: url('/hc/theming_assets/01M1ECG8Z5YWNT0DKD4Q5FQYE7'); }
.blocks-item-icon.pc-platform { background-image: url('/hc/theming_assets/01M1ECG8W1D26PN5BQ4MZXJCH1'); box-shadow: inset 0 0 0 1px var(--fusion-ui-gray-200); }

/* Restricted product rows fail closed until the authenticated category API
   confirms access. The !important is required because row classes use their
   own author-level display declarations, which can override HTML's hidden UA
   style. See PRODUCT_ACCESS.md. */
[data-permission-product][hidden] { display: none !important; }

/* Inline fallback glyph (single-category / sections view) */
.blocks-item-icon > svg { width: 44px; height: 44px; margin: 10px; display: block; }
.blocks-item-title {
  font: 600 16px/1.3 var(--heading-font, var(--fusion-font-family));
  letter-spacing: -0.01em;
  color: var(--near-black);
}
.blocks-item-description {
  font: 400 14px/20px var(--fusion-font-family);
  color: var(--fusion-ui-gray-700);
  display: block;
}
.blocks-item-divider {
  border-top: 1px solid var(--fusion-ui-gray-200);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blocks-item-toplabel {
  font: 600 10px/1 var(--fusion-font-family);
  letter-spacing: 0.08em;
  color: var(--fusion-ui-gray-600);
}
.blocks-item-toparticle { font: 400 14px/20px var(--fusion-font-family); color: var(--fusion-ui-blue-600); }
.blocks-item-link:hover .blocks-item-toparticle { text-decoration: underline; }
.blocks-item-meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blocks-item-count { font: 400 12px/1 var(--fusion-font-family); color: var(--fusion-ui-gray-600); }
.blocks-item-browse { font: 600 var(--fusion-font-size-body) var(--fusion-font-family); color: #2B06C1; }
.blocks-item-new {
  position: absolute; top: 10px; right: 10px;
  background: var(--fusion-tag-purple-bg); color: var(--fusion-tag-purple-fg);
  font: 700 10px/1 var(--fusion-font-family); letter-spacing: 0.06em;
  padding: 4px 7px; border-radius: var(--fusion-radius-pill);
}

.product-categories .blocks-item-icon {width: 40px; height: 40px;}
.product-categories-hint {
  margin: 16px auto 0;
  max-width: var(--content-max);
  text-align: center;
  font: 400 14px/20px var(--fusion-font-family);
  color: var(--fusion-ui-gray-700);
}


/* Error / not-found page */
.error-page { padding: 80px var(--page-pad); text-align: center; }
.error-page h1 { font: 700 40px/1.15 var(--heading-font, var(--fusion-font-family)); margin-bottom: 12px; }
.error-page h2 { font: 500 20px/1.4 var(--heading-font, var(--fusion-font-family)); color: var(--fusion-text-secondary); margin-bottom: 8px; }
.error-page p { color: var(--fusion-text-secondary); margin-bottom: 24px; }
.error-page > a:last-child {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--fusion-radius-m);
  background: var(--near-black, #0a0a0a); color: #fff; font-weight: 600;
}
.error-page > a:last-child:hover { background: #1f1f1f; text-decoration: none; }

/* =================================================== Featured / promoted */
.centered-promoted, .promoted-band { padding: 40px 0; }
.promoted-band {
  background: var(--fusion-surface-secondary);
  margin: 40px 0 0;
  padding: 56px var(--page-pad);
}
.promoted-band__head {
  display: flex; align-items: baseline; justify-content: space-between;
  max-width: var(--content-max); margin: 0 auto 20px;
}
.promoted-band__head h2 { margin: 0; font: 700 24px/1.25 var(--heading-font, var(--fusion-font-family)); }
.promoted-band__viewall { font: 600 var(--fusion-font-size-body) var(--fusion-font-family); color: #2B06C1; }
.promoted-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.centered-promoted h2 { font: 700 24px/1.25 var(--heading-font, var(--fusion-font-family)); margin-bottom: 20px; }
.promoted-articles-item { min-width: 0; }
.promoted-articles-item a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-primary);
  height: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.promoted-articles-item a:hover {
  border-color: var(--fusion-ui-gray-700);
  box-shadow: var(--fusion-shadow-200);
  text-decoration: none;
}
.promoted-eyebrow { font: 500 11px/1 var(--fusion-font-family); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fusion-ui-gray-700); }
.promoted-title { font: 600 16px/22px var(--heading-font, var(--fusion-font-family)); letter-spacing: -0.01em; color: var(--near-black); display: flex; align-items: center; gap: 6px; }
.promoted-desc { font: 400 13px/18px var(--fusion-font-family); color: var(--fusion-ui-gray-700); }

/* ============================================= Homepage bands */

.homepage-bands {
	margin: 0 auto;
	padding: 0px var(--page-pad);
}

.homepage-bands.violet {
	background: #e3dfff;
}

.product-container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad);
  padding-top: 20px;
}

.academy-band {
  padding: 64px 30px;
  background: #e3dfff;
  max-width: var(--page-max);
  margin: 0 auto;
}
.academy-band__inner {
  max-width: calc(var(--content-max) - 20px);
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.academy-band__copy { display: flex; flex-direction: column; gap: 14px; max-width: 450px; }
.eyebrow {
  font: 600 11px/1 var(--fusion-font-family);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary, #2300af);
}
.academy-band__title { margin: 0; font: 700 28px/1.25 var(--heading-font, var(--fusion-font-family)); color: var(--near-black); }
.academy-band__desc { font: 400 var(--fusion-font-size-body).5 var(--fusion-font-family); color: var(--fusion-ui-gray-800); }
.academy-band__stats { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.academy-stat { display: flex; flex-direction: column; gap: 10px; }
.academy-stat b { font: 700 48px/1 var(--heading-font, var(--fusion-font-family)); letter-spacing: -0.02em; color: var(--near-black); }
.academy-stat span { font: 400 var(--fusion-font-size-body) var(--fusion-font-family); color: var(--fusion-ui-gray-800); }
.academy-stat-divider { width: 1px; height: 64px; background: rgba(10,10,10,0.2); }
.academy-cta {max-width: 300px;}

.support-band {
  background: #fffff;
  padding: 80px var(--page-pad);
}
.support-band__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.support-band__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.support-band__head h2 { margin: 0; font: 700 36px/1.2 var(--heading-font, var(--fusion-font-family)); color: var(--near-black); }
.support-band__head h2 .accent { color: var(--secondary, #2300af); }
.support-band__head p { margin: 0; font: 400 15px/1.5 var(--fusion-font-family); color: var(--fusion-text-secondary); max-width: 520px; }
.support-cards { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.support-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 36px 32px;
  width: 430px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fffff;
  border: 1px solid var(--fusion-ui-gray-300);
  color: var(--fusion-text-primary);
  transition: box-shadow .15s ease;
}
.support-card:visited { color: var(--fusion-text-primary); }
.support-card > svg {grid-column: 1; grid-row: 1;}
.support-card:hover { box-shadow: var(--fusion-shadow-200); text-decoration: none; }
.support-card svg { color: var(--secondary, #2300af); }
.support-card h3 { margin: 0; font: 700 19px/1.3 var(--heading-font, var(--fusion-font-family)); }
.support-card p { margin: 0; font: 400 13px/1.5 var(--fusion-font-family); color: var(--fusion-text-secondary); }
.support-card__title {font-family: var(--fusion-font-headers); font-weight: 800; font-size: 16px; grid-column: 2;  grid-row: 1;}
.support-card__desc,
.support-card__cta {
  grid-column: 2;
  padding: 5px 0px;
}
.support-card__cta { margin-top: auto; font: 600 var(--fusion-font-size-body) var(--fusion-font-family); color: var(--secondary, #2b06c1); }

/* ====================================================== Community home */
.home-section { padding: 40px 0; }
.home-section.community { text-align: left; }
.home-section h2 { font: 700 24px/1.25 var(--heading-font, var(--fusion-font-family)); }
.community-image {
  min-height: 200px;
  border-radius: var(--fusion-radius-l);
  background: var(--fusion-surface-secondary) center/cover no-repeat;
  margin-top: 16px;
}
.community-link { font-weight: 600; }

/* ====================================================== Recent activity */
.activity { padding: 24px 0 48px; }

/* ==================================================== Category pages */
.page-header { margin-bottom: 24px; }
.page-header h1 { font: 700 34px/1.15 var(--heading-font, var(--fusion-font-family)); margin: 0 0 8px; }
.page-header-description { color: var(--fusion-text-secondary); font-size: 15px; max-width: 720px; margin: 10px 0; }

.category-container, .section-container { padding-bottom: 64px; }

.category-directory {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.category-directory-heading { margin-bottom: 20px; }
.category-directory-heading h2 {
  margin: 0 0 4px;
  font: 700 24px/1.25 var(--heading-font, var(--fusion-font-family));
  color: var(--near-black);
}
.category-directory-heading p {
  margin: 0;
  color: var(--fusion-text-secondary);
  font: 400 14px/1.5 var(--fusion-font-family);
}

/* Featured/promoted articles are a compact highlight list, not the full listing. */
.category-articles {
  max-width: 640px;
  padding: 20px 24px 24px 0;
  border-radius: var(--fusion-radius-l);
  background: none;
}
.category-articles:not(:has(.category-article-list-item)) { display: none; }
.category-sections:not(:has(.section-tree > .section, .content-empty-message)) { display: none; }
.content-empty-message {
  margin: 0;
  padding: 32px 0;
  color: var(--fusion-text-secondary);
  font: 500 15px/1.5 var(--fusion-font-family);
  text-align: center;
}
.category-article-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.category-article-list-item { min-width: 0; }
.category-article-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-primary);
  font: 500 14px/1.4 var(--fusion-font-family);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.category-article-link > span:nth-child(2) { min-width: 0; }
.category-article-link:visited { color: var(--fusion-text-primary); }
.category-article-link:hover,
.category-article-link:visited:hover {
  color: var(--secondary, #2300af);
  background: var(--fusion-surface-primary);
  border-color: var(--fusion-surface-border);
  box-shadow: var(--fusion-shadow-100);
  text-decoration: none;
}
.category-article-icon {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-tertiary);
  background: var(--fusion-surface-primary);
  box-shadow: inset 0 0 0 1px var(--fusion-ui-gray-200);
}
.category-article-icon svg { width: 14px; height: 14px; }

.section-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.section-tree > .section {
  position: relative;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  min-width: 0;
  padding: 24px;
  background: #fff;
  box-shadow: var(--fusion-shadow-100);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.section-tree > .section:hover {
  border-color: var(--fusion-ui-gray-400);
  box-shadow: var(--fusion-shadow-200);
  transform: translateY(-2px);
}
/* Makes the whole card clickable; nested links (subsections, see all) sit in
   their own stacking context above it so they remain independently clickable. */
.section-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.section-tree-title { position: relative; z-index: 2; margin: 0; font: 700 18px/1.35 var(--heading-font, var(--fusion-font-family)); }
.section-tree-title a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--near-black);
}
.section-tree-title a svg { flex: none; margin-top: 3px; color: var(--near-black); }
.section-tree-title a:hover { color: var(--secondary, #2300af); text-decoration: none; }
.section-tree-description {
  position: relative;
  margin: 10px 0 0;
  color: var(--fusion-text-secondary);
  font: 400 14px/1.5 var(--fusion-font-family);
}
/* Article lists (shared: category/section/sidebar) */
.article-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fusion-ui-gray-200);
}
.article-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
}
.article-list-item:last-child { border-bottom: 0; }
.article-list-icon { flex: none; color: var(--fusion-text-tertiary); }
.article-list-link, .article-list-item > a {
  min-width: 0;
  color: var(--fusion-text-primary);
  font: 400 15px/1.4 var(--fusion-font-family);
}
.article-list-link:visited, .article-list-item > a:visited { color: var(--fusion-text-primary); }
.article-list-link:hover, .article-list-item > a:hover,
.article-list-link:visited:hover, .article-list-item > a:visited:hover { color: var(--secondary, #2300af); text-decoration: underline; }
.icon-star { color: var(--fusion-ui-yellow-500); flex: none; }
.icon-lock { color: var(--fusion-text-tertiary); flex: none; }
.see-all-articles, .see-all-section-articles {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 12px;
  font: 600 14px/1.4 var(--fusion-font-family);
  color: var(--near-black);
}
.see-all-articles:visited, .see-all-section-articles:visited { color: var(--near-black); }

/* ==================================================== Section pages */
.section-subscribe { margin: 8px 0 16px; }
.section-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

/* ========================================================= Article page */
.article-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding-bottom: 64px;
}
.article-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: calc(var(--subnav-height) + 24px);
  border: 0;
  background: transparent;
  padding: 0;
  width: auto;
}
.article-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--fusion-ui-gray-200);
}
.article-container.has-toc .article-main {
  padding-right: 24px;
  border-right: 1px solid var(--fusion-ui-gray-200);
}
.collapsible-sidebar-title, .sidenav-title {
  display: block;
  font: 600 11px/1 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fusion-text-tertiary);
  margin-bottom: 12px;
}
.collapsible-sidebar-toggle { display: none; background: none; border: 0; }
.collapsible-sidebar-body ul { display: flex; flex-direction: column; gap: 2px; }
.sidenav-item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--fusion-radius-s);
  color: var(--fusion-text-secondary);
  font: 400 var(--fusion-font-size-body).4 var(--fusion-font-family);
  border-left: 2px solid transparent;
}
.sidenav-item:visited { color: var(--fusion-text-secondary); }
.sidenav-item:hover, .sidenav-item:visited:hover { background: var(--fusion-ui-gray-100); color: var(--near-black); text-decoration: none; }
.sidenav-item.current-article, .sidenav-item.current, .sidenav-item[aria-current="page"] {
  color: var(--near-black);
  font-weight: 600;
  border-left-color: var(--accent, #d7f45b);
  background: var(--fusion-ui-gray-100);
}
.article-sidebar-item { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--secondary, #2b06c1); }
.article-sidebar-item:visited { color: var(--secondary, #2b06c1); }

/* In-article table of contents (JS built from article-body headings) */
.article-navigation-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  background: transparent;
  order: 3;
}
.article-navigation-sidebar:empty,
.article-navigation-sidebar[hidden] { display: none; }

.article-toc-card {
  background: var(--fusion-ui-absolute-white);
  border: 1px solid var(--fusion-ui-gray-200);
  border-radius: var(--fusion-radius-l);
  box-shadow: var(--fusion-shadow-100);
  padding: 22px;
}
.article-toc-card .sidebar-title {
  font: 600 12px/1 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fusion-text-tertiary);
  margin: 0 0 20px;
}

.article-toc-list, .article-toc-sublist { display: flex; flex-direction: column; gap: 1px; }
.article-toc-item { margin: 0; }
.article-toc-sublist {
  margin: 1px 0 4px 16px;
  padding-left: 12px;
  border-left: 1px solid var(--fusion-ui-gray-200);
}

.article-toc-link {
  display: block;
  padding: 9px 8px 9px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fusion-text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: var(--fusion-radius-s);
}
.article-toc-link:visited { color: var(--fusion-text-secondary); }
.article-toc-link:hover, .article-toc-link:visited:hover {
  color: var(--near-black);
  background: var(--fusion-ui-gray-100);
  text-decoration: none;
}
.article-toc-link--h3 {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
  color: var(--fusion-text-tertiary);
}
.article-toc-link--h3:visited { color: var(--fusion-text-tertiary); }
.article-toc-link.is-active-parent, .article-toc-link.is-active-parent:visited { color: var(--near-black); }
.article-toc-link.is-active, .article-toc-link.is-active:visited {
  color: var(--near-black);
  font-weight: 600;
  background: var(--fusion-ui-gray-100);
  border-left-color: var(--pvcase-green);
}

.article-toc-divider { height: 1px; background: var(--fusion-ui-gray-200); margin: 16px 0 0; }
.article-toc-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fusion-text-primary);
}
.article-toc-back-to-top svg { color: var(--pvcase-green); flex: none; }
.article-toc-back-to-top:hover { color: var(--near-black); text-decoration: none; }

/* Mobile / tablet: collapsible "On this page" below the article title */
.article-toc-mobile { display: none; }
.article-toc-mobile[hidden] { display: none !important; }
.article-toc-mobile-details {
  border: 1px solid var(--fusion-ui-gray-200);
  border-radius: var(--fusion-radius-l);
  background: var(--fusion-ui-absolute-white);
  margin: 0 0 24px;
}
.article-toc-mobile-summary {
  cursor: pointer;
  padding: 14px 16px;
  font: 600 12px/1 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fusion-text-tertiary);
}
.article-toc-mobile-body { padding: 0 16px 18px; }
.article-toc-mobile-body .article-toc-divider { margin-top: 4px; }

.article { min-width: 0; }
.article-header { margin-bottom: 24px; }
.article-title {
  font: 700 34px/1.2 var(--heading-font, var(--fusion-font-family));
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Applies-to badges (product/version/mount tags), e.g. "AutoCAD 2024", "Ground Mount" */
.article-tag-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.article-tag-badges[hidden] { display: none; }
.article-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--fusion-ui-gray-100);
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-pill);
  color: var(--fusion-text-secondary);
  font: 500 12px/1 var(--fusion-font-family);
  text-decoration: none;
}
.article-tag-badge:hover { border-color: var(--fusion-ui-gray-700); color: var(--near-black); text-decoration: none; }
.article-tag-badge-icon.blocks-item-icon { width: 14px; height: 14px; border-radius: var(--fusion-radius-s); }
/* PVcase's own favicon mark, reused here as its version-tag icon. */
.blocks-item-icon.pc-pvcase-favicon { background-image: url('$assets-favicon-PVcase-png'); }
/* Third-party brand mark, not a PVcase product tile: no gray-200 backing box */
.article-tag-badge-icon.pc-autocad {
  width: 14px;
  height: 14px;
  flex: none;
  background: center/contain no-repeat;
  background-image: url('/hc/theming_assets/01M2RMMA5QVSZB8DMK87RVQHD5');
}

.article-author { display: flex; align-items: center; gap: 12px; display: none;}
.article-avatar { display: inline-flex; }
.article-avatar .user-avatar { width: 36px; height: 36px; }
.article-meta { display: flex; flex-direction: column; gap: 2px; }
.article-meta a { font-weight: 600; color: var(--near-black); }
.meta-group { display: flex; gap: 6px; flex-wrap: wrap; }
.meta-data { color: var(--fusion-text-tertiary); font-size: 13px; }
.article-subscribe { margin-top: 16px; display: none;}

.content-tags { margin: 0 0 20px; display: none;}
.content-tags p { margin: 0 0 8px; font: 600 11px/1 var(--fusion-font-family); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fusion-text-tertiary); }
.content-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.content-tag-item a, .content-tag .label {
  display: inline-block;
  padding: 5px 12px;
  background: var(--fusion-ui-gray-100);
  border: 1px solid var(--fusion-surface-border);
  color: var(--fusion-text-secondary);
  font: 500 12px/1 var(--fusion-font-family);
}
.content-tag-item a:hover { border-color: var(--fusion-ui-gray-700); color: var(--near-black); text-decoration: none; }

/* Article body typography */
.article-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fusion-ui-gray-800);
  max-width: 760px;
}
.article-body h1 { font-size: 28px; margin: 0.7em 0 0.7em; scroll-margin-top: 120px; }
.article-body h2 { font-size: 24px; margin: 0.6em 0 0.6em; scroll-margin-top: 120px; }
.article-body h3 { font-size: 19px; margin: 0.5em 0 0.5em; scroll-margin-top: 120px; }
.article-header#article-top { scroll-margin-top: 100px; }
.article-body h4 { font-size: 16px; margin: 0.3em 0 0.3em; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-body ul li { list-style: disc; margin: 0.3em 0; }
.article-body ol li { list-style: decimal; margin: 0.3em 0; }
.article-body a { color: var(--link, var(--fusion-ui-blue-600)); text-decoration: underline; }
.article-body img { border-radius: var(--fusion-radius-m); height: auto; }
.article-body blockquote {
  margin: 1.2em 0;
  padding: 4px 20px;
  border-left: 3px solid var(--fusion-surface-border);
  color: var(--fusion-text-secondary);
}
.article-body code, .article-body kbd {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--fusion-ui-gray-100);
  border: 1px solid var(--fusion-ui-gray-200);
  border-radius: var(--fusion-radius-s);
  padding: 1px 5px;
}
.article-body pre {
  background: var(--fusion-ui-gray-900);
  color: #f6f6f6;
  padding: 16px 18px;
  border-radius: var(--fusion-radius-m);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}
.article-body pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Attachments */
.article-attachments { margin-top: 32px; max-width: 760px; }
.attachments { display: flex; flex-direction: column; gap: 8px; }
.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  background: #fff;
}
.attachment-icon { color: var(--fusion-text-secondary); flex: none; }
.attachment-meta { margin-left: auto; }

.article-related {padding-top: 50px;}
.related-articles-title {font-size: var(--fusion-font-size-h3);}

/* ==================================================== Article content
   Author-authored HTML contracts. Preserve class names & behavior.
   ==================================================== */
.callout {
  background-color: var(--hero-bg, #f4f4eb);
  padding: 16px 18px;
  margin: 16px 0;
  border-left: 6px solid var(--fusion-ui-gray-400);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.less-callout {
  padding: 16px 18px;
  margin: 16px 0;
  border-left: 6px solid var(--fusion-ui-gray-400);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.important {
  background-color: var(--fusion-ui-red-100);
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid var(--fusion-ui-red-600);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.less-important {
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid var(--fusion-ui-red-600);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.warning {
  background-color: var(--fusion-ui-yellow-100);
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid #f1c024;
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.less-warning {
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid #f1c024;
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.note {
  background-color: #e3dfff;
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid #2300af;
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.less-note {
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid #2300af;
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.tip {
  background-color: var(--hero-bg, #f4f4eb);
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid var(--fusion-ui-green-500);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.less-tip {
  padding: 18px 20px; margin: 20px 0;
  border-left: 6px solid var(--fusion-ui-green-500);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.GIF_warning {
  background-color: #f7ece4;
  padding: 8px 14px; margin: 12px 0;
  border-left: 6px solid var(--fusion-tag-orange-fg);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.Release_Note {
  background-color: #e3dfff;
  padding: 20px; margin: 16px 0;
  border-left: 6px solid var(--secondary, #2300af);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.callout p:last-child, .important p:last-child, .note p:last-child,
.tip p:last-child, .GIF_warning p:last-child, .Release_Note p:last-child { margin-bottom: 0; }

/* Release notes highlights (releasenoteshighlights.js) — embeddable card
   showing the newest release's "What's new" bullets. Echoes the .Release_Note
   author callout's visual language (hero background, purple accent border)
   since both represent the same kind of content, but kept as its own class
   because this box's content is rendered by JS, not authored by hand. */
.release-notes-highlights {
  background-color: var(--hero-bg, #f4f4eb);
  padding: var(--sp-16) var(--sp-24);
  margin: var(--sp-16) 0;
  border-left: 6px solid var(--secondary, #2300af);
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.release-notes-highlights-title {
  margin: 0 0 var(--sp-8);
  font: 700 16px/1.3 var(--heading-font, var(--fusion-font-family));
  color: var(--fusion-text-primary);
}
.release-notes-highlights-list {
  margin: 0 0 var(--sp-12);
  padding-left: 1.2em;
}
.release-notes-highlights-list li {
  list-style: disc;
  margin: 0.25em 0;
  font: 400 14px/1.5 var(--fusion-font-family);
  color: var(--fusion-text-secondary);
}
.release-notes-highlights-link { font-weight: 600; }

/* Accordion */
.accordion {
  background-color: var(--fusion-ui-gray-100);
  color: var(--fusion-text-primary);
  cursor: pointer;
  padding: 16px 18px;
  width: 100%;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  text-align: left;
  font-size: 15px;
  transition: background-color .2s ease;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion h2, .accordion h3 { margin: 0; font-size: 15px; }
.accordion p { display: inline; margin: 0; }
.active, .accordion:hover { background-color: var(--fusion-ui-gray-200); }
.accordion::after { content: "\002B"; color: var(--fusion-text-secondary); font-weight: bold; margin-left: 8px; flex-shrink: 0; }
.active::after { content: "\2212"; }
.panel {
  padding: 0 18px;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-radius: 0 0 var(--fusion-radius-m) var(--fusion-radius-m);
}

/* Article content tables — scoped so framework tables are unaffected */
.responsive-table-wrapper { overflow-x: auto; }
/* Zendesk's editor stores a fixed inline height on this wrapper from authoring time,
   which no longer matches our padding and clips tables with a vertical scrollbar.
   !important is required to override that inline style. */
.article-body figure.wysiwyg-table { height: auto !important; }
.article-body table {
  font-family: var(--fusion-font-family);
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--fusion-surface-border);
  font-size:  var(--fusion-font-size-body);
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.article-body table td, .article-body table th {
  border: 1px solid var(--fusion-surface-border);
  padding: 12px 14px;
  min-width: 120px;
  word-wrap: break-word;
  text-align: left;
  vertical-align: top;
}
.article-body table tr:hover { background-color: var(--fusion-ui-gray-75); }
.article-body table th {
  background-color: var(--fusion-ui-gray-100);
  color: var(--near-black);
  font-weight: 600;
}

/* Download widget (author content) */
.download-wrapper {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  background: #fff;
  font-family: var(--fusion-font-family);
  font-size:  var(--fusion-font-size-body);
  margin: 16px 0;
}
.download-text { color: var(--fusion-text-primary); }
.download-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--fusion-radius-m);
  border: 1px solid var(--fusion-surface-border);
  background: var(--fusion-ui-gray-100);
  color: var(--fusion-text-primary) !important;
  font-size: 13px;
  text-decoration: none !important;
}
.download-link:hover { background: var(--fusion-ui-gray-200); }
.download-icon { width: 14px; height: 14px; }

/* Shareable headings */
.article-heading { position: relative; display: inline-block; cursor: pointer; }
.article-heading::before {
  content: "";
  position: absolute;
  left: -24px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1"></path><path d="M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1"></path></svg>');
  background-size: contain; background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s;
}
.article-heading:hover::before { opacity: 0.8; }

/* Image modal / zoom */
.zoomable-image {
  cursor: zoom-in;
}

.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.85);
}

/* Centers the image and gives the close button
   something to position itself against */
.modal-image-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: fit-content;
  height: fit-content;

  text-align: center;
}

.modal-content {
  display: block;

  max-width: 90vw;
  max-height: 85vh;

  width: auto;
  height: auto;

  border-radius: var(--fusion-radius-m);
}

/* Positioned relative to modal-image-wrapper,
   which is exactly the size of the image */
.modal-close {
  position: absolute;

  top: -30px;
  right: -30px;

  z-index: 2;

  color: #fff;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;

  cursor: pointer;
  transition: color .2s;
}

.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
}

#modal-caption {
  display: block;
  text-align: center;
  color: #ddd;

  margin-top: 8px;
  padding: 0;

  width: 100%;
}

/* ================================================= Comments / posts */
.comment-list { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; min-width: 0; }
.comment, .comment-wrapper { display: flex; gap: 16px; min-width: 0; }
.comment-info { min-width: 0; }
.comment-list .comment + .comment { border-top: 1px solid var(--fusion-surface-border); padding-top: 24px; }
.comment-avatar .user-avatar, .post-avatar .user-avatar { width: 40px; height: 40px; }
.comment-body, .post-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto; }
.comment-body table { display: block; overflow-x: auto; max-width: 100%; }
.comment-body img, .comment-body iframe, .comment-body embed, .comment-body object { max-width: 100%; height: auto; }
.comment-meta, .post-meta { color: var(--fusion-text-tertiary); font-size: 13px; }
.comment-author, .post-author { font-weight: 600; color: var(--near-black); }
.comment-official, .comment-callout {
  border-left: 3px solid var(--accent, #d7f45b);
  background: var(--hero-bg, #f4f4eb);
  padding: 12px 16px;
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
}
.comment-form-controls { display: flex; gap: 12px; align-items: center; margin-top: 12px; }

.post-container, .request-container { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 40px; padding-bottom: 64px; }
.post-sidebar, .request-sidebar {
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  padding: 20px;
  background: #fff;
  align-self: start;
}
.post-sidebar-title { font: 600 11px/1 var(--fusion-font-family); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fusion-text-tertiary); margin-bottom: 12px; }
.post-title, .request-title { font: 700 28px/1.2 var(--heading-font, var(--fusion-font-family)); margin: 0 0 12px; }
.request-breadcrumbs { margin-bottom: var(--sp-16); }
.request-container { margin-top: var(--sp-12); }
.post-header, .post-info, .post-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-vote, .comment-vote {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-pill);
  font-size: 13px;
  color: var(--fusion-text-secondary);
}

/* Community */
.community-hero {
  background: var(--secondary, #2300af) center/cover no-repeat;
  color: #fff;
  padding: 64px var(--page-pad);
  border-radius: var(--fusion-radius-l);
  margin: 24px 0;
}
.community-hero h1, .community-header h1 { color: #fff; }
.topics-list, .posts-list { display: flex; flex-direction: column; gap: 16px; }
.topics-item {
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  padding: 20px 24px;
  background: #fff;
  box-shadow: var(--fusion-shadow-100);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topics-item:hover { border-color: var(--fusion-ui-gray-700); box-shadow: var(--fusion-shadow-200); }

/* Community badges */
.community-badge, .escalation-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--fusion-radius-pill);
  background: var(--fusion-tag-purple-bg);
  color: var(--fusion-tag-purple-fg);
  font: 600 11px/1 var(--fusion-font-family);
}

/* Striped lists (activity/requests summaries) */
.striped-list { display: flex; flex-direction: column; border: 1px solid var(--fusion-surface-border); border-radius: var(--fusion-radius-l); overflow: hidden; }
.striped-list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
}
.striped-list-item:last-child { border-bottom: 0; }
.striped-list-item:nth-child(even) { background: var(--fusion-ui-gray-50); }
.striped-list-title { font-weight: 500; }
.striped-list-status, .striped-list-count { margin-left: auto; color: var(--fusion-text-tertiary); }

/* Status labels */
.status-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--fusion-radius-pill);
  font: 600 11px/1.4 var(--fusion-font-family);
  text-transform: capitalize;
  background: var(--fusion-ui-gray-100);
  color: var(--fusion-text-secondary);
  border: 1px solid var(--fusion-surface-border);
}
.status-label-featured, .status-label-official { background: var(--fusion-tag-purple-bg); color: var(--fusion-tag-purple-fg); border-color: transparent; }
.status-label-pending-moderation { background: var(--fusion-ui-yellow-100); color: var(--fusion-ui-yellow-700); border-color: transparent; }
.status-label-pinned { background: var(--fusion-ui-blue-100); color: var(--fusion-ui-blue-700); border-color: transparent; }
.status-label-request { background: var(--fusion-ui-green-100); color: var(--fusion-ui-green-700); border-color: transparent; }

/* ==================================================== My activities / requests */
.my-activities-header, .my-activities-nav, .profile-nav { margin-bottom: 24px; }
.my-activities-nav, .profile-nav { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--fusion-ui-gray-200); }
.my-activities-nav a, .profile-nav a {
  padding: 10px 4px;
  color: var(--fusion-text-secondary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.my-activities-nav a[aria-current="page"], .profile-nav a[aria-current="page"],
.my-activities-nav a.current, .profile-nav a.current {
  color: var(--near-black);
  border-bottom-color: var(--accent, #d7f45b);
}
.my-activities-nav a:hover, .profile-nav a:hover { color: var(--near-black); text-decoration: none; }
.requests-table, .my-activities-table, .subscriptions-table, .contributions-table { width: 100%; border-collapse: collapse; font-size:  var(--fusion-font-size-body); }
.requests-table th, .my-activities-table th, .subscriptions-table th, .contributions-table th,
.requests-table td, .my-activities-table td, .subscriptions-table td, .contributions-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--fusion-ui-gray-200);
  text-align: left;
}
.requests-table th, .my-activities-table th, .subscriptions-table th, .contributions-table th {
  font-weight: 600; color: var(--fusion-text-secondary);
}
.request-table-filter, .requests-search-info { margin-bottom: 16px; }

/* Collapsible filter nav (requests / community) */
.collapsible-nav { position: relative; }
.collapsible-nav-toggle { display: none; }
.collapsible-nav-list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--fusion-ui-gray-200); }
.collapsible-nav-list li a {
  display: inline-block;
  padding: 10px 12px;
  color: var(--fusion-text-secondary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.collapsible-nav-list li a:hover { color: var(--near-black); text-decoration: none; }
.collapsible-nav-list li.current a, .collapsible-nav-list li a[aria-current="page"] {
  color: var(--near-black);
  border-bottom-color: var(--accent, #d7f45b);
}
.requests-table-toolbar, .requests-table-toolbar.hbs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  margin: 20px 0;
}
.requests-table-toolbar .search { position: relative; flex: 1 1 240px; }
.requests-table-toolbar .search .search-icon { left: 14px; width: 14px; height: 14px; }
.requests-table-toolbar .requests-search { padding-left: 38px; }
.request-filter-label { font-size: 12px; color: var(--fusion-text-tertiary); }
.requests-table-meta { display: none; }
.request-closed { opacity: 0.72; }

/* Mobile: requests table becomes stacked cards */
@media (max-width: 768px) {
  .requests-table thead { display: none; }
  .requests-table, .requests-table tbody, .requests-table tr, .requests-table td { display: block; width: 100%; }
  .requests-table tr { border: 1px solid var(--fusion-surface-border); border-radius: var(--fusion-radius-m); margin-bottom: 12px; padding: 12px 14px; }
  .requests-table td { border: 0; padding: 2px 0; }
  .requests-table td:not(.request-info):not(.requests-table-status) { display: none; }
  .requests-table-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
}

/* Request detail */
.request-container { grid-template-columns: minmax(0,1fr) 300px; }
.request-info { display: flex; flex-direction: column; gap: 8px; }
.request-details {
  display: block;
  margin: 0 0 20px;
}
.request-details:last-child { margin-bottom: 0; }
.request-details dt {
  font: 600 11px/1.3 var(--fusion-font-family);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fusion-text-tertiary);
  margin: 0 0 4px;
}
.request-details dt:not(:first-child) { margin-top: 16px; }
.request-details dd { margin: 0; color: var(--near-black); }
.request-details dd ul { display: flex; flex-direction: column; gap: 4px; }

/* Profile */
.profile-header {
  background: var(--hero-bg, var(--fusion-ui-gray-75));
  border-bottom: 1px solid var(--fusion-surface-border);
  padding: var(--sp-32) 0;
  margin-bottom: var(--sp-32);
}
.profile-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-32);
  padding-top: 0;
  padding-bottom: 0;
}

.container {
	padding: 15px;
}
.profile-header .profile-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-16) 20px;
  flex: 1 1 420px;
  min-width: 0;
}

.avatar { display: inline-block; position: relative; line-height: 0; flex: none; }
.profile-avatar { align-self: flex-start; }
.profile-avatar img, .profile-avatar .user-avatar { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 4px #fff; }
.avatar .icon-agent {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  padding: 3px;
  border-radius: 50%;
  background: var(--near-black, #0a0a0a);
  color: #fff;
  border: 2px solid #fff;
  box-sizing: content-box;
}
.profile-avatar .icon-agent { width: 16px; height: 16px; padding: 4px; }

.basic-info { display: flex; flex-direction: column; gap: 10px; flex: 1 1 240px; min-width: 0; }
.basic-info .name {
  font-size: 28px;
  word-break: break-word;
}
.basic-info .name a { color: inherit; }
.basic-info .name a:hover { text-decoration: underline; }
.community-name-and-title-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.community-name-and-title-badges .name { margin: 0; }
.community-badge-titles, .community-badge-achievements { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-badge-title {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--fusion-radius-pill);
  background: var(--secondary, #2300af);
  color: #fff;
  font: 600 12px/1.8 var(--fusion-font-family);
  white-space: nowrap;
}
.community-badge-achievement { background: none; border: 0; padding: 0; }
.community-badge-achievement img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.community-badge-achievements-rest { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fusion-ui-gray-200); color: var(--fusion-text-secondary); font: 600 12px/1 var(--fusion-font-family); }
.community-badge-achievements-rest:visited { color: var(--fusion-text-secondary); }

/* Edit profile / follow actions */
.profile-header .options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  flex-basis: 100%;
}
.profile-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-pill);
  color: var(--fusion-text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.user-profile-actions, .community-follow { display: inline-flex; }
.split-button, .community-follow { display: inline-flex; }
.split-button button,
.community-follow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--fusion-surface-border);
  background: #fff;
  color: var(--fusion-text-primary);
  font: 600 14px/1 var(--fusion-font-family);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.split-button button:only-child,
.community-follow button { border-radius: var(--fusion-radius-m); }
.split-button button:not(:only-child):first-child { border-radius: var(--fusion-radius-m) 0 0 var(--fusion-radius-m); }
.split-button button:not(:only-child):last-child {
  border-radius: 0 var(--fusion-radius-m) var(--fusion-radius-m) 0;
  border-left: 0;
  width: 38px;
  padding: 0;
}
.split-button button:hover,
.community-follow button:hover { background: var(--fusion-ui-gray-100); }
.split-button button[data-selected="true"],
.split-button button.button-primary,
.community-follow button[data-selected="true"] {
  background: var(--near-black, #0a0a0a);
  border-color: var(--near-black, #0a0a0a);
  color: #fff;
}
.community-follow button::after {
  content: attr(data-follower-count);
  border-left: 1px solid var(--fusion-surface-border);
  margin-left: 8px;
  padding-left: 8px;
}
.community-follow button[data-selected="true"]::after { border-left-color: rgba(255,255,255,.3); }

.profile-header .description {
  flex-basis: 100%;
  margin: 0;
  max-width: 640px;
  color: var(--fusion-text-secondary);
}

/* Stat groups (shared by activity summary + counters column) */
.profile-stats { display: flex; gap: var(--sp-32); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.profile-stats .stat-value, .stat-value { font: 700 22px/1 var(--heading-font, var(--fusion-font-family)); }
.stat-label { color: var(--fusion-text-tertiary); font-size: 13px; }

.profile-stats-activity {
  flex-basis: 100%;
  padding-top: var(--sp-16);
  margin-top: 4px;
  border-top: 1px solid var(--fusion-surface-border);
}

.profile-stats-counters {
  flex: 0 0 220px;
  display: none !important;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  padding: var(--sp-16) 20px;
}
.profile-stats-counters .stat {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: 10px 0;
}
.profile-stats-counters .stat:not(:last-child) { border-bottom: 1px solid var(--fusion-ui-gray-200); }
.profile-stats-counters .stat-value { font-size: 18px; }
@media (max-width: 900px) {
  .profile-stats-counters { flex-basis: 100%; }
}

/* Profile sections (tabs content) */
.profile-section { margin-bottom: var(--sp-48); }
.profile-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: 20px;
}
.profile-section-title { margin: 0; font-size: 22px; flex-basis: 100%; }
.profile-section-description { color: var(--fusion-text-tertiary); font-size: 13px; }
.profile-section-sorter { position: relative; margin-left: auto; }
.profile-section-sorter .dropdown-toggle { border: 1px solid var(--fusion-surface-border); }

.profile-badges-items { display: flex; flex-wrap: wrap; gap: 16px; }
.profile-badges-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  flex: 1 1 320px;
  padding: 20px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
}
.profile-badges-item-image { flex: none; width: 40px; height: 40px; }
.profile-badges-item-image img { max-width: 40px; max-height: 40px; }
.profile-badges-item-title { font-weight: 600; margin-bottom: 4px; }
.profile-badges-item-description { color: var(--fusion-text-secondary); font-size: 13px; margin: 0; }
.profile-badges-item-metadata { margin-left: auto; text-align: right; flex: none; }
.profile-badges-item-metadata-title { font-size: 12px; color: var(--fusion-text-tertiary); margin-bottom: 4px; }
.profile-badges-item-metadata-description { font-size: 13px; margin: 0; }

/* Empty / private states rendered as inline elements need block layout to center */
.profile-section .no-activity,
.profile-section .private-activity { display: block; }
.private-activity { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }

/* Activity overview timeline */
.profile-activity-list { display: flex; flex-direction: column; gap: var(--sp-24); }
.profile-activity { position: relative; padding-left: 40px; }
.profile-activity:not(:last-child) {
  padding-bottom: var(--sp-24);
  border-left: 1px solid var(--fusion-surface-border);
  margin-left: 13px;
}
.profile-activity:last-child { margin-left: 13px; }
.profile-activity-icon {
  position: absolute;
  left: -13px;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  color: var(--fusion-text-tertiary);
}
.profile-activity-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.profile-activity-header .user-avatar { width: 24px; height: 24px; }
.profile-activity-description { margin: 0; }
.profile-contribution, .profile-activity-contribution {
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  padding: var(--sp-16) 20px;
}
.profile-contribution-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.profile-contribution-title { margin: 0; font-size: 16px; }
.profile-contribution-breadcrumbs { font-size: 12px; margin-bottom: 8px; }
.profile-contribution-body { margin: 8px 0; color: var(--fusion-text-secondary); }

/* Contribution list (Articles / Posts / Comments tabs) */
.profile-contribution-list { display: flex; flex-direction: column; }
.profile-contribution-list > .profile-contribution {
  position: relative;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--fusion-ui-gray-200);
  padding: 20px 0 20px 30px;
  background: transparent;
}
.profile-contribution-list > .profile-contribution:last-child { border-bottom: 1px solid var(--fusion-ui-gray-200); }
.profile-contribution-list .profile-contribution-icon {
  position: absolute;
  left: 0;
  top: 22px;
  color: var(--fusion-text-tertiary);
  line-height: 0;
}
.profile-contribution-list .profile-contribution-header { margin: 0 0 6px; }

/* ==================================================== Search results */
.search-results { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 40px; padding-bottom: 64px; }
.search-results-sidebar { align-self: start; position: sticky; top: calc(var(--subnav-height) + 24px); }
.filters-in-section { margin-bottom: 24px; }
.multibrand-filter-list { display: flex; flex-direction: column; gap: 2px; }
.multibrand-filter-list--collapsed li:nth-child(n+7) { display: none; }
.multibrand-filter-list .sidenav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.doc-count { color: var(--fusion-text-tertiary); font-size: 12px; }
.see-all-filters {
  border: 0; background: none; padding: 7px 10px;
  color: var(--secondary, #2b06c1); font: 600 var(--fusion-font-size-body) var(--fusion-font-family);
  text-align: left; cursor: pointer;
}
.see-all-filters[aria-hidden="true"] { display: none; }
.sidenav-tag .content-tag { display: inline-flex; align-items: center; gap: 6px; }
.close-icon { width: 12px; height: 12px; }

.search-results-column { min-width: 0; }
.search-results-subheading { font: 700 22px/1.3 var(--heading-font, var(--fusion-font-family)); margin: 0 0 24px; }
.search-results-list { display: flex; flex-direction: column; }
.search-results-list > li { padding: 20px 0; border-bottom: 1px solid var(--fusion-ui-gray-200); }
.search-result-title-container { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.search-result-title { margin: 0 0 6px; font: 600 17px/1.4 var(--heading-font, var(--fusion-font-family)); }
.search-result-title a { color: var(--near-black); }
.search-result-title a:hover { color: var(--secondary, #2300af); }
.search-result-icons { display: flex; gap: 12px; color: var(--fusion-text-tertiary); font-size: 13px; flex: none; }
.search-result-meta-container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.search-result-breadcrumbs { font-size: 12px; }
.search-result-description { margin: 0; color: var(--fusion-text-secondary); font-size:  var(--fusion-font-size-body); line-height: 1.6; }
.search-result-description em, mark { background: var(--fusion-ui-yellow-100); color: inherit; font-style: normal; padding: 0 2px; border-radius: 2px; }

/* No results empty state */
.no-results, .no-activities, .no-activity, .no-posts-with-filter {
  text-align: center;
  padding: 64px 24px;
  color: var(--fusion-text-secondary);
}
.no-results svg { margin: 0 auto 24px; max-width: 160px; height: auto; }
.no-results .headline { font: 700 20px/1.3 var(--heading-font, var(--fusion-font-family)); color: var(--near-black); margin-bottom: 8px; }
.no-results .action-prompt { margin-bottom: 8px; }

/* Generative answers block */
.generative-answers, [class*="generative"] { margin-bottom: 24px; }

/* ======================================================== Pagination */
.pagination { margin: 40px 0 0; }
.pagination-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination-list a, .pagination-list > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-primary);
  font: 500 14px/1 var(--fusion-font-family);
  background: #fff;
}
.pagination-list a:hover { border-color: var(--fusion-ui-gray-700); text-decoration: none; }
.pagination-list [aria-current="page"], .pagination-list .pagination-current {
  background: var(--near-black);
  border-color: var(--near-black);
  color: #fff;
}
.pagination-prev-link, .pagination-next-link { font-weight: 600; }

/* ===================================================== Notifications */
.notification, .notification-inline, [data-garden-id="notifications.notification"] {
  padding: 14px 18px;
  border-radius: var(--fusion-radius-m);
  border: 1px solid var(--fusion-surface-border);
  background: var(--fusion-ui-gray-100);
  margin: 0 0 16px;
  font-size:  var(--fusion-font-size-body);
}
.notification-error { background: var(--fusion-ui-red-100); border-color: var(--fusion-ui-red-500); color: var(--fusion-ui-red-700); }
.notification-success { background: var(--fusion-ui-green-100); border-color: var(--fusion-ui-green-500); color: var(--fusion-ui-green-700); }

/* ============================================================ Footer */
/* margin-top: auto pins these to the bottom of the flex column set up on
   `body` above, so short pages don't leave a blank gap under the footer. */
.hc-footer-full, .hc-footer-min, .footer {
  margin-top: auto;
  flex-shrink: 0;
}
.hc-footer-full {
  background: var(--secondary, #2300af);
  color: #fff;
  padding: 56px var(--page-pad) 32px;
}
.hc-footer-full__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
}
.hc-footer-full a { color: #fff; }
.hc-footer-full a:hover { color: #fff; text-decoration: underline; }
.hc-footer-logo-image { display: block; height: auto; flex: 0 0 auto; }
.hc-footer-logo-image--full { width: 144px; }
.hc-footer-col h2, .hc-footer-col .hc-footer-heading {
  font: 600 11px/1 var(--fusion-font-family);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
.hc-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.hc-footer-col li a { font: 400 var(--fusion-font-size-body) var(--fusion-font-family); }
.hc-footer-brand { display: flex; flex-direction: column; gap: 20px; }
.hc-footer-social { display: flex; flex-direction: column; gap: 8px; }
.hc-footer-bottom {
  max-width: var(--page-max);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hc-footer-bottom__copy { font: 400 13px/1 var(--fusion-font-family); color: rgba(255,255,255,0.85); }
.hc-footer-bottom__links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }

.hc-footer-min {
  background: var(--near-black, #0a0a0a);
  color: #fff;
  padding: 24px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hc-footer-min__brand { display: flex; align-items: center; gap: 12px; }
.hc-footer-logo-image--minimal { width: 112px; }
.hc-footer-min__copy { font: 400 13px/1 var(--fusion-font-family); color: var(--fusion-ui-gray-600); }
.hc-footer-min__links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.hc-footer-min__links a { color: var(--fusion-ui-gray-500); }
.hc-footer-min__links a:hover { color: #fff; }

/* Legacy footer + language selector */
.footer { background: var(--near-black); color: #fff; }
.footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 24px var(--page-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-inner a { color: #fff; }
.footer-language-selector { position: relative; }
.footer-language-selector .dropdown-menu {
  position: absolute; bottom: 100%; left: 0; display: none;
  z-index: 1000; background: #fff; color: var(--fusion-text-primary);
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-300);
  padding: 6px; min-width: 160px;
}
.footer-language-selector .dropdown-menu a { color: var(--fusion-text-primary); display: block; padding: 8px 10px; border-radius: var(--fusion-radius-s); }
.footer-language-selector .dropdown-menu a:hover { background: var(--fusion-ui-gray-100); text-decoration: none; }

/* ====================================================== Back to top */
.cd-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 16px;
  position: fixed;
  bottom: 100px; right: 32px;
  z-index: 90;
  background: var(--near-black, #0a0a0a) url('/hc/theming_assets/01M1ECGA63Y0B8Y485HGRMKR9J') no-repeat 14px center;
  background-size: 16px 16px;
  color: #fff !important;
  font: 600 var(--fusion-font-size-body) var(--fusion-font-family);
  padding-left: 38px;
  border-radius: var(--fusion-radius-m);
  box-shadow: var(--fusion-shadow-300);
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility 0s .3s, background-color .2s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out { transition: opacity .3s, visibility 0s 0s, background-color .2s; }
.cd-top.cd-is-visible { visibility: visible; opacity: 1; }
.cd-top.cd-fade-out { opacity: .6; }
.cd-top:hover { background-color: #1f1f1f; opacity: 1; color: #fff !important; text-decoration: none; }

/* legacy submit-button color override kept from prior theme */
.dpFzvw { color: #fff !important; }

/* ===================================================== Responsive */

/* Large desktop */
@media (min-width: 1441px) {
  .hc-topbar, .hc-navbar { padding-left: 64px; padding-right: 64px; }
}

/* Tablet / small desktop */
@media (max-width: 1080px) {
  :root { --page-pad: 32px; }
  .article-sidebar { display: none; }        /* section list collapses; TOC kept */
  .article-main { border-left: 0; padding-left: 0; }
  .section-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promoted-articles, .promoted-band .promoted-articles { grid-template-columns: repeat(2, 1fr); }
  .hc-footer-full__grid { grid-template-columns: 1fr 1fr 1fr; }
  .hc-footer-brand { grid-column: 1 / -1; }
}

/* Tablet */
@media (max-width: 900px) {
  .hero-heading { font-size: 40px; }
  .post-container, .request-container { grid-template-columns: minmax(0, 1fr); }
  .post-sidebar, .request-sidebar { order: -1; }

  /* Ticket details becomes a collapsible panel so it doesn't push the
     conversation down the page on small screens. */
  .request-sidebar.collapsible-sidebar { position: relative; }
  .request-sidebar .collapsible-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    border-radius: var(--fusion-radius-s);
    color: var(--fusion-text-secondary);
    cursor: pointer;
  }
  .request-sidebar .collapsible-sidebar-toggle:hover { background: var(--fusion-ui-gray-100); }
  .request-sidebar .collapsible-sidebar-toggle .x-icon { display: none; }
  .request-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .chevron-icon { display: none; }
  .request-sidebar .collapsible-sidebar-toggle[aria-expanded="true"] .x-icon { display: block; }
  .request-sidebar .collapsible-sidebar-body { display: none; }
  .request-sidebar[aria-expanded="true"] .collapsible-sidebar-body { display: block; margin-top: 16px; }

  .search-results { grid-template-columns: 1fr; }
  .search-results-sidebar { position: static; }
  .academy-band__inner { gap: 24px; }
  .academy-stat b { font-size: 40px; }
}

/* Mobile: collapse header to hamburger */
@media (max-width: 768px) {
  :root { --page-pad: 20px; }
  .category-directory { gap: 36px; }
  .category-articles { padding: 20px; max-width: none; }
  .section-tree { grid-template-columns: 1fr; }
  .category-article-link { padding-left: 8px; padding-right: 8px; }
  .nav-wrapper-desktop { display: none; }
  .hc-marketing-nav, .hc-hc-nav, .hc-navbar__right .hc-header-search,
  .hc-topbar__right .hc-signin, .hc-topbar__right .hc-cta { display: none; }
  .nav-wrapper-mobile { display: flex; align-items: center; }
  .hc-topbar { height: 56px; }
  .hc-navbar { display: none; }               /* fold second tier into mobile menu */
  .hc-header--mobile-open .hc-navbar { display: flex; }

  .menu-list-mobile[aria-expanded="true"], .menu-list-mobile.is-open { display: block; }
  .menu-list-mobile {
    position: absolute;
    left: 0; right: 0;
    top: 56px;
    background: #fff;
    border-bottom: 1px solid var(--fusion-surface-border);
    box-shadow: var(--fusion-shadow-300);
    padding: 12px var(--page-pad) 20px;
    z-index: 45;
  }
  .menu-list-mobile-items { display: flex; flex-direction: column; gap: 2px; }
  .menu-list-mobile-items .item a, .menu-list-mobile-items .item > * {
    display: block; padding: 12px 8px; font-size: 15px; color: var(--fusion-text-primary);
    border-radius: var(--fusion-radius-s);
  }
  .menu-list-mobile-items .item a:hover { background: var(--fusion-ui-gray-100); text-decoration: none; }

  /* "Products" accordion — expands in place rather than navigating away,
     reusing the same category links/permission gating as the desktop
     dropdown (data-product handling lives in the shared script below). */
  .menu-list-mobile-items .item .mobile-products-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer;
  }
  .mobile-products-toggle svg { flex: none; transition: transform .15s ease; }
  .mobile-products-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .menu-list-mobile-items .item .mobile-products-menu {
    display: flex; flex-direction: column; gap: 2px; padding: 4px 0 4px 8px; color: inherit;
  }
  .menu-list-mobile-items .item .mobile-products-menu[hidden] { display: none; }
  .menu-list-mobile-items .mobile-products-menu__item { display: flex; align-items: center; gap: 10px; }
  .mobile-products-menu__item .hc-pm-icon { width: 22px; height: 22px; }

  .nav-divider { height: 1px; background: var(--fusion-ui-gray-200); margin: 8px 0; }
  .mobile-search { padding: 4px 0 8px; }
  .mobile-search .search-container { position: relative; max-width: none; width: 100%; }
  .mobile-search .search-icon { left: 14px; width: 15px; height: 15px; }
  .mobile-search input[type="search"] { width: 100%; padding: 11px 12px 11px 40px; border: 1px solid var(--fusion-ui-gray-400); border-radius: var(--fusion-radius-m); font-size: 15px; }
  .my-profile { display: flex; align-items: center; gap: 12px; }
  .menu-profile-avatar { width: 36px; height: 36px; border-radius: 50%; }

  .article-container { flex-direction: column; }
  .article-main { border-left: 0; padding-left: 0; }
  .article-container.has-toc .article-main { border-right: 0; padding-right: 0; }
  .blocks-list { justify-content: center; }
  .promoted-articles, .promoted-band .promoted-articles { grid-template-columns: 1fr; }
  .hc-footer-full__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero { padding: 100px var(--page-pad) 100px; }
  .hero-heading { font-size: 32px; }
  .sub-nav { flex-direction: column; align-items: stretch; }
  .sub-nav .search-container { max-width: none; }
  .support-band, .academy-band, .promoted-band { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .support-band__head h2 { font-size: 28px; }
  .academy-stat-divider { display: none; }
}

/* Article "On this page" nav: sticky card on desktop, collapsible below the title on smaller screens */
@media (max-width: 1024px) {
  .article-navigation-sidebar { display: none; }
  .article-toc-mobile:not([hidden]) { display: block; }
  .article-page { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .article-container.has-toc .article-main { border-right: 0; padding-right: 0; }
}

/* Small mobile */
@media (max-width: 380px) {
  .hero-heading { font-size: 28px; }
  .hc-footer-full__grid { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 26px; }
  .article-title { font-size: 26px; }
}

/* ====================================================== RTL */
[dir="rtl"] .breadcrumbs li + li::before { transform: rotate(135deg); }
[dir="rtl"] .search-icon { left: auto; right: 20px; }
[dir="rtl"] .sub-nav .search-icon { right: 14px; left: auto; }
[dir="rtl"] .sidenav-item { border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .sidenav-item.current-article { border-right-color: var(--accent); }
[dir="rtl"] .article-main {
  border-left: 0;
  padding-left: 0;
  border-right: 1px solid var(--fusion-ui-gray-200);
  padding-right: 24px;
}
[dir="rtl"] .article-container.has-toc .article-main {
  border-right: 1px solid var(--fusion-ui-gray-200);
  padding-right: 24px;
  border-left: 1px solid var(--fusion-ui-gray-200);
  padding-left: 24px;
}
[dir="rtl"] .callout, [dir="rtl"] .important, [dir="rtl"] .note, [dir="rtl"] .tip,
[dir="rtl"] .GIF_warning, [dir="rtl"] .Release_Note,
[dir="rtl"] .release-notes-highlights { border-left: 0; border-right: 6px solid; }
[dir="rtl"] .cd-top { right: auto; left: 32px; }

/* ====================================================== Print */
@media print {
  .hc-header, .hc-footer-full, .hc-footer-min, .footer, .cd-top,
  .article-sidebar, .article-navigation-sidebar, .sub-nav .search-container,
  .article-votes, .hc-announcement, .article-subscribe { display: none !important; }
  body { color: #000; background: #fff; }
  .article-container { display: block; }
  .article-body { max-width: none; font-size: 12pt; color: #000; }
  a, a:visited { color: #000; text-decoration: underline; }
}