@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* 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);
}

.article-body .wysiwyg-table table,
.article-body .wysiwyg-table td,
.article-body .wysiwyg-table th {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
}

/* All article WYSIWYG tables */
.article-body figure.wysiwyg-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Let table size to its content, but never smaller than container */
.article-body figure.wysiwyg-table>table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

/* Keep data columns from collapsing */
.article-body figure.wysiwyg-table th,
.article-body figure.wysiwyg-table td {
  white-space: nowrap;
  vertical-align: top;
}

/* Optional: keep removing editor-injected borders */
.article-body figure.wysiwyg-table table,
.article-body figure.wysiwyg-table th,
.article-body figure.wysiwyg-table td {
  border: 0 !important;
}


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


/* Montserrat loaded via Google Fonts @import at top of file */

.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;
  --article-read-measure: 96ch; /* full-width reading column (prose + title share it) */
  --search-expanded-width: 420px;
  --header-control-height: 40px;
  --header-search-width: clamp(260px, 28vw, 360px);
  --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 removed — was doubling with body and causing right-edge gap in Firefox */
  scroll-padding-top: 140px !important;
  /* Prevent sticky header from covering anchor links */
  overflow-x: clip;
  /* Prevent horizontal scroll without creating a scroll container */
  -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.85s;
    /* 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;
  /* Use overflow-clip instead of overflow-hidden to prevent horizontal scroll
     WITHOUT creating a scroll container (which would break position:sticky on the header). */
  overflow-x: clip !important;
  overflow-y: visible !important;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  scroll-padding-top: 140px !important;
}

body.nav-open {
  overflow: hidden !important;
}

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

h1,
h2,
h3 {
  text-wrap: balance;
}

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: 1600px;
  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-visible,
textarea:focus-visible,
select:focus-visible {
  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-visible,
textarea:invalid:not(:placeholder-shown):focus-visible,
select:invalid:focus-visible {
  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: 0;
  margin: 0;
  background: none;
}

/* Header */

.cph-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  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;
  overflow: visible;
  will-change: padding, box-shadow, border-color, transform;
  transition: padding var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-default);
}

.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: 100%;
  max-width: 1600px;
  padding: 0 clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  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);
}

/* Hide header on scroll-down, show on scroll-up */
.cph-header.cph-header--hidden {
  transform: translateY(-100%);
  pointer-events: none;
  box-shadow: none;
  visibility: hidden;
  /* Delay visibility:hidden until transform animation finishes */
  transition: padding var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-default), visibility 0s 240ms;
}

/* When header is hidden, reduce the sticky-top offset for elements below */
.cph-header.cph-header--hidden~* .article-mobile-toc,
body:has(.cph-header--hidden) .article-mobile-toc {
  top: 12px !important;
}

.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(16px, 3vw, 32px);
}

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 var(--header-search-width);
  width: var(--header-search-width);
  min-width: var(--header-search-width);
  max-width: var(--header-search-width);
  z-index: 100;
}

.header-search:focus-within .search input[type="search"] {
  border-color: rgba(59, 91, 253, 0.4);
  box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.1);
}

.header-search:focus-within .search-icon {
  color: rgba(59, 91, 253, 0.72);
}

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

.header-search .search {
  width: 100%;
  position: relative;
}

.header-search .search input[type="search"] {
  width: 100%;
  min-height: var(--header-control-height);
  padding: 8px 14px 8px 2.2rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(59, 91, 253, 0.18);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.header-search .search input[type="search"]:focus {
  outline: none;
  border-color: rgba(59, 91, 253, 0.4);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.1);
}

.header-search .search input[type="search"]::placeholder {
  color: rgba(43, 55, 79, 0.45);
}

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

/* Header and Hero search autocomplete positioning is handled natively by Zendesk JS */
.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;
  min-height: var(--header-control-height);
  padding: 0.55rem 0.95rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow 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;
}

/* Keep desktop header controls visually aligned and compact. */
.nav-wrapper-desktop .primary-nav-link,
.nav-wrapper-desktop .user-nav-list a,
.nav-wrapper-desktop .user-info .dropdown-toggle {
  min-height: var(--header-control-height);
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible {
  color: var(--color-link-hover);
  background: rgba(59, 91, 253, 0.11);
  box-shadow: 0 2px 6px rgba(28, 41, 82, 0.08);
}

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

/* Override the big blue button style for Submit a Request in the header nav */
.user-nav-list .submit-a-request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-control-height);
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 0.55rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}

.user-nav-list .submit-a-request:hover,
.user-nav-list .submit-a-request:focus-visible {
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-link-hover);
  border-color: rgba(59, 91, 253, 0.25);
  box-shadow: 0 2px 6px rgba(28, 41, 82, 0.08);
}

.user-nav-list .sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-control-height);
  white-space: nowrap;
  line-height: 1;
  padding: 0.55rem 0.95rem;
  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), 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);
  box-shadow: 0 2px 6px rgba(28, 41, 82, 0.08);
}

.user-info {
  position: relative;
  display: flex;
  align-items: center;
}

.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-info .dropdown-toggle {
  gap: 0.5rem;
  min-height: var(--header-control-height);
  padding: 0.3rem 0.78rem 0.3rem 0.32rem;
  border-color: rgba(59, 91, 253, 0.18);
  background: rgba(246, 248, 255, 0.95);
  box-shadow: 0 1px 2px rgba(28, 41, 82, 0.08);
  white-space: nowrap;
}

.user-menu-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
  white-space: nowrap;
}

.user-menu-name {
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.user-info .dropdown-toggle:hover,
.user-info .dropdown-toggle:focus-visible {
  background: rgba(236, 242, 255, 0.98);
  border-color: rgba(59, 91, 253, 0.28);
  box-shadow: 0 2px 8px rgba(28, 41, 82, 0.09);
}

.user-info .dropdown-chevron-icon {
  width: 10px;
  height: 10px;
  opacity: 0.72;
  flex-shrink: 0;
}

.user-info .user-avatar {
  width: 28px;
  height: 28px;
  border-color: rgba(59, 91, 253, 0.22);
  flex-shrink: 0;
}

.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);
  overscroll-behavior: contain;
}

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

.user-info-menu {
  display: grid;
  gap: 0.15rem;
}

.user-info-menu a,
.user-info-menu button,
.user-info-menu [role="menuitem"],
.user-info-menu .user-info-menu__item {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

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

.mobile-search-toggle {
  display: none;
}

.mobile-search-panel {
  display: none;
}

.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);
  overscroll-behavior: contain;
}

.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(10px, 2vw, 16px) 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-visible {
  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: 4px !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: 9999 !important;
}

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

/* Hide autocomplete when search is delaying (transition effect) */
.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), 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;
}

/* 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;
    /* Single merged transition — includes top for header-hidden state */
    transition: top var(--transition-default),
      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) !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;
  }

  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;
  /* Shown on mobile via media query */
}

/* 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;
  font-variant-numeric: tabular-nums;
  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;
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

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

/* ---- How-to steps: action + result hierarchy ----
   Numbered steps are authored as <li><p>action</p><p>result</p></li>. By
   default the action and its "you'll see this" result sit a full paragraph
   apart (1.25rem) while steps are only 0.4rem apart, so each result drifts
   toward the next step and reads as a disconnected, equal-weight line.
   Tuck each result tightly under its action as a quieter note, and give the
   steps themselves clearer separation. CSS-only — applies to every article,
   and the :not(:first-child) target handles wrapped/unwrapped actions,
   sub-lists, images and callouts within a step. */
.article-body ol > li > p {
  margin-bottom: 0.3rem;
}

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

/* Secondary paragraph(s) under a step = the expected result / detail.
   Colour stays >=4.5:1 on the card for accessibility; the quiet feel comes
   from the smaller size and tight grouping under the bold action line. */
.article-body ol > li > p:not(:first-child) {
  margin-top: 0.25rem;
  color: rgba(43, 55, 79, 0.72);
  font-size: 0.93rem;
  line-height: 1.7;
}

/* Keep a sub-list close to a following result note within the same step */
.article-body ol > li > ul:not(:last-child),
.article-body ol > li > ol:not(:last-child) {
  margin-bottom: 0.55rem;
}

/* Clearer air between consecutive steps */
.article-body ol > li + li,
.article-body ol > li[data-list-item-id] + li[data-list-item-id] {
  margin-top: 1.05rem;
}

.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);
  font-variant-numeric: tabular-nums;
}

.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-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  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(32px, 5vw, 56px);
  padding: clamp(24px, 4vw, 44px) 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(16px, 2vw, 24px) auto 0;
  padding-top: 1rem;
  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;
  }

  /* Show mobile TOC and make it sticky when desktop TOC is hidden */
  .article-mobile-toc {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 100;
    transition: top var(--transition-default);
  }

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

  .mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .mobile-search-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px clamp(16px, 6vw, 28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(28, 41, 82, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default);
    z-index: 199;
  }

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

  .mobile-search-panel .search {
    width: 100%;
    position: relative;
  }

  .mobile-search-panel .search input[type="search"] {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid rgba(59, 91, 253, 0.18);
    font-size: 1rem;
    color: var(--color-text-primary);
  }

  .mobile-search-panel .search input[type="search"]:focus {
    outline: none;
    border-color: rgba(59, 91, 253, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 91, 253, 0.1);
  }

  .mobile-search-panel .search button[type="submit"],
  .mobile-search-panel .search button[type="reset"] {
    display: none;
  }

  .mobile-search-panel zd-autocomplete,
  .mobile-search-panel zd-autocomplete-multibrand {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    z-index: 260 !important;
    /* top is set dynamically by JS syncMobileSearchAutocomplete */
  }

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

  .cph-header__inner {
    padding: 0 clamp(16px, 4vw, 24px);
  }

  .cph-header__logo {
    height: 34px;
  }

  .header-search {
    display: none;
  }

  .mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-background-alt);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    min-height: 44px;
    min-width: 44px;
  }

  .mobile-search-toggle:hover,
  .mobile-search-toggle:focus-visible {
    background: var(--color-surface);
    border-color: rgba(59, 91, 253, 0.28);
    color: rgba(59, 91, 253, 0.8);
  }

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

  .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 and code handling on mobile */
  .article-body table:not(.applies-table),
  .article-body .table {
    font-size: clamp(14px, 3.5vw, 16px) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: clamp(20px, 5vw, 28px) 0 !important;
  }

  .article-body table th,
  .article-body table td {
    padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px) !important;
    min-width: 100px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .article-body figure.wysiwyg-table {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .article-body figure.wysiwyg-table>table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Improve inline code and code blocks */
  .article-body :not(pre)>code,
  .article-body code {
    font-size: clamp(14px, 3.5vw, 15px) !important;
    padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 8px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !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;
  align-items: center;
  justify-content: center;
  gap: 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;
  }
}

/* Hide header search on homepage */
.hero-search~.header-search,
.hero~.container .header-search,
.hero-inner .header-search,
body:has(.hero-search) .header-search {
  display: none !important;
}

/* ============================================================
   Desktop full-width ("Focus") reading mode
   ------------------------------------------------------------
   - Toggle button lives in .article-toolbar (top-right of card)
   - On html.article-immersive the side rails collapse and the
     article grows to fill the width.
   - Prose stays at a comfortable reading measure; tables, media
     and code break out to the full card width.
   - The hidden rails are reused as slide-in flyout panels,
     summoned by slim edge tabs pinned to the viewport edges.
   - Only active >=1201px (where both rails normally exist);
     the existing mobile scroll behaviour is untouched.
   ============================================================ */

/* Article action toolbar (rendered in article_page.hbs).
   Holds the Follow button (all viewports) and the full-width toggle
   (desktop only). Right-aligned above the title, so the Follow control
   is anchored instead of floating loosely under the heading. */
.article-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.article-fullwidth-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  min-height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.22);
  background: rgba(59, 91, 253, 0.07);
  color: var(--color-link);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article-fullwidth-toggle:hover,
.article-fullwidth-toggle:focus-visible {
  background: rgba(59, 91, 253, 0.14);
  border-color: rgba(59, 91, 253, 0.36);
  color: var(--color-link-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.10);
}

.article-fullwidth-toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.article-fullwidth-toggle:active {
  transform: translateY(0);
}

.article-fullwidth-toggle__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.article-fullwidth-toggle__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Icon + label swap based on state (no JS flash) */
.article-fullwidth-toggle .icon-collapse,
.article-fullwidth-toggle .label-collapse {
  display: none;
}

html.article-immersive .article-fullwidth-toggle .icon-expand,
html.article-immersive .article-fullwidth-toggle .label-expand {
  display: none;
}

html.article-immersive .article-fullwidth-toggle .icon-collapse {
  display: inline-flex;
}

html.article-immersive .article-fullwidth-toggle .label-collapse {
  display: inline;
}

html.article-immersive .article-fullwidth-toggle {
  background: rgba(59, 91, 253, 0.16);
  border-color: rgba(59, 91, 253, 0.4);
  color: var(--color-link-hover);
}

/* ---- Follow button (Zendesk {{subscribe}} helper) ----
   Restyled to a refined pill that matches the toolbar, with a bell icon
   so the action reads as "get notified about updates". The followed
   state is driven by the helper's [aria-pressed]/[data-selected]. */
.article-toolbar .article-subscribe,
.article-toolbar .article-subscribe > div {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.article-toolbar .article-subscribe button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 0.95rem 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(59, 91, 253, 0.22);
  background: rgba(59, 91, 253, 0.07);
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Bell icon via mask so it inherits the button colour */
.article-toolbar .article-subscribe button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.article-toolbar .article-subscribe button:hover,
.article-toolbar .article-subscribe button:focus-visible {
  background: rgba(59, 91, 253, 0.14);
  border-color: rgba(59, 91, 253, 0.36);
  color: var(--color-link-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(28, 41, 82, 0.10);
}

.article-toolbar .article-subscribe button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Followed state: filled tint signals "you're subscribed" */
.article-toolbar .article-subscribe button[aria-pressed="true"],
.article-toolbar .article-subscribe button[data-selected="true"] {
  background: rgba(59, 91, 253, 0.18);
  border-color: rgba(59, 91, 253, 0.44);
  color: var(--color-link-hover);
}

/* Hide the follower-count text visually but keep it for screen readers
   (the button references it via aria-describedby) */
.article-toolbar .article-subscribe button + span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Edge tabs + scrim are created by JS; hidden unless immersive + desktop */
.article-edge-tab {
  display: none;
}

.article-flyout-scrim {
  display: none;
}

@media (min-width: 1201px) {

  .article-fullwidth-toggle {
    display: inline-flex;
  }

  /* ---- The fluid collapse ----
     Keep the page at the site's natural max width so the article stays
     aligned with the header/footer; the dramatic widening comes from
     collapsing the two rails into the centre track. */
  html.article-immersive .article-container {
    grid-template-columns: 0fr minmax(0, 1fr) 0fr;
    gap: 0;
  }

  /* Pin the article to the centre track as the rails leave the flow.
     max-width uses !important to beat the base `.article#main-content`
     id rule (max-width: 1400px), letting the card fill the row. */
  html.article-immersive .article-container > .article {
    grid-column: 2 / 3;
    max-width: none !important;
    width: 100%;
  }

  /* Align the title/author header with the centred reading column so the
     title's left edge lines up with the prose below it (instead of sitting
     out at the card edge). The toolbar stays full-width in the corner. */
  html.article-immersive .article-header {
    max-width: var(--article-read-measure);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* ---- Readable prose, full-width media ----
     A 3-zone grid: prose sits in a centred readable column while
     tables / media / code span the full card width. */
  html.article-immersive .article-body {
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [content-start] min(var(--article-read-measure), 100%) [content-end]
      minmax(0, 1fr) [full-end];
  }

  html.article-immersive .article-body > * {
    grid-column: content;
    min-width: 0;
  }

  html.article-immersive .article-body > figure,
  html.article-immersive .article-body > figure.wysiwyg-table,
  html.article-immersive .article-body > .wysiwyg-table,
  html.article-immersive .article-body > table,
  html.article-immersive .article-body > .table,
  html.article-immersive .article-body > img,
  html.article-immersive .article-body > pre,
  html.article-immersive .article-body > iframe,
  html.article-immersive .article-body > video {
    grid-column: full;
  }

  /* ---- Rails become off-canvas flyout panels (DOM reused) ----
     position/top use !important to beat the base rails, which are
     `position: sticky !important; top: … !important`. Without this
     the rails stay in the grid flow and the 0fr tracks collapse to
     their min-content, squashing the article instead of expanding it. */
  html.article-immersive .article-sidebar,
  html.article-immersive .article-toc {
    position: fixed !important;
    top: calc(var(--header-height) + 16px) !important;
    width: min(360px, 88vw);
    max-height: calc(100vh - var(--header-height) - 32px);
    margin: 0;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-long), opacity var(--transition-default),
      visibility 0s linear 240ms;
  }

  html.article-immersive .article-sidebar {
    left: 0;
    transform: translateX(-110%);
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  html.article-immersive .article-toc {
    right: 0;
    display: block;
    transform: translateX(110%);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  html.article-immersive .article-sidebar.is-open,
  html.article-immersive .article-toc.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform var(--transition-long), opacity var(--transition-default);
  }

  /* ---- Slim edge tabs that summon the flyouts ---- */
  html.article-immersive .article-edge-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: calc(var(--header-height) + 104px);
    z-index: 1190;
    padding: 16px 9px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-strong);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    color: var(--color-link);
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(28, 41, 82, 0.16);
    transition: transform var(--transition-default), opacity var(--transition-default),
      background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  }

  html.article-immersive .article-edge-tab--left {
    left: 0;
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  html.article-immersive .article-edge-tab--right {
    right: 0;
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  html.article-immersive .article-edge-tab:hover,
  html.article-immersive .article-edge-tab:focus-visible {
    background: rgba(59, 91, 253, 0.12);
    color: var(--color-link-hover);
    box-shadow: 0 16px 38px rgba(28, 41, 82, 0.22);
  }

  html.article-immersive .article-edge-tab--left:hover,
  html.article-immersive .article-edge-tab--left:focus-visible {
    transform: translateX(4px);
  }

  html.article-immersive .article-edge-tab--right:hover,
  html.article-immersive .article-edge-tab--right:focus-visible {
    transform: translateX(-4px);
  }

  html.article-immersive .article-edge-tab:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
  }

  .article-edge-tab__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
  }

  .article-edge-tab__icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .article-edge-tab__text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Hide a tab while its own panel is open */
  html.article-immersive .article-edge-tab--left[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-16px);
  }

  html.article-immersive .article-edge-tab--right[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(16px);
  }

  /* ---- Soft scrim behind an open flyout (click to close) ---- */
  html.article-immersive .article-flyout-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(15, 23, 42, 0.16);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-default), visibility 0s linear 240ms;
  }

  html.article-immersive .article-flyout-scrim.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-default);
  }
}

/* Honour reduced-motion: keep the function, drop the movement */
@media (prefers-reduced-motion: reduce) {

  .article-fullwidth-toggle,
  html.article-immersive .article-container,
  html.article-immersive .article-sidebar,
  html.article-immersive .article-toc,
  html.article-immersive .article-edge-tab,
  html.article-immersive .article-flyout-scrim {
    transition: none !important;
  }
}