/* ============================================================
   The Copy Viking — Help Scout Docs custom stylesheet
   Paste into:  Manage › Docs › [Your Site] › Custom Code
                (Choose File, OR host this file and paste the URL
                 into the "Custom Stylesheet URL" field)

   Companion <head> code (paste into the "Insert <head> Code"
   field on the same screen) — loads our fonts:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">

   Selectors used here are based on Help Scout's published CSS
   guide (`#docsSearch`, `#searchBar`, `.category-list`,
   `.twoCol .collection`, `.threeCol .collection`, `#fullArticle`,
   `body:after`, `.articleFoot time.lu`). Site-specific selectors
   (footer, contact form, breadcrumb) may need to be confirmed
   via View Source on the live Docs site — see notes at bottom.
   ============================================================ */


/* ── DESIGN TOKENS (Brand 2.0 — light default) ────────────── */
:root {
  --bg:#F0EDE5;
  --page:#FAF8F4;
  --surface:#FFFFFF;
  --border:rgba(0,0,0,0.08);
  --border-2:rgba(0,0,0,0.13);

  --ink:#16140E;
  --ink-2:#383530;
  --ink-3:#706D65;
  --ink-4:#A09C94;
  --ink-5:#A8A49C;

  --green:#1A4D34;
  --green-mid:#236642;
  --green-light:rgba(26,77,52,0.10);
  --green-glow:rgba(26,77,52,0.18);

  --amber:#9A6B2C;
  --amber-light:rgba(154,107,44,0.10);
  --amber-glow:rgba(154,107,44,0.18);

  --r:10px;
  --r-sm:7px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --sh:0 1px 3px rgba(0,0,0,0.05),0 2px 8px rgba(0,0,0,0.04);
  --sh-hover:0 6px 20px rgba(0,0,0,0.09),0 2px 6px rgba(0,0,0,0.05);

  --ff-serif:'Bricolage Grotesque',sans-serif;
  --ff-sans:'Manrope',system-ui,sans-serif;
}

/* Note: dark-mode auto-detection was removed per project decision —
   Help Scout has no toggle, so we render light always to match the
   brand's default look. To re-enable, wrap dark tokens in
   @media (prefers-color-scheme: dark) { :root { ... } }. */


/* ── BASE / RESET ─────────────────────────────────────────── */
body {
  font-family: var(--ff-sans) !important;
  font-size: 18px !important;
  background: var(--page) !important;
  color: var(--ink) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Wipe HelpScout's default body:after background overlay */
body:after { display: none !important; }

a { color: inherit; }
a:hover { color: var(--green); }


/* ── HEADER / NAVBAR (#mainNav) ───────────────────────────── */
/* HelpScout renders <header id="mainNav" class="navbar"> with
   a .brand link (the title) and a .nav <ul> for menu items
   (e.g. the Contact link that opens Beacon). */
#mainNav.navbar { margin: 0 !important; }
#mainNav .navbar-inner {
  background: var(--page) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
#mainNav .container-fluid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem !important;
  height: 60px;
  display: flex;
  align-items: center;
}
#mainNav .brand {
  font-family: var(--ff-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
#mainNav .brand:hover { color: var(--green) !important; }
#mainNav .nav { margin: 0 0 0 auto !important; }
#mainNav .nav > li > a {
  font-family: var(--ff-sans) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: var(--ink-4) !important;
  padding: .35rem .85rem !important;
  border-radius: 100px !important;
  text-shadow: none !important;
  transition: all .15s;
}
#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
  color: var(--green) !important;
  background: var(--green-light) !important;
}


/* ── HERO / SEARCH BANNER (#docsSearch) — green band with inverted colours ── */
#docsSearch {
  background: var(--green) !important;
  border-bottom: none !important;
  padding: 4.5rem 2.5rem 4rem !important;
  text-align: center;
}
#docsSearch .container,
#docsSearch > * {
  max-width: 1280px;
  margin: 0 auto;
}

/* The native H1 is "Common questions and support documentation".
   We hide it visually (size 0) and inject our friendlier headline
   via a ::before pseudo-element. The original text is still in the
   DOM so screen readers/SEO see it.
   Using flexbox centering on the h1 because Help Scout's stylesheet
   has a max-width on the h1 that defeats text-align: center. */
body section#docsSearch h1 {
  font-size: 0 !important;
  color: transparent !important;
  margin: 0 0 1.75rem !important;
  padding: 0 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}
body section#docsSearch h1::before {
  content: "How can we help?";
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Search — input pill + button pill, side by side */
#searchBar {
  max-width: 620px;
  margin: 0 auto !important;
  display: flex !important;
  align-items: stretch;
  gap: .5rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  position: relative;
}
#searchBar .search-query,
#searchBar input[type="search"] {
  flex: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 100px !important;
  padding: .85rem 1.5rem !important;
  font-family: var(--ff-sans) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s;
}
#searchBar .search-query:focus,
#searchBar input[type="search"]:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 2px 12px rgba(0,0,0,0.18) !important;
}
#searchBar .search-query::placeholder { color: var(--ink-4); }

/* Override Help Scout's position: absolute / right: -1px / top: 24px
   on the search button so it joins the flex layout as a sibling
   pill next to the input instead of overlapping it.
   Inverted colour scheme to contrast against the green hero band. */
#searchBar button,
#searchBar button[type="submit"] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  height: auto !important;
  background: #fff !important;
  color: var(--green) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: .85rem 1.9rem !important;
  font-family: var(--ff-sans) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  transition: background .15s, color .15s, box-shadow .15s;
}
#searchBar button:hover,
#searchBar button[type="submit"]:hover {
  background: var(--page) !important;
  color: var(--green) !important;
}
#searchBar button:hover {
  background: var(--green-mid) !important;
  color: #fff !important;
}
#searchBar button i.icon-search { display: none !important; }

/* Search-suggestions dropdown — pin under the pill, not in the flex flow */
#searchBar #serp-dd {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
}


/* ── PAGE CONTAINER ───────────────────────────────────────── */
/* HelpScout wraps the page body in <section id="contentArea"
   class="container-fluid">. We cap its width and add padding. */
#contentArea.container-fluid,
#contentArea {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 3rem 2.5rem 2.5rem !important;
}


/* ── CATEGORY GRID (home page) ────────────────────────────── */
/* HelpScout markup on the home page when the site has only a
   small number of collections:
     <section class="category-list">
       <a class="category" href="..."><h3>Title</h3>
         <p>description</p>
         <p class="article-count"><span>3</span> articles</p>
       </a>
       …
     </section>
   The whole <a class="category"> is the card; there's no inner
   article list (that's only on the category page). */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.1rem !important;
  margin: 0 0 3rem !important;
  padding: 0 !important;
}

.category-list a.category,
a.category {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh) !important;
  padding: 7rem 1.75rem 1.75rem !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 280px;
  box-sizing: border-box !important;
  overflow: visible;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: box-shadow .2s, transform .2s;
}
.category-list a.category:hover,
a.category:hover {
  box-shadow: var(--sh-hover) !important;
  transform: translateY(-2px);
  color: var(--ink) !important;
}

/* Icon circle (::before) — pale-green disc at the top of every card */
a.category::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  background-color: var(--green-light);
  border-radius: 50%;
}

/* Icon glyph (::after) — Lucide SVG used as a mask so the colour
   tracks var(--green) and adapts to dark mode automatically.
   Per-collection icons are assigned by Help Scout's category ID below. */
a.category::after {
  content: "";
  position: absolute;
  top: calc(1.75rem + 20px);          /* circle top + (72 − 32) / 2 */
  left: calc(50% - 16px);             /* horizontal center for a 32px glyph */
  width: 32px;
  height: 32px;
  background-color: var(--green);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 32px 32px;
          mask-size: 32px 32px;
}

/* Per-collection Lucide icons.
   When you add a new collection in Help Scout, look up its ID in the
   page source (e.g. id="category-23") and add a rule like the ones
   below. Lucide SVGs come from https://lucide.dev — paste the inner
   SVG markup, URL-encode it, and use stroke='black' (the mask only
   cares about shape; colour comes from background-color above). */
a#category-18::after {
  /* Co-Author — feather */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' x2='2' y1='8' y2='22'/%3E%3Cline x1='17.5' x2='9' y1='15' y2='15'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' x2='2' y1='8' y2='22'/%3E%3Cline x1='17.5' x2='9' y1='15' y2='15'/%3E%3C/svg%3E");
}
a#category-17::after {
  /* Membership Site — home */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
a#category-5::after {
  /* Sudoku Maker — grid-3x3 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
}
a#category-8::after {
  /* General — help-circle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* Card title (centered, below icon) */
a.category > h3 {
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 0 .65rem !important;
  font-family: var(--ff-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-shadow: none !important;
}

/* Description paragraph — empty <p>s get hidden so the layout
   stays tidy for collections without a description. */
a.category > p {
  font-size: .92rem !important;
  color: var(--ink-3) !important;
  line-height: 1.5;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}
a.category > p:empty { display: none; }

/* Article-count link (centered at bottom, styled as a quiet link) */
a.category > p.article-count {
  border-top: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: auto 0 0 !important;
  font-family: var(--ff-sans) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  flex: 0 0 auto;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.category > p.article-count .notranslate {
  font-family: var(--ff-sans);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  margin-right: .25em;
  color: inherit;
}


/* ── ARTICLE LIST (inside a category page) ────────────────── */
/* When a visitor clicks a category, HelpScout lists articles.
   The structure tends to be `.article-list > a` per article,
   though theme variants exist. */
.article-list a,
.articles-list a,
.collection-list a {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: .95rem !important;
  font-weight: 500;
  color: var(--ink-2) !important;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background .12s, color .12s;
}
.article-list a:hover,
.articles-list a:hover,
.collection-list a:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}


/* ── ARTICLE PAGE (#fullArticle) ──────────────────────────── */
#fullArticle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 3rem 3.5rem !important;
  margin: 2.5rem auto !important;
  max-width: 880px !important;
  color: var(--ink);
}
#fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4 {
  font-family: var(--ff-serif) !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}
#fullArticle h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
#fullArticle h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: 2.5rem 0 1rem; }
#fullArticle h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; }
#fullArticle p, #fullArticle li {
  font-family: var(--ff-sans);
  font-size: 1rem;
  color: var(--ink-3);
  line-height: 1.7;
}
#fullArticle a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
#fullArticle code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .92em;
  color: var(--ink);
}
#fullArticle pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
#fullArticle pre code { background: none; border: none; padding: 0; }
#fullArticle blockquote {
  border-left: 3px solid var(--green);
  background: var(--green-light);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 1.5rem 0;
  color: var(--ink-2);
}
#fullArticle img {
  max-width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Article footer — hide last-updated timestamp per HelpScout's docs example */
.articleFoot time.lu { display: none; }


/* ── CONTACT FORM (if hasContactForm: true) ───────────────── */
#contactForm,
form#contactForm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 2rem 2.25rem;
  max-width: 640px;
  margin: 2rem auto;
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: .75rem .95rem;
  font-family: var(--ff-sans);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
#contactForm input:focus,
#contactForm textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
  outline: none;
}
#contactForm button[type="submit"] {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .65rem 1.4rem;
  font-family: var(--ff-sans);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
#contactForm button[type="submit"]:hover {
  background: var(--green-mid);
  transform: translateY(-1px);
}


/* ── FOOTER ───────────────────────────────────────────────── */
/* HelpScout renders <footer class="center"> inside #contentArea
   with copyright + "Powered by Help Scout" line. */
#contentArea > footer.center,
footer.center {
  border-top: 1px solid var(--border) !important;
  padding: 2rem 0 0 !important;
  margin-top: 3rem !important;
  background: transparent !important;
  text-align: center;
  font-size: .88rem !important;
  color: var(--ink-5) !important;
}
footer.center p { color: var(--ink-5) !important; margin: 0; }
footer.center a {
  color: var(--ink-5) !important;
  text-decoration: none;
  transition: color .15s;
}
footer.center a:hover { color: var(--ink-3) !important; }


/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .category-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 860px) {
  #mainNav .container-fluid { padding: 0 1.5rem !important; }
  #docsSearch { padding: 3rem 1.5rem 2.5rem !important; }
  #docsSearch h1::before { font-size: 2.1rem !important; }
  #contentArea.container-fluid { padding: 2rem 1.5rem !important; }
  #fullArticle { padding: 2rem 1.5rem !important; }
}
@media (max-width: 580px) {
  .category-list { grid-template-columns: 1fr !important; }
  #contentArea.container-fluid { padding: 1.5rem 1rem !important; }
  #docsSearch h1::before { font-size: 1.8rem !important; }
}


/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   NOTES

   1. SELECTORS CONFIRMED via View Source on
      https://thecopyviking.helpscoutdocs.com/ (May 2026):
        - #mainNav.navbar               (header)
        - #mainNav .navbar-inner        (header band)
        - #mainNav .brand               (site title)
        - #mainNav .nav > li > a        (nav links)
        - #docsSearch                   (search hero)
        - #searchBar (form)             (search wrapper)
        - #searchBar .search-query      (search input)
        - #searchBar button             (search submit)
        - #contentArea.container-fluid  (page wrapper)
        - .category-list                (home page grid container)
        - a.category                    (collection card — whole link)
        - a.category > h3               (card title)
        - a.category > p                (description, may be empty)
        - a.category > p.article-count  (count footer)
        - footer.center                 (page footer)
        - #fullArticle                  (article body)
        - .articleFoot time.lu          (last-updated timestamp)

   2. FEATURES DROPPED FROM THE MOCKUP. These don't have native
      equivalents in HelpScout Docs and were not included:
        - Member navbar strip + theme toggle + points + avatar
        - "Popular this month" strip (no native section; would
          need <head>-injected JS to build it client-side)
        - "Still need help" custom callout — replaced by styling
          HelpScout's built-in contact form (#contactForm) which
          is what HelpScout uses when hasContactForm: true. The
          Beacon "Contact" link in the navbar is the native
          alternative on this site.

   3. DARK MODE. There's no toggle button — the system follows
      the visitor's OS-level light/dark preference automatically
      via @media (prefers-color-scheme: dark). To add an explicit
      toggle you'd inject a button + JS in the "Insert <head>
      Code" field and switch a class on <html>; the variable
      block above can be re-keyed off that class instead of the
      media query.

   4. PER-COLLECTION ICONS (Tech Template style).
      Each card has a stable id like #category-5 (Sudoku Maker)
      and #category-17 (Access). The Lucide icon for each card is
      assigned by ID via mask-image so the colour tracks var(--green)
      and adapts to dark mode automatically.

      Current mapping:
        #category-18  Co-Author        feather
        #category-17  Membership Site  home
        #category-5   Sudoku Maker     grid-3x3
        #category-8   General          help-circle

      To add a new collection (e.g. Audio Dollars):
        a) Create the collection in Help Scout, then view source
           on the homepage to find its id="category-NN".
        b) Pick an icon from https://lucide.dev and copy its inner
           SVG paths.
        c) Add a new rule following the pattern of the four above —
           use stroke='black' inside the SVG (colour comes from
           background-color on the ::after pseudo, not the SVG).

      If you ever want a per-collection accent colour as well as
      the icon, you can target the card directly, e.g.:
        #category-5 { border-color: #0A6E65; }
        #category-5::before { background-color: rgba(10,110,101,0.12); }
        #category-5::after  { background-color: #0A6E65; }
   ============================================================ */