@charset "UTF-8";
/* Avid Help Center Copenhagen theme redesign */

/* Holiday Banner */
.holiday-banner {
  max-width: var(--layout-content-width);
  margin: -3rem auto 2rem;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.08), rgba(251, 146, 60, 0.06));
  border-left: 4px solid var(--color-warning);
}

.holiday-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.holiday-banner__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-warning);
  margin-top: 0.1rem;
}

.holiday-banner__text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.holiday-banner__text strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.holiday-banner__link {
  display: inline-block;
  /*margin-left: 0.5rem;*/
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.holiday-banner__link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}


@font-face {
  font-family: "Montserrat";
  src: local("Montserrat"), url("//help.avidai.com/hc/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.sc-64401f43-2 {
  display: none;
}

:root {
  --font-sans: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  --color-background: #F5F7FB;
  --color-background-alt: #eef2ff;
  --color-surface: rgba(255, 255, 255, 0.82);
  --color-surface-soft: rgba(255, 255, 255, 0.72);
  --color-surface-strong: rgba(255, 255, 255, 0.96);
  --color-border: rgba(25, 39, 74, 0.08);
  --color-border-strong: rgba(25, 39, 74, 0.16);
  --color-divider: rgba(33, 56, 107, 0.1);
  --color-text-primary: #1f2433;
  --color-text-secondary: rgba(43, 55, 79, 0.78);
  --color-text-muted: rgba(75, 86, 113, 0.62);
  --color-link: #3b5bfd;
  --color-link-hover: #2643e8;
  --color-primary: #f9423a;
  --color-primary-strong: #f02519;
  --color-accent: #dea58a;
  --color-success: #50c878;
  --color-warning: #f6c343;
  --color-danger: #ff6b6b;
  --shadow-soft: 0 20px 60px rgba(28, 41, 82, 0.18);
  --shadow-card: 0 24px 60px rgba(28, 41, 82, 0.16);
  --shadow-inner: inset 0 0 0 1px rgba(33, 56, 107, 0.04);
  --focus-outline: 3px solid rgba(59, 91, 253, 0.6);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --layout-max-width: 1320px;
  --layout-content-width: 1160px;
  --article-rail-width: 240px;
  --search-expanded-width: 420px;
  --space-1: clamp(0.4rem, 1vw, 0.75rem);
  --space-2: clamp(0.75rem, 1.4vw, 1.35rem);
  --space-3: clamp(1rem, 2vw, 1.75rem);
  --space-4: clamp(1.5rem, 3vw, 2.5rem);
  --space-5: clamp(2rem, 4vw, 3.5rem);
  --form-field-max-width: 680px;
  --header-height: 84px;
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-long: 380ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-smooth: 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  /* Always show scrollbar to prevent layout shift */
  scrollbar-gutter: stable;
  /* Reserve space for scrollbar */
  scroll-padding-top: 140px !important;
  /* Prevent sticky header from covering anchor links */
  overflow-x: hidden;
  /* Prevent horizontal scroll (moved from body) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Better font rendering for animations */
  text-rendering: optimizeLegibility;
}

/* Mobile-specific performance optimizations */
@media (max-width: 768px) {
  html {
    /* Faster scrolling on mobile */
    scroll-behavior: auto;
  }

  body {
    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce backdrop-filter blur on mobile for better performance */
  .cph-header,
  .dropdown-menu {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
  }

  /* Optimize animations for mobile */
  * {
    animation-duration: 0.85;
    /* Slightly faster animations on mobile */
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow: visible !important;
  /* Ensure body is not a scroll container (fixes sticky positioning) */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  scroll-padding-top: 140px !important;
}

body.nav-open {
  overflow: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20% -10% -20% -10%;
  pointer-events: none;
  z-index: -2;
  filter: blur(140px);
  opacity: 0.8;
}

body::before {
  background:
    radial-gradient(45% 45% at 15% 20%, rgba(249, 66, 58, 0.16), transparent 70%),
    radial-gradient(32% 32% at 85% 8%, rgba(59, 91, 253, 0.18), transparent 65%);
}

/* ============================================================================
   Performance & Accessibility Optimizations
   ========================================================================== */

/* Respect user's motion preferences - CRITICAL for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch optimization for mobile - prevents 300ms delay */
a,
button,
[role="button"],
.button,
input,
textarea,
select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(59, 91, 253, 0.1);
}

/* Optimize images for performance */
img {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body::after {
  background: radial-gradient(42% 42% at 68% 78%, rgba(255, 181, 148, 0.28), transparent 70%);
  opacity: 0.65;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 91, 253, 0.15);
  border-radius: 4px;
}

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

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

p {
  margin: 0 0 1.5rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

strong {
  color: var(--color-text-primary);
}

em {
  font-style: italic;
}

code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(59, 91, 253, 0.14), rgba(59, 91, 253, 0.1));
  color: var(--color-text-primary);
  border: 1px solid rgba(59, 91, 253, 0.15);
}

pre code {
  padding: 0;
  background: transparent;
  border: none;
}

pre {
  margin: 2.25rem 0;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 255, 0.96));
  border: 1px solid rgba(59, 91, 253, 0.2);
  overflow: auto;
  box-shadow: 0 2px 12px rgba(28, 41, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

pre:hover {
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 4px 16px rgba(28, 41, 82, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

blockquote {
  margin: 2.5rem 0;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: rgba(59, 91, 253, 0.08);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

hr {
  border: none;
  height: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(90deg, transparent, rgba(33, 56, 107, 0.2), transparent);
}

.article-body hr {
  margin: 3rem 0;
}

svg {
  flex-shrink: 0;
}

.visibility-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.container {
  width: min(100%, 1600px);
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
  box-sizing: border-box;
}

.container--wide {
  width: min(100%, 1440px);
}

.section {
  margin: clamp(32px, 6vw, 64px) 0;
}

.section-header {
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 640px;
}

.section-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}

.section-title {
  font-size: clamp(1.75rem, 2.8vw, 2.6rem);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0 0 0.75rem;
}

.section-lede {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text-secondary);
}

.glass-panel {
  position: relative;
  background: var(--color-surface);
  background-clip: padding-box;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  box-shadow: var(--shadow-soft);
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(33, 56, 107, 0.04);
  pointer-events: none;
}

.button,
.button-primary,
.button-secondary,
.button-large,
.button-small,
.pagination a,
.submit-a-request,
.search button[type="submit"],
.search button[type="reset"],
.article-subscribe button,
.article-subscribe .button,
.article-subscribe .button-primary,
.article-subscribe .button-secondary,
.section-subscribe button,
.section-subscribe .button,
.section-subscribe .button-primary,
.section-subscribe .button-secondary {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.1;
  border-radius: var(--radius-pill);
  border: 1px solid #1f54d9;
  padding: 0.75rem 1.45rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  will-change: transform;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  background: #2863fe;
  color: #ffffff;
  text-decoration: none;
}

.button:hover,
.button:focus-visible,
.button-primary:hover,
.button-primary:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible,
.submit-a-request:hover,
.submit-a-request:focus-visible,
.search button[type="submit"]:hover,
.search button[type="submit"]:focus-visible,
.article-subscribe button:hover,
.article-subscribe button:focus-visible,
.section-subscribe button:hover,
.section-subscribe button:focus-visible {
  transform: translateY(-1px);
  background: #1f54d9;
  color: #ffffff;
}

.button-primary,
.submit-a-request,
.search button[type="submit"],
.article-vote.article-vote-up.button-primary,
.article-vote.article-vote-down.button-primary,
.article-subscribe button,
.section-subscribe button {
  background: #2863fe;
  color: #ffffff;
  border-color: #2863fe;
  box-shadow: none;
}

.button-primary:hover,
.button-primary:focus-visible,
.submit-a-request:hover,
.submit-a-request:focus-visible,
.search button[type="submit"]:hover,
.search button[type="submit"]:focus-visible,
.article-subscribe button:hover,
.article-subscribe button:focus-visible,
.section-subscribe button:hover,
.section-subscribe button:focus-visible {
  background: #1f54d9;
  color: #ffffff;
}

.button-secondary,
.search button[type="reset"] {
  background: #1f54d9;
  color: #ffffff;
  border-color: #1f4ad2;
}

/* Button active states */
.button:active,
.button-primary:active,
.button-secondary:active,
.submit-a-request:active,
.search button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Button disabled states */
.button:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.submit-a-request:disabled,
.search button[type="submit"]:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

/* Button loading state */
.button.loading,
.button-primary.loading,
.button-secondary.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.button.loading::after,
.button-primary.loading::after,
.button-secondary.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spin 0.6s linear infinite;
}

@keyframes button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

input,
textarea,
select {
  font-family: var(--font-sans);
  font-size: 1rem;
  background: rgba(59, 91, 253, 0.06);
  border: 1px solid rgba(59, 91, 253, 0.12);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: 0.85rem 1rem;
  transition: border var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
textarea,
select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
.form textarea,
.form select,
.comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
.comment-form textarea,
.comment-form select,
.comment-form .ccs-input,
.requests-table-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
.requests-table-toolbar textarea,
.requests-table-toolbar select,
.request-sidebar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
.request-sidebar textarea,
.request-sidebar select {
  max-width: var(--form-field-max-width);
}

.form .form-field,
.comment-form .comment-fields,
.comment-form .comment-form-controls,
.requests-table-toolbar .request-table-filter,
.requests-table-toolbar .search,
.requests-table-toolbar .organization-subscribe {
  width: 100%;
  max-width: var(--form-field-max-width);
  box-sizing: border-box;
}

.requests-table-toolbar {
  justify-items: start;
}

.search {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.search input[type="search"] {
  padding-right: 2.6rem;
  width: 100%;
  max-width: 520px;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(28, 41, 82, 0.06);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search input[type="search"]:hover {
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 3px 10px rgba(28, 41, 82, 0.08);
}

.search input[type="search"]:focus {
  border-color: rgba(59, 91, 253, 0.4);
  box-shadow: 0 4px 12px rgba(28, 41, 82, 0.1);
}

.search input[type="search"]::-webkit-search-decoration,
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-results-button,
.search input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.search input[type="search"]::-ms-clear,
.search input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.search .clear-button--embedded {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(59, 91, 253, 0.08);
  color: rgba(33, 56, 107, 0.7);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), background var(--transition-fast), border var(--transition-fast), color var(--transition-fast);
}

.search.search-has-value .clear-button--embedded,
.search input[type="search"]:not(:placeholder-shown)~.clear-button--embedded {
  opacity: 1;
  pointer-events: auto;
}

.search .clear-button--embedded:hover,
.search .clear-button--embedded:focus-visible {
  background: rgba(59, 91, 253, 0.16);
  border-color: rgba(59, 91, 253, 0.26);
  color: var(--color-text-primary);
}

input:hover,
textarea:hover,
select:hover {
  background: rgba(59, 91, 253, 0.1);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(59, 91, 253, 0.45);
  box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

/* Validation states */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.04);
}

input:invalid:not(:placeholder-shown):focus,
textarea:invalid:not(:placeholder-shown):focus,
select:invalid:focus {
  border-color: rgba(220, 38, 38, 0.6);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: rgba(34, 197, 94, 0.4);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(33, 56, 107, 0.04);
}

input[required]:not(:placeholder-shown):valid,
textarea[required]:not(:placeholder-shown):valid,
select[required]:valid {
  border-color: rgba(34, 197, 94, 0.4);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text-primary);
}

label.required::after {
  content: " *";
  color: rgba(220, 38, 38, 0.7);
}

/* Default tables inside article body (NOT the Applies table) */
.article-body .table,
.article-body table:not(.applies-table) {
  width: 100%;
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(28, 41, 82, 0.06);
}

.article-body table:not(.applies-table) thead {
  background: linear-gradient(180deg, rgba(59, 91, 253, 0.12), rgba(59, 91, 253, 0.08));
  color: var(--color-text-primary);
}

.article-body table:not(.applies-table) th {
  padding: 1.25rem 1.5rem;
  vertical-align: top;
  border-bottom: 2px solid rgba(33, 56, 107, 0.14);
  text-align: left;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.article-body table:not(.applies-table) td {
  padding: 1.1rem 1.5rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(33, 56, 107, 0.08);
  text-align: left;
  color: var(--color-text-secondary);
}

.article-body table:not(.applies-table) tbody tr:nth-child(even) {
  background: rgba(59, 91, 253, 0.03);
}

.article-body table:not(.applies-table) tbody tr:hover {
  background: rgba(59, 91, 253, 0.1);
  transition: background var(--transition-fast);
}

.article-body table:not(.applies-table) tbody tr:last-child td {
  border-bottom: none;
}

/* Applies-to meta table */
.article-body table.applies-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  border: 1px solid rgba(33, 56, 107, 0.12);
  background: #fff;
  margin: 1.5rem 0;
  box-shadow: 0 6px 18px rgba(28, 41, 82, 0.06);
}

/* Rows – soft dividers only between rows */
.article-body table.applies-table tr+tr td {
  border-top: 1px solid rgba(33, 56, 107, 0.08);
}

/* Left column: labels (INTEGRATIONS, PLANS…) */
.article-body table.applies-table th {
  width: 8rem;
  padding: 0.9rem 1.5rem;
  vertical-align: top;
  text-align: left;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(33, 56, 107, 0.6);
  border: 0;
  white-space: nowrap;
}

/* Right column: values */
.article-body table.applies-table td {
  padding: 0.9rem 1.5rem;
  vertical-align: top;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  border: 0;
}

/* Kill striping/hover for this table */
.article-body table.applies-table tbody tr:nth-child(even),
.article-body table.applies-table tbody tr:hover {
  background: transparent;
}

/* Mobile layout for Applies table */
@media (max-width: 768px) {

  .article-body table.applies-table,
  .article-body table.applies-table tbody,
  .article-body table.applies-table tr,
  .article-body table.applies-table th,
  .article-body table.applies-table td {
    display: block;
    width: 100%;
  }

  .article-body table.applies-table th {
    margin-bottom: 0.15rem;
  }

  .article-body table.applies-table tr {
    padding: 0.85rem 1.25rem;
  }

  .article-body table.applies-table tr+tr {
    border-top: 1px solid rgba(33, 56, 107, 0.08);
  }
}

.status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
  background: rgba(59, 91, 253, 0.12);
  border: 1px solid rgba(59, 91, 253, 0.18);
}

.status-label-pinned {
  background: rgba(249, 66, 58, 0.14);
  border-color: rgba(249, 66, 58, 0.34);
  color: #a11d1a;
}

.status-label-featured {
  background: rgba(222, 165, 138, 0.2);
  border-color: rgba(222, 165, 138, 0.42);
  color: #6f3a24;
}

.status-label-official {
  background: rgba(80, 200, 120, 0.18);
  border-color: rgba(80, 200, 120, 0.38);
  color: #1f6a3b;
}

.status-label-pending-moderation {
  background: rgba(246, 195, 67, 0.2);
  border-color: rgba(246, 195, 67, 0.45);
  color: #6b4b0f;
}

.status-label-request {
  background: rgba(59, 91, 253, 0.14);
  border-color: rgba(59, 91, 253, 0.32);
  color: var(--color-link);
}

.status-label.escalation-badge {
  border-style: dashed;
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-text-primary);
}

.meta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.meta-group-opposite {
  margin-left: auto;
  justify-content: flex-end;
}

.meta-data {
  color: inherit;
}

.meta-data a {
  color: inherit;
  text-decoration: none;
}

.meta-data a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.community-badge-titles,
.community-badge-achievements {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link);
  border: 1px solid rgba(59, 91, 253, 0.18);
}

.community-badge-title {
  background: rgba(59, 91, 253, 0.16);
  border-color: rgba(59, 91, 253, 0.28);
  color: var(--color-text-primary);
}

.community-badge-achievements {
  align-items: center;
}

.community-badge-achievement {
  background: rgba(59, 91, 253, 0.08);
  border: 1px solid rgba(59, 91, 253, 0.16);
  padding: 0.2rem 0.4rem;
}

.community-badge-achievement img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.community-badge-achievements-rest {
  color: var(--color-link);
}

.community-badge-achievements-rest:hover {
  color: var(--color-link-hover);
}

.container-divider {
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(33, 56, 107, 0.16), transparent);
}

/* Header */

.cph-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 16px clamp(20px, 4vw, 64px);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.88));
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 12px 32px rgba(28, 41, 82, 0.14);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: visible;
  will-change: padding, box-shadow, border-color;
  transition: padding var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), border-radius var(--transition-smooth);
}

.cph-header__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 40%, rgba(59, 91, 253, 0.22), transparent 70%),
    radial-gradient(35% 45% at 82% 20%, rgba(255, 181, 148, 0.25), transparent 70%);
  filter: blur(68px);
  opacity: 0.8;
}

.cph-header__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--layout-max-width));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 40px);
}

.cph-header__brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

.cph-header__logo {
  width: auto;
  max-width: 180px;
  height: 42px;
  object-fit: contain;
  transition: height var(--transition-fast);
}

.cph-header.cph-header--condensed {
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9));
  border-color: rgba(33, 56, 107, 0.12);
  box-shadow: 0 10px 28px rgba(28, 41, 82, 0.18);
}

.cph-header.cph-header--condensed .cph-header__logo {
  height: 36px;
}

.cph-header__brand-name {
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
}

.primary-nav-list,
.user-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
}

.primary-nav-link,
a.primary-nav-link,
button.primary-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.7;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: none;
  /* Reset any previous box-shadow */
}

.primary-nav-link,
.user-nav-list a,
.menu-button-mobile,
.menu-list-mobile .item>a,
.menu-link,
.sidenav-item,
.article-mobile-toc summary,
.article-return-to-top a,
.article-comment-count {
  min-height: 44px;
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible {
  color: var(--color-link-hover);
  background: rgba(59, 91, 253, 0.16);
  border-color: rgba(59, 91, 253, 0.24);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(28, 41, 82, 0.18);
}

.user-nav-list li {
  display: inline-flex;
}

.user-nav-list .sign-in {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  background: rgba(59, 91, 253, 0.12);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.user-nav-list .sign-in:hover,
.user-nav-list .sign-in:focus-visible {
  background: rgba(59, 91, 253, 0.18);
  border-color: rgba(59, 91, 253, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(28, 41, 82, 0.14);
}

.user-info {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(59, 91, 253, 0.12);
  border: 1px solid rgba(59, 91, 253, 0.14);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border var(--transition-fast);
}

.dropdown-toggle:hover {
  background: rgba(59, 91, 253, 0.2);
}

.user-avatar,
.menu-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(59, 91, 253, 0.16);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  min-width: 240px;
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(59, 91, 253, 0.14);
  box-shadow: 0 28px 56px rgba(28, 41, 82, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.98);
  transform-origin: top right;
  will-change: transform, opacity;
  transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default);
  pointer-events: none;
  backdrop-filter: blur(18px);
}

.dropdown-toggle[aria-expanded="true"]+.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.primary-nav-dropdown {
  position: relative;
}

.primary-nav-dropdown .dropdown-toggle {
  /* Inherits from .primary-nav-link now */
  padding-right: 0.5rem;
  /* Adjust padding for chevron */
}

.primary-nav-dropdown-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 12px);
  min-width: 260px;
  padding: clamp(14px, 2vw, 18px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 251, 255, 0.97) 100%);
  border: 1px solid rgba(59, 91, 253, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(28, 41, 82, 0.16), 0 8px 16px rgba(59, 91, 253, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  transform-origin: top left;
}

.primary-nav-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.primary-nav-dropdown__list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.primary-nav-dropdown__list a:hover,
.primary-nav-dropdown__list a:focus-visible {
  background: rgba(59, 91, 253, 0.1);
  color: var(--color-text-primary);
  transform: translateX(2px);
}

.primary-nav-dropdown__list a.current-page,
.primary-nav-dropdown__list a[aria-current="page"] {
  background: rgba(59, 91, 253, 0.14);
  color: var(--color-text-primary);
  font-weight: 600;
}

.primary-nav-dropdown__state {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding: 0.35rem 1rem 0.7rem;
  font-weight: 500;
}

.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: medium;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dropdown-menu a:hover,
.dropdown-menu button:hover,
.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu button:focus-visible,
.dropdown-menu [role=\"menuitem\"]:focus-visible {
  background: rgba(59, 91, 253, 0.14);
  color: var(--color-text-primary);
  transform: translateX(4px);
  box-shadow: inset 0 0 0 1px rgba(59, 91, 253, 0.18);
}

.dropdown-menu .separator {
  height: 1px;
  margin: clamp(10px, 2vw, 14px) 0;
  background: linear-gradient(90deg, transparent, rgba(33, 56, 107, 0.16), transparent);
}

.nav-wrapper-mobile {
  display: none;
  position: relative;
}

.menu-button-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background-alt);
  color: var(--color-text-primary);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.menu-button-mobile:hover,
.menu-button-mobile:focus-visible {
  background: var(--color-surface);
  border-color: rgba(59, 91, 253, 0.28);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.menu-button-mobile[aria-expanded="true"] {
  background: var(--color-surface-strong);
  border-color: rgba(59, 91, 253, 0.35);
}

.menu-list-mobile {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: min(320px, 90vw);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-strong);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  padding: clamp(1rem, 3vw, 1.2rem);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default);
}

.menu-list-mobile[aria-expanded="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-list-mobile-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.menu-list-mobile .item>a,
.menu-link {
  display: block;
  padding: clamp(0.75rem, 2.5vw, 0.85rem) clamp(1rem, 3vw, 1.1rem);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: clamp(0.9rem, 2.5vw, 0.95rem);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.menu-list-mobile .item>a:hover,
.menu-link:hover,
.menu-link:focus-visible {
  background: var(--color-surface);
  color: var(--color-link);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(59, 91, 253, 0.28);
}

.menu-list-mobile .nav-divider {
  height: 1px;
  background: var(--color-divider);
  margin: clamp(0.5rem, 2vw, 0.65rem) 0;
}

/* Profile card in mobile menu */
.menu-list-mobile .user-avatar-item {
  margin: 0;
  padding: 0;
}

.menu-list-mobile .user-avatar-item .my-profile {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 0.9rem);
  padding: clamp(0.75rem, 2.5vw, 0.85rem) clamp(1rem, 3vw, 1.1rem);
  border-radius: var(--radius-md);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
  min-height: 44px;
  position: relative;
  width: 100%;
  text-decoration: none;
  color: var(--color-text-primary);
}

.menu-list-mobile .user-avatar-item .my-profile::after {
  content: "›";
  position: absolute;
  right: clamp(1rem, 3vw, 1.1rem);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
  line-height: 1;
  margin-top: -0.5rem;
}

.menu-list-mobile .user-avatar-item .my-profile:hover,
.menu-list-mobile .user-avatar-item .my-profile:focus-visible {
  background: var(--color-surface);
  border-color: rgba(59, 91, 253, 0.28);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  color: var(--color-text-primary);
}

.menu-list-mobile .user-avatar-item .my-profile:hover::after {
  transform: translateX(2px);
  color: var(--color-link);
}

.menu-list-mobile .menu-profile-avatar {
  width: clamp(36px, 8vw, 40px);
  height: clamp(36px, 8vw, 40px);
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(28, 41, 82, 0.08);
}

.menu-list-mobile .menu-profile-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  /* Allow text truncation */
}

.menu-list-mobile .menu-profile-name>div:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: clamp(0.9rem, 2.5vw, 0.95rem);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-list-mobile .my-profile-tooltip {
  font-size: clamp(0.75rem, 2vw, 0.8rem);
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.2;
}

/* Requests link with better affordance */
.menu-list-mobile .item>a[href*="/requests"]:not([href*="new_request"]) {
  position: relative;
}

.menu-list-mobile .item>a[href*="/requests"]:not([href*="new_request"])::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  font-size: 1rem;
}

/* Sign out link styled as secondary/destructive action */
.menu-list-mobile .item>a[href*="sign_out"] {
  background: transparent;
  color: #dc2626;
  font-weight: 500;
  border: 1px solid rgba(220, 38, 38, 0.2);
  text-align: center;
}

.menu-list-mobile .item>a[href*="sign_out"]:hover,
.menu-list-mobile .item>a[href*="sign_out"]:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.3);
  transform: none;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.js-scroll-link {
  cursor: pointer;
}

/* Hero */

.hero {
  position: relative;
  padding: clamp(48px, 12vw, 96px) clamp(20px, 6vw, 72px) clamp(32px, 8vw, 64px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 243, 255, 0.92) 60%, rgba(244, 246, 255, 0.96) 100%);
}

.hero__layer {
  position: absolute;
  inset: clamp(12px, 3vw, 32px);
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 0;
}

.hero__layer--back {
  background: linear-gradient(180deg, rgba(59, 91, 253, 0.12), rgba(255, 255, 255, 0.08));
  filter: blur(26px);
}

.hero__layer--glow {
  background: radial-gradient(60% 65% at 72% 18%, rgba(255, 181, 148, 0.18), transparent 75%);
  filter: blur(40px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 12% 20%, rgba(59, 91, 253, 0.18), transparent 70%),
    radial-gradient(40% 70% at 86% 18%, rgba(255, 181, 148, 0.18), transparent 75%);
  opacity: 0.8;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--layout-max-width));
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 6vw, 64px);
  flex-wrap: wrap;
}

.hero-copy,
.hero-search {
  padding: clamp(28px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 28px);
  max-width: min(100%, 540px);
  flex: 1 1 clamp(280px, 45%, 560px);
}

.hero-eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.22rem;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.6rem, 4.4vw, 3.9rem);
  line-height: 1.05;
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 18ch;
}

.hero-subtext {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  max-width: 42ch;
}

.hero-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(20px, 3vw, 36px);
  max-width: 44ch;
}

.hero-highlights li {
  position: relative;
  padding-left: 1.75rem;
  color: rgba(43, 55, 79, 0.85);
  font-weight: 500;
  line-height: 1.4;
}

.hero-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-link) 0%, var(--color-primary) 100%);
  box-shadow: 0 6px 16px rgba(59, 91, 253, 0.22);
}

.hero-search-title {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.26rem;
  text-transform: uppercase;
  color: rgba(43, 55, 79, 0.7);
}

.hero-search-field {
  position: relative;
}

.hero-search .search {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  position: relative;
}

.hero-search .search input[type="search"] {
  min-width: 0;
  padding: 1rem 1.35rem;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-text-primary);
  border: 2px solid rgba(59, 91, 253, 0.26);
  box-shadow: 0 4px 12px rgba(28, 41, 82, 0.08);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.hero-search .search input[type="search"]::placeholder {
  color: rgba(75, 86, 113, 0.55);
}

.hero-search .search input[type="search"]:hover {
  border-color: rgba(59, 91, 253, 0.35);
  box-shadow: 0 6px 16px rgba(28, 41, 82, 0.12);
}

.hero-search .search input[type="search"]:focus {
  background: #ffffff;
  border-color: rgba(59, 91, 253, 0.45);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.14);
}

.hero-search .search button[type="submit"] {
  padding-inline: 1.6rem;
}

.hero-search .search button[type="reset"] {
  display: none;
}

.hero-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-quicklinks-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: rgba(43, 55, 79, 0.65);
}

.hero-quicklinks-list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.hero-quicklink {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 242, 255, 0.86) 100%);
  transition: transform var(--transition-fast), border var(--transition-fast), background var(--transition-fast);
}

.hero-quicklink:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(228, 236, 255, 0.9) 100%);
}

.hero-quicklink-name {
  display: block;
  font-weight: 600;
  color: var(--color-text-primary);
}

.hero-quicklink-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Knowledge base */

.collection-grid__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.collection-card {
  position: relative;
  padding: 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(234, 240, 255, 0.9) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.18);
  transition: transform var(--transition-long), border var(--transition-fast), background var(--transition-fast);
}

.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(59, 91, 253, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-default);
}

.collection-card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 91, 253, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(223, 232, 255, 0.94) 100%);
  box-shadow: 0 16px 48px rgba(28, 41, 82, 0.22);
}

.collection-card:hover::after {
  opacity: 1;
}

.collection-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 16px 48px rgba(28, 41, 82, 0.22);
}

.collection-card__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: rgba(43, 55, 79, 0.58);
}

.collection-card__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.collection-card__meta {
  color: var(--color-text-secondary);
  margin-top: auto;
  font-size: 0.95rem;
}

.pagination {
  margin-top: clamp(24px, 5vw, 44px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pagination-list {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-list li {
  margin: 0;
}

.pagination a,
.pagination button,
.pagination span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), border var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.pagination a:hover,
.pagination a:focus-visible,
.pagination button:hover,
.pagination button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(59, 91, 253, 0.34);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link-hover);
  box-shadow: 0 12px 24px rgba(28, 41, 82, 0.18);
}

.pagination .is-active>a,
.pagination .is-active>span {
  background: #2863fe;
  color: #ffffff;
  border-color: #2863fe;
  box-shadow: 0 16px 28px rgba(59, 91, 253, 0.28);
}

.pagination .is-disabled>a,
.pagination .is-disabled>span {
  opacity: 0.5;
  pointer-events: none;
}

/* Promoted articles */

.featured-articles {
  margin-top: clamp(44px, 8vw, 90px);
  padding: clamp(28px, 5vw, 48px);
}

.promoted-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.promoted-articles-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.95rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(237, 242, 255, 0.88) 100%);
  color: var(--color-text-primary);
  transition: transform var(--transition-fast), border var(--transition-fast), background var(--transition-fast);
}

.promoted-articles-item a:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.12);
}

.promoted-articles-item a:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.12);
}

.promoted-articles-title {
  font-weight: 600;
}

/* Recent activity */

.home-section.activity {
  padding: clamp(28px, 5vw, 44px);
}


.recent-activity,
.recent-activity ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Performance optimization for long lists */
.recent-activity-list>* {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* Recent Activity List Container - ensure proper spacing */
.recent-activity-list {
  display: grid !important;
  gap: var(--space-3) !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-activity__item,
.recent-activity-item {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  padding: clamp(20px, 4vw, 32px) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-strong) !important;
  border: 1px solid var(--color-border) !important;
  will-change: transform;
  transform: translateZ(0);
  transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default);
  position: relative;
  box-shadow: 0 2px 8px rgba(28, 41, 82, 0.08);
  margin: 0 !important;
}

.recent-activity__item::before,
.recent-activity-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(33, 56, 107, 0.04);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-default);
}

.recent-activity__item:hover,
.recent-activity-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-soft) !important;
  border-color: rgba(59, 91, 253, 0.2) !important;
  background: var(--color-surface) !important;
}

.recent-activity__item:hover::before,
.recent-activity-item:hover::before {
  opacity: 1;
}

.recent-activity__item a,
.recent-activity-item a {
  text-decoration: none;
}

.recent-activity__item h3,
.recent-activity-item h3 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Category label - small and subtle */
.recent-activity__item-parent,
.recent-activity-item-parent {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
  transition: color var(--transition-fast);
}

.recent-activity__item-parent:hover,
.recent-activity__item-parent:focus-visible,
.recent-activity-item-parent:hover,
.recent-activity-item-parent:focus-visible {
  color: var(--color-link);
}

/* Article title - large and prominent */
.recent-activity__item-link,
.recent-activity-item-link {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
  transition: color var(--transition-fast);
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.recent-activity__item-link:hover,
.recent-activity__item-link:focus-visible,
.recent-activity-item-link:hover,
.recent-activity-item-link:focus-visible {
  color: var(--color-link);
}

/* Hide all metadata, timestamps, and any text elements that might contain dates */
.recent-activity__item .meta,
.recent-activity__item .meta-data,
.recent-activity-item .meta,
.recent-activity-item .meta-data,
.recent-activity__item .recent-activity-item-time,
.recent-activity-item .recent-activity-item-time,
.recent-activity__item .recent-activity-item-meta,
.recent-activity-item .recent-activity-item-meta,
.recent-activity__item .recent-activity-item-comment,
.recent-activity-item .recent-activity-item-comment,
.recent-activity__item p,
.recent-activity-item p,
.recent-activity__item time,
.recent-activity-item time,
.recent-activity__item small,
.recent-activity-item small,
.recent-activity__item span:not(.article-title):not(.recent-activity__item-parent):not(.recent-activity-item-parent):not(.recent-activity-comment-icon),
.recent-activity-item span:not(.article-title):not(.recent-activity__item-parent):not(.recent-activity-item-parent):not(.recent-activity-comment-icon) {
  display: none !important;
}

/* Hide metadata containers that don't contain interactive elements */
.recent-activity-item>div.recent-activity-item-meta,
.recent-activity__item>div.recent-activity-item-meta {
  display: none !important;
}

/* Sub navigation & search */

.sub-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin: clamp(32px, 6vw, 48px) 0;
  width: 100%;
}

.breadcrumbs {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  opacity: 0.85;
}

.breadcrumbs li+li::before {
  content: "\203A";
  color: rgba(43, 55, 79, 0.35);
}

.breadcrumbs a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--color-link-hover);
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 var(--article-rail-width);
  flex-basis: var(--article-rail-width);
  min-width: var(--article-rail-width);
  width: var(--article-rail-width);
  max-width: var(--search-expanded-width);
  will-change: width, flex-basis;
  transition: width var(--transition-default), flex-basis var(--transition-default);
  z-index: 100;
}

/* Expand search bar when focused/active (desktop only) */
@media (min-width: 769px) {

  .search-container:focus-within,
  .search-container.active {
    flex-basis: var(--search-expanded-width);
    width: var(--search-expanded-width);
    max-width: var(--search-expanded-width);
  }
}

.search-container .search input[type="search"]:focus {
  outline: none;
}

.search-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: rgba(59, 91, 253, 0.55);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

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

.search-container .search input[type="search"] {
  width: 100%;
  padding-left: 2.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(59, 91, 253, 0.18);
}

.search-container .search button[type="submit"] {
  display: none;
}

.search-container .search button[type="reset"] {
  display: none;
}

/* ==========================================================================
   Search Autocomplete Dropdown Styling
   ========================================================================== */

/* Main dropdown container */
zd-autocomplete {
  background: var(--color-surface-strong) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  padding: 0 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  max-width: var(--search-expanded-width, 420px) !important;
  width: 100% !important;
  position: absolute !important;
  z-index: 9999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity var(--transition-fast), transform var(--transition-fast) !important;
  transform: translateX(0) translateZ(0) !important;
  /* Hardware acceleration */
  will-change: transform, top, left;
  /* Optimize for positioning changes */
  backface-visibility: hidden;
  /* Prevent flickering */
}

/* Ensure search form is positioning context for autocomplete dropdown */
.search,
form[role="search"] {
  position: relative !important;
}

/* Ensure autocomplete shows when search input is focused */
.search-container:focus-within zd-autocomplete,
.search input[type="search"]:focus~zd-autocomplete,
.search:focus-within zd-autocomplete,
form[role="search"]:focus-within zd-autocomplete {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.search-container.delaying zd-autocomplete {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(4px) !important;
}

zd-autocomplete::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(33, 56, 107, 0.04);
  pointer-events: none;
  z-index: 1;
}

/* Header - "Featured articles" title */
zd-autocomplete-header {
  display: block !important;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.25rem, 3vw, 1.5rem) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  background: var(--color-background-alt) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Article suggestion items */
zd-autocomplete-multibrand {
  display: block !important;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.25rem, 3vw, 1.5rem) !important;
  border-bottom: 1px solid var(--color-divider) !important;
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast) !important;
  cursor: pointer !important;
  position: relative !important;
  background: transparent !important;
}

zd-autocomplete-multibrand:last-child {
  border-bottom: none !important;
}

zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand:focus,
zd-autocomplete-multibrand[aria-selected="true"] {
  background: var(--color-surface) !important;
  transform: translateX(2px) !important;
  /* Prevent layout shift by using transform instead of changing position */
  will-change: transform;
}

/* Article title link in dropdown */
zd-autocomplete-title-multibrand {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 0.4rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

zd-autocomplete-title-multibrand:hover,
zd-autocomplete-title-multibrand:focus {
  color: var(--color-link) !important;
}

/* Breadcrumb/path text in dropdown items */
zd-autocomplete-breadcrumbs-multibrand {
  display: block !important;
  font-size: 0.8rem !important;
  color: var(--color-text-muted) !important;
  margin-top: 0.25rem !important;
  line-height: 1.4 !important;
}

zd-autocomplete-multibrand [class*="breadcrumb"],
zd-autocomplete-multibrand [class*="path"],
zd-autocomplete-multibrand span:not(zd-autocomplete-title-multibrand) {
  font-size: 0.8rem !important;
  color: var(--color-text-muted) !important;
  margin-top: 0.25rem !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Ensure all text inherits theme typography */
zd-autocomplete,
zd-autocomplete * {
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* Scrollbar styling for dropdown */
zd-autocomplete::-webkit-scrollbar {
  width: 8px;
}

zd-autocomplete::-webkit-scrollbar-track {
  background: var(--color-background-alt);
}

zd-autocomplete::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

zd-autocomplete::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Category & section pages */

.category-container,
.section-container {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}

.category-content,
.section-content {
  flex: 1;
  max-width: 1080px;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 48px);
  box-shadow: var(--shadow-card);
}

.page-header h1,
.section h1 {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  margin: 0 0 0.6rem;
}

.section-subscribe {
  margin-top: 1rem;
}

.page-header-description {
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.section-tree {
  display: grid;
  gap: clamp(24px, 4vw, 36px);
}

.section-tree .section {
  margin: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  padding: 1.6rem;
}

.section-list {
  list-style: none;
  padding: 0;
  margin: clamp(16px, 3vw, 28px) 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 240, 255, 0.9) 100%);
  color: var(--color-text-primary);
  font-weight: 600;
  transition: transform var(--transition-fast), border var(--transition-fast), background var(--transition-fast);
}

.section-list-item a:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.28);
}

.section-list-item svg {
  stroke: currentColor;
}

.section-tree-title {
  margin: 0 0 1rem;
  font-size: 1.45rem;
}

.section-tree-title a {
  color: var(--color-text-primary);
}

.article-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: clamp(16px, 3vw, 32px) 0 0;
  padding: 0;
}

.article-list-link {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

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

.article-list-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.94);
  transition: border var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.article-list-item:hover {
  border-color: rgba(59, 91, 253, 0.26);
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.12);
}

.see-all-articles {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  font-weight: 600;
}

/* Article layout */


.article-container {
  display: grid;
  grid-template-columns: var(--article-rail-width) minmax(760px, 1fr) var(--article-rail-width);
  gap: clamp(32px, 3vw, 48px);
  align-items: start;
  width: min(100%, 1600px);
  max-width: 1600px;
  margin: 0 auto;
  transition: gap var(--transition-long), width var(--transition-long);
  /* Ensure sticky positioning works for TOC and sidebar */
  overflow: visible;
  position: relative;
}

.article[role="document"],
.article#main-content,
.article-container .article {
  max-width: 1400px;
  width: 100%;
}

.container,
.article,
.article-body {
  transition: padding var(--transition-long), max-width var(--transition-long), width var(--transition-long), background var(--transition-long), box-shadow var(--transition-long), border var(--transition-long);
}

/* Full-width scroll effect - mobile only */
@media (max-width: 768px) {

  /* Smooth, subtle transitions for full-width expansion */
  /* Using a gentle ease-out curve for natural, subtle motion */
  .container,
  .article-container,
  .article,
  .article-body,
  .article-mobile-toc {
    transition: padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      gap 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.article-full-width-scrolled .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.article-full-width-scrolled .article-container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Ensure sticky positioning works */
    overflow: visible !important;
    position: relative !important;
  }

  body.article-full-width-scrolled .article {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(33, 56, 107, 0.06) !important;
    box-shadow: 0 1px 3px rgba(28, 41, 82, 0.04) !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: clamp(0.5rem, 2vw, 1rem) !important;
    padding-bottom: clamp(0.5rem, 2vw, 1rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Ensure sticky positioning works */
    overflow: visible !important;
  }

  body.article-full-width-scrolled .article-info,
  body.article-full-width-scrolled section.article-info {
    overflow: visible !important;
  }

  body.article-full-width-scrolled .article-content {
    max-width: 100%;
    width: 100%;
    overflow: visible !important;
  }

  /* Ensure article section wrapper allows sticky */
  body.article-full-width-scrolled .article>section {
    overflow: visible !important;
  }

  body.article-full-width-scrolled .article-body {
    padding-left: clamp(1rem, 4vw, 1.5rem) !important;
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.article-full-width-scrolled .article-toc {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Mobile TOC sticky positioning when scrolling */
  body.article-full-width-scrolled .article-mobile-toc {
    position: -webkit-sticky !important;
    /* Safari support */
    position: sticky !important;
    top: calc(var(--header-height) + 12px) !important;
    z-index: 100 !important;
    margin: 12px clamp(1rem, 4vw, 1.5rem) var(--space-3) clamp(1rem, 4vw, 1.5rem) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(28, 41, 82, 0.16), 0 2px 8px rgba(28, 41, 82, 0.08) !important;
    width: calc(100% - clamp(2rem, 8vw, 3rem)) !important;
    max-width: none !important;
    display: block !important;
    overflow: visible !important;
    left: 0 !important;
    right: 0 !important;
    /* Smooth transition for TOC appearance */
    transition: margin 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.article-full-width-scrolled .article-mobile-toc__disclosure[open] {
    box-shadow: 0 12px 40px rgba(28, 41, 82, 0.22), 0 4px 12px rgba(28, 41, 82, 0.12) !important;
  }

  body.article-full-width-scrolled .article-mobile-toc__disclosure[open] {
    box-shadow: 0 12px 40px rgba(28, 41, 82, 0.22), 0 4px 12px rgba(28, 41, 82, 0.12) !important;
  }
}

.article-sidebar {
  position: sticky !important;
  top: calc(var(--header-height) + 24px) !important;
  align-self: start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
  backdrop-filter: blur(26px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

.article-section-nav {
  margin: var(--space-4) auto var(--space-5);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  width: min(100%, var(--layout-max-width));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: var(--color-surface-strong);
}

.article-section-nav .collapsible-sidebar {
  display: grid;
  gap: var(--space-2);
}

.article-section-nav .collapsible-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.2);
  background: rgba(59, 91, 253, 0.08);
  cursor: pointer;
  transition: background var(--transition-fast), border var(--transition-fast), transform var(--transition-fast);
}

.article-section-nav .collapsible-sidebar-toggle:hover,
.article-section-nav .collapsible-sidebar-toggle:focus-visible {
  background: rgba(59, 91, 253, 0.18);
  border-color: rgba(59, 91, 253, 0.32);
  transform: translateY(-2px);
}

.article-section-nav .collapsible-sidebar-body {
  overflow: hidden;
  transition: max-height var(--transition-long), opacity var(--transition-fast);
}

.article-section-nav .collapsible-sidebar[aria-expanded="false"] .collapsible-sidebar-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.article-section-nav .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  max-height: 1200px;
  opacity: 1;
}

/* Custom scrollbar styling for sidebar */
.article-sidebar::-webkit-scrollbar {
  width: 8px;
}

.article-sidebar::-webkit-scrollbar-track {
  background: rgba(59, 91, 253, 0.04);
  border-radius: var(--radius-sm);
}

.article-sidebar::-webkit-scrollbar-thumb {
  background: rgba(59, 91, 253, 0.2);
  border-radius: var(--radius-sm);
}

.article-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 91, 253, 0.3);
}

.article-sidebar ul,
.article-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.article-sidebar a,
.article-section-nav a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.article-sidebar a:hover,
.article-sidebar .current-article,
.article-section-nav a:hover,
.article-section-nav .current-article {
  background: rgba(59, 91, 253, 0.16);
  color: var(--color-text-primary);
}

.collapsible-sidebar-toggle {
  display: none;
}

/* Article Table of Contents (Right Sidebar) */

.article-toc {
  position: sticky !important;
  top: calc(var(--header-height) + 24px) !important;
  align-self: start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
  backdrop-filter: blur(26px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

/* Custom scrollbar styling for ToC */
.article-toc::-webkit-scrollbar {
  width: 8px;
}

.article-toc::-webkit-scrollbar-track {
  background: rgba(59, 91, 253, 0.04);
  border-radius: var(--radius-sm);
}

.article-toc::-webkit-scrollbar-thumb {
  background: rgba(59, 91, 253, 0.2);
  border-radius: var(--radius-sm);
}

.article-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 91, 253, 0.3);
}

.article-mobile-toc {
  display: none;
  margin: var(--space-3) 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-default);
  overflow: hidden;
}

/* Mobile TOC sticky behavior - consolidated with full-width styles */

.article-mobile-toc__disclosure {
  border-radius: inherit;
}

.article-mobile-toc__disclosure[open] {
  box-shadow: none;
}

.article-mobile-toc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1rem, 3vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-primary);
}

.article-mobile-toc summary::-webkit-details-marker {
  display: none;
}

.article-mobile-toc__label {
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.article-mobile-toc__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

.article-mobile-toc__chevron {
  transition: transform var(--transition-fast);
}

.article-mobile-toc__disclosure[open] .article-mobile-toc__chevron {
  transform: rotate(180deg);
}

.article-mobile-toc nav {
  padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(0.75rem, 2vw, 1.2rem);
  display: block;
  max-height: 340px;
  overflow-y: auto;
}

.article-mobile-toc nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.toc-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.toc-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toc-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  border-left: 2px solid transparent;
}

.toc-nav a:hover {
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-text-primary);
  transform: translateX(2px);
}

.toc-nav a.active {
  background: rgba(59, 91, 253, 0.16);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

/* Nested ToC levels (h2, h3, h4) */
.toc-nav .toc-h2 {
  padding-left: 0.75rem;
}

.toc-nav .toc-h3 {
  padding-left: 1.5rem;
  font-size: 0.8125rem;
}

.toc-nav .toc-h4 {
  padding-left: 2.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

.article {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 48px);
  box-shadow: var(--shadow-card);
  width: min(100%, 1320px);
}

.article-header {
  display: grid;

  margin-bottom: clamp(19px, 2.7vw, 27px);
}

.article-title {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.3;
}

.article-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.2rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}

.article-subscribe {
  margin-top: 2rem;
}

.article-share .share {
  list-style: none;
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.2rem;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.article-share .share li {
  display: inline-flex;
}

.article-share .share a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--color-link);
  background: transparent;
  border: none;
  transition: color var(--transition-fast);
}

.article-share .share a:hover,
.article-share .share a:focus-visible {
  transform: none;
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}

.article-share .share svg {
  width: 16px;
  height: 16px;
}

.article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.2);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  width: fit-content;
}

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

.article-comment-count:hover,
.article-comment-count:focus-visible {
  border-color: rgba(59, 91, 253, 0.32);
  color: var(--color-link-hover);
}

.article-content {
  max-width: 100%;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  margin-top: 2.8rem;
  margin-bottom: 1.4rem;
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.article-body h2 {
  /*margin-top: 3.5rem;*/
  font-size: 2rem;
  font-weight: 700;
}

.article-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.article-body h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

.article-body p,
.article-body li {
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-size: 1rem;
}

.article-body p {
  margin-bottom: 1.25rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.75rem 1.75rem;
  padding: 0;
}

.article-body li {
  margin-bottom: 0.65rem;
  padding-left: 0.25rem;
}

.article-body li:last-child {
  margin-bottom: 0;
}

.article-body .callout {
  position: relative;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  border-radius: 12px;
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(246, 249, 255, 0.9);
  box-shadow: 0 6px 18px rgba(28, 41, 82, 0.06);
}

/* icon bubble on the left */
.article-body .callout::before {
  content: var(--callout-icon, "ℹ️");
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(59, 91, 253, 0.06);
  color: var(--color-link);
}

/* Tighten spacing */
.article-body .callout p:first-child {
  margin-top: 0;
}

.article-body .callout p:last-child {
  margin-bottom: 0;
}

.article-body .callout>p+p {
  margin-top: 0.75rem;
}

.article-body .callout-info {
  --callout-icon: "ℹ️";
  border-color: rgba(59, 91, 253, 0.32);
  background: linear-gradient(135deg, rgba(59, 91, 253, 0.04), rgba(255, 255, 255, 0.96));
}

.article-body .callout-warning {
  --callout-icon: "⚠️";
  border-color: rgba(234, 179, 8, 0.55);
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(255, 255, 255, 0.96));
}

.article-body .callout-success {
  --callout-icon: "✔";
  border-color: rgba(80, 200, 120, 0.45);
  background: linear-gradient(135deg, rgba(80, 200, 120, 0.06), rgba(255, 255, 255, 0.96));
}

.content-tags {
  margin-top: clamp(28px, 5vw, 40px);
  margin-bottom: clamp(28px, 5vw, 40px);
  padding: clamp(20px, 3.5vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(59, 91, 253, 0.08);
  display: grid;
  gap: 0.85rem;
}

.content-tags p {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: rgba(33, 56, 107, 0.65);
  font-weight: 600;
}

.content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.content-tag-item {
  margin: 0;
}

.content-tag-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 1px solid rgba(59, 91, 253, 0.18);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), border var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.content-tag-item a::before {
  content: "#";
  font-weight: 700;
  color: rgba(33, 56, 107, 0.55);
}

.content-tag-item a:hover,
.content-tag-item a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(59, 91, 253, 0.32);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link-hover);
  box-shadow: 0 12px 24px rgba(28, 41, 82, 0.18);
}

/* In-article navigation & quick start blocks */

.article-body li[data-list-item-id] {

  margin: 0;
}

.article-body li[data-list-item-id]+li[data-list-item-id] {
  margin-top: 0.4rem;

}

#avid-toc-accordion {
  list-style: none;
}

.article-body li[data-list-item-id]>a[href^="#"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(59, 91, 253, 0.22);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.article-body li[data-list-item-id]>a[href^="#"]::before {
  content: "#";
  font-weight: 700;
  color: rgba(43, 55, 79, 0.45);
}

.article-body li[data-list-item-id]>a[href^="#"]:hover,
.article-body li[data-list-item-id]>a[href^="#"]:focus-visible {
  transform: translateX(4px);
  border-color: rgba(59, 91, 253, 0.36);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link-hover);
  box-shadow: 0 12px 24px rgba(28, 41, 82, 0.16);
}

.article-body details.avid-accordion {
  border: 1px solid rgba(59, 91, 253, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 32px rgba(28, 41, 82, 0.12);
  padding: 0.75rem 1rem;
  /*margin: 0.75rem 0;*/
  transition: box-shadow var(--transition-fast), border var(--transition-fast);
}

.article-body details.avid-accordion[open] {
  box-shadow: 0 20px 40px rgba(28, 41, 82, 0.16);
  border-color: rgba(59, 91, 253, 0.28);
}

.article-body details.avid-accordion summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.article-body details.avid-toc-accordion {
  display: inline-flex;
  flex-direction: column;
  width: auto;
  max-width: 100%;
  padding: 0.6rem 1.1rem;
}

.article-body details.avid-toc-accordion summary {
  width: auto;
}

.article-body details.avid-accordion summary::-webkit-details-marker {
  display: none;
}

.article-body .avid-accordion__content {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(59, 91, 253, 0.12);
  display: grid;
  gap: 0.6rem;
}

.article-body .avid-accordion__content ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.35rem;
}

.article-body .avid-accordion__content a {
  color: var(--color-link);
  font-weight: 600;
}

.avid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(59, 91, 253, 0.14);
  color: var(--color-link);
}

.avid-badge--primary {
  background: #2863fe;
  color: #ffffff;
}

/*
.avid-step {
  margin: clamp(32px, 6vw, 48px) 0;
  padding: clamp(24px, 4vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(235, 240, 255, 0.9) 100%);
  box-shadow: 0 24px 48px rgba(28, 41, 82, 0.14);
  display: grid;
  gap: clamp(12px, 2.5vw, 20px);
}

.avid-step h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: var(--color-text-primary);
}

.avid-step details + details {
  margin-top: 0.75rem;
}
*/
.avid-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.avid-toc-sublist li a {
  color: var(--color-text-secondary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 0.3rem;
}

.avid-toc-sublist li a:hover {
  color: var(--color-link-hover);
}

.article-body img {
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.14);
  box-shadow: 0 4px 16px rgba(28, 41, 82, 0.12);
  transition: box-shadow var(--transition-default), transform var(--transition-default);
  max-width: 100%;
  height: auto;
}

.article-body img[style*="vertical-align"],
.article-body img.inline-icon,
.article-body li img[style*="vertical-align"],
.article-body p img[style*="vertical-align"] {
  display: inline-block;
  vertical-align: middle;
  margin: -0.15rem 0.25rem 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  height: auto;
}

.article-body img[style*="vertical-align"]+strong {
  vertical-align: middle;
}

.article-attachments {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.attachments {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(59, 91, 253, 0.14);
}


/* Footer container with horizontal separator */
footer {
  margin-top: clamp(16px, 3vw, 28px);
  padding: 0 2rem 4rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

/* Horizontal separator at top of footer */
.article-footer hr {
  border: none;
  height: 1px;
  margin: 0 0 var(--space-2) 0;
  background: linear-gradient(90deg, transparent, rgba(33, 56, 107, 0.15), transparent);
}

.article-footer {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.article-footer>* {
  padding: 0;
  border-bottom: none;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none;
}

.article-footer>*:last-child {
  border-bottom: none;
}

/* Unified horizontal container - groups share, votes, and return to top in a single row */
footer>.article-footer,
footer>.article-votes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
  vertical-align: middle;
}

footer>.article-return-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;
  padding: 0;
  vertical-align: middle;
}

/* Make article-footer display its contents (share) inline */
footer .article-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Ensure share buttons display inline */
footer .article-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* Stack vertically on mobile */
@media (max-width: 768px) {
  footer {
    text-align: center;
  }

  footer>.article-footer,
  footer>.article-votes,
  footer>.article-return-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin: 0 0 var(--space-3) 0;
  }
}

.article-cta-stack {
  display: grid;
  gap: var(--space-2);
}

.article-cta-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(28, 41, 82, 0.12);
  padding: clamp(0.5rem, 1.6vw, 0.85rem);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
}

.article-cta-card:hover,
.article-cta-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 16px 36px rgba(28, 41, 82, 0.16);
}

.article-share.article-cta-card {
  display: grid;
  gap: var(--space-2);
}

.article-votes {
  order: 0; /* sits above the "more questions" card */
  padding: 1.25rem 1.75rem;
  border-radius: 999px;
  background: #f7f8ff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap; /* allows wrapping on small widths */
}

.article-votes.article-cta-card {
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(255, 255, 255, 0.96);
  padding: clamp(0.6rem, 1.6vw, 0.9rem);
}

.article-votes-question {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.article-votes-controls {
  display: flex;
  gap: 0.75rem;
}

.article-vote {
  min-width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #e2e4f5;
  background: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.article-return-to-top {
  order: 2;              /* now at the very bottom */
  align-self: flex-end;
}

.article-return-to-top.article-cta-card {
  margin-top: 0;
  justify-content: stretch;
  padding: clamp(0.5rem, 1.6vw, 0.8rem);
}

.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: #eef2ff;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4f46e5;
  text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.article-return-to-top a:hover,
.article-return-to-top a:focus-visible {
  transform: translateY(-1px);
  background: rgba(59, 91, 253, 0.22);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 12px 28px rgba(33, 56, 107, 0.16);
  color: var(--color-link-hover);
}

.article-return-to-top-icon {
  transform: rotate(180deg);
  transition: transform var(--transition-fast);
}

.article-return-to-top.article-cta-card a {
  width: 100%;
  justify-content: center;
}

.article-relatives {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.6rem;
}

.recent-articles,
.related-articles {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  overflow: hidden;
}

.recent-articles::before,
.related-articles::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(59, 91, 253, 0.16), rgba(249, 66, 58, 0.12) 55%, transparent 85%);
  pointer-events: none;
}

.article-more-questions {
  width: 100%;
  margin-top: clamp(8px, 2vw, 16px);
  padding: clamp(18px, 4vw, 26px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: linear-gradient(135deg, rgba(59, 91, 253, 0.12), rgba(249, 66, 58, 0.08));
  box-shadow: 0 18px 40px rgba(28, 41, 82, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 4vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  order: 1;
}

.article-more-questions::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(59, 91, 253, 0.16);
  border: 1px solid rgba(59, 91, 253, 0.24);
  color: var(--color-link);
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(28, 41, 82, 0.18);
}

.article-more-questions a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.35rem;
  border-radius: var(--radius-pill);
  background: #2863fe;
  border: 1px solid #1f54d9;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(28, 41, 82, 0.22);
  transition: transform var(--transition-fast), background var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
}

.article-more-questions a:hover,
.article-more-questions a:focus-visible {
  background: #1f54d9;
  border-color: #1f4ad2;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(28, 41, 82, 0.24);
  color: #ffffff;
}

.recent-articles>*,
.related-articles>* {
  position: relative;
  z-index: 1;
}

.recent-articles-title,
.related-articles-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.25;
  color: var(--color-text-primary);
}

.recent-articles ul,
.related-articles ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.recent-articles li,
.related-articles li {
  margin: 0;
}

.recent-articles a,
.related-articles a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.recent-articles a::before,
.related-articles a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-link);
  box-shadow: 0 0 0 6px rgba(59, 91, 253, 0.12);
  flex-shrink: 0;
}

.recent-articles a:hover,
.recent-articles a:focus-visible,
.related-articles a:hover,
.related-articles a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(59, 91, 253, 0.38);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link-hover);
  box-shadow: 0 18px 36px rgba(33, 56, 107, 0.18);
}

.community-activity {
  margin-top: clamp(36px, 6vw, 56px);
}

.article-comments {
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.comment {
  border: 1px solid rgba(59, 91, 253, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.94);
}

.comment-heading {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  color: var(--color-text-primary);
}

.comment-callout {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Community pages */

.page-header.community-header,
.community-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding: clamp(24px, 4vw, 36px);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: clamp(24px, 4vw, 40px);
}

.community-header .page-header-description {
  margin: 0;
  max-width: 60ch;
}

.community-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.post-to-community {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topic-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.4rem;
  margin-bottom: clamp(20px, 4vw, 32px);
  padding: clamp(18px, 3.2vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.topic-filters {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.blocks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.blocks-item {
  margin: 0;
}

.blocks-item-link {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(20px, 4vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 200px;
}

.blocks-item-link:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 24px 48px rgba(28, 41, 82, 0.18);
}

.blocks-item-link:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 24px 48px rgba(28, 41, 82, 0.18);
}

.blocks-item-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.blocks-item-description {
  margin: 0;
  color: var(--color-text-secondary);
}

.blocks-item .meta-group {
  margin-top: auto;
  gap: 0.4rem 0.8rem;
  color: var(--color-text-muted);
}

.blocks-item-internal .blocks-item-link {
  border-style: dashed;
}

.striped-list>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
}

.striped-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 24px);
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
}

.striped-list-item:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 20px 42px rgba(28, 41, 82, 0.18);
}

.striped-list-item:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 20px 42px rgba(28, 41, 82, 0.18);
}

.striped-list-info {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.striped-list-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}

.striped-list-title:hover {
  color: var(--color-link-hover);
}

.striped-list-status {
  margin-left: 0.4rem;
}

.post-overview-item {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.post-featured {
  border-color: rgba(249, 66, 58, 0.32);
}

.striped-list-count {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 20px);
}

.striped-list-count-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.striped-list-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.no-posts-with-filter {
  margin: clamp(18px, 4vw, 28px) 0;
  padding: clamp(20px, 4vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(59, 91, 253, 0.32);
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-text-secondary);
  text-align: center;
}

.community-activity {
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-card);
}

.community-featured-posts {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-card);
}

.community-featured-posts .title {
  margin: 0 0 1.2rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--color-text-primary);
}

.community-footer {
  margin: clamp(40px, 8vw, 72px) auto 0;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(59, 91, 253, 0.12), rgba(249, 66, 58, 0.08));
  box-shadow: var(--shadow-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  justify-content: space-between;
}

.community-footer-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--color-text-primary);
}

/* Community post detail */

.post-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(24px, 5vw, 52px);
  margin-top: clamp(24px, 5vw, 40px);
}

.post {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: clamp(24px, 4vw, 36px);
}

.post-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem 1.4rem;
}

.post-title h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--color-text-primary);
}

.post-info-container {
  margin: 0;
}

.post-info {
  display: grid;
  gap: clamp(16px, 3vw, 26px);
  padding: clamp(20px, 3.6vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.post-author {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}

.post-meta {
  display: grid;
  gap: 0.75rem;
}

.post-overview-count {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  justify-content: flex-end;
}

.post-actions.actions {
  display: flex;
  gap: 0.75rem;
}

.post-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(16px, 3vw, 24px);
  border-top: 1px solid rgba(59, 91, 253, 0.14);
}

.post-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-link);
}

.post-comment-count:hover {
  color: var(--color-link-hover);
}

.comment-overview {
  margin: clamp(28px, 5vw, 40px) 0 clamp(16px, 3vw, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  justify-content: space-between;
}

body:not(.requests-page):not(.request-page) .comment-overview,
body:not(.requests-page):not(.request-page) .comment-callout,
body:not(.requests-page):not(.request-page) .comment-list,
body:not(.requests-page):not(.request-page) .comment,
body:not(.requests-page):not(.request-page) .comment-labels,
body:not(.requests-page):not(.request-page) .comment-actions-container,
body:not(.requests-page):not(.request-page) .comment-form,
body:not(.requests-page):not(.request-page) .article-comments,
body:not(.requests-page):not(.request-page) .post-comments,
body:not(.requests-page):not(.request-page) .comment-actions,
body:not(.requests-page):not(.request-page) .post-comment-count,
body:not(.requests-page):not(.request-page) .recent-activity-item-comment,
body:not(.requests-page):not(.request-page) .recent-activity-comment-icon,
body:not(.requests-page):not(.request-page) .comment-link,
body:not(.requests-page):not(.request-page) .comment-callout {
  display: none !important;
}

.comment-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.comment-body {
  margin-top: clamp(0.75rem, 2vw, 1rem);
  color: var(--color-text-primary);
  line-height: 1.7;
  font-size: clamp(0.95rem, 2vw, 1rem);
}

.comment-body p {
  margin: 0 0 clamp(0.75rem, 2vw, 1rem);
}

.comment-body p:last-child {
  margin-bottom: 0;
}

.comment-actions-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: clamp(14px, 3vw, 22px);
}

.comment-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(59, 91, 253, 0.08);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  padding: 0.4rem 0.8rem;
}

.comment-vote .vote-sum {
  font-weight: 600;
  color: var(--color-text-primary);
}

.comment-actions.actions {
  display: inline-flex;
  gap: 0.6rem;
  color: var(--color-text-muted);
}

.post-comments {
  margin-top: clamp(32px, 6vw, 48px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.post-sidebar {
  align-self: start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 1rem;
}

.post-sidebar-title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--color-text-primary);
}

/* Search results */

.search-results {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 52px);
  margin-top: clamp(24px, 5vw, 40px);
}

.search-results-sidebar {
  align-self: start;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: var(--shadow-card);
}

.collapsible-sidebar {
  display: grid;
  gap: 0.9rem;
}

.collapsible-sidebar-title {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.collapsible-sidebar-body {
  display: grid;
  gap: 0.4rem;
}

.filters-in-section {
  display: grid;
  gap: 0.9rem;
}

.multibrand-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.92);
  transition: border var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  font-size: 0.875rem;
  line-height: 1.4;
}

.sidenav-item:hover,
.sidenav-item.current {
  border-color: rgba(59, 91, 253, 0.28);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link);
}

.filter-name {
  font-weight: 600;
}

.doc-count {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.see-all-filters {
  justify-self: start;
  border: none;
  background: none;
  color: var(--color-link);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.see-all-filters:hover {
  color: var(--color-link-hover);
}

.search-results-column {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 5vw, 44px);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: clamp(20px, 4vw, 32px);
}

.search-results-subheading {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--color-text-primary);
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 4vw, 28px);
}

.search-results-list article {
  display: grid;
  gap: 0.5rem;
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
}

.search-results-list article:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 91, 253, 0.32);
  box-shadow: 0 20px 40px rgba(28, 41, 82, 0.16);
}

.search-result-title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.search-result-title a {
  color: var(--color-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.search-result-title a:hover {
  color: var(--color-link-hover);
}

.search-result-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.search-result-votes,
.search-result-meta-count {
  display: none;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.search-result-meta-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Hide author and date metadata */
.search-result-meta-container .meta-data {
  display: none;
}

.search-result-breadcrumbs {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.search-result-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.search-result-breadcrumbs li a {
  color: inherit;
  text-decoration: none;
}

.search-result-breadcrumbs li a:hover {
  color: var(--color-link);
}

.search-result-breadcrumbs li+li::before {
  content: "/";
  color: rgba(43, 55, 79, 0.3);
  font-weight: 400;
}

.search-result-description {
  margin: 0.5rem 0 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* User profile */

.profile-header {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 48px);
  box-shadow: var(--shadow-card);
  margin: clamp(32px, 6vw, 56px) 0;
}

.profile-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 4vw, 32px);
  align-items: center;
}

.profile-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar .user-avatar {
  width: clamp(72px, 12vw, 110px);
  height: clamp(72px, 12vw, 110px);
  border-radius: 50%;
  border: 2px solid rgba(59, 91, 253, 0.24);
  box-shadow: 0 18px 36px rgba(28, 41, 82, 0.18);
  display: block;
}

.profile-avatar .icon-agent,
.profile-avatar .icon-admin {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 8px 18px rgba(28, 41, 82, 0.18);
  color: var(--color-link);
}

.profile-info .basic-info {
  display: grid;
  gap: 0.75rem;
}

.community-name-and-title-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.profile-info .name {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--color-text-primary);
}

.profile-info .name a {
  color: inherit;
  text-decoration: none;
}

.profile-info .name a:hover {
  color: var(--color-link-hover);
}

.profile-info .options {
  display: grid;
  gap: 0.6rem;
  justify-items: end;
}

.user-profile-actions button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.2rem;
  border: 1px solid #1f54d9;
  background: #2863fe;
  color: #ffffff;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.user-profile-actions button:hover,
.user-profile-actions button:focus-visible {
  background: #1f54d9;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(28, 41, 82, 0.18);
}

.profile-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: rgba(59, 91, 253, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-link);
}

.profile-header .description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.profile-stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-stats .stat {
  min-width: 150px;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  gap: 0.35rem;
  box-shadow: var(--shadow-soft);
}

.stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.profile-nav {
  margin: clamp(28px, 6vw, 48px) 0;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 3.5vw, 28px);
  box-shadow: var(--shadow-card);
}

.profile-section {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: clamp(20px, 4vw, 32px);
  margin-bottom: clamp(28px, 5vw, 44px);
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
}

.profile-section-title {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--color-text-primary);
}

.profile-section-description {
  color: var(--color-text-secondary);
}

.profile-section-sorter {
  display: inline-flex;
  align-items: center;
}

.profile-activity-list,
.profile-contribution-list,
.profile-badges-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3.5vw, 24px);
}

.profile-activity {
  display: grid;
  gap: 0.9rem;
  padding: clamp(18px, 3.5vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-activity-header .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(59, 91, 253, 0.18);
}

.profile-activity-icon,
.profile-contribution-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(59, 91, 253, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-link);
}

.profile-activity-description {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: 600;
}

.profile-activity-contribution {
  padding: clamp(16px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 0.75rem;
}

.profile-contribution {
  display: grid;
  gap: 0.9rem;
  padding: clamp(18px, 3.5vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.profile-contribution-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  justify-content: space-between;
}

.profile-contribution-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.profile-contribution-title a {
  color: inherit;
  text-decoration: none;
}

.profile-contribution-title a:hover {
  color: var(--color-link-hover);
}

.profile-contribution-breadcrumbs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.profile-contribution-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-contribution-breadcrumbs li+li::before {
  content: "\203A";
  color: rgba(43, 55, 79, 0.4);
}

.profile-contribution-body {
  margin: 0;
  color: var(--color-text-secondary);
}

.comment-link {
  color: var(--color-link);
}

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

.profile-badges-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 3vw, 24px);
  align-items: center;
  padding: clamp(16px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.profile-badges-item-image .badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.profile-badges-item-title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.profile-badges-item-description {
  margin: 0.35rem 0 0;
  color: var(--color-text-secondary);
}

.profile-badges-item-metadata {
  text-align: right;
  color: var(--color-text-muted);
}

.profile-badges-item-metadata-title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.profile-badges-item-metadata-description {
  margin: 0;
}

.private-activity {
  border-style: dashed;
}

/* Error page */

.error-page {
  width: min(100%, 560px);
  margin: clamp(48px, 10vw, 80px) auto;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 48px);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: grid;
  gap: 1rem;
}

.error-page h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3rem);
  color: var(--color-text-primary);
}

.error-page h2 {
  margin: 0;
  color: var(--color-text-secondary);
}

.error-page p {
  margin: 0;
  color: rgba(75, 86, 113, 0.75);
}

.error-page a {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast), border var(--transition-fast);
}

.error-page a:hover {
  transform: translateY(-1px);
  background: rgba(59, 91, 253, 0.2);
  border-color: rgba(59, 91, 253, 0.32);
  color: var(--color-link-hover);
}

/* Forms & requests */

/* Request page container */
.requests-page .container,
.request-page .container {
  max-width: min(100%, 1400px) !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
}

.form {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-card);
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.form-header {
  margin: clamp(20px, 4vw, 28px) 0 clamp(28px, 5vw, 40px);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.form-field {
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.form-field label {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: clamp(0.95rem, 2vw, 1rem);
  margin-bottom: 0.25rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field textarea,
.form-field select {
  width: 100%;
  max-width: 100%;
  padding: clamp(0.875rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: clamp(0.95rem, 2vw, 1rem);
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.1);
}

.form-field textarea {
  min-height: clamp(120px, 20vw, 160px);
  resize: vertical;
}

/* Form buttons */
.form .button,
.form button[type="submit"],
.form input[type="submit"] {
  width: 100%;
  max-width: 100%;
  padding: clamp(0.875rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 600;
  border-radius: var(--radius-md);
  min-height: 48px;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.form .button-primary,
.form button[type="submit"].button-primary,
.form input[type="submit"].button-primary {
  background: linear-gradient(135deg, #3b5bfd, #6b8afc);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(59, 91, 253, 0.3);
}

.form .button-primary:hover,
.form button[type="submit"].button-primary:hover,
.form input[type="submit"].button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 91, 253, 0.4);
}

/* Form help text and descriptions */
.form-field-description,
.form-field .description,
.form-field small {
  font-size: clamp(0.85rem, 1.8vw, 0.9rem);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* Required field indicator */
.form-field label.required::after,
.form-field label[aria-required="true"]::after {
  content: " *";
  color: var(--color-danger);
  font-weight: 700;
}

/* Form error states */
.form-field.error input,
.form-field.error textarea,
.form-field.error select {
  border-color: var(--color-danger);
  background: rgba(255, 107, 107, 0.05);
}

.form-field .error-message {
  color: var(--color-danger);
  font-size: clamp(0.85rem, 1.8vw, 0.9rem);
  margin-top: 0.25rem;
}

/* Form success states */
.form-field.success input,
.form-field.success textarea,
.form-field.success select {
  border-color: var(--color-success);
}

/* Improve form layout on request pages */
.requests-page .form,
.request-page .form {
  max-width: min(100%, 680px);
  margin: clamp(24px, 5vw, 40px) auto;
}

.optional {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.suggestion-list li {
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.14);
  background: rgba(255, 255, 255, 0.96);
  transition: border var(--transition-fast), background var(--transition-fast);
}

.suggestion-list li:hover {
  border-color: rgba(59, 91, 253, 0.32);
  background: rgba(59, 91, 253, 0.12);
}

.content-tags-add-hint {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.notification {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-secondary);
}

.notification--error {
  border-color: rgba(255, 107, 107, 0.6);
  background: rgba(255, 107, 107, 0.12);
  color: #9c1f22;
}

.notification--success {
  border-color: rgba(79, 209, 197, 0.5);
  background: rgba(79, 209, 197, 0.12);
}

/* Footer */

.footer {
  margin-top: clamp(72px, 12vw, 140px);
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 72px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 246, 255, 0.92));
  border-top: 1px solid rgba(33, 56, 107, 0.12);
  box-shadow: 0 -20px 50px rgba(28, 41, 82, 0.12);
}

.footer-inner {
  width: min(100%, var(--layout-max-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}

.footer-brand {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.footer-brand--logo {
  padding: 0;
}

.footer-logo {
  max-width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(28, 41, 82, 0.12));
}

.footer-tagline {
  margin-top: 0.7rem;
  max-width: 34ch;
  color: var(--color-text-secondary);
}

.footer-mission {
  margin-top: 0.75rem;
  color: var(--color-text-secondary);
  max-width: 36ch;
}

.footer-label {
  font-weight: 600;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(43, 55, 79, 0.62);
  margin-bottom: 0.9rem;
}

.footer-nav {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.footer-link {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-link-hover);
  transform: translateX(4px);
}

.footer-language-selector {
  display: flex;
  align-items: center;
}

.footer-locale {
  color: var(--color-text-secondary);
}

.footer-legal {
  width: min(100%, var(--layout-max-width));
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(33, 56, 107, 0.12);
}

.footer-legal-text {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(75, 86, 113, 0.68);
}

/* Mobile responsiveness */

/* Hide ToC on smaller desktops/tablets (keep left nav + content) */
@media (max-width: 1200px) {
  .article-container {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }

  .article-toc {
    display: none;
  }
}

@media (max-width: 1180px) {
  .hero-inner {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: center;
  }

  .hero-copy,
  .hero-search {
    flex: 1 1 auto;
    max-width: 90%;
    width: 100%;
  }

  .hero-search .search {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-search .search button {
    width: 100%;
  }

  .collection-grid__list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

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

  /* Ensure parent containers don't break sticky positioning */
  .article-container,
  .article-container .article,
  .article-container>article,
  .article[role="document"],
  .article#main-content,
  .article,
  .article-info,
  .article-content,
  .article-body {
    overflow: visible !important;
  }

  /* Mobile TOC sticky behavior is now handled in the article-full-width-scrolled media query */


  .article-sidebar {
    position: static;
    order: 2;
  }

  .article-toc {
    display: none;
  }

  .post-container,
  .search-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-sidebar,
  .search-results-sidebar {
    order: 2;
  }

  .search-results-column {
    order: 1;
  }
}

@media (max-width: 1024px) {
  .nav-wrapper-desktop {
    display: none;
  }

  .nav-wrapper-mobile {
    display: block;
  }

  .cph-header__inner {
    justify-content: space-between;
  }

  .requests-table-toolbar {
    grid-template-columns: 1fr;
  }

  .request-container {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 32px) !important;
  }

  .request-main {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }

  .request-sidebar {
    order: 2 !important;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    width: 100% !important;
  }

  .request-sidebar .collapsible-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-background-alt);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .request-sidebar .collapsible-sidebar-toggle:hover,
  .request-sidebar .collapsible-sidebar-toggle:focus-visible {
    background: var(--color-surface);
    border-color: rgba(59, 91, 253, 0.28);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
  }

  /* Fix comment form overflow on mobile */
  .comment-form {
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(16px, 3vw, 24px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }

  .comment-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }

  .comment-fields {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    padding: clamp(12px, 3vw, 20px) !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Override any conflicting overflow styles - allow dropdowns to escape */
  .comment-fields,
  .comment-form,
  .comment-container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Force all children to respect container width */
  .comment-fields>* {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix CC input overflow */
  .comment-form .ccs-input,
  .comment-form input[type="text"],
  .comment-form input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix textarea overflow */
  .comment-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix CC pills container */
  .comment-ccs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .comment-ccs ul[data-hc-pills-container] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .comment-ccs ul[data-hc-pills-container] li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-ccs ul[data-hc-pills-container] li:has(input) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .comment-ccs ul[data-hc-pills-container] input,
  .comment-ccs .ccs-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 0% !important;
  }

  /* Fix WYSIWYG editor container */
  .comment-fields .ck-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .comment-fields .ck-editor__editable {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure dropdown panels can escape containers */
  .comment-fields .ck-dropdown__panel,
  .comment-fields .ck-panel,
  .comment-form .ck-dropdown__panel,
  .comment-form .ck-panel {
    position: absolute !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  /* Allow toolbar dropdowns to overflow */
  .comment-fields .ck-toolbar,
  .comment-fields .ck-toolbar__items {
    overflow: visible !important;
  }

  .collapsible-nav-toggle {
    display: inline-flex;
  }

  .collapsible-nav-list {
    width: 100%;
    justify-content: flex-start;
  }

  .topic-header,
  .page-header.community-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-info {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .profile-info .options {
    justify-items: center;
  }

  .profile-header .description,
  .profile-stats {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  /* Holiday banner mobile styles */
  .holiday-banner {
    margin: -2rem 1rem 1.5rem;
    padding: 1rem 1.25rem;
  }

  .holiday-banner__content {
    flex-direction: column;
    gap: 0.75rem;
  }

  .holiday-banner__text {
    font-size: 0.9rem;
  }

  .holiday-banner__link {
    display: block;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .hero {
    padding: clamp(40px, 12vw, 72px) clamp(16px, 6vw, 40px) clamp(24px, 8vw, 48px);
  }

  .cph-header {
    padding: 12px clamp(16px, 6vw, 28px);
  }

  .cph-header__logo {
    height: 34px;
  }

  .section {
    margin: clamp(24px, 8vw, 48px) 0;
  }

  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 4vw, 18px);
    margin: clamp(16px, 4vw, 24px) 0;
  }

  .breadcrumbs {
    justify-content: flex-start;
  }

  .container-divider {
    display: none;
  }

  .search-container {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent search bar expansion on mobile */
  .search-container:focus-within,
  .search-container.active {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-search .search input[type="search"] {
    border-radius: var(--radius-md);
  }

  /* Ensure minimum touch targets of 44x44px */
  .button,
  .button-primary,
  .button-secondary,
  .submit-a-request,
  .search button[type="submit"] {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
  }

  .primary-nav-link,
  .user-nav-list a {
    min-height: 44px;
    padding: 0.75rem 1.15rem;
  }

  .menu-button-mobile {
    min-height: 44px;
    min-width: 44px;
    padding: 0.65rem 1rem;
  }

  .menu-list-mobile .item>a,
  .menu-list-mobile .menu-link {
    min-height: 44px;
    padding: 0.85rem 1.1rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* Container padding for mobile */
  .container {
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }

  .article-container {
    gap: clamp(16px, 5vw, 24px);
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Mobile Form Improvements */
  .form,
  #main-content.form {
    padding: clamp(20px, 5vw, 28px) clamp(16px, 4vw, 24px) !important;
    gap: clamp(1.25rem, 4vw, 1.75rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin: 0 auto !important;
  }

  /* Force all descendants to respect form width - use universal selector */
  .form *,
  .form * *,
  .form * * *,
  form *,
  form * *,
  form * * * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Exception for checkboxes, radios, buttons */
  .form input[type="checkbox"],
  .form input[type="radio"],
  .form input[type="submit"],
  .form input[type="button"],
  .form button:not([type="submit"]),
  form input[type="checkbox"],
  form input[type="radio"],
  form input[type="submit"],
  form input[type="button"],
  form button:not([type="submit"]) {
    max-width: none !important;
  }

  /* Ensure all form inputs respect container width */
  .form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
  .form textarea,
  .form select,
  .form [data-garden-id="dropdowns.combobox"],
  .form [data-garden-id="dropdowns.combobox"] input,
  .form [data-garden-id="dropdowns.combobox"] * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix combobox/dropdown containers - very specific selectors */
  .form [data-garden-id="dropdowns.combobox"],
  .form [data-garden-id="dropdowns.combobox"] *,
  .form [data-garden-id="dropdowns.combobox.trigger"],
  .form [data-garden-id="dropdowns.combobox.container"],
  .form [data-garden-id="dropdowns.combobox.input_group"],
  .form [data-garden-id="dropdowns.combobox.value"],
  .form [data-garden-id="dropdowns.combobox.input"],
  form [data-garden-id="dropdowns.combobox"],
  form [data-garden-id="dropdowns.combobox"] * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix all form children to respect container */
  .form>*,
  .form form>*,
  .form [class*="Styled"],
  form>*,
  form [class*="Styled"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix any nested containers */
  .form div,
  .form fieldset,
  .form section,
  form div,
  form fieldset,
  form section {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Universal fix for all elements inside form */
  .form *,
  form * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Target Garden UI styled components specifically - use attribute selector for higher specificity */
  .form [data-garden-id="dropdowns.combobox"],
  form [data-garden-id="dropdowns.combobox"],
  .form [data-garden-id="dropdowns.combobox"].StyledCombobox-sc-1hs98ew-0,
  form [data-garden-id="dropdowns.combobox"].StyledCombobox-sc-1hs98ew-0,
  .form .StyledCombobox-sc-1hs98ew-0,
  .form .StyledTrigger-sc-14t9k4c-0,
  .form .StyledContainer-sc-18gcb1g-0,
  .form .StyledInputGroup-sc-2agt8f-0,
  form .StyledCombobox-sc-1hs98ew-0,
  form .StyledTrigger-sc-14t9k4c-0,
  form .StyledContainer-sc-18gcb1g-0,
  form .StyledInputGroup-sc-2agt8f-0 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Force width constraint on form container itself */
  #main-content.form,
  .form#main-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix nested divs inside form that are causing overflow */
  .form>div,
  .form>div>div,
  .form>div>div>div,
  .form form,
  .form form>div,
  .form form>div>div,
  form>div,
  form>div>div,
  form>div>div>div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Fix Garden UI field containers */
  .form [class*="StyledField"],
  form [class*="StyledField"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Exception for specific elements that need to be smaller */
  .form input[type="checkbox"],
  .form input[type="radio"],
  .form input[type="submit"],
  .form input[type="button"],
  .form button:not([type="submit"]) {
    max-width: none !important;
  }

  .form-header {
    font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
    margin: clamp(16px, 4vw, 24px) 0 clamp(20px, 5vw, 28px) !important;
    text-align: left !important;
  }

  .form-field {
    gap: clamp(0.4rem, 2vw, 0.6rem) !important;
  }

  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="tel"],
  .form-field input[type="url"],
  .form-field textarea,
  .form-field select {
    padding: clamp(0.75rem, 3vw, 0.875rem) clamp(0.875rem, 3vw, 1rem) !important;
    font-size: 16px !important;
    /* Prevent zoom on iOS */
  }

  .form .button,
  .form button[type="submit"],
  .form input[type="submit"] {
    width: 100% !important;
    padding: clamp(0.875rem, 3vw, 1rem) clamp(1.25rem, 4vw, 1.5rem) !important;
    min-height: 48px !important;
  }

  .requests-page .form,
  .request-page .form {
    max-width: 100% !important;
    margin: clamp(16px, 4vw, 24px) auto !important;
  }

  /* Mobile Article Readability Improvements */
  .article-container {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-left: clamp(16px, 4vw, 20px) !important;
    padding-right: clamp(16px, 4vw, 20px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .article-container .article,
  .article-container>article,
  .article[role="document"],
  .article#main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .article {
    padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 20px) !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Force article to fit container on mobile */
  .article-container .article {
    width: calc(100% - 0px) !important;
    max-width: calc(100% - 0px) !important;
  }

  .article-body {
    padding: 0 !important;
    font-size: clamp(16px, 4vw, 18px) !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Optimize heading spacing on mobile */
  .article-body h1 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    line-height: 1.3 !important;
    margin-top: clamp(32px, 8vw, 40px) !important;
    margin-bottom: clamp(16px, 4vw, 20px) !important;
  }

  .article-body h2 {
    font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
    line-height: 1.35 !important;
    margin-top: clamp(32px, 7vw, 40px) !important;
    margin-bottom: clamp(14px, 3.5vw, 18px) !important;
  }

  .article-body h3 {
    font-size: clamp(1.25rem, 4.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
    margin-top: clamp(28px, 6vw, 36px) !important;
    margin-bottom: clamp(12px, 3vw, 16px) !important;
  }

  .article-body h4 {
    font-size: clamp(1.125rem, 4vw, 1.25rem) !important;
    line-height: 1.45 !important;
    margin-top: clamp(24px, 5vw, 32px) !important;
    margin-bottom: clamp(10px, 2.5vw, 14px) !important;
  }

  /* Improve paragraph spacing */
  .article-body p {
    margin-top: 0 !important;
    margin-bottom: clamp(16px, 4vw, 20px) !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }

  /* Better list spacing */
  .article-body ul,
  .article-body ol {
    margin-top: 0 !important;
    margin-bottom: clamp(16px, 4vw, 20px) !important;
    padding-left: clamp(20px, 5vw, 24px) !important;
  }

  .article-body li {
    margin-bottom: clamp(8px, 2vw, 12px) !important;
    line-height: 1.7 !important;
  }

  /* Improve callouts on mobile - spacing and sizing only */
  .article-body .callout {
    margin: clamp(28px, 6vw, 36px) 0 !important;
    padding: clamp(20px, 5vw, 28px) clamp(18px, 4.5vw, 24px) clamp(20px, 5vw, 28px) clamp(60px, 12vw, 72px) !important;
    font-size: clamp(16px, 4vw, 17px) !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Adjust callout icon size on mobile */
  .article-body .callout::before {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem) !important;
    width: clamp(28px, 6vw, 32px) !important;
    height: clamp(28px, 6vw, 32px) !important;
    left: clamp(18px, 4.5vw, 24px) !important;
    top: clamp(20px, 5vw, 28px) !important;
  }


  /* Better table handling on mobile (but NOT the Applies table) */
  .article-body table:not(.applies-table) {
    font-size: clamp(14px, 3.5vw, 16px) !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: clamp(20px, 5vw, 28px) 0 !important;
  }

  .article-body table:not(.applies-table) th,
  .article-body table:not(.applies-table) td {
    padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px) !important;
    min-width: 100px !important;
  }

  /* Improve code blocks */
  .article-body code {
    font-size: clamp(14px, 3.5vw, 15px) !important;
    padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 8px) !important;
  }

  .article-body pre {
    padding: clamp(16px, 4vw, 20px) !important;
    margin: clamp(20px, 5vw, 28px) 0 !important;
    overflow-x: auto !important;
    font-size: clamp(14px, 3.5vw, 15px) !important;
    line-height: 1.6 !important;
  }

  /* Better image handling */
  .article-body img {
    max-width: 100% !important;
    height: auto !important;
    margin: clamp(20px, 5vw, 28px) 0 !important;
    border-radius: var(--radius-md) !important;
  }

  .article-body figure {
    margin: clamp(20px, 5vw, 28px) 0 !important;
  }

  .article-body figcaption {
    font-size: clamp(13px, 3vw, 14px) !important;
    margin-top: clamp(8px, 2vw, 12px) !important;
    padding: 0 clamp(12px, 3vw, 16px) !important;
  }

  /* Article header improvements */
  .article-header {
    margin-bottom: clamp(20px, 5vw, 28px) !important;
  }

  .article-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(12px, 3vw, 16px) !important;
  }

  .article-author {
    font-size: clamp(14px, 3.5vw, 15px) !important;
    gap: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px) !important;
  }

  /* Mobile ToC improvements */
  .article-mobile-toc {
    margin-bottom: clamp(20px, 5vw, 28px) !important;
  }

  .article-mobile-toc summary {
    padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 20px) !important;
    min-height: 44px !important;
  }

  /* Better HR spacing */
  .article-body hr {
    margin: clamp(32px, 7vw, 40px) 0 !important;
  }

  .blocks-item-link,
  .striped-list-item {
    padding: clamp(18px, 6vw, 24px);
  }

  .post {
    padding: clamp(24px, 6vw, 36px);
  }

  .post-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-overview {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-results-column {
    padding: clamp(22px, 8vw, 36px);
  }

  .profile-section {
    padding: clamp(22px, 7vw, 36px);
  }

  .profile-contribution-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .profile-badges-item {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center;
  }

  .profile-badges-item-metadata {
    text-align: center;
  }

  .profile-nav,
  .my-activities-nav {
    padding: clamp(16px, 6vw, 24px);
  }

  .footer {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-search .search input[type="search"] {
    width: 100%;
    border-radius: var(--radius-md);
  }

  .collection-card {
    min-height: 0;
  }

  .article {
    padding: clamp(20px, 8vw, 28px);
  }

  .article-header {
    margin-bottom: clamp(20px, 8vw, 28px);
  }

  .article-subscribe {
    margin-top: 0;
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 6vw, 32px);
    text-align: left;
  }

  .footer-column--brand {
    grid-column: span 2;
    margin-bottom: 0.5rem;
  }

  .footer-column--links,
  .footer-column--locale {
    padding-top: 0.5rem;
  }

}

/* Skip link */

.skip-navigation {
  position: fixed;
  left: clamp(16px, 4vw, 32px);
  top: clamp(8px, 2vw, 16px);
  padding: 0.55rem 1.05rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-link);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.2);
  box-shadow: 0 12px 28px rgba(28, 41, 82, 0.18);
  z-index: 9999;
  transform: translateY(-150%);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  opacity: 0;
}

.skip-navigation:focus {
  transform: translateY(0);
  opacity: 1;
}

.requests-page,
.request-page {
  padding-bottom: clamp(48px, 12vw, 96px);
}

.my-activities-nav {
  margin: clamp(20px, 5vw, 36px) auto;
  width: min(100%, 1160px);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow-card);
}

.collapsible-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}

.collapsible-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-link);
  cursor: pointer;
}

.collapsible-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collapsible-nav-list li {
  margin: 0;
}



.collapsible-nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.collapsible-nav-list a:hover {
  color: var(--color-link-hover);
  background: rgba(59, 91, 253, 0.12);
}

.collapsible-nav-list .current a,
.collapsible-nav-list a[aria-current="page"] {
  background: rgba(59, 91, 253, 0.16);
  color: var(--color-text-primary);
}

.my-activities-following-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.container>.requests {
  margin-top: clamp(16px, 3vw, 28px);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3.5vw, 30px);
  box-shadow: var(--shadow-card);
}

.no-activities,
.no-activity {
  display: block;
  margin: clamp(20px, 3.5vw, 32px) 0;
  padding: clamp(16px, 3vw, 24px);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(59, 91, 253, 0.28);
  background: rgba(59, 91, 253, 0.08);
  text-align: center;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.my-activities-header,
.request-title {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: clamp(12px, 3vw, 24px);
}

.my-activities-header h1 {
  margin: 0;
}

.requests-shell,
.request-shell {
  width: 100%;
  margin: clamp(12px, 3vw, 32px) auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.request-title {
  margin-bottom: clamp(20px, 4vw, 32px);
  padding-bottom: clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--color-divider);
}

.requests-shell+.requests-shell {
  margin-top: clamp(16px, 3vw, 28px);
}

.requests-table-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 3vw, 24px);
  align-items: end;
  margin-bottom: clamp(18px, 4vw, 30px);
  padding: clamp(14px, 3.5vw, 24px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(59, 91, 253, 0.14);
}

.requests-search {
  padding-left: 2.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.18);
  background: rgba(255, 255, 255, 0.95);
}

.request-table-filter {
  display: grid;
  gap: 0.45rem;
}

.requests-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.requests-table th,
.requests-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(59, 91, 253, 0.1);
}

.requests-table thead {
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-text-primary);
}

.requests-table tbody tr:hover {
  background: rgba(59, 91, 253, 0.08);
}

.requests-table-status .status-label {
  background: rgba(59, 91, 253, 0.12);
  color: var(--color-text-primary);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.request-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(24px, 4vw, 48px);
  margin: clamp(20px, 4vw, 44px) auto;
  width: 100%;
  align-items: start;
  max-width: 100%;
}

.request-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.request-main {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-card);
  min-width: 0;
  /* Prevent grid overflow */
}

.request-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 32px);
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vw, 28px);
}

.comment {
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-background-alt);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.comment:hover {
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.comment-info {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.comment-avatar {
  flex-shrink: 0;
  display: inline-flex;
  position: relative;
}

.comment-avatar .icon-agent,
.comment-avatar .icon-admin {
  display: none;
}

.comment-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.comment-meta a {
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}

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

.meta-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.request-sidebar .collapsible-sidebar-toggle {
  display: none;
}

.request-details {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.request-details dt {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: clamp(0.85rem, 2vw, 0.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.request-details dd {
  margin: 0 0 0;
  color: var(--color-text-primary);
  font-size: clamp(0.95rem, 2vw, 1rem);
  line-height: 1.5;
  word-break: break-word;
}

.request-details dd:last-child {
  margin-bottom: 0;
}

.request-follow-up {
  margin-top: clamp(20px, 4vw, 32px);
  padding: clamp(20px, 4vw, 28px);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.comment-form {
  margin-top: clamp(24px, 5vw, 40px);
  padding: clamp(20px, 4vw, 32px);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}

.comment-container {
  display: grid;
  gap: clamp(12px, 2.5vw, 20px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
}

.comment-fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(16px, 3vw, 24px);
  background: var(--color-surface-strong);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
}

.comment-show-container {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.16);
  background: rgba(59, 91, 253, 0.08);
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  color: var(--color-link);
}

.comment-form-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
}

.request-breadcrumbs {
  margin-top: clamp(20px, 5vw, 32px);
  margin-bottom: clamp(16px, 3vw, 24px);
}

.request-breadcrumbs .breadcrumbs {
  margin: 0;
}

.requests-table-toolbar .search {
  position: relative;
}

.requests-table-toolbar .search svg {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: rgba(59, 91, 253, 0.55);
}

.my-activities-sub-nav {
  margin-top: clamp(12px, 3vw, 20px);
}

/* Layout Improvements */

/* Popular Destinations Grid */
.hero-quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  width: 100%;
}

.hero-quicklinks-grid .hero-quicklinks-item {
  display: flex;
  width: 100%;
}

.hero-quicklinks-grid .hero-quicklink {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  height: 100%;
}

.hero-quicklinks-grid .hero-quicklink:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(59, 91, 253, 0.3);
  text-decoration: none;
}

.hero-quicklinks-grid .hero-quicklink-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.hero-quicklinks-grid .hero-quicklink-meta {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .hero-quicklinks-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-quicklinks-grid .hero-quicklink {
    padding: 1.25rem 1.35rem;
  }
}

/* Knowledge Base Cards Improvements */
.collection-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
  transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default);
  border: 1px solid var(--color-border);
}

.collection-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: rgba(59, 91, 253, 0.3);
  text-decoration: none;
}

.collection-card__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.collection-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.collection-card__meta {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Recent Activity Header Styling */
.recent-activity-header {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

/* Recent Activity List Container - already defined above, removing duplicate */

/* ==========================================================================
   Feedback Modal
   ========================================================================== */

.feedback-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.feedback-modal-active {
  display: flex;
}

.feedback-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.feedback-modal-content {
  position: relative;
  background: var(--color-surface-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  z-index: 1;
}

.feedback-modal-content h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
  color: var(--color-text-primary);
}

.feedback-modal-content p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.feedback-modal-actions {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}

.feedback-modal-actions .button {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.feedback-modal-actions .button-primary {
  background: linear-gradient(135deg, #3b5bfd, #6b8afc);
  color: white;
  border: none;
}

.feedback-modal-actions .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 91, 253, 0.4);
}

.feedback-modal-actions .feedback-modal-close {
  background: transparent;
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border);
}

.feedback-modal-actions .feedback-modal-close:hover {
  background: var(--color-surface);
  border-color: var(--color-link);
  color: var(--color-link);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* ==========================================================================
   Hide Article Timestamps (but keep them visible on request pages)
   ========================================================================== */

/* Hide timestamps in article metadata only (not on request pages) */
body:not(.request-page):not(.requests-page) .article-author time,
body:not(.request-page):not(.requests-page) .article-meta time,
body:not(.request-page):not(.requests-page) .article-body .meta time,
body:not(.request-page):not(.requests-page) .article-author .meta-group time {
  display: none !important;
}

/* Hide specific timestamp text patterns in articles only */
.article-updated,
.article-created,
body:not(.request-page):not(.requests-page) .article-author .meta-data,
body:not(.request-page):not(.requests-page) .article-meta .meta-data,
body:not(.request-page):not(.requests-page) .article-author .meta-group .meta-data,
body:not(.request-page):not(.requests-page) .article-meta .meta-group .meta-data,
body:not(.request-page):not(.requests-page) .article-body .timestamp {
  display: none !important;
}

/* Hide the entire meta-group in articles if it only contains timestamps */
body:not(.request-page):not(.requests-page) .article-author .meta-group:has(.meta-data:only-child),
body:not(.request-page):not(.requests-page) .article-meta .meta-group:has(.meta-data:only-child) {
  display: none !important;
}

/* Hide "Updated" text in article metadata */
body:not(.request-page):not(.requests-page) .article-author .meta-data:contains("Updated"),
body:not(.request-page):not(.requests-page) .article-meta .meta-data:contains("Updated") {
  display: none !important;
}

/* Alternative: Hide meta-group entirely in articles (contains timestamps) */
body:not(.request-page):not(.requests-page) .article-author .meta-group,
body:not(.request-page):not(.requests-page) .article-meta .meta-group {
  display: none !important;
}

/* IMPORTANT: Keep timestamps visible on request pages - must come after hiding rules */
.request-page .meta-data,
.request-page time,
.request-page .request-details time,
.request-page .request-details .meta-data,
.request-page .comment .meta-data,
.request-page .comment time,
.request-page .comment .meta-group time,
.request-page .comment .meta-group .meta-data,
.requests-page .meta-data,
.requests-page time,
.request-details time,
.request-details .meta-data,
.comment .meta-data,
.comment time,
.comment .meta-group time,
.comment .meta-group .meta-data {
  display: block !important;
  visibility: visible !important;
}

/* Ensure time elements in request details are visible */
.request-details dd time,
.request-sidebar time {
  display: inline !important;
  visibility: visible !important;
}

/* ==========================================================================
   Home page polish (subtle upgrades without layout changes)
   ========================================================================== */

.hero-copy,
.hero-search {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 243, 255, 0.94));
  border: 1px solid rgba(59, 91, 253, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: 0 22px 60px rgba(28, 41, 82, 0.18);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-copy::before,
.hero-search::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 18% 24%, rgba(59, 91, 253, 0.16), transparent 70%),
    radial-gradient(50% 50% at 88% 10%, rgba(249, 66, 58, 0.12), transparent 70%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.hero-copy>*,
.hero-search>* {
  position: relative;
  z-index: 1;
}

.hero-title {
  color: #101320;
  text-shadow: 0 8px 26px rgba(28, 41, 82, 0.12);
}

.hero-highlights {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(59, 91, 253, 0.12);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hero-quicklink {
  border-color: rgba(59, 91, 253, 0.2);
  box-shadow: var(--shadow-soft);
}

.hero-quicklink:hover {
  box-shadow: 0 18px 44px rgba(28, 41, 82, 0.16);
}

.collection-grid__list {
  align-items: stretch;
}

.collection-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(234, 240, 255, 0.9));
  border: 1px solid rgba(59, 91, 253, 0.16);
  box-shadow: 0 18px 46px rgba(28, 41, 82, 0.16);
}

.collection-card__title {
  letter-spacing: -0.01em;
}

.featured-articles {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.promoted-articles-item a {
  border-color: rgba(59, 91, 253, 0.22);
  box-shadow: 0 16px 42px rgba(28, 41, 82, 0.16);
}

.promoted-articles-item a::after {
  content: "→";
  font-weight: 700;
  color: var(--color-link);
}

.home-section.activity {
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.recent-activity__item,
.recent-activity-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 244, 255, 0.92));
  border-color: rgba(59, 91, 253, 0.2) !important;
  box-shadow: var(--shadow-soft) !important;
}

.recent-activity__item:hover,
.recent-activity-item:hover {
  box-shadow: 0 20px 48px rgba(28, 41, 82, 0.2) !important;
}

.holiday-banner {
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(28, 41, 82, 0.14);
}

.footer {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -18px 48px rgba(28, 41, 82, 0.12);
  overflow: hidden;
}

.steps>li::marker {
  font-size: 1.5rem;
  /* match h2 */
  font-weight: 600;
  /* match h2 */
  line-height: 1.2;
  color: inherit;
  /* or a specific color */
}

/* Hide vote count */
.article-votes-count {
  flex-basis: 100%;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  display: none !important;
}

/* Style vote buttons with thumbs icons */
.article-vote {
  min-width: 52px;
  min-height: 42px;
  padding: 0.65rem 1.1rem;
  font-size: 0;
  position: relative;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 14px;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.article-vote::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 24px;
  line-height: 1;
}

.article-vote-up::before {
  content: "👍";
}

.article-vote-down::before {
  content: "👎";
}

.article-vote:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.article-vote[aria-pressed="true"] {
  background: var(--color-link);
  border-color: var(--color-link);
  color: white;
}

.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.article-return-to-top a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 640px) {
  footer {
    padding-inline: 1.25rem;
  }

  .article-votes {
    border-radius: 16px;
    align-items: flex-start;
  }

  .article-return-to-top {
    align-self: stretch;
    text-align: right;
  }
}