/* =====================================================================
   SPARKK HELP CENTER — SUPPORT SYSTEM v2.3
   COMPLETE REPLACEMENT for helpcenter.css / Help Center v1 CSS.
   Load AFTER HelpSpace's default docs.css. No HTML or JavaScript required.
   The Help Center uses a distinct utility-first design, not Up Next's
   editorial masthead/footer. Existing HelpSpace links and functions remain.
   ===================================================================== */

:root {
  --hc-ink: #110033;
  --hc-midnight: #110033;
  --hc-purple: #220066;
  --hc-violet: #4302b2;
  --hc-lime: #b8f818;
  --hc-ivory: #f3edde;
  --hc-paper: #ffffff;
  --hc-canvas: #faf9ff;
  --hc-copy: #564f68;
  --hc-muted: #746e83;
  --hc-line: rgba(34,0,102,.13);
  --hc-font: 'Mont',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* TYPOGRAPHY — prioritize Mont without overriding SVGs or icon fonts. */
html { font-size: 17px; background: var(--hc-canvas); }
html body,
html body :is(h1,h2,h3,h4,h5,h6,p,a,span,small,div,li,blockquote,label,time,button,input,textarea,select,strong,em,b,td,th,summary):not(i):not([class*="fa-"]):not([class*="icon"]) {
  font-family: var(--hc-font) !important;
}
body,.docs-site,.docs-body,.docs-layout {
  color: var(--hc-ink);
  background: var(--hc-canvas) !important;
}
h1,h2,h3,h4,h5,h6 { color:var(--hc-ink); text-decoration:none; }
:where(a,button,input,select,textarea):focus-visible {
  outline:2px solid var(--hc-violet); outline-offset:3px;
}

/* =====================================================================
   THE HELP DESK / HEADER
   Strong, restrained midnight background; a violet SEARCH-FIRST field.
   Preserve HelpSpace's actual header layout, logo, menu and search.
   ===================================================================== */
.docs-header {
  position:relative;
  /* Preserve HelpSpace’s intended card overlap: avoid covering the first row. */
  z-index:auto !important;
  color:var(--hc-ivory) !important;
  background:
    radial-gradient(ellipse 62% 140% at 6% 0%,rgba(67,2,178,.50),transparent 70%),
    radial-gradient(ellipse 34% 70% at 92% 15%,rgba(0,238,255,.065),transparent 75%),
    linear-gradient(125deg,#220066 0%,#15003e 53%,#0c0025 100%) !important;
  border:0 !important;
  border-bottom:1px solid rgba(243,237,222,.13) !important;
  box-shadow:none !important;
}
.docs-header-site-logo {
  width:auto !important;
  height:clamp(1.55rem,2.1vw,1.9rem) !important;
  max-width:min(100%,15rem) !important;
  object-fit:contain;
}
/* Navigation is understated so search stays dominant. */
.docs-header .docs-top-menu li a,
.docs-header .docs-top-menu-item:not(svg) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(243,237,222,.80) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:7px !important;
  box-shadow:none !important;
  font-size:clamp(.72rem,.83vw,.82rem) !important;
  font-weight:900 !important;
  letter-spacing:.025em;
  line-height:1.3;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:color .18s ease,background-color .18s ease;
}
.docs-header .docs-top-menu li a:hover,
.docs-header .docs-top-menu li.active a {
  color:var(--hc-lime) !important;
  background:rgba(243,237,222,.065) !important;
  box-shadow:none !important;
}
.docs-header .docs-top-menu a:focus-visible {
  outline:2px solid var(--hc-lime); outline-offset:3px;
}
/* Support search: native HelpSpace input, CSS-only SVG background icon.
   Unlike Up Next, this uses a layered violet surface with a cyan edge. */
.docs-search-input,
.docs-header .docs-search-input {
  box-sizing:border-box;
  min-height:3.7rem !important;
  padding-left:3.55rem !important;
  padding-right:1.25rem !important;
  color:var(--hc-ivory) !important;
  background-color:#210854 !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8f818%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2210.8%22%20r%3D%226.3%22%2F%3E%3Cpath%20d%3D%22m15.6%2015.6%205%205%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(112deg,rgba(67,2,178,.33),rgba(17,0,51,.10)) !important;
  background-position:1.28rem center,center !important;
  background-size:1.22rem 1.22rem,100% 100% !important;
  background-repeat:no-repeat,no-repeat !important;
  border:1px solid rgba(0,238,255,.30) !important;
  border-radius:11px !important;
  font-size:clamp(.91rem,1vw,1rem) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  box-shadow:0 10px 28px rgba(3,0,16,.12) !important;
  transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}
.docs-search-input::placeholder,
.docs-header .docs-search-input::placeholder {
  color:rgba(243,237,222,.75) !important;
  opacity:1 !important;
}
.docs-search-input:focus,.docs-search-input:focus-visible {
  outline:none !important;
  border-color:var(--hc-lime) !important;
  box-shadow:0 0 0 3px rgba(184,248,24,.14),0 10px 28px rgba(3,0,16,.12) !important;
}
.docs-header svg { color:var(--hc-ivory); }
.docs-header :is(button,a):has(> svg:has(circle)) {
  min-width:2.5rem; min-height:2.5rem;
}
/* Do not make every SVG enormous, including the hamburger/menu. */
.docs-header svg:has(circle) { width:1.22rem; height:1.22rem; }

/* HelpSpace intentionally positions the category directory across the header edge.
   Let it paint above the header, rather than clipping the first row. */
.docs-site-overview { position:relative; z-index:1; }

/* =====================================================================
   HOME — BOLD SUPPORT DESTINATIONS, TWO-COLUMN GRID
   Preserve HelpSpace's structural grid and category illustrations.
   ===================================================================== */
.docs-site-overview :is(div,section):has(> .docs-site-category-grid-item) {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(.85rem,1.35vw,1.15rem) !important;
  align-items:stretch !important;
  max-width:1120px;
  margin-inline:auto !important;
}
.docs-site-category-grid-item {
  display:block !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  flex:initial !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  counter-increment:none !important;
}
.docs-site-category-grid-item::before,
.docs-site-category-grid-item::after { content:none !important; display:none !important; }
/* Actual clickable card: icon at left, larger editorial type at right. */
.docs-site-category-grid-item:is(a,.docs-shadow),
.docs-site-category-grid-item > a,
.docs-site-category-grid-item > .docs-shadow,
.docs-site-category-grid-item a.docs-shadow {
  position:relative;
  box-sizing:border-box;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:1.35rem !important;
  row-gap:.35rem !important;
  align-items:center !important;
  justify-content:stretch !important;
  width:100% !important;
  height:100% !important;
  min-height:220px !important;
  margin:0 !important;
  padding:1.65rem 1.65rem !important;
  overflow:hidden;
  text-align:left !important;
  color:var(--hc-ink) !important;
  text-decoration:none !important;
  background:linear-gradient(118deg,#fff 40%,#faf8ff) !important;
  border:1px solid rgba(34,0,102,.15) !important;
  border-left:4px solid var(--hc-violet) !important;
  border-radius:13px !important;
  box-shadow:0 6px 20px rgba(17,0,51,.055) !important;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.docs-site-category-grid-item:is(a,.docs-shadow):hover,
.docs-site-category-grid-item > :is(a,.docs-shadow):hover,
.docs-site-category-grid-item a.docs-shadow:hover,
.docs-site-category-grid-item:focus-within > :is(a,.docs-shadow) {
  transform:translateY(-3px);
  background:linear-gradient(118deg,#fff 40%,#f6f2ff) !important;
  border-color:rgba(67,2,178,.34) !important;
  border-left-color:var(--hc-lime) !important;
  box-shadow:0 16px 36px rgba(17,0,51,.11) !important;
}
/* Native illustration container — still uses original HelpSpace artwork. */
.docs-site-category-grid-item > :is(a,.docs-shadow) > :first-child,
.docs-site-category-grid-item:is(a,.docs-shadow) > :first-child,
.docs-site-category-grid-item a.docs-shadow > :first-child {
  grid-column:1;
  grid-row:1 / span 2;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center;
  width:88px !important;
  min-width:88px !important;
  height:88px !important;
  margin:0 !important;
  padding:10px !important;
  border-radius:14px;
  background:rgba(67,2,178,.058);
  box-shadow:inset 0 0 0 1px rgba(67,2,178,.035);
}
.docs-site-category-icon,
.docs-site-category-grid-item .docs-site-category-icon {
  width:auto !important;
  height:auto !important;
  max-width:67px !important;
  max-height:67px !important;
  object-fit:contain;
}
.docs-site-category-grid-item .flex-grow {
  grid-column:2;
  grid-row:1;
  min-width:0;
  margin:0 !important;
  text-align:left !important;
}
.docs-site-category-grid-item > :is(a,.docs-shadow) > :last-child:not(.flex-grow),
.docs-site-category-grid-item:is(a,.docs-shadow) > :last-child:not(.flex-grow),
.docs-site-category-grid-item a.docs-shadow > :last-child:not(.flex-grow) {
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin:0 !important;
  text-align:left !important;
}
.docs-site-category-grid-item h1 {
  display:block !important;
  margin:0 !important;
  color:var(--hc-ink) !important;
  font-size:clamp(1.23rem,1.65vw,1.45rem) !important;
  font-weight:900 !important;
  line-height:1.16 !important;
  letter-spacing:-.035em !important;
  text-align:left !important;
  text-decoration:none !important;
  transform:none !important;
}
.docs-site-category-grid-item h1::after { content:none !important; display:none !important; }
.docs-site-category-grid-item:hover h1 { color:var(--hc-violet) !important; }
.docs-site-category-grid-item .flex-grow p {
  margin:.65rem 0 .85rem !important;
  color:var(--hc-copy) !important;
  font-size:clamp(.84rem,1.03vw,.94rem) !important;
  font-weight:400 !important;
  line-height:1.56 !important;
  text-align:left !important;
}
.docs-site-category-grid-item :is(small,.text-xs) {
  color:var(--hc-muted) !important;
  font-size:.73rem !important;
  font-weight:800 !important;
  line-height:1.4 !important;
  text-align:left !important;
}

/* =====================================================================
   CATEGORY PAGES — THE ANSWER DIRECTORY
   Each item feels like a purposeful support article, not a generic tile.
   ===================================================================== */
.docs-site-breadcrumb-tag {
  color:var(--hc-ivory) !important;
  background:rgba(243,237,222,.09) !important;
  border:1px solid rgba(243,237,222,.18) !important;
  border-radius:6px !important;
}
.docs-site-header-subtitle { color:var(--hc-copy) !important; }
.docs-site-article-list-item {
  position:relative;
  color:var(--hc-ink);
  min-height:130px;
  background:linear-gradient(110deg,#fff 65%,#faf8ff) !important;
  border:1px solid rgba(34,0,102,.15) !important;
  border-left:4px solid var(--hc-violet) !important;
  border-radius:12px !important;
  box-shadow:0 5px 16px rgba(17,0,51,.045) !important;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.docs-site-article-list-item:hover,
.docs-site-article-list-item:focus-within {
  transform:translateY(-2px) !important;
  background:linear-gradient(110deg,#fff 60%,#f6f2ff) !important;
  border-color:rgba(67,2,178,.30) !important;
  border-left-color:var(--hc-lime) !important;
  box-shadow:0 12px 28px rgba(17,0,51,.09) !important;
}
.docs-site-article-list-item .docs-link-color {
  color:var(--hc-ink) !important;
  font-size:clamp(1.15rem,1.58vw,1.34rem) !important;
  font-weight:900 !important;
  line-height:1.22 !important;
  letter-spacing:-.025em;
  text-decoration:none !important;
}
.docs-site-article-list-item:hover .docs-link-color,
.docs-site-article-list-item .docs-link-color:focus-visible { color:var(--hc-violet) !important; }
.docs-site-article-list-item p {
  color:var(--hc-copy) !important;
  font-size:clamp(.86rem,1vw,.93rem) !important;
  line-height:1.6 !important;
}
.docs-site-article-publish-date {
  color:var(--hc-muted) !important;
  opacity:.85 !important;
  font-size:.68rem !important;
  font-weight:800 !important;
  letter-spacing:.025em;
  text-transform:uppercase;
}

/* =====================================================================
   ARTICLE PAGE / INSTRUCTIONAL READING
   Do not copy Up Next's press/editorial framing. Keep it functional.
   ===================================================================== */
.docs-article { color:var(--hc-ink); }
.docs-article > div:first-child,
.docs-article .xl\:p-22 { border-top:3px solid var(--hc-lime) !important; }
.docs-article .docs-article-title {
  color:var(--hc-ink) !important;
  font-size:clamp(1.95rem,3vw,2.85rem) !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
  margin-bottom:.6rem !important;
}
.docs-article .docs-article-subtitle {
  color:var(--hc-copy) !important;
  font-size:clamp(.83rem,1vw,.96rem) !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.docs-article p {
  color:var(--hc-copy) !important;
  font-size:clamp(.91rem,1vw,.98rem) !important;
  font-weight:400 !important;
  line-height:1.78 !important;
  margin:.9rem 0 0 !important;
}
.docs-article h2:not(.docs-article-subtitle) {
  display:block !important;
  color:var(--hc-ink) !important;
  font-size:clamp(1.26rem,1.8vw,1.55rem) !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  margin:2.55rem 0 0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
}
.docs-article h2:not(.docs-article-subtitle)::before {
  content:''; display:block; width:1.8rem; height:3px;
  margin-bottom:.6rem; background:var(--hc-violet); border-radius:3px;
}
.docs-article h3 { color:var(--hc-ink) !important; font-size:1.13rem !important; font-weight:900 !important; margin-top:1.65rem !important; }
.docs-article h6 { color:var(--hc-violet) !important; font-size:.72rem !important; font-weight:900 !important; text-transform:uppercase; }
.docs-article :is(ul,ol) { margin:1rem 0 0 !important; padding-left:1.35rem; }
.docs-article li { color:var(--hc-copy) !important; line-height:1.7; margin:.43rem 0; }
.docs-article a { color:var(--hc-violet) !important; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.docs-article a:hover { color:var(--hc-ink) !important; }
.docs-article blockquote { padding:1.1rem 1.3rem; margin:1.4rem 0 0; background:rgba(67,2,178,.045); border-left:3px solid var(--hc-violet); border-radius:0 8px 8px 0; font-style:normal; }
.docs-article code { color:var(--hc-violet); background:rgba(67,2,178,.065); border:1px solid rgba(67,2,178,.15); border-radius:6px; }
.docs-article pre code { color:inherit; }
.docs-article table { border:1px solid var(--hc-line); border-radius:10px; overflow:hidden; }
.docs-article table th { background:var(--hc-midnight) !important; color:var(--hc-ivory) !important; padding:.75rem 1rem; }
.docs-article table th p { color:var(--hc-ivory) !important; }
.docs-article table td { color:var(--hc-copy); }
.docs-article-video-container { overflow:hidden; border:1px solid var(--hc-line); border-radius:10px; }
.docs-article iframe { padding:0 !important; border:0; border-radius:0; }
/* Vote/feedback area should feel like part of a knowledge-base article. */
.docs-article .w-full.rounded-lg.border-t-2.p-6.mt-16.text-center {
  margin-top:2.75rem !important;
  padding:1.4rem !important;
  background:#f4f1fa !important;
  border:1px solid var(--hc-line) !important;
  border-radius:9px !important;
}
.docs-search-hit,.text__highlight.docs-search-hit { background:rgba(184,248,24,.28); color:var(--hc-ink); box-shadow:0 0 0 2px rgba(184,248,24,.28); }
.spm-heading-link { display:none; }

/* =====================================================================
   FOOTER / TWO-TONE SUPPORT SIGNATURE
   Intentionally unlike Up Next's all-dark editorial colophon.
   The authentic logo SVG sits inside its own midnight identity tile;
   native footer links and actual copyright remain in HelpSpace's HTML.
   ===================================================================== */
.docs-footer {
  box-sizing:border-box !important;
  width:100vw !important;
  max-width:none !important;
  margin:clamp(2.7rem,4.5vw,4rem) 0 0 calc(50% - 50vw) !important;
  padding:clamp(2rem,4vw,3rem) max(1.35rem,calc((100vw - 1120px)/2)) 1.45rem !important;
  color:var(--hc-ink) !important;
  background:linear-gradient(120deg,#f0edf7 0%,#eae6f3 100%) !important;
  border:0 !important;
  border-top:1px solid rgba(34,0,102,.13) !important;
  box-shadow:none !important;
  text-align:left !important;
}
.docs-footer .hidden.md\:inline-block.font-bold.mx-1,
.docs-footer .rounded { display:none; }
.docs-footer-menu,
ul.docs-footer-menu.w-full.flex.flex-row.justify-center.text-xs {
  display:grid !important;
  width:100% !important;
  max-width:1120px !important;
  grid-template-columns:minmax(230px,2.1fr) repeat(5,minmax(0,1fr)) !important;
  column-gap:clamp(.6rem,1.45vw,1.7rem) !important;
  row-gap:.8rem !important;
  align-items:center !important;
  justify-content:stretch !important;
  margin:0 auto !important;
  padding:0 0 clamp(1.4rem,2.6vw,2rem) !important;
  background:transparent !important;
  border-bottom:1px solid rgba(34,0,102,.16);
  list-style:none;
}
.docs-footer-menu::before {
  content:'' !important;
  display:block !important;
  grid-column:1;
  grid-row:1;
  box-sizing:border-box;
  width:min(100%,275px);
  min-height:96px;
  background:#110033 url('https://cdn.helpspace.com/4ae1dbc49c514e278cbb60b25f44cbbb/media/4208/HelpCenter.svg') center / 86% auto no-repeat;
  border:1px solid rgba(243,237,222,.1);
  border-radius:12px;
  box-shadow:0 12px 22px rgba(17,0,51,.09);
  pointer-events:none;
}
.docs-footer-menu > li {
  min-width:0; margin:0 !important; padding:0 !important;
  grid-row:1;
}
.docs-footer-menu a {
  display:inline-flex;
  align-items:center;
  min-height:2.45rem;
  padding:.4rem 0 !important;
  color:var(--hc-ink) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:clamp(.73rem,.87vw,.86rem) !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:color .18s ease;
}
.docs-footer-menu a:hover { color:var(--hc-violet) !important; text-decoration:underline !important; text-underline-offset:4px; }
.docs-footer-menu a:focus-visible { outline:2px solid var(--hc-violet); outline-offset:3px; }
.docs-footer .w-full.opacity-75 {
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  max-width:1120px;
  margin:0 auto !important;
  padding-top:1.05rem !important;
  opacity:1 !important;
  text-align:right !important;
}
.docs-footer .flex-wrap span,
.docs-footer .w-full.opacity-75,
.docs-footer .w-full.opacity-75 :is(span,p,div) {
  color:#514869 !important;
  font-size:.77rem !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}

/* =====================================================================
   RESPONSIVE — two-column desktop; comfortable single-column mobile.
   ===================================================================== */
@media (max-width:1099px) {
  .docs-site-overview :is(div,section):has(> .docs-site-category-grid-item) {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .docs-site-category-grid-item:is(a,.docs-shadow),
  .docs-site-category-grid-item > :is(a,.docs-shadow),
  .docs-site-category-grid-item a.docs-shadow {
    grid-template-columns:76px minmax(0,1fr) !important;
    min-height:198px !important;
    column-gap:1rem !important;
    padding:1.3rem !important;
  }
  .docs-site-category-grid-item > :is(a,.docs-shadow) > :first-child,
  .docs-site-category-grid-item:is(a,.docs-shadow) > :first-child,
  .docs-site-category-grid-item a.docs-shadow > :first-child {
    width:76px !important; min-width:76px !important; height:76px !important;
  }
  .docs-site-category-icon { max-width:59px !important; max-height:59px !important; }
  .docs-footer-menu,
  ul.docs-footer-menu.w-full.flex.flex-row.justify-center.text-xs {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.5rem 1.2rem !important;
  }
  .docs-footer-menu::before { grid-column:1 / -1; grid-row:1; margin-bottom:.45rem; }
  .docs-footer-menu > li { grid-row:auto; }
}
@media (max-width:899px) {
  .docs-header .docs-top-menu {
    background:#16043d !important;
    color:var(--hc-ivory) !important;
    border:1px solid rgba(243,237,222,.17) !important;
    border-radius:12px !important;
    box-shadow:0 16px 38px rgba(3,0,16,.25) !important;
  }
  .docs-header .docs-top-menu li a {
    color:var(--hc-ivory) !important;
    background:transparent !important;
  }
  .docs-header .docs-top-menu li a:hover { color:var(--hc-lime) !important; }
}
@media (max-width:680px) {
  .docs-site-overview :is(div,section):has(> .docs-site-category-grid-item) {
    grid-template-columns:minmax(0,1fr) !important;
    gap:.75rem !important;
  }
  .docs-site-category-grid-item:is(a,.docs-shadow),
  .docs-site-category-grid-item > :is(a,.docs-shadow),
  .docs-site-category-grid-item a.docs-shadow {
    min-height:165px !important;
    grid-template-columns:66px minmax(0,1fr) !important;
    column-gap:1rem !important;
    padding:1.1rem !important;
  }
  .docs-site-category-grid-item > :is(a,.docs-shadow) > :first-child,
  .docs-site-category-grid-item:is(a,.docs-shadow) > :first-child,
  .docs-site-category-grid-item a.docs-shadow > :first-child {
    width:66px !important; min-width:66px !important; height:66px !important;
  }
  .docs-site-category-icon { max-width:52px !important; max-height:52px !important; }
  .docs-site-category-grid-item h1 { font-size:clamp(1.1rem,5vw,1.27rem) !important; }
  .docs-site-category-grid-item .flex-grow p { font-size:.81rem !important; margin:.4rem 0 .6rem !important; }
  .docs-header-site-logo { max-height:1.55rem !important; }
  .docs-search-input { background-position:1.05rem center,center !important; padding-left:3.05rem !important; }
  .docs-article .docs-article-title { font-size:clamp(1.8rem,8vw,2.4rem) !important; }
  .docs-footer { padding:2rem 1.25rem 1.3rem !important; }
  .docs-footer-menu,
  ul.docs-footer-menu.w-full.flex.flex-row.justify-center.text-xs {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.35rem 1.3rem !important;
    padding-bottom:1.35rem !important;
  }
  .docs-footer-menu::before { grid-column:1 / -1; width:100%; max-width:340px; min-height:92px; }
  .docs-footer .w-full.opacity-75 { justify-content:flex-start !important; text-align:left !important; }
}
@media (prefers-reduced-motion:reduce) {
  .docs-site-category-grid-item :is(a,.docs-shadow),
  .docs-site-article-list-item,.docs-footer-menu a { transition:none !important; }
  .docs-site-category-grid-item :is(a,.docs-shadow):hover { transform:none !important; }
}


/* SPARKK HELP CENTER V2.3 — Category hover clipping correction
   Append to the bottom of V2.2, or use the complete V2.3 file.
   Keep the existing color, border, and shadow hover effects. */
.docs-site-overview .docs-site-category-grid-item:is(a,.docs-shadow):hover,
.docs-site-overview .docs-site-category-grid-item > :is(a,.docs-shadow):hover,
.docs-site-overview .docs-site-category-grid-item a.docs-shadow:hover,
.docs-site-overview .docs-site-category-grid-item:focus-within > :is(a,.docs-shadow) {
  transform: none !important;
}

/* Sparkk Help Center V2.4 — Mobile homepage category inset.
   Add to the END of V2.3. This affects only the homepage category grid. */
@media (max-width: 680px) {
  .docs-site-overview :is(div, section):has(> .docs-site-category-grid-item) {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}