@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #4D14C2;
  --accent: #671EFF;
  --light-purple: #F3EEFF;
  --lighter-purple: #F8F5FF;
  --white: #FFFFFF;
  --dark: #1A1A2E;
  --gray: #6B7280;
  --light-gray: #E5E7EB;
  --border-radius: 12px;
  --shadow: 0 2px 12px rgba(77, 20, 194, 0.08);
  --shadow-hover: 0 4px 20px rgba(77, 20, 194, 0.14);
  --transition: 0.25s ease;
  --button-border: #000000;
  --button-font: #000000;
  --button-border-hover: #8D66FF;
  --button-font-hover: #ffffff;
  --button-background-hover: #8D66FF;
  --button-get-started-background: var(--accent);
  --button-get-started-font: #ffffff;
  --button-get-started-border: #8D66FF;
  --button-get-started-border-hover: #8D66FF;
  --button-get-started-font-hover: #ffffff;
  --button-get-started-background-hover: transparent;
  --recent-bg: #f6f2ff;
  --recent-card-bg: #ffffff;
  --recent-card-border: #e4e4ee;
  --recent-card-desc: #666e88;
  --recent-card-meta: #757e9b;
  --recent-arrow-border: #e2e6f3;
  --recent-arrow-color: #626b87;
  --recent-dot: #d1cde4;
  --recent-dot-active: #7448f2;
  --recent-icon-purple: #f0e7ff;
  --recent-icon-blue: #e4f1ff;
  --recent-icon-green: #e6ffef;
  --recent-icon-yellow: #fff7d9;
  --category-card:#ffffff26;
}

body[data-theme='dark'] {
  --primary: #8D66FF;
  --accent: #A58AFF;
  --light-purple: #1A2338;
  --lighter-purple: #121A2D;
  --white: #0F1424;
  --dark: #E6E9F5;
  --gray: #AAB2C8;
  --light-gray: #293247;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.45);
  --button-border: #FFFFFF;
  --button-font: #ffffff;
  --button-background: transparent;
  --button-get-started-background: #8D66FF;
  --button-get-started-font: #ffffff;
  --button-get-started-border: #8D66FF;
  --button-get-started-border-hover: #8D66FF;
  --button-get-started-font-hover: #ffffff;
  --button-get-started-background-hover: transparent;
  --recent-bg: #141b2f;
  --recent-card-bg: #0f1424;
  --recent-card-border: #2b3550;
  --recent-card-desc: #b1bad2;
  --recent-card-meta: #95a0bf;
  --recent-arrow-border: #2b3550;
  --recent-arrow-color: #d5ddf1;
  --recent-dot: #3b4665;
  --recent-dot-active: #a58aff;
  --recent-icon-purple: #2a2143;
  --recent-icon-blue: #1f334d;
  --recent-icon-green: #1d3a35;
  --recent-icon-yellow: #433b20;
  --category-card:#6c6c6c26;
  color-scheme: dark;
}

zd-autocomplete-option {
  background: var(--dark) !important;
  color: var(--white) !important;
  border: 1px solid var(--light-gray) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 0 0 10px 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  &:hover {
    background: var(--light-purple) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
  }
}

.btn-watch:hover{
  color: var(--accent) !important;
}

/* Custom swoop */
.hero__title-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  bottom: -28px;   /* farther from word */
  width: 125%;
  height: 48px;    /* thicker */

  background: url("https://www.spectrio.com/wp-content/uploads/2026/04/swoop.png") no-repeat center center;
  background-size: 100% 100%;
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark);
}

a {
  text-decoration: none !important;
  color: inherit;
}

.recent-article-card__title a {
  color: var(--dark) !important;
}

.recent-article-card__desc a {
  color: var(--dark) !important;
}

.recent-article-card__meta {
  color: var(--dark) !important;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== HEADER / NAVBAR ===== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: 0.9rem;
  color: var(--gray);
  transition: color var(--transition);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link--active {
  color: var(--dark);
}

.nav__link--active {
  font-weight: 600;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-search {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--transition);
}

.btn-search:hover {
  background: var(--light-purple);
}

.btn-search svg {
  width: 20px;
  height: 20px;
  color: var(--dark);
}

.btn-theme {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--button-border);
  border-radius: 50%;
  color: var(--button-font);
  background: var(--white);
  transition: all var(--transition);
}

.btn-theme:hover {
  border-color: var(--button-border-hover);
  color: var(--button-font-hover);
  background: var(--button-background-hover);
}

body[data-theme='dark'] .btn-login,
body[data-theme='dark'] .btn-submit,
body[data-theme='dark'] .btn-explore,
body[data-theme='dark'] .btn-watch,
body[data-theme='dark'] .btn-view-all,
body[data-theme='dark'] .support-dropdown__toggle,
body[data-theme='dark'] .btn-theme {
  border-color: var(--button-border);
  color: var(--button-font);
}

body[data-theme='dark'] .btn-login:hover,
body[data-theme='dark'] .btn-submit:hover,
body[data-theme='dark'] .btn-explore:hover,
body[data-theme='dark'] .btn-view-all:hover,
body[data-theme='dark'] .support-dropdown__toggle:hover,
body[data-theme='dark'] .btn-theme:hover {
  border-color: var(--button-border-hover);
  color: var(--button-font-hover);
  background: var(--button-background-hover);
}

.btn-theme__icon {
  width: 18px;
  height: 18px;
}

.btn-theme__icon--sun {
  display: none;
}

body[data-theme='dark'] .btn-theme__icon--moon {
  display: none;
}

body[data-theme='dark'] .btn-theme__icon--sun {
  display: block;
}

.btn-login,
.btn-submit,
.btn-explore,
.btn-view-all,
.support-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--button-border);
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--button-font);
  background: transparent;
  transition: all var(--transition);
}

.btn-explore{
  box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 20px;
}

.btn-watch {
  	display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dark);
    transition: color var(--transition);
  	text-shadow: rgba(0, 0, 0, 0.18) 0px 8px 20px;
}

.btn-watch:hover {
  color: #ffffff;
}

.btn-login:hover,
.btn-submit:hover,
.btn-explore:hover,
.btn-view-all:hover,
.support-dropdown__toggle:hover {
  border-color: var(--button-border-hover);
  color: var(--button-font-hover);
  background: var(--button-background-hover);
}

.support-dropdown {
  position: relative;
}

.support-dropdown > summary {
  list-style: none;
}

.support-dropdown > summary::-webkit-details-marker {
  display: none;
}

.support-dropdown__toggle {
  cursor: pointer;
  background-color: #671eff;
  color: #ffffff;
}

.support-dropdown__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--transition);
}

.support-dropdown[open] .support-dropdown__toggle::after {
  transform: rotate(-135deg) translateY(-1px);
}

.support-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  padding: 8px;
  z-index: 20;
}

.support-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--dark);
  font-size: 0.875rem;
  transition: background var(--transition), color var(--transition);
}

.support-dropdown__item:hover {
  background: var(--light-purple);
  color: var(--primary);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 2.5px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ===== HERO SECTION ===== */

.hero {
  padding: 15px 0 5px;
  background: linear-gradient(180deg, var(--white) 0%, var(--lighter-purple) 100%);
  position: relative;
  overflow: hidden;
}

/* .hero::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 5%;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.5;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 10%;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.4;
} */

.hero .container {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero__content {
  flex: 1;
  max-width: 480px;
}

.hero__subtitle {
  font-size: 1rem;
  color: var(--gray);
  margin-bottom: 6px;
}

.hero__title {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}

.hero__title-accent {
  color: var(--accent);
  position: relative;
  display: inline-block;
  line-height: 1;
}

/* .hero__title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 C40 2, 60 12, 100 6 S160 2, 198 8' stroke='%23671EFF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
} */

.hero__desc {
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 20px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.btn-explore svg {
  width: 18px;
  height: 18px;
}

.btn-watch svg {
		width: 24px;
    height: 24px;
    color: var(--primary);
}

.hero__media {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero__video-bg {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16 / 9.3;
  background-image: url(/hc/theming_assets/01KPVANNG093H0RZPT5TS53J2V);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(28px, 5vw, 70px);
  position: relative;
  overflow: hidden;
}

/* body[data-theme='dark'] .hero__video-bg {
  background-color: var(--lighter-purple);
} */

/* .hero__video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--lighter-purple) 100%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
} */

.hero__placeholder {
  width: 100%;
  height: 100%;
  background: #111;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.hero__placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* decorative dots near hero media */
/* .hero__media::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -12px;
  width: 48px;
  height: 48px;
  background-image: radial-gradient(var(--accent) 2.5px, transparent 2.5px);
  background-size: 12px 12px;
  opacity: 0.35;
} */

/* .hero__media::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-image: radial-gradient(var(--primary) 2px, transparent 2px);
  background-size: 10px 10px;
  opacity: 0.3;
} */

/* ===== BROWSE BY CATEGORY ===== */

.categories {
  padding: 46px 0 38px;
  background: var(--white);
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}

.categories__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -4px auto 34px;
  position: relative;
}

.categories__search .position-relative {
  width: min(560px, 100%);
  position: relative;
}

.categories__search .search.search-full {
  width: 100%;
  margin: 0;
}

.categories__search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  pointer-events: none;
  z-index: 2;
}

.categories__search #query {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 40px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--lighter-purple);
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(103, 30, 255, 0.14);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.categories__search #query:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(103, 30, 255, 0.16);
}

.categories__search #query::placeholder {
  color: color-mix(in srgb, var(--gray) 78%, var(--accent) 22%);
}

.categories__search-field {
  width: min(560px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--lighter-purple);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(103, 30, 255, 0.14);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.categories__search-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(103, 30, 255, 0.16);
}

.categories__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.categories__search-icon svg {
  width: 19px;
  height: 19px;
}

.categories__search-input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 500;
}

.categories__search-input::placeholder {
  color: color-mix(in srgb, var(--gray) 78%, var(--accent) 22%);
}

.categories__search-menu {
  width: min(560px, 100%);
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 8;
}

.categories__search-menu[hidden] {
  display: none;
}

.categories__search-menu-item {
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  color: var(--dark);
  font-size: 0.9rem;
  border-top: 1px solid var(--light-gray);
  background: transparent;
}

.categories__search-menu-item:first-child {
  border-top: none;
}

.categories__search-menu-item:hover,
.categories__search-menu-item:focus-visible {
  background: var(--light-purple);
  color: var(--accent);
}

.categories__search-menu-empty {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--gray);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1260px;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
}

.categories__grid > a,
.categories__grid > div {
  width: 100%;
}

.category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
	background: var(--category-card);
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius);
  transition: all var(--transition);
  cursor: pointer;
  height: 84px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.category-card  h3{
	color: var(--dark) !important;
}

.category-card__text p{
	text-decoration: none !important;
}

.category-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.category-card__icon {
  width: 78px;
  height: 60px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: var(--light-purple); */
}

.category-card__icon img {
  width: 78px;
  height: 52px;
  object-fit: contain;
}

.category-card__text h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}

.category-card__text p {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.4;
}

/* ===== RECENT ARTICLES ===== */

.recent-articles {
  padding: 18px 0 28px;
  background: var(--recent-bg);
}

.recent-articles__header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  text-align: center;
}

.recent-articles__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.recent-articles__view-all {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  align-self: flex-end;
}

.recent-articles__carousel {
  position: relative;
  padding: 0 24px;
}

.recent-articles__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.recent-articles__track::-webkit-scrollbar {
  display: none;
}

.recent-article-card {
  flex: 0 0 188px;
  min-height: 178px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--recent-card-border);
  background: var(--recent-card-bg);
  box-shadow: var(--shadow);
}

.recent-article-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 14px;
  display: none;
}

.recent-article-card__icon--purple { background: var(--recent-icon-purple); }
.recent-article-card__icon--blue { background: var(--recent-icon-blue); }
.recent-article-card__icon--green { background: var(--recent-icon-green); }
.recent-article-card__icon--yellow { background: var(--recent-icon-yellow); }

.recent-article-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.recent-article-card__desc {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--recent-card-desc);
  margin-bottom: 8px;
}

.recent-article-card__meta {
  font-size: 0.83rem;
  color: var(--recent-card-meta);
  font-weight: 500;
  display: none;
}

.recent-articles__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--recent-arrow-border);
  background: var(--recent-card-bg);
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--recent-arrow-color);
  box-shadow: var(--shadow);
  z-index: 2;
}

.recent-articles__arrow--prev { left: -4px; }
.recent-articles__arrow--next { right: -4px; }

.recent-articles__arrow svg {
  width: 24px;
  height: 24px;
}

.recent-articles__arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.recent-articles__dots {
  display: none; /* was "flex"*/
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.recent-articles__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--recent-dot);
}

.recent-articles__dot--active {
  width: 22px;
  background: var(--recent-dot-active);
}

/* ===== FEATURED VIDEO TUTORIALS ===== */

.tutorials {
  padding: 44px 0 52px;
  background: linear-gradient(180deg, var(--white) 0%, var(--lighter-purple) 100%);
}

.tutorials__header {
  text-align: center;
  margin-bottom: 8px;
  position: relative;
}

.tutorials__header .section-title {
  margin-bottom: 8px;
}

.tutorials__header p {
  color: var(--gray);
  font-size: 0.95rem;
}

.tutorials__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 22px;
  position: relative;
}

.tutorials__top .section-title {
  margin-bottom: 0;
}

.btn-view-all {
  position: absolute;
  right: 0;
  gap: 4px;
}

.carousel {
  position: relative;
  padding: 0 48px;
}

.carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 4px 0;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  width: 44px;
  height: 44px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.carousel__arrow:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}

.carousel__arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.carousel__arrow svg {
  width: 20px;
  height: 20px;
  color: var(--dark);
}

.carousel__arrow--prev {
  left: 0;
}

.carousel__arrow--next {
  right: 0;
}

.video-card {
  min-width: 210px;
  max-width: 210px;
  scroll-snap-align: start;
  cursor: pointer;
}

.video-card__link {
  display: block;
}

.video-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}

.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-card__play svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  margin-left: 2px;
}

.video-card__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.video-card__title {
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.2;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card__progress {
  height: 3px;
  background: var(--light-gray);
  border-radius: 2px;
  overflow: hidden;
}

.video-card__progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}

/* Video lightbox */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 10, 30, 0.78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}

.video-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal__dialog {
  position: relative;
  width: min(920px, 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
  background: #000;
}

.video-modal__frame-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal__close:hover {
  background: rgba(0, 0, 0, 0.85);
}

body.video-modal-open {
  overflow: hidden;
}

/* Pagination dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  display:none;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light-gray);
  border: none;
  transition: all var(--transition);
  cursor: pointer;
}

.carousel__dot--active {
  background: var(--primary);
  width: 28px;
  border-radius: 5px;
}

.get-started {
  background: var(--button-get-started-background);
  color: var(--button-get-started-font);
  border: 1px solid var(--button-get-started-border) !important;
  padding: 5px 12px;
  border-radius: 5px !important;
}

.get-started:hover {
  background: var(--button-get-started-background-hover) !important;
  color: var(--button-get-started-border-hover) !important;
  border-color: var(--button-get-started-border-hover) !important;
}

/* ===== FOOTER ===== */
.footer-custom {
  background: var(--white);
  border-top: 1px solid var(--light-gray);
  color: var(--dark);
}

.footer-custom.py-3.py-xl-8 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.footer-custom .py-4.py-md-5.py-xl-8 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.footer-custom .credits {
  margin-top: 0.5rem !important;
}

.footer-custom__heading {
  font-size: 16px;
  color: var(--dark);
}

.footer-custom__contact {
  font-size: 14px;
  color: var(--gray);
}

.footer-custom__credits {
  color: var(--gray);
}

.footer-custom__social-link {
  color: var(--dark) !important;
  transition: color var(--transition);
}

.footer-custom__social-link:hover {
  color: var(--accent) !important;
}

/* === NEW === */

/* ===== SECTION ===== */

.spectrio-feature-cards {
  padding: 3rem 0;
}

.spectrio-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem;
}

/* ===== CARD ===== */

.spectrio-feature-card {
  position: relative;

  display: flex;
  gap: 2rem;

  padding: 2.5rem;

  min-height: 310px;

  border-radius: 28px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid rgba(220,225,235,.9);

  text-decoration: none;

  box-shadow:
    0 10px 30px rgba(15,23,42,.06),
    0 2px 10px rgba(15,23,42,.04);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.spectrio-feature-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 45px rgba(15,23,42,.10),
    0 6px 18px rgba(15,23,42,.08);
}

/* ===== SUBTLE GLOW ===== */

.spectrio-feature-card__glow {
  position: absolute;

  right: -70px;
  bottom: -70px;

  width: 240px;
  height: 240px;

  border-radius: 50%;

  filter: blur(20px);

  opacity: .12;

  pointer-events: none;
}

.spectrio-feature-card--academy {
  border-color: rgba(60, 100, 255, 0.8);
}

.spectrio-feature-card--academy .spectrio-feature-card__icon {
  background: radial-gradient(circle at 30% 25%, #5f7cff, #2145e8 65%, #0b1a69);
  box-shadow: 0 0 45px rgba(60, 100, 255, 0.65);
}

.spectrio-feature-card--academy .spectrio-feature-card__eyebrow {
  color: #4f6dff;
}

.spectrio-feature-card--academy .spectrio-feature-card__button {
  background: linear-gradient(135deg, #3757ff, #2442d8);
}

/* ===== ICON ===== */

.spectrio-feature-card__icon {
  flex-shrink: 0;

 width: 110px;
  height: 110px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 2.7rem;

  color: white;

  position: relative;

  box-shadow:
    0 12px 24px rgba(0,0,0,.12);
}

/* CARE */

.spectrio-feature-card--care .spectrio-feature-card__icon {
  background:
    radial-gradient(circle at 30% 30%,
      #c084fc,
      #7e22ce 75%);
}



/* ===== CONTENT ===== */

.spectrio-feature-card__content {
  position: relative;
  z-index: 2;
}

/* EYEBROW */

.spectrio-feature-card__eyebrow {
  margin: 0 0 .7rem;

  font-size: .92rem;
  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;
}

.spectrio-feature-card--care .spectrio-feature-card__eyebrow {
  color: #7e22ce;
}



/* TITLE */

.spectrio-feature-card h2 {
  margin: 0 0 1rem;

  font-size: 2.5rem;

  line-height: 1.1;

  font-weight: 700;

  margin-bottom: 12px;

  letter-spacing: -.05em;

  color: #0f172a;
}

/* DESCRIPTION */

.spectrio-feature-card p:not(.spectrio-feature-card__eyebrow) {
  margin: 0;

  max-width: 500px;

  font-size: 1.12rem;

  line-height: 1.8;

  color: #5b6475;
}

/* ===== BUTTON ===== */

.spectrio-feature-card__button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;

  margin-top: 2rem;

  padding: 1rem 1.5rem;

  border-radius: 14px;

  font-size: 1rem;
  font-weight: 700;

  color: white;
}

/* CARE BUTTON */

.spectrio-feature-card--care .spectrio-feature-card__button {
  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7e22ce
    );
}



/* BUTTON ICON */

.spectrio-feature-card__button svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== MOBILE ===== */

@media (max-width: 991px) {

  .spectrio-feature-grid {
    grid-template-columns: 1fr;
  }

  .spectrio-feature-card {
  min-height: 250px;
  padding: 36px;
}

  .spectrio-feature-card h2 {
    font-size: 2.8rem;
  }

}

@media (max-width: 640px) {

  .spectrio-feature-card {
    padding: 2rem;
  }

  .spectrio-feature-card h2 {
    font-size: 2.2rem;
  }

  .spectrio-feature-card p:not(.spectrio-feature-card__eyebrow) {
    font-size: 1rem;
  }

}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
  .categories__grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    width: 100%;
  }

  .hero .container {
    gap: 28px;
  }

  .hero__title {
    font-size: 2.6rem;
  }

  .recent-articles__carousel {
    padding: 0 38px;
  }

  .recent-articles__arrow {
    width: 50px;
    height: 50px;
  }

  .recent-articles__arrow--prev { left: 0; }
  .recent-articles__arrow--next { right: 0; }
}

@media (max-width: 768px) {
  .recent-articles__title {
    font-size: 1.5rem;
  }

  .recent-articles__view-all {
    font-size: 0.86rem;
  }

  .recent-articles__carousel {
    padding: 0 34px;
  }

  .recent-articles__arrow {
    display: inline-flex;
    width: 32px;
    height: 32px;
  }

  .recent-articles__arrow--prev { left: 0; }
  .recent-articles__arrow--next { right: 0; }

  .carousel__arrow {
    width: 40px;
    height: 40px;
  }

  .carousel__arrow--prev { left: 0; }
  .carousel__arrow--next { right: 0; }

  .carousel {
    padding: 0 42px;
  }

  .nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--light-gray);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-120%);
    transition: transform var(--transition);
    z-index: 99;
  }

  .nav--open {
    transform: translateY(0);
  }

  .hamburger {
    display: flex;
  }

  .support-dropdown__menu {
    right: 0;
  }

  .hamburger--active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger--active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger--active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__title {
    font-size: 2.4rem;
  }

  .hero__video-bg {
    max-width: 500px;
    padding: 24px;
  }

  .btn-view-all {
    position: static;
    margin-top: 8px;
  }

  .tutorials__top {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .recent-articles__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .recent-article-card {
    flex-basis: 86%;
  }

  .recent-articles__carousel {
    padding: 0 30px;
  }

  .recent-articles__arrow {
    width: 50px;
    height: 50px;
  }

  .recent-articles__arrow svg {
    width: 14px;
    height: 14px;
  }

  .recent-articles__arrow--prev { left: -2px; }
  .recent-articles__arrow--next { right: -2px; }

  .header .container {
    padding: 0 16px;
  }

  .btn-login {
    display: none;
  }

  .btn-theme {
    width: 40px;
  }

  .support-dropdown__toggle {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero {
    padding: 32px 0 36px;
  }

  .hero__title {
    font-size: 2rem;
  }

  .categories__grid {
    grid-template-columns: 1fr;
  }

  .carousel {
    padding: 0 34px;
  }

  .carousel__arrow {
    width: 40px;
    height: 40px;
  }

  .video-card {
    min-width: 180px;
    max-width: 180px;
  }
}

/* =========================================================
   HOME PAGE — design ported from index.html
   All rules are namespaced under .kbh / .kbh-* so nothing
   here can collide with the header, footer, category or
   article templates that also load this stylesheet.
   Light theme = default (:root behaviour)
   Dark theme  = body[data-theme='dark'] (set by home_page.hbs)
   ========================================================= */

.kbh {
  /* light palette */
  --kbh-bg:          #FFFFFF;
  --kbh-surface:     #FFFFFF;
  --kbh-surface2:    #F1ECFB;
  --kbh-border:      rgba(123, 79, 224, 0.18);
  --kbh-accent:      #7B4FE0;
  --kbh-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbh-accent-hover: #6634C9;
  --kbh-on-accent:   #FFFFFF;
  --kbh-purple:      #7B4FE0;
  --kbh-violet:      #9B6FE8;
  --kbh-text:        #1A1130;
  --kbh-muted:       rgba(26, 17, 48, 0.55);
  --kbh-feature:     #7B4FE0;
  --kbh-radius:      12px;
  --kbh-radius-lg:   20px;

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbh-text);
  background: var(--kbh-bg);
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}

body[data-theme='dark'] .kbh {
  /* dark palette */
  --kbh-bg:          #0D0D14;
  --kbh-surface:     #14141F;
  --kbh-surface2:    #1A1A28;
  --kbh-border:      rgba(255, 255, 255, 0.07);
  --kbh-accent:      #DAFA0B;
  --kbh-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbh-accent-hover: #C4E309;
  --kbh-on-accent:   #0D0D14;
  --kbh-violet:      #A78BFA;
  --kbh-text:        #FFFFFF;
  --kbh-muted:       rgba(255, 255, 255, 0.55);
  --kbh-feature:     #A78BFA;
}

.kbh h1,
.kbh h2,
.kbh h3 { color: var(--kbh-text); }

.kbh-section,
.kbh-cat-card,
.kbh-feature-card,
.kbh-video-embed,
.kbh-vid__thumb,
.kbh-article-card,
.kbh-search__field,
.kbh-scroll-btn {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

/* ── HERO ── */
.kbh-hero-bg {
  background: var(--kbh-bg);
  transition: background .35s;
}

.kbh-hero {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;   /* was: 1fr 1fr */
  align-items: center;
  gap: 48px;
  padding: 80px 48px 48px;
  max-width: 1320px;                     /* was: 1200px */
  margin: 0 auto;
}

.kbh-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--kbh-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kbh-hero__title {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  overflow: hidden;
}

.kbh-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: kbhRiseIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.kbh-word:nth-child(1) { animation-delay: 0.1s; }
.kbh-word:nth-child(2) { animation-delay: 0.28s; }

@keyframes kbhRiseIn {
  to { opacity: 1; transform: translateY(0); }
}

.kbh-em {
  font-style: normal;
  background: linear-gradient(115deg, #5B3DB8 0%, #7B4FE0 50%, #9B6FE8 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kbhShimmer 5s ease-in-out infinite;
  animation-delay: 0.9s;
}

body[data-theme='dark'] .kbh-em {
  background-image: linear-gradient(115deg, #A78BFA 0%, #DAFA0B 45%, #A78BFA 90%);
}

@keyframes kbhShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.kbh-hero__sub {
  color: var(--kbh-muted);
  font-size: 16px;
  max-width: 400px;
  margin-bottom: 32px;
}

.kbh-hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.kbh-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--kbh-accent);
  color: var(--kbh-on-accent);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.kbh-btn-cta:hover {
  background: var(--kbh-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--kbh-accent-dim);
}

/* First Steps CTA — its own hover colour per theme. The shared
   --kbh-accent-hover only darkens the accent, which on dark reads as the
   button dimming (almost disabled); here dark brightens instead. */
.kbh-btn-cta--first-steps {
  --kbh-cta-hover-bg: #5B3DB8;                  /* light: deeper brand purple */
  --kbh-cta-hover-fg: #FFFFFF;
  --kbh-cta-hover-glow: rgba(91, 61, 184, 0.38);
}

body[data-theme='dark'] .kbh-btn-cta--first-steps {
  --kbh-cta-hover-bg: #E8FF5A;                  /* dark: lime lights up */
  --kbh-cta-hover-fg: #0D0D14;
  --kbh-cta-hover-glow: rgba(218, 250, 11, 0.38);
}

.kbh-btn-cta--first-steps:hover,
.kbh-btn-cta--first-steps:focus-visible {
  background: var(--kbh-cta-hover-bg);
  color: var(--kbh-cta-hover-fg);
  box-shadow: 0 10px 24px var(--kbh-cta-hover-glow);
  transform: translateY(-2px);
}

.kbh-btn-cta--first-steps:focus-visible {
  outline: 2px solid var(--kbh-cta-hover-bg);
  outline-offset: 3px;
}

.kbh-btn-cta svg { width: 16px; height: 16px; }

.kbh-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kbh-muted);
  cursor: pointer;
  transition: color .2s;
}

.kbh-btn-ghost:hover { color: var(--kbh-text); }

.kbh-btn-ghost svg { width: 18px; height: 18px; }

/* ── HERO VIDEO ── */
/* Decorative Zendesk asset (video_background_dark.png) sits behind the player;
   the padding is what lets the blobs peek out around it. The image URL comes
   from the template via the --kbh-video-bg-image custom property so the
   {{asset}} helper stays in home_page.hbs. */

.kbh-video-bg {
  position: relative;
  width: 100%;
  padding: clamp(28px, 5vw, 64px) clamp(40px, 7.5vw, 100px);  /* changed from: clamp(18px, 3.6vw, 46px) clamp(24px, 5.6vw, 70px) */
  background-image: var(--kbh-video-bg-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

.kbh-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1a1030;
  overflow: hidden;
  border-radius: var(--kbh-radius-lg);
  box-shadow: 0 24px 64px rgba(123, 79, 224, 0.12), 0 4px 16px rgba(123, 79, 224, 0.08);
}

.kbh-video-embed__gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

body[data-theme='dark'] .kbh-video-embed {
  background: #0a0a14;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.kbh-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── ANIMATED DIVIDER ── */
.kbh-divider {
  height: 2px;
  width: 100%;
  margin: 0 0 24px;
  background: linear-gradient(90deg,
    #DAFA0B 0%,
    #7B4FE0 25%,
    #DAFA0B 50%,
    #7B4FE0 75%,
    #DAFA0B 100%);
  background-size: 200% 100%;
  animation: kbhWaveShift 6s linear infinite;
  box-shadow: 0 0 18px rgba(218, 250, 11, 0.4), 0 0 6px rgba(123, 79, 224, 0.3);
}

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

/* ── SECTION SHELL ── */
.kbh-section {
  padding: 64px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* First section after the hero divider (Browse by Category) sits tighter to
   the hero — the divider already provides the visual break. */
.kbh-divider + .kbh-section { padding-top: 12px; }

/* Two .kbh-section blocks in a row stack their top and bottom padding into a
   128px band — far more air than the seam needs (E-Learning Highlights into
   Most Recent Articles). The section above already ends with 64px of its own,
   so the one below only tops it up. */
.kbh-section + .kbh-section { padding-top: 8px; }

.kbh-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.kbh-section__header h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.kbh-section__header p {
  color: var(--kbh-muted);
  font-size: 14px;
  margin-top: 6px;
}

.kbh-section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}

.kbh-section-top .kbh-section__header {
  text-align: left;
  margin-bottom: 0;
}

.kbh-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbh-muted);
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--kbh-border);
  border-radius: 100px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.kbh-view-all:hover { color: var(--kbh-text); border-color: var(--kbh-violet); }

.kbh-view-all svg { width: 14px; height: 14px; }

/* ── SEARCH (Zendesk {{search}} helper) ── */
.kbh-search {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.kbh-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
  background: var(--kbh-surface2);
  border: 1px solid var(--kbh-border);
  border-radius: 100px;
  padding: 8px 16px;
}

.kbh-search__field:focus-within {
  border-color: var(--kbh-accent);
  box-shadow: 0 0 0 3px var(--kbh-accent-dim);
}

.kbh-search .search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--kbh-muted);
  pointer-events: none;
}

.kbh-search .search,
.kbh-search form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbh-search #query,
.kbh-search input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbh-text);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.kbh-search #query::placeholder,
.kbh-search input[type='search']::placeholder { color: var(--kbh-muted); }

/* ── CATEGORY GRID ── */
/* Flex rather than grid: the category count comes from Zendesk (and
   home_page.hbs drops a couple by name), so the bottom row is usually a
   partial one. Grid would leave those leftovers hanging on the left; wrapping
   flex items centre them, and the calc() basis keeps the same four-up rhythm
   the grid had. */
.kbh-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  align-items: stretch;
}

/* four across: 100% minus the three 12px gaps, split four ways */
.kbh-cat-grid > * {
  flex: 0 1 calc(25% - 9px);
  min-width: 0;
}

.kbh-cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  height: 78px;
  background: var(--kbh-surface);
  border: 1px solid var(--kbh-border);
  border-radius: var(--kbh-radius);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s;
}

.kbh-cat-card:hover {
  border-color: rgba(123, 79, 224, 0.45);
  background: var(--kbh-surface2);
  transform: translateY(-2px);
}

.kbh-cat-card__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kbh-cat-card__icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.kbh-cat-card__text { min-width: 0; }

.kbh-cat-card__text h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.kbh-cat-card__text p {
  font-size: 12px;
  color: var(--kbh-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── FEATURE CARDS (Academy / Studio) ── */
.kbh-banner {
  /* No bottom padding: the section that follows owns the gap below the cards,
     otherwise this 64px stacks on that section's 64px top padding and leaves a
     dead band between the Academy/Studio cards and E-Learning Highlights. */
  padding: 0 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.kbh-banner + .kbh-section { padding-top: 40px; }

.kbh-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.kbh-feature-card {
  display: flex;
  gap: 20px;
  padding: 24px 28px;
  background: var(--kbh-surface);
  border: 1px solid var(--kbh-border);
  border-radius: var(--kbh-radius-lg);
  transition: border-color .25s, transform .2s;
}

.kbh-feature-card:hover { transform: translateY(-2px); }

.kbh-feature-card--academy,
.kbh-feature-card--studio { border-color: rgba(123, 79, 224, 0.35); }

.kbh-feature-card--academy:hover,
.kbh-feature-card--studio:hover { border-color: rgba(123, 79, 224, 0.6); }

.kbh-feature-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  background: rgba(123, 79, 224, 0.15);
}

.kbh-feature-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--kbh-feature);
}

.kbh-feature-card__body h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 4px 0 8px;
}

/* Card logo lockup — stands in for the old text <h3>. Each mark ships as a
   black and a white file, so swap the file per theme rather than filtering one
   of them: these lockups are two-tone (wordmark + reversed ACADEMY/STUDIO
   badge), and brightness(0) invert(1) would flatten that to a single colour.
   Sizing is required here — without a height both files render at their
   natural pixel size and stack on top of each other. */
.kbh-feature-card__logo {
  margin: 0 0 18px;
  line-height: 0;
}

.kbh-feature-card__logo-img {
  display: block;
  width: auto;
  height: 48px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* light theme shows the black mark, dark theme the white one */
.kbh-feature-card__logo-img--dark { display: none; }

body[data-theme='dark'] .kbh-feature-card__logo-img--light { display: none; }
body[data-theme='dark'] .kbh-feature-card__logo-img--dark { display: block; }

.kbh-feature-card__desc {
  color: var(--kbh-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 420px;
}

.kbh-btn-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
  background: linear-gradient(100deg, #7B4FE0 0%, #9d6fe8 100%);
  color: #fff;
}

.kbh-feature-card:hover .kbh-btn-feature {
  background: linear-gradient(100deg, #6634C9 0%, #8b57e0 100%);
  box-shadow: 0 8px 20px rgba(123, 79, 224, 0.28);
}

.kbh-btn-feature svg { width: 16px; height: 16px; }

/* ── VIDEO ROW ── */
.kbh-video-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.kbh-video-scroll {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kbh-video-scroll::-webkit-scrollbar { display: none; }

.kbh-vid {
  flex: 0 0 calc(20% - 16px);
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
  cursor: pointer;
}

.kbh-vid__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--kbh-radius);
  overflow: hidden;
  background-color: #1a0f40;
  background-image: linear-gradient(135deg, #1a0f40 0%, #2d1a80 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbh-border);
}

.kbh-vid:hover .kbh-vid__thumb { border-color: rgba(123, 79, 224, 0.5); }

.kbh-vid__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kbh-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s;
}

.kbh-vid:hover .kbh-vid__play { transform: translate(-50%, -50%) scale(1.1); }

.kbh-vid__play svg {
  width: 11px;
  height: 11px;
  margin-left: 2px;
  color: var(--kbh-on-accent);
}

.kbh-vid__badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.kbh-vid__title {
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  color: var(--kbh-muted);
  line-height: 1.4;
  transition: color .2s;
}

.kbh-vid:hover .kbh-vid__title { color: var(--kbh-text); }

.kbh-scroll-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #EEE9FB;
  border: 1px solid rgba(91, 61, 184, 0.25);
  color: #3B2A8C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kbh-scroll-btn:hover { border-color: var(--kbh-purple); background: #E2D9F9; }

body[data-theme='dark'] .kbh-scroll-btn {
  background: var(--kbh-surface2);
  border-color: var(--kbh-border);
  color: rgba(255, 255, 255, 0.8);
}

body[data-theme='dark'] .kbh-scroll-btn:hover { border-color: rgba(123, 79, 224, 0.5); background: var(--kbh-surface2); }

.kbh-scroll-btn:disabled { opacity: .4; cursor: not-allowed; }

.kbh-scroll-btn svg { width: 16px; height: 16px; }

/* ── ARTICLES CAROUSEL ── */
.kbh-article-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kbh-article-scroll {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kbh-article-scroll::-webkit-scrollbar { display: none; }

.kbh-article-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  min-height: 186px;
  padding: 22px 24px;
  scroll-snap-align: start;
  background: var(--kbh-surface);
  border: 1px solid var(--kbh-border);
  border-radius: var(--kbh-radius-lg);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .2s;
}

.kbh-article-card:hover {
  border-color: rgba(123, 79, 224, 0.45);
  background: var(--kbh-surface2);
  transform: translateY(-2px);
}

/* Title carries the card now that the artwork is gone; clamp it so a long KB
   title cannot push the description out of a row of equal-height cards. */
.kbh-article-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--kbh-text);
}

.kbh-article-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--kbh-muted);
}

/* {{excerpt}} returns nothing for a body-less article — don't leave a gap */
.kbh-article-card__desc:empty { display: none; }

.kbh-article-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kbh-feature);
}

.kbh-article-card__more svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.kbh-article-card:hover .kbh-article-card__more svg { transform: translateX(3px); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .kbh-word { animation: none; opacity: 1; transform: none; }
  .kbh-em { animation: none; background-position: 0% 50%; }
  .kbh-divider { animation: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .kbh-article-card { flex-basis: calc(50% - 10px); }
  .kbh-vid { flex: 0 0 calc(33.333% - 14px); }
}

@media (max-width: 940px) {
  .kbh-hero {
    grid-template-columns: 1fr;
    padding: 48px 24px 40px;
    gap: 32px;
  }
  
  .kbh-hero__left {
    text-align: center;
  }

  .kbh-hero__sub {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .kbh-hero__ctas {
    justify-content: center;
  }

  .kbh-video-bg { padding: 18px 26px; }
  .kbh-section { padding: 48px 24px; }
  .kbh-banner { padding: 0 24px; }
  .kbh-banner + .kbh-section { padding-top: 32px; }
  .kbh-section + .kbh-section { padding-top: 6px; }
  .kbh-divider { margin-bottom: 20px; }

  .kbh-cat-grid > * { flex-basis: calc(50% - 6px); }
  .kbh-feature-grid { grid-template-columns: 1fr; }
  .kbh-article-card { flex-basis: calc(50% - 10px); }
}

@media (max-width: 700px) {
  .kbh-section-top { flex-direction: column; align-items: flex-start; }
  .kbh-vid { flex: 0 0 calc(50% - 10px); }
  .kbh-article-card { flex-basis: 82%; }
}

@media (max-width: 520px) {
  .kbh-hero { padding: 36px 16px 32px; }
  .kbh-video-bg { padding: 12px 18px; }
  .kbh-section { padding: 40px 16px; }
  .kbh-banner { padding: 0 16px; }
  .kbh-banner + .kbh-section { padding-top: 28px; }
  .kbh-section + .kbh-section { padding-top: 4px; }
  .kbh-cat-grid > * { flex-basis: 100%; }
  .kbh-vid { flex: 0 0 82%; }
  .kbh-article-card { flex-basis: 88%; padding: 18px 20px; }
  .kbh-feature-card { flex-direction: column; gap: 14px; padding: 20px; }
  .kbh-feature-card__logo-img { height: 38px; }
}

/* =========================================================
   KB HEADER (kbs_header.hbs) — ported from index.html <nav>
   Everything is namespaced under .kbs-* so it cannot collide
   with the legacy .header/.nav rules above or the .kbh-* home
   page rules. Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbs-header {
  /* light palette (mirrors .kbh) */
  --kbs-bg:          rgba(255, 255, 255, 0.92);
  --kbs-surface:     #FFFFFF;
  --kbs-surface2:    #F1ECFB;
  --kbs-border:      rgba(123, 79, 224, 0.18);
  --kbs-accent:      #7B4FE0;
  --kbs-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbs-on-accent:   #FFFFFF;
  --kbs-violet:      #9B6FE8;
  --kbs-text:        #1A1130;
  --kbs-muted:       rgba(26, 17, 48, 0.55);
  --kbs-radius:      12px;

  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  background: var(--kbs-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--kbs-text);
  transition: background-color .35s ease, color .35s ease;
}

body[data-theme='dark'] .kbs-header {
  /* dark palette */
  --kbs-bg:          rgba(13, 13, 20, 0.92);
  --kbs-surface:     #14141F;
  --kbs-surface2:    #1A1A28;
  --kbs-border:      rgba(255, 255, 255, 0.07);
  --kbs-accent:      #DAFA0B;
  --kbs-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbs-on-accent:   #0D0D14;
  --kbs-violet:      #A78BFA;
  --kbs-text:        #FFFFFF;
  --kbs-muted:       rgba(255, 255, 255, 0.55);
}

.kbs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 48px;
}

/* skip link */
.kbs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--kbh-accent, #7B4FE0);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
}

.kbs-skip:focus { left: 0; }

/* ── LOGO ── */
.kbs-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kbs-logo__img {
  height: 20px;
  width: auto;
  display: block;
  transition: filter .35s ease;
}

/* The theme ships one logo file (brand purple). Rather than depend on a second
   uploaded asset, flatten it to pure white for the dark background. */
body[data-theme='dark'] .kbs-logo__img {
  filter: brightness(0) invert(1);
}

/* ── SEARCH (Zendesk {{search}} helper) ── */
.kbs-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 440px;
  margin: 0 32px;
  padding: 8px 16px;
  background: var(--kbs-surface2);
  border: 1px solid var(--kbs-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbs-search:focus-within {
  border-color: var(--kbs-accent);
  box-shadow: 0 0 0 3px var(--kbs-accent-dim);
}

.kbs-search > svg {
  flex-shrink: 0;
  color: var(--kbs-muted);
  pointer-events: none;
}

.kbs-search .search,
.kbs-search form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbs-search #query,
.kbs-search input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbs-text);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.kbs-search #query::placeholder,
.kbs-search input[type='search']::placeholder { color: var(--kbs-muted); }

/* ── RIGHT SIDE ── */
.kbs-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kbs-icon-link {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbs-border);
  border-radius: 50%;
  color: var(--kbs-muted);
  background: transparent;
  transition: color .2s, border-color .2s, background .2s;
}

.kbs-icon-link:hover {
  color: var(--kbs-text);
  border-color: var(--kbs-violet);
  background: var(--kbs-accent-dim);
}

.kbs-icon-link svg { width: 16px; height: 16px; }

/* Dark: --kbs-border is only rgba(255,255,255,0.07), which is tuned for large
   surfaces (search field, menus) and nearly vanishes on a 32px ring — so the
   circle gets its own stronger border, and hover picks up the lime accent
   rather than the light-theme violet. */
body[data-theme='dark'] .kbs-icon-link {
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.70);
}

body[data-theme='dark'] .kbs-icon-link:hover {
  color: var(--kbs-accent);
  border-color: rgba(218, 250, 11, 0.55);
  background: var(--kbs-accent-dim);
}

/* ── THEME TOGGLE ── */
.kbs-theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 100px;
  background: var(--kbs-surface2);
  border: 1px solid var(--kbs-border);
  cursor: pointer;
  transition: background .3s, border-color .3s;
}

.kbs-theme-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kbs-accent);
  transform: translateX(0);
  transition: transform .3s cubic-bezier(0.65, 0, 0.35, 1), background .3s;
  z-index: 1;
}

/* dark mode: knob slides under the moon */
body[data-theme='dark'] .kbs-theme-toggle::before { transform: translateX(24px); }

.kbs-theme-toggle svg {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  flex: 1;
  transition: color .3s, opacity .3s;
}

/* light mode: sun active, moon dim */
.kbs-icon-sun  { color: #fff; opacity: 1; }
.kbs-icon-moon { color: var(--kbs-muted); opacity: .5; }

/* dark mode: moon active, sun dim */
body[data-theme='dark'] .kbs-icon-sun  { color: var(--kbs-muted); opacity: .5; }
body[data-theme='dark'] .kbs-icon-moon { color: #0D0D14; opacity: 1; }

/* ── BUTTONS ── */
.kbs-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border: 1px solid var(--kbs-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbs-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.kbs-btn-outline:hover { border-color: var(--kbs-violet); color: var(--kbs-text); }

.kbs-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  border: none;
  border-radius: 100px;
  background: var(--kbs-accent);
  color: var(--kbs-on-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s;
}

.kbs-btn-primary:hover { opacity: .88; }

/* ── DROPDOWNS ── */
.kbs-dropdown { position: relative; }

.kbs-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: var(--kbs-surface);
  border: 1px solid var(--kbs-border);
  border-radius: var(--kbs-radius);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 200;
}

body[data-theme='dark'] .kbs-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }

.kbs-dropdown--open .kbs-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.kbs-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--kbs-text) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}

.kbs-menu__item:hover { background: var(--kbs-accent-dim); }

.kbs-menu__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--kbs-violet);
}

/* ── MOBILE BURGER ── */
.kbs-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--kbs-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.kbs-burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--kbs-text);
  transition: transform .25s, opacity .25s;
}

.kbs-burger--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kbs-burger--active span:nth-child(2) { opacity: 0; }
.kbs-burger--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── ANIMATED DIVIDER UNDER NAV ── */
.kbs-nav-divider {
  position: sticky;
  top: 64px;
  z-index: 99;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    #DAFA0B 0%,
    #7B4FE0 25%,
    #DAFA0B 50%,
    #7B4FE0 75%,
    #DAFA0B 100%);
  background-size: 200% 100%;
  animation: kbhWaveShift 6s linear infinite;
  box-shadow: 0 0 18px rgba(218, 250, 11, 0.4), 0 0 6px rgba(123, 79, 224, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .kbs-nav-divider { animation: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbs-header__inner { padding: 0 24px; }
  .kbs-search { margin: 0 16px; }
}

@media (max-width: 820px) {
  .kbs-header { height: auto; }

  .kbs-header__inner {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }

  .kbs-burger { display: flex; }

  .kbs-search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    margin: 0;
  }

  .kbs-nav-right {
    order: 4;
    flex: 1 0 100%;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 6px;
    border-top: 1px solid var(--kbs-border);
  }

  .kbs-nav-right--open { display: flex; }

  .kbs-menu { left: 0; right: auto; }

  .kbs-nav-divider { position: static; }
}

/* =========================================================
   KB FOOTER (footer.hbs) — ported from the index.html
   <footer class="footer-simple">. Namespaced under .kbf-* so it
   cannot collide with the legacy .footer-custom rules above, the
   .kbs-* header rules or the .kbh-* home page rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbf {
  /* light palette (mirrors .kbh / .kbs) */
  --kbf-bg:         #FFFFFF;
  --kbf-surface:    #FFFFFF;
  --kbf-surface2:   #F1ECFB;
  --kbf-border:     rgba(123, 79, 224, 0.18);
  --kbf-accent:     #7B4FE0;
  --kbf-accent-dim: rgba(123, 79, 224, 0.10);
  --kbf-violet:     #9B6FE8;
  --kbf-text:       #1A1130;
  --kbf-muted:      rgba(26, 17, 48, 0.55);
  --kbf-radius:     12px;

  padding: 36px 48px;
  background: var(--kbf-bg);
  border-top: 1px solid var(--kbf-border);
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--kbf-text);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

body[data-theme='dark'] .kbf {
  /* dark palette */
  --kbf-bg:         #0D0D14;
  --kbf-surface:    #14141F;
  --kbf-surface2:   #1A1A28;
  --kbf-border:     rgba(255, 255, 255, 0.07);
  --kbf-accent:     #DAFA0B;
  --kbf-accent-dim: rgba(218, 250, 11, 0.12);
  --kbf-violet:     #A78BFA;
  --kbf-text:       #FFFFFF;
  --kbf-muted:      rgba(255, 255, 255, 0.55);
}

.kbf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.kbf__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.kbf__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* ── LOGO ── */
.kbf__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kbf__logo-img {
  height: 20px;
  width: auto;
  display: block;
  transition: filter .35s ease;
}

/* Same trick as the header: the theme ships one logo file (brand purple), so
   flatten it to pure white for the dark background instead of depending on a
   second uploaded asset. */
body[data-theme='dark'] .kbf__logo-img { filter: brightness(0) invert(1); }

/* ── ADDRESS / CONTACT ── */
.kbf__addr {
  margin: 0;
  font-size: 13px;
  color: var(--kbf-muted);
}

.kbf__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--kbf-muted);
}

.kbf__contact span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.kbf__contact svg {
  flex-shrink: 0;
  opacity: .6;
}

.kbf__contact-link {
  color: inherit;
  transition: color .2s;
}

.kbf__contact-link:hover { color: var(--kbf-text); }

/* ── SOCIAL ── */
.kbf__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbf__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kbf-muted);
  transition: color .2s, transform .2s;
}

.kbf__social-link:hover {
  color: var(--kbf-accent);
  transform: translateY(-1px);
}

/* ── LANGUAGE SELECTOR (Zendesk alternative_locales) ── */
.kbf-lang {
  position: relative;
  flex-shrink: 0;
}

.kbf-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--kbf-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbf-muted);
  list-style: none;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.kbf-lang__toggle::-webkit-details-marker { display: none; }

.kbf-lang__toggle:hover {
  color: var(--kbf-text);
  border-color: var(--kbf-violet);
}

.kbf-lang__chevron { transition: transform .2s; }

.kbf-lang[open] .kbf-lang__chevron { transform: rotate(180deg); }

.kbf-lang__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  background: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: var(--kbf-radius);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  z-index: 50;
}

body[data-theme='dark'] .kbf-lang__menu { box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }

.kbf-lang__item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--kbf-text) !important;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}

.kbf-lang__item:hover { background: var(--kbf-accent-dim); }

/* ── COPYRIGHT ── */
.kbf__copy {
  margin: 0;
  font-size: 12px;
  color: var(--kbf-muted);
  white-space: nowrap;
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbf { padding: 32px 24px; }
}

@media (max-width: 700px) {
  .kbf { padding: 28px 16px; }

  .kbf__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .kbf__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .kbf__right {
    width: 100%;
    justify-content: space-between;
  }

  .kbf__copy { white-space: normal; }
}

/* =========================================================
   ARTICLE PAGE (article.hbs) — palette ported from the home
   page (.kbh) so the two templates read as one design.
   Everything is namespaced under .kba so it cannot collide
   with the legacy rules above, the .kbs-* header, the .kbf-*
   footer or the .kbh-* home page rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kba {
  /* light palette (mirrors .kbh) */
  --kba-bg:          #FFFFFF;
  --kba-surface:     #FFFFFF;
  --kba-surface2:    #F1ECFB;
  --kba-border:      rgba(123, 79, 224, 0.18);
  --kba-border-soft: rgba(123, 79, 224, 0.10);
  --kba-accent:      #7B4FE0;
  --kba-accent-dim:  rgba(123, 79, 224, 0.10);
  --kba-accent-hover:#6634C9;
  --kba-on-accent:   #FFFFFF;
  --kba-violet:      #9B6FE8;
  --kba-link:        #6634C9;
  --kba-text:        #1A1130;
  --kba-muted:       rgba(26, 17, 48, 0.55);
  --kba-faint:       rgba(26, 17, 48, 0.35);
  --kba-radius:      12px;
  --kba-radius-lg:   20px;
  --kba-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kba-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 56px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kba {
  /* dark palette (mirrors .kbh) */
  --kba-bg:          #0D0D14;
  --kba-surface:     #14141F;
  --kba-surface2:    #1A1A28;
  --kba-border:      rgba(255, 255, 255, 0.07);
  --kba-border-soft: rgba(255, 255, 255, 0.05);
  --kba-accent:      #DAFA0B;
  --kba-accent-dim:  rgba(218, 250, 11, 0.12);
  --kba-accent-hover:#C4E309;
  --kba-on-accent:   #0D0D14;
  --kba-violet:      #A78BFA;
  --kba-link:        #A78BFA;
  --kba-text:        #FFFFFF;
  --kba-muted:       rgba(255, 255, 255, 0.55);
  --kba-faint:       rgba(255, 255, 255, 0.35);
  --kba-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* The page background comes from the global body rule, whose dark value
   (#0F1424) is a slightly different navy than the .kbh/.kbs/.kbf dark bg.
   Repaint it only on article pages so the gutters match the header/footer. */
body:has(.kba) { background: #FFFFFF; }
body[data-theme='dark']:has(.kba) { background: #0D0D14; }

.kba h1,
.kba h2,
.kba h3,
.kba h4,
.kba h5,
.kba h6 { color: var(--kba-text); }

/* kbs_header.hbs already renders the animated gradient rule under the nav,
   so Zendesk's own top divider would just stack a second line under it. */
.container-divider { display: none; }

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

/* ── SUB NAV: breadcrumbs + search ── */
.kba .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.kba .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kba-muted);
}

.kba .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kba .breadcrumbs li + li::before {
  content: '/';
  color: var(--kba-faint);
}

.kba .breadcrumbs a {
  color: var(--kba-muted);
  transition: color .2s;
}

.kba .breadcrumbs a:hover { color: var(--kba-text); }

.kba .breadcrumbs li:last-child { color: var(--kba-text); font-weight: 600; }

/* Zendesk {{search}} helper, styled like the header/home search pill */
.kba .search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 8px 16px;
  background: var(--kba-surface2);
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kba .search-container:focus-within {
  border-color: var(--kba-accent);
  box-shadow: 0 0 0 3px var(--kba-accent-dim);
}

.kba .search-container .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kba-muted);
  pointer-events: none;
}

.kba .search-container .search,
.kba .search-container form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kba .search-container #query,
.kba .search-container input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kba-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kba .search-container #query::placeholder,
.kba .search-container input[type='search']::placeholder { color: var(--kba-muted); }

/* ── LAYOUT ── */
.kba .article-container {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}

/* ── SIDEBAR: articles in this section ── */
.kba .article-sidebar {
  position: sticky;
  top: 88px;
  padding: 18px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  transition: background-color .35s ease, border-color .35s ease;
}

.kba .collapsible-sidebar-title,
.kba .sidenav-title {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kba-accent);
}

body[data-theme='dark'] .kba .collapsible-sidebar-title,
body[data-theme='dark'] .kba .sidenav-title { color: var(--kba-violet); }

.kba .collapsible-sidebar-toggle {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kba-border);
  border-radius: 50%;
  background: transparent;
  color: var(--kba-muted);
}

.kba .collapsible-sidebar-toggle-icon { width: 16px; height: 16px; }

.kba .collapsible-sidebar-toggle .x-icon,
.kba .collapsible-sidebar-toggle[aria-expanded='true'] .chevron-icon { display: none; }

.kba .collapsible-sidebar-toggle[aria-expanded='true'] .x-icon { display: block; }

.kba .collapsible-sidebar-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kba .sidenav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--kba-muted);
  transition: background .18s, color .18s;
}

.kba .sidenav-item:hover {
  background: var(--kba-accent-dim);
  color: var(--kba-text);
}

.kba .sidenav-item.current-article {
  background: var(--kba-accent-dim);
  color: var(--kba-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--kba-accent);
}

.kba .article-sidebar-item {
  display: inline-block;
  margin-top: 10px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kba-link);
}

.kba .article-sidebar-item:hover { color: var(--kba-accent-hover); }

/* ── ARTICLE HEADER ── */
.kba .article-header { margin-bottom: 24px; }

.kba .article-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0 0 16px;
}

.kba .icon-lock {
  flex-shrink: 0;
  margin-top: .35em;
  color: var(--kba-violet);
}

.kba .article-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--kba-muted);
}

.kba .avatar {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.kba .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--kba-border);
  background: var(--kba-surface2);
}

.kba .icon-agent {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kba-surface);
  color: var(--kba-accent);
}

body[data-theme='dark'] .kba .icon-agent { color: var(--kba-violet); }

.kba .article-meta a {
  color: var(--kba-text);
  font-weight: 600;
}

.kba .article-meta a:hover { color: var(--kba-link); }

.kba .article-subscribe { margin-top: 18px; }

.kba .article-subscribe button,
.kba .article-subscribe a,
.kba .article-subscribe .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kba-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kba .article-subscribe button:hover,
.kba .article-subscribe a:hover,
.kba .article-subscribe .button:hover {
  border-color: var(--kba-violet);
  background: var(--kba-accent-dim);
}

/* ── ARTICLE BODY (prose) ── */
.kba .article-info { margin: 0; }

.kba .article-body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--kba-text);
  overflow-wrap: break-word;
}

.kba .article-body > *:first-child { margin-top: 0; }

.kba .article-body h1,
.kba .article-body h2,
.kba .article-body h3,
.kba .article-body h4,
.kba .article-body h5,
.kba .article-body h6 {
  margin: 1.8em 0 .6em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.kba .article-body h1 { font-size: 28px; }
.kba .article-body h2 { font-size: 23px; }
.kba .article-body h3 { font-size: 19px; }
.kba .article-body h4 { font-size: 17px; }
.kba .article-body h5,
.kba .article-body h6 { font-size: 15px; }

/* Articles carry their own heading colour from the editor — usually a purple
   that predates this theme and reads badly on the dark background. Take the
   accent token instead: brand purple on light, lime on dark. !important because
   the editor writes the colour inline. */
.kba .article-body h1,
.kba .article-body h2,
.kba .article-body h3,
.kba .article-body h4,
.kba .article-body h5,
.kba .article-body h6,
.kba .article-body h1 *,
.kba .article-body h2 *,
.kba .article-body h3 *,
.kba .article-body h4 *,
.kba .article-body h5 *,
.kba .article-body h6 * {
  color: var(--kba-accent) !important;
}

.kba .article-body p { margin: 0 0 1.1em; }

.kba .article-body a {
  color: var(--kba-link);
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .2s;
}

.kba .article-body a:hover { color: var(--kba-accent-hover); }

body[data-theme='dark'] .kba .article-body a:hover { color: var(--kba-accent); }

/* Articles are authored in Zendesk's editor, and anything pasted from Word or
   Google Docs arrives carrying inline colours — style="color: #2b2b2b" on every
   paragraph, a shaded header row on every table. Inline styles beat the
   .article-body rules, so on dark that copy stays near-black on near-black.

   Dark values are matched by PREFIX rather than by exact value: any hex opening
   #0-#3, any rgb() whose red channel opens 0-5. That catches every grey an
   editor emits (#000, #2b2b2b, rgb(43,43,43)) and Word's dark blues, while a
   brighter author colour opens on a higher digit and is left alone.

   The matchers sit inside :where() so they add no specificity: these rules stay
   at the weight of `.kba .article-body`, and the heading rule at the bottom of
   this block still wins over them.

   An element that sets a background AND a colour is skipped: the author picked
   that pair and it is self-consistent. Their shaded surface is restyled below
   instead. */
body[data-theme='dark'] .kba .article-body :where(
    [style*="color:#0" i],
    [style*="color: #0" i],
    [style*="color:#1" i],
    [style*="color: #1" i],
    [style*="color:#2" i],
    [style*="color: #2" i],
    [style*="color:#3" i],
    [style*="color: #3" i],
    [style*="color:rgb(0" i],
    [style*="color: rgb(0" i],
    [style*="color:rgb(1" i],
    [style*="color: rgb(1" i],
    [style*="color:rgb(2" i],
    [style*="color: rgb(2" i],
    [style*="color:rgb(3" i],
    [style*="color: rgb(3" i],
    [style*="color:rgb(4" i],
    [style*="color: rgb(4" i],
    [style*="color:rgb(5" i],
    [style*="color: rgb(5" i],
    [style*="color:black" i],
    [style*="color: black" i],
    [style*="color:dimgray" i],
    [style*="color: dimgray" i],
    [style*="color:dimgrey" i],
    [style*="color: dimgrey" i],
    [style*="color:darkslategray" i],
    [style*="color: darkslategray" i],
    [style*="color:darkslategrey" i],
    [style*="color: darkslategrey" i],
    font[color]
  ):not(:where([style*="background" i])),
body[data-theme='dark'] .kba .comment-body :where(
    [style*="color:#0" i],
    [style*="color: #0" i],
    [style*="color:#1" i],
    [style*="color: #1" i],
    [style*="color:#2" i],
    [style*="color: #2" i],
    [style*="color:#3" i],
    [style*="color: #3" i],
    [style*="color:rgb(0" i],
    [style*="color: rgb(0" i],
    [style*="color:rgb(1" i],
    [style*="color: rgb(1" i],
    [style*="color:rgb(2" i],
    [style*="color: rgb(2" i],
    [style*="color:rgb(3" i],
    [style*="color: rgb(3" i],
    [style*="color:rgb(4" i],
    [style*="color: rgb(4" i],
    [style*="color:rgb(5" i],
    [style*="color: rgb(5" i],
    [style*="color:black" i],
    [style*="color: black" i],
    [style*="color:dimgray" i],
    [style*="color: dimgray" i],
    [style*="color:dimgrey" i],
    [style*="color: dimgrey" i],
    [style*="color:darkslategray" i],
    [style*="color: darkslategray" i],
    [style*="color:darkslategrey" i],
    [style*="color: darkslategrey" i],
    font[color]
  ):not(:where([style*="background" i])) {
  color: var(--kba-text) !important;
}

/* A light author surface — the lavender header row on a pasted table, a white
   cell — becomes the theme's own panel colour, so the text on it reads white
   like the rest of the page instead of sitting on a near-white block. */
body[data-theme='dark'] .kba .article-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]),
body[data-theme='dark'] .kba .comment-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]) {
  background-color: var(--kba-surface2) !important;
}

body[data-theme='dark'] .kba .article-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]),
body[data-theme='dark'] .kba .article-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]) *,
body[data-theme='dark'] .kba .comment-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]),
body[data-theme='dark'] .kba .comment-body :where(:where(
    [style*="background:#c" i],
    [style*="background: #c" i],
    [style*="background:#d" i],
    [style*="background: #d" i],
    [style*="background:#e" i],
    [style*="background: #e" i],
    [style*="background:#f" i],
    [style*="background: #f" i],
    [style*="background:rgb(2" i],
    [style*="background: rgb(2" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background:lavender" i],
    [style*="background: lavender" i],
    [style*="background:beige" i],
    [style*="background: beige" i]
  ), :where(
    [style*="background-color:#c" i],
    [style*="background-color: #c" i],
    [style*="background-color:#d" i],
    [style*="background-color: #d" i],
    [style*="background-color:#e" i],
    [style*="background-color: #e" i],
    [style*="background-color:#f" i],
    [style*="background-color: #f" i],
    [style*="background-color:rgb(2" i],
    [style*="background-color: rgb(2" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background-color:lavender" i],
    [style*="background-color: lavender" i],
    [style*="background-color:beige" i],
    [style*="background-color: beige" i]
  ), [bgcolor]) * {
  color: var(--kba-text) !important;
}

/* Highlighted text is the exception worth keeping: swap marker-yellow for the
   theme accent rather than flattening it into the panel colour. */
body[data-theme='dark'] .kba .article-body :where(:where(
    [style*="background:#ffff00" i],
    [style*="background: #ffff00" i],
    [style*="background:yellow" i],
    [style*="background: yellow" i],
    [style*="background:rgb(255,255,0" i],
    [style*="background: rgb(255,255,0" i],
    [style*="background:rgb(255, 255, 0" i],
    [style*="background: rgb(255, 255, 0" i]
  ), :where(
    [style*="background-color:#ffff00" i],
    [style*="background-color: #ffff00" i],
    [style*="background-color:yellow" i],
    [style*="background-color: yellow" i],
    [style*="background-color:rgb(255,255,0" i],
    [style*="background-color: rgb(255,255,0" i],
    [style*="background-color:rgb(255, 255, 0" i],
    [style*="background-color: rgb(255, 255, 0" i]
  )),
body[data-theme='dark'] .kba .comment-body :where(:where(
    [style*="background:#ffff00" i],
    [style*="background: #ffff00" i],
    [style*="background:yellow" i],
    [style*="background: yellow" i],
    [style*="background:rgb(255,255,0" i],
    [style*="background: rgb(255,255,0" i],
    [style*="background:rgb(255, 255, 0" i],
    [style*="background: rgb(255, 255, 0" i]
  ), :where(
    [style*="background-color:#ffff00" i],
    [style*="background-color: #ffff00" i],
    [style*="background-color:yellow" i],
    [style*="background-color: yellow" i],
    [style*="background-color:rgb(255,255,0" i],
    [style*="background-color: rgb(255,255,0" i],
    [style*="background-color:rgb(255, 255, 0" i],
    [style*="background-color: rgb(255, 255, 0" i]
  )) {
  background-color: var(--kba-accent-dim) !important;
}

/* Mid-tone author colours — the #5B3FA8 purple an editor puts on emphasised
   copy inside tables, a dark green, a navy — are too dark against #0D0D14 but
   still carry meaning, so flattening them to white would lose the author's
   intent. Lighten them instead: brightness() scales the channels and keeps the
   hue, so that purple lands around #9B6BFF (close to --kba-violet) and a green
   stays green. Works whatever the exact value is, which matters because every
   article was written at a different time with a different palette. */
body[data-theme='dark'] .kba .article-body :where(
    [style*="color:#4" i],
    [style*="color: #4" i],
    [style*="color:#5" i],
    [style*="color: #5" i],
    [style*="color:#6" i],
    [style*="color: #6" i],
    [style*="color:#7" i],
    [style*="color: #7" i],
    [style*="color:#8" i],
    [style*="color: #8" i]
  ):not(:where([style*="background" i])),
body[data-theme='dark'] .kba .comment-body :where(
    [style*="color:#4" i],
    [style*="color: #4" i],
    [style*="color:#5" i],
    [style*="color: #5" i],
    [style*="color:#6" i],
    [style*="color: #6" i],
    [style*="color:#7" i],
    [style*="color: #7" i],
    [style*="color:#8" i],
    [style*="color: #8" i]
  ):not(:where([style*="background" i])) {
  filter: brightness(1.7);
}

/* Headings again, at dark-mode weight: the rules above match the inline colour
   an editor put on a heading too, so restate the accent after them — and drop
   the brightness filter, which would blow out the accent. */
body[data-theme='dark'] .kba .article-body :is(h1, h2, h3, h4, h5, h6),
body[data-theme='dark'] .kba .article-body :is(h1, h2, h3, h4, h5, h6) * {
  color: var(--kba-accent) !important;
  filter: none !important;
}

/* the global `ul { list-style: none }` reset would strip article bullets */
.kba .article-body ul,
.kba .article-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
}

.kba .article-body ul { list-style: disc; }
.kba .article-body ol { list-style: decimal; }
.kba .article-body ul ul { list-style: circle; }
.kba .article-body li { margin-bottom: .4em; }
.kba .article-body li::marker { color: var(--kba-violet); }

.kba .article-body img,
.kba .article-body video {
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: var(--kba-radius);
  border: 1px solid var(--kba-border);
}

.kba .article-body iframe {
  max-width: 100%;
  margin: 1.2em 0;
  border: 0;
  border-radius: var(--kba-radius);
}

.kba .article-body blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--kba-accent);
  border-radius: 0 var(--kba-radius) var(--kba-radius) 0;
  background: var(--kba-accent-dim);
  color: var(--kba-text);
}

.kba .article-body blockquote > *:last-child { margin-bottom: 0; }

.kba .article-body code,
.kba .article-body kbd {
  padding: 2px 6px;
  border: 1px solid var(--kba-border);
  border-radius: 6px;
  background: var(--kba-surface2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--kba-text);
}

.kba .article-body pre {
  margin: 1.3em 0;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  background: var(--kba-surface2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}

.kba .article-body pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

.kba .article-body hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: var(--kba-border);
}

/* kb_script.js wraps every article table in .article-table-scroll so a wide
   Word table scrolls instead of blowing out the layout. The wrapper owns the
   frame (border-radius cannot clip a border-collapse table), and the table
   keeps its own border as the no-JS fallback. */
.kba .article-table-scroll {
  margin: 1.4em 0;
  overflow-x: auto;
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  background: var(--kba-surface);
}

.kba .article-body table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  font-size: 14px;
}

.kba .article-table-scroll table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.kba .article-body th,
.kba .article-body td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--kba-border-soft);
  text-align: left;
  vertical-align: top;
}

.kba .article-body th + th,
.kba .article-body td + td { border-left: 1px solid var(--kba-border-soft); }

.kba .article-body thead th,
.kba .article-body tr:first-child th {
  background: var(--kba-surface2);
  border-bottom: 1px solid var(--kba-border);
  font-weight: 700;
  color: var(--kba-text);
}

.kba .article-body tbody tr:last-child td { border-bottom: 0; }

/* ── ATTACHMENTS ── */
.kba .article-attachments:not(:empty) { margin-top: 32px; }

.kba .attachments {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kba .attachment-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  font-size: 13px;
  transition: border-color .2s, background .2s;
}

.kba .attachment-item:hover { border-color: var(--kba-violet); }

.kba .attachment-icon {
  flex-shrink: 0;
  color: var(--kba-violet);
}

.kba .attachment-item > a {
  font-weight: 600;
  color: var(--kba-text);
}

.kba .attachment-item > a:hover { color: var(--kba-link); }

.kba .attachment-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  color: var(--kba-muted);
}

.kba .attachment-meta-item { font-size: 12px; }

.kba a.attachment-meta-item {
  color: var(--kba-link);
  font-weight: 600;
}

/* ── ARTICLE FOOTER: share + comment count ── */
.kba .article > footer {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--kba-border);
}

.kba .article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.kba .share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kba .share li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--kba-border);
  border-radius: 50%;
  color: var(--kba-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kba .share li a:hover {
  color: var(--kba-text);
  border-color: var(--kba-violet);
  background: var(--kba-accent-dim);
}

body[data-theme='dark'] .kba .share li a { border-color: rgba(255, 255, 255, 0.20); }

body[data-theme='dark'] .kba .share li a:hover {
  color: var(--kba-accent);
  border-color: rgba(218, 250, 11, 0.55);
}

.kba .article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kba-muted);
  transition: color .2s;
}

.kba .article-comment-count:hover { color: var(--kba-text); }

.kba .article-comment-count-icon { width: 14px; height: 14px; }

/* ── VOTES ── */
.kba .article-votes {
  margin-top: 32px;
  padding: 26px 24px;
  text-align: center;
  background: var(--kba-surface2);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius-lg);
  transition: background-color .35s ease, border-color .35s ease;
}

.kba .article-votes-question {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--kba-text);
}

.kba .article-votes-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.kba .article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 9px 22px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  background: var(--kba-surface);
  color: var(--kba-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .2s;
}

.kba .article-vote:hover {
  border-color: var(--kba-violet);
  background: var(--kba-accent-dim);
  transform: translateY(-1px);
}

.kba .article-vote.button-primary {
  background: var(--kba-accent);
  border-color: var(--kba-accent);
  color: var(--kba-on-accent);
  box-shadow: 0 8px 20px var(--kba-accent-dim);
}

.kba .article-votes-count {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  color: var(--kba-muted);
}

/* ── RETURN TO TOP ── */
.kba .article-return-to-top {
  margin-top: 26px;
  text-align: center;
}

.kba .article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kba-muted);
  transition: color .2s, border-color .2s;
}

.kba .article-return-to-top a:hover {
  color: var(--kba-text);
  border-color: var(--kba-violet);
}

.kba .article-return-to-top-icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

/* ── RELATED / RECENTLY VIEWED ── */
.kba .article-relatives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

/* .recent-articles is also a legacy home-page carousel class — reset it here */
.kba .article-relatives .recent-articles,
.kba .article-relatives .related-articles {
  padding: 20px 22px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
}

.kba .article-relatives h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kba-accent);
}

body[data-theme='dark'] .kba .article-relatives h3 { color: var(--kba-violet); }

.kba .article-relatives ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kba .article-relatives li + li { margin-top: 4px; }

.kba .article-relatives li a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--kba-muted);
  transition: background .18s, color .18s;
}

.kba .article-relatives li a:hover {
  background: var(--kba-accent-dim);
  color: var(--kba-text);
}

/* ── COMMENTS ── */
.kba .article-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--kba-border);
}

.kba .comment-overview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.kba .comment-heading {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.kba .comment-callout {
  margin: 0;
  font-size: 13px;
  color: var(--kba-muted);
}

.kba .comment-sorter { margin-left: auto; }

/* dropdowns (comment sorter + per-comment actions) */
.kba .dropdown { position: relative; }

.kba .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kba-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.kba .dropdown-toggle:hover {
  color: var(--kba-text);
  border-color: var(--kba-violet);
}

.kba .dropdown-chevron-icon { width: 12px; height: 12px; }

.kba .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 200px;
  padding: 8px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  box-shadow: var(--kba-shadow);
}

.kba .dropdown-menu[aria-expanded='true'],
.kba .dropdown-menu.is-open,
.kba .dropdown-toggle[aria-expanded='true'] + .dropdown-menu { display: block; }

.kba .dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--kba-text);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}

.kba .dropdown-menu a:hover { background: var(--kba-accent-dim); }

.kba .dropdown-menu a[aria-selected='true'] {
  background: var(--kba-accent-dim);
  font-weight: 700;
}

.kba .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kba .comment {
  padding: 20px 22px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  transition: background-color .35s ease, border-color .35s ease;
}

.kba .comment:target { border-color: var(--kba-accent); }

.kba .comment-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.kba .comment-info { flex: 1; min-width: 0; }

.kba .comment-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.kba .comment-meta { min-width: 0; }

.kba .comment-meta > span,
.kba .comment-meta a {
  font-size: 14px;
  font-weight: 600;
  color: var(--kba-text);
}

.kba .comment-meta a:hover { color: var(--kba-link); }

.kba .meta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.kba .meta-data {
  font-size: 12px;
  color: var(--kba-muted);
}

.kba .comment-labels {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.kba .status-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 100px;
  border: 1px solid var(--kba-border);
  background: var(--kba-accent-dim);
  color: var(--kba-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kba .status-label-pending-moderation {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.45);
}

.kba .comment-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kba-text);
  overflow-wrap: break-word;
}

.kba .comment-body > *:first-child { margin-top: 0; }
.kba .comment-body > *:last-child { margin-bottom: 0; }
.kba .comment-body p { margin: 0 0 .9em; }

.kba .comment-body a {
  color: var(--kba-link);
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.kba .comment-body ul,
.kba .comment-body ol {
  margin: 0 0 .9em;
  padding-left: 1.5em;
}

.kba .comment-body ul { list-style: disc; }
.kba .comment-body ol { list-style: decimal; }

.kba .comment-actions-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kba .comment-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  background: var(--kba-surface2);
}

.kba .vote-up,
.kba .vote-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--kba-muted);
  cursor: pointer;
  transition: color .2s, background .2s;
}

.kba .vote-up svg,
.kba .vote-down svg { width: 14px; height: 14px; }

.kba .vote-up svg { transform: rotate(180deg); }

.kba .vote-up:hover,
.kba .vote-down:hover {
  color: var(--kba-text);
  background: var(--kba-accent-dim);
}

.kba .vote-voted { color: var(--kba-accent); }

body[data-theme='dark'] .kba .vote-voted { color: var(--kba-accent); }

.kba .vote-sum {
  font-size: 12px;
  font-weight: 700;
  color: var(--kba-text);
}

.kba .comment-actions .dropdown-toggle,
.kba .comment-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--kba-border);
  border-radius: 50%;
  color: var(--kba-muted);
}

/* ── PAGINATION ── */
.kba .pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.kba .pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kba .pagination a,
.kba .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kba-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kba-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kba .pagination a:hover {
  color: var(--kba-text);
  border-color: var(--kba-violet);
  background: var(--kba-accent-dim);
}

.kba .pagination .pagination-current {
  background: var(--kba-accent);
  border-color: var(--kba-accent);
  color: var(--kba-on-accent);
}

/* ── COMMENT FORM ── */
.kba .comment-form {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
  padding: 22px;
  background: var(--kba-surface2);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius-lg);
  transition: background-color .35s ease, border-color .35s ease;
}

.kba .comment-container { flex: 1; min-width: 0; }

.kba .comment-container textarea,
.kba .comment-container input[type='text'],
.kba .comment-container .form-field textarea,
.kba .comment-container [contenteditable='true'],
.kba .comment-container trix-editor {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  background: var(--kba-surface);
  border: 1px solid var(--kba-border);
  border-radius: var(--kba-radius);
  color: var(--kba-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}

.kba .comment-container textarea:focus,
.kba .comment-container [contenteditable='true']:focus,
.kba .comment-container trix-editor:focus {
  border-color: var(--kba-accent);
  box-shadow: 0 0 0 3px var(--kba-accent-dim);
}

.kba .comment-container trix-toolbar .trix-button {
  background: var(--kba-surface);
  border-color: var(--kba-border);
  color: var(--kba-text);
}

.kba .comment-form-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.kba .button,
.kba input[type='submit'].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border: none;
  border-radius: 100px;
  background: var(--kba-accent);
  color: var(--kba-on-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.kba .button:hover,
.kba input[type='submit'].button:hover {
  background: var(--kba-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--kba-accent-dim);
}

/* .article-vote also carries .button but keeps its own outlined look */
.kba .article-vote.button { background: var(--kba-surface); color: var(--kba-text); }
.kba .article-vote.button:hover { background: var(--kba-accent-dim); }
.kba .article-vote.button.button-primary {
  background: var(--kba-accent);
  color: var(--kba-on-accent);
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kba { padding: 24px 24px 48px; }

  .kba .article-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .kba .article-sidebar {
    position: relative;
    top: 0;
  }

  .kba .collapsible-sidebar-toggle { display: inline-flex; }

  .kba .collapsible-sidebar-title { margin-bottom: 0; }

  .kba .collapsible-sidebar-body { display: none; }

  .kba .collapsible-sidebar[aria-expanded='true'] .collapsible-sidebar-body,
  .kba .collapsible-sidebar-toggle[aria-expanded='true'] ~ .collapsible-sidebar-body {
    display: block;
    margin-top: 12px;
  }
}

@media (max-width: 700px) {
  .kba { padding: 20px 16px 40px; }

  .kba .sub-nav { flex-direction: column; align-items: stretch; }

  .kba .search-container { width: 100%; }

  .kba .comment-wrapper { flex-direction: column; gap: 14px; }

  .kba .comment-actions-container {
    flex-direction: row;
    align-self: flex-start;
  }

  .kba .comment-vote { flex-direction: row; padding: 4px 10px; gap: 8px; }

  .kba .comment-labels { margin-left: 0; }

  .kba .comment-form { flex-direction: column; padding: 18px; }

  .kba .article-votes { padding: 22px 16px; }

  .kba .article-votes-controls { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   CATEGORY PAGE (category.hbs) — palette ported from the home
   page (.kbh) so home / category / article read as one design.
   Everything is namespaced under .kbc so it cannot collide
   with the legacy rules above, the .kbs-* header, the .kbf-*
   footer, the .kbh-* home page or the .kba article rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbc {
  /* light palette (mirrors .kbh) */
  --kbc-bg:          #FFFFFF;
  --kbc-surface:     #FFFFFF;
  --kbc-surface2:    #F1ECFB;
  --kbc-border:      rgba(123, 79, 224, 0.18);
  --kbc-border-soft: rgba(123, 79, 224, 0.10);
  --kbc-accent:      #7B4FE0;
  --kbc-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbc-accent-hover:#6634C9;
  --kbc-on-accent:   #FFFFFF;
  --kbc-violet:      #9B6FE8;
  --kbc-link:        #6634C9;
  --kbc-text:        #1A1130;
  --kbc-muted:       rgba(26, 17, 48, 0.55);
  --kbc-faint:       rgba(26, 17, 48, 0.35);
  --kbc-radius:      12px;
  --kbc-radius-lg:   20px;
  --kbc-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbc-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbc {
  /* dark palette (mirrors .kbh) */
  --kbc-bg:          #0D0D14;
  --kbc-surface:     #14141F;
  --kbc-surface2:    #1A1A28;
  --kbc-border:      rgba(255, 255, 255, 0.07);
  --kbc-border-soft: rgba(255, 255, 255, 0.05);
  --kbc-accent:      #DAFA0B;
  --kbc-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbc-accent-hover:#C4E309;
  --kbc-on-accent:   #0D0D14;
  --kbc-violet:      #A78BFA;
  --kbc-link:        #A78BFA;
  --kbc-text:        #FFFFFF;
  --kbc-muted:       rgba(255, 255, 255, 0.55);
  --kbc-faint:       rgba(255, 255, 255, 0.35);
  --kbc-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the article page: the global body rule paints a slightly different
   dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so repaint the gutters
   on category pages to match the header/footer. */
body:has(.kbc) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbc) { background: #0D0D14; }

.kbc h1,
.kbc h2,
.kbc h3 { color: var(--kbc-text); }

/* ── SUB NAV: breadcrumbs + search ── */
.kbc .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.kbc .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kbc-muted);
}

.kbc .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kbc .breadcrumbs li + li::before {
  content: '/';
  color: var(--kbc-faint);
}

.kbc .breadcrumbs a {
  color: var(--kbc-muted);
  transition: color .2s;
}

.kbc .breadcrumbs a:hover { color: var(--kbc-text); }

.kbc .breadcrumbs li:last-child { color: var(--kbc-text); font-weight: 600; }

/* Zendesk {{search}} helper, styled like the header/home search pill */
.kbc .search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 8px 16px;
  background: var(--kbc-surface2);
  border: 1px solid var(--kbc-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbc .search-container:focus-within {
  border-color: var(--kbc-accent);
  box-shadow: 0 0 0 3px var(--kbc-accent-dim);
}

.kbc .search-container .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbc-muted);
  pointer-events: none;
}

.kbc .search-container .search,
.kbc .search-container form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbc .search-container #query,
.kbc .search-container input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbc-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kbc .search-container #query::placeholder,
.kbc .search-container input[type='search']::placeholder { color: var(--kbc-muted); }

/* ── PAGE HEADER ── */
.kbc .page-header {
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--kbc-border);
}

.kbc .page-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

.kbc .page-header-description {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 15px;
  color: var(--kbc-muted);
}

/* ── SECTION TREE ── */
.kbc .section-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.kbc .section {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--kbc-surface);
  border: 1px solid var(--kbc-border);
  border-radius: var(--kbc-radius-lg);
  transition: border-color .25s, transform .2s, box-shadow .25s, background-color .35s ease;
}

.kbc .section:hover {
  border-color: rgba(123, 79, 224, 0.45);
  transform: translateY(-2px);
  box-shadow: var(--kbc-shadow);
}

body[data-theme='dark'] .kbc .section:hover { border-color: rgba(167, 139, 250, 0.45); }

.kbc .section-tree-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kbc-border-soft);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.kbc .section-tree-title a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--kbc-text);
  transition: color .2s;
}

.kbc .section-tree-title a:hover { color: var(--kbc-link); }

.kbc .section-tree-title .icon-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--kbc-muted);
  transition: color .2s, transform .2s;
}

.kbc .section:hover .icon-chevron {
  color: var(--kbc-violet);
  transform: translateX(2px);
}

/* ── ARTICLE LIST ── */
.kbc .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kbc .article-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  transition: background .18s;
}

.kbc .article-list-item:hover { background: var(--kbc-accent-dim); }

.kbc .article-list-link {
  flex: 1;
  min-width: 0;
  color: var(--kbc-muted);
  transition: color .18s;
}

.kbc .article-list-item:hover .article-list-link { color: var(--kbc-text); }

.kbc .article-list-item .icon-star,
.kbc .article-list-item .icon-lock {
  flex-shrink: 0;
  color: var(--kbc-violet);
}

.kbc .article-promoted .article-list-link {
  color: var(--kbc-text);
  font-weight: 600;
}

/* ── SEE ALL ── */
.kbc .see-all-articles {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kbc-accent);
  transition: color .2s;
}

.kbc .see-all-articles:hover {
  color: var(--kbc-accent-hover);
  text-decoration: underline !important;
}

/* ── EMPTY STATE ── */
.kbc .category-empty {
  grid-column: 1 / -1;
  display: block;
  padding: 40px 24px;
  text-align: center;
  background: var(--kbc-surface2);
  border: 1px dashed var(--kbc-border);
  border-radius: var(--kbc-radius-lg);
  font-style: normal;
  font-size: 14px;
  color: var(--kbc-muted);
}

.kbc .category-empty a {
  color: var(--kbc-link);
  font-weight: 600;
}

/* ── EYEBROW (shared by sidebar + Most Popular + Browse Topics labels) ── */
.kbc .kbc-eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kbc-muted);
}

/* ── TWO-COLUMN SHELL: sidebar + main ── */
.kbc-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.kbc-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.kbc .kbc-sidebar-search { width: 100%; }

.kbc-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kbc-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kbc-muted);
  transition: color .18s, background-color .18s;
}

.kbc-nav-link:hover { color: var(--kbc-text); background: var(--kbc-surface2); }

.kbc-nav-link--active,
.kbc-nav-link--active:hover {
  color: var(--kbc-accent);
  background: var(--kbc-accent-dim);
}

.kbc-nav-list__loading {
  height: 36px;
  border-radius: 10px;
  background: var(--kbc-surface2);
  opacity: .6;
}

.kbc-main { min-width: 0; }

.kbc-breadcrumbs-row { margin-bottom: 24px; }
.kbc-breadcrumbs-row .breadcrumbs { margin: 0; }

/* ── MOST POPULAR CAROUSEL ── */
.kbc-mp { margin-bottom: 52px; }

.kbc-mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.kbc-mp-header .kbc-eyebrow { margin: 0; }

.kbc-mp-arrows { display: flex; gap: 8px; }

.kbc-mp-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--kbc-border);
  background: var(--kbc-surface2);
  color: var(--kbc-muted);
  transition: color .2s, border-color .2s, background-color .2s;
}

.kbc-mp-arrow:hover { color: var(--kbc-text); border-color: var(--kbc-violet); }

.kbc-mp-arrow:disabled { opacity: .4; cursor: not-allowed; }

.kbc-mp-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.kbc-mp-track::-webkit-scrollbar { display: none; }

.kbc-mp-track:empty { display: none; }

.kbc-mp:has(.kbc-mp-track:empty) { display: none; }

.kbc-mp-card {
  flex: 0 0 auto;
  width: 216px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kbc-surface);
  border: 1px solid var(--kbc-border);
  border-radius: var(--kbc-radius-lg);
  color: var(--kbc-text);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.kbc-mp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kbc-shadow);
  border-color: var(--kbc-violet);
}

.kbc-mp-card__top {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kbc-mp-card__mono {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.kbc-mp-card:nth-child(4n+1) .kbc-mp-card__top { background: linear-gradient(135deg, #E9F26B 0%, #B7C22A 100%); }
.kbc-mp-card:nth-child(4n+1) .kbc-mp-card__mono { color: #3D3D17; }

.kbc-mp-card:nth-child(4n+2) .kbc-mp-card__top { background: linear-gradient(135deg, #8B5CF6 0%, #4C1D95 100%); }
.kbc-mp-card:nth-child(4n+2) .kbc-mp-card__mono { color: #F3EEFF; }

.kbc-mp-card:nth-child(4n+3) .kbc-mp-card__top { background: linear-gradient(135deg, #E9E26B 0%, #8B5CF6 100%); }
.kbc-mp-card:nth-child(4n+3) .kbc-mp-card__mono { color: #2C2410; }

.kbc-mp-card:nth-child(4n+4) .kbc-mp-card__top { background: linear-gradient(135deg, #4C1D95 0%, #C4E309 100%); }
.kbc-mp-card:nth-child(4n+4) .kbc-mp-card__mono { color: #FFFFFF; }

.kbc-mp-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kbc-mp-card__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--kbc-accent);
}

.kbc-mp-card__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kbc-text);
}

/* ── BROWSE TOPICS ── */
.kbc-topics .kbc-eyebrow { margin-bottom: 20px; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  .kbc-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 940px) {
  .kbc { padding: 24px 24px 48px; }

  .kbc-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .kbc-sidebar { position: static; flex-direction: column; }

  .kbc-nav-list { flex-direction: row; flex-wrap: wrap; }

  .kbc-nav-link { padding: 8px 12px; }

  .kbc .section-tree { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .kbc { padding: 20px 16px 40px; }

  .kbc .sub-nav { flex-direction: column; align-items: stretch; }

  .kbc .search-container { width: 100%; }

  .kbc .page-header { margin-bottom: 26px; }

  .kbc .section { padding: 18px 18px; }

  .kbc-mp-card { width: 176px; }

  .kbc-mp-card__top { height: 112px; }
}

/* =========================================================
   SECTION PAGE (sections.hbs) — palette ported from the home
   page (.kbh) so home / category / section / article read as
   one design. Everything is namespaced under .kbsec so it
   cannot collide with the legacy rules above, the .kbs-*
   header, the .kbf-* footer, the .kbh-* home page, the .kba
   article or the .kbc category rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbsec {
  /* light palette (mirrors .kbh) */
  --kbsec-bg:          #FFFFFF;
  --kbsec-surface:     #FFFFFF;
  --kbsec-surface2:    #F1ECFB;
  --kbsec-border:      rgba(123, 79, 224, 0.18);
  --kbsec-border-soft: rgba(123, 79, 224, 0.10);
  --kbsec-accent:      #7B4FE0;
  --kbsec-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbsec-accent-hover:#6634C9;
  --kbsec-on-accent:   #FFFFFF;
  --kbsec-violet:      #9B6FE8;
  --kbsec-link:        #6634C9;
  --kbsec-text:        #1A1130;
  --kbsec-muted:       rgba(26, 17, 48, 0.55);
  --kbsec-faint:       rgba(26, 17, 48, 0.35);
  --kbsec-radius:      12px;
  --kbsec-radius-lg:   20px;
  --kbsec-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbsec-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbsec {
  /* dark palette (mirrors .kbh) */
  --kbsec-bg:          #0D0D14;
  --kbsec-surface:     #14141F;
  --kbsec-surface2:    #1A1A28;
  --kbsec-border:      rgba(255, 255, 255, 0.07);
  --kbsec-border-soft: rgba(255, 255, 255, 0.05);
  --kbsec-accent:      #DAFA0B;
  --kbsec-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbsec-accent-hover:#C4E309;
  --kbsec-on-accent:   #0D0D14;
  --kbsec-violet:      #A78BFA;
  --kbsec-link:        #A78BFA;
  --kbsec-text:        #FFFFFF;
  --kbsec-muted:       rgba(255, 255, 255, 0.55);
  --kbsec-faint:       rgba(255, 255, 255, 0.35);
  --kbsec-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the article/category pages: the global body rule paints a slightly
   different dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so repaint
   the gutters here to match the header and footer. */
body:has(.kbsec) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbsec) { background: #0D0D14; }

.kbsec h1,
.kbsec h2,
.kbsec h3 { color: var(--kbsec-text); }

/* ── SUB NAV: breadcrumbs + search ── */
.kbsec .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.kbsec .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kbsec-muted);
}

.kbsec .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kbsec .breadcrumbs li + li::before {
  content: '/';
  color: var(--kbsec-faint);
}

.kbsec .breadcrumbs a {
  color: var(--kbsec-muted);
  transition: color .2s;
}

.kbsec .breadcrumbs a:hover { color: var(--kbsec-text); }

.kbsec .breadcrumbs li:last-child { color: var(--kbsec-text); font-weight: 600; }

/* Zendesk {{search}} helper, styled like the header/home search pill */
.kbsec .search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 8px 16px;
  background: var(--kbsec-surface2);
  border: 1px solid var(--kbsec-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbsec .search-container:focus-within {
  border-color: var(--kbsec-accent);
  box-shadow: 0 0 0 3px var(--kbsec-accent-dim);
}

.kbsec .search-container .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbsec-muted);
  pointer-events: none;
}

.kbsec .search-container .search,
.kbsec .search-container form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbsec .search-container #query,
.kbsec .search-container input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbsec-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kbsec .search-container #query::placeholder,
.kbsec .search-container input[type='search']::placeholder { color: var(--kbsec-muted); }

/* ── PAGE HEADER ── */
.kbsec .page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--kbsec-border);
}

.kbsec .page-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

/* {{subscribe}} sits between the title and the description in the markup, so
   push it to the end of the flex row and let the description own a new line. */
.kbsec .section-subscribe { margin-left: auto; }

.kbsec .page-header-description {
  flex: 1 0 100%;
  margin: 0;
  max-width: 720px;
  font-size: 15px;
  color: var(--kbsec-muted);
}

.kbsec .section-subscribe button,
.kbsec .section-subscribe a,
.kbsec .section-subscribe .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid var(--kbsec-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbsec-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbsec .section-subscribe button:hover,
.kbsec .section-subscribe a:hover,
.kbsec .section-subscribe .button:hover {
  border-color: var(--kbsec-violet);
  background: var(--kbsec-accent-dim);
}

/* ── SUBSECTION LIST ── */
.kbsec .section-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.kbsec .section-list-item { display: block; }

.kbsec .section-list-item > a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 18px;
  background: var(--kbsec-surface);
  border: 1px solid var(--kbsec-border);
  border-radius: var(--kbsec-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--kbsec-text);
  transition: border-color .25s, background .25s, transform .2s;
}

.kbsec .section-list-item > a:hover {
  border-color: rgba(123, 79, 224, 0.45);
  background: var(--kbsec-surface2);
  transform: translateY(-2px);
}

body[data-theme='dark'] .kbsec .section-list-item > a:hover { border-color: rgba(167, 139, 250, 0.45); }

.kbsec .section-list-item > a > span {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.kbsec .section-list-item svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbsec-violet);
  transition: transform .2s;
}

.kbsec .section-list-item > a:hover svg { transform: translateX(2px); }

/* Collapse is driven by kb_script.js — it only adds this class when there are
   more subsections than fit the preview, so with JS off every one stays
   reachable and the trigger stays hidden. */
.kbsec .section-list--is-collapsed .section-list-item:nth-child(n + 7) { display: none; }

.kbsec .see-all-sections-trigger {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid var(--kbsec-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbsec-muted);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.kbsec .see-all-sections-trigger:hover {
  color: var(--kbsec-text);
  border-color: var(--kbsec-violet);
  background: var(--kbsec-accent-dim);
}

.kbsec .see-all-sections-trigger:focus-visible {
  outline: 2px solid var(--kbsec-accent);
  outline-offset: 3px;
}

/* hidden until kb_script.js decides the list actually needs collapsing */
.kbsec .see-all-sections-trigger[aria-hidden='true'] { display: none; }

/* ── ARTICLE LIST ── */
.kbsec .article-list {
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--kbsec-surface);
  border: 1px solid var(--kbsec-border);
  border-radius: var(--kbsec-radius-lg);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbsec .article-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--kbsec-radius);
  font-size: 14px;
  line-height: 1.45;
  transition: background .18s;
}

.kbsec .article-list-item + .article-list-item {
  box-shadow: inset 0 1px 0 var(--kbsec-border-soft);
}

.kbsec .article-list-item:hover {
  background: var(--kbsec-accent-dim);
  box-shadow: none;
}

.kbsec .article-list-item:hover + .article-list-item { box-shadow: none; }

.kbsec .article-list-link {
  flex: 1;
  min-width: 0;
  color: var(--kbsec-muted);
  transition: color .18s;
}

.kbsec .article-list-item:hover .article-list-link { color: var(--kbsec-text); }

.kbsec .article-list-item .icon-star,
.kbsec .article-list-item .icon-lock {
  flex-shrink: 0;
  color: var(--kbsec-violet);
}

.kbsec .article-promoted .article-list-link {
  color: var(--kbsec-text);
  font-weight: 600;
}

/* ── EMPTY STATE ── */
.kbsec .section-empty {
  display: block;
  padding: 40px 24px;
  text-align: center;
  background: var(--kbsec-surface2);
  border: 1px dashed var(--kbsec-border);
  border-radius: var(--kbsec-radius-lg);
  font-style: normal;
  font-size: 14px;
  color: var(--kbsec-muted);
}

.kbsec .section-empty a {
  color: var(--kbsec-link);
  font-weight: 600;
}

/* ── PAGINATION ── */
.kbsec .pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.kbsec .pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbsec .pagination a,
.kbsec .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kbsec-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbsec-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbsec .pagination a:hover {
  color: var(--kbsec-text);
  border-color: var(--kbsec-violet);
  background: var(--kbsec-accent-dim);
}

.kbsec .pagination .pagination-current {
  background: var(--kbsec-accent);
  border-color: var(--kbsec-accent);
  color: var(--kbsec-on-accent);
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbsec { padding: 24px 24px 48px; }

  .kbsec .section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .kbsec { padding: 20px 16px 40px; }

  .kbsec .sub-nav { flex-direction: column; align-items: stretch; }

  .kbsec .search-container { width: 100%; }

  .kbsec .page-header { margin-bottom: 26px; }

  .kbsec .section-subscribe { margin-left: 0; }

  .kbsec .section-list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   SEARCH RESULTS PAGE (search_results.hbs) — palette ported
   from the home page (.kbh) so home / category / section /
   article / search read as one design. Everything is
   namespaced under .kbsr so it cannot collide with the legacy
   rules above, the .kbs-* header, the .kbf-* footer, the
   .kbh-* home page, the .kba article, the .kbc category or
   the .kbsec section rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbsr {
  /* light palette (mirrors .kbh) */
  --kbsr-bg:          #FFFFFF;
  --kbsr-surface:     #FFFFFF;
  --kbsr-surface2:    #F1ECFB;
  --kbsr-border:      rgba(123, 79, 224, 0.18);
  --kbsr-border-soft: rgba(123, 79, 224, 0.10);
  --kbsr-accent:      #7B4FE0;
  --kbsr-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbsr-accent-hover:#6634C9;
  --kbsr-on-accent:   #FFFFFF;
  --kbsr-violet:      #9B6FE8;
  --kbsr-link:        #6634C9;
  --kbsr-text:        #1A1130;
  --kbsr-muted:       rgba(26, 17, 48, 0.55);
  --kbsr-faint:       rgba(26, 17, 48, 0.35);
  --kbsr-radius:      12px;
  --kbsr-radius-lg:   20px;
  --kbsr-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbsr-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbsr {
  /* dark palette (mirrors .kbh) */
  --kbsr-bg:          #0D0D14;
  --kbsr-surface:     #14141F;
  --kbsr-surface2:    #1A1A28;
  --kbsr-border:      rgba(255, 255, 255, 0.07);
  --kbsr-border-soft: rgba(255, 255, 255, 0.05);
  --kbsr-accent:      #DAFA0B;
  --kbsr-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbsr-accent-hover:#C4E309;
  --kbsr-on-accent:   #0D0D14;
  --kbsr-violet:      #A78BFA;
  --kbsr-link:        #A78BFA;
  --kbsr-text:        #FFFFFF;
  --kbsr-muted:       rgba(255, 255, 255, 0.55);
  --kbsr-faint:       rgba(255, 255, 255, 0.35);
  --kbsr-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the article/category/section pages: the global body rule paints a
   slightly different dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so
   repaint the gutters here to match the header and footer. */
body:has(.kbsr) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbsr) { background: #0D0D14; }

.kbsr h1,
.kbsr h2,
.kbsr h3 { color: var(--kbsr-text); }

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

/* ── SUB NAV: breadcrumbs + search ── */
.kbsr .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.kbsr .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kbsr-muted);
}

.kbsr .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kbsr .breadcrumbs li + li::before {
  content: '/';
  color: var(--kbsr-faint);
}

.kbsr .breadcrumbs a {
  color: var(--kbsr-muted);
  transition: color .2s;
}

.kbsr .breadcrumbs a:hover { color: var(--kbsr-text); }

.kbsr .sub-nav > .breadcrumbs li:last-child { color: var(--kbsr-text); font-weight: 600; }

/* Zendesk {{search}} helper, styled like the header/home search pill */
.kbsr .search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 8px 16px;
  background: var(--kbsr-surface2);
  border: 1px solid var(--kbsr-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbsr .search-container:focus-within {
  border-color: var(--kbsr-accent);
  box-shadow: 0 0 0 3px var(--kbsr-accent-dim);
}

.kbsr .search-container .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbsr-muted);
  pointer-events: none;
}

.kbsr .search-container .search,
.kbsr .search-container form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbsr .search-container #query,
.kbsr .search-container input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbsr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kbsr .search-container #query::placeholder,
.kbsr .search-container input[type='search']::placeholder { color: var(--kbsr-muted); }

/* ── LAYOUT ── */
.kbsr .search-results {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}

/* Zendesk renders the filter aside empty when a search has no facets — drop
   the sidebar column instead of leaving a 248px hole next to the results. */
.kbsr .search-results:not(:has(.filters-in-section)) {
  grid-template-columns: minmax(0, 1fr);
}

.kbsr .search-results:not(:has(.filters-in-section)) .search-results-sidebar {
  display: none;
}

/* ── SIDEBAR FILTERS ── */
.kbsr .search-results-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kbsr .filters-in-section {
  position: relative;
  padding: 18px;
  background: var(--kbsr-surface);
  border: 1px solid var(--kbsr-border);
  border-radius: var(--kbsr-radius);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbsr .collapsible-sidebar-title,
.kbsr .sidenav-title {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kbsr-accent);
}

body[data-theme='dark'] .kbsr .collapsible-sidebar-title,
body[data-theme='dark'] .kbsr .sidenav-title { color: var(--kbsr-violet); }

.kbsr .collapsible-sidebar-toggle {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbsr-border);
  border-radius: 50%;
  background: transparent;
  color: var(--kbsr-muted);
}

.kbsr .collapsible-sidebar-toggle-icon { width: 16px; height: 16px; }

.kbsr .collapsible-sidebar-toggle .x-icon,
.kbsr .collapsible-sidebar-toggle[aria-expanded='true'] .chevron-icon { display: none; }

.kbsr .collapsible-sidebar-toggle[aria-expanded='true'] .x-icon { display: block; }

.kbsr .multibrand-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbsr .multibrand-filter-list .sidenav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--kbsr-muted);
  transition: background .18s, color .18s;
}

.kbsr .multibrand-filter-list .sidenav-item:hover {
  background: var(--kbsr-accent-dim);
  color: var(--kbsr-text);
}

.kbsr .multibrand-filter-list .sidenav-item.current {
  background: var(--kbsr-accent-dim);
  color: var(--kbsr-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--kbsr-accent);
}

.kbsr .filter-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kbsr .doc-count {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--kbsr-surface2);
  font-size: 11px;
  font-weight: 700;
  color: var(--kbsr-muted);
}

/* Collapse is driven by kb_script.js — it only adds this class when there are
   more filters than fit the preview, so with JS off every one stays reachable
   and the trigger stays hidden. */
.kbsr .multibrand-filter-list--collapsed li:nth-child(n + 7) { display: none; }

.kbsr .see-all-filters {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid var(--kbsr-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbsr-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.kbsr .see-all-filters:hover {
  color: var(--kbsr-text);
  border-color: var(--kbsr-violet);
  background: var(--kbsr-accent-dim);
}

.kbsr .see-all-filters:focus-visible {
  outline: 2px solid var(--kbsr-accent);
  outline-offset: 3px;
}

/* hidden until kb_script.js decides the list actually needs collapsing */
.kbsr .see-all-filters[aria-hidden='true'] { display: none; }

/* ── RESULTS HEADER ── */
.kbsr .search-results-column { min-width: 0; }

.kbsr .page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--kbsr-border);
}

.kbsr .search-results-subheading {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
}

/* ── RESULT LIST ── */
.kbsr .search-results-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbsr .search-result-list-item {
  position: relative;
  padding: 20px 22px;
  background: var(--kbsr-surface);
  border: 1px solid var(--kbsr-border);
  border-radius: var(--kbsr-radius-lg);
  transition: border-color .25s, transform .2s, box-shadow .25s, background-color .35s ease;
}

.kbsr .search-result-list-item:hover {
  border-color: rgba(123, 79, 224, 0.45);
  transform: translateY(-2px);
  box-shadow: var(--kbsr-shadow);
}

body[data-theme='dark'] .kbsr .search-result-list-item:hover { border-color: rgba(167, 139, 250, 0.45); }

.kbsr .search-result-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
}

.kbsr .results-list-item-link {
  color: var(--kbsr-text);
  transition: color .2s;
}

.kbsr .search-result-list-item:hover .results-list-item-link { color: var(--kbsr-link); }

/* Zendesk wraps the matched terms in <em> — mark them without going italic */
.kbsr .search-result-title em,
.kbsr .search-results-description em {
  font-style: normal;
  font-weight: 700;
  color: var(--kbsr-link);
  background: var(--kbsr-accent-dim);
  border-radius: 4px;
  padding: 0 2px;
}

.kbsr .search-result-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kbsr-muted);
}

/* the div is always rendered, so :empty never matches (whitespace text node) —
   only claim the spacing when a vote/comment count actually landed inside */
.kbsr .search-result-icons:has(span) { margin-bottom: 8px; }

.kbsr .search-result-votes [aria-hidden='true'],
.kbsr .search-result-meta-count [aria-hidden='true'] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kbsr .search-result-votes-icon,
.kbsr .search-result-meta-count-icon {
  width: 12px;
  height: 12px;
  color: var(--kbsr-violet);
}

.kbsr .meta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--kbsr-muted);
}

.kbsr .meta-group > li { display: flex; align-items: center; }

.kbsr .search-result-breadcrumbs {
  font-size: 12px;
  gap: 5px;
}

.kbsr .search-result-breadcrumbs li:last-child { color: var(--kbsr-muted); font-weight: 400; }

.kbsr .search-results-description {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--kbsr-muted);
  overflow-wrap: break-word;
}

.kbsr .search-results-description > *:last-child { margin-bottom: 0; }

/* ── EMPTY STATE ── */
.kbsr .search-results-empty {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  background: var(--kbsr-surface2);
  border: 1px dashed var(--kbsr-border);
  border-radius: var(--kbsr-radius-lg);
  font-size: 14px;
  color: var(--kbsr-muted);
}

.kbsr .search-results-empty a {
  color: var(--kbsr-link);
  font-weight: 600;
}

/* ── PAGINATION ── */
.kbsr .pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.kbsr .pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbsr .pagination a,
.kbsr .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kbsr-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbsr-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbsr .pagination a:hover {
  color: var(--kbsr-text);
  border-color: var(--kbsr-violet);
  background: var(--kbsr-accent-dim);
}

.kbsr .pagination .pagination-current {
  background: var(--kbsr-accent);
  border-color: var(--kbsr-accent);
  color: var(--kbsr-on-accent);
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbsr { padding: 24px 24px 48px; }

  .kbsr .search-results {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .kbsr .search-results-sidebar {
    position: relative;
    top: 0;
  }

  .kbsr .collapsible-sidebar-toggle { display: inline-flex; }

  .kbsr .collapsible-sidebar-title { margin-bottom: 0; }

  .kbsr .filters-in-section .multibrand-filter-list { display: none; }

  .kbsr .filters-in-section[aria-expanded='true'] .multibrand-filter-list {
    display: flex;
    margin-top: 12px;
  }
}

@media (max-width: 700px) {
  .kbsr { padding: 20px 16px 40px; }

  .kbsr .sub-nav { flex-direction: column; align-items: stretch; }

  .kbsr .search-container { width: 100%; }

  .kbsr .page-header { margin-bottom: 22px; }

  .kbsr .search-result-list-item { padding: 18px 18px; }
}

/* =========================================================
   MY REQUESTS PAGE (kb_requests.hbs) — palette ported from the
   home page (.kbh) so home / category / section / article /
   search / requests read as one design. Everything is
   namespaced under .kbr so it cannot collide with the legacy
   rules above, the .kbs-* header, the .kbf-* footer, the
   .kbh-* home page, the .kba article, the .kbc category, the
   .kbsec section or the .kbsr search rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbr {
  /* light palette (mirrors .kbh) */
  --kbr-bg:          #FFFFFF;
  --kbr-surface:     #FFFFFF;
  --kbr-surface2:    #F1ECFB;
  --kbr-border:      rgba(123, 79, 224, 0.18);
  --kbr-border-soft: rgba(123, 79, 224, 0.10);
  --kbr-accent:      #7B4FE0;
  --kbr-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbr-accent-hover:#6634C9;
  --kbr-on-accent:   #FFFFFF;
  --kbr-violet:      #9B6FE8;
  --kbr-link:        #6634C9;
  --kbr-text:        #1A1130;
  --kbr-muted:       rgba(26, 17, 48, 0.55);
  --kbr-faint:       rgba(26, 17, 48, 0.35);
  --kbr-radius:      12px;
  --kbr-radius-lg:   20px;
  --kbr-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbr-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbr {
  /* dark palette (mirrors .kbh) */
  --kbr-bg:          #0D0D14;
  --kbr-surface:     #14141F;
  --kbr-surface2:    #1A1A28;
  --kbr-border:      rgba(255, 255, 255, 0.07);
  --kbr-border-soft: rgba(255, 255, 255, 0.05);
  --kbr-accent:      #DAFA0B;
  --kbr-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbr-accent-hover:#C4E309;
  --kbr-on-accent:   #0D0D14;
  --kbr-violet:      #A78BFA;
  --kbr-link:        #A78BFA;
  --kbr-text:        #FFFFFF;
  --kbr-muted:       rgba(255, 255, 255, 0.55);
  --kbr-faint:       rgba(255, 255, 255, 0.35);
  --kbr-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the other inner pages: the global body rule paints a slightly
   different dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so repaint
   the gutters here to match the header and footer. */
body:has(.kbr) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbr) { background: #0D0D14; }

.kbr h1,
.kbr h2,
.kbr h3 { color: var(--kbr-text); }

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

/* ── COLLAPSIBLE NAVS (activities tabs + status filters) ── */
.kbr .collapsible-nav { position: relative; }

.kbr .my-activities-nav { margin-bottom: 22px; }

.kbr .collapsible-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbr .collapsible-nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbr-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbr .collapsible-nav-list a:hover {
  color: var(--kbr-text);
  border-color: var(--kbr-violet);
  background: var(--kbr-accent-dim);
}

.kbr .collapsible-nav-list .current a,
.kbr .collapsible-nav-list a[aria-current='page'] {
  background: var(--kbr-accent);
  border-color: var(--kbr-accent);
  color: var(--kbr-on-accent);
}

.kbr .collapsible-nav-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbr-border);
  border-radius: 50%;
  background: transparent;
  color: var(--kbr-muted);
}

.kbr .collapsible-nav-toggle-icon { width: 16px; height: 16px; }

.kbr .collapsible-nav-toggle .x-icon,
.kbr .collapsible-nav-toggle[aria-expanded='true'] .chevron-icon { display: none; }

.kbr .collapsible-nav-toggle[aria-expanded='true'] .x-icon { display: block; }

/* ── PAGE HEADER ── */
.kbr .my-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--kbr-border);
}

.kbr .my-activities-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

.kbr .my-activities-sub-nav { margin-left: auto; }

/* the sub-nav is already a pill row; Copenhagen's rule box would double it up */
.kbr .collapsible-nav-border { border: 0; }

/* ── TOOLBAR: quick search + selects + subscribe ── */
.kbr .requests-table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

.kbr .requests-table-toolbar .search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  margin: 0;
  padding: 8px 16px;
  background: var(--kbr-surface2);
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbr .requests-table-toolbar .search:focus-within {
  border-color: var(--kbr-accent);
  box-shadow: 0 0 0 3px var(--kbr-accent-dim);
}

.kbr .requests-table-toolbar .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbr-muted);
  pointer-events: none;
}

.kbr .requests-search {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kbr .requests-search::placeholder { color: var(--kbr-muted); }

.kbr .request-table-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kbr .request-filter-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kbr-muted);
}

.kbr select.request-filter {
  height: 38px;
  max-width: 220px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  background-color: var(--kbr-surface);
  color: var(--kbr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* chevron drawn inline so it can follow the theme text colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231A1130' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 13px 13px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

body[data-theme='dark'] .kbr select.request-filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
}

.kbr select.request-filter:hover { border-color: var(--kbr-violet); }

.kbr select.request-filter:focus-visible {
  outline: none;
  border-color: var(--kbr-accent);
  box-shadow: 0 0 0 3px var(--kbr-accent-dim);
}

.kbr .organization-subscribe { margin-left: auto; }

.kbr .organization-subscribe button,
.kbr .organization-subscribe a,
.kbr .organization-subscribe .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbr .organization-subscribe button:hover,
.kbr .organization-subscribe a:hover,
.kbr .organization-subscribe .button:hover {
  border-color: var(--kbr-violet);
  background: var(--kbr-accent-dim);
}

/* ── SEARCH INFO / EMPTY STATE ── */
.kbr .requests-search-info {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--kbr-muted);
}

.kbr .no-activities {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  background: var(--kbr-surface2);
  border: 1px dashed var(--kbr-border);
  border-radius: var(--kbr-radius-lg);
  font-size: 14px;
  color: var(--kbr-muted);
}

/* ── REQUESTS TABLE ── */
.kbr .requests {
  border: 1px solid var(--kbr-border);
  border-radius: var(--kbr-radius-lg);
  background: var(--kbr-surface);
  overflow: hidden;
  transition: background-color .35s ease, border-color .35s ease;
}

/* the wrapper is always rendered; only dress it once a table lands inside */
.kbr .requests:not(:has(table)) {
  border: 0;
  background: none;
}

.kbr .my-activities-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kbr .my-activities-table thead th {
  padding: 12px 18px;
  background: var(--kbr-surface2);
  border-bottom: 1px solid var(--kbr-border);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kbr-muted);
  white-space: nowrap;
}

.kbr .my-activities-table thead th a {
  color: inherit;
  transition: color .2s;
}

.kbr .my-activities-table thead th a:hover { color: var(--kbr-text); }

.kbr .my-activities-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--kbr-border-soft);
  color: var(--kbr-muted);
  vertical-align: middle;
}

.kbr .my-activities-table tbody tr:last-child td { border-bottom: 0; }

.kbr .my-activities-table tbody tr { transition: background .18s; }

.kbr .my-activities-table tbody tr:hover { background: var(--kbr-accent-dim); }

.kbr .my-activities-table .request-closed { opacity: .68; }

.kbr .striped-list-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kbr-text);
  transition: color .2s;
}

.kbr .my-activities-table tbody tr:hover .striped-list-title { color: var(--kbr-link); }

.kbr .requests-table-id { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the mobile-only summary line under the subject */
.kbr .requests-table-meta {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.kbr .requests-table-meta .meta-data {
  font-size: 12px;
  color: var(--kbr-muted);
}

/* ── STATUS LABELS ── */
.kbr .status-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  background: var(--kbr-surface2);
  color: var(--kbr-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kbr .status-label-new,
.kbr .status-label-open {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.42);
}

.kbr .status-label-pending {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.45);
}

.kbr .status-label-hold {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
}

.kbr .status-label-solved,
.kbr .status-label-answered {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.42);
}

.kbr .status-label-closed {
  background: var(--kbr-surface2);
  border-color: var(--kbr-border);
  color: var(--kbr-muted);
}

/* ── PAGINATION ── */
.kbr .pagination {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.kbr .pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbr .pagination a,
.kbr .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbr-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbr .pagination a:hover {
  color: var(--kbr-text);
  border-color: var(--kbr-violet);
  background: var(--kbr-accent-dim);
}

.kbr .pagination .pagination-current {
  background: var(--kbr-accent);
  border-color: var(--kbr-accent);
  color: var(--kbr-on-accent);
}

/* ── CONTRIBUTIONS TABLE ── */
.kbr .contributions-table .contributions-table-title { min-width: 0; }

.kbr .contributions-table td { font-variant-numeric: tabular-nums; }

.kbr .contributions-table td[data-label] { white-space: nowrap; }

/* ── FOLLOWING: filter dropdown ── */
.kbr .my-activities-following-header { margin-left: auto; }

.kbr .dropdown { position: relative; display: inline-block; }

.kbr .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.kbr .dropdown-toggle:hover {
  border-color: var(--kbr-violet);
  background: var(--kbr-accent-dim);
}

.kbr .dropdown-chevron-icon {
  width: 12px;
  height: 12px;
  transition: transform .2s;
}

.kbr .dropdown-toggle[aria-expanded='true'] .dropdown-chevron-icon { transform: rotate(180deg); }

.kbr .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: none;
  min-width: 200px;
  padding: 8px;
  background: var(--kbr-surface);
  border: 1px solid var(--kbr-border);
  border-radius: var(--kbr-radius);
  box-shadow: var(--kbr-shadow);
}

.kbr .dropdown-toggle[aria-expanded='true'] + .dropdown-menu { display: block; }

.kbr .dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--kbr-text);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}

.kbr .dropdown-menu a:hover { background: var(--kbr-accent-dim); }

.kbr .dropdown-menu a[aria-selected='true'] {
  background: var(--kbr-accent-dim);
  font-weight: 700;
}

/* ── SUBSCRIPTIONS TABLE ── */
.kbr .subscriptions-table .subscriptions-table-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kbr .subscriptions-table .user-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--kbr-border);
  background: var(--kbr-surface2);
}

.kbr .subscriptions-subscribe { width: 1%; text-align: right; }

.kbr .subscriptions-subscribe button,
.kbr .subscriptions-subscribe a,
.kbr .subscriptions-subscribe .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--kbr-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbr-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbr .subscriptions-subscribe button:hover,
.kbr .subscriptions-subscribe a:hover,
.kbr .subscriptions-subscribe .button:hover {
  border-color: var(--kbr-violet);
  background: var(--kbr-accent-dim);
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbr { padding: 24px 24px 48px; }

  .kbr .my-activities-sub-nav { margin-left: 0; }

  .kbr .organization-subscribe { margin-left: 0; }
}

@media (max-width: 700px) {
  .kbr { padding: 20px 16px 40px; }

  /* Collapse both navs to the current item; the toggle reveals the rest.
     Driven from CSS only below this breakpoint, so the desktop pill rows and
     a JS-disabled browser both keep every link reachable. */
  .kbr .collapsible-nav { padding-right: 44px; }

  .kbr .collapsible-nav-toggle { display: inline-flex; }

  .kbr .collapsible-nav-list li { display: none; }

  .kbr .collapsible-nav-list .current { display: block; }

  .kbr .collapsible-nav[aria-expanded='true'] .collapsible-nav-list li { display: block; }

  .kbr .requests-table-toolbar { flex-direction: column; align-items: stretch; }

  .kbr .requests-table-toolbar .search { width: 100%; }

  .kbr .request-table-filter { justify-content: space-between; }

  .kbr select.request-filter { flex: 1; max-width: none; }

  /* Table folds into stacked cards: the subject column carries the id, date
     and status through .requests-table-meta, so hide the other columns. */
  .kbr .requests-table thead { display: none; }

  .kbr .requests-table,
  .kbr .requests-table tbody,
  .kbr .requests-table tr { display: block; width: 100%; }

  .kbr .requests-table tbody td { display: none; }

  .kbr .requests-table tbody td.requests-table-info {
    display: block;
    padding: 16px 18px;
  }

  .kbr .requests-table-meta { display: flex; }

  /* The contributions table has no mobile summary line of its own, so instead
     of dropping columns each row becomes a card and every cell carries its
     column heading from data-label. */
  .kbr .contributions-table thead { display: none; }

  .kbr .contributions-table,
  .kbr .contributions-table tbody,
  .kbr .contributions-table tr { display: block; width: 100%; }

  .kbr .contributions-table tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--kbr-border-soft);
  }

  .kbr .contributions-table tr:last-child { border-bottom: 0; }

  .kbr .contributions-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 18px;
    border-bottom: 0;
    white-space: normal;
  }

  .kbr .contributions-table tbody td.contributions-table-title { padding-top: 12px; }

  .kbr .contributions-table tbody td[data-label]::before,
  .kbr .subscriptions-table tbody td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kbr-muted);
  }

  /* Same card fold as the contributions table; the subscribe control keeps a
     row of its own at the bottom of each card. */
  .kbr .subscriptions-table thead { display: none; }

  .kbr .subscriptions-table,
  .kbr .subscriptions-table tbody,
  .kbr .subscriptions-table tr { display: block; width: 100%; }

  .kbr .subscriptions-table tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--kbr-border-soft);
  }

  .kbr .subscriptions-table tr:last-child { border-bottom: 0; }

  .kbr .subscriptions-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 18px;
    border-bottom: 0;
    white-space: normal;
  }

  .kbr .subscriptions-table tbody td.subscriptions-table-title {
    align-items: center;
    justify-content: flex-start;
    padding-top: 12px;
  }

  .kbr .subscriptions-table tbody td.subscriptions-subscribe {
    width: auto;
    justify-content: flex-start;
    padding-bottom: 12px;
  }
}

/* =========================================================
   SINGLE REQUEST PAGE (kb_request.hbs) — palette ported from
   the home page (.kbh) so every template reads as one design.
   Namespaced under .kbrq (the requests *list* is .kbr) so it
   cannot collide with the legacy rules above, the .kbs-*
   header, the .kbf-* footer, the .kbh-* home page, the .kba
   article, the .kbc category, the .kbsec section, the .kbsr
   search or the .kbr requests-list rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbrq {
  /* light palette (mirrors .kbh) */
  --kbrq-bg:          #FFFFFF;
  --kbrq-surface:     #FFFFFF;
  --kbrq-surface2:    #F1ECFB;
  --kbrq-border:      rgba(123, 79, 224, 0.18);
  --kbrq-border-soft: rgba(123, 79, 224, 0.10);
  --kbrq-accent:      #7B4FE0;
  --kbrq-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbrq-accent-hover:#6634C9;
  --kbrq-on-accent:   #FFFFFF;
  --kbrq-violet:      #9B6FE8;
  --kbrq-link:        #6634C9;
  --kbrq-text:        #1A1130;
  --kbrq-muted:       rgba(26, 17, 48, 0.55);
  --kbrq-faint:       rgba(26, 17, 48, 0.35);
  --kbrq-radius:      12px;
  --kbrq-radius-lg:   20px;
  --kbrq-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbrq-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbrq {
  /* dark palette (mirrors .kbh) */
  --kbrq-bg:          #0D0D14;
  --kbrq-surface:     #14141F;
  --kbrq-surface2:    #1A1A28;
  --kbrq-border:      rgba(255, 255, 255, 0.07);
  --kbrq-border-soft: rgba(255, 255, 255, 0.05);
  --kbrq-accent:      #DAFA0B;
  --kbrq-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbrq-accent-hover:#C4E309;
  --kbrq-on-accent:   #0D0D14;
  --kbrq-violet:      #A78BFA;
  --kbrq-link:        #A78BFA;
  --kbrq-text:        #FFFFFF;
  --kbrq-muted:       rgba(255, 255, 255, 0.55);
  --kbrq-faint:       rgba(255, 255, 255, 0.35);
  --kbrq-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the other inner pages: the global body rule paints a slightly
   different dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so repaint
   the gutters here to match the header and footer. */
body:has(.kbrq) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbrq) { background: #0D0D14; }

.kbrq h1,
.kbrq h2,
.kbrq h3 { color: var(--kbrq-text); }

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

/* ── ACTIVITIES NAV ── */
.kbrq .collapsible-nav { position: relative; }

.kbrq .my-activities-nav { margin-bottom: 22px; }

.kbrq .collapsible-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbrq .collapsible-nav-list a,
.kbrq .collapsible-nav-list li[aria-selected='true'] {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbrq-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbrq .collapsible-nav-list a:hover {
  color: var(--kbrq-text);
  border-color: var(--kbrq-violet);
  background: var(--kbrq-accent-dim);
}

/* the current entry is plain text here (you are already inside a request) */
.kbrq .collapsible-nav-list li[aria-selected='true'] {
  background: var(--kbrq-accent);
  border-color: var(--kbrq-accent);
  color: var(--kbrq-on-accent);
  cursor: default;
}

.kbrq .collapsible-nav-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbrq-border);
  border-radius: 50%;
  background: transparent;
  color: var(--kbrq-muted);
}

.kbrq .collapsible-nav-toggle-icon { width: 16px; height: 16px; }

.kbrq .collapsible-nav-toggle .x-icon,
.kbrq .collapsible-nav-toggle[aria-expanded='true'] .chevron-icon { display: none; }

.kbrq .collapsible-nav-toggle[aria-expanded='true'] .x-icon { display: block; }

/* ── PAGE HEADER ── */
.kbrq .request-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--kbrq-border);
}

.kbrq .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kbrq-muted);
}

.kbrq .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kbrq .breadcrumbs li + li::before {
  content: '/';
  color: var(--kbrq-faint);
}

.kbrq .breadcrumbs a {
  color: var(--kbrq-muted);
  transition: color .2s;
}

.kbrq .breadcrumbs a:hover { color: var(--kbrq-text); }

.kbrq .breadcrumbs li:last-child { color: var(--kbrq-text); font-weight: 600; }

.kbrq .request-title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  overflow-wrap: break-word;
}

/* ── LAYOUT ── */
.kbrq .request-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 44px;
}

.kbrq .request-main { min-width: 0; }

/* ── SATISFACTION PROMPT ── */
.kbrq .satisfaction-container:not(:empty) {
  margin-bottom: 20px;
  padding: 18px 22px;
  background: var(--kbrq-surface2);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
}

.kbrq .satisfaction-container a {
  color: var(--kbrq-link);
  font-weight: 600;
}

/* ── COMMENTS ── */
.kbrq .comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbrq .comment {
  padding: 20px 22px;
  background: var(--kbrq-surface);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbrq .comment:target { border-color: var(--kbrq-accent); }

.kbrq .comment-info { min-width: 0; }

.kbrq .comment-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.kbrq .avatar {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.kbrq .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--kbrq-border);
  background: var(--kbrq-surface2);
}

.kbrq .icon-agent {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kbrq-surface);
  color: var(--kbrq-accent);
}

body[data-theme='dark'] .kbrq .icon-agent { color: var(--kbrq-violet); }

.kbrq .comment-meta { min-width: 0; }

.kbrq .comment-meta > span,
.kbrq .comment-meta a {
  font-size: 14px;
  font-weight: 600;
  color: var(--kbrq-text);
}

.kbrq .comment-meta a:hover { color: var(--kbrq-link); }

.kbrq .meta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.kbrq .meta-data {
  font-size: 12px;
  color: var(--kbrq-muted);
}

.kbrq .comment-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kbrq-text);
  overflow-wrap: break-word;
}

.kbrq .comment-body > *:first-child { margin-top: 0; }
.kbrq .comment-body > *:last-child { margin-bottom: 0; }
.kbrq .comment-body p { margin: 0 0 .9em; }

.kbrq .comment-body a {
  color: var(--kbrq-link);
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* the global `ul { list-style: none }` reset would strip comment bullets */
.kbrq .comment-body ul,
.kbrq .comment-body ol {
  margin: 0 0 .9em;
  padding-left: 1.5em;
}

.kbrq .comment-body ul { list-style: disc; }
.kbrq .comment-body ol { list-style: decimal; }

.kbrq .comment-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--kbrq-radius);
}

.kbrq .comment-body pre {
  margin: 1em 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  background: var(--kbrq-surface2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ── ATTACHMENTS ── */
.kbrq .attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.kbrq .attachment-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: var(--kbrq-surface2);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  font-size: 13px;
  transition: border-color .2s;
}

.kbrq .attachment-item:hover { border-color: var(--kbrq-violet); }

.kbrq .attachment-icon {
  flex-shrink: 0;
  color: var(--kbrq-violet);
}

.kbrq .attachment-item > a {
  font-weight: 600;
  color: var(--kbrq-text);
  overflow-wrap: anywhere;
}

.kbrq .attachment-item > a:hover { color: var(--kbrq-link); }

.kbrq .attachment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0 auto;
  color: var(--kbrq-muted);
}

.kbrq .attachment-meta-item { font-size: 12px; }

.kbrq a.attachment-meta-item {
  color: var(--kbrq-link);
  font-weight: 600;
}

/* ── PAGINATION ── */
.kbrq .pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.kbrq .pagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbrq .pagination a,
.kbrq .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbrq-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.kbrq .pagination a:hover {
  color: var(--kbrq-text);
  border-color: var(--kbrq-violet);
  background: var(--kbrq-accent-dim);
}

.kbrq .pagination .pagination-current {
  background: var(--kbrq-accent);
  border-color: var(--kbrq-accent);
  color: var(--kbrq-on-accent);
}

/* ── FOLLOW-UP CALLOUT (closed requests) ── */
.kbrq .request-follow-up:not(:empty) {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--kbrq-accent-dim);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  font-size: 13.5px;
  color: var(--kbrq-text);
}

.kbrq .request-follow-up a {
  color: var(--kbrq-link);
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ── COMMENT FORM ── */
.kbrq .comment-form {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 22px;
  background: var(--kbrq-surface2);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius-lg);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbrq .comment-container { flex: 1; min-width: 0; }

/* Collapsed state: kb_script.js swaps these classes when the reply box opens.
   With JS off the fields stay visible and only the trigger is hidden. */
.kbrq .comment-show-container {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  background: var(--kbrq-surface);
  color: var(--kbrq-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbrq .comment-show-container:hover {
  border-color: var(--kbrq-violet);
  background: var(--kbrq-accent-dim);
}

.kbrq .comment-show-container.hidden { display: none; }

.kbrq .comment-fields.is-collapsed,
.kbrq .request-submit-comment.is-collapsed,
.kbrq .mark-as-solved.is-collapsed { display: none; }

.kbrq .comment-ccs { margin-bottom: 12px; }

.kbrq .comment-container textarea,
.kbrq .comment-container input[type='text'],
.kbrq .comment-container .ccs-input,
.kbrq .comment-container [contenteditable='true'] {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  background: var(--kbrq-surface);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  color: var(--kbrq-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}

.kbrq .comment-container .ccs-input,
.kbrq .comment-container input[type='text'] { min-height: 0; }

.kbrq .comment-container textarea:focus,
.kbrq .comment-container input[type='text']:focus,
.kbrq .comment-container [contenteditable='true']:focus {
  border-color: var(--kbrq-accent);
  box-shadow: 0 0 0 3px var(--kbrq-accent-dim);
}

.kbrq .comment-attachments { margin-top: 12px; }

.kbrq .comment-attachments a,
.kbrq .comment-attachments .upload-dropzone {
  color: var(--kbrq-link);
  font-size: 13px;
  font-weight: 600;
}

.kbrq .comment-form-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* the raw checkbox is redundant next to the "mark as solved" button, but it is
   the only control when that button is absent — so hide it only alongside it */
.kbrq .comment-form-controls:has(.mark-as-solved) [type='checkbox'],
.kbrq .comment-form-controls:has(.mark-as-solved) [for='mark_as_solved'] {
  display: none;
}

.kbrq .comment-form-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kbrq-muted);
}

.kbrq .request-submit-comment { margin-left: auto; }

.kbrq .button,
.kbrq input[type='submit'].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border: none;
  border-radius: 100px;
  background: var(--kbrq-accent);
  color: var(--kbrq-on-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.kbrq .button:hover,
.kbrq input[type='submit'].button:hover {
  background: var(--kbrq-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--kbrq-accent-dim);
}

.kbrq .button-secondary,
.kbrq .mark-as-solved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  background: transparent;
  color: var(--kbrq-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbrq .button-secondary:hover,
.kbrq .mark-as-solved:hover {
  border-color: var(--kbrq-violet);
  background: var(--kbrq-accent-dim);
}

/* ── SIDEBAR: ticket details ── */
.kbrq .request-sidebar {
  position: sticky;
  top: 88px;
  padding: 20px 22px;
  background: var(--kbrq-surface);
  border: 1px solid var(--kbrq-border);
  border-radius: var(--kbrq-radius);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbrq .collapsible-sidebar-title {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kbrq-accent);
}

body[data-theme='dark'] .kbrq .collapsible-sidebar-title { color: var(--kbrq-violet); }

.kbrq .collapsible-sidebar-toggle {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kbrq-border);
  border-radius: 50%;
  background: transparent;
  color: var(--kbrq-muted);
}

.kbrq .collapsible-sidebar-toggle-icon { width: 16px; height: 16px; }

.kbrq .collapsible-sidebar-toggle .x-icon,
.kbrq .collapsible-sidebar-toggle[aria-expanded='true'] .chevron-icon { display: none; }

.kbrq .collapsible-sidebar-toggle[aria-expanded='true'] .x-icon { display: block; }

.kbrq .request-details {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--kbrq-border-soft);
}

.kbrq .request-details + .request-details { padding-top: 14px; }

.kbrq .request-details:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.kbrq .request-details dt {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kbrq-muted);
}

.kbrq .request-details dd {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--kbrq-text);
  overflow-wrap: break-word;
}

.kbrq .request-details dd:last-child { margin-bottom: 0; }

.kbrq .request-details dd a {
  color: var(--kbrq-link);
  font-weight: 600;
}

.kbrq .request-collaborators {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbrq .request-collaborators li { line-height: 1.5; }

.kbrq #request-organization select,
.kbrq .request-details select {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  background-color: var(--kbrq-surface2);
  color: var(--kbrq-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* chevron drawn inline so it can follow the theme text colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231A1130' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

body[data-theme='dark'] .kbrq #request-organization select,
body[data-theme='dark'] .kbrq .request-details select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
}

.kbrq .request-attachments .attachments { margin-top: 0; }

.kbrq .request-attachments .attachment-item {
  padding: 8px 12px;
  font-size: 12px;
}

.kbrq .request-attachments .attachment-meta { margin-left: 0; }

/* ── STATUS LABELS ── */
.kbrq .status-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid var(--kbrq-border);
  border-radius: 100px;
  background: var(--kbrq-surface2);
  color: var(--kbrq-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kbrq .status-label-new,
.kbrq .status-label-open {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.42);
}

.kbrq .status-label-pending {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.45);
}

.kbrq .status-label-hold {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
}

.kbrq .status-label-solved,
.kbrq .status-label-answered {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.42);
}

.kbrq .status-label-closed {
  background: var(--kbrq-surface2);
  border-color: var(--kbrq-border);
  color: var(--kbrq-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbrq { padding: 24px 24px 48px; }

  .kbrq .request-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* details move above the conversation when they stack */
  .kbrq .request-sidebar {
    position: relative;
    top: 0;
    order: -1;
  }

  .kbrq .collapsible-sidebar-toggle { display: inline-flex; }

  .kbrq .collapsible-sidebar-title { margin-bottom: 0; }

  .kbrq .collapsible-sidebar-body { display: none; }

  .kbrq .collapsible-sidebar-toggle[aria-expanded='true'] ~ .collapsible-sidebar-body {
    display: block;
    margin-top: 14px;
  }
}

@media (max-width: 700px) {
  .kbrq { padding: 20px 16px 40px; }

  .kbrq .collapsible-nav { padding-right: 44px; }

  .kbrq .collapsible-nav-toggle { display: inline-flex; }

  .kbrq .collapsible-nav-list li { display: none; }

  .kbrq .collapsible-nav-list .current { display: inline-flex; }

  .kbrq .collapsible-nav[aria-expanded='true'] .collapsible-nav-list li { display: block; }

  .kbrq .collapsible-nav[aria-expanded='true'] .collapsible-nav-list .current { display: inline-flex; }

  .kbrq .comment-form { flex-direction: column; padding: 18px; }

  .kbrq .comment-form-controls { flex-direction: column; align-items: stretch; }

  .kbrq .request-submit-comment { margin-left: 0; }

  .kbrq .request-submit-comment .button,
  .kbrq .mark-as-solved { width: 100%; }

  .kbrq .attachment-meta { margin-left: 0; }
}

/* =========================================================
   NEW REQUEST PAGE (kb_new_request.hbs) — palette ported from
   the home page (.kbh) so every template reads as one design.
   Namespaced under .kbnr (the requests *list* is .kbr and a
   single request is .kbrq) so it cannot collide with the
   legacy rules above, the .kbs-* header, the .kbf-* footer,
   the .kbh-* home page, the .kba article, the .kbc category,
   the .kbsec section, the .kbsr search, the .kbr requests-list
   or the .kbrq request rules.
   Light theme = default, dark = body[data-theme='dark'].
   ========================================================= */

.kbnr {
  /* light palette (mirrors .kbh) */
  --kbnr-bg:          #FFFFFF;
  --kbnr-surface:     #FFFFFF;
  --kbnr-surface2:    #F1ECFB;
  --kbnr-border:      rgba(123, 79, 224, 0.18);
  --kbnr-border-soft: rgba(123, 79, 224, 0.10);
  --kbnr-accent:      #7B4FE0;
  --kbnr-accent-dim:  rgba(123, 79, 224, 0.10);
  --kbnr-accent-hover:#6634C9;
  --kbnr-on-accent:   #FFFFFF;
  --kbnr-violet:      #9B6FE8;
  --kbnr-link:        #6634C9;
  --kbnr-text:        #1A1130;
  --kbnr-muted:       rgba(26, 17, 48, 0.55);
  --kbnr-faint:       rgba(26, 17, 48, 0.35);
  --kbnr-danger:      #DC2626;
  --kbnr-radius:      12px;
  --kbnr-radius-lg:   20px;
  --kbnr-shadow:      0 16px 40px rgba(15, 23, 42, .10);

  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kbnr-text);
  /* .container gives 24px gutters; the header/footer inset their content by
     48px, so match that on desktop and step down with them on small screens. */
  padding: 28px 48px 64px;
  transition: color .35s ease;
}

body[data-theme='dark'] .kbnr {
  /* dark palette (mirrors .kbh) */
  --kbnr-bg:          #0D0D14;
  --kbnr-surface:     #14141F;
  --kbnr-surface2:    #1A1A28;
  --kbnr-border:      rgba(255, 255, 255, 0.07);
  --kbnr-border-soft: rgba(255, 255, 255, 0.05);
  --kbnr-accent:      #DAFA0B;
  --kbnr-accent-dim:  rgba(218, 250, 11, 0.12);
  --kbnr-accent-hover:#C4E309;
  --kbnr-on-accent:   #0D0D14;
  --kbnr-violet:      #A78BFA;
  --kbnr-link:        #A78BFA;
  --kbnr-text:        #FFFFFF;
  --kbnr-muted:       rgba(255, 255, 255, 0.55);
  --kbnr-faint:       rgba(255, 255, 255, 0.35);
  --kbnr-danger:      #F87171;
  --kbnr-shadow:      0 16px 40px rgba(0, 0, 0, .35);
}

/* Same as the other inner pages: the global body rule paints a slightly
   different dark navy (#0F1424) than the .kbh/.kbs/.kbf dark bg, so repaint
   the gutters here to match the header and footer. */
body:has(.kbnr) { background: #FFFFFF; }
body[data-theme='dark']:has(.kbnr) { background: #0D0D14; }

.kbnr h1,
.kbnr h2,
.kbnr h3 { color: var(--kbnr-text); }

/* ── SUB NAV: breadcrumbs + search ── */
.kbnr .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.kbnr .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--kbnr-muted);
}

.kbnr .breadcrumbs li { display: flex; align-items: center; gap: 6px; }

.kbnr .breadcrumbs li + li::before {
  content: '/';
  color: var(--kbnr-faint);
}

.kbnr .breadcrumbs a {
  color: var(--kbnr-muted);
  transition: color .2s;
}

.kbnr .breadcrumbs a:hover { color: var(--kbnr-text); }

.kbnr .breadcrumbs li:last-child { color: var(--kbnr-text); font-weight: 600; }

/* Zendesk {{search}} helper, styled like the header/home search pill */
.kbnr .search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 8px 16px;
  background: var(--kbnr-surface2);
  border: 1px solid var(--kbnr-border);
  border-radius: 100px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbnr .search-container:focus-within {
  border-color: var(--kbnr-accent);
  box-shadow: 0 0 0 3px var(--kbnr-accent-dim);
}

.kbnr .search-container .search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--kbnr-muted);
  pointer-events: none;
}

.kbnr .search-container .search,
.kbnr .search-container form {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.kbnr .search-container #query,
.kbnr .search-container input[type='search'] {
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--kbnr-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.kbnr .search-container #query::placeholder,
.kbnr .search-container input[type='search']::placeholder { color: var(--kbnr-muted); }

/* ── PAGE HEADER ── */
.kbnr .page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--kbnr-border);
}

.kbnr .page-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

/* {{follow_up}} renders a link back to the closed request, or nothing at all —
   without this the empty paragraph would still claim its top margin. */
.kbnr .follow-up-hint {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--kbnr-muted);
}

.kbnr .follow-up-hint:not(:has(a)) { display: none; }

.kbnr .follow-up-hint a {
  color: var(--kbnr-link);
  font-weight: 600;
}

/* ── FORM SHELL ── */
.kbnr .form {
  max-width: 720px;
  padding: 26px 28px;
  background: var(--kbnr-surface);
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius-lg);
  transition: background-color .35s ease, border-color .35s ease;
}

.kbnr .form form { margin: 0; }

.kbnr .form-field { margin-bottom: 20px; }

.kbnr .form-field:last-of-type { margin-bottom: 0; }

.kbnr .form-field > label,
.kbnr .form-field > .form-field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kbnr-text);
}

/* the asterisk Zendesk appends to a required field's label */
.kbnr .form-field > label span,
.kbnr .form-field > label .required { color: var(--kbnr-accent); }

body[data-theme='dark'] .kbnr .form-field > label span,
body[data-theme='dark'] .kbnr .form-field > label .required { color: var(--kbnr-violet); }

/* the small grey description under a field */
.kbnr .form-field p,
.kbnr .form-field .form-field-hint,
.kbnr .form-field .hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kbnr-muted);
}

/* ── CONTROLS ── */
.kbnr input[type='text'],
.kbnr input[type='email'],
.kbnr input[type='tel'],
.kbnr input[type='url'],
.kbnr input[type='number'],
.kbnr input[type='date'],
.kbnr input[type='password'],
.kbnr textarea,
.kbnr .nesty-input,
.kbnr [contenteditable='true'],
.kbnr trix-editor {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  background: var(--kbnr-surface2);
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius);
  color: var(--kbnr-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

.kbnr textarea,
.kbnr [contenteditable='true'],
.kbnr trix-editor {
  min-height: 150px;
  resize: vertical;
}

.kbnr input:focus,
.kbnr textarea:focus,
.kbnr select:focus,
.kbnr [contenteditable='true']:focus,
.kbnr trix-editor:focus,
.kbnr .nesty-input:focus {
  border-color: var(--kbnr-accent);
  box-shadow: 0 0 0 3px var(--kbnr-accent-dim);
}

.kbnr input::placeholder,
.kbnr textarea::placeholder { color: var(--kbnr-muted); }

/* .nesty-input is the div Zendesk uses as the trigger for a nested drop-down */
.kbnr .nesty-input {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.kbnr select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius);
  background-color: var(--kbnr-surface2);
  color: var(--kbnr-text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* chevron drawn inline so it can follow the theme text colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231A1130' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 13px 13px;
  transition: border-color .2s, box-shadow .2s, background-color .35s ease;
}

body[data-theme='dark'] .kbnr select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
}

.kbnr select:hover,
.kbnr .nesty-input:hover { border-color: var(--kbnr-violet); }

/* The nested drop-down panel is appended to <body>, outside .kbnr — scope it
   to the page with :has() so it still follows the theme. */
body:has(.kbnr) #nesty-panel {
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(123, 79, 224, 0.18);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  color: #1A1130;
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
}

body[data-theme='dark']:has(.kbnr) #nesty-panel {
  background: #14141F;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  color: #FFFFFF;
}

body:has(.kbnr) #nesty-panel li a,
body:has(.kbnr) #nesty-panel .nesty-item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  transition: background .15s;
}

body:has(.kbnr) #nesty-panel li a:hover,
body:has(.kbnr) #nesty-panel .nesty-item:hover,
body:has(.kbnr) #nesty-panel .nesty-active { background: rgba(123, 79, 224, 0.10); }

body[data-theme='dark']:has(.kbnr) #nesty-panel li a:hover,
body[data-theme='dark']:has(.kbnr) #nesty-panel .nesty-item:hover,
body[data-theme='dark']:has(.kbnr) #nesty-panel .nesty-active { background: rgba(218, 250, 11, 0.12); }

/* ── CHECKBOX FIELDS ── */
.kbnr .form-field.checkbox label,
.kbnr .form-field .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--kbnr-text);
  cursor: pointer;
}

.kbnr input[type='checkbox'],
.kbnr input[type='radio'] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--kbnr-accent);
  cursor: pointer;
}

/* ── CC / COLLABORATOR TOKENS ── */
.kbnr .token-input-list,
.kbnr ul.token-input-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  list-style: none;
  background: var(--kbnr-surface2);
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius);
}

.kbnr .token-input-list:focus-within {
  border-color: var(--kbnr-accent);
  box-shadow: 0 0 0 3px var(--kbnr-accent-dim);
}

.kbnr .token-input-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--kbnr-accent-dim);
  font-size: 12.5px;
}

.kbnr .token-input-token p { margin: 0; font-size: inherit; color: var(--kbnr-text); }

.kbnr .token-input-delete-token { cursor: pointer; color: var(--kbnr-muted); }

.kbnr .token-input-input-token input {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ── ATTACHMENTS ── */
.kbnr .upload-dropzone,
.kbnr .form-field .dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 18px;
  text-align: center;
  background: var(--kbnr-surface2);
  border: 1px dashed var(--kbnr-border);
  border-radius: var(--kbnr-radius);
  font-size: 13px;
  color: var(--kbnr-muted);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.kbnr .upload-dropzone:hover,
.kbnr .upload-dropzone.dz-drag-hover {
  border-color: var(--kbnr-accent);
  background: var(--kbnr-accent-dim);
  color: var(--kbnr-text);
}

.kbnr .upload-dropzone a,
.kbnr .upload-dropzone label {
  color: var(--kbnr-link);
  font-weight: 600;
}

.kbnr .upload-item,
.kbnr .attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--kbnr-surface2);
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius);
  font-size: 13px;
}

.kbnr .upload-item a { color: var(--kbnr-text); font-weight: 600; overflow-wrap: anywhere; }

.kbnr .upload-item .delete-attachment,
.kbnr .upload-item .remove { margin-left: auto; color: var(--kbnr-muted); cursor: pointer; }

/* ── ARTICLE SUGGESTIONS (instant search under the subject field) ── */
.kbnr .suggestion-list {
  margin: 14px 0 0;
  padding: 16px 18px;
  background: var(--kbnr-surface2);
  border: 1px solid var(--kbnr-border);
  border-radius: var(--kbnr-radius);
}

.kbnr .suggestion-list p,
.kbnr .suggestion-list-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kbnr-accent);
}

body[data-theme='dark'] .kbnr .suggestion-list p,
body[data-theme='dark'] .kbnr .suggestion-list-title { color: var(--kbnr-violet); }

.kbnr .suggestion-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbnr .suggestion-list li a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--kbnr-muted);
  transition: background .18s, color .18s;
}

.kbnr .suggestion-list li a:hover {
  background: var(--kbnr-accent-dim);
  color: var(--kbnr-text);
}

/* ── VALIDATION ── */
.kbnr .notification,
.kbnr .notification-error,
.kbnr .error-message,
.kbnr .form-field-error {
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: var(--kbnr-radius);
  background: rgba(239, 68, 68, 0.12);
  font-size: 13px;
  color: var(--kbnr-text);
}

.kbnr .form-field-error {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--kbnr-danger);
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
}

.kbnr .form-field.error input,
.kbnr .form-field.error textarea,
.kbnr .form-field.error select { border-color: rgba(239, 68, 68, 0.55); }

/* ── SUBMIT ── */
.kbnr .form footer,
.kbnr .form-field-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--kbnr-border-soft);
}

.kbnr .button,
.kbnr input[type='submit'],
.kbnr button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 30px;
  border: none;
  border-radius: 100px;
  background: var(--kbnr-accent);
  color: var(--kbnr-on-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.kbnr .button:hover,
.kbnr input[type='submit']:hover,
.kbnr button[type='submit']:hover {
  background: var(--kbnr-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--kbnr-accent-dim);
}

.kbnr input[type='submit']:disabled,
.kbnr button[type='submit']:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.kbnr .form footer a {
  color: var(--kbnr-muted);
  font-size: 13px;
  font-weight: 600;
}

.kbnr .form footer a:hover { color: var(--kbnr-text); }

/* ── RESPONSIVE ── */
@media (max-width: 940px) {
  .kbnr { padding: 24px 24px 48px; }
}

@media (max-width: 700px) {
  .kbnr { padding: 20px 16px 40px; }

  .kbnr .sub-nav { flex-direction: column; align-items: stretch; }

  .kbnr .search-container { width: 100%; }

  .kbnr .page-header { margin-bottom: 24px; }

  .kbnr .form { padding: 20px 18px; }

  .kbnr .form footer { justify-content: stretch; }

  .kbnr .form footer .button,
  .kbnr .form footer input[type='submit'] { width: 100%; }
}