@charset "UTF-8";
/*
 * Fortis Help Center — Zendesk Guide Theme
 * Colors : Green #3CBB6B | Navy #021C43 | White #FFFFFF | BG #F4F6FA
 * Font   : Inter (Google Fonts)
 * v2 — class names corrected to match actual .hbs templates
 */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Normalize ────────────────────────────────────────────── */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: .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 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: -.25em; } sup { top: -.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; }
fieldset { padding: .35em .75em .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="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; }

/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  background-color: #F4F6FA;
  color: #1E293B;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #021C43;
  margin-top: 0;
  font-weight: 600;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

a { color: rgba(2, 28, 67, 1); text-decoration: none; }
a:visited { color: rgba(2, 28, 67, 1); }
a:hover, a:active, a:focus { text-decoration: underline; }

ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
@media (min-width: 1160px) { .container { padding: 0; width: 90%; } }

.container-divider { display: none; }

.error-page { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

.visibility-hidden {
  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;
}

/* ── Form inputs ──────────────────────────────────────────── */
.hbs-form input,
.hbs-form textarea,
.search input,
.search textarea {
  color: #021C43;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

.hbs-form input,
.search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border .12s ease-in-out;
}

.hbs-form input:where(:not([type="checkbox"])),
.search input:where(:not([type="checkbox"])) { outline: none; }

.hbs-form input:where(:not([type="checkbox"])):focus,
.search input:where(:not([type="checkbox"])):focus { border: 1px solid rgba(2, 28, 67, 1); }

.hbs-form input[disabled], .search input[disabled] { background-color: #EDF0F5; }

.hbs-form select, .search select {
  -webkit-appearance: none; -moz-appearance: none;
  background: 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='%23CBD5E0' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") no-repeat #fff;
  background-position: right 10px center;
  border: 1.5px solid #CBD5E0; border-radius: 8px;
  padding: 9px 30px 9px 12px; outline: none; color: #4A5568; width: 100%;
}

.hbs-form select:focus, .search select:focus { border-color: rgba(2, 28, 67, 1); }

.hbs-form textarea, .search textarea {
  border: 1.5px solid #CBD5E0; border-radius: 8px;
  resize: vertical; width: 100%; outline: none; padding: 10px 14px;
}

.hbs-form textarea:focus, .search textarea:focus { border-color: rgba(2, 28, 67, 1); }

/* ── Skip navigation ──────────────────────────────────────── */
.skip-navigation {
  align-items: center; background: #021C43; color: #fff; display: flex;
  font-size: 14px; justify-content: center; left: -999px; margin: 20px;
  padding: 20px; overflow: hidden; position: absolute; top: auto; z-index: -999;
}

.skip-navigation:focus, .skip-navigation:active {
  left: auto; overflow: auto; text-align: center;
  text-decoration: none; top: auto; z-index: 999;
}

/* ══════════════════════════════════════════════════════════
   HEADER  —  white bar, dark nav links, bottom border
══════════════════════════════════════════════════════════ */
.header {
  background: #021C43;
  border-bottom: 1px solid rgba(255,255,255,.08);
  max-width: 100%;
  margin: 0;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (min-width: 1160px) {
  .header { padding: 0 5%; }
}

/* Logo — invert to white so any coloured/dark logo shows white */
.logo img {
  max-height: 32px;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

.logo span {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.5px;
  margin: 0 10px;
}

.logo a { display: inline-flex; align-items: center; }
.logo a:hover, .logo a:focus, .logo a:active { text-decoration: none; }

/* Desktop nav */
.nav-wrapper-desktop {
  display: none;
  align-items: center;
  gap: 0;
  flex: 1;
}

@media (min-width: 1024px) {
  .nav-wrapper-desktop { display: inline-flex; }
}

.nav-wrapper-desktop a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: 0 14px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
  width: auto;
}

.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  color: #ffffff;
  text-decoration: none;
  background-color: transparent;
}

/* Submit a request — green pill */
.nav-wrapper-desktop .submit-a-request,
.submit-a-request {
  background: rgba(2, 28, 67, 1) !important;
  color: rgba(250, 250, 250, 1) !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin-left: 8px;
  transition: background .15s !important;
}

.nav-wrapper-desktop .submit-a-request:hover,
.submit-a-request:hover {
  background: #2fa55c !important;
  text-decoration: none !important;
}

/* User nav list */
.user-nav { display: inline-block; position: relative; white-space: nowrap; }
.user-nav-list { display: block; list-style: none; }
.user-nav-list > li { display: inline-block; }

/* User info dropdown button — white text on dark header */
.user-info { display: inline-block; }

.user-info > button,
.user-info .dropdown-toggle {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.user-info > button:hover,
.user-info > button:focus,
.user-info .dropdown-toggle:hover {
  color: #ffffff;
  background: rgba(255,255,255,.10);
}

.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  border: 1.5px solid rgba(255,255,255,.25);
}

.avatar { display: inline-block; position: relative; }
.avatar img { height: 40px; width: 40px; border-radius: 50%; }

/* Dropdown menu — stays white/light regardless of header colour */
.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 6px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  z-index: 200;
  display: none;
}

.dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display: block; }

.dropdown-menu a,
.dropdown-menu [role="menuitem"],
.nav-wrapper-desktop .dropdown-menu a,
.nav-wrapper-desktop .dropdown-menu [role="menuitem"] {
  display: block; padding: 9px 16px;
  font-size: 14px; color: #2D3748 !important; font-weight: 400;
  transition: background .1s;
}

.dropdown-menu a:hover,
.dropdown-menu [role="menuitem"]:hover,
.nav-wrapper-desktop .dropdown-menu a:hover,
.nav-wrapper-desktop .dropdown-menu [role="menuitem"]:hover {
  background: #F4F6FA; text-decoration: none; color: #021C43 !important;
}

.dropdown-menu .separator { border-top: 1px solid #E2E8F0; margin: 6px 0; }

/* Chevron white on dark header */
.dropdown-chevron-icon { color: rgba(255,255,255,.5); transition: transform .2s; }
.dropdown-toggle[aria-expanded="true"] .dropdown-chevron-icon { transform: rotate(180deg); }

/* Mobile nav hamburger — white icon on dark header */
@media (min-width: 1024px) { .nav-wrapper-mobile { display: none; } }

.nav-wrapper-mobile .menu-button-mobile {
  background: none; border: 0; width: auto;
  min-width: 44px; cursor: pointer; color: rgba(255,255,255,.8);
}

.nav-wrapper-mobile .menu-list-mobile {
  position: absolute; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid #E2E8F0;
  border-radius: 0 0 10px 10px;
  right: 0; left: 0; top: 64px; z-index: 200;
}

.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 a,
.nav-wrapper-mobile .menu-list-mobile-items button {
  display: block; padding: 11px 24px; width: 100%;
  color: #2D3748; font-size: 14px; font-weight: 500;
  background: none; border: none; cursor: pointer; text-align: start;
}

.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background: #F4F6FA; text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   HERO  —  white bg, centered search
   Template class: .home-hero / .home-hero-inner
══════════════════════════════════════════════════════════ */
.home-hero {
  background: #ffffff;
  border-bottom: 1px solid #E2E8F0;
  padding: 56px 40px 60px;
  text-align: center;
  width: 100%;
}

.home-hero-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.home-hero-title {
  font-size: 36px;
  font-weight: 700;
  color: #021C43;
  letter-spacing: -.5px;
  margin-bottom: 24px;
  line-height: 1.2;
}

/* Search wrapper inside hero */
.home-hero-search {
  max-width: 560px;
  margin: 0 auto;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.home-hero-search:focus-within {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 0 0 3px rgba(60,187,107,.12);
}

.home-hero-search .search {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
  background: transparent !important;
}

.home-hero-search .search:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.home-hero-search .search input[type="search"] {
  width: 100%;
  height: 52px;
  border: none;
  padding: 0 16px 0 44px;
  font-size: 15px;
  color: #021C43;
  background: transparent;
  outline: none;
}

.home-hero-search .search input[type="search"]::placeholder { color: #A0AEC0; }

.home-hero-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #A0AEC0;
  pointer-events: none;
  z-index: 1;
}

/* ── Hero search SUBMIT button (green magnifier) ─────────────
   Zendesk renders this as <input type="submit" name="commit"
   value="Search"> — NOT a <button>. We strip all browser
   appearance, hide the "Search" text with color:transparent,
   and paint the magnifier via background-image.
──────────────────────────────────────────────────────────── */
.home-hero-search .search-submit,
.home-hero-search input[type="submit"],
.home-hero input[type="submit"],
.home-hero-inner input[type="submit"] {
  /* Strip browser input styling */
  -webkit-appearance: none;
  appearance: none;
  /* Layout */
  display: inline-block;
  flex-shrink: 0;
  width: 46px;
  min-width: 46px;
  height: 44px;
  margin: 4px 4px 4px 0;
  padding: 0;
  /* Default: green */
  background-color: #3CBB6B;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  /* Hide "Search" value text */
  color: transparent;
  font-size: 0;
  /* Magnifier icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Hover: dark navy */
.home-hero-search input[type="submit"]:hover,
.home-hero input[type="submit"]:hover,
.home-hero-inner input[type="submit"]:hover,
.home-hero-search .search-submit:hover { background-color: #021C43; }

.home-hero-search input[type="submit"]:focus,
.home-hero input[type="submit"]:focus,
.home-hero-search .search-submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(60,187,107,.25); }

/* Hide any SVG Zendesk might inject inside the button */
.home-hero-search .search-submit svg { display: none; }

/* ── HOME TOPICS SECTION ──────────────────────────────────── */
.home-topics {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 40px 64px;
}

@media (min-width: 1160px) {
  .home-topics { width: 90%; padding: 48px 0 64px; }
}

.home-topics-header {
  margin-bottom: 24px;
}

.home-topics-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #021C43;
  margin: 0;
}

/* ── TOPIC GRID (category cards) ─────────────────────────── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 24px;
  color: #2D3748;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  gap: 8px;
}

.topic-card:hover,
.topic-card:focus {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 4px 20px rgba(60,187,107,.12);
  transform: translateY(-2px);
  text-decoration: none;
  color: #021C43;
}

.topic-card:visited { color: #2D3748; }

/* ── TOPIC CARD ICONS — SVG via background-image ─────────────
   The template writes data-topic="{{name}}" on each .topic-card
   so we can target real category names with attribute selectors.
   Default (fallback): file/document icon, brand green.
──────────────────────────────────────────────────────────── */
.topic-card-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: rgba(60,187,107,.12);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  /* Default: document icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233CBB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* Internal Procedures — clipboard, green */
.topic-card[data-topic*="Internal"] .topic-card-icon,
.topic-card[data-topic*="Procedure"] .topic-card-icon {
  background-color: rgba(60,187,107,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233CBB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/* Your Fortis Account — user, orange */
.topic-card[data-topic*="Account"] .topic-card-icon,
.topic-card[data-topic*="Profile"] .topic-card-icon {
  background-color: rgba(245,158,11,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Inventory & Catalog — package, purple */
.topic-card[data-topic*="Inventory"] .topic-card-icon,
.topic-card[data-topic*="Catalog"] .topic-card-icon {
  background-color: rgba(139,92,246,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238B5CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}

/* Fortis F&B — coffee cup, red */
.topic-card[data-topic*="F&B"] .topic-card-icon,
.topic-card[data-topic*="Food"] .topic-card-icon,
.topic-card[data-topic*="Restaurant"] .topic-card-icon,
.topic-card[data-topic*="Beverage"] .topic-card-icon {
  background-color: rgba(239,68,68,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cline x1='6' y1='1' x2='6' y2='4'/%3E%3Cline x1='10' y1='1' x2='10' y2='4'/%3E%3Cline x1='14' y1='1' x2='14' y2='4'/%3E%3C/svg%3E");
}

/* Loyalty Program — star, amber */
.topic-card[data-topic*="Loyalty"] .topic-card-icon,
.topic-card[data-topic*="Reward"] .topic-card-icon,
.topic-card[data-topic*="Program"] .topic-card-icon {
  background-color: rgba(245,158,11,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* Sales & Reports — bar chart, blue */
.topic-card[data-topic*="Sales"] .topic-card-icon,
.topic-card[data-topic*="Report"] .topic-card-icon,
.topic-card[data-topic*="Analytics"] .topic-card-icon {
  background-color: rgba(59,130,246,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

/* Terminal Troubleshooting — wrench, indigo */
.topic-card[data-topic*="Terminal"] .topic-card-icon,
.topic-card[data-topic*="Troubleshooting"] .topic-card-icon {
  background-color: rgba(99,102,241,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* FAQs — help circle, teal */
.topic-card[data-topic*="FAQ"] .topic-card-icon,
.topic-card[data-topic*="Help"] .topic-card-icon,
.topic-card[data-topic*="Question"] .topic-card-icon {
  background-color: rgba(20,184,166,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314B8A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Table Pay — QR code, green */
.topic-card[data-topic*="Table Pay"] .topic-card-icon {
  background-color: rgba(60,187,107,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233CBB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E");
}

/* nth-child fallback colors for any other categories */
.topic-grid .topic-card:nth-child(6n+2):not([data-topic*="Account"]):not([data-topic*="Profile"]) .topic-card-icon { background-color: rgba(59,130,246,.12); }
.topic-grid .topic-card:nth-child(6n+3):not([data-topic*="Inventory"]):not([data-topic*="Catalog"]) .topic-card-icon { background-color: rgba(245,158,11,.12); }
.topic-grid .topic-card:nth-child(6n+4):not([data-topic*="F&B"]) .topic-card-icon { background-color: rgba(139,92,246,.12); }
.topic-grid .topic-card:nth-child(6n+5):not([data-topic*="Loyalty"]) .topic-card-icon { background-color: rgba(239,68,68,.12); }
.topic-grid .topic-card:nth-child(6n+6):not([data-topic*="Technical"]) .topic-card-icon { background-color: rgba(20,184,166,.12); }

.topic-card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #021C43;
  line-height: 1.3;
}

.topic-card:hover .topic-card-title { color: rgba(2, 28, 67, 1); }

.topic-card-count {
  display: block;
  font-size: 13px;
  color: #718096;
  line-height: 1.4;
}
/* Customers — two-people icon, brand green */
.topic-card[data-topic*="Customer"] .topic-card-icon {
  background-color: rgba(60,187,107,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233CBB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
/* ══════════════════════════════════════════════════════════
   POPULAR ARTICLES (home page)
══════════════════════════════════════════════════════════ */
.popular-articles {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px 48px;
}

@media (min-width: 1160px) {
  .popular-articles { width: 90%; padding: 0 0 48px; }
}

.popular-articles-header {
  margin-bottom: 16px;
}

.popular-articles-header h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #A0AEC0;
  margin: 0;
}

.popular-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #E2E8F0;
}

.popular-article-item {
  border-bottom: 1px solid #E2E8F0;
}

.popular-article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  gap: 20px;
  text-decoration: none;
  transition: color .15s;
}

.popular-article-link:hover { text-decoration: none; }

.popular-article-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #2D3748;
  line-height: 1.4;
}

.popular-article-title::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(2, 28, 67, 1);
  flex-shrink: 0;
}

.popular-article-link:hover .popular-article-title { color: rgba(2, 28, 67, 1); }

/* Colored label badges (Setup, Payments, Reports, etc.) */
.popular-article-label {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(60,187,107,.12);
  color: rgba(2, 28, 67, 1);
}

/* Give each label a different color based on text content */
.popular-article-label[data-label="Payments"],
.popular-article-label[data-label="Payment"] {
  background: rgba(245,158,11,.12); color: #D97706;
}
.popular-article-label[data-label="Reports"],
.popular-article-label[data-label="Analytics"] {
  background: rgba(59,130,246,.12); color: #2563EB;
}
.popular-article-label[data-label="Setup"],
.popular-article-label[data-label="Getting Started"] {
  background: rgba(60,187,107,.12); color: #16A34A;
}
.popular-article-label[data-label="Inventory"] {
  background: rgba(139,92,246,.12); color: #7C3AED;
}
.popular-article-label[data-label="Support"] {
  background: rgba(99,102,241,.12); color: #4F46E5;
}

/* ── Search field (sub-pages) ─────────────────────────────── */
.search {
  border: 1.5px solid #CBD5E0;
  border-radius: 8px;
  display: flex;
  position: relative;
  transition: border-color .15s;
  background: #ffffff;
}

.search:focus-within {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 0 0 3px rgba(60,187,107,.10);
}

.search input[type="search"],
.search .clear-button {
  background-color: transparent;
  border-radius: 8px;
  border: none;
}

.search input[type="search"] {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; color: #021C43;
  flex: 1 1 auto; height: 40px; width: 100%;
  font-size: 14px; outline: none;
}

.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 .clear-button {
  align-items: center; box-sizing: border-box;
  color: #A0AEC0; cursor: pointer;
  display: none; flex: none;
  justify-content: center; padding: 0 12px;
}

.search .clear-button:hover { color: rgba(2, 28, 67, 1); }
.search-has-value .clear-button { display: flex; }

[dir="ltr"] .search input[type="search"] { padding-left: 42px; padding-right: 16px; }
[dir="rtl"] .search input[type="search"] { padding-left: 16px; padding-right: 42px; }

.search-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 14px; z-index: 1; width: 16px; height: 16px;
  color: #A0AEC0; pointer-events: none;
}

[dir="rtl"] .search-icon { left: auto; right: 14px; }

/* ── Sub-nav (breadcrumb + search bar on inner pages) ─────── */
.sub-nav {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 12px 24px; margin-bottom: 32px; padding-top: 8px;
}

@media (min-width: 768px) { .sub-nav { flex-direction: row; } }

.sub-nav .breadcrumbs { margin: 0; }
.sub-nav .search-container { max-width: 280px; width: 100%; }
@media (min-width: 768px) { .sub-nav .search-container { flex: 0 1 280px; } }

/* ══════════════════════════════════════════════════════════
   BREADCRUMBS
══════════════════════════════════════════════════════════ */
.breadcrumbs {
  display: flex; align-items: center;
  flex-wrap: wrap; margin: 0 0 15px; padding: 0; gap: 0;
}

@media (min-width: 768px) { .breadcrumbs { margin: 0; } }

.breadcrumbs li {
  font-size: 13px; color: #718096;
  max-width: 350px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.breadcrumbs li a { color: #718096; transition: color .15s; }
.breadcrumbs li a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: #CBD5E0; }

/* ══════════════════════════════════════════════════════════
   PAGE HEADER (category page)
══════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 32px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

/* Colored icon box before the category title */
.page-header::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background-color: rgba(60,187,107,.12);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233CBB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  margin-top: 2px;
}

.page-header-text {
  flex: 1;
}

.page-header h1 {
  font-size: 22px; font-weight: 700; color: #021C43;
  margin: 0 0 4px;
}

.page-header-description {
  font-size: 14px; color: #718096; font-style: normal;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CATEGORY PAGE
══════════════════════════════════════════════════════════ */
.category-container { display: flex; justify-content: flex-end; gap: 40px; }

.category-content { flex: 1; max-width: 100%; }
@media (min-width: 1024px) { .category-content { flex: 0 0 80%; } }

.section-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .section-tree { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Each section as a white card */
.section-tree .section {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
  margin: 0;
  transition: border-color .2s, box-shadow .2s;
}

.section-tree .section:hover {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 4px 16px rgba(60,187,107,.08);
}

/* Single section — span both columns so it fills the full width */
.section-tree .section:only-child {
  grid-column: 1 / -1;
}

.section-tree-title {
  font-size: 15px;
  font-weight: 700;
  color: #021C43;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #F0F4F8;
}

.section-tree-title a { color: #021C43; transition: color .15s; }
.section-tree-title a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.article-list { padding: 0; }

.article-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 14px;
  border-bottom: 1px solid #F0F4F8;
}

.article-list-item:last-child { border-bottom: none; padding-bottom: 0; }

.article-list-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(2, 28, 67, 1); flex-shrink: 0;
}

.article-list-item a,
.article-list-link { color: #4A5568; transition: color .15s; flex: 1; }
.article-list-item a:hover,
.article-list-link:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.section-tree .see-all-articles {
  display: inline-block; padding: 6px 0;
  font-size: 13px; font-weight: 500; color: rgba(2, 28, 67, 1);
}

.icon-star { color: rgba(2, 28, 67, 1); font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   SECTION PAGE
   Template: .section-header / .section-articles / .section-article-card
══════════════════════════════════════════════════════════ */
.section-header {
  margin-bottom: 28px;
}

.section-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #718096;
  margin-bottom: 12px;
  transition: color .15s;
}

.section-back:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.section-title {
  font-size: 26px;
  font-weight: 700;
  color: #021C43;
  margin: 0;
}

.section-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 0 0 32px;
  list-style: none;
}

@media (min-width: 768px) {
  .section-articles { grid-template-columns: 1fr 1fr; gap: 14px; }
}

.section-article-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}

.section-article-card:hover {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 4px 16px rgba(60,187,107,.10);
}

.section-article-card a {
  display: block;
  padding: 20px 24px;
  color: #2D3748;
  text-decoration: none;
}

.section-article-card a:hover { text-decoration: none; color: #021C43; }

.section-article-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #021C43;
  margin: 0 0 6px;
  line-height: 1.4;
}

.section-article-card p {
  font-size: 13px;
  color: #718096;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-container { display: flex; justify-content: flex-end; }
.section-content { flex: 1; max-width: 100%; }
@media (min-width: 1024px) { .section-content { flex: 0 0 80%; } }

/* ══════════════════════════════════════════════════════════
   SIDEBAR (article & section pages)
══════════════════════════════════════════════════════════ */
.article-sidebar {
  border-bottom: 1px solid #E2E8F0;
  flex: 1 0 auto; margin-bottom: 20px; padding: 0;
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    border-right: 1px solid #E2E8F0;
    flex: 0 0 220px;
    max-width: 220px;
    padding-right: 24px;
    height: auto;
  }
}

.collapsible-sidebar { margin-bottom: 20px; }

.collapsible-sidebar-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #A0AEC0; margin-bottom: 12px;
}

.sidenav-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #A0AEC0; margin-bottom: 12px; position: relative;
}

.sidenav-item {
  display: block; margin-bottom: 2px;
  font-size: 13px; color: #4A5568;
  padding: 7px 10px; border-radius: 6px;
  transition: background .15s, color .15s;
  overflow: hidden; text-overflow: ellipsis;
}

.sidenav-item:hover { background: #F4F6FA; color: #021C43; text-decoration: none; }

.sidenav-item.current-article,
.sidenav-item.current {
  background: rgba(60,187,107,.10);
  color: rgba(2, 28, 67, 1); font-weight: 600;
}

.collapsible-sidebar-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0; display: flex; align-items: center; color: #718096;
}

.collapsible-sidebar-toggle-icon { display: none; }
.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon { display: inline-block; }
.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon { display: inline-block; }
.collapsible-sidebar-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(60,187,107,.2); border-radius: 4px; }

.collapsible-sidebar-body { padding-top: 8px; }

/* ══════════════════════════════════════════════════════════
   ARTICLE PAGE
══════════════════════════════════════════════════════════ */
.article-container {
  display: flex; flex-direction: column;
}

@media (min-width: 1024px) { .article-container { flex-direction: row; } }

.article { flex: 1 0 auto; }

@media (min-width: 1024px) {
  .article { flex: 1 0 66%; max-width: 66%; min-width: 580px; padding: 0 40px; }
}

.article-header {
  align-items: flex-start; display: flex;
  flex-direction: column; flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 28px; margin-top: 8px;
  padding-bottom: 24px; border-bottom: 1px solid #E2E8F0;
}

@media (min-width: 768px) { .article-header { flex-direction: row; margin-top: 0; } }

.article-title {
  font-size: 26px; font-weight: 700; color: #021C43;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; margin-bottom: 16px;
}

@media (min-width: 768px) { .article-title { flex-basis: 100%; } }

.article-author { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.article-avatar { margin-right: 4px; }
.article-meta { display: inline-block; vertical-align: middle; }

.meta-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-data { font-size: 13px; color: #718096; }

.article-content { line-height: 1.75; margin: 28px 0; word-wrap: break-word; }

.article-body { display: flow-root; font-size: 15px; }
.article-body a { color: rgba(2, 28, 67, 1); text-decoration: underline; }
.article-body a:visited { color: rgba(2, 28, 67, 1); }
.article-body a:hover { color: #2fa55c; }

.article-body h2 { font-size: 20px; margin-top: 32px; margin-bottom: 12px; }
.article-body h3 { font-size: 16px; margin-top: 24px; margin-bottom: 8px; }

.article-body img { height: auto; max-width: 100%; border-radius: 6px; }

.article-body ul, .article-body ol {
  padding-left: 20px; list-style-position: outside; margin: 14px 0 18px 20px;
}

.article-body ul { list-style-type: disc; }

.article-body :not(pre) > code {
  background: #F0F4F8; border: 1px solid #E2E8F0;
  border-radius: 4px; padding: 1px 6px;
  font-size: 13px; color: #2D3748;
}

.article-body pre {
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 8px; padding: 16px 20px;
  overflow: auto; white-space: pre; font-size: 13px;
  line-height: 1.6; direction: ltr;
}

.article-body blockquote {
  border-left: 3px solid rgba(2, 28, 67, 1);
  background: #f0fdf4; color: #166534;
  border-radius: 0 8px 8px 0;
  padding: 12px 20px; margin: 18px 0;
}

.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 figure.image { display: table; margin: 0 auto; }
.article-body figure.image > img { display: block; width: 100%; }

.article-body figcaption {
  padding: 8px 0; font-size: 12px; text-align: center; color: #718096;
}

.article-footer {
  align-items: center; display: flex;
  justify-content: space-between;
  padding: 20px 0; border-top: 1px solid #E2E8F0;
}

/* Was this helpful */
.article-votes {
  border-top: 1px solid #E2E8F0;
  background: #F4F6FA; border-radius: 10px;
  padding: 28px; text-align: center; margin-top: 32px;
}

.article-votes-question {
  font-size: 15px; font-weight: 500;
  color: #021C43; margin-bottom: 16px;
}

.article-vote {
  margin: 0 6px; min-width: 110px; width: auto;
  border-radius: 6px; font-size: 14px; font-weight: 500;
}

.article-vote:hover {
  border-color: rgba(2, 28, 67, 1); color: rgba(2, 28, 67, 1); background: #fff;
}

.article-more-questions { margin: 16px 0; text-align: center; font-size: 14px; }
.article-more-questions a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

.article-return-to-top { border-top: 1px solid #E2E8F0; }
@media (min-width: 1024px) { .article-return-to-top { display: none; } }

.article-return-to-top a {
  color: #718096; display: flex; align-items: center;
  gap: 6px; padding: 16px 0; font-size: 13px; font-weight: 500;
}

.article-return-to-top a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }
.article-return-to-top-icon { transform: rotate(.5turn); }

.article-relatives {
  border-top: 1px solid #E2E8F0;
  display: flex; flex-direction: column; padding: 24px 0; gap: 20px;
}

@media (min-width: 768px) { .article-relatives { flex-direction: row; } }
.article-relatives > * { flex: 1 0 50%; min-width: 50%; }

.recent-articles li, .related-articles li { margin-bottom: 10px; }

.comment-heading,
.recent-articles-title,
.related-articles-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #A0AEC0; margin-bottom: 12px;
}

.recent-articles a, .related-articles a {
  font-size: 13px; color: #4A5568; transition: color .15s;
}

.recent-articles a:hover, .related-articles a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

/* Content tags */
.content-tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-top: 10px; }

.content-tag-item {
  background: #F0F4F8; border-radius: 20px;
  font-size: 12px; font-weight: 500; padding: 4px 12px;
  transition: background .15s;
}

.content-tag-item a { color: #4A5568; }
.content-tag-item:hover { background: rgba(60,187,107,.12); }
.content-tag-item:hover a { color: rgba(2, 28, 67, 1); text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE
══════════════════════════════════════════════════════════ */
.search-results {
  display: flex; flex-direction: column; gap: 32px; margin-top: 8px;
}

@media (min-width: 768px) { .search-results { flex-direction: row; } }

.search-results-sidebar { flex: 0 0 220px; max-width: 220px; }
@media (max-width: 767px) { .search-results-sidebar { max-width: 100%; } }

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

.search-results-subheading {
  font-size: 17px; font-weight: 600; color: #021C43; margin-bottom: 20px;
}

.search-results-list { padding: 0; }

.search-results-list li { margin-bottom: 12px; }

.search-results-list article {
  background: #ffffff; border: 1px solid #E2E8F0;
  border-radius: 10px; padding: 20px 24px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.search-results-list article:hover {
  border-color: rgba(2, 28, 67, 1);
  box-shadow: 0 2px 12px rgba(60,187,107,.10);
}

.search-result-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }

.search-result-title a { color: #021C43; transition: color .15s; }
.search-result-title a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.search-result-description { font-size: 13px; color: #718096; line-height: 1.6; margin: 0; }

.search-result-meta-container {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0; flex-wrap: wrap;
}

.search-result-breadcrumbs { display: flex; }
.search-result-breadcrumbs li { font-size: 12px; color: #A0AEC0; }
.search-result-breadcrumbs li + li::before { content: "›"; margin: 0 4px; color: #CBD5E0; }

.search-result-title-container { display: flex; align-items: flex-start; justify-content: space-between; }
.search-result-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.search-result-votes, .search-result-meta-count { font-size: 12px; color: #A0AEC0; display: flex; align-items: center; gap: 4px; }

/* Sidebar filters */
.filters-in-section { margin-bottom: 20px; }

.multibrand-filter-list { padding: 0; }
.multibrand-filter-list--collapsed li:nth-child(n+7) { display: none; }

.sidenav-tag { margin-bottom: 6px; }

.content-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(60,187,107,.1); color: rgba(2, 28, 67, 1);
  border-radius: 20px; font-size: 12px; font-weight: 600; padding: 4px 10px;
}

.see-all-filters {
  background: none; border: none; color: rgba(2, 28, 67, 1);
  font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 0;
}

/* No results */
.no-results { text-align: center; padding: 60px 20px; }
.no-results .headline { font-size: 18px; font-weight: 600; color: #2D3748; margin: 20px 0 8px; }
.no-results .action-prompt { font-size: 14px; color: #718096; margin-bottom: 8px; }
.no-results .action-prompt a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; padding: 0; list-style: none; }

/* ══════════════════════════════════════════════════════════
   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: transparent;
  border: 1.5px solid rgba(2, 28, 67, 1);
  border-radius: 6px; color: rgba(2, 28, 67, 1);
  cursor: pointer; display: inline-block;
  font-size: 13px; font-weight: 500;
  line-height: 2.2; margin: 0; padding: 0 20px;
  text-align: center;
  transition: background .15s, color .15s;
  user-select: none; white-space: nowrap; width: 100%;
  font-family: 'Inter', sans-serif;
}

@media (min-width: 768px) {
  .button,
  .pagination-next-link,
  .pagination-prev-link,
  .pagination-first-link,
  .pagination-last-link { width: auto; }
}

.button:visited { color: rgba(2, 28, 67, 1); }

.button:hover, .button:active, .button:focus,
.button.button-primary,
.article-subscribe button[data-selected="true"],
.section-subscribe button[data-selected="true"] {
  background: rgba(2, 28, 67, 1); color: rgba(250, 250, 250, 1); text-decoration: none;
}

.button-large,
.hbs-form input[type="submit"] {
  cursor: pointer; background: rgba(2, 28, 67, 1);
  border: 0; border-radius: 6px;
  color: rgba(250, 250, 250, 1); font-size: 14px; font-weight: 600;
  line-height: 2.7; min-width: 140px; padding: 0 1.9em;
  width: 100%; transition: background .15s;
  font-family: 'Inter', sans-serif;
}

@media (min-width: 768px) { .button-large, .hbs-form input[type="submit"] { width: auto; } }

.button-large:hover, .button-large:active, .button-large:focus,
.hbs-form input[type="submit"]:hover { background: #2fa55c; text-decoration: none; }

.button-large[disabled], .hbs-form input[type="submit"][disabled] { background: #CBD5E0; }

.button-secondary {
  color: #4A5568; border: 1.5px solid #CBD5E0; background: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #021C43; border-color: #A0AEC0; background: #EDF0F5;
}

/* ══════════════════════════════════════════════════════════
   FOOTER  —  white, top border
══════════════════════════════════════════════════════════ */
.footer {
  background: #ffffff;
  border-top: 1px solid #E2E8F0;
  margin-top: 80px;
  padding: 28px 0;
}

.footer a { color: #718096; font-size: 13px; transition: color .15s; }
.footer a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

.footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 16px;
}

@media (min-width: 1160px) { .footer-inner { padding: 0; width: 90%; } }

.footer-language-selector button {
  color: #718096; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; background: none;
  border: 1px solid #E2E8F0; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; transition: border-color .15s;
}

.footer-language-selector button:hover { border-color: #A0AEC0; color: #2D3748; }

/* ══════════════════════════════════════════════════════════
   COMMENTS
══════════════════════════════════════════════════════════ */
.comment { border-bottom: 1px solid #E2E8F0; padding: 20px 0; }

.comment-overview {
  border-bottom: 1px solid #E2E8F0; border-top: 1px solid #E2E8F0; padding: 20px 0;
}

.comment-callout { color: #718096; display: inline-block; font-size: 13px; margin-bottom: 0; }
.comment-callout a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

.comment-form { display: flex; padding-top: 24px; word-wrap: break-word; }
.comment-container { width: 100%; }

.comment-form-controls { display: none; margin-top: 12px; }

.comment-body {
  font-size: 14px; line-height: 1.65; word-break: break-word;
  font-family: 'Inter', sans-serif; display: flow-root;
}

.comment-body a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

.comment-body ul, .comment-body ol {
  padding-left: 20px; list-style-position: outside; margin: 14px 0 18px 20px;
}

.comment-body ul { list-style-type: disc; }

.comment-body :not(pre) > code {
  background: #F0F4F8; border: 1px solid #E2E8F0; border-radius: 4px;
  padding: 1px 5px; font-size: 13px;
}

.comment-body pre {
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 8px; padding: 14px 18px; overflow: auto; font-size: 13px;
}

.comment-wrapper { display: flex; position: relative; }
.comment-info { min-width: 0; padding-right: 20px; width: 100%; }
.comment-author { align-items: flex-end; display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.comment-avatar { margin-right: 10px; }
.comment-meta { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════
   VOTES
══════════════════════════════════════════════════════════ */
.vote { display: flex; flex-direction: column; text-align: center; }
.vote-sum { color: #718096; display: block; margin: 3px 0; }
.vote-up svg { transform: scale(1, -1); }
.vote-up:hover, .vote-down:hover { color: rgba(2, 28, 67, 1); }

.vote-up, .vote-down {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; color: #A0AEC0;
  cursor: pointer; min-height: 35px; min-width: 35px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background .15s, color .15s;
}

.vote-up:hover, .vote-down:hover { background: #F0F4F8; }
.vote-voted { color: rgba(2, 28, 67, 1); }

/* ══════════════════════════════════════════════════════════
   STATUS LABELS
══════════════════════════════════════════════════════════ */
.status-label {
  background: #038153; border-radius: 4px; color: #fff;
  font-size: 11px; font-weight: 600; margin-right: 4px;
  padding: 3px 8px; vertical-align: middle;
  white-space: nowrap; display: inline-block; letter-spacing: .02em;
}

.status-label:hover { text-decoration: none; }
.status-label-pinned, .status-label-featured, .status-label-official { background: rgba(2, 28, 67, 1); }
.status-label-pending { background: #1f73b7; }
.status-label-open { background: #c72a1c; }
.status-label-solved { background: #68737d; }
.status-label-new { background: #ffb648; color: #703b15; }
.status-label-closed, .status-label-not-planned { background: #E2E8F0; color: #718096; }

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; border-spacing: 0; }
@media (min-width: 768px) { .table { table-layout: auto; } }

.table th, .table th a {
  color: #718096; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; text-align: left;
}

.table tr { border-bottom: 1px solid #E2E8F0; display: block; padding: 16px 0; }
@media (min-width: 768px) { .table tr { display: table-row; } }

.table td { display: block; }
@media (min-width: 768px) {
  .table td { display: table-cell; }
  .table td, .table th { padding: 14px 20px; height: 52px; }
}

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.form { max-width: 620px; }
.form-field ~ .form-field { margin-top: 24px; }

.form-field label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 6px; color: #2D3748;
}

.form-field input {
  border: 1.5px solid #CBD5E0; border-radius: 6px;
  padding: 10px 14px; width: 100%; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.form-field input:focus {
  border-color: rgba(2, 28, 67, 1); outline: none;
  box-shadow: 0 0 0 3px rgba(60,187,107,.12);
}

.form-field .optional { color: #718096; margin-left: 4px; }
.form-field p { color: #718096; font-size: 12px; margin: 5px 0; }

.form footer { margin-top: 36px; padding-top: 24px; }
.form footer a { color: #718096; cursor: pointer; margin-right: 15px; }

/* ══════════════════════════════════════════════════════════
   ATTACHMENTS / SHARE / MISC
══════════════════════════════════════════════════════════ */
.attachments .attachment-item { padding-left: 22px; position: relative; margin-bottom: 10px; font-size: 14px; }
.attachments .attachment-item .attachment-icon { color: #A0AEC0; left: 0; position: absolute; top: 3px; }

.share { padding: 0; white-space: nowrap; }
.share li, .share a { display: inline-block; }
.share li { height: 28px; width: 28px; }
.share a { color: #A0AEC0; transition: color .15s; }
.share a:hover { text-decoration: none; color: rgba(2, 28, 67, 1); }
.share a svg { height: 18px; width: 18px; display: block; }

.upload-dropzone span { color: #718096; }

.actions button {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; cursor: pointer;
  min-height: 35px; min-width: 35px; display: flex;
  align-items: center; justify-content: center; color: #A0AEC0;
}

.actions button:hover { color: rgba(2, 28, 67, 1); }

/* ══════════════════════════════════════════════════════════
   SPLIT BUTTON
══════════════════════════════════════════════════════════ */
.split-button { display: flex; }

.split-button button {
  background: rgba(2, 28, 67, 1); border: 0;
  color: rgba(250, 250, 250, 1); height: 34px;
  line-height: 16px; border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════
   COLLAPSIBLE NAV
══════════════════════════════════════════════════════════ */
.collapsible-nav { flex-direction: column; font-size: 14px; position: relative; }
@media (min-width: 768px) { .collapsible-nav { flex-direction: row; } }

.collapsible-nav-border { border-bottom: 1px solid #E2E8F0; border-top: 1px solid #E2E8F0; }
@media (min-width: 768px) { .collapsible-nav-border { border-top: 0; } }

.collapsible-nav-toggle {
  top: 50%; transform: translateY(-50%); position: absolute; right: 0;
  padding: 0; border: 0; background: none; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer; color: #718096;
}

@media (min-width: 768px) { .collapsible-nav-toggle { display: none; } }

.collapsible-nav-toggle-icon { display: none; }
.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon { display: inline-block; }
.collapsible-nav-toggle[aria-expanded="true"] .x-icon { display: inline-block; }
.collapsible-nav-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(60,187,107,.2); border-radius: 50%; }

/* ══════════════════════════════════════════════════════════
   COMMUNITY (if used)
══════════════════════════════════════════════════════════ */
.community { text-align: center; }
.community, .activity { border-top: 1px solid #E2E8F0; padding: 32px 0; }
.community a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

.recent-activity-item { border-bottom: 1px solid #E2E8F0; padding: 18px 0; overflow: auto; }
.recent-activity-header { margin-bottom: 12px; }
.recent-activity-controls a { color: rgba(2, 28, 67, 1); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   POST (community)
══════════════════════════════════════════════════════════ */
.post { flex: 1; margin-bottom: 10px; }
@media (min-width: 1024px) { .post { flex: 1 0 70%; max-width: 70%; } }
.post-container { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .post-container { flex-direction: row; } }
.post-sidebar { border-top: 1px solid #E2E8F0; flex: 1; padding: 30px 0; text-align: center; }
@media (min-width: 1024px) { .post-sidebar { border: 0; flex: 1 0 30%; padding: 0 0 0 50px; text-align: initial; } }

/* ══════════════════════════════════════════════════════════
   CATEGORY PAGE v2 — Sidebar + content-card layout
   Template: category_page.hbs  (cat-* prefix)
══════════════════════════════════════════════════════════ */

/* ── Category header: icon box + title + description ──── */
.cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
}

.cat-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: rgba(60,187,107,.12);
  color: rgba(2, 28, 67, 1);
}

.cat-header-text { flex: 1; }

.cat-title {
  font-size: 22px;
  font-weight: 700;
  color: #021C43;
  margin: 0 0 2px;
  line-height: 1.3;
}

.cat-description {
  font-size: 13px;
  color: #718096;
  margin: 0;
  line-height: 1.5;
}

/* ── Two-column layout: sidebar left, cards right ──────── */
.cat-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* ── Left sidebar ──────────────────────────────────────── */
.cat-sidebar {
  flex: 0 0 200px;
  width: 200px;
  position: sticky;
  top: 72px;
}

.cat-sidebar-inner {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 14px;
}

.cat-sidebar-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #A0AEC0;
  margin: 0 0 8px;
  padding: 0 6px;
}

.cat-sidebar-link {
  display: block;
  font-size: 13px;
  color: #4A5568;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s, color .15s;
  line-height: 1.35;
  margin-bottom: 2px;
}

.cat-sidebar-link:hover {
  background: #F4F6FA;
  color: #021C43;
  text-decoration: none;
}

.cat-sidebar-link.current {
  background: rgba(60,187,107,.10);
  color: rgba(2, 28, 67, 1);
  font-weight: 600;
}

/* ── Right content column ──────────────────────────────── */
.cat-content {
  flex: 1;
  min-width: 0;
}

/* ── Section card ─────────────────────────────────────── */
.cat-section-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color .2s, box-shadow .2s;
}

.cat-section-card:last-child { margin-bottom: 0; }

.cat-section-card:hover {
  border-color: rgba(60,187,107,.4);
  box-shadow: 0 4px 16px rgba(60,187,107,.07);
}

.cat-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F0F4F8;
}

.cat-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #021C43;
  margin: 0;
}

.cat-section-title a {
  color: #021C43;
  text-decoration: none;
  transition: color .15s;
}

.cat-section-title a:hover { color: rgba(2, 28, 67, 1); }

.cat-section-badge {
  display: inline-block;
  background: #F0F4F8;
  color: #718096;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Article rows inside each section card ─────────────── */
.cat-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-article-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid #F7F9FC;
}

.cat-article-item:last-child { border-bottom: none; }

.cat-article-icon {
  flex-shrink: 0;
  color: #A0AEC0;
}

.cat-article-link {
  font-size: 13.5px;
  color: #2D3748;
  text-decoration: none;
  transition: color .15s;
  line-height: 1.4;
}

.cat-article-link:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

/* "See all N articles →" footer link */
.cat-see-all {
  display: block;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(2, 28, 67, 1);
  text-decoration: none;
  background: #FAFBFC;
  border-top: 1px solid #F0F4F8;
  transition: color .15s, background .15s;
}

.cat-see-all:hover { color: #2fa55c; background: #F4F6FA; text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   USER PROFILE PAGE  — exact class names from live HTML
   Fixes: Edit button full-width/dark, plain stats, layout
══════════════════════════════════════════════════════════ */

/* ── Profile header banner ────────────────────────────── */
.profile-header {
  background: #ffffff;
  border-bottom: 1px solid #E2E8F0;
  padding: 32px 0 24px;
}

/* ── Profile info row: avatar + name/badges + edit btn ── */
.profile-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Avatar wrapper */
.profile-info .avatar.profile-avatar {
  flex-shrink: 0;
  position: relative;
}

.profile-info .user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #E2E8F0;
  object-fit: cover;
  display: block;
}

/* Agent badge icon */
.icon-agent {
  position: absolute;
  bottom: -2px;
  right: -2px;
  color: rgba(2, 28, 67, 1);
  background: #fff;
  border-radius: 50%;
  padding: 1px;
}

/* Name + badges */
.basic-info { flex: 1; min-width: 0; }

.profile-info h1.name {
  font-size: 20px;
  font-weight: 700;
  color: #021C43;
  margin: 0 0 4px;
  line-height: 1.3;
}

.profile-info h1.name a {
  color: #021C43;
  text-decoration: none;
  transition: color .15s;
}

.profile-info h1.name a:hover { color: rgba(2, 28, 67, 1); }

/* Edit button + follow button container */
.options {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Edit profile button ──────────────────────────────── *
   Element: .user-profile-actions.split-button > button[data-action="edit-profile"]
   Root cause: our .split-button rule sets display:flex which
   stretches the button to full width. Override it here.
 * ─────────────────────────────────────────────────────── */
.user-profile-actions.split-button {
  display: inline-flex !important;
  width: auto !important;
}

.user-profile-actions button[data-action="edit-profile"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 0 18px !important;
  height: 36px !important;
  line-height: 1 !important;
  background: rgba(2, 28, 67, 1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}

.user-profile-actions button[data-action="edit-profile"]:hover {
  background: #2fa55c !important;
}

/* ── Stats ────────────────────────────────────────────── *
   Two <ul class="profile-stats"> — activity stats + counters
 * ─────────────────────────────────────────────────────── */
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px 0;
}

/* First stats list (Total activity, Last activity, Member since) */
.profile-stats-activity {
  border-top: 1px solid #F0F4F8;
  padding-top: 16px;
  margin-top: 4px;
}

/* Second stats list (Following, Followed by, Votes, Subscriptions) */
.profile-stats-counters {
  padding-top: 8px;
  border-top: 1px solid #F0F4F8;
  margin-top: 8px;
}

/* Each stat row */
.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 50%;
  padding: 4px 0;
  font-size: 13px;
}

.stat-label {
  color: #718096;
  font-weight: 400;
}

.stat-label::after { content: ':'; }

.stat-value {
  font-weight: 600;
  color: #021C43;
}

/* ── Profile nav tabs ─────────────────────────────────── */
.profile-nav {
  background: #ffffff;
  border-bottom: 2px solid #E2E8F0;
  margin-bottom: 32px;
}

/* Override collapsible-nav to show as horizontal tabs */
.profile-nav .collapsible-nav {
  flex-direction: row !important;
  position: static;
}

.profile-nav .collapsible-nav-toggle { display: none !important; }

.profile-nav .collapsible-nav-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.profile-nav .collapsible-nav-list li a {
  display: block;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #718096;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.profile-nav .collapsible-nav-list li a:hover {
  color: #021C43;
  text-decoration: none;
}

.profile-nav .collapsible-nav-list li.current a {
  color: rgba(2, 28, 67, 1);
  border-bottom-color: rgba(2, 28, 67, 1);
  font-weight: 600;
}

/* ── Profile section header ───────────────────────────── */
.profile-section-header {
  margin-bottom: 20px;
}

.profile-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #021C43;
  margin: 0 0 4px;
}

.profile-section-description {
  font-size: 13px;
  color: #718096;
}

/* ── Activity list ────────────────────────────────────── */
.profile-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each activity card */
.profile-activity {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  transition: border-color .2s, box-shadow .2s;
}

.profile-activity:hover {
  border-color: rgba(60,187,107,.35);
  box-shadow: 0 2px 12px rgba(60,187,107,.07);
}

/* The SVG type-icon (document/post) — keep it small & grey */
.profile-activity-icon {
  display: none; /* hide it; the avatar already provides context */
}

/* Header row: avatar + "user created an article, X ago" */
.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.profile-activity-header .user-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1.5px solid #E2E8F0;
  object-fit: cover;
}

.profile-activity-description {
  font-size: 13px;
  color: #718096;
  margin: 0;
  line-height: 1.4;
}

.profile-activity-description span {
  font-weight: 600;
  color: #021C43;
}

/* ── Contribution (article preview inside activity) ───── */
.profile-contribution {
  border-top: 1px solid #F0F4F8;
  padding-top: 14px;
}

.profile-contribution-title {
  font-size: 15px;
  font-weight: 600;
  color: #021C43;
  margin: 0 0 6px;
  line-height: 1.35;
}

.profile-contribution-title a {
  color: #021C43;
  text-decoration: none;
  transition: color .15s;
}

.profile-contribution-title a:hover { color: rgba(2, 28, 67, 1); text-decoration: none; }

/* Breadcrumbs inside contribution */
.profile-contribution-breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.profile-contribution-breadcrumbs li {
  font-size: 12px;
  color: #A0AEC0;
}

.profile-contribution-breadcrumbs li a {
  color: #A0AEC0;
  text-decoration: none;
  transition: color .15s;
}

.profile-contribution-breadcrumbs li a:hover { color: rgba(2, 28, 67, 1); }
.profile-contribution-breadcrumbs li + li::before { content: '›'; margin: 0 5px; color: #CBD5E0; }

/* Article body excerpt */
.profile-contribution-body {
  font-size: 13px;
  color: #718096;
  line-height: 1.6;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row: author · updated · followers · comments · votes */
.profile-activity .meta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 2px;
}

.profile-activity .meta-data {
  font-size: 12px;
  color: #A0AEC0;
}

/* ══════════════════════════════════════════════════════════
   ARTICLE LIST STYLE
   Used by: Popular Articles + Recent Activity (home page)
   Classes: .section-label, .article-list, .article-item,
            .article-dot, .article-name, .article-tag
══════════════════════════════════════════════════════════ */

/* Section label — small uppercase heading */
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #A0AEC0;
  margin: 0 0 16px;
}

/* List container — white card wrapping all rows */
.article-list {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
}

/* Each row */
.article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F0F4F8;
  gap: 16px;
}

.article-item:last-child { border-bottom: none; }

/* Left: dot + title */
.article-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Green dot */
.article-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3CBB6B;
  flex-shrink: 0;
}

/* Article title / link */
.article-name {
  font-size: 14px;
  color: #2D3748;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-item:hover .article-name,
a.article-name:hover { color: #3CBB6B; text-decoration: none; }

/* ── Tag badges ───────────────────────────────────────── */
/* Base tag — fallback green */
.article-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(60,187,107,.12);
  color: #16A34A;
}

/* Class-based tags (used by JS-rendered recent activity) */
.tag-setup    { background: rgba(60,187,107,.12);  color: #16A34A; }
.tag-payment  { background: rgba(245,158,11,.12);  color: #D97706; }
.tag-reports  { background: rgba(59,130,246,.12);  color: #2563EB; }
.tag-orders   { background: rgba(139,92,246,.12);  color: #7C3AED; }

/* data-label attribute tags (used by Curlybars promoted_articles) */
.article-tag[data-label="Setup"],
.article-tag[data-label="Getting Started"]  { background: rgba(60,187,107,.12);  color: #16A34A; }

.article-tag[data-label="Payments"],
.article-tag[data-label="Payment"]          { background: rgba(245,158,11,.12);  color: #D97706; }

.article-tag[data-label="Reports"],
.article-tag[data-label="Analytics"]        { background: rgba(59,130,246,.12);  color: #2563EB; }

.article-tag[data-label="Orders"],
.article-tag[data-label="Inventory"]        { background: rgba(139,92,246,.12);  color: #7C3AED; }

.article-tag[data-label="Support"],
.article-tag[data-label="Technical"]        { background: rgba(99,102,241,.12);  color: #4F46E5; }

/* Recent activity section wrapper */
.recent-activity-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px 72px;
}

@media (min-width: 1160px) {
  .recent-activity-section { width: 90%; padding: 0 0 72px; }
}

.recent-activity-loading,
.recent-activity-empty {
  padding: 14px 4px;
  font-size: 14px;
  color: #A0AEC0;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .home-hero { padding: 40px 20px 48px; }
  .home-hero-title { font-size: 26px; }
  .topic-grid { grid-template-columns: 1fr; }
  .home-topics { padding: 32px 20px 48px; }
  .section-articles { grid-template-columns: 1fr; }
  .article { min-width: unset; }
  .search-results { flex-direction: column; }
  .search-results-sidebar { max-width: 100%; flex: 1; }

  /* Category page v2 — mobile */
  .cat-layout { flex-direction: column; }
  .cat-sidebar { display: none !important; }
  .sub-nav { flex-direction: column; align-items: flex-start; }
  .sub-nav .search-container { max-width: 100%; width: 100%; position: relative; }
  .cat-content { width: 100%; }
  .cat-section-card { width: 100%; box-sizing: border-box; }
  .cat-header-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; }
  .cat-title { font-size: 19px; }

  /* Popular articles — stack title above label on mobile */
  .article-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .article-item-left { width: 100%; }
  .article-name { white-space: normal; overflow: visible; text-overflow: unset; }
  .article-item-right { display: flex; align-items: center; flex-shrink: 0; gap: 6px; padding-left: 17px; }
}