@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 */

  --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;
}

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(--fusion-text-primary); }

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).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).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;
}

/* =================================================== Submit a request 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: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: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(--accent, #d7f45b);
  color: var(--near-black, #0a0a0a);
  padding: 12px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 16px;
}
.hc-announcement__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.hc-announcement__tag {
  background: var(--near-black, #0a0a0a);
  color: #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(--near-black, #0a0a0a); text-decoration: underline; }
.hc-announcement__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 0; background: transparent; color: var(--near-black, #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) {
  .hero-search { flex-wrap: wrap; }
  .hero-product-filter { max-width: none; }
}
.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: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);
}

.category-empty { color: var(--fusion-text-secondary); }
.product-categories .blocks-item-icon {width: 40px; height: 40px;}


/* 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 > 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: 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);
}

/* Direct articles lead the page instead of being repeated inside section cards. */
.category-articles {
  padding: 28px 32px 32px;
  border-radius: var(--fusion-radius-l);
  background: var(--fusion-surface-secondary);
}
.category-articles:not(:has(.category-article-list-item)) { display: none; }
.category-sections:not(:has(.section-tree > .section)) { display: none; }
.category-article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.category-article-list-item { min-width: 0; }
.category-article-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--fusion-radius-m);
  color: var(--fusion-text-primary);
  font: 500 15px/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: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 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--fusion-radius-m);
  color: var(--secondary, #2300af);
  background: var(--fusion-surface-primary);
  box-shadow: inset 0 0 0 1px var(--fusion-ui-gray-200);
}
.category-article-list-item--more .category-article-link {
  color: var(--secondary, #2300af);
  font-weight: 600;
}
.category-article-list-item--more .category-article-link svg { flex: none; }

.section-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.section-tree > .section {
  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);
}
.section-tree-title { 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(--secondary, #2300af); }
.section-tree-title a:hover { color: var(--secondary, #2300af); text-decoration: none; }
.section-tree-description {
  margin: 10px 0 0;
  color: var(--fusion-text-secondary);
  font: 400 14px/1.5 var(--fusion-font-family);
}
.section-tree-subsections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fusion-ui-gray-200);
}
.section-tree-subsections a {
  color: var(--fusion-text-primary);
  font: 400 14px/1.4 var(--fusion-font-family);
}
.section-tree-subsections a:hover { color: var(--secondary, #2300af); text-decoration: underline; }

/* Article lists (shared: category/section/sidebar) */
.article-list { display: flex; flex-direction: column; }
.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-link, .article-list-item > a {
  color: var(--fusion-text-primary);
  font: 400 15px/1.4 var(--fusion-font-family);
}
.article-list-link:hover, .article-list-item > a: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 {
  display: inline-block;
  margin-top: 12px;
  font: 600 14px/1.4 var(--fusion-font-family);
  color: var(--secondary, #2b06c1);
}

/* ==================================================== 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;
}
.subsection-block {
  background: #fff;
  border: 1px solid var(--fusion-surface-border);
  border-radius: var(--fusion-radius-l);
  padding: 20px 24px;
  box-shadow: var(--fusion-shadow-100);
  color: var(--fusion-text-primary);
}
.subsection-block h2 { margin: 0 0 12px; font: 700 16px/1.4 var(--heading-font, var(--fusion-font-family)); }
.subsection-block h2 a { color: var(--near-black); }
.subsection-block a { color: var(--fusion-text-primary); }
.subsection-block .article-list a:hover { color: var(--secondary, #2300af); }

/* ========================================================= 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; }
.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: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); }

/* 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: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.is-active-parent { color: var(--near-black); }
.article-toc-link.is-active {
  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;
}
.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; }

/* 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; }
.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; }
.comment, .comment-wrapper { display: flex; gap: 16px; }
.comment-avatar .user-avatar, .post-avatar .user-avatar { width: 40px; height: 40px; }
.comment-body, .post-body { font-size: 15px; line-height: 1.6; }
.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; }
.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-details, .request-info { display: flex; flex-direction: column; gap: 8px; }

/* 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;
}
.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); }

/* 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 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 40px 0 0;
  flex-wrap: wrap;
}
.pagination a, .pagination span, .pagination .pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  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 a:hover { border-color: var(--fusion-ui-gray-700); text-decoration: none; }
.pagination .pagination-current, .pagination [aria-current="page"] {
  background: var(--near-black);
  border-color: var(--near-black);
  color: #fff;
}
.pagination-prev, .pagination-next { 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 */
.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: 32px; 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-pill);
  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 */
  .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: 1fr; }
  .post-sidebar, .request-sidebar { order: -1; }
  .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: 24px 16px; }
  .category-article-list, .section-tree { grid-template-columns: 1fr; }
  .category-article-list { gap: 6px; }
  .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; }
  .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; }
  .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); }
}

/* 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"] .callout, [dir="rtl"] .important, [dir="rtl"] .note, [dir="rtl"] .tip,
[dir="rtl"] .GIF_warning, [dir="rtl"] .Release_Note { 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 { color: #000; text-decoration: underline; }
}