/* Mysa Pylon Theme styles.css — design system for the Mysa knowledge base on Pylon. */
/* Mirrors help.getmysa.com without Tailwind. All public classes prefixed mysa-. */
/* See DESIGN-SYSTEM.md for the class contract. Comments use single-line form */
/* defensively so they cannot leak as Markdown bullets if Pylon ever inlines */
/* the file body into a layout. */


/* 1. Inter font face — sourced from rsms.me/inter v4 (variable 100..900). */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0") format("woff2");
}


/* === 2. DESIGN TOKENS ==================================================== */
:root {
  /* Brand */
  --mysa-blue: #1567d4;
  --mysa-blue-hover: #0f4fa5;
  --mysa-blue-50: #f0f6ff;

  /* Neutral ramp (Tailwind neutral parity) */
  --mysa-neutral-50: #fafafa;
  --mysa-neutral-100: #f5f5f5;
  --mysa-neutral-200: #e5e5e5;
  --mysa-neutral-300: #d4d4d4;
  --mysa-neutral-400: #a3a3a3;
  --mysa-neutral-500: #737373;
  --mysa-neutral-600: #525252;
  --mysa-neutral-700: #404040;
  --mysa-neutral-800: #262626;
  --mysa-neutral-900: #171717;

  /* Warm accent — used by category strips on help.getmysa.com */
  --mysa-warm-bg: #ecebea;
  --mysa-warm-text: #504d49;

  /* Status */
  --mysa-success: #22c55e;
  --mysa-warning: #f97316;
  --mysa-error: #ef4444;

  /* Type stack — Inter Variable first, then platform fallbacks. */
  --mysa-font-sans: "Inter Variable", "Inter", "Inter Fallback", system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mysa-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale */
  --mysa-text-xs: 0.75rem;     /* 12px */
  --mysa-text-sm: 0.875rem;    /* 14px */
  --mysa-text-base: 1rem;      /* 16px */
  --mysa-text-lg: 1.125rem;    /* 18px */
  --mysa-text-xl: 1.25rem;     /* 20px */
  --mysa-text-2xl: 1.5rem;     /* 24px */
  --mysa-text-3xl: 1.875rem;   /* 30px */
  --mysa-text-4xl: 2.25rem;    /* 36px */
  --mysa-text-5xl: 3rem;       /* 48px */
  --mysa-text-6xl: 3.75rem;    /* 60px */

  /* Line heights */
  --mysa-leading-tight: 1.2;
  --mysa-leading-snug: 1.35;
  --mysa-leading-normal: 1.55;
  --mysa-leading-relaxed: 1.7;

  /* Spacing scale (0.25rem increments) */
  --mysa-space-1: 0.25rem;
  --mysa-space-2: 0.5rem;
  --mysa-space-3: 0.75rem;
  --mysa-space-4: 1rem;
  --mysa-space-5: 1.25rem;
  --mysa-space-6: 1.5rem;
  --mysa-space-7: 1.75rem;
  --mysa-space-8: 2rem;
  --mysa-space-10: 2.5rem;
  --mysa-space-12: 3rem;
  --mysa-space-14: 3.5rem;
  --mysa-space-16: 4rem;
  --mysa-space-20: 2rem;

  /* Radii */
  --mysa-radius-sm: 0.25rem;
  --mysa-radius-md: 0.5rem;
  --mysa-radius-lg: 0.75rem;
  --mysa-radius-xl: 1rem;
  --mysa-radius-2xl: 1.5rem;
  --mysa-radius-full: 9999px;

  /* Container widths */
  --mysa-container: 80rem;
  --mysa-container-narrow: 52rem;
  --mysa-container-wide: 92rem;

  /* Shadows */
  --mysa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mysa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --mysa-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.12),
    0 8px 10px -6px rgba(0, 0, 0, 0.06);

  /* Motion */
  --mysa-transition: 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}


/* === 3. RESET ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--mysa-font-sans);
  font-size: var(--mysa-text-base);
  line-height: var(--mysa-leading-normal);
  color: var(--mysa-neutral-800);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--mysa-blue);
  text-decoration: none;
  transition: color var(--mysa-transition);
}
a:hover {
  color: var(--mysa-blue-hover);
}


/* === 4. BASE TYPOGRAPHY ================================================== */
.mysa-eyebrow {
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mysa-neutral-500);
}

.mysa-h1 {
  font-size: var(--mysa-text-4xl);
  font-weight: 700;
  line-height: var(--mysa-leading-tight);
  letter-spacing: -0.02em;
  color: var(--mysa-neutral-900);
}

.mysa-h2 {
  font-size: var(--mysa-text-2xl);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
  letter-spacing: -0.015em;
  color: var(--mysa-neutral-900);
}

.mysa-h3 {
  font-size: var(--mysa-text-xl);
  font-weight: 600;
  line-height: var(--mysa-leading-snug);
  color: var(--mysa-neutral-900);
}

.mysa-h4 {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  line-height: var(--mysa-leading-snug);
  color: var(--mysa-neutral-800);
}

.mysa-body {
  font-size: var(--mysa-text-base);
  line-height: var(--mysa-leading-relaxed);
  color: var(--mysa-neutral-700);
}

.mysa-meta {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
}

.mysa-link {
  color: var(--mysa-blue);
  font-weight: 500;
  text-decoration: none;
}
.mysa-link:hover {
  color: var(--mysa-blue-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .mysa-h1 { font-size: var(--mysa-text-5xl); }
  .mysa-h2 { font-size: var(--mysa-text-3xl); }
  .mysa-h3 { font-size: var(--mysa-text-2xl); }
}


/* === 5. LAYOUT CONTAINERS ================================================ */
.mysa-container,
.mysa-container-narrow,
.mysa-container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--mysa-space-4);
}

.mysa-container { max-width: var(--mysa-container); }
.mysa-container-narrow { max-width: var(--mysa-container-narrow); }
.mysa-container-wide { max-width: var(--mysa-container-wide); }

@media (min-width: 768px) {
  .mysa-container,
  .mysa-container-narrow,
  .mysa-container-wide {
    padding-inline: var(--mysa-space-8);
  }
}

/* Wider side gutters on larger screens so content isn't hugging the edges */
/* — mirrors the comfortable left/right margins of the original formatting. */
@media (min-width: 1024px) {
  .mysa-container,
  .mysa-container-narrow,
  .mysa-container-wide {
    padding-inline: var(--mysa-space-12);
  }
}

@media (min-width: 1280px) {
  .mysa-container,
  .mysa-container-narrow,
  .mysa-container-wide {
    padding-inline: var(--mysa-space-16);
  }
}

.mysa-section {
  padding-block: var(--mysa-space-12);
}

@media (min-width: 768px) {
  .mysa-section {
    padding-block: var(--mysa-space-16);
  }
}

.mysa-section--tight { padding-block: 0; }
.mysa-section--loose { padding-block: var(--mysa-space-20); }
.mysa-section--flush-top { padding-top: 0; }

/* Force a single, predictable gap between all direct children of <main> on */
/* collection / article pages. !important is belt-and-suspenders against */
/* any padding/margin override (kb-content-wrapper, search-mount margins, */
/* section padding, etc.) — they all collapse, and only this gap separates */
/* the sections. */
main.mysa-section,
main.mysa-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mysa-space-4) !important;
}

/* Belt-and-suspenders: also use adjacent-sibling margin so older browsers */
/* / cascade quirks can't bypass the gap. */
main.mysa-section > * + *,
main.mysa-container > * + * {
  margin-top: 0;
}

/* Use on the first <main> after the absolute navbar so content isn't */
/* hidden underneath the floating pill. Applies on collection + article */
/* pages (homepage's hero supplies its own padding-top). !important is */
/* belt-and-suspenders against any inline / shorthand-padding override. */
.mysa-section--page-top { padding-top: 11rem !important; }
@media (min-width: 1024px) {
  .mysa-section--page-top { padding-top: 13rem !important; }
}

/* Article pages use a compact search row directly below the floating nav. */
/* Collection pages keep the larger page-top offset above. */
main .mysa-container.mysa-section--page-top:has(.mysa-article-search) {
  padding-top: 8rem !important;
}
@media (min-width: 1024px) {
  main .mysa-container.mysa-section--page-top:has(.mysa-article-search) {
    padding-top: 9rem !important;
  }
}


/* === 6. BUTTONS, INPUTS, ICONS =========================================== */
.mysa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mysa-space-2);
  padding: var(--mysa-space-3) var(--mysa-space-5);
  border-radius: var(--mysa-radius-full);
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mysa-transition),
              color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
  text-decoration: none;
  white-space: nowrap;
}

.mysa-btn--primary {
  background-color: var(--mysa-blue);
  color: #ffffff;
  box-shadow: var(--mysa-shadow-sm);
}
.mysa-btn--primary:hover {
  background-color: var(--mysa-blue-hover);
  color: #ffffff;
}

.mysa-btn--ghost {
  background-color: transparent;
  color: var(--mysa-neutral-800);
}
.mysa-btn--ghost:hover {
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-900);
}

.mysa-btn--lg {
  padding: var(--mysa-space-4) var(--mysa-space-6);
  font-size: var(--mysa-text-base);
}

.mysa-input {
  display: block;
  width: 100%;
  padding: var(--mysa-space-3) var(--mysa-space-4);
  font-size: var(--mysa-text-base);
  color: var(--mysa-neutral-900);
  background-color: #ffffff;
  border: 1px solid var(--mysa-neutral-300);
  border-radius: var(--mysa-radius-full);
  transition: border-color var(--mysa-transition),
              box-shadow var(--mysa-transition);
}
.mysa-input::placeholder {
  color: var(--mysa-neutral-400);
}
.mysa-input:focus {
  border-color: var(--mysa-blue);
  box-shadow: 0 0 0 3px rgba(21, 103, 212, 0.18);
  outline: none;
}

.mysa-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.125em;
}


/* === 7. NAVBAR =========================================================== */
/* The .kb-header / .kb-header-inner / .kb-header-nav / .kb-header-logo / */
/* .kb-header-link rules below are the DEFAULT Pylon styles, kept as close */
/* to verbatim as possible so Pylon's hydration scripts recognise the */
/* expected class chain and apply their stock dropdown CSS to #kb-locale */
/* and #kb-auth (which would otherwise render menu items horizontally). */
/* */
/* The Mysa visual treatment (floating glass pill, blue brand) lives on the */
/* outer .mysa-nav wrapper instead of .kb-header so we don't disturb the */
/* class chain Pylon's CSS scopes against. */

/* Pylon CSS variables that the default kb-header / kb-auth-* / kb-locale-* */
/* rules consume. Without these, the link / dropdown color rules silently */
/* fall back to inherit and look broken. */
:root {
  --neutral-base: #ffffff;
  --neutral-100: var(--mysa-neutral-100);
  --neutral-900: var(--mysa-neutral-900);
}

/* Outer wrapper — positions the navbar floating over the hero and applies */
/* the Mysa glass pill chrome (background, blur, rounded corners, shadow). */
/* Navbar floats absolutely over the hero — transparent strip so only the */
/* white pill itself is visible against the blue hero behind it. The hero */
/* below this gets padding-top to make room for the navbar overlay. */
.mysa-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--mysa-space-5) var(--mysa-space-4);
  background: transparent;
}

/* Apply the white pill chrome to .kb-header-inner only. .kb-header stays */
/* a transparent passthrough so when both elements are present we don't */
/* render two stacked white pills. */
.mysa-nav .kb-header {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.mysa-nav .kb-header-inner {
  background: #ffffff;
  border-radius: var(--mysa-radius-xl);
  box-shadow: var(--mysa-shadow-md);
  padding: var(--mysa-space-4) var(--mysa-space-6);
  min-height: 4.5rem;
}

/* Force nav-link text to dark inside the white pill, regardless of which */
/* scope chain Pylon's stock kb-header--light-text rule targets. */
.mysa-nav .kb-header .kb-header-link,
.mysa-nav .kb-header-inner .kb-header-link,
.mysa-nav .kb-header--light-text .kb-header-link {
  color: var(--mysa-neutral-700);
}
.mysa-nav .kb-header-inner .kb-header-link:hover {
  color: var(--mysa-neutral-900);
  opacity: 1;
}

/* Auth + locale buttons inside the white pill — borderless, neutral text, */
/* subtle hover wash. Targets only inside .mysa-nav so the default-theme */
/* styling for .kb-auth-button elsewhere is unchanged. */
.mysa-nav .kb-auth-button {
  border: 1px solid transparent;
  color: var(--mysa-neutral-900);
  padding: 4px 10px;
  border-radius: var(--mysa-radius-full);
  transition: background-color var(--mysa-transition),
              border-color var(--mysa-transition);
}
.mysa-nav .kb-auth-button:hover {
  background: var(--mysa-neutral-100);
  border-color: var(--mysa-neutral-200);
}

.mysa-nav .kb-locale-button {
  color: var(--mysa-neutral-900);
  padding: 4px 10px;
  border-radius: var(--mysa-radius-full);
  transition: background-color var(--mysa-transition);
}
.mysa-nav .kb-locale-button:hover {
  background: var(--mysa-neutral-100);
  opacity: 1;
}

/* Slightly larger, crisper avatar inside our pill. */
.mysa-nav .kb-auth-avatar {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .mysa-nav { padding: var(--mysa-space-6); }
}

/* === DEFAULT PYLON STYLES (kept verbatim from the default theme) ====== */

.kb-header {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 24px;
}

.kb-header-inner {
  display: flex;
  max-width: 1200px;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
}

.kb-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.kb-header-logo img {
  height: 32px;
  flex-shrink: 0;
}

/* When both light and dark logos are configured, hide the dark variant by */
/* default since our hero is dark. */
.kb-header-logo .kb-logo-bright {
  display: none;
}

.kb-header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.kb-header-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s;
  color: var(--neutral-900);
}

.kb-header-link:hover {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .kb-header-link {
    display: none;
  }
}

.kb-header--dark-text .kb-header-link {
  color: var(--neutral-900);
}

.kb-header--light-text .kb-header-link {
  color: var(--neutral-base);
}

/* === END DEFAULT PYLON STYLES (kb-header) ============================= */


/* === DEFAULT PYLON STYLES (kb-auth-* and kb-locale-*) ================= */
/* Verbatim from the default Pylon theme. Pylon's hydration emits these */
/* class names inside #kb-auth and #kb-locale; without these rules the */
/* dropdown menus inherit the kb-header-nav flex layout and render items */
/* horizontally instead of as a vertical popover card. */

/* Auth button. */
.kb-auth-wrapper {
  position: relative;
}

.kb-auth-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 0.15s;
}

.kb-auth-button:hover {
  background: rgba(229, 229, 229, 0.1);
}

.kb-banner--light-text .kb-auth-button {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--neutral-base);
}

.kb-auth-logout {
  gap: 8px;
  padding: 4px 12px 4px 10px;
}

.kb-auth-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.kb-auth-chevron {
  flex-shrink: 0;
}

.kb-auth-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  white-space: nowrap;
  padding: 4px 0;
  background: var(--neutral-base);
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.kb-auth-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--neutral-900);
  text-align: left;
  cursor: pointer;
}

.kb-auth-dropdown-item:hover {
  background: var(--neutral-100);
}

/* Locale switcher. */
#kb-locale:empty {
  display: none;
}

.kb-locale-wrapper {
  position: relative;
}

.kb-locale-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}

.kb-locale-button:hover {
  opacity: 0.7;
}

.kb-locale-globe {
  flex-shrink: 0;
}

.kb-locale-chevron {
  flex-shrink: 0;
}

.kb-locale-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  white-space: nowrap;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--neutral-base);
  border-radius: 4px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.kb-locale-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--neutral-900);
  text-align: left;
  cursor: pointer;
}

.kb-locale-dropdown-item:hover {
  background: var(--neutral-100);
}

.kb-locale-dropdown-item--active {
  font-weight: 500;
}

/* Products dropdown — mirrors the kb-locale dropdown structure so the */
/* trigger + popover feel native to the navbar. Toggled by */
/* setupProductsDropdown() in scripts.html. */
.mysa-products-wrapper {
  position: relative;
}

.mysa-products-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--mysa-neutral-900);
  cursor: pointer;
  border-radius: var(--mysa-radius-full);
  transition: background-color var(--mysa-transition);
}
.mysa-products-button:hover {
  background: var(--mysa-neutral-100);
}

.mysa-products-chevron {
  flex-shrink: 0;
  transition: transform var(--mysa-transition);
}
.mysa-products-button[aria-expanded="true"] .mysa-products-chevron {
  transform: rotate(180deg);
}

.mysa-products-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 18rem;
  padding: 6px;
  background: var(--neutral-base);
  border-radius: 8px;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--mysa-neutral-200);
}
.mysa-products-dropdown[hidden] {
  display: none;
}

.mysa-products-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--mysa-neutral-900);
  transition: background-color var(--mysa-transition);
}
.mysa-products-dropdown-item:hover {
  background: var(--mysa-neutral-100);
  color: var(--mysa-neutral-900);
}

.mysa-products-dropdown-item__image {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.mysa-products-dropdown-item__icon-emoji,
.mysa-products-dropdown-item__icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  flex-shrink: 0;
}

.mysa-products-dropdown-item__icon-emoji {
  font-size: 1.4rem;
  line-height: 1;
}

.mysa-products-dropdown-item__icon-fallback {
  border-radius: var(--mysa-radius-md);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-500);
}

.mysa-products-dropdown-item__icon-fallback svg {
  width: 20px;
  height: 20px;
}

.mysa-products-dropdown-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mysa-products-dropdown-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mysa-neutral-900);
  line-height: 1.3;
}

.mysa-products-dropdown-item__subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--mysa-neutral-500);
  line-height: 1.3;
}

/* === END DEFAULT PYLON STYLES (kb-auth-* and kb-locale-*) ============= */

/* Mobile-only hamburger toggle. Hidden at >= 1024px. */
.mysa-nav__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--mysa-radius-full);
  border: 0;
  background: transparent;
  color: var(--mysa-neutral-700);
  cursor: pointer;
  flex-shrink: 0;
}
.mysa-nav__menu-toggle:hover {
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-900);
}

/* Scroll-state reinforcement — added by scripts.html when window.scrollY > 24. */
.mysa-nav--scrolled .kb-header {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--mysa-shadow-lg);
}

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


/* Layout wrapper — relative so the absolute navbar anchors to it. */
.kb-page-layout {
  position: relative;
}

/* === 8. HERO ============================================================= */
.mysa-hero {
  position: relative;
  min-height: 36vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #ffffff;
  isolation: isolate;
  padding-top: 9rem;
  padding-bottom: 2rem;
}

.mysa-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mysa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mysa-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15) 60%,
    transparent
  );
}

.mysa-hero__content {
  width: 100%;
  max-width: 48rem;
  padding-block: var(--mysa-space-6);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mysa-space-5);
}

.mysa-hero__content .mysa-hero__copy {
  align-items: center;
  text-align: center;
}

.mysa-hero__content .mysa-hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.mysa-hero__eyebrow {
  font-size: var(--mysa-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

.mysa-hero__title {
  font-size: var(--mysa-text-4xl);
  font-weight: 700;
  line-height: var(--mysa-leading-tight);
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.mysa-hero__subtitle {
  font-size: var(--mysa-text-lg);
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
}

.mysa-search-mount {
  width: 100%;
  max-width: 36rem;
}

.mysa-search-mount--hero {
  background-color: #ffffff;
  color: var(--mysa-neutral-700);
  border-radius: var(--mysa-radius-full);
  box-shadow: var(--mysa-shadow-md);
  overflow: hidden;
}

/* Slim variant for inner pages (collection + article). Same white pill */
/* treatment as the hero mount but with a tighter min-height so it acts */
/* like a normal toolbar input instead of a hero input. */
/* Inline variant overrides the hero "pill" wrapper so the input can own */
/* its own border + hover. Without these resets the wrapper's pill radius */
/* + overflow:hidden clip the input's rounded ends, leaving only the top */
/* and bottom hairlines visible on hover. */
.mysa-search-mount--inline {
  margin-bottom: 0;
  max-width: 100%;
  background-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  overflow: visible;
}
.mysa-search-mount--inline #kb-search {
  min-height: 44px;
  padding-block: 0;
}
.mysa-search-mount--inline:focus-within {
  box-shadow: none;
}

.mysa-search-panel {
  margin-bottom: var(--mysa-space-8);
  padding: var(--mysa-space-5);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-xl);
  background-color: #ffffff;
  box-shadow: var(--mysa-shadow-sm);
}

.mysa-search-panel__title {
  margin: 0 0 var(--mysa-space-3);
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  color: var(--mysa-neutral-700);
}

.mysa-search-results-wrapper {
  position: relative;
  z-index: 2;
}

#kb-search-results:not(:empty) {
  margin-top: var(--mysa-space-6);
  margin-bottom: var(--mysa-space-8);
}

@media (min-width: 768px) {
  .mysa-hero { min-height: 42vh; }
  .mysa-hero__title { font-size: var(--mysa-text-5xl); }
  .mysa-hero__content {
    padding-block: var(--mysa-space-8);
  }
}

@media (min-width: 1024px) {
  .mysa-hero__title { font-size: var(--mysa-text-6xl); }
}


/* === 9. PRODUCT / CATEGORY GRID ========================================== */
.mysa-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mysa-space-4);
}

.mysa-product-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-5);
  background-color: var(--mysa-neutral-50);
  border-radius: var(--mysa-radius-xl);
  border: 1px solid transparent;
  transition: background-color var(--mysa-transition),
              border-color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.mysa-product-card:hover {
  background-color: #ffffff;
  border-color: var(--mysa-neutral-200);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.mysa-product-card__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.mysa-product-card__title {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  line-height: var(--mysa-leading-snug);
  margin: 0;
}

.mysa-product-card__subtitle {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
  line-height: var(--mysa-leading-snug);
  margin: 0;
}

/* Subcollection card variants — emoji icon (Pylon's .Icon string), folder */
/* SVG fallback tile, and the small "12 articles" meta line. Sizes mirror */
/* .mysa-product-card__image so the cards line up regardless of which */
/* leading visual was chosen. */
.mysa-product-card__icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 2rem;
  line-height: 1;
}

.mysa-product-card__icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--mysa-neutral-100);
  border-radius: var(--mysa-radius-lg);
  color: var(--mysa-neutral-500);
}
.mysa-product-card__icon-fallback svg {
  width: 28px;
  height: 28px;
}

.mysa-product-card__count {
  font-size: var(--mysa-text-xs);
  color: var(--mysa-neutral-500);
  margin: 0;
  text-transform: none;
}

@media (min-width: 768px) {
  .mysa-product-card { padding: var(--mysa-space-6); }
  .mysa-product-card__image { width: 80px; height: 80px; }
  .mysa-product-card__icon-emoji,
  .mysa-product-card__icon-fallback { width: 80px; height: 80px; }
  .mysa-product-card__icon-emoji { font-size: 2.25rem; }
  .mysa-product-card__icon-fallback svg { width: 32px; height: 32px; }
}

@media (min-width: 1024px) {
  .mysa-product-card__image { width: 96px; height: 96px; }
  .mysa-product-card__icon-emoji,
  .mysa-product-card__icon-fallback { width: 96px; height: 96px; }
  .mysa-product-card__icon-emoji { font-size: 2.5rem; }
  .mysa-product-card__icon-fallback svg { width: 36px; height: 36px; }
}


/* === 10. ARTICLE LIST (collection page) ================================== */
.mysa-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mysa-neutral-200);
}

.mysa-article-list__item {
  border-bottom: 1px solid var(--mysa-neutral-200);
}

.mysa-article-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mysa-space-4);
  padding: var(--mysa-space-5) var(--mysa-space-4);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--mysa-transition);
  border-radius: var(--mysa-radius-md);
}
.mysa-article-list__link:hover {
  background-color: var(--mysa-neutral-50);
  color: inherit;
}

.mysa-article-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  min-width: 0;
  flex: 1;
}

.mysa-article-list__title {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  margin: 0;
  line-height: var(--mysa-leading-snug);
}

.mysa-article-list__desc {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
  margin: 0;
  line-height: var(--mysa-leading-snug);
}

.mysa-article-list__chevron {
  width: 20px;
  height: 20px;
  color: var(--mysa-neutral-400);
  flex-shrink: 0;
  transition: transform var(--mysa-transition), color var(--mysa-transition);
}
.mysa-article-list__link:hover .mysa-article-list__chevron {
  color: var(--mysa-blue);
  transform: translateX(2px);
}

.mysa-release-month-nav {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-4);
  margin: calc(var(--mysa-space-3) * -1) 0 var(--mysa-space-6);
  padding: var(--mysa-space-5);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background: var(--mysa-neutral-50);
}

.mysa-release-month-nav[hidden] {
  display: none;
}

.mysa-release-month-nav__header {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
}

.mysa-release-month-nav__title {
  margin: 0;
  color: var(--mysa-neutral-900);
  font-size: var(--mysa-text-lg);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
}

.mysa-release-month-nav__desc {
  margin: 0;
  color: var(--mysa-neutral-500);
  font-size: var(--mysa-text-sm);
  line-height: var(--mysa-leading-snug);
}

.mysa-release-month-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mysa-space-2);
}

.mysa-release-month-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--mysa-space-3);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-full);
  background: white;
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--mysa-transition), color var(--mysa-transition), box-shadow var(--mysa-transition);
}

.mysa-release-month-nav__link:hover {
  border-color: var(--mysa-blue);
  color: var(--mysa-blue);
  box-shadow: var(--mysa-shadow-sm);
}


/* === 11. COLLECTION HEADER + SEARCH CTA ================================== */
.mysa-collection-header {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
  margin-bottom: var(--mysa-space-8);
}

.mysa-collection-header__title {
  font-size: var(--mysa-text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mysa-neutral-900);
  margin: 0;
  line-height: var(--mysa-leading-tight);
}

.mysa-collection-header__desc {
  font-size: var(--mysa-text-lg);
  color: var(--mysa-neutral-600);
  max-width: 42rem;
  margin: 0;
}

@media (min-width: 768px) {
  .mysa-collection-header__title { font-size: var(--mysa-text-4xl); }
}

/* === 11a. RELEASE NOTES COLLECTION ====================================== */
.mysa-release-notes {
  gap: var(--mysa-space-10) !important;
}

.mysa-release-notes__crumbs {
  margin-bottom: calc(var(--mysa-space-4) * -1);
}

.mysa-release-notes__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mysa-space-6);
  align-items: center;
  padding: var(--mysa-space-8);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-2xl);
  background:
    radial-gradient(circle at top right, rgba(21, 103, 212, 0.12), transparent 34rem),
    linear-gradient(135deg, #ffffff 0%, var(--mysa-neutral-50) 100%);
  box-shadow: var(--mysa-shadow-sm);
}

@media (min-width: 768px) {
  .mysa-release-notes__hero {
    grid-template-columns: minmax(0, 1fr) 15rem;
    padding: var(--mysa-space-10);
  }
}

.mysa-release-notes__hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
}

.mysa-release-notes__eyebrow {
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mysa-blue);
}

.mysa-release-notes__title {
  margin: 0;
  max-width: 44rem;
  font-size: var(--mysa-text-4xl);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: var(--mysa-leading-tight);
  color: var(--mysa-neutral-900);
}

@media (min-width: 768px) {
  .mysa-release-notes__title {
    font-size: var(--mysa-text-5xl);
  }
}

.mysa-release-notes__desc {
  margin: 0;
  max-width: 42rem;
  color: var(--mysa-neutral-600);
  font-size: var(--mysa-text-lg);
  line-height: var(--mysa-leading-relaxed);
}

.mysa-release-notes__hero-card {
  display: none;
}

@media (min-width: 768px) {
  .mysa-release-notes__hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mysa-space-3);
    min-height: 12rem;
    border: 1px solid rgba(21, 103, 212, 0.18);
    border-radius: var(--mysa-radius-2xl);
    background-color: #ffffff;
    color: var(--mysa-blue);
    box-shadow: var(--mysa-shadow-sm);
  }
}

.mysa-release-notes__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--mysa-radius-xl);
  background-color: var(--mysa-blue-50);
}

.mysa-release-notes__hero-icon svg {
  width: 2rem;
  height: 2rem;
}

.mysa-release-notes__hero-label {
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
  font-weight: 700;
}

.mysa-release-notes__search {
  margin-top: calc(var(--mysa-space-2) * -1);
}

.mysa-release-notes__archive-header {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
}

.mysa-release-notes__section {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-5);
}

.mysa-release-notes__section-header {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-2);
}

.mysa-release-notes__section-title {
  margin: 0;
  color: var(--mysa-neutral-900);
  font-size: var(--mysa-text-2xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: var(--mysa-leading-tight);
}

.mysa-release-summary-grid,
.mysa-release-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-4);
}

@media (min-width: 768px) {
  .mysa-release-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mysa-release-summary-card,
.mysa-release-category-card {
  display: flex;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-xl);
  background-color: #ffffff;
  box-shadow: var(--mysa-shadow-sm);
  transition:
    border-color var(--mysa-transition),
    box-shadow var(--mysa-transition),
    transform var(--mysa-transition);
}

.mysa-release-summary-card:hover,
.mysa-release-category-card:hover {
  border-color: var(--mysa-neutral-300);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}

.mysa-release-summary-card {
  flex-direction: column;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-6);
}

.mysa-release-summary-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 var(--mysa-space-3);
  border-radius: var(--mysa-radius-full);
  background-color: var(--mysa-blue-50);
  color: var(--mysa-blue);
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mysa-release-summary-card__title {
  color: var(--mysa-neutral-900);
  font-size: var(--mysa-text-2xl);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: var(--mysa-leading-snug);
}

.mysa-release-summary-card__meta {
  color: var(--mysa-neutral-500);
  font-size: var(--mysa-text-sm);
}

.mysa-release-category-card {
  align-items: center;
  gap: var(--mysa-space-4);
  padding: var(--mysa-space-5);
}

.mysa-release-category-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: var(--mysa-radius-lg);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-blue);
}

.mysa-release-category-card__icon img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.mysa-release-category-card__icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.mysa-release-category-card__icon-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.mysa-release-category-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--mysa-space-1);
}

.mysa-release-category-card__title {
  color: var(--mysa-neutral-900);
  font-size: var(--mysa-text-lg);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
}

.mysa-release-category-card__desc,
.mysa-release-category-card__count {
  color: var(--mysa-neutral-500);
  font-size: var(--mysa-text-sm);
  line-height: var(--mysa-leading-snug);
}

.mysa-release-category-card__count {
  font-weight: 600;
}

.mysa-release-archive-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--mysa-neutral-200);
}

.mysa-release-archive-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mysa-space-4);
  padding: var(--mysa-space-5) var(--mysa-space-4);
  border-bottom: 1px solid var(--mysa-neutral-200);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--mysa-transition);
}

.mysa-release-archive-card:hover {
  background-color: var(--mysa-neutral-50);
  color: inherit;
}

.mysa-release-archive-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.75rem;
  height: 1.6rem;
  padding: 0 var(--mysa-space-3);
  border-radius: var(--mysa-radius-full);
  background-color: var(--mysa-blue-50);
  color: var(--mysa-blue);
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mysa-release-archive-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mysa-neutral-900);
  font-size: var(--mysa-text-base);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
  white-space: nowrap;
}

.mysa-release-archive-card__chevron {
  color: var(--mysa-neutral-400);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--mysa-transition), color var(--mysa-transition);
}

.mysa-release-archive-card:hover .mysa-release-archive-card__chevron {
  color: var(--mysa-blue);
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .mysa-release-archive-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mysa-release-archive-card__badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* === 12. BREADCRUMBS ===================================================== */
.mysa-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mysa-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
}

.mysa-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mysa-space-1);
}

.mysa-crumbs__link {
  color: var(--mysa-neutral-500);
  text-decoration: none;
  transition: color var(--mysa-transition);
}
.mysa-crumbs__link:hover {
  color: var(--mysa-neutral-800);
}

.mysa-crumbs__sep {
  color: var(--mysa-neutral-400);
  user-select: none;
}
.mysa-crumbs__sep::before {
  content: "›";
}

.mysa-crumbs__current {
  color: var(--mysa-neutral-800);
  font-weight: 500;
}

/* Pylon's .Breadcrumbs already terminates with the current page entry. */
/* Style the last item as the current/non-link state so templates don't */
/* need to render a trailing __current span (which used to duplicate). */
.mysa-crumbs > li:last-child .mysa-crumbs__link {
  color: var(--mysa-neutral-800);
  font-weight: 500;
  pointer-events: none;
}
.mysa-crumbs > li:last-child .mysa-crumbs__link:hover {
  color: var(--mysa-neutral-800);
}


/* === 13. ARTICLE PAGE (TOC + body) ======================================= */
.mysa-article-search {
  margin-bottom: var(--mysa-space-5);
}

.mysa-article-search + nav[aria-label="Breadcrumb"] {
  margin-top: var(--mysa-space-4);
  margin-bottom: var(--mysa-space-7);
}

.mysa-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-8);
}

.mysa-article__main {
  min-width: 0;
}

.mysa-article__header {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
  margin-bottom: var(--mysa-space-8);
}

.mysa-article__title {
  font-size: var(--mysa-text-3xl);
  font-weight: 700;
  line-height: var(--mysa-leading-tight);
  letter-spacing: -0.02em;
  color: var(--mysa-neutral-900);
  margin: 0;
}

@media (min-width: 768px) {
  .mysa-article__title { font-size: var(--mysa-text-4xl); }
}

.mysa-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mysa-space-4);
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
}

.mysa-article__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--mysa-space-1);
}

.mysa-toc {
  margin-bottom: var(--mysa-space-6);
}

.mysa-toc__title {
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mysa-neutral-500);
  margin-bottom: var(--mysa-space-3);
}

.mysa-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  border-left: 2px solid var(--mysa-neutral-200);
}

.mysa-toc__link {
  display: block;
  padding: var(--mysa-space-1) var(--mysa-space-3);
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--mysa-transition),
              border-color var(--mysa-transition);
  line-height: var(--mysa-leading-snug);
}
.mysa-toc #kb-toc nav {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  border-left: 2px solid var(--mysa-neutral-200);
}
.mysa-toc .kb-toc-item {
  display: block;
  padding-top: var(--mysa-space-1);
  padding-bottom: var(--mysa-space-1);
  padding-right: var(--mysa-space-3);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--mysa-neutral-600);
  text-decoration: none;
  font-size: var(--mysa-text-sm);
  line-height: var(--mysa-leading-snug);
  transition: color var(--mysa-transition),
              border-color var(--mysa-transition);
}
.mysa-toc__link:hover {
  color: var(--mysa-neutral-900);
}
.mysa-toc .kb-toc-item:hover {
  color: var(--mysa-neutral-900);
}
.mysa-toc__link--active,
.mysa-toc__link[aria-current="true"] {
  color: var(--mysa-blue);
  border-left-color: var(--mysa-blue);
  font-weight: 500;
}
.mysa-toc .kb-toc-item.active {
  color: var(--mysa-blue);
  border-left-color: var(--mysa-blue);
  font-weight: 500;
}

.mysa-toc__item--level-3 .mysa-toc__link { padding-left: var(--mysa-space-5); }
.mysa-toc__item--level-4 .mysa-toc__link { padding-left: var(--mysa-space-7); }

@media (min-width: 1024px) {
  .mysa-article {
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--mysa-space-10);
    align-items: start;
  }
  .mysa-toc {
    position: sticky;
    top: 6rem;
    align-self: start;
    margin-bottom: 0;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

/* Article body — typography for raw Pylon-rendered ArticleHTML; descendant selectors only. */
.mysa-article__body {
  font-size: var(--mysa-text-base);
  line-height: var(--mysa-leading-relaxed);
  color: var(--mysa-neutral-800);
  max-width: 44rem;
}

.mysa-article__body #kb-article-body:empty {
  display: none;
}

.mysa-article__body:has(#kb-article-body:not(:empty))
  .kb-article-body-placeholder {
  display: none;
}

/* Native Pylon sidebar widgets inside our Mysa sidebar. */
.mysa-toc #kb-toc:empty,
.mysa-toc #kb-feedback:empty {
  display: none;
}

.mysa-toc #kb-feedback,
.mysa-toc .kb-related-articles,
.mysa-toc .kb-related-issues {
  margin-top: var(--mysa-space-6);
}

.mysa-toc .kb-related-articles,
.mysa-toc .kb-related-issues-details,
.mysa-toc .kb-feedback {
  border-radius: var(--mysa-radius-lg);
  background-color: var(--mysa-neutral-50);
}

.mysa-toc .kb-related-articles {
  padding: var(--mysa-space-5);
}

.mysa-toc .kb-related-articles-title,
.mysa-toc .kb-related-issues-title,
.mysa-toc .kb-feedback-title {
  margin: 0 0 var(--mysa-space-3);
  font-size: var(--mysa-text-base);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
  color: var(--mysa-neutral-900);
}

.mysa-toc .kb-related-article-link {
  display: block;
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
  line-height: var(--mysa-leading-snug);
  text-decoration: none;
}

.mysa-toc .kb-related-article-link + .kb-related-article-link {
  margin-top: var(--mysa-space-2);
}

.mysa-toc .kb-related-article-link:hover {
  color: var(--mysa-neutral-900);
}

.mysa-toc .kb-related-issues-details {
  padding: 0;
  overflow: hidden;
}

.mysa-toc .kb-related-issues-header {
  list-style: none;
  cursor: pointer;
  padding: var(--mysa-space-4) var(--mysa-space-5);
}

.mysa-toc .kb-related-issues-header::-webkit-details-marker {
  display: none;
}

.mysa-toc .kb-related-issues-title-row,
.mysa-toc .kb-related-issues-badge {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-2);
}

.mysa-toc .kb-related-issues-title-row {
  justify-content: space-between;
}

.mysa-toc .kb-related-issues-title {
  margin: 0;
}

.mysa-toc .kb-related-issues-badge {
  margin-top: var(--mysa-space-2);
  color: var(--mysa-neutral-500);
  font-size: var(--mysa-text-xs);
}

.mysa-toc .kb-related-issues-list {
  padding: 0 var(--mysa-space-5) var(--mysa-space-4);
}

.mysa-toc .kb-related-issue-card {
  padding: var(--mysa-space-3) 0;
  border-top: 1px solid var(--mysa-neutral-200);
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-700);
}

.mysa-toc .kb-related-issue-card-header {
  display: flex;
  gap: var(--mysa-space-2);
}

.mysa-toc .kb-related-issue-account-logo {
  width: 24px;
  height: 24px;
  border-radius: var(--mysa-radius-sm);
  flex-shrink: 0;
}

.mysa-toc .kb-related-issue-card-title-row {
  display: flex;
  gap: var(--mysa-space-2);
  align-items: baseline;
  flex-wrap: wrap;
}

.mysa-toc .kb-related-issue-account-name {
  font-weight: 600;
  color: var(--mysa-neutral-900);
}

.mysa-toc .kb-related-issue-ticket-number,
.mysa-toc .kb-related-issue-requester,
.mysa-toc .kb-related-issue-closed {
  color: var(--mysa-neutral-500);
  font-size: var(--mysa-text-xs);
}

.mysa-toc .kb-related-issue-body {
  margin-top: var(--mysa-space-2);
  line-height: var(--mysa-leading-snug);
}

.mysa-toc .kb-related-issues-view-all {
  display: block;
  padding: var(--mysa-space-3) var(--mysa-space-5) var(--mysa-space-4);
  border-top: 1px solid var(--mysa-neutral-200);
  color: var(--mysa-blue);
  text-decoration: none;
  font-size: var(--mysa-text-sm);
  font-weight: 600;
}

.mysa-toc .kb-feedback {
  padding: var(--mysa-space-5);
  text-align: center;
}

.mysa-toc .kb-feedback-scores {
  display: flex;
  justify-content: center;
  gap: var(--mysa-space-2);
}

.mysa-toc .kb-feedback-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--mysa-radius-full);
  background-color: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

.mysa-toc .kb-feedback-score:hover,
.mysa-toc .kb-feedback-score.selected {
  background-color: #ffffff;
}

.mysa-toc .kb-feedback-form {
  margin-top: var(--mysa-space-4);
  text-align: left;
}

.mysa-toc .kb-feedback-label {
  margin-bottom: var(--mysa-space-2);
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
  font-weight: 600;
}

.mysa-toc .kb-feedback-textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--mysa-neutral-300);
  border-radius: var(--mysa-radius-md);
  padding: var(--mysa-space-3);
  font: inherit;
  font-size: var(--mysa-text-sm);
}

.mysa-toc .kb-feedback-actions {
  margin-top: var(--mysa-space-3);
}

.mysa-toc .kb-feedback-submit {
  border: 0;
  border-radius: var(--mysa-radius-full);
  padding: var(--mysa-space-2) var(--mysa-space-4);
  background-color: var(--mysa-blue);
  color: #ffffff;
  font: inherit;
  font-size: var(--mysa-text-sm);
  font-weight: 700;
  cursor: pointer;
}

.mysa-toc .kb-feedback-thanks {
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
}

.mysa-article__body > * + * {
  margin-top: var(--mysa-space-5);
}

.mysa-article__body h2 {
  font-size: var(--mysa-text-2xl);
  font-weight: 700;
  line-height: var(--mysa-leading-snug);
  letter-spacing: -0.015em;
  color: var(--mysa-neutral-900);
  margin-top: var(--mysa-space-12);
  scroll-margin-top: 6rem;
}

.mysa-article__body h3 {
  font-size: var(--mysa-text-xl);
  font-weight: 600;
  line-height: var(--mysa-leading-snug);
  color: var(--mysa-neutral-900);
  margin-top: var(--mysa-space-10);
  scroll-margin-top: 6rem;
}

.mysa-article__body h4 {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  line-height: var(--mysa-leading-snug);
  color: var(--mysa-neutral-800);
  margin-top: var(--mysa-space-8);
  scroll-margin-top: 6rem;
}

.mysa-article__body p {
  color: var(--mysa-neutral-700);
}

.mysa-article__body strong {
  color: var(--mysa-neutral-900);
  font-weight: 600;
}

.mysa-article__body a {
  color: var(--mysa-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mysa-article__body a:hover {
  color: var(--mysa-blue-hover);
  text-decoration-thickness: 2px;
}

.mysa-article__body ul,
.mysa-article__body ol {
  padding-left: var(--mysa-space-6);
  color: var(--mysa-neutral-700);
}
.mysa-article__body ul { list-style: disc; }
.mysa-article__body ol { list-style: decimal; }
.mysa-article__body li + li { margin-top: var(--mysa-space-2); }
.mysa-article__body li::marker { color: var(--mysa-neutral-400); }

.mysa-article__body img {
  border-radius: var(--mysa-radius-lg);
  border: 1px solid var(--mysa-neutral-200);
  margin-block: var(--mysa-space-6);
}

.mysa-article__body code {
  font-family: var(--mysa-font-mono);
  font-size: 0.9em;
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-800);
  padding: 0.15em 0.4em;
  border-radius: var(--mysa-radius-sm);
}

.mysa-article__body pre {
  font-family: var(--mysa-font-mono);
  font-size: var(--mysa-text-sm);
  line-height: var(--mysa-leading-normal);
  background-color: var(--mysa-neutral-900);
  color: var(--mysa-neutral-100);
  padding: var(--mysa-space-5);
  border-radius: var(--mysa-radius-lg);
  overflow-x: auto;
}
.mysa-article__body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.mysa-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mysa-text-sm);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  overflow: hidden;
}
.mysa-article__body th,
.mysa-article__body td {
  padding: var(--mysa-space-3) var(--mysa-space-4);
  text-align: left;
  border-bottom: 1px solid var(--mysa-neutral-200);
}
.mysa-article__body th {
  background-color: var(--mysa-neutral-50);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}
.mysa-article__body tr:last-child td { border-bottom: 0; }

.mysa-article__body hr {
  border: 0;
  border-top: 1px solid var(--mysa-neutral-200);
  margin-block: var(--mysa-space-10);
}


/* 14. Callouts — every blockquote is a soft card; scripts.html upgrades */
/* "Tip:" / "Note:" / "Warning:" prefixes to colored modifier variants. */
.mysa-article__body blockquote {
  margin: var(--mysa-space-6) 0;
  padding: var(--mysa-space-5) var(--mysa-space-6);
  border-left: 4px solid var(--mysa-blue);
  background-color: var(--mysa-blue-50);
  border-radius: var(--mysa-radius-md);
  color: var(--mysa-neutral-800);
}
.mysa-article__body blockquote > :first-child { margin-top: 0; }
.mysa-article__body blockquote > :last-child { margin-bottom: 0; }
.mysa-article__body blockquote p { color: inherit; }
.mysa-article__body blockquote strong { color: var(--mysa-neutral-900); }

.mysa-callout {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-2);
  padding: var(--mysa-space-5) var(--mysa-space-6);
  border-radius: var(--mysa-radius-lg);
  border-left: 4px solid var(--mysa-blue);
  background-color: var(--mysa-blue-50);
  margin: var(--mysa-space-6) 0;
}
.mysa-callout__label {
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mysa-blue);
}
.mysa-callout--note {
  border-left-color: var(--mysa-neutral-500);
  background-color: var(--mysa-neutral-100);
}
.mysa-callout--note .mysa-callout__label { color: var(--mysa-neutral-700); }

.mysa-callout--warning {
  border-left-color: var(--mysa-warning);
  background-color: #fff4ed;
}
.mysa-callout--warning .mysa-callout__label { color: #b54708; }

.mysa-callout--success {
  border-left-color: var(--mysa-success);
  background-color: #ecfdf3;
}
.mysa-callout--success .mysa-callout__label { color: #15803d; }

.mysa-callout--error {
  border-left-color: var(--mysa-error);
  background-color: #fef2f2;
}
.mysa-callout--error .mysa-callout__label { color: #b91c1c; }

/* Pylon NATIVE callout block — restored to Pylon's stock styling. */
/* Pylon's rich-text editor emits a callout as */
/* <div class="EditorCallout" data-color="…"> after hydration, and as */
/* <div data-type="callout" data-color="…"> in the SSR placeholder. The rules */
/* below mirror Pylon's default theme verbatim, scoped exactly as Pylon scopes */
/* them: .kb-article-body for the hydrated tree and .kb-article-body-placeholder */
/* for the SSR output. The only deviation is that the default (no data-color) */
/* callout maps Pylon's --neutral-* tokens to this theme's --mysa-neutral-* */
/* parity values, since the bare --neutral-* aliases aren't defined here. */
.kb-article-body .EditorCallout {
  display: flex;
  gap: 12px;
  margin-top: var(--mysa-space-6);
  border-radius: 8px;
  border: 1px solid var(--mysa-neutral-200);
  padding: 16px;
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
}

.kb-article-body .EditorCallout[data-color="blue"] {
  border-color: #bfdbfe;
  background-color: rgba(219, 234, 254, 0.7);
  color: #1e3a5f;
}

.kb-article-body .EditorCallout[data-color="red"] {
  border-color: #fecaca;
  background-color: rgba(254, 226, 226, 0.7);
  color: #7f1d1d;
}

.kb-article-body .EditorCallout[data-color="orange"] {
  border-color: #fed7aa;
  background-color: rgba(255, 237, 213, 0.7);
  color: #7c2d12;
}

.kb-article-body .EditorCallout[data-color="yellow"] {
  border-color: #fde68a;
  background-color: rgba(254, 249, 195, 0.3);
  color: #713f12;
}

.kb-article-body .EditorCallout[data-color="green"] {
  border-color: #bbf7d0;
  background-color: rgba(220, 252, 231, 0.5);
  color: #14532d;
}

.kb-article-body .EditorCallout[data-color="indigo"] {
  border-color: #c7d2fe;
  background-color: rgba(224, 231, 255, 0.7);
  color: #312e81;
}

.kb-article-body .EditorCallout[data-color="purple"] {
  border-color: #e9d5ff;
  background-color: rgba(243, 232, 255, 0.7);
  color: #581c87;
}

.kb-article-body .EditorCallout[data-color] .EditorCallout-content p,
.kb-article-body .EditorCallout[data-color] .EditorCallout-content blockquote,
.kb-article-body .EditorCallout[data-color] .EditorCallout-content li {
  color: inherit;
}

.kb-article-body .EditorCallout-icon {
  flex-shrink: 0;
  margin-top: 3px;
  display: flex;
  align-items: flex-start;
  width: 18px;
  height: 18px;
}

.kb-article-body .EditorCallout-icon svg {
  width: 18px;
  height: 18px;
}

.kb-article-body .EditorCallout-content {
  min-width: 0;
  flex: 1;
}

/* Callout SSR placeholder (before islands hydrate, renderHTML output has no */
/* .EditorCallout class). Scoped to .kb-article-body-placeholder so it does not */
/* style the TipTap NodeViewWrapper after hydration. */
.kb-article-body-placeholder div[data-type="callout"] {
  margin-top: var(--mysa-space-6);
  border-radius: 8px;
  border: 1px solid var(--mysa-neutral-200);
  padding: 16px;
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
}

.kb-article-body-placeholder div[data-type="callout"][data-color="blue"] {
  border-color: #bfdbfe;
  background-color: rgba(219, 234, 254, 0.7);
  color: #1e3a5f;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="red"] {
  border-color: #fecaca;
  background-color: rgba(254, 226, 226, 0.7);
  color: #7f1d1d;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="orange"] {
  border-color: #fed7aa;
  background-color: rgba(255, 237, 213, 0.7);
  color: #7c2d12;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="yellow"] {
  border-color: #fde68a;
  background-color: rgba(254, 249, 195, 0.3);
  color: #713f12;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="green"] {
  border-color: #bbf7d0;
  background-color: rgba(220, 252, 231, 0.5);
  color: #14532d;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="indigo"] {
  border-color: #c7d2fe;
  background-color: rgba(224, 231, 255, 0.7);
  color: #312e81;
}

.kb-article-body-placeholder div[data-type="callout"][data-color="purple"] {
  border-color: #e9d5ff;
  background-color: rgba(243, 232, 255, 0.7);
  color: #581c87;
}


/* === 15. ARTICLE FEEDBACK + PREV / NEXT ================================== */
.mysa-article__feedback {
  margin-top: var(--mysa-space-12);
  padding: var(--mysa-space-6);
  background-color: var(--mysa-neutral-50);
  border-radius: var(--mysa-radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-4);
  align-items: flex-start;
}
.mysa-article__feedback-prompt {
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-800);
}
.mysa-article__feedback-actions {
  display: flex;
  gap: var(--mysa-space-2);
}
.mysa-article__feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mysa-space-2);
  padding: var(--mysa-space-2) var(--mysa-space-4);
  border: 1px solid var(--mysa-neutral-300);
  border-radius: var(--mysa-radius-full);
  background-color: #ffffff;
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-sm);
  font-weight: 500;
  transition: background-color var(--mysa-transition),
              border-color var(--mysa-transition),
              color var(--mysa-transition);
}
.mysa-article__feedback-btn:hover {
  border-color: var(--mysa-blue);
  color: var(--mysa-blue);
  background-color: var(--mysa-blue-50);
}

.mysa-article__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-4);
  margin-top: var(--mysa-space-12);
  padding-top: var(--mysa-space-8);
  border-top: 1px solid var(--mysa-neutral-200);
}
@media (min-width: 768px) {
  .mysa-article__nav { grid-template-columns: 1fr 1fr; }
}

.mysa-article__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  padding: var(--mysa-space-5);
  background-color: #ffffff;
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-article__nav-link:hover {
  border-color: var(--mysa-blue);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}
.mysa-article__nav-link--next {
  text-align: right;
  align-items: flex-end;
}

.mysa-article__nav-direction {
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mysa-neutral-500);
}
.mysa-article__nav-title {
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}


/* === 16. FOOTER ========================================================== */
.mysa-footer {
  background-color: var(--mysa-neutral-900);
  color: var(--mysa-neutral-300);
  padding-block: var(--mysa-space-16) var(--mysa-space-8);
  margin-top: var(--mysa-space-20);
}

.mysa-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-10);
}

.mysa-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-4);
}
.mysa-footer__brand img,
.mysa-footer__logo {
  height: 32px;
  max-height: 32px;
  max-width: 180px;
  width: auto;
  display: block;
  object-fit: contain;
}
.mysa-footer__tagline {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-400);
  max-width: 22rem;
}

.mysa-footer__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mysa-space-8);
}

.mysa-footer__section-title {
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--mysa-space-4);
}

.mysa-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
}
.mysa-footer__links a {
  color: var(--mysa-neutral-300);
  font-size: var(--mysa-text-sm);
  text-decoration: none;
  transition: color var(--mysa-transition);
}
.mysa-footer__links a:hover {
  color: #ffffff;
}

.mysa-footer__bottom {
  margin-top: var(--mysa-space-12);
  padding-top: var(--mysa-space-6);
  border-top: 1px solid var(--mysa-neutral-700);
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.mysa-footer__copyright {
  font-size: var(--mysa-text-xs);
  color: var(--mysa-neutral-500);
}

.mysa-footer__social {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mysa-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mysa-radius-full);
  color: var(--mysa-neutral-300);
  background-color: rgba(255, 255, 255, 0.04);
  transition: background-color var(--mysa-transition),
              color var(--mysa-transition);
}
.mysa-footer__social a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.mysa-footer__social svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .mysa-footer__sections {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mysa-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .mysa-footer__grid {
    grid-template-columns: 1fr 2fr;
    gap: var(--mysa-space-16);
  }
}


/* === 17. FOCUS + REDUCED MOTION ========================================== */
:where(a, button, [role="button"], input, select, textarea, summary, .mysa-btn,
       .mysa-nav__icon-btn, .mysa-product-card, .mysa-article-list__link,
       .mysa-release-month-nav__link,
       .mysa-article__nav-link, .mysa-toc__link):focus-visible {
  outline: 2px solid var(--mysa-blue);
  outline-offset: 2px;
  border-radius: var(--mysa-radius-md);
}

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


/* 18. Responsive breakpoints — sm 640, md 768 (type/nav), lg 1024 (TOC sidebar), xl 1280. */

@media (min-width: 1280px) {
  .mysa-hero__content { padding-block: var(--mysa-space-10); }
  .mysa-section { padding-block: var(--mysa-space-20); }
}


/* 19. Assembly supplement — additional classes referenced by markup. */

/* Skip link (navbar). */
.mysa-skip-link {
  position: absolute;
  top: var(--mysa-space-2);
  left: var(--mysa-space-2);
  z-index: 100;
  padding: var(--mysa-space-2) var(--mysa-space-4);
  background-color: var(--mysa-blue);
  color: #ffffff;
  border-radius: var(--mysa-radius-md);
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--mysa-transition);
}
.mysa-skip-link:focus,
.mysa-skip-link:focus-visible {
  transform: translateY(0);
  color: #ffffff;
}

/* Navbar mobile drawer + language label. */
.mysa-nav__lang {
  width: auto;
  padding: 0 var(--mysa-space-3);
  gap: var(--mysa-space-2);
}
.mysa-nav__lang-label {
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mysa-nav__mobile {
  margin-top: var(--mysa-space-2);
  padding: var(--mysa-space-4) var(--mysa-space-5);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--mysa-radius-lg);
  box-shadow: var(--mysa-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-4);
}
.mysa-nav__mobile[hidden] {
  display: none;
}

.mysa-nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
}
.mysa-nav__mobile-list + .mysa-nav__mobile-list {
  padding-top: var(--mysa-space-3);
  border-top: 1px solid var(--mysa-neutral-200);
}

.mysa-nav__mobile-link {
  display: block;
  padding: var(--mysa-space-2) var(--mysa-space-3);
  border-radius: var(--mysa-radius-md);
  color: var(--mysa-neutral-800);
  font-size: var(--mysa-text-base);
  font-weight: 500;
  text-decoration: none;
}
.mysa-nav__mobile-link:hover {
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-900);
}

@media (min-width: 1024px) {
  .mysa-nav__menu-toggle { display: none; }
  .mysa-nav__mobile { display: none !important; }
}

/* Hero variants — image/color are marker classes (background set inline by */
/* the layout). Default renders the brand gradient. Dark-text swaps copy color. */
.mysa-hero--default {
  background-image: linear-gradient(135deg, var(--mysa-blue) 0%, var(--mysa-blue-hover) 100%);
}

.mysa-hero--dark-text {
  color: var(--mysa-neutral-900);
}
.mysa-hero--dark-text .mysa-hero__title { color: var(--mysa-neutral-900); }
.mysa-hero--dark-text .mysa-hero__subtitle { color: var(--mysa-neutral-700); }
.mysa-hero--dark-text .mysa-hero__eyebrow { color: var(--mysa-neutral-600); }

/* Photo hero — full-bleed editorial lifestyle band used by the homepage to */
/* mirror help.getmysa.com. Pairs .mysa-hero__media (absolutely positioned */
/* <img>) with .mysa-hero__overlay (vertical scrim, defined in section 8) */
/* so white copy reads against any subject. Sizing intentionally mirrors */
/* .mysa-product-hero so the homepage and product-page bands feel uniform. */
/* Specificity-bumped chained selector (.mysa-hero.mysa-hero--photo) so the */
/* sizing wins over .mysa-hero { min-height: 42vh } in the >=768px media */
/* query, regardless of source order. */
.mysa-hero.mysa-hero--photo {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: clamp(28rem, 50vw, 42rem);
  padding-bottom: var(--mysa-space-6);
  background-color: var(--mysa-neutral-900);
}
.mysa-hero.mysa-hero--photo .mysa-hero__media img {
  object-position: center center;
}
.mysa-hero.mysa-hero--photo .mysa-hero__content {
  align-items: center;
  text-align: center;
}
.mysa-hero.mysa-hero--photo .mysa-hero__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .mysa-hero.mysa-hero--photo {
    padding-bottom: var(--mysa-space-8);
  }
}

/* Empty state. */
.mysa-empty {
  font-size: var(--mysa-text-base);
  color: var(--mysa-neutral-500);
  font-style: italic;
  margin: var(--mysa-space-6) 0;
}

/* Article related section + body wrapper. */
.mysa-article__related {
  margin-top: var(--mysa-space-12);
  padding-top: var(--mysa-space-8);
  border-top: 1px solid var(--mysa-neutral-200);
}
.mysa-article__related > h2 {
  font-size: var(--mysa-text-2xl);
  font-weight: 700;
  color: var(--mysa-neutral-900);
  margin-bottom: var(--mysa-space-4);
}

/* Heading anchor — scripts.html inserts these into article headings. */
.mysa-heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--mysa-space-2);
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  border-radius: var(--mysa-radius-md);
  color: var(--mysa-neutral-400);
  opacity: 0;
  text-decoration: none;
  transition: opacity var(--mysa-transition),
              background-color var(--mysa-transition),
              color var(--mysa-transition);
  position: relative;
}
.mysa-article__body h2:hover .mysa-heading-anchor,
.mysa-article__body h3:hover .mysa-heading-anchor,
.mysa-article__body h4:hover .mysa-heading-anchor,
.mysa-heading-anchor:focus,
.mysa-heading-anchor:focus-visible {
  opacity: 1;
}
.mysa-heading-anchor:hover {
  background-color: var(--mysa-blue-50);
  color: var(--mysa-blue);
}

.mysa-heading-anchor__tooltip {
  position: absolute;
  top: -1.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--mysa-space-1) var(--mysa-space-2);
  background-color: var(--mysa-neutral-900);
  color: #ffffff;
  font-size: var(--mysa-text-xs);
  font-weight: 500;
  border-radius: var(--mysa-radius-sm);
  white-space: nowrap;
  pointer-events: none;
}

/* Footer supplemental classes. */
.mysa-footer__inner {
  /* selector hook only — padding inherited from .mysa-container/.mysa-footer */
}

.mysa-footer__wordmark {
  font-size: var(--mysa-text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.mysa-footer__col {
  display: flex;
  flex-direction: column;
}

.mysa-footer__copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mysa-space-2);
}

.mysa-footer__legal {
  color: var(--mysa-neutral-300);
  font-size: var(--mysa-text-xs);
  text-decoration: none;
  transition: color var(--mysa-transition);
}
.mysa-footer__legal:hover {
  color: #ffffff;
}

.mysa-footer__legal-sep {
  color: var(--mysa-neutral-600);
}


/* 20. Pylon search mount hardening — defensive sizing for the SVG icon Pylon */
/* drops into #kb-search before its widget JS hydrates. Without these rules */
/* the default magnifying-glass renders at intrinsic size (viewport-filling) */
/* and the input stacks below it instead of sitting alongside. */
#kb-search,
#kb-search * {
  box-sizing: border-box;
}

/* Adopt Pylon's stock search layout verbatim — icon is absolutely */
/* positioned at the left of #kb-search, and the input has padding-left to */
/* leave room for it. This is the structure Pylon's hydration expects. */
#kb-search {
  position: relative;
  width: 100%;
}

.mysa-search-mount--hero:focus-within {
  box-shadow: var(--mysa-shadow-lg), 0 0 0 3px rgba(21, 103, 212, 0.18);
}

.kb-search-icon {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: var(--mysa-neutral-500);
}

.kb-search-icon svg {
  width: 20px;
  height: 20px;
}

.KnowledgeBaseSearchInput {
  font-size: 14px;
  height: 44px;
  width: 100%;
  padding-left: 38px;
  padding-right: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  outline: none;
  background: var(--neutral-base);
  font-family: inherit;
  color: var(--neutral-900);
  transition: border-color var(--mysa-transition),
              box-shadow var(--mysa-transition);
}

.KnowledgeBaseSearchInput:hover {
  border-color: var(--mysa-neutral-400);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
}

.KnowledgeBaseSearchInput:focus {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  border: 1px solid transparent;
  outline-offset: 0px;
  outline: 1px solid var(--primaryColor, var(--mysa-blue));
}

.KnowledgeBaseSearchInput::placeholder {
  color: var(--neutral-500, var(--mysa-neutral-500));
}

/* Pylon's hydration only injects children into #kb-search-results when */
/* there's an active query. An empty #kb-search-results would otherwise */
/* render as an empty white box below the search input on first paint;  */
/* :empty hides it until results stream in. */
#kb-search-results:empty {
  display: none;
}

/* Hide the homepage / collection content while a search is active so the */
/* results panel isn't competing with cards behind it. Pylon's sibling   */
/* "kb-homepage-content" stays in the DOM and we suppress it via :has(). */
.kb-content-wrapper:has(#kb-search-results .kb-search-results-wrapper)
  .kb-homepage-content {
  display: none;
}

/* Variable that Pylon's stock CSS expects for the neutral-500 token. */
:root {
  --neutral-500: var(--mysa-neutral-500);
}

/* Pylon's hydrated results widget. Source-of-truth class names extracted */
/* from Pylon's kb-islands bundle (function components qme/the/nhe). The */
/* rendered tree looks like this when results exist:                     */
/*                                                                       */
/*   #kb-search-results                                                  */
/*     .kb-search-results-wrapper                                        */
/*       .kb-search-results-list                                         */
/*         .kb-ask-ai             (AI summary card; optional)            */
/*           .kb-ask-ai-header    (sparkle svg + "Ask AI" label)         */
/*           .kb-ask-ai-body      (.--clamped when collapsed)            */
/*             .kb-ask-ai-title                                          */
/*             .kb-ask-ai-response                                       */
/*               .kb-sources-chip-wrapper > .kb-sources-chip             */
/*             .kb-ask-ai-feedback                                       */
/*               .kb-ask-ai-feedback-btn × 2                             */
/*           .kb-ask-ai-toggle                                           */
/*         a.kb-search-result-item × N                                   */
/*           .kb-search-result-breadcrumbs                               */
/*             <svg>folder</svg>                                         */
/*             .kb-search-result-breadcrumb-segment × N                  */
/*               .kb-search-result-breadcrumb-link                       */
/*             .kb-search-result-badge (optional)                        */
/*           .kb-search-result-title                                     */
/*           .kb-search-result-highlight (optional)                      */
/*       .kb-search-filter         (right sidebar)                       */
/*         .kb-search-filter-heading                                     */
/*         .kb-search-filter-section-title                               */
/*         .kb-search-filter-checkboxes                                  */
/*           .kb-filter-checkbox-label × N                               */
/*                                                                       */
/* Pylon does NOT ship its stock CSS in custom themes, so each rule below */
/* is required. The original ruleset that targeted `#kb-search-results a` */
/* with a folder-svg-as-direct-child grid was based on an earlier Pylon  */
/* DOM that no longer exists, which is why search results rendered as a  */
/* giant unconstrained sparkle SVG.                                      */

/* Defensive cap on every <img> / <svg> Pylon may inject inside the      */
/* results pane. Without this, the aiSparkles SVG (no width/height attrs */
/* on the element, only a viewBox) renders at its containing block's    */
/* width and dominates the entire panel. Result-card icons + AI sparkle  */
/* + filter favicons + sources-popover icons all override this with      */
/* their own size rules below.                                           */
#kb-search-results img,
#kb-search-results svg {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
  flex: 0 0 auto;
}

/* Two-column wrapper: main results column + filter sidebar. Pylon emits */
/* both as direct children. On narrow screens we stack.                  */
.kb-search-results-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mysa-space-6);
}

@media (min-width: 880px) {
  .kb-search-results-wrapper {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: start;
  }
}

.kb-search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
  min-width: 0;
}

/* Cap visible result cards at the top 3. Pylon's island still fetches the */
/* full result set (so AI summary citations remain valid), but we hide     */
/* everything past the third <a class="kb-search-result-item"> sibling.    */
/* Both article results and external-page results use the same class, so  */
/* a single :nth-of-type rule covers both. The .kb-ask-ai card is a <div> */
/* sibling and is not counted. */
.kb-search-results-list > .kb-search-result-item:nth-of-type(n + 4) {
  display: none;
}

/* === Ask AI summary card =============================================== */
.kb-ask-ai {
  position: relative;
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background-color: #ffffff;
  box-shadow: var(--mysa-shadow-sm);
  padding: var(--mysa-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
}

.kb-ask-ai-header {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-2);
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primaryColor, var(--mysa-blue));
}

.kb-ask-ai-header > svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  color: currentColor;
}

.kb-ask-ai-body {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
  position: relative;
}

.kb-ask-ai-body--clamped {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.kb-ask-ai-title {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  line-height: var(--mysa-leading-snug);
  margin: 0;
}

.kb-ask-ai-response {
  font-size: var(--mysa-text-base);
  line-height: var(--mysa-leading-relaxed);
  color: var(--mysa-neutral-700);
  white-space: pre-wrap;
}

.kb-ask-ai-response p {
  margin: 0 0 var(--mysa-space-2);
}

.kb-ask-ai-response p:last-child {
  margin-bottom: 0;
}

.kb-ask-ai-feedback {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-2);
  margin-top: var(--mysa-space-1);
}

.kb-ask-ai-feedback-btn {
  appearance: none;
  border: 1px solid var(--mysa-neutral-200);
  background-color: #ffffff;
  border-radius: var(--mysa-radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mysa-neutral-500);
  transition:
    border-color var(--mysa-transition),
    color var(--mysa-transition),
    background-color var(--mysa-transition);
}

.kb-ask-ai-feedback-btn:hover {
  border-color: var(--mysa-neutral-300);
  background-color: var(--mysa-neutral-50);
  color: var(--mysa-neutral-700);
}

.kb-ask-ai-feedback-btn > svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

.kb-ask-ai-feedback-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--primaryColor, var(--mysa-blue));
}

.kb-ask-ai-feedback-result > svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}

.kb-ask-ai-toggle {
  align-self: flex-start;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  color: var(--primaryColor, var(--mysa-blue));
  cursor: pointer;
}

.kb-ask-ai-toggle:hover {
  text-decoration: underline;
}

/* Citation chip rendered inline at the end of the AI response. */
.kb-sources-chip-wrapper {
  display: inline-block;
  margin-left: 4px;
  vertical-align: baseline;
}

.kb-sources-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--mysa-radius-full);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--mysa-transition),
    color var(--mysa-transition);
}

.kb-sources-chip:hover {
  background-color: var(--primaryColor, var(--mysa-blue));
  color: #ffffff;
}

/* Sources popover (revealed on chip hover). */
.kb-sources-popover {
  position: absolute;
  z-index: 10;
  min-width: 280px;
  max-width: 360px;
  padding: var(--mysa-space-2);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background-color: #ffffff;
  box-shadow: var(--mysa-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-sources-popover-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--mysa-space-3);
  padding: var(--mysa-space-2) var(--mysa-space-3);
  border-radius: var(--mysa-radius-md);
  text-decoration: none;
  color: var(--mysa-neutral-800);
  transition: background-color var(--mysa-transition);
}

.kb-sources-popover-row:hover {
  background-color: var(--mysa-neutral-50);
}

.kb-sources-popover-index {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mysa-radius-full);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-xs);
  font-weight: 600;
}

.kb-sources-popover-title {
  font-size: var(--mysa-text-sm);
  font-weight: 500;
  color: var(--mysa-neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-sources-popover-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--mysa-space-2);
  font-size: var(--mysa-text-xs);
  color: var(--mysa-neutral-500);
}

.kb-sources-popover-favicon {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  border-radius: 3px;
}

.kb-sources-popover-icon > svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

/* === Search result cards =============================================== */
.kb-search-result-item {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  padding: var(--mysa-space-4) var(--mysa-space-5);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background-color: #ffffff;
  text-decoration: none;
  color: var(--mysa-neutral-800);
  transition:
    border-color var(--mysa-transition),
    box-shadow var(--mysa-transition),
    transform var(--mysa-transition);
}

.kb-search-result-item:hover {
  border-color: var(--mysa-neutral-300);
  box-shadow: var(--mysa-shadow-sm);
  transform: translateY(-1px);
}

.kb-search-result-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--mysa-text-xs);
  color: var(--mysa-neutral-500);
}

.kb-search-result-breadcrumbs > svg {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  color: var(--mysa-neutral-400);
  margin-right: 2px;
}

/* Leading favicon for federated external-page results (same slot as the  */
/* folder svg above, but Pylon emits an <img> when the source has one).   */
.kb-search-result-breadcrumb-favicon {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  border-radius: 2px;
  margin-right: 2px;
  flex-shrink: 0;
}

.kb-search-result-breadcrumb-segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.kb-search-result-breadcrumb-segment > svg {
  width: 12px;
  height: 12px;
  max-width: 12px;
  max-height: 12px;
  color: var(--mysa-neutral-400);
  flex-shrink: 0;
}

.kb-search-result-breadcrumb-link {
  color: var(--mysa-neutral-600);
  cursor: pointer;
  transition: color var(--mysa-transition);
}

.kb-search-result-breadcrumb-link:hover {
  color: var(--primaryColor, var(--mysa-blue));
}

.kb-search-result-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--mysa-radius-sm);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kb-search-result-title {
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  line-height: var(--mysa-leading-snug);
}

.kb-search-result-highlight {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
  line-height: var(--mysa-leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-search-result-highlight mark,
.kb-search-result-highlight em {
  background-color: rgba(21, 103, 212, 0.12);
  color: var(--mysa-neutral-900);
  font-style: normal;
  font-weight: 500;
  padding: 0 2px;
  border-radius: 2px;
}

/* Loading skeleton placeholders Pylon emits during query latency. */
.kb-search-result-skeleton {
  height: 88px;
  border-radius: var(--mysa-radius-lg);
  background: linear-gradient(
    90deg,
    var(--mysa-neutral-100) 0%,
    var(--mysa-neutral-50) 50%,
    var(--mysa-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: mysa-skeleton 1.4s ease-in-out infinite;
}

@keyframes mysa-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state. */
.kb-search-no-results {
  padding: var(--mysa-space-8) var(--mysa-space-5);
  border: 1px dashed var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background-color: var(--mysa-neutral-50);
  color: var(--mysa-neutral-600);
  font-size: var(--mysa-text-sm);
  text-align: center;
}

/* === Filter sidebar ==================================================== */
.kb-search-filter {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-4);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  background-color: #ffffff;
}

.kb-search-filter-heading {
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}

.kb-search-filter-section-title {
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mysa-neutral-500);
  margin-top: var(--mysa-space-1);
}

.kb-search-filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-filter-checkbox-label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  column-gap: var(--mysa-space-2);
  padding: var(--mysa-space-2);
  border-radius: var(--mysa-radius-md);
  cursor: pointer;
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-700);
  transition: background-color var(--mysa-transition);
}

.kb-filter-checkbox-label:hover {
  background-color: var(--mysa-neutral-50);
}

.kb-filter-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.kb-filter-checkbox-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--mysa-neutral-300);
  border-radius: 4px;
  background-color: #ffffff;
  transition:
    background-color var(--mysa-transition),
    border-color var(--mysa-transition);
}

.kb-filter-checkbox-custom > svg {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--mysa-transition), transform var(--mysa-transition);
}

.kb-filter-checkbox-input:checked ~ .kb-filter-checkbox-custom {
  background-color: var(
    --checkboxColor,
    var(--primaryColor, var(--mysa-blue))
  );
  border-color: var(
    --checkboxColor,
    var(--primaryColor, var(--mysa-blue))
  );
}

.kb-filter-checkbox-input:checked ~ .kb-filter-checkbox-custom > svg {
  opacity: 1;
  transform: scale(1);
}

.kb-filter-checkbox-input:focus-visible ~ .kb-filter-checkbox-custom {
  outline: 2px solid var(--primaryColor, var(--mysa-blue));
  outline-offset: 2px;
}

.kb-filter-checkbox-content {
  display: inline-flex;
  align-items: center;
  gap: var(--mysa-space-2);
  min-width: 0;
}

.kb-filter-checkbox-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--mysa-neutral-500);
  flex-shrink: 0;
}

.kb-filter-icon > svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

.kb-filter-favicon {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Pylon language switcher + account widget — fully delegated to Pylon's */
/* stock CSS. No layout/display rules here. The only safety nets we keep */
/* are: (a) hiding empty mounts before hydration, (b) capping the avatar */
/* image at 32px so an unstyled <img> can't render at full intrinsic size. */
#kb-locale-mobile:empty,
#kb-auth-mobile:empty {
  display: none;
}

#kb-auth img,
#kb-auth-mobile img {
  max-width: 32px;
  max-height: 32px;
}

/* Mobile drawer placement: the locale + auth row sits on its own line */
/* between the link lists and the search shortcut. */
.mysa-nav__mobile-utility {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-3);
  padding-top: var(--mysa-space-3);
  border-top: 1px solid var(--mysa-neutral-200);
}
.mysa-nav__mobile-utility:empty {
  display: none;
}


/* 21. Hero eyebrow + title pair — used by the homepage hero so the H1 is */
/* never the same string as the static "How can we help?" subtitle copy. */
.mysa-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-3);
}
.mysa-hero__copy .mysa-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}


/* 22. "More" flat link row — used on the homepage below "Select your product" */
/* to mirror help.getmysa.com's "Orders & Shipping / Warranty & Returns / ..." */
/* row. Renders as a simple wrap-flexed grid of underline-on-hover links, */
/* no card chrome. */
.mysa-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mysa-space-2) var(--mysa-space-6);
  padding-top: var(--mysa-space-4);
}

.mysa-more-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mysa-space-2);
  padding: var(--mysa-space-3) 0;
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--mysa-transition),
              border-color var(--mysa-transition);
}
.mysa-more-row__link:hover {
  color: var(--mysa-blue);
  border-bottom-color: currentColor;
}


/* 23. Product hero — full-width photo band at the top of the page. */
/* Aspect-ratio locks the hero's shape so the image crop stays consistent */
/* across every viewport. min-height floor keeps it tall enough on narrow */
/* mobile / unusual screens where 16:7 would collapse the band. */
.mysa-product-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: clamp(32rem, 54vw, 50rem);
  padding-top: 9rem;
  padding-bottom: var(--mysa-space-10);
  overflow: hidden;
  background-color: var(--mysa-neutral-100);
  isolation: isolate;
  color: #ffffff;
}
.mysa-product-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mysa-product-hero__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}
.mysa-product-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15) 60%,
    transparent
  );
}
.mysa-product-hero__title {
  font-size: var(--mysa-text-2xl);
  font-weight: 600;
  line-height: var(--mysa-leading-tight);
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .mysa-product-hero__title { font-size: var(--mysa-text-3xl); }
}


/* 24. PDF / user-guide download card — used by the product (collection) page */
/* "User guides" section. Driven by KB.Links filtered to .pdf URLs. */
.mysa-pdf-card {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-4);
  padding: var(--mysa-space-5) var(--mysa-space-6);
  background-color: var(--mysa-neutral-50);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-pdf-card:hover {
  border-color: var(--mysa-blue);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}
.mysa-pdf-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--mysa-radius-md);
  background-color: var(--mysa-blue-50);
  color: var(--mysa-blue);
}
.mysa-pdf-card__icon svg {
  width: 24px;
  height: 24px;
}
.mysa-pdf-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-1);
  min-width: 0;
  flex: 1;
}
.mysa-pdf-card__title {
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}
.mysa-pdf-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--mysa-space-2);
  height: 1.25rem;
  border-radius: var(--mysa-radius-sm);
  background-color: var(--mysa-neutral-200);
  color: var(--mysa-neutral-700);
  font-size: var(--mysa-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mysa-pdf-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-3);
}
@media (min-width: 768px) {
  .mysa-pdf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 25. Section title pair — eyebrow + title block reused across redesigned */
/* product / collection / homepage sections. */
.mysa-section-title {
  display: flex;
  flex-direction: column;
  gap: var(--mysa-space-2);
  margin-bottom: var(--mysa-space-6);
}
.mysa-section-title__eyebrow {
  font-size: var(--mysa-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mysa-neutral-500);
}
.mysa-section-title__heading {
  font-size: var(--mysa-text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mysa-neutral-900);
  margin: 0;
}
.mysa-section-title--compact {
  margin-bottom: var(--mysa-space-2);
}
.mysa-section-title--compact .mysa-section-title__heading {
  font-size: var(--mysa-text-xl);
}
@media (min-width: 768px) {
  .mysa-section-title__heading { font-size: var(--mysa-text-3xl); }
  .mysa-section-title--compact .mysa-section-title__heading { font-size: var(--mysa-text-2xl); }
}


/* 26. Article search disclosure — header-area <details> that exposes the */
/* Pylon search widget on article and collection pages without dominating */
/* the layout. Replaces the previous inline mysa-search-panel block. */
.mysa-search-disclosure {
  margin-bottom: var(--mysa-space-8);
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-xl);
  background-color: #ffffff;
}
.mysa-search-disclosure[open] {
  box-shadow: var(--mysa-shadow-sm);
}
.mysa-search-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-3) var(--mysa-space-5);
  cursor: pointer;
  font-size: var(--mysa-text-sm);
  font-weight: 500;
  color: var(--mysa-neutral-700);
  list-style: none;
}
.mysa-search-disclosure__summary::-webkit-details-marker {
  display: none;
}
.mysa-search-disclosure__summary svg {
  width: 18px;
  height: 18px;
  color: var(--mysa-neutral-500);
}
.mysa-search-disclosure__body {
  padding: 0 var(--mysa-space-5) var(--mysa-space-5);
}


/* Topic grid + card layout for subcollection cards in collection.html */
/* PRODUCT mode. Without these the inner SVG icons fall back to the */
/* reset's max-width: 100% and render at viewport width (giant folders). */
.mysa-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mysa-space-4);
}

.mysa-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-5);
  background-color: var(--mysa-neutral-50);
  border-radius: var(--mysa-radius-xl);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--mysa-transition),
              border-color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-topic-card:hover {
  background-color: #ffffff;
  border-color: var(--mysa-neutral-200);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.mysa-topic-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--mysa-radius-md);
  background-color: var(--mysa-blue-50);
  color: var(--mysa-blue);
  flex-shrink: 0;
}
.mysa-topic-card__icon svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex-shrink: 0;
}
.mysa-topic-card__icon img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.mysa-topic-card__title {
  font-size: var(--mysa-text-lg);
  font-weight: 600;
  color: var(--mysa-neutral-900);
  line-height: var(--mysa-leading-snug);
  margin: 0;
}

.mysa-topic-card__chevron {
  position: absolute;
  top: var(--mysa-space-5);
  right: var(--mysa-space-5);
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  color: var(--mysa-neutral-400);
  transition: color var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-topic-card:hover .mysa-topic-card__chevron {
  color: var(--mysa-blue);
  transform: translateX(2px);
}

/* Optional emoji icon, description, and article-count nodes. */
.mysa-topic-card__icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  line-height: 1;
}
.mysa-topic-card__desc {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-neutral-500);
  line-height: var(--mysa-leading-snug);
  margin: 0;
}
.mysa-topic-card__count {
  font-size: var(--mysa-text-xs);
  color: var(--mysa-neutral-500);
  margin: 0;
}


/* 27. Other-products / cross-sell strip — small horizontal card row at the */
/* bottom of a product page, mirroring help.getmysa.com's "Other products". */
.mysa-cross-sell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mysa-space-4);
}
.mysa-cross-sell__card {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-3) var(--mysa-space-4);
  background-color: var(--mysa-neutral-50);
  border-radius: var(--mysa-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-cross-sell__card:hover {
  background-color: #ffffff;
  box-shadow: var(--mysa-shadow-sm);
  transform: translateY(-1px);
  color: inherit;
}
.mysa-cross-sell__image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.mysa-cross-sell__icon-emoji,
.mysa-cross-sell__icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.mysa-cross-sell__icon-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.mysa-cross-sell__icon-fallback {
  border-radius: var(--mysa-radius-md);
  background-color: var(--mysa-neutral-100);
  color: var(--mysa-neutral-500);
}
.mysa-cross-sell__icon-fallback svg {
  width: 22px;
  height: 22px;
}
.mysa-cross-sell__title {
  font-size: var(--mysa-text-sm);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}


/* 28. Other articles in this section — bottom-of-article cross-link grid. */
.mysa-other-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-3);
  margin-top: var(--mysa-space-8);
}
@media (min-width: 768px) {
  .mysa-other-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 29. Help.getmysa.com-spec product cards — extends mysa-product-card with */
/* a centered text block and tighter visual rhythm. */
.mysa-product-grid--featured {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--mysa-space-5);
}
.mysa-product-card--featured {
  align-items: center;
  text-align: center;
  padding: var(--mysa-space-6) var(--mysa-space-4);
}
.mysa-product-card--featured .mysa-product-card__image {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
}
.mysa-product-card--featured .mysa-product-card__title {
  font-size: var(--mysa-text-xl);
}
@media (min-width: 768px) {
  .mysa-product-grid--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* 30. More list — vertical row stack with leading icon, label, trailing */
/* chevron, and hairline divider between items. Mirrors the help.getmysa.com */
/* "Orders & Shipping / Warranty / My Account / Release Notes" treatment. */
.mysa-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mysa-neutral-200);
}

.mysa-more-list__item {
  border-bottom: 1px solid var(--mysa-neutral-200);
}

.mysa-more-list__link {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-4);
  padding: var(--mysa-space-5) var(--mysa-space-2);
  text-decoration: none;
  color: var(--mysa-neutral-900);
  transition: background-color var(--mysa-transition),
              color var(--mysa-transition);
  border-radius: var(--mysa-radius-md);
}
.mysa-more-list__link:hover {
  background-color: var(--mysa-neutral-50);
  color: var(--mysa-neutral-900);
}

.mysa-more-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--mysa-neutral-700);
}
.mysa-more-list__icon svg {
  width: 22px;
  height: 22px;
}

.mysa-more-list__label {
  flex: 1 1 auto;
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}

.mysa-more-list__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mysa-neutral-400);
  transition: color var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-more-list__link:hover .mysa-more-list__chevron {
  color: var(--mysa-blue);
  transform: translateX(2px);
}

/* Icon variants for more-list rows on collection pages: an uploaded */
/* CustomIconURL renders as an image, an Icon emoji renders as a glyph,  */
/* and any inline SVG already inherits the icon container sizing rules.  */
.mysa-more-list__icon img {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.mysa-more-list__icon-emoji {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Optional article-count line that sits under the row label. */
.mysa-more-list__count {
  display: block;
  font-size: var(--mysa-text-xs);
  font-weight: 400;
  color: var(--mysa-neutral-500);
  margin-top: 2px;
}

/* Breadcrumb tucked above the "Search articles" section — small/subtle. */
.mysa-search-section__crumbs {
  margin-bottom: var(--mysa-space-2);
}
.mysa-search-section__crumbs .mysa-crumbs {
  font-size: var(--mysa-text-xs);
}

/* Contact / "Get in touch" cards — bottom of every collection page. */
.mysa-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mysa-space-3);
}
@media (min-width: 768px) {
  .mysa-contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mysa-space-4);
  }
}

.mysa-contact-card {
  display: flex;
  align-items: center;
  gap: var(--mysa-space-3);
  padding: var(--mysa-space-4) var(--mysa-space-5);
  background: #ffffff;
  border: 1px solid var(--mysa-neutral-200);
  border-radius: var(--mysa-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--mysa-transition),
              box-shadow var(--mysa-transition),
              transform var(--mysa-transition);
}
.mysa-contact-card:hover {
  border-color: var(--mysa-blue);
  box-shadow: var(--mysa-shadow-md);
  transform: translateY(-1px);
  color: inherit;
}

.mysa-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--mysa-radius-md);
  background: var(--mysa-neutral-100);
  color: var(--mysa-neutral-700);
}
.mysa-contact-card__icon svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.mysa-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mysa-contact-card__title {
  font-size: var(--mysa-text-base);
  font-weight: 600;
  color: var(--mysa-neutral-900);
}

.mysa-contact-card__action {
  font-size: var(--mysa-text-sm);
  color: var(--mysa-blue);
}

@media (min-width: 768px) {
  .mysa-more-list__link {
    padding: var(--mysa-space-5) var(--mysa-space-4);
    gap: var(--mysa-space-5);
  }
  .mysa-more-list__icon {
    width: 36px;
    height: 36px;
  }
  .mysa-more-list__icon svg {
    width: 24px;
    height: 24px;
  }
}