html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/* ============================================================
   PRECISE PARKLINK - HELP CENTRE
   "Night Deck" dark-glass theme
   ------------------------------------------------------------
   Motif language: painted stall lines, wayfinding signage,
   gate-arm hatching, frosted glass over a night parking deck.
   ============================================================ */
/***** Design tokens *****/
:root {
  /* Brand - seeded from theme settings so they stay editable in Guide */
  --brand: rgba(25, 132, 104, 1);
  --brand-ink: #FFFFFF;
  /* Link colours pinned to the brand greens so the palette holds
     regardless of the Guide colour settings. To hand control back to
     Guide, restore: rgba(56, 178, 144, 1) / rgba(125, 194, 174, 1) / rgba(39, 113, 150, 1) */
  --link: #38b290;
  --link-hover: #6ED0B4;
  --link-visited: #38b290;
  /* Brand navy - header / chrome */
  --navy: #0c3b5d;
  /* Accent ramp: amber -> violet -> teal -> brand green */
  --accent-amber: #FCB141;
  --accent-violet: #9B3391;
  --accent-teal: #47A29D;
  /* Deep brand green - FILLS ONLY (buttons, borders, glows, tints) */
  --accent-green: #198468;
  /* Green TEXT token. On the light page this is the DEEP green (4.6:1 on
     white); the dark zones below swap it to #38b290. Every green link,
     icon and label reads from it, so the whole set flips with the zone. */
  --accent-green-lt: #198468;
  --accent-green-lt2: #11A37C;
  /* Shared hairline rule - drawn under the header AND above the footer.
     Brand green at the centre, fading to black at both edges. Change it
     here and both rules follow. */
  --brand-rule: linear-gradient(90deg, #000000 0%, #38b290 50%, #000000 100%);
  /* The night deck - ramp built around the base background #002f42 */
  --deck-000: #00212f;
  --deck-100: #002f42;
  --deck-200: #003a51;
  --deck-300: #004a66;
  --deck-400: #0a5a78;
  --deck-500: #146a8a;
  /* Opaque-ish panel tint (menus, modals, listboxes) */
  --panel: 255,255,255;
  /* ---- LIGHT PAGE PALETTE -------------------------------------------
     The page is light; the top nav, hero and footer are dark zones that
     re-declare this whole set below. --ink is emphasis text (headings,
     titles, hover states); --fg is body copy. */
  --page: #f2f5f8;
  --ink: #002f42;
  --fg: #11384b;
  --fg-soft: #2b4d5e;
  --fg-mute: #5a7382;
  --fg-faint: #9aadb8;
  --fg-quiet: rgba(0,47,66,.52);
  /* Surfaces */
  --glass: #ffffff;
  --glass-hi: #eef2f6;
  --glass-lo: #f7f9fb;
  --edge: rgba(0, 47, 66, 0.13);
  --edge-hi: rgba(0, 47, 66, 0.24);
  --blur: 20px;
  --blur-lg: 34px;
  /* Elevation */
  --lift-1: 0 1px 2px rgba(0,33,47,.06), 0 6px 18px rgba(0,33,47,.07);
  --lift-2: 0 2px 4px rgba(0,33,47,.07), 0 14px 34px rgba(0,33,47,.11);
  --lift-3: 0 4px 10px rgba(0,33,47,.10), 0 24px 56px rgba(0,33,47,.16);
  --glow: 0 0 0 1px rgba(25,132,104,.34), 0 12px 40px rgba(25,132,104,.16);
  /* Geometry */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;
  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: .16s;
  --med: .28s;
  --slow: .5s;
  /* Rhythm */
  --gut: 24px;
  --shell: 1240px;
}
/* ============================================================
   DARK ZONES
   The top nav, hero and footer stay dark on a light page. They
   re-declare the whole token set, so every rule written against
   those tokens keeps working inside them with no extra selectors.
   ============================================================ */
.topbar, .hero, .footer {
  --ink: #ffffff;
  --fg: #ffffff;
  --fg-soft: #ffffff;
  --fg-mute: #ffffff;
  --fg-faint: #5E6E85;
  --fg-quiet: rgba(255,255,255,.55);
  --glass: rgba(255,255,255,.055);
  --glass-hi: rgba(255,255,255,.09);
  --glass-lo: rgba(255,255,255,.03);
  --edge: rgba(255,255,255,.12);
  --edge-hi: rgba(255,255,255,.24);
  --accent-green-lt: #38b290;
  --accent-green-lt2: #6ED0B4;
  --lift-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px rgba(0,0,0,.34);
  --lift-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 46px rgba(0,0,0,.46);
  --lift-3: 0 1px 0 rgba(255,255,255,.10) inset, 0 28px 70px rgba(0,0,0,.55);
}
/* Overlays can be opened from INSIDE a dark zone (the header's profile and
   language menus) but are light panels, so they re-declare light tokens -
   otherwise they would inherit white-on-white text from the zone. */
.dropdown-menu,
[data-garden-id="dropdowns.combobox.listbox"],
[data-garden-id="modals.modal"],
[data-garden-id="notifications.notification"],
[data-garden-id="notifications.alert"],
.search-container ul[role=listbox] {
  --ink: #002f42;
  --fg: #11384b;
  --fg-soft: #2b4d5e;
  --fg-mute: #5a7382;
  --fg-quiet: rgba(0,47,66,.52);
  --glass: #ffffff;
  --glass-hi: #eef2f6;
  --glass-lo: #f7f9fb;
  --edge: rgba(0,47,66,.13);
  --edge-hi: rgba(0,47,66,.24);
  --accent-green-lt: #198468;
}
/***** Base *****/
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--page);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
/* Layer 1 - the deck: two coloured pools of light bleeding up from below */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -6%, rgba(25,132,104,.06) 0%, transparent 55%),
    radial-gradient(110% 75% at 88% 4%, rgba(12,59,93,.05) 0%, transparent 50%),
    linear-gradient(178deg, #ffffff 0%, var(--page) 38%, #e9eef3 100%);
}
/* Layer 2 - the raked "painted stall lines" overlay has been REMOVED
   site-wide. The hero's own background image is untouched (.hero::before). */
@media (min-width: 1024px) {
  body > main { min-height: 60vh; }
}
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  margin-top: 0;
  letter-spacing: -.015em;
  line-height: 1.22;
}
h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 650; }
h4 { font-size: 17px; font-weight: 650; }
p { margin: 0 0 1.1em; }
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
a:visited { color: var(--link); }
a:hover, a:active { color: var(--link-hover); text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--edge); margin: 32px 0; }
::selection { background: rgba(25,132,104,.55); color: #fff; }
/* Focus - one visible ring everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--accent-green-lt);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Custom scrollbar */
* { scrollbar-color: rgba(255,255,255,.20) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: var(--pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }
/***** Layout shell *****/
.container {
  max-width: var(--shell);
  margin: 0 auto;
  /* Top padding gives the first section room under the hero on the home
     page, and under the header on every other page. Raise the first value
     to push content further down. */
  padding: clamp(44px, 6vw, 76px) clamp(18px, 4vw, 40px) 0;
  position: relative;
}
.container-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge) 18%, var(--edge) 82%, transparent);
  margin: 0 0 34px;
}
.error-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 60px clamp(18px, 4vw, 40px) 80px;
  text-align: center;
}
.error-page h1 { font-size: clamp(36px, 6vw, 60px); }
.error-page h2 { color: var(--fg-soft); font-weight: 500; font-size: 20px; }
.error-page > a {
  display: inline-block;
  margin-top: 20px;
  padding: 13px 26px;
  border-radius: var(--pill);
  background: var(--accent-green);
  color: #fff;
  font-weight: 700;
}
.visibility-hidden,
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/***** Glass primitives *****/
.glass, .blocks-item, .category-item, .section-item,
.video-wrapper, .article-list li, .search-results-list > li {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  box-shadow: var(--lift-1);
}
/* Signage label - wayfinding all-caps eyebrow.
   Gradient tick removed; label is white. */
.sign-label, .section-title-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
/***** Skip link *****/
.skip-navigation {
  align-items: center;
  background: var(--accent-green);
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  left: -9999px;
  margin: 16px;
  padding: 14px 22px;
  border-radius: var(--pill);
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation { left: initial; right: -9999px; }
.skip-navigation:focus, .skip-navigation:active {
  left: auto; overflow: auto; text-align: center; top: auto; z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active { left: initial; right: auto; }
#zd-modal-container ~ .skip-navigation { display: none; }
/* ============================================================
   HEADER - sticky brand-navy rail
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  border-bottom: 0;
}
/* Hairline under the rail - matches the footer top rule:
   brand green at the centre, fading to black at both edges */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-rule);
  opacity: 1;
}
.header {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  position: relative;
  align-items: center;
  display: flex;
  height: 76px;
  justify-content: space-between;
  gap: 20px;
}
.logo { display: flex; align-items: center; min-width: 0; }
.logo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  min-width: 0;
}
.logo a:hover, .logo a:focus, .logo a:active { text-decoration: none; }
/* brightness(0) invert(1) forces the artwork to flat white whatever its
   own fills say. Keep it: Illustrator-exported SVGs often carry their
   fills in an internal <style> block, and if that gets stripped or
   ignored the shapes fall back to BLACK - invisible on the navy rail.
   The filter makes the logo colour-source-agnostic.
   Definite height + min-width floor guard against a viewBox-only SVG
   resolving to zero size inside this flex row. */
.logo img {
  display: block;
  flex: 0 0 auto;
  height: 40px;
  width: auto;
  min-width: 110px;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: .96;
  transition: opacity var(--fast) var(--ease);
}
.logo a:hover img { opacity: 1; }
/* Brand-name text beside the logo is removed - the SVG lockup already
   carries the wordmark. Belt-and-braces in case the theme setting or a
   cached template still renders it. */
.logo span { display: none !important; }
/***** Desktop nav *****/
.nav-wrapper-desktop { display: none; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .nav-wrapper-desktop { display: inline-flex; } }
.user-nav { display: inline-block; white-space: nowrap; }
.user-nav-list { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-wrapper-desktop a {
  border: 0;
  color: var(--fg-soft);
  display: inline-block;
  font-size: 14px;
  font-weight: 550;
  padding: 9px 15px;
  border-radius: var(--pill);
  width: auto;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  background: var(--glass-hi);
  color: var(--ink);
  text-decoration: none;
}
/* Submit a request reads as the primary action */
.nav-wrapper-desktop a.submit-a-request {
  background: var(--accent-green);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(25,132,104,.34);
}
.nav-wrapper-desktop a.submit-a-request:hover,
.nav-wrapper-desktop a.submit-a-request:focus {
  background: #1FA07E;
  color: #fff;
  box-shadow: 0 10px 28px rgba(25,132,104,.44);
  transform: translateY(-1px);
}
/***** User info / avatar *****/
.user-info { display: inline-block; }
.user-info > button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  color: var(--fg-soft);
  cursor: pointer;
  min-width: 0;
  padding: 6px 14px 6px 6px;
  white-space: nowrap;
  font-size: 14px;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.user-info > button:hover, .user-info > button:focus {
  background: var(--glass-hi);
  border-color: var(--edge-hi);
  color: var(--ink);
}
.user-info > button > span { display: inline-flex; align-items: center; gap: 6px; }
/***** Language selector - sits in the header rail, right of the profile *****/
.header-language-selector { display: inline-block; flex: 0 0 auto; }
.header-language-selector > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Darker than the glass fill - reads as a recessed pill on the navy rail */
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  color: var(--fg-soft);
  cursor: pointer;
  /* 42px matches the profile button, whose height comes from its 28px
     avatar + padding. Fixed height rather than padding, so the three pills
     stay level regardless of font metrics. */
  height: 42px;
  padding: 0 16px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.header-language-selector > .dropdown-toggle:hover,
.header-language-selector > .dropdown-toggle:focus {
  background: rgba(0, 0, 0, .12);
  border-color: var(--edge-hi);
  color: var(--ink);
}
/* Level the submit pill with the other two (it was 41.1px off line-height) */
.nav-wrapper-desktop a.submit-a-request {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
}
.header-language-selector .dropdown-menu { min-width: 170px; }
/* Current-locale caption above the alternatives in the mobile menu */
.menu-list-mobile-label {
  padding: 10px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-quiet);
}
.user-info .dropdown-toggle::after { display: none; }
#user #user-name { display: none; font-size: 14px; }
@media (min-width: 768px) { #user #user-name { display: inline-block; } }
.user-avatar {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
  border: 1px solid var(--edge-hi);
}
.avatar { display: inline-block; position: relative; }
.avatar img { height: 42px; width: 42px; border-radius: 50%; object-fit: cover; }
.avatar .icon-agent {
  color: #fff;
  border: 2px solid var(--deck-200);
  border-radius: 50%;
  bottom: -3px;
  background-color: var(--accent-green);
  font-size: 17px;
  height: 18px;
  line-height: 18px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 18px;
}
/***** Mobile nav *****/
.nav-wrapper-mobile { display: inline-flex; align-items: center; }
@media (min-width: 1024px) { .nav-wrapper-mobile { display: none; } }
.nav-wrapper-mobile .menu-button-mobile {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  color: var(--fg);
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  vertical-align: middle;
  width: 22px;
  height: 22px;
  color: var(--fg);
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] {
  background: var(--glass-hi);
  border-color: var(--edge-hi);
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background: #0c3b5d;
  box-shadow: var(--lift-3);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  right: 0; left: 0;
  top: 76px;
  z-index: 60;
  padding: 10px 0;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] { display: none; }
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] { display: block; }
.nav-wrapper-mobile .menu-list-mobile-items { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.nav-wrapper-mobile .menu-list-mobile-items .item { margin: 2px 0; }
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) { display: none; }
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 1px solid var(--edge);
  padding: 0;
  margin: 8px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child { display: none; }
.nav-wrapper-mobile .menu-list-mobile-items button,
.nav-wrapper-mobile .menu-list-mobile-items a {
  background: none;
  border: none;
  border-radius: var(--r-sm);
  display: block;
  padding: 11px 14px;
  width: 100%;
  color: var(--fg-soft);
  cursor: pointer;
  text-align: start;
  font-size: 15px;
}
.nav-wrapper-mobile .menu-list-mobile-items button:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items a:focus {
  background: var(--glass-hi);
  color: var(--ink);
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items a.submit-a-request { color: var(--accent-green-lt); font-weight: 650; }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile { display: flex; line-height: 1.5; align-items: center; }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip { font-size: 12px; color: var(--fg-mute); }
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 26px; width: 26px; border-radius: 50%;
  display: inline-block; margin-right: 10px; object-fit: cover;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { margin-right: 0; margin-left: 10px; }
/***** Dropdown menus *****/
.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 216px;
  padding: 8px;
  background: rgba(var(--panel), 0.95);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--lift-3);
  z-index: 70;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu { display: block; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-menu-top { top: auto; bottom: calc(100% + 10px); }
.dropdown-menu a,
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  display: block;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  font-size: 14px;
  white-space: nowrap;
}
.dropdown-menu a:hover, .dropdown-menu a:focus,
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover, .dropdown-menu [role=menuitemradio]:focus {
  background: var(--glass-hi);
  color: var(--ink);
  text-decoration: none;
}
.dropdown-menu .separator {
  height: 1px;
  background: var(--edge);
  margin: 6px 4px;
}
.dropdown-chevron-icon { transition: transform var(--fast) var(--ease); }
[aria-expanded=true] .dropdown-chevron-icon { transform: rotate(180deg); }
/* ============================================================
   HERO - the deck at night
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  /* Opaque dark base - the page behind it is light now */
  background-color: var(--deck-100);
  padding: clamp(64px, 11vw, 128px) 0 clamp(56px, 9vw, 104px);
  text-align: center;
  width: 100%;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/hc/theming_assets/01M1HF2DSF24DVQRY6BTNYVHDG);
  background-position: center 38%;
  background-size: cover;
  opacity: .46;
  transform: scale(1.06);
}
/* Vignette + colour grade so the search field always sits on calm ground */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(64% 56% at 50% 44%, rgba(0,33,47,.14) 0%, rgba(0,33,47,.62) 62%, var(--deck-100) 100%),
    linear-gradient(180deg, rgba(0,47,66,.66) 0%, transparent 38%, rgba(0,47,66,.92) 100%);
}
.hero-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  position: relative;
}
.hero-title {
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 750;
  letter-spacing: -.028em;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}
/* Brand gradient: green -> blue, left to right */
.hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, #38b290 0%, #2386ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Fallback for engines without background-clip: text */
  color: #38b290;
}
.hero-sub {
  color: var(--fg-soft);
  font-size: clamp(15px, 1.7vw, 18px);
  max-width: 540px;
  margin: 0 auto 32px;
  text-wrap: balance;
}
/* ============================================================
   SEARCH
   ============================================================ */
.search-container { position: relative; }
.search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--edge-hi);
  border-radius: var(--pill);
  background: #ffffff;
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  box-shadow: var(--lift-2);
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease), background var(--med) var(--ease);
}
.search:hover { border-color: var(--edge-hi); }
.search:focus-within {
  border-color: var(--accent-green-lt);
  background: #ffffff;
  box-shadow: var(--lift-2), 0 0 0 4px rgba(25,132,104,.24);
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--pill);
  box-sizing: border-box;
  color: var(--fg);
  flex: 1 1 auto;
  height: 52px;
  width: 100%;
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.search input[type=search]::placeholder { color: var(--fg-quiet); }
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
.search input[type=search]:-webkit-autofill,
.search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}
/* Hero search runs taller */
.search-full input[type=search] { height: 62px; font-size: 17px; }
/* Hero search stays dark glass on the dark banner */
.hero .search { background: rgba(255,255,255,.10); }
.hero .search:hover { border-color: rgba(255,255,255,.34); }
.hero .search:focus-within { background: rgba(255,255,255,.14); }
.hero .search input[type=search]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0b3146 inset; }
.search .clear-button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--fg-mute);
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  width: 32px; height: 32px;
  margin-right: 12px;
  padding: 0;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
[dir=rtl] .search .clear-button { margin-right: 0; margin-left: 12px; }
.search .clear-button:hover { background: var(--glass-hi); color: var(--ink); }
.search .clear-button:focus { outline: 0; box-shadow: 0 0 0 2px var(--accent-green-lt); }
.search-has-value .clear-button { display: flex; }
[dir=ltr] .search input[type=search] { padding-left: 54px; padding-right: 18px; }
[dir=rtl] .search input[type=search] { padding-left: 18px; padding-right: 54px; }
[dir=ltr] .search-full input[type=search] { padding-left: 60px; }
[dir=rtl] .search-full input[type=search] { padding-right: 60px; }
.search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 22px;
  z-index: 2;
  width: 19px;
  height: 19px;
  color: var(--fg-mute);
  pointer-events: none;
  transition: color var(--fast) var(--ease);
}
[dir=rtl] .search-icon { left: auto; right: 22px; }
.search-container:focus-within .search-icon,
.hero-inner:focus-within .search-icon { color: var(--accent-green-lt); }
.hero-inner .search-icon { left: 26px; width: 21px; height: 21px; }
[dir=rtl] .hero-inner .search-icon { left: auto; right: 26px; }
/* Instant-search suggestion dropdown */
.search-results-dropdown,
[data-garden-id="typeahead.menu"],
.search-container ul[role=listbox] {
  background: rgba(var(--panel),.96) !important;
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  border: 1px solid var(--edge) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--lift-3) !important;
  color: var(--fg) !important;
  margin-top: 8px !important;
  overflow: hidden;
}
.search-container ul[role=listbox] li,
[data-garden-id="typeahead.item"] {
  color: var(--fg-soft) !important;
  background: transparent !important;
}
.search-container ul[role=listbox] li:hover,
[data-garden-id="typeahead.item"]:hover,
[data-garden-id="typeahead.item"][aria-selected=true] {
  background: var(--glass-hi) !important;
  color: var(--ink) !important;
}
/* Hero quick links under the search field */
.hero-quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}
.hero-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--glass);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  color: var(--fg-soft);
  font-size: 13.5px;
  font-weight: 550;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hero-quicklink:hover, .hero-quicklink:focus {
  background: var(--glass-hi);
  border-color: var(--edge-hi);
  color: var(--ink);
  transform: translateY(-1px);
  text-decoration: none;
}
/* ============================================================
   SUB NAV - breadcrumbs + scoped search
   ============================================================ */
.sub-nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px 30px;
  justify-content: space-between;
  margin-bottom: 40px;
}
@media (min-width: 768px) { .sub-nav { flex-direction: row; } }
.sub-nav .breadcrumbs { margin: 0; }
.sub-nav .search-container { max-width: 340px; width: 100%; }
@media (min-width: 768px) { .sub-nav .search-container { flex: 0 1 340px; } }
.sub-nav .search input[type=search] { height: 46px; font-size: 15px; }
.breadcrumbs {
  margin: 0 0 15px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
@media (min-width: 768px) { .breadcrumbs { margin: 0; } }
.breadcrumbs li {
  color: var(--fg-mute);
  font-size: 13px;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li a { color: var(--fg-mute); }
.breadcrumbs li a:hover { color: var(--accent-green-lt); }
.breadcrumbs li:last-child { color: var(--fg-soft); }
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 10px;
  border-top: 1.5px solid var(--fg-faint);
  border-right: 1.5px solid var(--fg-faint);
  transform: rotate(45deg);
  vertical-align: middle;
}
[dir=rtl] .breadcrumbs li + li::before { transform: rotate(-135deg); }
/* ============================================================
   PAGE HEADERS
   ============================================================ */
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 34px;
}
@media (min-width: 768px) {
  .page-header { align-items: baseline; flex-direction: row; gap: 18px; }
}
.page-header h1 { flex-grow: 1; margin-bottom: 10px; }
.page-header .section-subscribe { flex-shrink: 0; margin-bottom: 10px; }
@media (min-width: 768px) { .page-header .section-subscribe { margin-bottom: 0; } }
.page-header-description {
  color: var(--fg-soft);
  font-style: normal;
  margin: 0;
  word-break: break-word;
  max-width: 70ch;
}
.page-header-description { flex: 1 0 100%; }
.page-header .icon-lock {
  height: 20px; width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
  color: var(--fg-mute);
}
/* Section headings carry the brand green */
.section-title {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
  color: var(--accent-green-lt);
}
.section-lede {
  color: var(--fg-soft);
  margin: 0 0 30px;
  max-width: 62ch;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.section-head > div { min-width: 0; }
.section-head .section-lede { margin-bottom: 0; }
.section { margin-bottom: clamp(48px, 7vw, 88px); }
/* ============================================================
   CARD GRID - categories & sections
   Light icon cards: hairline edges, sheen sweep, lift on hover.
   ============================================================ */
.categories,
.sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}
@media (min-width: 640px) {
  .categories, .sections { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
}
.category-item, .section-item {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--r-lg);
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease), box-shadow var(--med) var(--ease), background var(--med) var(--ease);
}
/* Sheen that sweeps on hover */
.category-item::before, .section-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.10) 46%, transparent 62%);
  opacity: 0;
  transform: translateX(-70%);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  pointer-events: none;
}
/* The corner "stall tick" has been removed from the cards. */
.category-item:hover, .section-item:hover,
.category-item:focus-within, .section-item:focus-within {
  transform: translateY(-4px);
  background: var(--glass-hi);
  border-color: rgba(56,178,144,.48);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(25,132,104,.20), 0 18px 44px rgba(25,132,104,.14);
}
.category-item:hover::before, .section-item:hover::before,
.category-item:focus-within::before, .section-item:focus-within::before {
  opacity: 1;
  transform: translateX(70%);
}
/* Compact row: icon chip left, title (and blurb) right, arrow far right.
   A 3-column grid does this without touching the markup - the icon spans
   both text rows, so nothing has to be re-nested in the .hbs. */
.category-link, .section-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  column-gap: 16px;
  flex: 1;
  padding: 16px 20px;
  border-radius: inherit;
  color: var(--fg);
  min-width: 0;
}
/* Icon, title and arrow all sit on ROW 1, so align-items: center centres
   the title against the 46px chip. (The icon used to span two rows, which
   pushed the title into the shorter top track and left it sitting high.) */
.category-link > .section-icon-wrap,
.section-link > .section-icon-wrap { grid-column: 1; grid-row: 1; }
[dir=rtl] .category-link > .section-icon-wrap,
[dir=rtl] .section-link > .section-icon-wrap { grid-column: 3; }
.category-link > .category-title,
.category-link > .section-title-card,
.section-link > .section-title,
.section-link > .category-title { grid-column: 2; grid-row: 1; align-self: center; }
.category-link:hover, .category-link:focus, .category-link:active,
.section-link:hover, .section-link:focus, .section-link:active {
  color: var(--fg);
  text-decoration: none;
}
.category-link:focus-visible, .section-link:focus-visible { outline-offset: -3px; }
/* Icon chip */
.section-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, #f4f7fa, #e7edf2);
  border: 1px solid var(--edge);
  flex: 0 0 auto;
  overflow: hidden;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.section-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 118%, rgba(25,132,104,.55), transparent 70%);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.category-item:hover .section-icon-wrap,
.section-item:hover .section-icon-wrap,
.category-item:focus-within .section-icon-wrap,
.section-item:focus-within .section-icon-wrap {
  border-color: rgba(56,178,144,.44);
  box-shadow: 0 8px 22px rgba(25,132,104,.20);
}
.category-item:hover .section-icon-wrap::before,
.section-item:hover .section-icon-wrap::before { opacity: 1; }
/* Source icons are black-on-transparent artwork; invert to sit on glass */
.category-icon, .section-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.category-item:hover .category-icon,
.category-item:hover .section-icon,
.section-item:hover .section-icon { opacity: 1; transform: scale(1.06); }
/* Only show the fallback glyph when no bitmap icon matched.
   Any <img> rendered before it means a real icon was found. */
.section-icon-fallback { color: var(--accent-green-lt); filter: none; opacity: .92; width: 22px; height: 22px; }
.section-icon-wrap > img ~ .section-icon-fallback { display: none; }
.category-title, .section-title-card {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-item .section-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
}
/* Secondary blurb is hidden on the cards - they carry icon + title only.
   The text still lives in the markup and is unchanged in Guide, so the
   full description remains on each category/section page itself. */
.category-description, .section-description { display: none; }
/* Arrow affordance pinned to the card foot */
.category-link::after, .section-link::after {
  content: "";
  display: block;
  width: 9px; height: 9px;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  transform: rotate(45deg);
  border-top: 2px solid var(--fg-faint);
  border-right: 2px solid var(--fg-faint);
  border-radius: 2px;
  opacity: .55;
  transition: opacity var(--med) var(--ease), border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
[dir=rtl] .category-link::after, [dir=rtl] .section-link::after { grid-column: 1; grid-row: 1; margin: 0; transform: rotate(-135deg); }
.category-item:hover .category-link::after,
.section-item:hover .section-link::after {
  opacity: 1;
  border-color: var(--accent-green-lt);
  transform: translateX(4px) rotate(45deg);
}
[dir=rtl] .category-item:hover .category-link::after,
[dir=rtl] .section-item:hover .section-link::after { transform: translateX(-4px) rotate(-135deg); }
/* ------------------------------------------------------------
   LIGHT-GREY ICON CARDS
   Only the two card types that carry an icon chip: .category-item
   and .section-item. Video cards, article rows and community
   blocks stay dark glass.

   Every rule above is driven by tokens, so the whole card flips
   by REDEFINING those tokens on the card itself - descendants
   inherit, and the lift/sheen/tick/arrow all keep working. Motion,
   timing, transforms and hover behaviour are untouched.
   ------------------------------------------------------------ */
.category-item, .section-item {
  /* surfaces - white cards on the light page */
  --glass: #ffffff;
  --glass-hi: #ffffff;
  --glass-lo: #f7f9fb;
  /* hairlines, now dark-on-light */
  --edge: rgba(0,47,66,.16);
  --edge-hi: rgba(0,47,66,.28);
  /* type */
  --fg: #002f42;
  --fg-soft: #15384a;
  --fg-mute: #4a6473;
  --fg-faint: #90a4ae;
  /* elevation - the inset white highlight is a dark-theme trick,
     so drop it and keep an honest drop shadow */
  --lift-1: 0 1px 2px rgba(0,33,47,.06), 0 6px 18px rgba(0,33,47,.07);
  --lift-2: 0 2px 5px rgba(0,33,47,.08), 0 14px 34px rgba(0,33,47,.13);
  /* opaque card - the blur has nothing left to sample */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Sheen needs to be a light gloss to read against light grey */
.category-item::before, .section-item::before {
  background: linear-gradient(115deg, transparent 22%, rgba(0,47,66,.05) 46%, transparent 62%);
}
/* Hover: deep green reads on light; the light green does not */
.category-item:hover, .section-item:hover,
.category-item:focus-within, .section-item:focus-within {
  border-color: rgba(25,132,104,.55);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(25,132,104,.22), 0 18px 44px rgba(25,132,104,.16);
}
/* Icon chip: white chip on the grey card */
.category-item .section-icon-wrap, .section-item .section-icon-wrap {
  background: linear-gradient(160deg, #f4f7fa 0%, #e3e9ee 100%);
  border-color: rgba(0,47,66,.13);
}
.category-item:hover .section-icon-wrap,
.section-item:hover .section-icon-wrap,
.category-item:focus-within .section-icon-wrap,
.section-item:focus-within .section-icon-wrap {
  border-color: rgba(25,132,104,.42);
  box-shadow: 0 8px 22px rgba(25,132,104,.18);
}
/* Icon artwork is black-on-transparent. It was inverted to sit on the
   dark deck; on a light chip force it back to black instead. */
.category-item .category-icon, .category-item .section-icon,
.section-item .category-icon, .section-item .section-icon {
  filter: brightness(0);
  opacity: .82;
}
.category-item:hover .category-icon, .category-item:hover .section-icon,
.section-item:hover .section-icon { opacity: 1; }
.category-item .section-icon-fallback,
.section-item .section-icon-fallback { color: var(--accent-green); filter: none; opacity: .9; }
/* Titles were hardcoded white */
.category-item .category-title, .category-item .section-title-card,
.section-item .section-title-card { color: #002f42; }
.section-item .section-title { color: #002f42; }
.category-item .category-link::after, .section-item .section-link::after { opacity: .7; }
.category-item:hover .category-link::after,
.section-item:hover .section-link::after { border-color: var(--accent-green); }
.category-item .category-link:focus-visible,
.section-item .section-link:focus-visible { outline-color: var(--accent-green); }
.category-empty, .section-empty {
  display: block;
  padding: 40px;
  text-align: center;
  color: var(--fg-mute);
  background: var(--glass-lo);
  border: 1px dashed var(--edge);
  border-radius: var(--r-lg);
  font-style: normal;
}
/* Legacy blocks-list (community topics) reuses the card language */
.blocks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; list-style: none; padding: 0; }
.blocks-item { display: flex; text-align: left; overflow: hidden; transition: transform var(--med) var(--ease), border-color var(--med) var(--ease), box-shadow var(--med) var(--ease); }
.blocks-item:hover { transform: translateY(-4px); border-color: rgba(56,178,144,.48); box-shadow: var(--lift-2); }
.blocks-item-link { color: var(--fg); padding: 26px 24px; display: flex; flex-direction: column; flex: 1; border-radius: inherit; }
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active { color: var(--fg); text-decoration: none; }
.blocks-item-title { margin-bottom: 0; font-size: 17.5px; color: var(--ink); font-weight: 650; }
.blocks-item-description { margin: 8px 0 0; color: var(--fg-mute); font-size: 14.5px; }
.blocks-item-internal { background: var(--glass-lo); }
.blocks-item-internal .icon-lock { height: 15px; width: 15px; position: relative; bottom: 2px; color: var(--fg-mute); }
/* ============================================================
   ARTICLE LISTS - promoted, section, related
   ============================================================ */
.article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
}
@media (min-width: 760px) { .article-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .promoted-list.article-list { grid-template-columns: repeat(3, 1fr); } }
.article-list li,
.article-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--edge);
  background: var(--glass-lo);
  border-radius: var(--r);
  overflow: hidden;
  font-size: 15.5px;
  text-overflow: initial;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.article-list li:hover,
.article-list-item:hover {
  background: var(--glass-hi);
  border-color: var(--edge-hi);
  transform: translateX(3px);
}
[dir=rtl] .article-list li:hover, [dir=rtl] .article-list-item:hover { transform: translateX(-3px); }
.article-list li > a,
.article-list-item > a,
.article-link,
.article-list-link {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  color: var(--fg-soft);
  font-weight: 500;
}
.article-list li > a:hover, .article-list-item > a:hover,
.article-link:hover, .article-list-link:hover { color: var(--ink); text-decoration: none; }
/* Leading marker: a painted stall stripe */
.article-list li > a::before,
.article-list-item > a::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: var(--fg-faint);
  transition: background var(--fast) var(--ease), height var(--fast) var(--ease);
}
.article-list li:hover > a::before,
.article-list-item:hover > a::before { background: var(--accent-green-lt); height: 22px; }
.article-list-item.article-promoted { border-color: rgba(252,177,65,.30); background: rgba(252,177,65,.05); }
.article-list-item .icon-star { color: var(--accent-amber); font-size: 16px; flex: 0 0 auto; margin-left: 14px; }
[dir=rtl] .article-list-item .icon-star { margin-left: 0; margin-right: 14px; }
.icon-lock { color: var(--fg-mute); flex: 0 0 auto; }
/* Promoted section on the home page */
.promoted-articles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .promoted-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .promoted-articles { grid-template-columns: repeat(3, 1fr); } }
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  border: 1px solid var(--edge);
  background: var(--glass-lo);
  border-radius: var(--r);
  color: var(--fg-soft);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.promoted-articles-item a:hover { background: var(--glass-hi); border-color: var(--edge-hi); color: var(--ink); text-decoration: none; }
.promoted-articles-item .icon-lock { vertical-align: baseline; }
/* Section list (sub-sections) */
.section-list { margin: 30px 0; display: grid; gap: 10px; }
.section-list-item {
  border: 1px solid var(--edge);
  background: var(--glass-lo);
  border-radius: var(--r);
  font-size: 15.5px;
  padding: 0;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.section-list-item:first-child { border-top: 1px solid var(--edge); }
.section-list-item:hover { background: var(--glass-hi); border-color: var(--edge-hi); }
.section-list-item a {
  align-items: center;
  color: var(--fg-soft);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-weight: 500;
}
.section-list-item a:hover { color: var(--ink); text-decoration: none; }
.section-list-item svg { color: var(--fg-faint); flex: 0 0 auto; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.section-list-item:hover svg { color: var(--accent-green-lt); transform: translateX(3px); }
.see-all-articles, .see-all-sections-trigger {
  display: inline-block;
  padding: 12px 0;
  color: var(--accent-green-lt);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.see-all-sections-trigger { display: block; text-align: center; }
.see-all-sections-trigger[aria-hidden=true] { display: none; }
.section-tree { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .section-tree { grid-template-columns: repeat(2, 1fr); gap: 34px; } }
.section-tree .section { margin-bottom: 0; }
.section-tree-title { margin-bottom: 12px; font-size: 18px; font-weight: 650; }
.section-tree-title a { color: var(--ink); }
.section-tree-title a:hover { color: var(--accent-green-lt); }
/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section { margin-bottom: clamp(48px, 7vw, 88px); }
.video-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 700px) { .video-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .video-row { grid-template-columns: repeat(3, 1fr); } }
.video-wrapper {
  overflow: hidden;
  padding: 0;
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.video-wrapper:hover {
  transform: translateY(-4px);
  border-color: rgba(56,178,144,.40);
  box-shadow: var(--lift-2);
}
.video-wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: var(--deck-000);
}
.video-title {
  padding: 16px 20px 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fg);
  border-top: 1px solid var(--edge);
  display: flex;
  align-items: center;
  gap: 10px;
}
.video-title::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(25,132,104,.12);
  border: 1px solid rgba(25,132,104,.34);
  position: relative;
}
.video-title::after {
  content: "";
  position: absolute;
  left: 28px;
  width: 0; height: 0;
  border-left: 7px solid var(--accent-green-lt);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  pointer-events: none;
}
[dir=rtl] .video-title::after { left: auto; right: 28px; border-left: 0; border-right: 7px solid var(--accent-green-lt); }
/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}
@media (min-width: 1024px) {
  .article-container { gap: 46px; }
  .article-container:has(> .article-sidebar) { grid-template-columns: 250px minmax(0, 1fr); }
}
/* No sidebar -> centre the column so the measure stays comfortable */
.article-container > .article:only-child { margin-inline: auto; }
.article-sidebar {
  border: 0;
  margin-bottom: 0;
  padding: 0;
  min-width: 0;
}
@media (min-width: 1024px) {
  .article-sidebar { position: sticky; top: 100px; max-height: calc(100vh - 130px); overflow-y: auto; }
}
.article-sidebar:empty { display: none; }
.article {
  min-width: 0;
  max-width: 78ch;
  padding: 0;
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--edge);
}
@media (min-width: 768px) { .article-header { flex-direction: row; align-items: center; } }
.article-title {
  overflow-wrap: break-word;
  max-width: 100%;
  margin-bottom: 16px;
  font-size: clamp(28px, 4vw, 40px);
  text-wrap: balance;
}
@media (min-width: 768px) { .article-title { flex-basis: 100%; } }
.article-title .icon-lock { position: relative; left: -5px; vertical-align: baseline; }
.article-author { margin-bottom: 0; display: flex; align-items: center; gap: 12px; }
.article-avatar { margin-right: 0; }
.article-meta { display: inline-block; vertical-align: middle; }
.article-meta a { color: var(--fg-soft); font-size: 14px; font-weight: 550; }
.meta-group { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.meta-data {
  color: var(--fg-mute);
  font-size: 13px;
}
.meta-group .meta-data + .meta-data::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--fg-faint);
  margin-right: 10px;
  vertical-align: middle;
}
.article-info { max-width: 100%; }
.article-content { line-height: 1.75; margin: 0 0 40px; word-wrap: break-word; font-size: 16.5px; }
.article-body { display: flow-root; color: var(--fg-soft); }
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 { margin-top: 2em; margin-bottom: .6em; color: var(--ink); }
.article-body h2 { padding-bottom: .34em; border-bottom: 1px solid var(--edge); }
.article-body > *:first-child { margin-top: 0; }
.article-body a { color: var(--accent-green-lt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body a:visited { color: var(--accent-green-lt); }
.article-body a:hover, .article-body a:active, .article-body a:focus { color: var(--accent-green-lt2); }
.article-body strong, .article-body b { color: var(--ink); font-weight: 650; }
.article-body img { height: auto; max-width: 100%; border-radius: var(--r); border: 1px solid var(--edge); }
.article-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.article-body p > img.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.article-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.article-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.article-body figure.image { display: table; margin: 26px auto; }
.article-body figure.image > img { display: block; width: 100%; }
.article-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.article-body figure.image.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.article-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; }
.article-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; }
.article-body figcaption {
  padding: 10px 14px;
  font-size: 12.5px;
  text-align: center;
  color: var(--fg-mute);
  background: var(--glass-lo);
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
}
.article-body ul, .article-body ol {
  padding-left: 22px;
  list-style-position: outside;
  margin: 18px 0 18px 18px;
}
[dir=rtl] .article-body ul, [dir=rtl] .article-body ol { padding-right: 22px; padding-left: 0; margin-left: 0; margin-right: 18px; }
.article-body ul > ul, .article-body ol > ol, .article-body ol > ul,
.article-body ul > ol, .article-body li > ul, .article-body li > ol { margin: 6px 0; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { margin-bottom: .5em; }
.article-body li::marker { color: var(--accent-green-lt); }
.article-body :not(pre) > code {
  background: rgba(25,132,104,.16);
  border: 1px solid rgba(56,178,144,.28);
  border-radius: 5px;
  padding: .12em .42em;
  margin: 0 2px;
  font-size: .9em;
  color: #38b290;
}
.article-body pre {
  background: #eef2f6;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 16px 18px;
  overflow: auto;
  white-space: pre;
  color: var(--fg-soft);
  font-size: 14px;
}
.article-body blockquote {
  border-left: 3px solid var(--accent-green-lt);
  background: var(--glass-lo);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--fg-soft);
  font-style: normal;
  margin: 22px 0;
  padding: 16px 20px;
}
[dir=rtl] .article-body blockquote { border-left: 0; border-right: 3px solid var(--accent-green-lt); border-radius: var(--r) 0 0 var(--r); }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  overflow: hidden;
}
.article-body th {
  background: var(--glass-hi);
  color: var(--ink);
  font-weight: 650;
  text-align: left;
}
.article-body th, .article-body td { padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.article-body tr:last-child td { border-bottom: 0; }
.article-body > p:last-child { margin-bottom: 0; }
.article td > p:first-child, .article th > p:first-child { margin-top: 0; }
.article td > p:last-child, .article th > p:last-child { margin-bottom: 0; }
/* Content tags */
.content-tags { margin-top: 30px; }
.content-tags p { font-size: 13px; color: var(--fg-mute); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; }
.content-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.content-tag-item a, .content-tag .label {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: var(--glass);
  border: 1px solid var(--edge);
  color: var(--fg-soft);
  font-size: 13px;
}
.content-tag-item a:hover { background: var(--glass-hi); border-color: var(--accent-green-lt); color: var(--ink); text-decoration: none; }
/* Sidebar nav */
.sidenav-title, .collapsible-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  position: relative;
  display: block;
  margin-bottom: 14px;
}
.sidenav-item {
  display: block;
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
[dir=rtl] .sidenav-item { border-left: 0; border-right: 2px solid transparent; }
.sidenav-item:hover { background: var(--glass-lo); color: var(--fg); text-decoration: none; }
.sidenav-item.current-article, .sidenav-item.current {
  background: rgba(25,132,104,.10);
  border-left-color: var(--accent-green-lt);
  color: var(--ink);
  font-weight: 600;
}
[dir=rtl] .sidenav-item.current-article, [dir=rtl] .sidenav-item.current { border-left-color: transparent; border-right-color: var(--accent-green-lt); }
.article-sidebar-item { display: block; padding: 8px 12px; font-size: 13.5px; color: var(--accent-green-lt); font-weight: 600; }
/* Collapsible sidebar (mobile) */
.collapsible-sidebar, .collapsible-nav { position: relative; }
.collapsible-sidebar-toggle, .collapsible-nav-toggle {
  display: none;
  position: absolute;
  right: 0; top: 0;
  background: none;
  border: 0;
  color: var(--fg-soft);
  cursor: pointer;
  padding: 4px;
}
[dir=rtl] .collapsible-sidebar-toggle, [dir=rtl] .collapsible-nav-toggle { right: auto; left: 0; }
.collapsible-sidebar-toggle-icon, .collapsible-nav-toggle-icon { display: none; }
@media (max-width: 1023px) {
  .collapsible-sidebar { border: 1px solid var(--edge); background: var(--glass-lo); border-radius: var(--r); padding: 16px 18px; }
  .collapsible-sidebar-toggle { display: block; top: 14px; right: 14px; }
  [dir=rtl] .collapsible-sidebar-toggle { right: auto; left: 14px; }
  .collapsible-sidebar .collapsible-sidebar-toggle-icon.chevron-icon { display: block; }
  .collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-toggle-icon.chevron-icon { display: none; }
  .collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-toggle-icon.x-icon { display: block; }
  .collapsible-sidebar .collapsible-sidebar-body { display: none; }
  .collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { display: block; margin-top: 14px; }
  .collapsible-sidebar-title { margin-bottom: 0; }
}
/* Article footer bits */
.article-footer { align-items: center; display: flex; justify-content: space-between; padding-bottom: 20px; gap: 16px; }
.article-comment-count { color: var(--fg-mute); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.article-comment-count:hover { text-decoration: none; color: var(--fg); }
.article-comment-count-icon { vertical-align: middle; color: var(--accent-green-lt); width: 18px; height: 18px; }
.article-votes {
  border: 1px solid var(--edge);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  margin: 10px 0 30px;
}
.article-votes-question { font-size: 17px; font-weight: 650; margin-bottom: 16px; color: var(--ink); }
.article-votes-controls { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.article-vote { margin: 0; min-width: 116px; width: auto; }
.article-votes-count { display: block; margin-top: 14px; color: var(--fg-mute); font-size: 13px; }
.article-more-questions { margin: 10px 0 24px; text-align: center; color: var(--fg-soft); }
.article-more-questions a { color: var(--accent-green-lt); font-weight: 600; }
.article-return-to-top { border-top: 1px solid var(--edge); }
@media (min-width: 1024px) { .article-return-to-top { display: none; } }
.article-return-to-top a { color: var(--fg-soft); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0; font-size: 14px; }
.article-return-to-top a:hover { text-decoration: none; color: var(--ink); }
.article-return-to-top-icon { transform: rotate(.5turn); }
.article-relatives {
  border-top: 1px solid var(--edge);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 34px 0 0;
  margin-top: 10px;
}
@media (min-width: 768px) { .article-relatives { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.article-relatives > * { min-width: 0; overflow-wrap: break-word; }
.recent-articles-title, .related-articles-title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.recent-articles li, .related-articles li { margin-bottom: 4px; }
.recent-articles a, .related-articles a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.recent-articles a:hover, .related-articles a:hover {
  background: var(--glass-lo);
  border-color: var(--edge);
  color: var(--ink);
  text-decoration: none;
}
/* Attachments */
.attachments .attachment-item {
  padding: 12px 14px 12px 40px;
  position: relative;
  margin-bottom: 8px;
  background: var(--glass-lo);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  font-size: 14.5px;
}
.attachments .attachment-item:last-child { margin-bottom: 0; }
.attachments .attachment-item .attachment-icon { color: var(--accent-green-lt); left: 14px; position: absolute; top: 14px; }
[dir=rtl] .attachments .attachment-item { padding-left: 14px; padding-right: 40px; }
[dir=rtl] .attachments .attachment-item .attachment-icon { left: auto; right: 14px; }
.attachment-meta { margin-top: 4px; }
.article-attachments { margin-top: 30px; }
/* Social share */
.share { padding: 0; white-space: nowrap; display: flex; gap: 8px; }
.share li { height: 34px; width: 34px; }
.share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--edge);
  color: var(--fg-mute);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.share a:hover { text-decoration: none; color: var(--ink); background: var(--glass-hi); border-color: var(--accent-green-lt); }
.share a svg { height: 16px; width: 16px; display: block; }
/* ============================================================
   BUTTONS
   ============================================================ */
.button,
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button,
.split-button button {
  background: var(--glass);
  border: 1px solid var(--edge-hi);
  border-radius: var(--pill);
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  margin: 0;
  padding: 13px 24px;
  text-align: center;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link,
  .pagination-first-link, .pagination-last-link,
  .subscriptions-subscribe button,
  .requests-table-toolbar .organization-subscribe button,
  .community-follow button, .article-subscribe button,
  .section-subscribe button, .split-button button { width: auto; }
}
.button:visited { color: var(--fg); }
.button:hover, .button:focus, .button:active,
.pagination-next-link:hover, .pagination-prev-link:hover,
.pagination-first-link:hover, .pagination-last-link:hover,
.subscriptions-subscribe button:hover,
.requests-table-toolbar .organization-subscribe button:hover,
.community-follow button:hover,
.article-subscribe button:hover,
.section-subscribe button:hover {
  background: var(--glass-hi);
  border-color: rgba(56,178,144,.55);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-1px);
}
.button.button-primary,
.button-primary.pagination-next-link,
.subscriptions-subscribe button.button-primary,
.subscriptions-subscribe button[data-selected=true],
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.community-follow button.button-primary,
.article-subscribe button.button-primary,
.article-subscribe button[data-selected=true],
.section-subscribe button.button-primary,
.section-subscribe button[data-selected=true],
.split-button button.button-primary {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
  box-shadow: 0 6px 20px rgba(25,132,104,.34);
}
.button.button-primary:hover,
.article-subscribe button[data-selected=true]:hover,
.section-subscribe button[data-selected=true]:hover,
.subscriptions-subscribe button[data-selected=true]:hover {
  background: #1FA07E;
  border-color: #1FA07E;
  color: #fff;
  box-shadow: 0 10px 28px rgba(25,132,104,.44);
}
.button[data-disabled], .split-button button[data-disabled] { cursor: default; opacity: .5; }
.button-large,
.hbs-form input[type=submit] {
  cursor: pointer;
  background: var(--accent-green);
  border: 1px solid var(--accent-green);
  border-radius: var(--pill);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  min-width: 190px;
  padding: 15px 30px;
  width: 100%;
  box-shadow: 0 6px 20px rgba(25,132,104,.34);
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
@media (min-width: 768px) { .button-large, .hbs-form input[type=submit] { width: auto; } }
.button-large:visited, .hbs-form input[type=submit]:visited { color: #fff; }
.button-large:hover, .button-large:focus, .button-large:active,
.hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:focus {
  background: #1FA07E;
  box-shadow: 0 10px 28px rgba(25,132,104,.44);
  transform: translateY(-1px);
  text-decoration: none;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background: #e4e9ee;
  border-color: var(--edge);
  color: var(--fg-faint);
  box-shadow: none;
  cursor: not-allowed;
}
.button-secondary {
  color: var(--fg-soft);
  border: 1px solid var(--edge-hi);
  background: var(--glass);
  border-radius: var(--pill);
}
.button-secondary:visited { color: var(--fg-soft); }
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--ink);
  border-color: var(--edge-hi);
  background: var(--glass-hi);
}
/***** Split button *****/
.split-button { display: flex; }
.split-button button {
  background: var(--accent-green);
  border: 0;
  color: #fff;
  height: 40px;
  line-height: 16px;
  width: auto;
  padding: 0 20px;
}
[dir=ltr] .split-button button:not(:only-child):first-child { border-right: 1px solid rgba(255,255,255,.3); border-top-right-radius: 0; border-bottom-right-radius: 0; }
[dir=rtl] .split-button button:not(:only-child):first-child { border-left: 1px solid rgba(255,255,255,.3); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.split-button button:not(:only-child):last-child {
  display: flex; justify-content: center; align-items: center;
  width: 32px; min-width: 32px; max-width: 32px; padding: 0;
}
[dir=ltr] .split-button button:not(:only-child):last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[dir=rtl] .split-button button:not(:only-child):last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* ============================================================
   FORMS
   ============================================================ */
.form { max-width: 720px; }
.form-field ~ .form-field { margin-top: 22px; }
.form-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--fg); }
.form-field .optional { color: var(--fg-mute); margin-left: 6px; font-weight: 400; }
.form-field p { color: var(--fg-mute); font-size: 12.5px; margin: 6px 0; }
.hbs-form input, .hbs-form textarea, .hbs-form select,
.form-field input, .form-field textarea, .form-field select,
.search input, .search textarea {
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
}
/* :not([type=search]) matters - search inputs live inside a .search pill
   and must keep ITS styling. Without it this rule outranks the .search
   rules and repaints the inner field with its own border, 8px radius and
   14px padding. */
.form-field input:not([type=search]),
.form-field textarea,
.hbs-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=search]),
.hbs-form textarea {
  background: #ffffff;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  outline: none;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.form-field input::placeholder, .hbs-form textarea::placeholder { color: var(--fg-quiet); }
.form-field input:not([type=search]):focus,
.form-field textarea:focus,
.hbs-form input:not([type=submit]):not([type=checkbox]):not([type=search]):focus,
.hbs-form textarea:focus {
  border-color: var(--accent-green-lt);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(25,132,104,.18);
}
.form-field input[disabled], .hbs-form input[disabled] { background: #eef2f6; color: var(--fg-faint); cursor: not-allowed; }
.form-field input[type=checkbox], .form-field input[type=radio] { width: auto; accent-color: var(--accent-green); }
.form-field input[type=checkbox] + label { margin: 0 0 0 10px; display: inline-block; }
.form-field textarea, .hbs-form textarea { resize: vertical; min-height: 130px; }
.hbs-form select, .form-field select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235a7382' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 12px 38px 12px 14px;
  outline: none;
  color: var(--fg);
  width: 100%;
  cursor: pointer;
}
[dir=rtl] .hbs-form select, [dir=rtl] .form-field select { background-position: left 14px center; padding: 12px 14px 12px 38px; }
.hbs-form select:focus, .form-field select:focus { border-color: var(--accent-green-lt); box-shadow: 0 0 0 3px rgba(25,132,104,.22); }
.hbs-form select::-ms-expand { display: none; }
.hbs-form select option, .form-field select option { background: #ffffff; color: var(--ink); }
.form-field .nesty-input,
.form-field .hc-multiselect-toggle {
  background: #ffffff;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  color: var(--fg);
  min-height: 46px;
  line-height: 44px;
  outline: none;
  vertical-align: middle;
  padding: 0 14px;
}
.form-field .nesty-input:focus, .form-field .hc-multiselect-toggle:focus {
  border-color: var(--accent-green-lt);
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25,132,104,.22);
}
.form footer { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--edge); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form footer a { color: var(--fg-mute); cursor: pointer; margin-right: 0; font-size: 14px; }
.form .suggestion-list { font-size: 14px; margin-top: 30px; }
.form .suggestion-list label {
  border-bottom: 1px solid var(--edge);
  display: block;
  padding-bottom: 8px;
  color: var(--fg-mute);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.form .suggestion-list li { padding: 10px 0; }
.form .suggestion-list li a { color: var(--fg-soft); }
.form .suggestion-list li a:hover { color: var(--accent-green-lt); }
.upload-dropzone {
  border: 1px dashed var(--edge-hi);
  border-radius: var(--r);
  background: var(--glass-lo);
  padding: 22px;
  text-align: center;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.upload-dropzone:hover { border-color: var(--accent-green-lt); background: var(--glass); }
.upload-dropzone span { color: var(--fg-mute); }
/* ============================================================
   ZENDESK GARDEN OVERRIDES (new request form, answer bot, alerts)
   ------------------------------------------------------------
   These components ship from Zendesk's React bundles with light
   theming baked in. The combobox menu renders through
   `dropdowns.combobox.floating`, which portals to <body> - so
   these rules must stay UNSCOPED, not nested under the form.
   ============================================================ */
/* --- Labels, hints, messages --- */
[data-garden-id="forms.input_label"],
[data-garden-id="forms.checkbox_label"],
[data-garden-id="forms.radio_label"],
[data-garden-id="forms.toggle_label"],
[data-garden-id="dropdowns.combobox.label"],
[data-garden-id="typography.paragraph"] {
  color: var(--fg) !important;
}
[data-garden-id="forms.input_hint"],
[data-garden-id="forms.checkbox_hint"],
[data-garden-id="forms.radio_hint"],
[data-garden-id="forms.toggle_hint"],
[data-garden-id="dropdowns.combobox.hint"] {
  color: var(--fg-mute) !important;
}
[data-garden-id="forms.input_message"],
[data-garden-id="dropdowns.combobox.message"] { color: var(--fg-mute) !important; }
[data-garden-id="forms.input_message"][data-garden-validation="error"],
[data-garden-id="dropdowns.combobox.message"][data-garden-validation="error"] { color: #F2A2A2 !important; }
/* --- Text inputs, textareas, faux inputs --- */
[data-garden-id="forms.input"],
[data-garden-id="forms.textarea"],
[data-garden-id="forms.faux_input"],
[data-garden-id="forms.media_input"],
[data-garden-id="dropdowns.combobox.trigger"],
[data-garden-id="dropdowns.combobox.input_group"] {
  background-color: #ffffff !important;
  border-color: var(--edge) !important;
  color: var(--fg) !important;
  border-radius: var(--r-sm) !important;
}
[data-garden-id="forms.input"]::placeholder,
[data-garden-id="forms.textarea"]::placeholder,
[data-garden-id="dropdowns.combobox.input"]::placeholder { color: var(--fg-quiet) !important; }
[data-garden-id="forms.input"]:hover,
[data-garden-id="forms.textarea"]:hover,
[data-garden-id="dropdowns.combobox.trigger"]:hover,
[data-garden-id="dropdowns.combobox.input_group"]:hover { border-color: var(--edge-hi) !important; }
[data-garden-id="forms.input"]:focus,
[data-garden-id="forms.input"][data-garden-focus-visible],
[data-garden-id="forms.textarea"]:focus,
[data-garden-id="forms.textarea"][data-garden-focus-visible],
[data-garden-id="dropdowns.combobox.trigger"][data-garden-focus-visible],
[data-garden-id="dropdowns.combobox.input_group"]:focus-within {
  border-color: var(--accent-green-lt) !important;
  box-shadow: 0 0 0 3px rgba(25,132,104,.20) !important;
  outline: none !important;
}
/* --- Combobox trigger + its inner value/input/icon --- */
[data-garden-id="dropdowns.combobox.container"] { color: var(--fg) !important; }
[data-garden-id="dropdowns.combobox.input"] {
  background: transparent !important;
  color: var(--fg) !important;
}
[data-garden-id="dropdowns.combobox.value"] { color: var(--fg) !important; }
[data-garden-id="dropdowns.combobox.input_icon"],
[data-garden-id="dropdowns.combobox.tags_button"] { color: var(--fg-mute) !important; }
/* --- The floating menu: portalled to <body>, so keep this unscoped --- */
[data-garden-id="dropdowns.combobox.floating"] { z-index: 80 !important; }
[data-garden-id="dropdowns.combobox.listbox"] {
  background-color: rgba(var(--panel),.97) !important;
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  border: 1px solid var(--edge) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--lift-3) !important;
  color: var(--fg) !important;
  /* No horizontal padding: options run edge-to-edge so the highlight
     lines up with the listbox border. */
  padding: 6px 0 !important;
  overflow: hidden;
}
/* The highlight is the option's own background, so the option carries the
   inset. Garden reserves the left gutter of an option for the selected
   tick - forcing that padding down to 14px put the label UNDER the tick,
   so the gutter is restored at 38px and the tick is pinned inside it. */
[data-garden-id="dropdowns.combobox.option"] {
  position: relative;
  background-color: transparent !important;
  color: var(--fg-soft) !important;
  border-radius: 0 !important;
  padding-left: 38px !important;
  padding-right: 14px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
[data-garden-id="dropdowns.combobox.option.icon"] {
  left: 13px !important;
  right: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
[dir=rtl] [data-garden-id="dropdowns.combobox.option"] {
  padding-left: 14px !important;
  padding-right: 38px !important;
}
[dir=rtl] [data-garden-id="dropdowns.combobox.option.icon"] { left: auto !important; right: 13px !important; }
/* Older nested/multiselect dropdowns use their own markup */
.form-field .nesty-input, .form-field .hc-multiselect-toggle { padding-left: 14px; }
.nesty-panel li > a, .hc-multiselect-menu li { padding-left: 14px !important; }
[data-garden-id="dropdowns.combobox.option"]:hover,
[data-garden-id="dropdowns.combobox.option"][data-garden-active="true"],
[data-garden-id="dropdowns.combobox.option"][aria-selected="true"] {
  background-color: var(--glass-hi) !important;
  color: var(--ink) !important;
}
[data-garden-id="dropdowns.combobox.option"][aria-selected="true"] {
  background-color: rgba(25,132,104,.20) !important;
  color: var(--ink) !important;
}
[data-garden-id="dropdowns.combobox.option.icon"],
[data-garden-id="dropdowns.combobox.option.type_icon"] { color: var(--accent-green-lt) !important; }
[data-garden-id="dropdowns.combobox.option.meta"] { color: var(--fg-mute) !important; }
[data-garden-id="dropdowns.combobox.optgroup"] { color: var(--fg-mute) !important; }
[data-garden-id="dropdowns.combobox.separator"] { border-color: var(--edge) !important; background-color: var(--edge) !important; }
[data-garden-id="dropdowns.combobox.tag"] {
  background-color: rgba(25,132,104,.20) !important;
  color: #38b290 !important;
  border-color: rgba(56,178,144,.36) !important;
}
/* --- Checkbox / radio / toggle ---
   Outline only: Garden fills the box with a solid swatch when checked,
   which reads as a white/light block behind the tick on this dark theme.
   The box keeps a green stroke and a transparent interior; the tick and
   the radio dot are drawn in green so they still read against it. */
[data-garden-id="forms.checkbox"],
[data-garden-id="forms.radio"] { accent-color: var(--accent-green); }
[data-garden-id="forms.checkbox_label"]::before,
[data-garden-id="forms.radio_label"]::before,
[data-garden-id="forms.checkbox"] + label::before,
[data-garden-id="forms.radio"] + label::before {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--accent-green-lt) !important;
  box-shadow: none !important;
}
[data-garden-id="forms.check_svg"],
[data-garden-id="forms.dash_svg"],
[data-garden-id="forms.radio_svg"],
[data-garden-id="forms.toggle_svg"] { color: var(--accent-green-lt) !important; }
/* Some Garden builds draw the tick as a filled glyph sitting on that
   solid swatch - strip any fill the swatch leaves behind. */
[data-garden-id="forms.check_svg"] rect,
[data-garden-id="forms.radio_svg"] rect,
[data-garden-id="dropdowns.combobox.option.icon"] rect { fill: none !important; }
[data-garden-id="forms.check_svg"] path,
[data-garden-id="dropdowns.combobox.option.icon"] path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* --- File upload --- */
[data-garden-id="forms.file_upload"] {
  background-color: var(--glass-lo) !important;
  border-color: var(--edge-hi) !important;
  border-radius: var(--r) !important;
  color: var(--fg-mute) !important;
}
[data-garden-id="forms.file_upload"]:hover { border-color: var(--accent-green-lt) !important; background-color: var(--glass) !important; }
[data-garden-id="forms.file"],
[data-garden-id="forms.file_list.item"] {
  background-color: var(--glass-lo) !important;
  border-color: var(--edge) !important;
  color: var(--fg) !important;
}
[data-garden-id="forms.file.close"],
[data-garden-id="forms.file.delete"],
[data-garden-id="forms.file.icon"] { color: var(--fg-mute) !important; }
/* --- Buttons --- */
[data-garden-id="buttons.button"] { border-radius: var(--pill) !important; }
[data-garden-id="buttons.button"][data-garden-is-primary="true"],
[data-garden-id="buttons.button"][type="submit"] {
  background-color: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  color: #fff !important;
}
[data-garden-id="buttons.button"][data-garden-is-primary="true"]:hover,
[data-garden-id="buttons.button"][type="submit"]:hover {
  background-color: #1FA07E !important;
  border-color: #1FA07E !important;
}
[data-garden-id="buttons.button"]:not([data-garden-is-primary="true"]):not([type="submit"]) {
  background-color: var(--glass) !important;
  border-color: var(--edge-hi) !important;
  color: var(--fg) !important;
}
[data-garden-id="buttons.button"]:not([data-garden-is-primary="true"]):not([type="submit"]):hover {
  background-color: var(--glass-hi) !important;
  color: var(--ink) !important;
}
[data-garden-id="buttons.anchor"] { color: var(--accent-green-lt) !important; }
[data-garden-id="buttons.icon"] { color: var(--fg-mute) !important; }
/* --- Alerts / notifications --- */
[data-garden-id="notifications.notification"],
[data-garden-id="notifications.alert"] {
  background-color: rgba(var(--panel),.96) !important;
  border-color: var(--edge) !important;
  color: var(--fg) !important;
  border-radius: var(--r) !important;
}
[data-garden-id="notifications.title"] { color: var(--ink) !important; }
[data-garden-id="notifications.close"] { color: var(--fg-mute) !important; }
/* --- Answer-bot modal --- */
[data-garden-id="modals.modal"] {
  background-color: rgba(var(--panel),.98) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--r-lg) !important;
  color: var(--fg) !important;
}
[data-garden-id="modals.backdrop"] { background-color: rgba(0,20,29,.76) !important; }
[data-garden-id="modals.header"] { color: var(--ink) !important; border-color: var(--edge) !important; }
[data-garden-id="modals.body"] { color: var(--fg-soft) !important; }
[data-garden-id="modals.footer"] { border-color: var(--edge) !important; }
[data-garden-id="modals.close"] { color: var(--fg-mute) !important; }
/* --- Tags --- */
[data-garden-id="tags.tag_view"] {
  background-color: var(--glass-hi) !important;
  color: var(--fg) !important;
}
/* Loading bar picks up the brand green */
[data-garden-id="loaders.progress"] { color: var(--accent-green-lt) !important; }
/* ============================================================
   TABLES / REQUEST LISTS
   ============================================================ */
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-lo);
}
@media (min-width: 768px) { .table { table-layout: auto; } }
.table th, .table th a {
  color: var(--fg-soft);
  font-size: 12px;
  text-align: left;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
[dir=rtl] .table th, [dir=rtl] .table th a { text-align: right; }
.table thead th { background: var(--glass-hi); border-bottom: 1px solid var(--edge); }
.table tr { border-bottom: 1px solid var(--edge); display: block; padding: 18px 0; }
@media (min-width: 768px) { .table tr { display: table-row; padding: 0; } }
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--glass); }
.table td { display: block; color: var(--fg-soft); font-size: 14.5px; border-bottom: 1px solid var(--edge); }
@media (min-width: 768px) { .table td { display: table-cell; } }
.table tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 768px) { .table td, .table th { padding: 14px 18px; } }
@media (min-width: 1024px) { .table td, .table th { padding: 16px 22px; } }
.table a { color: var(--fg); font-weight: 550; }
.table a:hover { color: var(--accent-green-lt); }
.request-closed { opacity: .62; }
.my-activities-header { margin-bottom: 26px; }
.my-activities-sub-nav { margin-top: 18px; }
.collapsible-nav-list { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--edge); }
.collapsible-nav-list li a {
  display: inline-block;
  padding: 11px 16px;
  color: var(--fg-mute);
  font-size: 14.5px;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.collapsible-nav-list li a:hover { color: var(--fg); text-decoration: none; }
.collapsible-nav-list li.current a { color: var(--ink); border-bottom-color: var(--accent-green-lt); }
.requests-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin: 24px 0;
}
.requests-table-toolbar .search {
  flex: 1 1 260px;
  min-width: 220px;
  /* Flat pill: keep the border + radius, drop the elevation */
  box-shadow: none;
}
.requests-table-toolbar .search:focus-within {
  box-shadow: 0 0 0 3px rgba(25,132,104,.22);
}
/* Padding set here rather than relying on the [dir=ltr] rule, so the text
   clears the icon even if the document carries no dir attribute. */
.requests-table-toolbar .search input[type=search] {
  height: 46px;
  padding-left: 54px;
  padding-right: 18px;
}
[dir=rtl] .requests-table-toolbar .search input[type=search] {
  padding-left: 18px;
  padding-right: 54px;
}
.request-table-filter { flex: 0 1 220px; min-width: 180px; }
.request-filter-label { display: block; font-size: 12px; color: var(--fg-mute); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.requests-search-info { margin-bottom: 16px; color: var(--fg-mute); }
.no-activities, .no-requests {
  padding: 50px 30px;
  text-align: center;
  color: var(--fg-mute);
  border: 1px dashed var(--edge);
  border-radius: var(--r-lg);
  background: var(--glass-lo);
}
.requests-table-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
@media (min-width: 768px) { .requests-table-meta { display: none; } }
.striped-list-title { font-weight: 600; color: var(--ink); }
/* Request detail page */
.request-container { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 1024px) { .request-container { grid-template-columns: minmax(0,1fr) 320px; gap: 40px; } }
.request-title { margin: 10px 0 26px; }
.request-breadcrumbs { margin-bottom: 10px; }
.request-sidebar {
  background: var(--glass);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-radius: var(--r-lg);
  padding: 22px;
}
.request-details { margin: 0 0 20px; }
.request-details dt {
  color: var(--fg-mute);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 16px;
}
.request-details dt:first-child { margin-top: 0; }
.request-details dd { margin: 5px 0 0; color: var(--fg); font-size: 14.5px; }
.request-collaborators li { color: var(--fg-soft); font-size: 14px; }
.request-follow-up { margin: 24px 0; color: var(--fg-mute); font-size: 14px; }
.comment-show-container {
  background: var(--glass);
  border: 1px solid var(--edge-hi);
  border-radius: var(--pill);
  color: var(--fg);
  cursor: pointer;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}
.comment-show-container:hover { background: var(--glass-hi); border-color: rgba(56,178,144,.55); }
.comment-show-container.hidden { display: none; }
.comment-fields { display: none; }
.comment-fields.shown { display: block; }
.request-submit-comment { display: none; }
.request-submit-comment.shown { display: inline-block; }
/***** Status labels *****/
.status-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-label-open, .status-label-new { background: rgba(252,177,65,.14); color: #FBBE63; border-color: rgba(252,177,65,.34); }
.status-label-pending, .status-label-hold { background: rgba(155,51,145,.16); color: #D586CE; border-color: rgba(155,51,145,.36); }
.status-label-solved, .status-label-closed { background: rgba(25,132,104,.18); color: var(--accent-green-lt); border-color: rgba(25,132,104,.34); }
.status-label-answered { background: rgba(71,162,157,.16); color: #6FCAC4; border-color: rgba(71,162,157,.36); }
.status-label-pending-moderation { background: rgba(0,47,66,.07); color: var(--fg-soft); border-color: var(--edge); }
.status-label-official { background: rgba(25,132,104,.18); color: var(--accent-green-lt); border-color: rgba(25,132,104,.34); }
.escalation-badge { background: rgba(71,162,157,.16); color: #6FCAC4; border-color: rgba(71,162,157,.36); }
/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.search-results { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 1024px) { .search-results { grid-template-columns: 250px minmax(0,1fr); gap: 46px; } }
.search-results-sidebar { min-width: 0; display: grid; gap: 18px; }
@media (min-width: 1024px) { .search-results-sidebar { position: sticky; top: 100px; } }
.filters-in-section { min-width: 0; }
.multibrand-filter-list { display: grid; gap: 2px; }
.multibrand-filter-list--collapsed li:nth-child(n+7) { display: none; }
.multibrand-filter-list .sidenav-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sidenav-subitem.filter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-count { color: var(--fg-mute); font-size: 12.5px; flex: 0 0 auto; }
.see-all-filters {
  background: none;
  border: 0;
  color: var(--accent-green-lt);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 12px;
  text-align: left;
}
.see-all-filters[aria-hidden=true] { display: none; }
.sidenav-tag .content-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 13px;
  border-radius: var(--pill);
  background: rgba(25,132,104,.18);
  border: 1px solid rgba(56,178,144,.36);
  color: #38b290;
  font-size: 13px;
}
.sidenav-tag .content-tag a { color: inherit; display: inline-flex; }
.close-icon { width: 12px; height: 12px; }
.search-results-column { min-width: 0; }
.search-results-subheading { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 24px; color: var(--fg); font-weight: 650; }
.search-results-list { display: grid; gap: 14px; }
.search-results-list > li { padding: 22px 24px; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.search-results-list > li:hover { border-color: rgba(56,178,144,.40); background: var(--glass-hi); transform: translateY(-2px); }
.search-result-title-container { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.search-result-title { font-size: 18px; margin: 0 0 8px; font-weight: 650; }
.search-result-title a { color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.search-result-title a:hover { color: var(--accent-green-lt); text-decoration: none; }
.search-result-icons { display: flex; gap: 14px; flex: 0 0 auto; color: var(--fg-mute); font-size: 13px; }
.search-result-votes, .search-result-meta-count { display: inline-flex; align-items: center; gap: 5px; }
.search-result-votes-icon, .search-result-meta-count-icon { vertical-align: middle; }
.search-result-meta-container { margin-bottom: 10px; }
.search-result-breadcrumbs { margin: 0; }
.search-result-breadcrumbs li { font-size: 12.5px; }
.search-result-description { color: var(--fg-mute); font-size: 14.5px; margin: 0; line-height: 1.65; }
.search-result-description em, .search-results-list em {
  font-style: normal;
  background: rgba(25,132,104,.26);
  color: #38b290;
  border-radius: 3px;
  padding: 0 3px;
}
.no-results {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--edge);
  border-radius: var(--r-xl);
  background: var(--glass-lo);
}
.no-results svg { opacity: .30; max-width: 100%; height: auto; margin-bottom: 22px; }
.no-results .headline { font-size: 20px; font-weight: 650; color: var(--ink); margin-bottom: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
.no-results .action-prompt { color: var(--fg-mute); margin-bottom: 8px; }
.no-results .action-prompt a { color: var(--accent-green-lt); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* Generative answers block */
.generative-answers, [data-generative-answers] {
  background: var(--glass);
  border: 1px solid rgba(71,162,157,.32);
  border-radius: var(--r-lg);
  padding: 4px;
  margin-bottom: 26px;
}
/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 44px 0 10px;
  padding: 0;
  list-style: none;
}
.pagination li { display: inline-flex; }
.pagination a, .pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--fg-mute);
  font-size: 14px;
  font-weight: 550;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pagination a:hover { background: var(--glass-hi); border-color: var(--edge); color: var(--ink); text-decoration: none; }
.pagination-current, .pagination li[aria-current=page] a {
  background: rgba(25,132,104,.20);
  border-color: rgba(25,132,104,.36);
  color: var(--accent-green-lt);
  font-weight: 700;
}
.pagination-next-link, .pagination-prev-link,
.pagination-first-link, .pagination-last-link { width: auto; padding: 11px 18px; font-size: 13.5px; }
/* ============================================================
   COMMENTS
   ============================================================ */
.comment { border-bottom: 1px solid var(--edge); padding: 24px 0; }
.comment:last-child { border-bottom: 0; }
.comment-heading { margin-bottom: 6px; margin-top: 0; font-size: 20px; font-weight: 650; }
.comment-overview {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 22px 0;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.comment-overview p { margin-top: 0; margin-bottom: 0; }
.comment-callout { color: var(--fg-mute); display: inline-block; font-size: 13.5px; margin-bottom: 0; }
.comment-callout a { color: var(--accent-green-lt); }
.comment-sorter { display: inline-block; float: none; }
.comment-sorter .dropdown-toggle {
  color: var(--fg-soft);
  font-size: 13.5px;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
}
.comment-wrapper { display: flex; position: relative; gap: 16px; }
.comment-wrapper.comment-official {
  border: 1px solid rgba(56,178,144,.36);
  background: rgba(25,132,104,.08);
  border-radius: var(--r-lg);
  padding: 22px;
}
.comment-info { min-width: 0; width: 100%; padding-right: 0; }
.comment-author { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) { .comment-author { justify-content: flex-start; } }
.comment-avatar { margin-right: 0; flex: 0 0 auto; }
.comment-meta { flex: 1 1 auto; min-width: 0; }
.comment-meta > span a { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.comment-labels { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 768px) { .comment-labels { flex-basis: auto; } }
.comment-body { -webkit-hyphens: auto; hyphens: auto; word-break: break-word; display: flow-root; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 1.7; overflow-x: auto; color: var(--fg-soft); }
.comment-body a { color: var(--accent-green-lt); text-decoration: underline; text-underline-offset: 3px; }
.comment-body img { height: auto; max-width: 100%; border-radius: var(--r-sm); }
.comment-body ul, .comment-body ol { padding-left: 22px; list-style-position: outside; margin: 16px 0 16px 18px; }
[dir=rtl] .comment-body ul, [dir=rtl] .comment-body ol { padding-right: 22px; padding-left: 0; margin-left: 0; margin-right: 18px; }
.comment-body ul { list-style-type: disc; }
.comment-body ol { list-style-type: decimal; }
.comment-body blockquote { border-left: 3px solid var(--accent-green-lt); background: var(--glass-lo); padding: 14px 18px; margin: 18px 0; border-radius: 0 var(--r) var(--r) 0; }
.comment-body pre { background: #eef2f6; border: 1px solid var(--edge); border-radius: var(--r); padding: 14px 16px; overflow: auto; }
.comment-body :not(pre) > code { background: rgba(25,132,104,.16); border: 1px solid rgba(56,178,144,.28); border-radius: 5px; padding: .12em .42em; color: #38b290; }
.comment-form { display: flex; padding-top: 30px; word-wrap: break-word; gap: 16px; }
.comment-container { width: 100%; min-width: 0; }
.comment-form-controls { display: none; margin-top: 14px; text-align: left; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (min-width: 768px) { [dir=ltr] .comment-form-controls { justify-content: flex-end; } }
.comment-form-controls input[type=submit] { margin-top: 0; }
.comment-form-controls input[type=checkbox] { margin-right: 6px; accent-color: var(--accent-green); }
.comment-ccs { display: none; }
.comment-ccs + textarea { margin-top: 10px; }
.comment-attachments { margin-top: 12px; }
.comment-attachments a { color: var(--accent-green-lt); }
.comment-list { display: block; }
/* Comment vote / actions rail */
.comment-actions-container { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.vote, .comment-vote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--glass-lo);
  border: 1px solid var(--edge);
  border-radius: var(--pill);
  padding: 6px 4px;
}
.vote-up, .vote-down {
  background: none;
  border: 0;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  display: inline-flex;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.vote-up:hover, .vote-down:hover { color: var(--accent-green-lt); background: var(--glass-hi); }
.vote-up { transform: rotate(180deg); }
.vote-voted { color: var(--accent-green-lt); }
.vote-sum { font-size: 13px; font-weight: 700; color: var(--fg-soft); }
.actions { position: relative; }
.actions button, .comment-actions button {
  background: none;
  border: 0;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
}
.actions button:hover { color: var(--ink); background: var(--glass-hi); }
.community-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  color: var(--fg-soft);
}
.community-badge-titles, .community-badge-achievements { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.community-badge-achievement { padding: 0; border: 0; background: none; }
.community-badge-achievement img { width: 20px; height: 20px; }
/* ============================================================
   COMMUNITY / RECENT ACTIVITY
   ============================================================ */
.community, .activity { border-top: 1px solid var(--edge); padding: 40px 0; text-align: center; }
.community-image {
  min-height: 280px;
  margin-top: 28px;
  background-image: url(/hc/theming_assets/01JM2YYNNFS0DNM36PMMNZYCR1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid var(--edge);
  filter: saturate(.7) brightness(.72);
}
.community a { color: var(--accent-green-lt); }
.recent-activity-header { margin-bottom: 18px; text-align: center; }
.recent-activity-list { padding: 0; display: grid; gap: 10px; }
.recent-activity-item {
  border: 1px solid var(--edge);
  background: var(--glass-lo);
  border-radius: var(--r);
  overflow: auto;
  padding: 18px 20px;
}
.recent-activity-item h3 { margin: 0; }
.recent-activity-item-parent { font-size: 15px; font-weight: 650; color: var(--fg-mute); }
.recent-activity-item-link { font-size: 15px; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.recent-activity-item-meta { color: var(--fg-mute); margin: 10px 0 0; float: none; display: flex; gap: 14px; }
@media (min-width: 768px) { .recent-activity-item-meta { margin: 0; float: right; } [dir=rtl] .recent-activity-item-meta { float: left; } }
.recent-activity-item-time, .recent-activity-item-comment { display: inline-block; font-size: 13px; }
.recent-activity-controls { padding-top: 18px; text-align: center; }
.recent-activity-controls a { color: var(--accent-green-lt); font-weight: 600; }
.recent-activity-comment-icon svg { vertical-align: middle; color: var(--accent-green-lt); width: 16px; height: 16px; }
.recent-activity-comment-icon:after { content: attr(data-comment-count); margin-left: 4px; }
/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notification, .flash-notification, [role=alert] .notification {
  border-radius: var(--r);
  padding: 15px 18px;
  margin-bottom: 18px;
  font-size: 14.5px;
  border: 1px solid var(--edge);
  background: var(--glass);
  color: var(--fg);
}
.notification-error, .notification-alert {
  background: rgba(232, 90, 90, .10);
  border-color: rgba(232, 90, 90, .38);
  color: #F2A2A2;
}
.notification-success { background: rgba(25,132,104,.14); border-color: rgba(25,132,104,.38); color: var(--accent-green-lt); }
.notification-notice, .notification-info { background: rgba(71,162,157,.10); border-color: rgba(71,162,157,.38); color: #6FCAC4; }
.notification a { color: inherit; text-decoration: underline; }
/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  border-top: 0;
  margin-top: clamp(60px, 9vw, 110px);
  padding: 40px 0;
  background: var(--deck-100);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
/* Top rule: brand green at the centre, fading to black at both edges */
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--brand-rule);
  opacity: 1;
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer a { color: var(--fg-mute); font-size: 14px; }
.footer a:hover { color: var(--fg); }
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg-mute); }
.footer-brand a { display: inline-block; line-height: 0; }
/* Footer wordmark. brightness(0) invert(1) forces flat white whatever the
   SVG's own fills say - same guard as the header logo. */
.footer-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .96;
  transition: opacity var(--fast) var(--ease);
}
.footer-brand a:hover .footer-logo { opacity: 1; }
/***** Policy links *****/
.footer-policies {
  max-width: var(--shell);
  margin: 30px auto 0;
  padding: 0 clamp(18px, 4vw, 40px);
}
.footer-policies-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.footer-policy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-policy-list a {
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  transition: color var(--fast) var(--ease);
}
.footer-policy-list a:hover,
.footer-policy-list a:focus { color: var(--accent-green-lt); text-decoration: none; }
/***** Copyright *****/
.footer-legal {
  max-width: var(--shell);
  margin: 28px auto 0;
  padding: 18px clamp(18px, 4vw, 40px) 0;
  border-top: 1px solid var(--edge);
}
.footer-legal small {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-quiet);
}
.powered-by-zendesk a, .powered-by-zendesk a:visited { color: var(--fg-quiet); font-size: 12.5px; }
/* ============================================================
   MISC ZENDESK COMPONENTS
   ============================================================ */
.satisfaction, .satisfaction-block {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 24px;
  color: var(--fg-soft);
}
.satisfaction a { color: var(--accent-green-lt); font-weight: 600; }
/* WYSIWYG editor shell */
.comment-container [data-garden-id],
.wysiwyg-container, .ck-editor__editable {
  background: #ffffff !important;
  color: var(--fg) !important;
  border-color: var(--edge) !important;
  border-radius: var(--r-sm) !important;
}
.ck.ck-toolbar {
  background: var(--glass-hi) !important;
  border-color: var(--edge) !important;
}
.ck.ck-button { color: var(--fg-soft) !important; }
.ck.ck-button:hover { background: var(--glass-hi) !important; color: var(--ink) !important; }
/* ---- Description field: force typed text white -------------------------
   CKEditor ships its own content stylesheet that paints paragraphs, lists
   and headings a dark colour. Those rules sit ON the child elements, so
   they beat anything inherited from the editable wrapper - the wrapper has
   to be recoloured AND the children told to inherit it.
   The --ck-* custom properties cover CKEditor 5; the element overrides
   cover CKEditor 4 and any plain contenteditable fallback. */
.ck.ck-editor,
.ck.ck-editor__main,
.ck.ck-editor__editable,
.ck-body-wrapper {
  --ck-color-text: #002f42;
  --ck-color-base-text: #002f42;
  --ck-color-base-foreground: #002f42;
  --ck-color-editable-blur-selection: rgba(25,132,104,.28);
}
.ck.ck-editor__editable,
.ck-editor__editable,
.ck-content,
.wysiwyg-container [contenteditable="true"],
[data-garden-id="forms.textarea"],
textarea.request-description {
  color: var(--ink) !important;
  caret-color: var(--ink) !important;
}
/* Children inherit instead of using CKEditor's own dark content colours */
.ck.ck-editor__editable *:not(a):not(code),
.ck-content *:not(a):not(code),
.wysiwyg-container [contenteditable="true"] *:not(a):not(code) {
  color: inherit !important;
}
.ck.ck-editor__editable a,
.ck-content a { color: var(--accent-green-lt) !important; }
.ck.ck-editor__editable code,
.ck-content code { color: var(--accent-green-lt) !important; background: rgba(25,132,104,.16) !important; }
.ck.ck-editor__editable.ck-blurred ::selection,
.ck.ck-editor__editable.ck-focused ::selection { background: rgba(25,132,104,.45); color: #fff; }
/* The greyed prompt CKEditor shows in an empty field */
.ck.ck-placeholder::before,
.ck .ck-placeholder::before { color: var(--fg-quiet) !important; }
/* Summary component */
.summary-component, [data-summary] {
  background: var(--glass);
  border: 1px solid rgba(71,162,157,.30);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 24px;
}
/* Zendesk modal container safety */
#zd-modal-container { color: var(--fg); }
/* ============================================================
   ENTRANCE MOTION
   ============================================================ */
@keyframes deck-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-inner > *,
.categories > .category-item,
.sections > .section-item,
.video-row > .video-wrapper {
  animation: deck-rise .6s var(--ease) both;
}
.hero-inner > *:nth-child(2) { animation-delay: .05s; }
.hero-inner > *:nth-child(3) { animation-delay: .10s; }
.hero-inner > *:nth-child(4) { animation-delay: .15s; }
.hero-inner > *:nth-child(5) { animation-delay: .20s; }
.categories > .category-item:nth-child(1), .sections > .section-item:nth-child(1), .video-row > .video-wrapper:nth-child(1) { animation-delay: .04s; }
.categories > .category-item:nth-child(2), .sections > .section-item:nth-child(2), .video-row > .video-wrapper:nth-child(2) { animation-delay: .08s; }
.categories > .category-item:nth-child(3), .sections > .section-item:nth-child(3), .video-row > .video-wrapper:nth-child(3) { animation-delay: .12s; }
.categories > .category-item:nth-child(4), .sections > .section-item:nth-child(4) { animation-delay: .16s; }
.categories > .category-item:nth-child(5), .sections > .section-item:nth-child(5) { animation-delay: .20s; }
.categories > .category-item:nth-child(6), .sections > .section-item:nth-child(6) { animation-delay: .24s; }
.categories > .category-item:nth-child(n+7), .sections > .section-item:nth-child(n+7) { animation-delay: .28s; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .header { height: 68px; }
  .nav-wrapper-mobile .menu-list-mobile { top: 68px; }
  .logo img { height: 32px; min-width: 92px; }
  .hero { padding: 52px 0 46px; }
  .search-full input[type=search] { height: 54px; font-size: 16px; }
  .categories, .sections { grid-template-columns: 1fr; gap: 14px; }
  .category-link, .section-link { padding: 14px 16px; column-gap: 14px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-logo { width: 150px; }
  .footer-policy-list { flex-direction: column; gap: 10px; }
  .article-votes { padding: 22px 18px; }
  .comment-wrapper { flex-direction: column; }
  .comment-actions-container { flex-direction: row; align-self: flex-start; }
  .vote, .comment-vote { flex-direction: row; padding: 4px 8px; }
  .vote-up { transform: rotate(90deg); }
  .vote-down { transform: rotate(-90deg); }
  .table thead { display: none; }
  .table td { border-bottom: 0; padding: 4px 18px; }
  .table tbody tr { border: 1px solid var(--edge); border-radius: var(--r); margin-bottom: 10px; padding: 14px 0; }
  .requests-table-status, .requests-table td:nth-child(2), .requests-table td:nth-child(3), .requests-table td:nth-child(4) { display: none; }
}
@media (max-width: 1023px) {
  .article-sidebar { position: static; max-height: none; }
  .search-results-sidebar { position: static; }
}
/* Wide screens get a little more air */
@media (min-width: 1440px) {
  :root { --shell: 1320px; }
}
/* ============================================================
   ACCESSIBILITY & FALLBACKS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .category-item:hover, .section-item:hover, .video-wrapper:hover,
  .search-results-list > li:hover, .button:hover, .button-large:hover { transform: none; }
}
/* If backdrop-filter is unsupported, fall back to solid tinted panels.
   Excluded on purpose: .topbar and the mobile menu (already opaque brand
   navy) and the icon cards (.category-item / .section-item, now opaque
   light grey) - re-tinting any of them here would undo their colour. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .blocks-item,
  .video-wrapper, .article-list li, .search-results-list > li,
  .search, .dropdown-menu, .request-sidebar, .article-votes {
    background: #ffffff;
  }
  .hero .search { background: #0b3146; }
}
/* Windows high-contrast */
@media (forced-colors: active) {
  .category-item, .section-item, .search, .button, .button-large { border: 1px solid CanvasText; }
}
/* Print */
@media print {
  body { background: #fff; color: #000; }
  body::before, .topbar, .footer, .article-sidebar,
  .search-container, .sub-nav, .article-votes, .article-relatives,
  .hero::before, .hero::after { display: none !important; }
  .article, .container { max-width: 100%; padding: 0; }
  .article-body, .article-body a { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}