/* ==========================================================================
   Waiverly Help Center — Help Scout Docs custom stylesheet
   Built from the Waiverly design system (tokens.json / README).
   Upload in Help Scout: Docs > Waiverly Help Center > Settings > Custom Code
   > Upload Stylesheet. Replaces waiverly-knowledge-base.css.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700;800;900&display=swap");

:root {
  /* Colour — light theme values from the design system */
  --wv-primary: #0d60d5;
  --wv-primary-tint: rgba(13, 96, 213, 0.12);
  --wv-page: #fafafa;
  --wv-surface: #ffffff;
  --wv-surface-2: #f5f5f5;
  --wv-surface-sunken: #f7f7f8;
  --wv-nav-top: #2c2c2c;
  --wv-nav-bottom: #000000;
  --wv-nav-border: #222222;
  --wv-nav-ink: rgba(255, 255, 255, 0.72);
  --wv-border: #e5e5e5;
  --wv-border-strong: #bdbdbd;
  --wv-ink: #000000;
  --wv-ink-2: #6b6b6b;
  --wv-ink-3: #9a9a9a;
  --wv-hint: #757575;
  --wv-ink-inverse: #ffffff;
  --wv-success: #15803d;
  --wv-danger: #e11d48;
  --wv-error-border: #ff5252;
  --wv-warning-deep: #d97706;

  /* Type */
  --wv-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wv-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape */
  --wv-radius-control: 8px;
  --wv-radius-card: 12px;
  --wv-radius-card-lg: 16px;
  --wv-radius-dialog: 20px;
  --wv-radius-pill: 999px;

  /* Shadow */
  --wv-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.06);
  --wv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --wv-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --wv-shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* Layout */
  --wv-width-app: 1200px;
  --wv-width-prose: 720px;
  --wv-control-h: 44px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
html, body {
  background: var(--wv-page) !important;
}
/* Help Scout pads the body by 20px on phones, which shrinks the header; gutters live on #contentArea instead */
body { padding: 0 !important; margin: 0 !important; }
body,
input, button, select, textarea,
h1, h2, h3, h4, h5, h6,
.navbar, #fullArticle, #sidebar, footer {
  font-family: var(--wv-sans) !important;
}
body {
  color: var(--wv-ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a,
.contentWrapper a,
.collection a {
  color: var(--wv-primary);
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
}
a:hover,
.contentWrapper a:hover {
  color: var(--wv-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.category:focus-visible {
  outline: 1.5px solid var(--wv-primary) !important;
  outline-offset: 2px;
}
::selection { background: var(--wv-primary-tint); }

/* --------------------------------------------------------------------------
   2. Header — the app's always-dark nav
      Brand left; Help Center, Waiverly.net and a white "Log in" pill right.
      The two extra links are added by the Header Code snippet (see notes).
   -------------------------------------------------------------------------- */
#mainNav,
#mainNav .navbar-inner {
  background: linear-gradient(180deg, var(--wv-nav-top), var(--wv-nav-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}
#mainNav { border-bottom: 1px solid var(--wv-nav-border) !important; position: relative; z-index: 20; }
#mainNav .navbar-inner { padding: 0 !important; }
#mainNav .container-fluid {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  max-width: var(--wv-width-app);
  min-height: 72px;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box;
}
#mainNav .container-fluid::before,
#mainNav .container-fluid::after { display: none !important; }

/* Brand: the mark in white on the 44px disc, then the name */
#mainNav .brand {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  color: #fff !important;
  text-decoration: none !important;
}
#mainNav .brand img {
  display: block;
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  padding: 9px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: var(--wv-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  filter: brightness(0) invert(1);   /* black mark -> white mark */
}
#mainNav .brand::after {
  content: "Waiverly";
  font-family: var(--wv-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1;
}

/* No hamburger: three links always fit */
#mainNav .btn-navbar { display: none !important; }
#mainNav .nav-collapse,
#mainNav .nav-collapse.collapse {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  float: none !important;
  clear: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}
#mainNav nav { display: block; }
#mainNav .nav {
  display: flex !important;
  align-items: center;
  gap: 4px;
  float: none !important;
  position: static !important;   /* Help Scout positions it absolutely */
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
#mainNav .nav > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}
#mainNav .nav > li > a,
#mainNav .nav > li > a:visited {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px !important;
  margin: 0 !important;
  box-sizing: border-box;
  border: 1px solid transparent !important;
  border-radius: var(--wv-radius-pill) !important;
  background: transparent !important;
  color: var(--wv-nav-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#mainNav .nav > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
#mainNav .nav > li.active > a,
#mainNav .nav > li.active > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.10) !important;
}
#mainNav .nav .caret { display: none !important; }
/* Log in: white pill (the primary button on a dark ground) */
#mainNav .nav > li.wv-login { margin-left: 8px !important; }
/* Help Scout adds one nav item per collection; the header keeps only these three */
#mainNav .nav > li:not(#home):not(.wv-login) { display: none !important; }
#mainNav { overflow: hidden; }
#mainNav .nav > li.wv-login > a,
#mainNav .nav > li.wv-login > a:visited {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 0 20px !important;
}
#mainNav .nav > li.wv-login > a:hover { background: #e5e5e5 !important; color: #000 !important; }
#mainNav .nav > li > a:focus-visible { outline: 1.5px solid #fff !important; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Home hero + search (search first: the main way people find answers)
   -------------------------------------------------------------------------- */
#docsSearch {
  background: var(--wv-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wv-border) !important;
  padding: 64px 24px 56px !important;
  margin: 0 0 40px !important;
  text-align: center;
  box-sizing: border-box;
}
#docsSearch h1 {
  color: var(--wv-ink) !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 720px;
  text-shadow: none !important;
}
#docsSearch h1::after {
  content: "Answers and step-by-step guides for setting up Waiverly, building waiver templates and managing your plan.";
  display: block;
  margin: 14px auto 0;
  max-width: 540px;
  color: var(--wv-ink-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* The form is the pill; input and button sit inside it in a flex row,
   so nothing can drift out of bounds at any width. */
#searchBar {
  position: relative !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: 100% !important;
  max-width: 640px !important;
  margin: 32px auto 0 !important;
  padding: 6px !important;
  box-sizing: border-box;
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border-strong) !important;
  border-radius: var(--wv-radius-pill) !important;
  box-shadow: var(--wv-shadow-md) !important;
  transition: border-color .15s, box-shadow .15s;
  text-align: left;
}
#searchBar:focus-within {
  border-color: var(--wv-primary) !important;
  box-shadow: 0 0 0 4px var(--wv-primary-tint), var(--wv-shadow-md) !important;
}
#searchBar input.search-query,
#searchBar .search-query {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px 0 16px !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: var(--wv-radius-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--wv-ink) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 44px !important;
}
#searchBar .search-query::placeholder { color: var(--wv-hint); opacity: 1; }
#searchBar input.search-query:focus { outline: none !important; box-shadow: none !important; border: 0 !important; }
/* Primary action = ink pill, never a blue fill */
#searchBar button,
#searchBar .btn {
  position: static !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px !important;
  min-width: 44px;
  margin: 0 !important;
  padding: 0 22px !important;
  box-sizing: border-box;
  background: var(--wv-ink) !important;
  color: var(--wv-ink-inverse) !important;
  border: 0 !important;
  border-radius: var(--wv-radius-pill) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  float: none !important;
  top: auto !important;
  right: auto !important;
}
#searchBar button:hover,
#searchBar .btn:hover { background: #2c2c2c !important; }
#searchBar button .icon-search {
  color: var(--wv-ink-inverse) !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1;
}
#searchBar button span { display: inline !important; color: inherit !important; }

/* Sidebar (small) search on category and article pages */
#sidebar #searchBar.sm {
  max-width: none !important;
  margin: 0 0 24px !important;
  padding: 4px !important;
  box-shadow: none !important;
}
#sidebar #searchBar.sm .search-query { height: 36px !important; line-height: 36px !important; padding-left: 12px !important; }
#sidebar #searchBar.sm button,
#sidebar #searchBar.sm .btn { height: 36px !important; width: 36px; min-width: 36px; padding: 0 !important; }
#sidebar #searchBar.sm button span { display: none !important; }

/* Live search dropdown: hangs under the pill, same width */
#serp-dd {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 50;
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-card) !important;
  box-shadow: var(--wv-shadow-popup) !important;
  padding: 6px !important;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: left;
}
#serp-dd .result { margin: 0 !important; padding: 0 !important; list-style: none; }
#serp-dd .result a {
  display: block;
  padding: 10px 12px !important;
  color: var(--wv-ink) !important;
  font-weight: 600;
  border-radius: var(--wv-radius-control);
  text-decoration: none !important;
  white-space: normal;
}
#serp-dd .result a:hover,
#serp-dd .result > li.active a,
#serp-dd .result > li.active {
  background: var(--wv-primary-tint) !important;
  color: var(--wv-primary) !important;
}

/* --------------------------------------------------------------------------
   4. Popular articles (hidden, as before). Delete this block to show them.
   -------------------------------------------------------------------------- */
.most-pop-articles.two-col { display: none !important; }

/* --------------------------------------------------------------------------
   5. Collections + category cards
   -------------------------------------------------------------------------- */
/* Same 1200px column and 32px gutter as the header, so edges line up */
#contentArea {
  max-width: var(--wv-width-app) !important;
  width: auto !important;
  float: none !important;
  margin: 0 auto !important;
  padding: 32px 32px 0 !important;
  box-sizing: border-box;
}
#contentArea > hr.sep { display: none !important; }
#contentArea > footer { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
.collection-category,
section.category-list {
  max-width: var(--wv-width-app);
  margin-left: auto;
  margin-right: auto;
}
/* Home with two or more collections: Help Scout shows one card per collection,
   listing popular articles. Cards get the app's card style; the article list is
   kept, "Browse all articles" becomes a pill. (With a single collection the home
   page shows category cards instead; see below.) */
/* Help Scout names the wrapper .twoCol or .threeCol depending on how many
   collections exist and lays the cards out as inline-blocks of different heights,
   which is what made the page look uneven. One auto-filling grid replaces both:
   as many 280px+ columns as fit, every card in a row the same height, and any
   number of collections wraps into tidy rows. */
#contentArea > .twoCol,
#contentArea > .threeCol,
#contentArea > [class*="Col"].row-fluid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
#contentArea > .twoCol::before,
#contentArea > .twoCol::after,
#contentArea > .threeCol::before,
#contentArea > .threeCol::after { display: none !important; content: none !important; }  /* Bootstrap's clearfix would take a grid cell */
#contentArea > .twoCol .collection,
#contentArea > .threeCol .collection {
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  height: auto !important;
  min-height: 220px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-card) !important;
  box-shadow: var(--wv-shadow-card) !important;
  overflow: hidden;
}
#contentArea .collection .collection-head,
#contentArea .collection .collection-body { width: auto !important; }
/* The body fills the card so the "Browse all articles" pill sits on the same
   baseline in every card of a row */
#contentArea .collection .collection-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#contentArea .collection .collection-body .popArticles { flex: 1 1 auto; }
#contentArea .collection .collection-body > a.browse { margin-top: auto !important; align-self: flex-start; }
/* Keep cards short: show the first six popular articles; the title links to the
   full collection */
#contentArea .collection .popArticles li:nth-child(n+7) { display: none; }
#contentArea .collection-head p:empty { display: none !important; }
#contentArea .collection-head h2 a::after { content: " \2192"; font-weight: 400; color: var(--wv-ink-3); }
#contentArea .collection-head h2 a:hover::after { color: var(--wv-primary); }
#contentArea .collection-head { padding: 20px 20px 16px !important; border-bottom: 1px solid var(--wv-border); text-align: left !important; }
#contentArea .collection-head h2 { margin: 0 0 4px !important; font-size: 18px !important; line-height: 24px !important; font-weight: 700 !important; text-align: left !important; }
#contentArea .collection-head h2 a { color: var(--wv-ink) !important; text-decoration: none !important; }
#contentArea .collection-head p { margin: 0 !important; color: var(--wv-ink-2) !important; font-size: 14px !important; }
#contentArea .collection-body { padding: 8px 20px 16px !important; }
#contentArea .collection-body .popArticles { margin: 0 !important; }
#contentArea .collection-body .popArticles li { margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--wv-border); }
#contentArea .collection-body .popArticles li:first-child { border-top: 0; }
#contentArea .collection-body .popArticles a { display: block; padding: 11px 0 !important; margin: 0 !important; color: var(--wv-ink) !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; }
#contentArea .collection-body .popArticles a:hover { color: var(--wv-primary) !important; }
#contentArea .collection-body .popArticles a i { display: none !important; }
#contentArea .collection-body > a,
#contentArea .collection-body .viewAll {
  display: inline-flex !important;
  align-items: center;
  height: 36px;
  margin: 12px 0 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--wv-border-strong) !important;
  border-radius: var(--wv-radius-pill) !important;
  color: var(--wv-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Home with a single collection: Help Scout shows the cards with no heading */
#contentArea > section.category-list { margin: 0 auto 8px !important; }
#contentArea > section.category-list::before {
  content: "Browse by topic";
  display: block !important;
  grid-column: 1 / -1;
  color: var(--wv-ink);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-align: left;
}
.collection-category { padding: 0; margin-bottom: 40px !important; }
.collection-category h2,
.collection-category h2 a {
  color: var(--wv-ink) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-transform: none !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  padding: 0 !important;
}
section.category-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0 !important;
}
section.category-list::before,
section.category-list::after { display: none !important; }
.category-list .category {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box;
  text-align: left !important;
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-card) !important;
  box-shadow: var(--wv-shadow-card) !important;
  text-decoration: none !important;
  transition: border-color .15s;
}
.category-list .category:hover {
  background: var(--wv-surface) !important;
  border-color: var(--wv-ink) !important;
  box-shadow: var(--wv-shadow-card) !important;
}
.category-list .category h3 {
  color: var(--wv-ink) !important;
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.category-list .category p {
  color: var(--wv-ink-2) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  margin: 0 0 16px !important;
}
.category-list .category .article-count {
  margin: auto 0 0 !important;
  padding: 3px 9px;
  display: inline-block;
  border-radius: var(--wv-radius-pill);
  background: var(--wv-surface-2);
  color: var(--wv-ink-2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.category-list .category:hover .article-count {
  background: var(--wv-primary-tint);
  color: var(--wv-primary) !important;
}

/* Category icons: the Waiverly icon on a 46px surface-2 disc.
   Add one block per new category (ID is in the category URL). */
.category-list .category[id^="category-"]::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: var(--wv-radius-pill);
  background-color: var(--wv-surface-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
#category-137::before { background-image: url("https://waiverly.net/wp-content/uploads/2025/04/waiverly-account-help-center-icon.png"); }   /* Setting up your account */
#category-144::before { background-image: url("https://waiverly.net/wp-content/uploads/2025/04/waiverly-edit-waiver-help-center-icon.png"); } /* Waiver template tutorials */
#category-155::before { background-image: url("https://waiverly.net/wp-content/uploads/2025/04/waiverly-plan-help-center-icon.png"); }        /* Plans & subscriptions */
#category-151::before { background-image: url("https://waiverly.net/wp-content/uploads/2025/04/waiverly-dashboard-help-center-icon.png"); }   /* Features */
/* Neutralise the old header-image rules on these IDs */
#category-137, #category-144, #category-155, #category-151 { background-image: none !important; padding-top: 20px !important; }

/* --------------------------------------------------------------------------
   6. Category + search-results pages
   -------------------------------------------------------------------------- */
#main-content { padding-bottom: 40px; }
.contentWrapper {
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-card) !important;
  box-shadow: var(--wv-shadow-card) !important;
  padding: 32px !important;
}
#categoryHead h1,
.contentWrapper h1 {
  color: var(--wv-ink) !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}
#categoryHead .descrip {
  color: var(--wv-ink-2) !important;
  font-size: 14px;
  margin-top: 4px;
}
#categoryHead .sort select {
  height: 36px;
  border: 1px solid var(--wv-border-strong);
  border-radius: var(--wv-radius-control);
  font-size: 14px;
  background: var(--wv-surface);
}
.articleList { margin: 16px 0 0 !important; }
.articleList li {
  border-top: 1px solid var(--wv-border);
  padding: 0 !important;
  margin: 0 !important;
}
.articleList li:first-child { border-top: 0; }
.articleList li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 0 !important;
  color: var(--wv-ink) !important;
  font-weight: 600 !important;
  font-size: 14px;
  text-decoration: none !important;
}
.articleList li a:hover { color: var(--wv-primary) !important; }
.articleList li a i {
  flex: 0 0 auto;
  margin: 0 !important;
  position: static !important;
  width: 36px;
  height: 36px;
  line-height: 36px !important;
  text-align: center;
  border-radius: var(--wv-radius-control);
  background: var(--wv-surface-2);
  color: var(--wv-ink-2) !important;
}
.articleList li a span { flex: 1; }
.articleList li a::after {
  content: "\203A";
  color: var(--wv-ink-3);
  font-size: 22px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   7. Sidebar
   -------------------------------------------------------------------------- */
#sidebar h3 {
  color: var(--wv-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px 12px !important;
}
#sidebar .nav-list { margin: 0 0 24px !important; }
#sidebar .nav-list li a {
  display: block;
  padding: 9px 12px !important;
  margin: 0 0 2px !important;
  border-radius: var(--wv-radius-card) !important;
  color: var(--wv-ink) !important;
  font-weight: 600 !important;
  font-size: 14px;
  text-shadow: none !important;
  text-decoration: none !important;
}
#sidebar .nav-list li a:hover { background: var(--wv-surface-2) !important; }
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover {
  background: var(--wv-primary-tint) !important;
  color: var(--wv-primary) !important;
  font-weight: 700 !important;
}
#sidebar .nav-list .active a i,
#sidebar .nav-list li a i { display: none; }

/* --------------------------------------------------------------------------
   8. Article — 720px reading column, prose rhythm
   -------------------------------------------------------------------------- */
#fullArticle {
  max-width: var(--wv-width-prose);
  color: var(--wv-ink) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}
#fullArticle .title {
  color: var(--wv-ink) !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  margin: 0 0 24px !important;
  padding-right: 40px;
}
#fullArticle h2 {
  color: var(--wv-ink) !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  margin: 40px 0 12px !important;
  padding-top: 24px;
  border-top: 1px solid var(--wv-border);
}
#fullArticle h3 {
  color: var(--wv-ink) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  margin: 28px 0 8px !important;
}
#fullArticle h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 20px 0 6px !important;
}
#fullArticle p { margin: 0 0 16px !important; }
#fullArticle ul,
#fullArticle ol { margin: 0 0 20px 22px !important; }
#fullArticle li { margin-bottom: 8px; }
#fullArticle ul { list-style: disc !important; }
#fullArticle ul ul { list-style: circle !important; }
#fullArticle strong { font-weight: 700; }
#fullArticle strong a,
#fullArticle a { color: var(--wv-primary) !important; font-weight: 600; }

/* Numbered steps read as the app's step markers */
#fullArticle ol { list-style: none; counter-reset: wv-step; margin-left: 0 !important; padding-left: 0 !important; }
#fullArticle ol > li {
  counter-increment: wv-step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
}
#fullArticle ol > li::before {
  content: counter(wv-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: var(--wv-radius-pill);
  background: var(--wv-ink);
  color: var(--wv-ink-inverse);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* Screenshots */
#fullArticle img {
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-card);
  box-shadow: var(--wv-shadow-card);
  margin: 8px 0 20px;
}
/* Centred images: Help Scout's "align center" figures, <center> and inline text-align */
#fullArticle figure.align-center,
#fullArticle center img,
#fullArticle [align="center"] img,
#fullArticle [style*="text-align: center"] img,
#fullArticle [style*="text-align:center"] img {
  margin-left: auto !important;
  margin-right: auto !important;
}
#fullArticle figure.align-center img { display: block; margin-left: auto; margin-right: auto; }

#fullArticle figure { margin-top: 8px !important; margin-bottom: 28px !important; }
/* The Help Scout editor drops the align-center class when it converts pasted HTML, so centre every
   figure image by default (article screenshots are always full-width captures). */
#fullArticle figure img { display: block; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; }
/* Help Scout pulls the caption up over the image (negative margin); keep it below */
#fullArticle figcaption {
  display: block;
  position: static !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: var(--wv-ink-2) !important;
  background: none !important;
  font-size: 12px !important;
  line-height: 1.4;
  text-align: center;
}
#fullArticle .video,
#fullArticle .video-responsive {
  border-radius: var(--wv-radius-card);
  overflow: hidden;
  background: var(--wv-ink);
  box-shadow: var(--wv-shadow-card);
  margin: 0 0 24px;
}
/* Nested lists inside a step keep plain bullets */
#fullArticle ol > li > ul { margin: 8px 0 8px 20px !important; }
#fullArticle ol > li > p { margin-bottom: 8px !important; }

/* Code */
#fullArticle code {
  font-family: var(--wv-mono);
  font-size: 13px;
  padding: 2px 6px;
  background: var(--wv-surface-2);
  border-radius: 6px;
  color: var(--wv-ink);
}
#fullArticle pre {
  background: var(--wv-surface-sunken);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-card);
  padding: 16px;
}

/* Tables */
#fullArticle table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-card);
  overflow: hidden;
  margin: 8px 0 24px;
  font-size: 14px;
  line-height: 1.45;
}
#fullArticle th {
  background: var(--wv-surface-2);
  color: var(--wv-ink-2);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
#fullArticle th,
#fullArticle td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wv-border);
}
#fullArticle tr:last-child td { border-bottom: 0; }

/* Callouts (Help Scout editor: Insert > Callout). Tinted, no coloured left border. */
.callout,
.callout-yellow,
.callout-blue,
.callout-red,
.callout-green,
#fullArticle .callout {
  border: 0 !important;
  border-radius: var(--wv-radius-card) !important;
  padding: 16px 18px !important;
  margin: 8px 0 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--wv-ink) !important;
  background: var(--wv-surface-2) !important;
}
.callout-blue  { background: rgba(13, 96, 213, 0.08) !important; }
.callout-green { background: rgba(21, 128, 61, 0.08) !important; }
.callout-yellow{ background: rgba(245, 158, 11, 0.12) !important; }
.callout-red   { background: rgba(225, 29, 72, 0.08) !important; }
#fullArticle .callout p:last-child,
#fullArticle .callout-blue p:last-child,
#fullArticle .callout-green p:last-child,
#fullArticle .callout-yellow p:last-child,
#fullArticle .callout-red p:last-child { margin-bottom: 0 !important; }

/* Print link */
.printArticle { color: var(--wv-ink-3) !important; }
.printArticle:hover { color: var(--wv-ink) !important; }

/* --------------------------------------------------------------------------
   9. Article footer: rating, last updated, related
   -------------------------------------------------------------------------- */
.articleFoot {
  max-width: var(--wv-width-prose);
  border-top: 1px solid var(--wv-border) !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
  color: var(--wv-ink-2) !important;
}
.articleFoot p,
.articleFoot time,
.articleFoot .lu { color: var(--wv-ink-2) !important; font-size: 12px !important; }
.articleRatings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--wv-surface-2);
  border-radius: var(--wv-radius-card);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.articleRatings-question {
  color: var(--wv-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.articleRatings-actions { display: flex !important; align-items: center; gap: 8px; height: auto !important; width: auto !important; }
.articleRatings .rateAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--wv-border-strong) !important;
  background: var(--wv-surface) !important;
  color: var(--wv-ink) !important;
  text-decoration: none !important;
}
.articleRatings .rateAction:hover { background: var(--wv-surface-2) !important; }
/* Help Scout places the face and the selected ring at the button's top-left; centre both */
.articleRatings .rateAction { position: relative !important; overflow: visible; }
.articleRatings .rateAction .rating-face {
  display: block;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  margin: auto !important;
  width: 24px !important;
  height: 24px !important;
}
.articleRatings .rateAction::before,
.articleRatings .rateAction::after {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  margin: auto !important;
  transform: none !important;
}
.articleRatings-feedback-message { color: var(--wv-success) !important; font-weight: 600; }

.related {
  max-width: var(--wv-width-prose);
  margin-top: 24px !important;
  padding: 20px !important;
  background: var(--wv-surface) !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-card) !important;
  box-shadow: var(--wv-shadow-card);
}
.related h3 {
  color: var(--wv-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
}
.related ul { margin: 0 !important; }
.related ul > li { border-top: 1px solid var(--wv-border); margin: 0 !important; }
.related ul > li:first-child { border-top: 0; }
.related ul > li a {
  display: block;
  padding: 12px 0 !important;
  color: var(--wv-ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.related ul > li a:hover { color: var(--wv-primary) !important; }
.related ul > li a i { display: none; }

/* --------------------------------------------------------------------------
   10. Buttons, contact modal, forms
   -------------------------------------------------------------------------- */
.btn {
  height: var(--wv-control-h);
  padding: 0 20px !important;
  border-radius: var(--wv-radius-pill) !important;
  border: 1px solid var(--wv-border-strong) !important;
  background: transparent !important;
  color: var(--wv-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn:hover, .btn:focus { background: var(--wv-surface-2) !important; color: var(--wv-ink) !important; }
.btn-primary,
#contactModal .btn-primary,
#contactModal button[type="submit"] {
  background: var(--wv-ink) !important;
  border-color: var(--wv-ink) !important;
  color: var(--wv-ink-inverse) !important;
  box-shadow: var(--wv-shadow-card) !important;
}
.btn-primary:hover,
#contactModal .btn-primary:hover,
#contactModal button[type="submit"]:hover { background: #2c2c2c !important; color: var(--wv-ink-inverse) !important; }
.btn.disabled, .btn[disabled] {
  background: transparent !important;
  border-color: var(--wv-border-strong) !important;
  color: var(--wv-ink-3) !important;
}

#contactModal,
.modal {
  border: 0 !important;
  border-radius: var(--wv-radius-dialog) !important;
  box-shadow: var(--wv-shadow-lg) !important;
  overflow: hidden;
}
#contactModal h2,
.abuse h2 {
  color: var(--wv-ink) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  background: none !important;
}
#contactModal .control-label {
  color: var(--wv-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal select,
#contactModal textarea {
  min-height: var(--wv-control-h);
  box-sizing: border-box;
  padding: 12px 14px !important;
  font-size: 16px !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: var(--wv-radius-control) !important;
  box-shadow: none !important;
  background: var(--wv-surface) !important;
}
#contactModal textarea { min-height: 104px; line-height: 1.6; }
#contactModal input:focus,
#contactModal select:focus,
#contactModal textarea:focus {
  border: 1.5px solid var(--wv-primary) !important;
  outline: none !important;
}
#contactModal .error input,
#contactModal .error textarea { border-color: var(--wv-error-border) !important; }
#contactModal .help-inline,
#contactModal .error .help-block { color: var(--wv-danger) !important; font-size: 12px; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--wv-border);
  margin-top: 40px;
  padding: 24px 16px 40px !important;
  color: var(--wv-ink-2) !important;
  font-size: 12px !important;
  text-align: center;
}
footer a { color: var(--wv-ink-2) !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Responsive — breakpoints from the design system (1300 / 550)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  section.category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #mainNav .container-fluid { padding: 0 24px !important; }
  #contentArea { padding: 24px 24px 0 !important; }
  /* Category + article pages: search and topics move above the content,
     topics become a horizontal row of chips */
  #contentArea > .row-fluid { display: flex !important; flex-direction: column; }
  #contentArea > .row-fluid > #sidebar { order: -1; width: auto !important; float: none !important; margin: 0 0 16px !important; padding: 0 !important; }
  #contentArea > .row-fluid > #main-content { width: auto !important; float: none !important; margin: 0 !important; }
  #sidebar #searchBar.sm { margin: 0 0 12px !important; }
  #sidebar h3 { display: none !important; }
  #sidebar .nav-list { display: flex !important; gap: 8px; overflow-x: auto; margin: 0 !important; padding: 0 0 4px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #sidebar .nav-list::-webkit-scrollbar { display: none; }
  #sidebar .nav-list li { flex: 0 0 auto; margin: 0 !important; }
  #sidebar .nav-list li a { white-space: nowrap; margin: 0 !important; padding: 8px 14px !important; border: 1px solid var(--wv-border); border-radius: var(--wv-radius-pill) !important; background: var(--wv-surface) !important; font-size: 13px !important; }
  #sidebar .nav-list .active a { border-color: transparent; background: var(--wv-primary-tint) !important; }
  .contentWrapper { padding: 24px !important; }
  .related { padding: 16px !important; }
}
/* Phone: two neat rows. Row 1 = brand + Log in. Row 2 = Help Center | Waiverly.net
   as an even, full-width segmented control (the app's SegmentedPillTabBar). */
@media (max-width: 600px) {
  #mainNav .container-fluid {
    flex-wrap: wrap;
    gap: 0;
    min-height: 0;
    padding: 12px 16px !important;
  }
  #mainNav .container-fluid::after {        /* forces the line break after Log in */
    content: "" !important;
    display: block !important;
    flex-basis: 100%;
    height: 0;
    order: 2;
  }
  #mainNav .brand img { width: 40px !important; height: 40px !important; padding: 8px; }
  #mainNav .brand::after { font-size: 17px; }
  #mainNav .nav-collapse, #mainNav .nav-collapse.collapse, #mainNav nav, #mainNav .nav { display: contents !important; }
  #mainNav .nav > li.wv-login { order: 2; margin: 0 0 0 auto !important; }
  #mainNav .nav > li.wv-login > a { height: 40px; padding: 0 18px !important; }
  /* Row 2: Help Center as a full-width link back to the home page */
  #mainNav .nav > li#home {
    order: 3;
    flex: 1 1 100%;
    margin-top: 12px !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--wv-radius-pill);
    padding: 3px !important;
  }
  #mainNav .nav > li#home > a { height: 34px; width: 100%; padding: 0 8px !important; font-size: 13px !important; background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
}
@media (max-width: 550px) {
  #docsSearch { padding: 40px 16px 36px !important; margin-bottom: 28px !important; }
  #docsSearch h1 { font-size: 28px !important; }
  #docsSearch h1::after { font-size: 15px; margin-top: 10px; }
  #searchBar { margin-top: 24px !important; padding: 4px !important; }
  #searchBar input.search-query,
  #searchBar .search-query { height: 44px !important; padding-left: 14px !important; }
  #searchBar button,
  #searchBar .btn { width: 44px; padding: 0 !important; }
  #searchBar button span { display: none !important; }
  section.category-list { grid-template-columns: 1fr; gap: 12px; }
  .category-list .category { padding: 16px !important; }
  #contentArea > .twoCol,
  #contentArea > .threeCol { grid-template-columns: 1fr; gap: 12px; }
  #contentArea .collection { min-height: 0 !important; }
  #contentArea { padding: 16px 16px 0 !important; }
  .contentWrapper { padding: 20px 16px !important; }
  #fullArticle { font-size: 15px !important; }
  #fullArticle .title { font-size: 24px !important; padding-right: 32px; }
  #fullArticle h2 { font-size: 20px !important; line-height: 26px !important; margin-top: 32px !important; }
  #fullArticle h3 { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   13. Device-specific media in articles
   Wrap a desktop GIF in <figure class="wv-desktop"> and the phone version in
   <figure class="wv-mobile"> (a <div> works too). Phones (under 768px) see the mobile one only.
   -------------------------------------------------------------------------- */
.wv-mobile { display: none; }
figure.wv-desktop, figure.wv-mobile { margin: 8px 0 28px !important; }
.wv-desktop img,
.wv-mobile img { display: block; margin: 0 auto 8px; }
.wv-mobile img { max-width: 360px !important; }
@media (max-width: 768px) {
  .wv-desktop { display: none; }
  .wv-mobile { display: block; }
}

/* --------------------------------------------------------------------------
   14. Table of contents (hand-written per article)
   <nav class="wv-toc">
     <p class="wv-toc-title">In this article <span>10 steps · about 8 min</span></p>
     <ol>
       <li class="wv-toc-plain"><a href="#id"><span class="wv-toc-n">•</span>Intro section</a></li>
       <li><a href="#id"><span class="wv-toc-n">1</span>Step name</a></li>
     </ol>
   </nav>
   -------------------------------------------------------------------------- */
#fullArticle .wv-toc {
  margin: 8px 0 32px;
  padding: 0;
  background: var(--wv-surface);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-card);
  box-shadow: var(--wv-shadow-card);
  overflow: hidden;
}
#fullArticle .wv-toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 14px 20px;
  border-bottom: 1px solid var(--wv-border);
  background: var(--wv-surface-sunken);
  color: var(--wv-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
#fullArticle .wv-toc-title::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: no-repeat center / 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'><path d='M9 6h11M9 12h11M9 18h11'/><circle cx='4.5' cy='6' r='1.3' fill='%236b6b6b' stroke='none'/><circle cx='4.5' cy='12' r='1.3' fill='%236b6b6b' stroke='none'/><circle cx='4.5' cy='18' r='1.3' fill='%236b6b6b' stroke='none'/></svg>");
}
#fullArticle .wv-toc-title span { margin-left: auto; color: var(--wv-ink-2); font-size: 12px; font-weight: 600; }
#fullArticle .wv-toc ol {
  list-style: none;
  margin: 0 !important;
  padding: 8px 0 !important;
  columns: 2;
  column-gap: 0;
}
#fullArticle .wv-toc ol > li {
  position: static;
  margin: 0 !important;
  padding: 0 !important;
  break-inside: avoid;
  font-size: 14px;
  line-height: 1.35;
}
#fullArticle .wv-toc ol > li::before { content: none !important; display: none !important; }
#fullArticle .wv-toc li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: var(--wv-ink) !important;
  font-weight: 600;
  text-decoration: none !important;
}
#fullArticle .wv-toc li a::after {
  content: "\203A";
  margin-left: auto;
  color: var(--wv-border-strong);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
#fullArticle .wv-toc .wv-toc-n {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--wv-radius-pill);
  background: var(--wv-surface-2);
  color: var(--wv-ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  transition: background .15s, color .15s;
}
#fullArticle .wv-toc .wv-toc-plain .wv-toc-n { background: transparent; color: var(--wv-ink-3); font-size: 16px; line-height: 22px; }
#fullArticle .wv-toc li a:hover { background: var(--wv-surface-sunken); color: var(--wv-primary) !important; }
#fullArticle .wv-toc li a:hover .wv-toc-n { background: var(--wv-primary-tint); color: var(--wv-primary); }
#fullArticle .wv-toc li a:hover::after { opacity: 1; }
#fullArticle h2 { scroll-margin-top: 16px; }
@media (max-width: 550px) {
  #fullArticle .wv-toc ol { columns: 1; }
  #fullArticle .wv-toc li a { padding: 10px 16px; }
  #fullArticle .wv-toc-title { padding: 12px 16px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}