/* ============================================================
   Pipeline Knowledge Base — Custom CSS
   Drop-in styling for Help Scout Docs (pipeline.helpscoutdocs.com)

   Built on top of Help Scout's "evolution" CSS variable system, so
   most of these declarations resolve correctly inside Help Scout's
   chrome. Anything Pipeline-specific is redefined in :root below.
   ============================================================ */

@import "https://www.helpscout.com/css/evolution.css";

/* ------------------------------------------------------------
   1. Pipeline design tokens
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --pl-navy-950: #0b1220;
  --pl-navy-900: #111a2d;
  --pl-navy-800: #1a2332;
  --pl-navy-700: #243042;
  --pl-navy-600: #324059;

  --pl-blue-700: #1d4ed8;
  --pl-blue-600: #2563eb;
  --pl-blue-500: #3b82f6;
  --pl-blue-100: #dbe7fd;
  --pl-blue-50:  #eff5ff;

  --pl-slate-50:  #f5f7fa;
  --pl-slate-100: #eef1f6;
  --pl-slate-200: #e3e7ee;
  --pl-slate-300: #cbd2dd;
  --pl-slate-400: #9aa3b2;
  --pl-slate-500: #64748b;
  --pl-slate-600: #475569;
  --pl-slate-700: #334155;
  --pl-slate-900: #0f172a;

  --pl-white: #ffffff;

  /* Map Help Scout's action/text tokens onto Pipeline brand */
  --color--action-default:  var(--pl-blue-600);
  --color--action-hovered:  var(--pl-blue-700);
  --color--action-disabled: var(--pl-slate-300);

  --color--text-default:  var(--pl-slate-600);
  --color--text-light:    var(--pl-slate-500);
  --color--text-dark:     var(--pl-slate-900);
  --color--text-headline: var(--pl-navy-900);

  /* Recolour Help Scout's neutral ramp to Pipeline's cool slate */
  --color--clay-100: var(--pl-slate-50);
  --color--clay-800: var(--pl-navy-800);

  --color--charcoal-100: var(--pl-slate-100);
  --color--charcoal-200: var(--pl-slate-200);
  --color--charcoal-300: var(--pl-slate-200);
  --color--charcoal-500: var(--pl-slate-300);
  --color--charcoal-600: var(--pl-slate-500);

  --color--cobalt-500: var(--pl-blue-500);
  --color--cobalt-600: var(--pl-blue-600);

  --color--slate-100: var(--pl-slate-100);
  --color--slate-500: var(--pl-slate-500);

  /* Logo & nav */
  --hs-logo-width:  148px;
  --hs-logo-height: 36px;
  --main-nav-height: calc(var(--spacing--base-2, 16px) + var(--hs-logo-height) + var(--spacing--base-3, 24px));
  --main-nav-close-button-dimension: 24px;

  /* Pipeline focus ring */
  --focus-input--default: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

/* ------------------------------------------------------------
   2. Page shell
   ------------------------------------------------------------ */
html, body {
  background: var(--pl-slate-50);
}

body {
  /* Pipeline doesn't use Help Scout's cream decorative blobs.
     Replace them with a subtle Pipeline-blue radial wash that
     fades from the top of the page. */
  background:
    radial-gradient(1100px 520px at 50% -160px, rgba(37, 99, 235, 0.08), transparent 70%),
    radial-gradient(700px 420px at 100% 0%,   rgba(15, 23, 42, 0.04), transparent 70%),
    var(--pl-slate-50);
  background-attachment: fixed;
  padding: 0;
  min-height: 100%;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color--text-default);
  -webkit-font-smoothing: antialiased;
}

.container-fluid {
  width: var(--container-width);
  max-width: none;
  padding: 0;
}
.container-fluid::after,
.container-fluid::before { content: none; }

/* ------------------------------------------------------------
   3. Main nav
   ------------------------------------------------------------ */
.navbar { margin-bottom: 0; }

.navbar .navbar-inner {
  padding: 0;
  background: var(--pl-navy-900);
  border: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 12px rgba(11, 18, 32, 0.18);
  border-radius: 0;
}
.navbar .navbar-inner::before,
.navbar .navbar-inner::after { content: none; }

/* Brand mark — use Pipeline's white logo */
.navbar .brand {
  text-indent: -9999px;
  width: var(--hs-logo-width);
  height: var(--hs-logo-height);
  padding: 0;
  /* Pipeline white logo on dark nav */
  background:
    center center / contain no-repeat
    url("https://d33v4339jhl8k0.cloudfront.net/docs/assets/5b970b442c7d3a03f89ea580/images/6a0f3b2a1dc770a09cdc9b18/Pipeline-Marketing-Logo-White.png");
}
.navbar .brand img { display: none; } /* Hide the inline <img>, use bg image */
.navbar .brand span { font-size: 12px; }

/* Nav links */
.navbar .nav li a {
  font-size: var(--font-size--S, 14px);
  line-height: var(--line-height--relaxed, 1.5);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 6px;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--pl-white);
  background: rgba(255, 255, 255, 0.06);
}

/* ---- mobile nav ---- */
@media (max-width: 768px) {
  :root {
    --hs-logo-width: 116px;
    --hs-logo-height: 28px;
  }
  .navbar { margin: 0; }
}

@media (max-width: 1139px) {
  .navbar .navbar-inner {
    padding: var(--spacing--base-2, 16px) calc((100vw - var(--container-width)) / 2) var(--spacing--base-3, 24px);
  }
  .navbar .brand { position: relative; z-index: 1; }

  .navbar .btn-navbar {
    top: calc((var(--hs-logo-height) - var(--main-nav-close-button-dimension)) / 2);
    right: calc((100vw - var(--container-width)) / 2);
    z-index: 1;
    width: var(--main-nav-close-button-dimension);
    height: var(--main-nav-close-button-dimension);
    margin: 0;
    background: rgba(255, 255, 255, 0.85);
    mask-image: url("https://www.helpscout.com/icons/menu.svg");
    mask-size: 100% 100%;
    padding: 0;
    transition: background 0.2s;
    color: transparent;
    display: block;
    box-sizing: content-box;
    border: none;
  }
  .navbar .btn-navbar:hover,
  .navbar .btn-navbar:focus { background: var(--pl-white); }
  .navbar .btn-navbar .icon-bar { display: none; }

  .nav-collapse {
    background: transparent;
    margin: 0 calc((100vw - var(--container-width)) / -2);
    top: calc(-1 * var(--hs-logo-height) - var(--spacing--base-2, 16px));
    z-index: 0;
    transition: all 0.35s ease;
  }
  .nav-collapse.collapse { height: 0 !important; overflow: hidden !important; }
  .nav-collapse.collapse.in {
    height: auto !important;
    margin-bottom: calc(-1 * var(--hs-logo-height) - var(--spacing--base-2, 16px));
  }
  .nav-collapse.in {
    background: var(--pl-navy-800);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 32px rgba(11, 18, 32, 0.25);
  }

  .nav-collapse nav {
    position: relative;
    padding: calc(var(--hs-logo-height) + var(--spacing--base-2, 16px) + var(--spacing--M, 20px)) 0 var(--spacing--M, 20px);
  }
  .nav-collapse nav .nav { position: relative; margin: 0; width: 100%; }

  .navbar .nav li {
    display: block;
    opacity: 0;
    margin: 0;
    transition: opacity 0.35s ease;
  }
  .navbar .in .nav li { opacity: 1; }

  .navbar .nav li a {
    padding: 10px 0;
    margin: 0 auto;
    max-width: var(--container-width);
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1139px) {
  #mainNav .container-fluid { position: relative; z-index: 1; }
  .navbar .btn-navbar { position: absolute; }
  .nav-collapse.collapse {
    position: absolute;
    top: -8px; right: -8px;
    margin: 0;
    border-radius: 12px;
    padding: 8px 8px 12px;
    min-width: 200px;
    background: var(--pl-navy-800);
  }
  .nav-collapse nav { padding-top: calc(var(--hs-logo-height) + 8px); }
  .navbar .nav li a { padding: 10px 14px; }
}

/* ---- desktop nav ---- */
@media (min-width: 1140px) {
  #mainNav .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
  }
  .brand { float: none; }

  .navbar .nav {
    float: none;
    position: relative;
    display: flex;
    gap: 4px;
  }
  .navbar .nav li { margin: 0; }
  .navbar .nav li a {
    line-height: 1;
    padding: 9px 14px;
  }
  .navbar .nav .active .caret { display: none; }
}

@media (min-width: 1320px) {
  .navbar .nav { gap: 8px; }
}

/* ------------------------------------------------------------
   4. Hero / search
   ------------------------------------------------------------ */
#docsSearch {
  margin: 0;
  padding: 80px calc((100vw - var(--container-width)) / 2) 96px;
  background:
    radial-gradient(900px 380px at 18% 110%, rgba(37, 99, 235, 0.10), transparent 70%),
    radial-gradient(700px 320px at 95% -30%, rgba(15, 23, 42, 0.05), transparent 70%);
  border: none;
  width: 100%;
  position: relative;
  text-align: center;
}

#docsSearch h1 {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -0.025em;
  color: var(--pl-navy-900);
  margin: 0 auto 28px;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 760px;
}

#searchBar {
  display: flex;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

#searchBar .search-query {
  background: var(--pl-white);
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--pl-slate-200);
  border-right: none;
  color: var(--pl-slate-900);
  font-family: inherit;
  font-size: 16px;
  height: 56px;
  line-height: 56px;
  padding: 0 20px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#searchBar .search-query::placeholder { color: var(--pl-slate-400); }
#searchBar .search-query:hover { border-color: var(--pl-slate-300); }
#searchBar .search-query:focus {
  border-color: var(--pl-blue-600);
  box-shadow: var(--focus-input--default);
  outline: none;
}
#searchBar .search-query[disabled] {
  cursor: not-allowed;
  color: var(--pl-slate-400);
  border-color: var(--pl-slate-200);
}

#searchBar button {
  position: static;
  top: 0;
  height: 56px;
  padding: 0 26px;
  background: var(--pl-blue-600);
  color: var(--pl-white);
  border: 1px solid var(--pl-blue-600);
  border-radius: 0 10px 10px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
#searchBar button:hover {
  background: var(--pl-blue-700);
  border-color: var(--pl-blue-700);
}
#searchBar button .icon-search { display: none; }

#searchBar.sm { margin-bottom: 32px; }
#searchBar.sm button,
#searchBar.sm button:hover { background: none; }

/* Typeahead dropdown */
#serp-dd {
  top: 56px !important;
  border-radius: 10px;
  background: var(--pl-white);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(15, 23, 42, 0.04);
  border: 1px solid var(--pl-slate-200);
  margin-top: 6px;
  text-align: left;
  overflow: hidden;
}
#serp-dd .result > li,
#serp-dd .result > li:first-child,
#serp-dd .result > li:last-child { margin: 0; }
#serp-dd .result > li a {
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--pl-slate-700);
  display: block;
}
#serp-dd .result > li a:hover { color: var(--pl-blue-700); background: transparent; }
#serp-dd .result > li.active,
#serp-dd .result > li:hover { background: var(--pl-slate-50); color: inherit; }

/* ------------------------------------------------------------
   5. Collection / category grid
   ------------------------------------------------------------ */
#contentArea {
  padding-bottom: 64px;
}

.collection-category h2,
.collection .collection-head h2,
.collection-head h2,
#contentArea .collection .collection-head h2 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pl-navy-900);
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  text-transform: none;
  line-height: 1.2;
}
.collection-category h2 a,
.collection .collection-head h2 a,
.collection-head h2 a { color: inherit; border: none; }
.collection-category h2 a:hover,
.collection .collection-head h2 a:hover,
.collection-head h2 a:hover { border-bottom: none; color: var(--pl-blue-700); }

.collection-category .category-list,
.collection .collection-body .popArticles {
  display: flex;
  margin: 0 0 48px;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

/* ---- Category cards ---- */
.category-list .category {
  --category-icon-size: 44px;
  position: relative;
  flex: 0 0 100%;
  width: auto;
  margin: 0;
  border: 1px solid var(--pl-slate-200);
  background: var(--pl-white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.category-list .category::before {
  content: "";
  display: block;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  position: static;
  top: auto;
  left: auto;
  border-radius: 10px;
  background: var(--pl-blue-50);
  margin-bottom: 6px;
}

.category-list .category::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: var(--pl-blue-600);
  mask-image: url("https://www.helpscout.com/icons/help-circle.svg");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  position: absolute;
  top: 35px;
  left: 33px;
}

.category-list .category:hover {
  border-color: var(--pl-slate-300);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

.category-list .category h3,
.category-list .category p,
.category-list .category .article-count { flex: 0 0 auto; width: 100%; }

.category-list .category h3 {
  margin: 0;
  color: var(--pl-navy-900);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.category-list .category p,
.category-list .category .article-count {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pl-slate-500);
}

.category-list .category p:first-of-type { align-self: start; }

.category-list .category .article-count {
  align-self: end;
  margin-top: auto;
  padding-top: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pl-blue-600);
  font-weight: 500;
}
.category-list .category:hover .article-count { color: var(--pl-blue-700); }

@media (min-width: 640px) {
  .category-list .category { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 1024px) {
  .category-list .category { flex: 0 0 calc(25% - 12px); }
}

/* Per-category icon overrides — Pipeline + standard Help Scout categories.
   Each rule swaps the SVG mask on .category::after. */

/* --- Pipeline categories (from your KB) --- */
#collection-31::after, /* Getting Started */
.category-list .category#category-31::after {
  mask-image: url("https://www.helpscout.com/icons/flag.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/flag.svg");
}
#collection-43::after, /* Administrator Guides */
.category-list .category#category-43::after {
  mask-image: url("https://www.helpscout.com/icons/settings-2.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/settings-2.svg");
}
#collection-40::after, /* FTO Guides */
.category-list .category#category-40::after {
  mask-image: url("https://www.helpscout.com/icons/users.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/users.svg");
}
#collection-46::after, /* Trainee Guides */
.category-list .category#category-46::after {
  mask-image: url("https://www.helpscout.com/icons/books.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/books.svg");
}

/* --- Help Scout's standard category icon overrides (kept for completeness) --- */
.category-list .category#category-1552::after { mask-image: url("https://www.helpscout.com/icons/flag.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/flag.svg"); }
.category-list .category#category-1553::after { mask-image: url("https://www.helpscout.com/icons/users.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/users.svg"); }
.category-list .category#category-1554::after { mask-image: url("https://www.helpscout.com/icons/check-circle.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/check-circle.svg"); }
.category-list .category#category-1555::after { mask-image: url("https://www.helpscout.com/icons/message.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/message.svg"); }
.category-list .category#category-1556::after { mask-image: url("https://www.helpscout.com/icons/dollar.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/dollar.svg"); }
.category-list .category#category-1557::after { mask-image: url("https://www.helpscout.com/icons/user.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/user.svg"); }
.category-list .category#category-1558::after { mask-image: url("https://www.helpscout.com/icons/settings-2.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/settings-2.svg"); }
.category-list .category#category-1559::after { mask-image: url("https://www.helpscout.com/icons/chart.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/chart.svg"); }
.category-list .category#category-1560::after { mask-image: url("https://www.helpscout.com/icons/apps.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/apps.svg"); }
.category-list .category#category-1561::after { mask-image: url("https://www.helpscout.com/icons/percentage.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/percentage.svg"); }
.category-list .category#category-1562::after { mask-image: url("https://www.helpscout.com/icons/speech-bubble.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/speech-bubble.svg"); }
.category-list .category#category-1563::after { mask-image: url("https://www.helpscout.com/icons/contacts.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/contacts.svg"); }
.category-list .category#category-1564::after { mask-image: url("https://www.helpscout.com/icons/shopping-basket.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/shopping-basket.svg"); }
.category-list .category#category-1565::after { mask-image: url("https://www.helpscout.com/icons/click-pulse.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/click-pulse.svg"); }
.category-list .category#category-1566::after { mask-image: url("https://www.helpscout.com/icons/help-circle.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/help-circle.svg"); }
.category-list .category#category-1567::after { mask-image: url("https://www.helpscout.com/icons/square-intersect.svg"); -webkit-mask-image: url("https://www.helpscout.com/icons/square-intersect.svg"); }

/* ---- popular-article list inside collection layout ---- */
.collection .collection-head { margin-bottom: 16px; }
.collection .collection-head.no-desc h2 { margin-bottom: 0; }
.collection .collection-head p { margin: 6px 0 0; color: var(--pl-slate-500); font-size: 14px; }

.collection .popArticles,
.collection .collection-body .popArticles,
ul.popArticles {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--pl-white);
  border: 1px solid var(--pl-slate-200);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 8px;
  margin-bottom: 32px;
  list-style: none;
}
.collection .popArticles li,
ul.popArticles > li {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--pl-slate-100);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.collection .popArticles li:last-child,
ul.popArticles > li:last-child { border-bottom: none; }
.collection .popArticles li a,
ul.popArticles > li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  color: var(--pl-slate-700);
  font-size: 15px;
  line-height: 1.4;
  background: transparent;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.collection .popArticles li a:hover,
ul.popArticles > li a:hover {
  background: var(--pl-blue-50);
  color: var(--pl-blue-700);
}
.collection .popArticles li a span,
ul.popArticles > li a span { flex: 1; }

/* The little doc icon next to article links */
.collection .popArticles li a i.icon-article-doc,
.related ul li a i,
.articleList a i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--pl-slate-400);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='14' y2='13'/><line x1='8' y1='17' x2='12' y2='17'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='14' y2='13'/><line x1='8' y1='17' x2='12' y2='17'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  flex: 0 0 16px;
}
.collection .popArticles li a:hover i.icon-article-doc { background: var(--pl-blue-600); }

/* ------------------------------------------------------------
   Homepage collection cards (.twoCol layout)
   ------------------------------------------------------------
   Pipeline's KB uses a 2-level structure (Collection → Article)
   so the homepage renders <section class="twoCol"> with one
   <section class="collection"> per top-level collection.

   We restyle each .collection inside .twoCol to look like a
   Help-Scout-style category card: centered icon, title, and
   "N articles" link. The popular-articles list is hidden on the
   homepage — clicking the title takes you into the collection
   where the full list is shown. */
.twoCol.row-fluid,
#contentArea .twoCol.row-fluid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 32px 0 48px;
  padding-top: 0;
}
.twoCol.row-fluid::before,
.twoCol.row-fluid::after,
#contentArea .twoCol.row-fluid::before,
#contentArea .twoCol.row-fluid::after { content: none; }

.twoCol .collection {
  position: relative;
  flex: 1 1 240px;
  max-width: 320px;
  min-height: 280px;
  background: var(--pl-white);
  border: 1px solid var(--pl-slate-200);
  border-radius: 12px;
  padding: 32px 26px 28px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  counter-reset: pl-article-count;
}
.twoCol .collection:hover {
  border-color: var(--pl-slate-300);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

/* Icon bubble at the top */
.twoCol .collection::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pl-blue-50);
  margin: 0 auto 4px;
  flex: 0 0 44px;
}
.twoCol .collection::after {
  content: "";
  position: absolute;
  top: 43px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: var(--pl-blue-600);
  mask-image: url("https://www.helpscout.com/icons/help-circle.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/help-circle.svg");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
}

/* Per-collection icons — your current Pipeline collection IDs */
.twoCol .collection#collection-31::after  { mask-image: url("https://www.helpscout.com/icons/flag.svg");        -webkit-mask-image: url("https://www.helpscout.com/icons/flag.svg"); }
.twoCol .collection#collection-43::after  { mask-image: url("https://www.helpscout.com/icons/settings-2.svg");  -webkit-mask-image: url("https://www.helpscout.com/icons/settings-2.svg"); }
.twoCol .collection#collection-40::after  { mask-image: url("https://www.helpscout.com/icons/users.svg");       -webkit-mask-image: url("https://www.helpscout.com/icons/users.svg"); }
.twoCol .collection#collection-46::after  { mask-image: url("https://www.helpscout.com/icons/books.svg");       -webkit-mask-image: url("https://www.helpscout.com/icons/books.svg"); }

/* Title block — center and link the whole card via its h2 anchor */
.twoCol .collection .collection-head {
  margin: 0;
  width: 100%;
}
.twoCol .collection .collection-head h2 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pl-navy-900);
  margin: 0;
  line-height: 1.25;
}
.twoCol .collection .collection-head h2 a {
  color: inherit;
  border: none;
  display: block;
  padding: 0;
}
/* Expand the title link to cover the entire card */
.twoCol .collection .collection-head h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.twoCol .collection .collection-head p { display: none; }

/* Hide the popular-articles list on the homepage card and use CSS
   counters to surface the article count in a Help-Scout-style link. */
.twoCol .collection .collection-body {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}
.twoCol .collection .collection-body .popArticles {
  /* Counter still increments on display:none in modern browsers,
     which is how we get the article count. */
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: block;
  height: 0;
  overflow: hidden;
}
.twoCol .collection .collection-body .popArticles li {
  counter-increment: pl-article-count;
  border: none;
  margin: 0;
  padding: 0;
}
.twoCol .collection .collection-body::after {
  content: counter(pl-article-count) " articles";
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pl-blue-600);
  padding-top: 8px;
}
.twoCol .collection:hover .collection-body::after { color: var(--pl-blue-700); }

/* ------------------------------------------------------------
   6. Sidebar (article pages)
   ------------------------------------------------------------ */
#sidebar { margin: 0; padding: 0; }

#sidebar form .search-query {
  border: 1px solid var(--pl-slate-200);
  border-radius: 8px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  background: var(--pl-white);
}
#sidebar form .search-query:focus {
  border-color: var(--pl-blue-600);
  box-shadow: var(--focus-input--default);
  outline: none;
}

#sidebar form button,
#searchBar.sm button {
  top: 0;
  right: 6px;
  height: 100%;
  background: transparent;
  border: none;
}

#sidebar form .icon-search {
  background: var(--pl-slate-400);
  width: 18px;
  height: 18px;
  mask-image: url("https://www.helpscout.com/icons/search.svg");
  -webkit-mask-image: url("https://www.helpscout.com/icons/search.svg");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  transition: background-color 0.2s;
}
#sidebar form button:hover .icon-search { background: var(--pl-blue-700); }
#sidebar form .icon-search::before { content: none; }

#sidebar h3 {
  color: var(--pl-navy-900);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 24px 0 12px;
}

#sidebar .nav-list { margin-bottom: 0; }
#sidebar .nav-list li { margin: 0; }
#sidebar .nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--pl-slate-600);
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
#sidebar .nav-list a:hover,
#sidebar .nav-list li.active a:hover {
  color: var(--pl-blue-700);
  background: var(--pl-blue-50);
}
#sidebar .nav-list li.active a,
#sidebar .nav-list li.active a:hover {
  color: var(--pl-navy-900);
  background: var(--pl-slate-100);
  font-weight: 600;
}
#sidebar .nav-list li.active a i {
  color: var(--pl-slate-400);
  margin-left: auto;
  transition: translate 0.2s;
}
#sidebar .nav-list li.active a:hover i { translate: 2px 0; }

@media (max-width: 768px) {
  #sidebar { padding: 0; }
}

/* ------------------------------------------------------------
   7. Article content
   ------------------------------------------------------------ */
#contentArea .row-fluid {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-top: 32px;
  gap: 40px;
  margin-bottom: 48px;
}
#contentArea .row-fluid::after,
#contentArea .row-fluid::before { content: none; }

@media (max-width: 768px) {
  #contentArea .row-fluid {
    flex-direction: column;
    gap: 32px;
    padding-top: 16px;
  }
}

#main-content {
  background: var(--pl-white);
  padding: 40px 44px;
  margin-bottom: 0;
  border: 1px solid var(--pl-slate-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -16px rgba(15, 23, 42, 0.10);
  flex: 1 1 auto;
}

.contentWrapper {
  border: none;
  padding: 0;
  color: var(--color--text-default);
}
.contentWrapper.withRelated { padding-bottom: 16px; }

.contentWrapper h1 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pl-navy-900);
  margin-bottom: 20px;
  line-height: 1.15;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--pl-slate-600);
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
  color: var(--pl-navy-900);
  line-height: 1.2;
  font-family: "Manrope", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

#fullArticle,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle div,
#fullArticle li,
#fullArticle ol,
#fullArticle p,
#fullArticle table,
#fullArticle ul {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
}

#fullArticle { margin: 0 0 24px; }

#fullArticle .title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  padding-right: 22px;
}

.contentWrapper p.descrip {
  font-size: 17px;
  color: var(--pl-slate-500);
  margin: -8px 0 24px;
}

#fullArticle h2 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; }
#fullArticle h3 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
#fullArticle h4 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
#fullArticle h5 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pl-slate-500); }

#fullArticle > br { display: none; }

#fullArticle > ul,
#fullArticle > ol { padding-left: 22px; }
#fullArticle > ul { list-style: none; }
#fullArticle > ol { list-style: decimal; }

#fullArticle > ul li,
#fullArticle > ol li { position: relative; margin: 0 0 6px; }
#fullArticle > ul li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: -16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pl-blue-600);
}

#fullArticle dt {
  background: none;
  color: var(--pl-navy-900);
  font-size: 16px;
  display: inline-block;
  padding: 0;
  line-height: 1.6;
  vertical-align: middle;
  margin: 0;
  border-radius: 0;
  font-weight: 600;
}
#fullArticle dt::after { content: "."; translate: -0.25em 0; display: inline-block; }
#fullArticle dd { padding: 0; margin: 0 0 16px; }
#fullArticle dd::after, #fullArticle dd::before { content: none; }
#fullArticle dd p:last-child { margin: 0; }

#fullArticle .printArticle {
  border: none;
  top: 0; right: 0;
}
#fullArticle .printArticle .icon-print {
  color: var(--pl-slate-400);
  transition: color 0.2s;
}
#fullArticle .printArticle:hover .icon-print { color: var(--pl-blue-700); }

#fullArticle table { font-feature-settings: normal; border-collapse: collapse; width: 100%; }
#fullArticle table th,
#fullArticle table td {
  border: 1px solid var(--pl-slate-200);
  padding: 10px 14px;
  text-align: left;
}
#fullArticle table th {
  background: var(--pl-slate-50);
  color: var(--pl-navy-900);
  font-weight: 600;
}

/* Table of contents */
#fullArticle .index-list {
  background: var(--pl-slate-50);
  border: 1px solid var(--pl-slate-200);
  border-top: 3px solid var(--pl-blue-600);
  padding: 14px 16px 16px;
  margin-bottom: 28px;
  border-radius: 8px;
}
#fullArticle .index-list h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-slate-500);
  display: block;
  margin: 0 0 6px;
  padding: 4px 6px;
  border: none;
  line-height: 1.4;
}
#fullArticle .index-list ul,
#fullArticle .index-list ul li { margin: 0; }
#fullArticle .index-list ul li a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  padding: 6px 6px;
  border: none;
  color: var(--pl-blue-600);
}
#fullArticle .index-list ul li a:hover {
  color: var(--pl-blue-700);
  border-bottom: none;
}

/* Callouts */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow,
#fullArticle .private-note {
  padding: 14px 16px 16px;
  border-radius: 8px;
  border-left-width: 3px;
  border-left-style: solid;
  margin: 0 0 20px;
}
#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p,
#fullArticle .private-note p {
  font-size: 15px;
  color: var(--pl-slate-700);
  margin: 0;
}

#fullArticle .callout       { background: #f1f5f9; border-color: #94a3b8; }
#fullArticle .callout-blue  { background: #eff6ff; border-color: #60a5fa; }
#fullArticle .callout-green { background: #ecfdf5; border-color: #34d399; }
#fullArticle .callout-red   { background: #fef2f2; border-color: #f87171; }
#fullArticle .callout-yellow{ background: #fffbeb; border-color: #fbbf24; }
#fullArticle .private-note  { background: #f5f3ff; border-color: #a78bfa; }

/* Badges */
#fullArticle .badge {
  background: var(--pl-slate-500);
  color: var(--pl-white);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
#fullArticle .badge.info    { background: var(--pl-blue-600); }
#fullArticle .badge.success { background: #059669; }
#fullArticle .badge.warning { background: #d97706; }
#fullArticle .badge.error   { background: #dc2626; }

/* Links */
#serp-dd .result a:hover,
#serp-dd .result > li.active,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--pl-blue-600);
}

a { color: var(--pl-blue-600); }
a:focus,
a:hover { color: var(--pl-blue-700); text-decoration: none; }

#fullArticle a {
  color: var(--pl-blue-600);
  border-bottom: 1px solid var(--pl-blue-100);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#fullArticle a:hover {
  color: var(--pl-blue-700);
  border-bottom-color: var(--pl-blue-700);
}

#fullArticle strong,
#fullArticle strong a,
#fullArticle a strong { color: var(--pl-navy-900); font-weight: 600; }

/* Article rating + foot */
.articleRatings {
  margin: 16px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pl-slate-200);
}

.articleFoot { clear: none; margin: 0; }
.articleFoot::after, .articleFoot::before { display: table; content: ""; line-height: 0; }
.articleFoot::after { clear: both; }

.articleFoot p,
.articleFoot time {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pl-slate-500);
  font-style: normal;
  letter-spacing: 0.02em;
}
.articleFoot p.lu, .articleFoot time.lu { margin: 0; }

@media (max-width: 768px) {
  #main-content {
    margin: 0 calc(var(--spacing--S, 16px) * -1);
    padding: 24px 20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .contentWrapper h1 { font-size: 24px; }
  #sidebar { margin: 0; }
}

/* ------------------------------------------------------------
   8. Related & category list
   ------------------------------------------------------------ */
.related {
  background: transparent;
  padding: 24px 0 0;
  margin: 24px 0 0;
  border: none;
  border-top: 1px solid var(--pl-slate-200);
}
.related h3 {
  margin: 0 0 12px;
  color: var(--pl-navy-900);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: -0.005em;
}
.related ul, .related ul li { padding: 0; margin: 0; list-style: none; }
.related ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 8px 0;
  color: var(--pl-blue-600);
}
.related ul li a:hover { color: var(--pl-blue-700); }
.related ul li a i { display: inline-block; }

/* Category page */
#categoryHead { padding-bottom: 8px; }
#categoryHead .sort { top: 0; }
#categoryHead .sort form { margin: 0; }
#categoryHead .sort select {
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-color: var(--pl-white);
  border-radius: 8px;
  border: 1px solid var(--pl-slate-200);
  color: var(--pl-slate-700);
  font-family: inherit;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 36px 0 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
#categoryHead .sort select:focus {
  border-color: var(--pl-blue-600);
  box-shadow: var(--focus-input--default);
  outline: none;
}

.articleList {
  border-top: 1px solid var(--pl-slate-200);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  list-style: none;
}
.articleList li { margin: 0; padding: 0; }
.articleList a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 10px 12px;
  color: var(--pl-blue-600);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.articleList a:hover {
  background: var(--pl-blue-50);
  color: var(--pl-blue-700);
}
.articleList a:hover span { text-decoration: none; }

/* ------------------------------------------------------------
   9. Footer & banners
   ------------------------------------------------------------ */
footer {
  margin: 0 auto 40px;
  max-width: var(--container-width);
  padding: 24px 0 0;
  border-top: 1px solid var(--pl-slate-200);
}
footer p {
  margin: 0;
  text-align: center;
  color: var(--pl-slate-500);
  font-size: 13px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
}
footer p a {
  color: var(--pl-slate-700);
  border-bottom: 1px solid var(--pl-slate-300);
  transition: color 0.15s, border-color 0.15s;
}
footer p a:hover {
  color: var(--pl-blue-700);
  border-bottom-color: var(--pl-blue-700);
}

.appMessage {
  top: -24px;
  left: -24px;
  width: calc(100% + 48px);
  background: var(--pl-navy-900);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 12px 12px 0 0;
  border: none;
  font-size: 14px;
}
.appMessage a { color: var(--pl-blue-500); }
.appMessage a:hover { color: var(--pl-blue-100); }