@charset "UTF-8";
/* ================================================================
   NYM Help Center — Dark Liquid Glass Theme v6
   © 2025 NYM Technologies SA
   Built on original Nym theme structure — all original class names preserved
   ================================================================ */

/* ─── SELF-HOSTED FONTS (no third-party requests) ──────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("{{asset 'space-grotesk-latin.woff2'}}") format("woff2");
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("{{asset 'dm-sans-latin.woff2'}}") format("woff2");
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("{{asset 'dm-sans-italic-latin.woff2'}}") format("woff2");
}

/* ─── CSS VARIABLES ─────────────────────────────────────────────── */
:root {
  /* nym.com-inspired palette: warmer, richer, less black */
  --nym-bg:        #0A0A0A;
  --nym-bg-s:      #1A1A1C;
  --nym-card:      rgba(26,26,28,0.85);
  --nym-card-h:    rgba(36,36,40,0.95);
  --nym-green:     #5BF0A0;
  --nym-green-s:   rgba(91,240,160,0.10);
  --nym-green-b:   rgba(91,240,160,0.25);
  --nym-green-g:   rgba(91,240,160,0.12);
  --nym-t1:        #F0F2F5;
  --nym-t2:        #C8CDD6;
  --nym-t3:        #9AA3AE;
  --nym-bd:        rgba(255,255,255,0.10);
  --nym-bd2:       rgba(255,255,255,0.20);
  --nym-r1:        6px;
  --nym-r2:        10px;
  --nym-r3:        14px;
  --nym-r4:        20px;
  --nym-r5:        28px;
  --nym-mw:        1360px;
  --nym-nav:       64px;
  --nym-sans:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nym-head:      'Space Grotesk', sans-serif;
}

/* ─── RESET / BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--nym-sans);
  background: var(--nym-bg);
  background-attachment: fixed;
  color: var(--nym-t1);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  max-width: 100%;
}

body,
main,
header,
footer,
section,
article,
aside,
nav,
div,
ul,
li,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
  min-width: 0;
}

a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (min-width: 1024px) { body > main { min-height: 65vh; } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nym-head);
  line-height: 1.15;
  color: var(--nym-t1);
  margin-top: 0;
}
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; }

a { color: var(--nym-t1); text-decoration: none; transition: color 0.15s; }
a:visited { color: var(--nym-t2); }
a:hover, a:active, a:focus { color: var(--nym-green); text-decoration: none; }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; }
button { cursor: pointer; font-family: var(--nym-sans); }

input, textarea, select {
  color: var(--nym-t1);
  font-size: 14px;
  font-family: var(--nym-sans);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  transition: border-color 0.18s;
}
input:not([type=checkbox]) { outline: none; }
input:not([type=checkbox]):focus,
textarea:focus,
select:focus {
  border-color: var(--nym-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,240,160,0.1);
}
input[disabled] { background: rgba(255,255,255,0.03); opacity: 0.5; }
select { cursor: pointer; }
textarea { overflow: auto; resize: vertical; }

/* Accessibility */
.visibility-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.skip-navigation {
  position: absolute;
  top: -100px; left: 20px;
  background: var(--nym-green);
  color: #0D0D0F;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--nym-r2);
  z-index: 9999;
  transition: top 0.15s;
}
.skip-navigation:focus { top: 12px; color: #0D0D0F; }

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.button,
.pagination-next-link, .pagination-prev-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button, .article-subscribe button,
.section-subscribe button, .split-button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--nym-bd2);
  border-radius: var(--nym-r2);
  color: var(--nym-t1);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--nym-head);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.button:hover,
.pagination-next-link:hover, .pagination-prev-link:hover,
.pagination-first-link:hover, .pagination-last-link:hover,
.subscriptions-subscribe button:hover,
.community-follow button:hover, .article-subscribe button:hover,
.section-subscribe button:hover {
  background: rgba(91,240,160,0.08);
  border-color: var(--nym-green-b);
  color: var(--nym-green);
  text-decoration: none;
}

.button-primary,
.button.button-primary,
input[type=submit].button,
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.article-subscribe button[data-selected=true],
.section-subscribe button[data-selected=true] {
  background: var(--nym-green);
  border-color: var(--nym-green);
  color: #0D0D0F !important;
  font-weight: 700;
}
.button-primary:hover, .button.button-primary:hover {
  opacity: 0.88;
  background: var(--nym-green);
  color: #0D0D0F !important;
  text-decoration: none;
}

.button-large { padding: 11px 28px; font-size: 14px; }
.button-secondary {
  background: transparent;
  border-color: var(--nym-bd2);
  color: var(--nym-t2);
}
.button-secondary:hover {
  background: rgba(255,255,255,0.05);
  color: var(--nym-t1);
}

/* ─── HEADER / NAV ──────────────────────────────────────────────── */
.header-message { display: none; }
.header-message p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.header-message .icon { color: var(--nym-green); width: 15px; height: 15px; }

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nym-nav);
  background: rgba(16,16,18,0.95);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  gap: 20px;
  max-width: 100%;
  overflow: visible;
}

/* Logo */
.logo { flex-shrink: 0; }
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nym-t1);
  text-decoration: none;
}
.logo a:hover { text-decoration: none; }
.logo img, .logo-img { height: 28px; width: auto; mix-blend-mode: screen; display: block; }
.logo-label-placeholder { /* see bottom of file for .logo-label styles */ }

/* Desktop nav */
.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}
.user-nav { display: flex; align-items: center; gap: 0; min-width: 0; max-width: 100%; }
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.user-nav-list li { min-width: 0; }
.user-nav-list li a,
.user-nav-list li a:visited {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--nym-t2);
  border-radius: var(--nym-r1);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  max-width: 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-nav-list li a:hover { color: var(--nym-t1); background: rgba(255,255,255,0.05); }
.user-nav-list .fa-solid { font-size: 10px; opacity: 0.5; }

.contact-cta { margin-left: 8px; }
.submit-a-request, .contact-cta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--nym-green);
  color: #0D0D0F !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--nym-r5);
  font-family: var(--nym-head);
  transition: opacity 0.18s;
  text-decoration: none !important;
}
.submit-a-request:hover, .contact-cta a:hover { opacity: 0.88; text-decoration: none !important; }

/* User dropdown */
.user-info { position: relative; margin-left: 8px; }
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r5);
  padding: 6px 12px 6px 8px;
  color: var(--nym-t1);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s;
  max-width: 220px;
  min-width: 0;
}
.dropdown-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-toggle:hover { border-color: var(--nym-bd2); }
.dropdown-chevron-icon { transition: transform 0.2s; }
.dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 180px;
  background: rgba(12,12,14,0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--nym-bd2);
  border-radius: var(--nym-r3);
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none;
  z-index: 300;
}
/* Dropdowns open on click only. Opening on :hover made the menu close again as
   soon as the pointer left the button, so items were unreachable. */
.dropdown.is-open > .dropdown-menu,
.dropdown[aria-expanded=true] > .dropdown-menu { display: block; }
.dropdown.is-open > .dropdown-toggle .dropdown-chevron-icon { transform: rotate(180deg); }
.dropdown-menu a, .dropdown-menu [role=menuitem] {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--nym-t2);
  border-radius: var(--nym-r1);
  transition: background 0.12s, color 0.12s;
}
.dropdown-menu a:hover, .dropdown-menu [role=menuitem]:hover {
  background: rgba(255,255,255,0.06);
  color: var(--nym-t1);
}
.separator { height: 1px; background: var(--nym-bd); margin: 4px 0; }

.user-avatar, .menu-profile-avatar { width: 28px; height: 28px; border-radius: 50%; }

/* Mobile nav */
.nav-wrapper-mobile { display: none; align-items: center; gap: 12px; }
.menu-button-mobile {
  background: transparent;
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r1);
  color: var(--nym-t2);
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.menu-button-mobile:hover { border-color: var(--nym-bd2); color: var(--nym-t1); }
.icon-menu { display: block; }

.menu-list-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: calc(100vh - var(--nym-nav));
  transform: translateX(-50%);
  background: rgba(8,8,10,0.98);
  backdrop-filter: blur(28px);
  z-index: 210;
  overflow-y: auto;
  max-width: 100vw;
}
.menu-list-mobile[aria-expanded=true] { display: block; }
.menu-list-mobile-items { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.menu-list-mobile-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px;
  font-size: 15px; color: var(--nym-t2);
  border-bottom: 1px solid var(--nym-bd);
}
.menu-list-mobile-item:last-child { border-bottom: none; }
.menu-list-mobile-item a { color: var(--nym-t2); min-width: 0; overflow-wrap: anywhere; }
.menu-list-mobile-item a:hover { color: var(--nym-green); }
.square-dot { width: 5px; height: 5px; background: var(--nym-green); border-radius: 1px; opacity: 0.4; }
.item { padding: 10px 8px; border-bottom: 1px solid var(--nym-bd); }
.item a, .item [role=menuitem] { color: var(--nym-t2); font-size: 14px; }
.item:last-child { border-bottom: none; }
.nav-divider { height: 1px; background: var(--nym-bd); margin: 8px 0; }
.user-avatar-item { padding: 14px 8px; }
.menu-profile-name { font-size: 13px; color: var(--nym-t2); }
.my-profile-tooltip { font-size: 11px; color: var(--nym-t3); }

/* Mobile contact CTA — always visible in the header, not buried in the menu */
.contact-cta-mobile { display: none; flex-shrink: 0; padding: 8px 16px; white-space: nowrap; }

@media (max-width: 900px) {
  .header { padding: 0 20px; }
  .nav-wrapper-desktop { display: none; }
  .nav-wrapper-mobile { display: flex; }
  .contact-cta-mobile { display: inline-flex; }
}

@media (max-width: 400px) {
  .nav-wrapper-mobile { gap: 8px; }
  .contact-cta-mobile { padding: 7px 12px; font-size: 12px; }
}

/* ─── FOOTER ────────────────────────────────────────────────────── */
.footer { background: #1E2527; border-top: 1px solid var(--nym-bd); padding: 56px 40px 32px; }
.footer-inner { max-width: 960px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { display: none; }
.footer-tagline { font-size: 12.5px; color: var(--nym-t3); line-height: 1.6; max-width: 200px; margin: 0; }
.footer-socials { display: flex; gap: 8px; margin-top: 4px; }
.footer-socials a { width: 32px; height: 32px; background: rgba(255,255,255,0.05); border: 1px solid var(--nym-bd); border-radius: var(--nym-r1); display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.footer-socials a:hover { background: rgba(91,240,160,0.1); border-color: var(--nym-green-b); }
.footer-socials img { width: 15px; height: 15px; filter: brightness(0.7); }
.footer-socials a:hover img { filter: brightness(1); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title { font-family: var(--nym-head); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nym-t3); margin: 0 0 4px 0; }
.footer-col-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col-links li a { font-size: 13px; color: var(--nym-t2); text-decoration: none; transition: color 0.15s; }
.footer-col-links li a:hover { color: var(--nym-t1); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--nym-bd); }
.footer-copy { font-size: 11.5px; color: var(--nym-t3); }
.footer-language-selector { position: relative; }
.language-selector .dropdown-toggle { font-size: 12px; color: var(--nym-t3); background: transparent; border: 1px solid var(--nym-bd); border-radius: var(--nym-r1); padding: 5px 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.language-selector .dropdown-toggle:hover { border-color: var(--nym-bd2); color: var(--nym-t2); }
.footer-language-selector .language-selector .dropdown-menu { position: absolute !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; top: auto !important; bottom: calc(100% + 6px) !important; max-height: 260px; overflow-y: auto; min-width: 180px; text-align: left; }
@media (max-width:768px){.footer{padding:40px 20px 28px;}.footer-top{grid-template-columns:1fr 1fr;gap:32px;}.footer-brand{grid-column:1/-1;}.footer-bottom{flex-direction:column;gap:16px;text-align:center;}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr;}}

/* ─── CONTAINER / LAYOUT ────────────────────────────────────────── */
.container {
  max-width: var(--nym-mw);
  margin: 0 auto;
  padding: 0 40px 80px;
}
.container-divider {
  height: 1px;
  background: var(--nym-bd);
}

/* Sub-nav (breadcrumbs + search row on sub-pages) */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--nym-bd);
  margin-bottom: 36px;
}

/* ─── BREADCRUMBS ───────────────────────────────────────────────── */
.breadcrumbs { display: flex; align-items: center; }
.breadcrumbs ol {
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap; list-style: none; padding: 0; margin: 0;
}
.breadcrumbs li {
  display: flex; align-items: center;
  font-size: 13px; color: var(--nym-t3);
}
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--nym-t3); opacity: 0.5; }
.breadcrumbs a { color: var(--nym-t2); transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--nym-green); }
.breadcrumbs li:last-child { color: var(--nym-t3); }

/* ─── SEARCH ────────────────────────────────────────────────────── */
.search-container { position: relative; }
.search-container form[role=search],
.sub-nav .search-container form[role=search] {
  display: flex;
  align-items: center;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: 50px;
  padding-left: 32px;
  transition: border-color 0.18s;
  width: 240px;
}
.search-container form[role=search]:focus-within { border-color: var(--nym-green-b); }
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--nym-t3);
  pointer-events: none;
  width: 13px; height: 13px;
}
.search-container input[type=search],
.sub-nav input[type=search] {
  background: transparent;
  border: none;
  padding: 8px 14px 8px 0;
  font-size: 13px;
  color: var(--nym-t1);
  outline: none;
  box-shadow: none;
  width: 100%;
}
.search-container input[type=search]::placeholder { color: var(--nym-t3); }

/* ─── HERO ──────────────────────────────────────────────────────── */
section.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--nym-bg-s);
  border-bottom: 1px solid var(--nym-bd);
}
.hero-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 48px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  min-width: 0;
}
section.hero::before { display: none; }
/* Remove old ::after status bar - now inline */
section.hero::after { display: none; }

.hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--nym-green);
  letter-spacing: 0.04em;
  opacity: 0.85;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.hero-status::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--nym-green);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--nym-green);
}
.hero-welcome {
  font-family: var(--nym-head);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--nym-t1);
  margin: 0;
  max-width: 520px;
  overflow-wrap: anywhere;
}
.hero-subtitle {
  font-size: 15px;
  color: var(--nym-t2);
  margin: 0;
  max-width: 400px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Hero search */
.hero-inner {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hero-inner form[role=search] {
  display: flex;
  align-items: center;
  background: rgba(14,14,16,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding-left: 48px;
  transition: border-color 0.2s, background 0.2s;
  min-width: 0;
  max-width: 100%;
}
.hero-inner form[role=search]:focus-within {
  border-color: var(--nym-green-b);
  background: rgba(18,18,20,0.95);
}
.hero-inner .search-icon {
  left: 18px; width: 16px; height: 16px; color: var(--nym-t3);
}
.hero-inner input[type=search] {
  background: transparent;
  border: none;
  padding: 15px 48px 15px 0;
  font-size: 15px;
  color: var(--nym-t1);
  outline: none;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
.hero-inner input[type=search]::placeholder { color: var(--nym-t3); }
.hero-inner .clear-button {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: none;
  color: var(--nym-t3);
  display: none; padding: 4px; cursor: pointer;
}
.hero-inner form.search-has-value .clear-button { display: flex; }

/* Hero quick chips */
.hero-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.hero-chips-label { display: none; }
.hero-chip {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--nym-t2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nym-bd);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: all 0.18s;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-chip:hover {
  border-color: var(--nym-green);
  color: var(--nym-green);
  background: rgba(91,240,160,0.07);
}

/* Compact channel cards inside hero */
.hero-channels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.hero-channel-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.hero-channel-card:hover {
  background: rgba(91,240,160,0.06);
  border-color: var(--nym-green-b);
  text-decoration: none;
}
.hero-channel-icon {
  width: 34px; height: 34px;
  border-radius: var(--nym-r1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
}
.hero-channel-icon img {
  width: 34px; height: 34px;
  object-fit: contain;
}
.hero-channel-icon svg { width: 14px; height: 14px; stroke: var(--nym-green); }
.hero-channel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nym-t1);
  display: block;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.hero-channel-desc {
  font-size: 11.5px;
  color: var(--nym-t3);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.hero-channel-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--nym-green);
  text-decoration: none;
  margin-top: 6px;
  display: block;
  overflow-wrap: anywhere;
}

/* Remove old elements */
.hero-emoji-row { display: none; }
.hero-network-art { display: none; }
.mobile-request-button { display: none; }

.nym-contact-channels { display: none; }

/* ─── BLOCKS (Categories grid) ─────────────────────────────────── */
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.blocks-item {
  background: var(--nym-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  color: var(--nym-t1);
  display: flex;
  flex: none;
  max-width: 100%;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.blocks-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--nym-r3);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.blocks-item:hover {
  background: var(--nym-card-h);
  border-color: rgba(91,240,160,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(91,240,160,0.06);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * { text-decoration: none; }
.blocks-item:hover .blocks-item-description { color: var(--nym-t2); }
.blocks-item-internal { background: transparent; border-color: var(--nym-bd); }
.blocks-item-internal .icon-lock { height: 14px; width: 14px; position: relative; bottom: 2px; }
.blocks-item-link {
  color: var(--nym-t1);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  border-radius: inherit;
  text-decoration: none;
  gap: 8px;
  min-width: 0;
}
.blocks-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(91,240,160,0.08);
  border: 1px solid rgba(91,240,160,0.18);
  border-radius: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.blocks-item-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  mix-blend-mode: screen;
}


.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus { outline: none; box-shadow: 0 0 0 2px var(--nym-green-b); text-decoration: none; }
/* Category icon placeholder: folder icon removed */
.blocks-item-title {
  font-family: var(--nym-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--nym-t1);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.blocks-item-description {
  font-size: 12.5px;
  color: var(--nym-t2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.blocks-item-description:not(:empty) { margin-top: 0; }

/* ─── HOME SECTIONS ─────────────────────────────────────────────── */
.section { margin-bottom: 64px; }
.section.hero { margin-bottom: 0; }

.section.knowledge-base .nym-section-header {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nym-bd);
}
.section.knowledge-base h2 {
  font-family: var(--nym-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nym-t3);
  margin: 40px 0 20px;
}

/* Promoted articles */
.promoted-articles-header {
  font-family: var(--nym-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--nym-t1);
  text-align: left;
  margin: 0 0 16px;
}
.promoted-articles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.promoted-articles-item { width: 100%; }
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  font-size: 13px;
  color: var(--nym-t2);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  border-bottom: none;
}
.promoted-articles-item a::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--nym-green);
  border-radius: 50%;
  opacity: 0.4;
  flex-shrink: 0;
}
.promoted-articles-item a:hover {
  background: var(--nym-card-h);
  border-color: var(--nym-bd2);
  color: var(--nym-t1);
  text-decoration: none;
}
.promoted-articles-item a:hover::before { opacity: 0.9; }
.promoted-articles-item:last-child a { border-bottom: none; }
.promoted-articles-item .icon-lock { width: 13px; height: 13px; }

/* ─── PAGE STRUCTURE (category/section/article sub-pages) ───────── */
.page-header {
  margin: 0 0 28px;
}
.page-header h1 {
  font-family: var(--nym-head);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nym-t1);
  margin: 0 0 8px;
  flex-grow: 1;
}
.page-header-description {
  font-size: 14px;
  color: var(--nym-t2);
  line-height: 1.65;
  font-style: normal;
  margin: 0 0 24px;
}
.page-header .section-subscribe { flex-shrink: 0; }
.page-header .icon-lock { width: 18px; height: 18px; position: relative; bottom: 2px; }

/* ─── CATEGORY PAGE ─────────────────────────────────────────────── */
.category-container { max-width: 820px; }
.category-content {}

.section-tree { display: flex; flex-direction: column; gap: 32px; }
.section-tree > .section {
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r4);
  padding: 24px 28px;
  margin-bottom: 0;
}
.section-tree-title {
  font-family: var(--nym-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--nym-t1);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nym-bd);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-tree-title::before {
  content: '';
  width: 28px; height: 28px;
  background: var(--nym-green-s);
  border: 1px solid rgba(91,240,160,0.1);
  border-radius: var(--nym-r1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235BF0A0' stroke-width='1.75'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  flex-shrink: 0;
}
.section-tree-title a { color: var(--nym-t1); }
.section-tree-title a:hover { color: var(--nym-green); }

/* ─── ARTICLE LIST (section & category pages) ───────────────────── */
.article-list { display: flex; flex-direction: column; gap: 4px; }
.article-list-item {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-list-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: var(--nym-r2);
  font-size: 13.5px;
  color: var(--nym-t2);
  transition: all 0.15s;
}
.article-list-link::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--nym-green);
  border-radius: 50%;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.article-list-link:hover {
  background: var(--nym-card);
  border-color: var(--nym-bd);
  color: var(--nym-t1);
}
.article-list-link:hover::before { opacity: 0.9; }
.article-list-item.article-promoted .article-list-link { color: var(--nym-t1); }
.icon-star { color: var(--nym-green); opacity: 0.8; }

/* See all articles link */
.see-all-articles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--nym-green);
  opacity: 0.8;
  transition: opacity 0.15s;
}
.see-all-articles:hover { opacity: 1; color: var(--nym-green); }

/* ─── SECTION PAGE ──────────────────────────────────────────────── */
.section-container {}
.section-content {}

/* Subsection list on section page */
.section-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.section-list-item { list-style: none; }
.section-list-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  font-size: 14px;
  font-weight: 500;
  color: var(--nym-t2);
  text-decoration: none;
  transition: all 0.18s;
}
.section-list-item > a:hover {
  background: var(--nym-card-h);
  border-color: var(--nym-bd2);
  color: var(--nym-t1);
}
.section-list-item a svg { color: var(--nym-t3); flex-shrink: 0; }
.section-list-item a:hover svg { color: var(--nym-green); }
.section-empty { font-style: italic; color: var(--nym-t3); font-size: 14px; }

/* ACCORDION SUBCATEGORIES */
.nym-accordion { list-style:none; margin:0 0 28px 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.nym-accordion-item { border:1px solid var(--nym-bd); border-radius:var(--nym-r3); overflow:hidden; transition:border-color 0.18s; }
.nym-accordion-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--nym-card); border:none; cursor:pointer; text-align:left; transition:background 0.18s; gap:12px; }
.nym-accordion-trigger:hover,.nym-accordion-trigger[aria-expanded=true] { background:var(--nym-card-h); }
.nym-accordion-label { font-size:14px; font-weight:500; color:var(--nym-t2); flex:1; transition:color 0.15s; }
.nym-accordion-trigger:hover .nym-accordion-label,.nym-accordion-trigger[aria-expanded=true] .nym-accordion-label { color:var(--nym-t1); }
.nym-accordion-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nym-accordion-count { font-size:12px; color:var(--nym-t3); }
.nym-accordion-chevron { color:var(--nym-t3); flex-shrink:0; transition:transform 0.22s ease,color 0.15s; }
.nym-accordion-trigger[aria-expanded=true] .nym-accordion-chevron { transform:rotate(180deg); color:var(--nym-green); }
.nym-accordion-body { border-top:1px solid var(--nym-bd); background:rgba(12,12,14,0.6); overflow:hidden; }
.nym-accordion-body[hidden] { display:none; }
.nym-accordion-articles { list-style:none; margin:0; padding:8px 0; }
.nym-accordion-articles li a { display:flex; align-items:center; gap:10px; padding:10px 20px 10px 24px; font-size:13.5px; color:var(--nym-t2); text-decoration:none; transition:background 0.15s,color 0.15s; line-height:1.45; }
.nym-accordion-articles li a::before { content:""; display:block; width:5px; height:5px; border-radius:50%; background:var(--nym-bd2); flex-shrink:0; transition:background 0.15s; }
.nym-accordion-articles li a:hover { background:rgba(91,240,160,0.05); color:var(--nym-t1); }
.nym-accordion-articles li a:hover::before { background:var(--nym-green); }
.nym-accordion-loading { display:flex; align-items:center; gap:8px; padding:14px 24px; font-size:12.5px; color:var(--nym-t3); }
.nym-accordion-spinner { width:14px; height:14px; border:2px solid var(--nym-bd2); border-top-color:var(--nym-green); border-radius:50%; animation:nym-spin 0.7s linear infinite; }
.nym-accordion-error { padding:12px 24px; font-size:12.5px; color:var(--nym-t3); }
.nym-accordion-error a { color:var(--nym-t2); }
@keyframes nym-spin { to { transform:rotate(360deg); } }

/* ─── NEW REQUEST PAGE ──────────────────────────────────────────── */
.nym-request-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.nym-request-form-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--nym-bd);
  border-top: 2px solid var(--nym-green);
  border-radius: var(--nym-r4);
  padding: 32px;
}
.nym-request-form-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nym-bd);
}
.nym-request-form-icon {
  width: 44px; height: 44px;
  background: rgba(91,240,160,0.1);
  border-radius: var(--nym-r3);
  display: flex; align-items: center; justify-content: center;
  color: var(--nym-green);
  flex-shrink: 0;
}
.nym-request-form-icon svg { width: 22px; height: 22px; }
.nym-request-form-title {
  font-family: var(--nym-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--nym-t1);
  margin: 0 0 4px;
}
.nym-request-form-sub { font-size: 13.5px; color: var(--nym-t3); margin: 0; }
.follow-up-hint { font-size: 14px; font-weight: 400; color: var(--nym-t3); margin-left: 8px; }

/* Form field styling - apply to Zendesk-generated fields */
.form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.form .form-field, .form .nesty-input-wrapper { margin-bottom: 18px; }
.form label { display: block; font-size: 13px; font-weight: 500; color: var(--nym-t2); margin-bottom: 6px; }
.form input[type=text],
.form input[type=email],
.form input[type=search],
.form select,
.form textarea,
.form .nesty-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--nym-r2);
  color: var(--nym-t1);
  padding: 16px 20px;
  font-size: 15px;
  font-family: var(--nym-sans);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  min-height: 58px;
  box-sizing: border-box;
}
.form select {
  min-height: 58px;
  height: 58px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2393b59a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--nym-green);
  box-shadow: 0 0 0 3px rgba(91,240,160,0.1);
}
.form input::placeholder, .form textarea::placeholder { color: var(--nym-t3); }
.form textarea { min-height: 120px; line-height: 1.6; }
.form select { cursor: pointer; }
.form input[type=submit] {
  width: 100%;
  background: var(--nym-green);
  border: none;
  border-radius: var(--nym-r2);
  color: #0D0D0F;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--nym-head);
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.18s, transform 0.18s;
}
.form input[type=submit]:hover { opacity: 0.88; transform: translateY(-1px); }

/* Trust row below form */
.nym-form-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.nym-form-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--nym-t3);
}
.nym-form-trust-item svg { color: var(--nym-green); width: 13px; height: 13px; }

/* Request page sidebar */
.nym-request-sidebar { display: flex; flex-direction: column; gap: 14px; }
.nym-sidebar-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r4);
  padding: 20px;
}
.nym-sidebar-title {
  font-family: var(--nym-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nym-t3);
  margin: 0 0 16px;
}
.nym-channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nym-bd);
  text-decoration: none;
  color: var(--nym-t2);
  transition: padding-left 0.18s;
}
.nym-channel-item:last-of-type { border-bottom: none; }
.nym-channel-item:hover { padding-left: 4px; color: var(--nym-t1); }
.nym-channel-item-icon {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--nym-r2);
  display: flex; align-items: center; justify-content: center;
  color: var(--nym-t2);
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.nym-channel-item-icon svg { width: 16px; height: 16px; }
.nym-channel-item:hover .nym-channel-item-icon { background: rgba(91,240,160,0.1); color: var(--nym-green); }
.nym-channel-item--accent .nym-channel-item-icon { background: rgba(91,240,160,0.1); color: var(--nym-green); }
.nym-channel-name { display: block; font-size: 13px; font-weight: 600; color: var(--nym-t1); margin-bottom: 2px; }
.nym-channel-desc-sm { display: block; font-size: 12px; color: var(--nym-t3); line-height: 1.45; white-space: normal; }
.nym-channel-ext-icon { color: var(--nym-t3); margin-left: auto; flex-shrink: 0; align-self: center; }


.nym-my-requests-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--nym-green);
  opacity: 0.8;
  transition: opacity 0.15s;
}
.nym-my-requests-link:hover { opacity: 1; color: var(--nym-green); }

/* ─── ARTICLE PAGE ──────────────────────────────────────────────── */
.article-container {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
}

/* Article sidebar */
.article-sidebar {}
.collapsible-sidebar {
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  overflow: hidden;
  margin-bottom: 16px;
}
.collapsible-sidebar-toggle {
  display: none;
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 16px;
  color: var(--nym-t2);
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.collapsible-sidebar-toggle-icon { transition: transform 0.2s; }
.collapsible-sidebar-toggle-icon.x-icon { display: none; }

.collapsible-sidebar-title, .sidenav-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nym-t3);
  padding: 16px 16px 10px;
}
.collapsible-sidebar-body { padding: 4px 8px 16px; }
.collapsible-sidebar-body ul { display: flex; flex-direction: column; gap: 2px; }
.collapsible-sidebar-body li { list-style: none; }
.sidenav-item {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--nym-t2);
  border-radius: var(--nym-r1);
  transition: background 0.12s, color 0.12s;
  line-height: 1.45;
}
.sidenav-item:hover { background: rgba(255,255,255,0.05); color: var(--nym-t1); }
.sidenav-item.current-article {
  background: rgba(91,240,160,0.08);
  color: var(--nym-green);
  font-weight: 500;
}
.article-sidebar-item {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--nym-green);
  opacity: 0.7;
}
.article-sidebar-item:hover { opacity: 1; }

/* Article main */
.article {
  min-width: 0;
}
.article-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--nym-bd); }
.article-title {
  font-family: var(--nym-head);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nym-t1);
  margin-bottom: 16px;
  line-height: 1.2;
}
.article-author { display: flex; align-items: center; gap: 12px; }
.avatar.article-avatar {
  position: relative;
  flex-shrink: 0;
}
.article-avatar img { width: 36px; height: 36px; border-radius: 50%; }
.icon-agent {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  background: var(--nym-green);
  border-radius: 50%;
  color: #0D0D0F;
  padding: 1px;
}
.article-meta { flex: 1; }
.article-meta a { font-size: 13px; font-weight: 500; color: var(--nym-t1); }
.article-meta a:hover { color: var(--nym-green); }
.meta-group { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.meta-data { font-size: 12px; color: var(--nym-t3); }

/* Article body content */
.article-body {
  line-height: 1.75;
  color: var(--nym-t2);
  font-size: 15px;
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  color: var(--nym-t1);
  margin: 28px 0 12px;
}
.article-body h2 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--nym-bd); }
.article-body h3 { font-size: 17px; }
.article-body p { margin-bottom: 16px; }
.article-body a { color: var(--nym-green); }
.article-body a:hover { text-decoration: underline; }
.article-body img { border-radius: var(--nym-r2); margin: 16px 0; max-width: 100%; }
.article-body code {
  background: rgba(91,240,160,0.08);
  border: 1px solid rgba(91,240,160,0.15);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--nym-green);
}
.article-body pre {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--nym-bd2);
  border-radius: var(--nym-r2);
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}
.article-body pre code { background: transparent; border: none; padding: 0; }
.article-body ul, .article-body ol { padding-left: 20px; margin-bottom: 16px; }
.article-body li { margin-bottom: 6px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body blockquote {
  border-left: 3px solid var(--nym-green-b);
  padding: 12px 16px;
  margin: 16px 0;
  background: rgba(91,240,160,0.04);
  border-radius: 0 var(--nym-r2) var(--nym-r2) 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.article-body table th {
  background: rgba(255,255,255,0.05);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--nym-t1);
  border-bottom: 1px solid var(--nym-bd2);
}
.article-body table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--nym-bd);
  color: var(--nym-t2);
}
.article-body table tr:hover td { background: rgba(255,255,255,0.02); }
.article-body hr { border: none; border-top: 1px solid var(--nym-bd); margin: 24px 0; }

/* Article subscribe */
.article-subscribe { margin-top: 10px; }

/* Content tags */
.content-tags { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--nym-bd); }
.content-tags p { font-size: 12px; color: var(--nym-t3); margin-bottom: 8px; }
.content-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.content-tag-item a {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nym-bd);
  border-radius: 20px;
  font-size: 12px;
  color: var(--nym-t3);
  transition: all 0.15s;
}
.content-tag-item a:hover { border-color: var(--nym-green-b); color: var(--nym-green); background: var(--nym-green-s); }

/* Attachments */
.article-attachments { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--nym-bd); }
.attachments { display: flex; flex-direction: column; gap: 8px; }
.attachment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  font-size: 13px;
  color: var(--nym-t2);
}
.attachment-icon { color: var(--nym-t3); flex-shrink: 0; width: 16px; height: 16px; }
.attachment-item a { color: var(--nym-t2); flex: 1; }
.attachment-item a:hover { color: var(--nym-green); }
.attachment-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.attachment-meta-item { font-size: 12px; color: var(--nym-t3); }
.attachment-meta-item a { color: var(--nym-green); opacity: 0.7; }
.attachment-meta-item a:hover { opacity: 1; }

/* Article footer */
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-top: 24px;
  border-top: 1px solid var(--nym-bd);
}
.article-share { font-size: 13px; color: var(--nym-t3); }
.article-comment-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--nym-t3);
}
.article-comment-count:hover { color: var(--nym-t2); }
.article-comment-count-icon { color: var(--nym-t3); }

/* Article votes */
.article-votes {
  margin: 40px 0 28px;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(91,240,160,0.04) 0%, rgba(26,26,28,0.7) 100%);
  border: 1px solid rgba(91,240,160,0.15);
  border-radius: var(--nym-r4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-votes::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,240,160,0.5), transparent);
}
.article-votes-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--nym-t1);
  margin-bottom: 18px;
  font-family: var(--nym-head);
}
.article-votes-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.article-vote {
  min-width: 100px;
  padding: 10px 20px;
  font-size: 14px;
}
.article-vote-up { border-color: rgba(91,240,160,0.3); }
.article-vote-up:hover, .article-vote-up.button-primary { background: var(--nym-green); color: #0D0D0F !important; border-color: var(--nym-green); }
.article-vote-down { border-color: rgba(255,100,100,0.2); }
.article-vote-down:hover, .article-vote-down.button-primary { background: rgba(255,100,100,0.15); color: #ff6b6b !important; border-color: rgba(255,100,100,0.4); }
.article-votes-count { font-size: 12px; color: var(--nym-t3); }
.article-vote-label { font-size: 12px; color: var(--nym-t3); }

/* More questions / request callout */
.article-more-questions { margin: 24px 0; }
.nym-article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(91,240,160,0.09) 0%, rgba(91,240,160,0.03) 100%);
  border: 1px solid rgba(91,240,160,0.22);
  border-left: 4px solid var(--nym-green);
  border-radius: var(--nym-r3);
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.nym-article-cta:hover {
  background: linear-gradient(135deg, rgba(91,240,160,0.14) 0%, rgba(91,240,160,0.06) 100%);
  border-color: rgba(91,240,160,0.38);
  transform: translateY(-1px);
}
.nym-article-cta-text { display: flex; flex-direction: column; gap: 3px; }
.nym-article-cta-text strong { font-size: 14px; font-weight: 600; color: var(--nym-t1); font-family: var(--nym-head); }
.nym-article-cta-text span { font-size: 13px; color: var(--nym-t2); }
.nym-article-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--nym-green);
  color: #141A1C;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--nym-r2);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.nym-article-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }

/* Return to top */
.article-return-to-top { margin-top: 20px; }
.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--nym-t3);
  transition: color 0.15s;
}
.article-return-to-top a:hover { color: var(--nym-t2); }
.article-return-to-top-icon { transform: rotate(180deg); }

/* Related / recent articles */
.article-relatives {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--nym-bd);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.article-relatives > *:only-child { grid-column: 1 / -1; max-width: 560px; }

/* Section headings from Zendesk recent/related helpers */
.article-relatives h2,
.article-relatives-title,
.recently-viewed-articles h2,
.related-articles h2 {
  font-family: var(--nym-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nym-t3);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-relatives h2::before,
.recently-viewed-articles h2::before,
.related-articles h2::before {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background: var(--nym-green);
  border-radius: 1px;
}

/* Article lists */
.article-relatives ul,
.recently-viewed-articles ul,
.related-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-relatives ul li a,
.recently-viewed-articles ul li a,
.related-articles ul li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--nym-r2);
  font-size: 13.5px;
  color: var(--nym-t2);
  text-decoration: none;
  line-height: 1.6;
  transition: background 0.15s, color 0.15s;
  border: 1px solid transparent;
}
.article-relatives ul li a::before,
.recently-viewed-articles ul li a::before,
.related-articles ul li a::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: var(--nym-bd2);
  margin-top: 6px;
  transition: background 0.15s;
}
.article-relatives ul li a:hover,
.recently-viewed-articles ul li a:hover,
.related-articles ul li a:hover {
  background: rgba(91,240,160,0.05);
  border-color: rgba(91,240,160,0.08);
  color: var(--nym-t1);
}
.article-relatives ul li a:hover::before,
.recently-viewed-articles ul li a:hover::before,
.related-articles ul li a:hover::before { background: var(--nym-green); }

/* Current article bold state */
.article-relatives ul li a strong,
.recently-viewed-articles ul li a strong,
.related-articles ul li a strong {
  font-weight: 500;
  color: var(--nym-t1);
}

@media (max-width: 768px) {
  .article-relatives { grid-template-columns: 1fr; gap: 24px; }
}


/* ─── COMMENTS ──────────────────────────────────────────────────── */
.article-comments { margin-top: 48px; }
.comments { border-top: 1px solid var(--nym-bd); padding-top: 32px; }
.comment-overview { margin-bottom: 24px; }
.comment-heading { font-family: var(--nym-head); font-size: 18px; font-weight: 700; color: var(--nym-t1); margin-bottom: 6px; }
.comment-callout { font-size: 13px; color: var(--nym-t3); margin: 0; }
.comment-sorter { display: inline-flex; }
.comment-sorter .dropdown-toggle { font-size: 13px; color: var(--nym-t2); background: var(--nym-card); border-color: var(--nym-bd); padding: 6px 12px; }

.comment-list { display: flex; flex-direction: column; gap: 0; }
.comment {
  border-bottom: 1px solid var(--nym-bd);
  padding: 20px 0;
  transition: background 0.15s;
}
.comment:last-child { border-bottom: none; }
.comment-wrapper { display: flex; gap: 14px; }
.comment-info { flex: 1; min-width: 0; }
.comment-author { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.avatar.comment-avatar { position: relative; flex-shrink: 0; }
.avatar.comment-avatar img { width: 32px; height: 32px; border-radius: 50%; }
.comment-meta { flex: 1; min-width: 0; }
.comment-meta > span { display: block; font-size: 13px; font-weight: 500; color: var(--nym-t1); margin-bottom: 2px; }
.comment-meta a { color: var(--nym-t1); }
.comment-meta a:hover { color: var(--nym-green); }
.meta-group.meta-group-opposite { margin-top: 2px; }
.community-badge-titles { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0; }
.community-badge-title {
  font-size: 11px; padding: 1px 7px;
  background: rgba(91,240,160,0.1);
  border: 1px solid rgba(91,240,160,0.2);
  border-radius: 10px;
  color: var(--nym-green);
  font-weight: 500;
}
.community-badge-achievements { display: flex; gap: 4px; margin-top: 4px; }
.community-badge-achievement img { width: 20px; height: 20px; border-radius: 50%; }
.community-badge-achievements-rest { font-size: 11px; color: var(--nym-t3); }

.comment-labels { display: flex; gap: 6px; margin-top: 4px; }
.escalation-badge {
  font-size: 11px; padding: 2px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--nym-bd);
  border-radius: 10px;
  color: var(--nym-t3);
}
.comment-pending { background: rgba(255,170,0,0.1); border-color: rgba(255,170,0,0.25); color: #f5a623; }

.comment-body { font-size: 14px; color: var(--nym-t2); line-height: 1.7; }
.comment-body a { color: var(--nym-green); }
.comment-body p { margin-bottom: 10px; }
.comment-body p:last-child { margin-bottom: 0; }

/* Comment actions */
.comment-actions-container { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.comment-vote.vote { display: flex; align-items: center; gap: 6px; }
.vote-up, .vote-down {
  background: transparent;
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r1);
  color: var(--nym-t3);
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.vote-up svg { transform: rotate(180deg); }
.vote-up:hover { border-color: var(--nym-green-b); color: var(--nym-green); }
.vote-down:hover { border-color: rgba(255,100,100,0.3); color: #ff6b6b; }
.vote-up.vote-voted { background: rgba(91,240,160,0.1); border-color: var(--nym-green-b); color: var(--nym-green); }
.vote-down.vote-voted { background: rgba(255,100,100,0.1); border-color: rgba(255,100,100,0.3); color: #ff6b6b; }
.vote-sum { font-size: 12px; color: var(--nym-t3); min-width: 20px; text-align: center; }
.comment-actions.actions { }
.actions button { background: transparent; border: 1px solid var(--nym-bd); border-radius: var(--nym-r1); color: var(--nym-t3); padding: 4px; transition: all 0.15s; }
.actions button:hover { border-color: var(--nym-bd2); color: var(--nym-t2); }

/* Comment form */
.comment-form {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  align-items: flex-start;
}
.avatar.comment-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.avatar.comment-avatar img { width: 100%; height: 100%; border-radius: 50%; }
.comment-container { flex: 1; }
.comment-show-container {
  width: 100%;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  color: var(--nym-t3);
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.comment-show-container:hover { border-color: var(--nym-bd2); color: var(--nym-t2); }
.comment-show-container.hidden { display: none; }
.comment-fields { display: none; }
.comment-fields.shown { display: block; }
.comment-form-controls { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.comment-form-controls input[type=submit] { min-width: 100px; }

/* ─── VOTE ──────────────────────────────────────────────────────── */
.vote { display: flex; align-items: center; gap: 6px; }

/* ─── SEARCH RESULTS ────────────────────────────────────────────── */
.search-results {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 12px;
}
.search-results-subheading {
  font-family: var(--nym-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--nym-t1);
  margin-bottom: 20px;
}
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.search-results-list li article {
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  padding: 18px 20px;
  transition: background 0.15s, border-color 0.15s;
}
.search-results-list li article:hover { background: var(--nym-card-h); border-color: var(--nym-bd2); }
.search-result-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.search-result-title a { color: var(--nym-t1); }
.search-result-title a:hover { color: var(--nym-green); }
.search-result-description { font-size: 13px; color: var(--nym-t2); line-height: 1.55; }
.search-result-meta-container { margin-bottom: 6px; }
.search-result-breadcrumbs {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--nym-t3);
  list-style: none;
}
.search-result-breadcrumbs li + li::before { content: "/"; margin: 0 4px; opacity: 0.5; }
.search-result-breadcrumbs a { color: var(--nym-t3); }
.search-result-breadcrumbs a:hover { color: var(--nym-green); }

/* Search sidebar filters */
.search-results-sidebar {}
.multibrand-filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-name, .filter-tag-name {
  font-size: 13px;
  color: var(--nym-t2);
}
.filter-list { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.filter-list a {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--nym-t2);
  border-radius: var(--nym-r1);
  transition: all 0.15s;
}
.filter-list a:hover, .filter-list a[aria-current=page] { background: rgba(91,240,160,0.07); color: var(--nym-green); }

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
}
.no-results .headline { font-family: var(--nym-head); font-size: 18px; font-weight: 600; color: var(--nym-t2); }
.no-results .action-prompt { font-size: 14px; color: var(--nym-t3); }
.no-results .action-prompt a { color: var(--nym-green); }

/* ─── STATUS LABELS ─────────────────────────────────────────────── */
.status-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.status-label-new, .status-label-open { background: rgba(91,240,160,0.12); color: var(--nym-green); border: 1px solid rgba(91,240,160,0.3); }
.status-label-pending { background: rgba(255,170,0,0.1); color: #f5a623; border: 1px solid rgba(255,170,0,0.25); }
.status-label-hold { background: rgba(255,100,100,0.1); color: #ff6b6b; border: 1px solid rgba(255,100,100,0.25); }
.status-label-solved, .status-label-closed { background: rgba(255,255,255,0.06); color: var(--nym-t3); border: 1px solid var(--nym-bd); }
.status-label-pending-moderation { background: rgba(255,170,0,0.08); color: #f5a623; border: 1px solid rgba(255,170,0,0.2); }
.status-label-featured { background: rgba(91,240,160,0.08); color: var(--nym-green); border: 1px solid rgba(91,240,160,0.2); }
.status-label-official { background: rgba(100,149,237,0.1); color: #8ab4f8; border: 1px solid rgba(100,149,237,0.2); }
.status-label-pinned { background: rgba(255,255,255,0.06); color: var(--nym-t2); border: 1px solid var(--nym-bd); }

/* ─── PAGINATION ────────────────────────────────────────────────── */
.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: nowrap;
}
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link {
  padding: 8px 18px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Push prev left, next right with page count in center */
.pagination-prev-link, .pagination-first-link { margin-right: auto; }
.pagination-next-link, .pagination-last-link { margin-left: auto; }
.pagination-current-page { display: none; }
.pagination-first-link, .pagination-last-link { display: none !important; }

/* ─── REQUESTS TABLE ────────────────────────────────────────────── */
.striped-list { display: flex; flex-direction: column; gap: 2px; }
.striped-list-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  font-size: 13px;
  transition: background 0.15s;
}
.striped-list-item:hover { background: var(--nym-card-h); }
.striped-list-info { display: flex; flex-direction: column; gap: 3px; }
.striped-list-title { font-size: 13.5px; font-weight: 500; color: var(--nym-t1); }
.striped-list-title a { color: var(--nym-t1); }
.striped-list-title a:hover { color: var(--nym-green); }
.striped-list-count { font-size: 12px; color: var(--nym-t3); }
.striped-list-number { font-size: 12px; color: var(--nym-t3); font-family: monospace; }
.striped-list-status { font-size: 12px; }
.striped-list-count-item { font-size: 12px; color: var(--nym-t3); }

/* Requests table forms */
.requests-table-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.requests-table-toolbar input[type=search] { background: var(--nym-card); border-color: var(--nym-bd); color: var(--nym-t1); padding: 8px 12px; border-radius: var(--nym-r2); font-size: 13px; }

/* ─── REQUEST PAGE ──────────────────────────────────────────────── */
.request-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.request-main {}
.request-breadcrumbs { margin-bottom: 16px; }
.request-title {
  font-family: var(--nym-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--nym-t1);
  margin-bottom: 20px;
}
.comment-list { display: flex; flex-direction: column; }
.request-follow-up { margin: 16px 0; font-size: 13px; color: var(--nym-t3); }

/* Request sidebar */
.request-sidebar { }
.collapsible-sidebar-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nym-t3); padding: 14px 14px 8px; display: block; }
.collapsible-sidebar-body .request-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.collapsible-sidebar-body .request-details dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nym-t3); }
.collapsible-sidebar-body .request-details dd { font-size: 13px; color: var(--nym-t2); margin: 0; }
.collapsible-sidebar-body .request-attachments { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nym-bd); }
.request-collaborators { display: flex; flex-direction: column; gap: 4px; }
.request-collaborators li { font-size: 13px; color: var(--nym-t2); }

.satisfaction { margin-bottom: 20px; }
.mark-as-solved { min-width: 140px; }
.request-submit-comment { display: none; }
.request-submit-comment.shown { display: block; }

/* ─── COMMUNITY PAGES ───────────────────────────────────────────── */
.community-hero { padding: 48px 40px 32px; text-align: center; border-bottom: 1px solid var(--nym-bd); }
.community-header { font-family: var(--nym-head); font-size: 28px; font-weight: 700; color: var(--nym-t1); margin-bottom: 8px; }
.topics-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.topics-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  text-decoration: none;
  transition: all 0.15s;
}
.topics-item:hover { background: var(--nym-card-h); border-color: var(--nym-bd2); }
.topic-header { font-size: 15px; font-weight: 500; color: var(--nym-t1); }
.topic-filters { display: flex; gap: 6px; }
.posts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.post {
  background: var(--nym-card);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r3);
  padding: 20px;
  transition: background 0.15s;
}
.post:hover { background: var(--nym-card-h); }
.post-title { font-size: 15px; font-weight: 500; color: var(--nym-t1); margin-bottom: 8px; }
.post-title a { color: var(--nym-t1); }
.post-title a:hover { color: var(--nym-green); }
.post-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--nym-t3); }

/* ─── SUBSCRIPTIONS / CONTRIBUTIONS PAGES ──────────────────────── */
.subscriptions-table, .my-activities-table { display: flex; flex-direction: column; gap: 6px; }
.subscriptions-subscribe button[data-selected=true] { background: rgba(91,240,160,0.1); color: var(--nym-green); border-color: var(--nym-green-b); }
.my-activities-nav {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--nym-bd);
  padding-bottom: 0;
}
.my-activities-nav a {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--nym-t3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.my-activities-nav a:hover { color: var(--nym-t2); }
.my-activities-nav a.active, .my-activities-nav a[aria-current] { color: var(--nym-green); border-bottom-color: var(--nym-green); }

/* ─── USER PROFILE ──────────────────────────────────────────────── */
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.profile-avatar img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--nym-bd); }
.profile-info h1 { font-size: 24px; margin-bottom: 4px; }
.profile-stats { display: flex; gap: 20px; margin-top: 8px; }
.stat { display: flex; flex-direction: column; }
.stat-value { font-size: 18px; font-weight: 700; color: var(--nym-t1); font-family: var(--nym-head); }
.stat-label { font-size: 12px; color: var(--nym-t3); }

/* ─── FORMS (generic) ───────────────────────────────────────────── */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 500; color: var(--nym-t2); margin-bottom: 6px; }
.form-field input[type=text],
.form-field input[type=email],
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
  color: var(--nym-t1);
  padding: 10px 12px;
  font-size: 14px;
}
.form-field .nesty-input { background: rgba(255,255,255,0.04); border-color: var(--nym-bd); }

/* ─── WYSIWYG / UPLOAD ──────────────────────────────────────────── */
.article-body .ql-editor, .fr-view { color: var(--nym-t2); }
.upload-dropzone {
  border: 2px dashed var(--nym-bd);
  border-radius: var(--nym-r2);
  padding: 20px;
  text-align: center;
  color: var(--nym-t3);
  font-size: 13px;
  transition: border-color 0.18s;
}
.upload-dropzone:hover { border-color: var(--nym-green-b); }

/* ─── TABLES ────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
table th { background: rgba(255,255,255,0.04); padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: var(--nym-t1); border-bottom: 1px solid var(--nym-bd2); }
table td { padding: 10px 12px; border-bottom: 1px solid var(--nym-bd); font-size: 13px; color: var(--nym-t2); }
table tr:hover td { background: rgba(255,255,255,0.02); }

/* ─── NOTIFICATIONS ─────────────────────────────────────────────── */
.notification, .notification-inline {
  padding: 12px 16px;
  border-radius: var(--nym-r2);
  font-size: 13px;
  background: rgba(91,240,160,0.07);
  border: 1px solid rgba(91,240,160,0.2);
  color: var(--nym-green);
  margin-bottom: 16px;
}
.notification-inline { margin: 0; }

/* ─── ERROR PAGE ────────────────────────────────────────────────── */
.error-page { text-align: center; padding: 80px 40px; }
.error-page h1 { font-size: 48px; font-family: var(--nym-head); color: var(--nym-t1); }
.error-page p { color: var(--nym-t2); font-size: 16px; margin: 12px 0 24px; }

/* ─── OPTIONAL: PAGE-LEVEL CTA BLOCK ───────────────────────────── */
.nym-page-cta {
  margin-top: 48px;
  padding: 24px;
  background: rgba(91,240,160,0.04);
  border: 1px solid rgba(91,240,160,0.14);
  border-radius: var(--nym-r4);
  display: flex;
  align-items: center;
  gap: 20px;
}
.nym-page-cta-icon {
  width: 44px; height: 44px;
  background: rgba(91,240,160,0.1);
  border-radius: var(--nym-r3);
  display: flex; align-items: center; justify-content: center;
  color: var(--nym-green);
  flex-shrink: 0;
}
.nym-page-cta-icon svg { width: 22px; height: 22px; }
.nym-page-cta-body { flex: 1; }
.nym-page-cta-title { font-family: var(--nym-head); font-size: 15px; font-weight: 600; color: var(--nym-t1); margin-bottom: 3px; }
.nym-page-cta-desc { font-size: 13px; color: var(--nym-t3); }
.nym-page-cta-btn {
  padding: 10px 20px;
  background: var(--nym-green);
  color: #0D0D0F !important;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--nym-head);
  border-radius: var(--nym-r2);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.18s;
}
.nym-page-cta-btn:hover { opacity: 0.88; text-decoration: none; }

/* ─── ICON-LOCK ─────────────────────────────────────────────────── */
.icon-lock { vertical-align: baseline; position: relative; bottom: 1px; opacity: 0.5; }

/* ─── SPLIT BUTTON ──────────────────────────────────────────────── */
.split-button { display: flex; gap: 2px; }
.split-button button { border-radius: var(--nym-r1); }
.split-button button:first-child { border-radius: var(--nym-r2) var(--nym-r1) var(--nym-r1) var(--nym-r2); }
.split-button button:last-child { border-radius: var(--nym-r1) var(--nym-r2) var(--nym-r2) var(--nym-r1); }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blocks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nym-contact-channels { grid-template-columns: repeat(2, 1fr); }
  .article-container { grid-template-columns: 200px 1fr; gap: 32px; }
  .nym-request-layout { grid-template-columns: 1fr; }
  .request-container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .header { padding: 0 20px; }
  .container { padding: 0 20px 60px; }
  section.hero { }
  .hero-wrap { grid-template-columns: minmax(0, 1fr); padding: 40px 20px 40px; gap: 28px; }
  section.hero::after { display: none; }
  .hero-welcome { font-size: 32px; }
  .hero-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocks-list { grid-template-columns: minmax(0, 1fr); }
  .nym-contact-channels { grid-template-columns: 1fr; }
  .article-container { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }
  .collapsible-sidebar-toggle { display: flex; }
  .promoted-articles { grid-template-columns: 1fr; }
  .search-results { grid-template-columns: 1fr; }
  .striped-list-item { grid-template-columns: 1fr auto; }
  .footer { padding: 28px 20px; }
  
  .mobile-request-button { display: block; margin-top: 16px; }
  .mobile-request-button a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--nym-green); color: #0D0D0F; font-weight: 700; border-radius: 50px; font-size: 14px; }
}

/* ─── WIDE MODE ENHANCEMENTS ────────────────────────────────────── */

/* ─── FORM IMPROVEMENTS ─────────────────────────────────────────── */
/* Ensure nesty-input (Zendesk custom select) also gets proper height */
.form .nesty-input { min-height: 58px; }
.nesty-input { cursor: pointer; }
/* The dropdown container for Zendesk custom selects */
.form .select-wrapper {
  position: relative;
}
/* Form labels - more readable */
.form .form-field label,
.form label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nym-t2);
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.02em;
}
/* Form submit button */
.form input[type=submit],
.form button[type=submit] {
  margin-top: 8px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--nym-head);
  background: var(--nym-green);
  color: #181F21;
  border: none;
  border-radius: var(--nym-r2);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(91,240,160,0.25);
}
.form input[type=submit]:hover,
.form button[type=submit]:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(91,240,160,0.35);
}

/* ─── REQUEST PAGE WIDER CARD ────────────────────────────────────── */
.nym-request-layout { gap: 36px; }
.nym-request-form-card {
  padding: 40px;
}

/* ─── CATEGORY CARDS HOVER GLOW ─────────────────────────────────── */
.nym-cat-card:hover {
  box-shadow: 0 8px 40px rgba(91,240,160,0.08), 0 2px 12px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}

/* ─── ARTICLE VOTE BUTTONS ───────────────────────────────────────── */
.article-vote {
  min-width: 100px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.article-vote-up::before { content: '👍  '; }
.article-vote-down::before { content: '👎  '; }

/* ─── FOOTER LANGUAGE SELECTOR CENTER ───────────────────────────── */
.footer-bottom .language-selector .dropdown-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
}

/* ─── CHANNEL CARDS ON HOME ──────────────────────────────────────── */
.nym-channel-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.nym-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.4);
}

/* ─── HEADER LOGO ─────────────────────────────────────────────── */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* Remove divider pseudo-element */
.logo a::after { display: none; content: none; }
.logo-divider { display: none; }
/* "Help Center" badge next to logo */
.logo-label {
  font-family: var(--nym-head);
  font-size: 12px;
  font-weight: 600;
  color: var(--nym-t2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--nym-bd);
  border-radius: 5px;
  vertical-align: middle;
  line-height: 1;
}

@media (max-width: 480px) {
  .hero-channels { grid-template-columns: minmax(0, 1fr); }
  .hero-welcome { font-size: 26px; }
  .hero-chips-row { gap: 6px; }
}

/* ── Article TOC Panel ── */
.article-toc-panel {
  position: sticky;
  top: calc(var(--nym-nav) + 24px);
  max-height: calc(100vh - var(--nym-nav) - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.article-toc-panel::-webkit-scrollbar { display: none; }

.article-toc-inner {
  padding: 0;
}
.article-toc-progress-wrap {
  width: 100%;
  height: 3px;
  background: var(--nym-bd);
  border-radius: 2px;
  margin-bottom: 16px;
  overflow: hidden;
}
.article-toc-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--nym-green);
  border-radius: 2px;
  transition: width 0.1s linear;
}
.article-toc-heading {
  font-family: var(--nym-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nym-t3);
  margin: 0 0 10px 0;
}
.article-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.article-toc-nav a {
  display: block;
  font-size: 12.5px;
  color: var(--nym-t3);
  text-decoration: none;
  padding: 4px 0 4px 10px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  transition: color 0.15s, border-color 0.15s;
}
.article-toc-nav a:hover {
  color: var(--nym-t1);
  border-left-color: var(--nym-bd2);
}
.article-toc-nav a.toc-active {
  color: var(--nym-green);
  border-left-color: var(--nym-green);
  font-weight: 500;
}
.article-toc-nav a.toc-h3 {
  padding-left: 20px;
  font-size: 12px;
}

/* Hide TOC if article has no headings */
.article-toc-panel:empty { display: none; }

/* ── Responsive: hide TOC on medium screens ── */
@media (max-width: 1100px) {
  .article-container {
    grid-template-columns: 200px 1fr;
  }
  .article-toc-panel {
    display: none;
  }
}
@media (max-width: 768px) {
  .article-container {
    grid-template-columns: 1fr;
  }
}

/* ── Sub-section accordion (dropdowns) ── */
.section-list-item.ss-accordion { position: relative; }
.section-list-item.ss-accordion > a {
  cursor: pointer;
  user-select: none;
}
.section-list-item.ss-accordion > a svg { transition: transform 0.22s ease; }
.section-list-item.ss-accordion.ss-open > a svg { transform: rotate(90deg); }
.ss-articles-panel {
  display: none;
  margin-top: 2px;
  background: rgba(36,43,45,0.7);
  border: 1px solid var(--nym-bd);
  border-top: none;
  border-radius: 0 0 var(--nym-r3) var(--nym-r3);
  overflow: hidden;
}
.section-list-item.ss-open > a {
  border-radius: var(--nym-r3) var(--nym-r3) 0 0;
  border-bottom-color: var(--nym-bd);
  background: var(--nym-card-h);
  color: var(--nym-t1);
}
.section-list-item.ss-open .ss-articles-panel { display: block; }
.ss-articles-panel ul {
  list-style: none;
  margin: 0; padding: 6px 0 10px;
}
.ss-articles-panel ul li a {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 20px 9px 24px;
  font-size: 13.5px;
  color: var(--nym-t2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.45;
}
.ss-articles-panel ul li a::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  min-width: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--nym-t3);
  flex-shrink: 0;
}
.ss-articles-panel ul li a:hover {
  background: var(--nym-card);
  color: var(--nym-t1);
}
.ss-articles-panel ul li a:hover::before { background: var(--nym-green); }
.ss-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--nym-t3);
}
.ss-loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--nym-bd2);
  border-top-color: var(--nym-green);
  border-radius: 50%;
  animation: ss-spin 0.7s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-empty {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--nym-t3);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   NYM HELP CENTER v6 — PATCH SET (March 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Logo: remove vertical divider after logo link, style "Help Center" label ── */
.logo a::after {
  display: none !important;
}
.logo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--nym-t2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-left: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--nym-bd);
  border-radius: 5px;
  line-height: 1;
}

/* ── 2. "Have more questions? Submit a request" — simplified article footer ── */
.article-more-questions {
  margin: 28px 0 8px;
  padding: 0;
  background: none;
  border: none;
  text-align: center;
}
.article-more-questions-text {
  font-size: 14px;
  color: var(--nym-t2);
  margin: 0;
}
.article-more-questions-link {
  color: var(--nym-t1);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.article-more-questions-link:hover {
  color: var(--nym-green);
  text-decoration: underline;
}

/* Kill old CTA card styles if any residual */
.nym-article-cta { display: none !important; }

/* ── 3. Hero background ── */
/* Ensure hero text is always readable over any background */
.hero-left { position: relative; z-index: 1; }
.hero-right { position: relative; z-index: 1; }

/* ── 4. Telegram Scam Warning Modal ── */
.nym-tg-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.nym-tg-modal[hidden] { display: none; }

.nym-tg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 13, 0.82);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.nym-tg-modal-box {
  position: relative;
  z-index: 1;
  background: #1C2325;
  border: 1px solid rgba(91,240,160,0.25);
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  animation: nym-modal-in 0.22s ease;
}

@keyframes nym-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* NymVPN logo icon in modal */
.nym-tg-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 14px;
  overflow: hidden;
}
.nym-tg-modal-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

.nym-tg-modal-title {
  font-family: var(--nym-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--nym-t1);
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.nym-tg-modal-body {
  color: var(--nym-t2);
  font-size: 13.5px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.nym-tg-modal-body p { margin: 0; }
.nym-tg-modal-body strong { color: var(--nym-t1); }

.nym-tg-modal-tip {
  background: rgba(91,240,160,0.06);
  border: 1px solid rgba(91,240,160,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--nym-t2);
}

.nym-tg-modal-link {
  color: var(--nym-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nym-tg-modal-link:hover { opacity: 0.85; }

.nym-tg-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.nym-tg-modal-back {
  background: transparent;
  border: 1px solid var(--nym-bd);
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nym-t2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nym-tg-modal-back:hover {
  background: rgba(255,255,255,0.05);
  color: var(--nym-t1);
  border-color: var(--nym-bd2);
}

.nym-tg-modal-proceed {
  background: var(--nym-green);
  color: #0B0F0E;
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nym-tg-modal-proceed:hover { opacity: 0.88; text-decoration: none; color: #0B0F0E; }

@media (max-width: 480px) {
  .nym-tg-modal-box { padding: 28px 20px 22px; }
  .nym-tg-modal-actions { flex-direction: column-reverse; }
  .nym-tg-modal-back, .nym-tg-modal-proceed { width: 100%; justify-content: center; text-align: center; }
}

/* ── Hero channel card: inner div as flex column so link sits flush at bottom ── */
.hero-channel-card > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.hero-channel-card > div:last-child .hero-channel-link {
  margin-top: auto;
  padding-top: 8px;
}

/* ── Logo: single combined image (NYM + Help Center baked in) ── */
.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo a::after { display: none !important; }
.logo-img {
  height: 44px !important;
  width: auto !important;
  display: block;
  object-fit: contain;
}
/* Remove old stacking elements if present */
.logo-stack { display: contents; }
.logo-label { display: none; }

/* ── Remove hero bottom border (eliminates the white line artefact) ── */
section.hero {
  border-bottom: none !important;
}
/* Ensure no gap between hero and content below */
section.hero + * { margin-top: 0; }

/* ── Overflow resilience for long translations / missing dynamic content ── */
/* NOTE: .container, .footer-inner and .hero-wrap are deliberately NOT in this
   list. A flat max-width:100% here overrode their page-width caps further up
   the file, which is what made the whole site run edge to edge on wide
   screens. They get min(cap, 100%) in the PAGE WIDTH block at the end. */
.header,
.hero-left,
.hero-right,
.hero-inner,
.hero-chips-row,
.hero-channels,
.blocks-list {
  max-width: 100%;
  min-width: 0;
}

.nav-wrapper-desktop,
.user-nav,
.user-nav-list,
.hero-right,
.hero-channel-card,
.blocks-item,
.blocks-item-link {
  min-width: 0;
  overflow: hidden;
}

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

.hero-channels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-chips-row {
  flex-wrap: wrap;
}

.hero-chip,
.hero-status,
.hero-welcome,
.hero-subtitle,
.hero-channel-title,
.hero-channel-desc,
.hero-channel-link,
.blocks-item-title,
.blocks-item-description,
.menu-list-mobile-item a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-chip {
  white-space: normal;
}

@media (min-width: 901px) {
  .user-nav-list li a,
  .user-nav-list li a:visited,
  .dropdown-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-nav-list li a,
  .user-nav-list li a:visited {
    max-width: min(260px, 18vw);
  }
}

@media (max-width: 768px) {
  .hero-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .hero-channels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   NYM HELP CENTER — LANGUAGE SELECTOR + PAGE WIDTH (August 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Page width: stop the layout running edge to edge ──────────
   Every band keeps its own background full-bleed, but the content
   inside it is capped and centred on one shared page width. */
.container {
  max-width: min(var(--nym-mw), 100%);
  min-width: 0;
}
.footer-inner {
  max-width: min(var(--nym-mw), 100%);
  min-width: 0;
}
.hero-wrap {
  max-width: min(1100px, 100%);
  min-width: 0;
}
/* The sticky bar itself stays full width; its contents line up with the
   page content instead of being pinned to the viewport edges. */
.header {
  padding-left: max(40px, calc((100% - var(--nym-mw)) / 2));
  padding-right: max(40px, calc((100% - var(--nym-mw)) / 2));
}
@media (max-width: 900px) {
  .header { padding-left: 20px; padding-right: 20px; }
}

/* ── 2. Header language selector (desktop) ─────────────────────── */
.header-language {
  position: relative;
  margin-left: 6px;
  flex-shrink: 0;
}
.header-language > .dropdown-toggle {
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r5);
  color: var(--nym-t2);
  font-family: var(--nym-sans);
  font-size: 12.5px;
  line-height: 1;
  max-width: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.header-language > .dropdown-toggle:hover,
.header-language.is-open > .dropdown-toggle {
  border-color: var(--nym-bd2);
  color: var(--nym-t1);
  background: rgba(255, 255, 255, 0.05);
}
.header-language > .dropdown-toggle:focus-visible {
  outline: 2px solid var(--nym-green-b);
  outline-offset: 2px;
}
.header-language-globe {
  flex-shrink: 0;
  opacity: 0.85;
}
.header-language .lang-code {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Fallback width for the full locale name if JS has not shortened it yet */
  max-width: 108px;
}
.header-language .dropdown-chevron-icon {
  flex-shrink: 0;
  opacity: 0.6;
}
.header-language-menu {
  left: auto;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  max-height: min(360px, calc(100vh - var(--nym-nav) - 40px));
  overflow-y: auto;
  text-align: left;
  overscroll-behavior: contain;
}
.header-language-menu .lang-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--nym-t1);
  border-radius: var(--nym-r1);
  cursor: default;
}
.header-language-menu .lang-check {
  flex-shrink: 0;
  color: var(--nym-green);
}
.header-language-menu a { white-space: nowrap; }
/* Solid, not translucent: this menu overlays article text, unlike the footer
   one which only ever sat over the footer panel. */
.header-language-menu { background: #0F0F12; }

/* ── 3. One selector at a time ─────────────────────────────────── */
/* Desktop uses the header globe, so the footer copy is redundant and it is
   the one that collided with the chat launcher. The .has-header-language
   class is set by script.js only once the header control really rendered,
   so a failure there can never leave the page with no way to switch. */
@media (min-width: 901px) {
  .has-header-language .footer-language-selector { display: none; }
  .has-header-language .footer-bottom { justify-content: center; }
}
@media (max-width: 900px) {
  .header-language { display: none; }
}
/* Tablet range keeps the footer selector, so move it clear of the chat
   launcher in the bottom-right corner. */
@media (min-width: 769px) and (max-width: 900px) {
  .footer-language-selector { margin-right: 88px; }
}
/* Below that the footer bottom row is already centred and stacked; give the
   launcher room so it does not sit on top of the copyright line. */
@media (max-width: 768px) {
  .footer { padding-bottom: 96px; }
}

/* ── 4. Let header dropdowns escape the nav bar ─────────────────
   .nav-wrapper-desktop and .user-nav carry overflow:hidden so long
   translated nav labels stay tidy, but that also clipped anything opening
   below the bar (this language menu, and the signed-in user menu). Only the
   link list itself needs to clip. */
.nav-wrapper-desktop,
.user-nav {
  overflow: visible;
}

/* RTL locales: anchor the header menu to the inline end of the control. */
[dir="rtl"] .header-language-menu { right: auto; left: 0; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU CLEANUP (August 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Solid panel ──────────────────────────────────────────────
   The panel was rgba(8,8,10,0.98). Two per cent of near-white hero text
   over a near-black panel is still legible as ghosting, which is what made
   the menu look like it had stray lines running through it. Fully opaque,
   and the backdrop blur goes with it since nothing shows through now. */
.menu-list-mobile {
  background: #0A0A0C;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--nym-bd);
  overscroll-behavior: contain;
  /* dvh keeps the panel inside the visible area when mobile browser chrome
     shows and hides; the vh line stays as the fallback. */
  height: calc(100vh - var(--nym-nav));
  height: calc(100dvh - var(--nym-nav));
}
.menu-list-mobile-items {
  padding: 12px 16px 40px;
  gap: 2px;
}

/* ── 2. One row style, signed in or out ──────────────────────────
   Every row used to draw its own 1px bottom border, so a five item menu
   showed five lines plus two dividers. Rows are now separated by space and
   a tap highlight instead. Site links and account links also had different
   type sizes; they match now. */
.menu-list-mobile-item,
.menu-list-mobile .item {
  padding: 0;
  border-bottom: none;
  border-radius: var(--nym-r2);
  font-size: 15px;
  transition: background 0.15s;
}
.menu-list-mobile-item:hover,
.menu-list-mobile .item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.menu-list-mobile-item > a,
.menu-list-mobile .item > a,
.menu-list-mobile .item > [role=menuitem] {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 13px 12px;
  font-size: 15px;
  color: var(--nym-t2);
  text-decoration: none;
  border-radius: var(--nym-r2);
}
/* Full width tap target: the link fills the row rather than just its text. */
.menu-list-mobile-item { display: flex; align-items: center; }
.menu-list-mobile-item > a { padding-left: 0; }
.menu-list-mobile-item .square-dot {
  margin-left: 12px;
  opacity: 0.55;
}

/* ── 3. Account block reads as one card, not three bordered rows ── */
.menu-list-mobile .user-avatar-item {
  padding: 0;
  margin-bottom: 8px;
  background: none;
}
.menu-list-mobile .user-avatar-item > .my-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--nym-bd);
  border-radius: var(--nym-r2);
}
.menu-list-mobile .menu-profile-avatar { width: 34px; height: 34px; flex-shrink: 0; }
.menu-list-mobile .menu-profile-name > div:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--nym-t1);
}
.menu-list-mobile .my-profile-tooltip { font-size: 12px; color: var(--nym-t3); }

/* ── 4. Dividers only where the menu actually changes section ───── */
.menu-list-mobile .nav-divider {
  height: 1px;
  background: var(--nym-bd);
  margin: 10px 12px;
}
/* Signed out, the markup still emits a trailing divider with nothing after
   it, which was the last stray line in the logged out menu. */
.menu-list-mobile .nav-divider:last-child { display: none; }