/* myXP Support (support.myxp.church) - 2026 look, matched to www.myxp.church.
   GENERATED by build.mjs from styles.template.css. Edit the template, not this file.
   Tokens come from myxp-website/app/globals.css. Icons are the website's own line icons (app/components/icons.tsx),
   embedded below, so no image is loaded from an outside host. The previous stylesheet is kept in original/current.css. */

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

:root {
  --navy: #224466;
  --navy-dark: #162d45;
  --teal: #00bbcc;
  --teal-deep: #00868f;
  --mist: #f4f5f6;
  --mist-line: #dfe5ea;
  --paper: #f6f8fa;
  --line: #e3e9ee;
  --slate: #55677a;
  --display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --body: 'Inter', Arial, sans-serif;
}

/* ---------- Base ---------- */

body, input, button, select, textarea {
  font-family: var(--body);
  font-weight: 400;
}
body {
  background: #fff;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: 0;
}
strong { font-weight: 700; }
em { color: inherit !important; }
a:focus { outline: none; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::placeholder { color: #7d8da0 !important; opacity: 1; }
:-ms-input-placeholder { color: #7d8da0 !important; }

.container-fluid {
  max-width: 1152px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  box-sizing: border-box;
}

/* ---------- Header ---------- */

.navbar { background: #fff; border-bottom: 1px solid var(--line); }
.navbar .navbar-inner {
  background: #fff;
  box-shadow: none;
  border: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 999;
}

/* Logo: the website wordmark, with the word SUPPORT set in the site's heading font */
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 16px;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-decoration: none;
}
.navbar .brand::before {
  content: '';
  display: block;
  flex: none;
  width: 120px;
  height: 48px;
  background: url("data:image/png;base64,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") no-repeat left center / contain;
}
.navbar .brand span {
  display: inline-block;
  padding-left: 16px;
  border-left: 1px solid var(--mist-line);
  font: 800 15px/1 var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--navy);
}
.navbar .brand:hover span { color: var(--teal-deep); }

.navbar .nav .caret,
.navbar .nav > .active::before,
.navbar .nav > .active::after,
.navbar .nav > li > a::before,
.navbar .nav > li > a::after { display: none !important; }
.navbar .nav li a {
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  font: 600 14px/1.2 var(--body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  background: none;
  color: var(--teal-deep);
  box-shadow: none;
}
.navbar .nav li a [class^=icon-] {
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
  color: currentColor;
}
.navbar .btn-navbar { background: none; border: 0; box-shadow: none; text-shadow: none; }
.navbar .btn-navbar .icon-bar {
  background: var(--navy) !important;
  box-shadow: none !important;
  width: 24px !important;
  border-radius: 99px !important;
}
.btn-navbar .icon-bar + .icon-bar { margin-top: 5px; }

/* Help Scout's base sheet pads and clears this container, so the header rules use the header's id */
#mainNav .container-fluid::before,
#mainNav .container-fluid::after { display: none !important; }
#mainNav .navbar-inner .container-fluid {
  max-width: 1152px;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  #mainNav .navbar-inner .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .navbar .btn-navbar { display: none; }
  .navbar .nav-collapse,
  .navbar .nav-collapse.collapse {
    display: block;
    height: auto !important;
    overflow: visible !important;
    width: auto;
    margin: 0;
  }
  .navbar .nav {
    display: flex;
    align-items: center;
    gap: 36px;
    position: static;
    float: none;
    margin: 0;
  }
  .navbar .nav li { float: none; }
  .navbar .nav li a { padding: 8px 0; }
}
@media (max-width: 767px) {
  /* Help Scout's base sheet pads the page 20px on phones and pulls the header back out; drop both so every band is edge to edge */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .navbar { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 768px) {
  .nav-collapse .nav > li > a { text-align: left; }
  #mainNav .navbar-inner .container-fluid { padding-top: 14px !important; padding-bottom: 14px !important; }
  .navbar .brand::before { width: 96px; height: 38px; }
  .navbar .brand span { font-size: 13px; padding-left: 12px; }
  .navbar .btn-navbar { position: absolute; top: 14px; right: 18px; margin: 0; padding: 8px; }
  .nav-collapse .nav { margin: 12px 0 8px; }
  .navbar .nav li a { padding: 12px 0; font-size: 14px; }
}

/* ---------- Hero and search ---------- */

/* The two soft circles are background gradients, not shapes clipped by overflow:hidden,
   because the search-results list has to be able to hang below the hero and over the cards. */
#docsSearch {
  position: relative;
  z-index: 20;
  border: 0;
  background-color: var(--mist);
  background-image:
    radial-gradient(circle 260px at calc(100% - 110px) 30px, rgba(255, 255, 255, .75) 99.5%, transparent 100%),
    radial-gradient(circle 170px at 60px 100%, rgba(0, 187, 204, .10) 99.5%, transparent 100%);
  background-repeat: no-repeat;
  margin: 0;
  padding: 76px 24px 84px;
  text-align: center;
}
#docsSearch > * { position: relative; z-index: 1; }
#searchBar { z-index: 2; }
#docsSearch h1 {
  float: none;
  max-width: 720px;
  margin: 0 auto;
  font: 900 clamp(34px, 5vw, 48px)/1.12 var(--display);
  color: var(--navy);
}

#searchBar {
  position: relative;
  max-width: 640px;
  margin: 30px auto 0;
  padding: 0;
}
#searchBar .search-query {
  float: none;
  display: block;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 150px 0 26px;
  background: #fff;
  border: 1px solid var(--mist-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(34, 68, 102, .04);
  font: 400 16px/1 var(--body);
  color: var(--navy);
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus, input[type=text]:focus {
  border: 1px solid var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 187, 204, .18);
}
#searchBar button {
  position: absolute;
  top: 7px;
  right: 7px;
  height: 44px;
  padding: 0 28px;
  background: var(--navy);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  font: 600 15px/1 var(--body);
  color: #fff;
  transition: background .2s;
}
#searchBar button:hover { background: var(--navy-dark); }
#searchBar button .icon-search { display: none; }
#searchBar.sm button .icon-search { display: none; }

#serp-dd, #serp-dd.sb {
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 40px -16px rgba(34, 68, 102, .25);
  font: 400 15px/1.4 var(--body);
  color: var(--navy);
  overflow: hidden;
}
#serp-dd .result a {
  padding: 12px 18px;
  font-size: 15px;
  color: var(--navy);
  transition: background .2s;
}
#serp-dd .result > li.active,
#serp-dd .result a:hover { background: var(--mist); color: var(--navy); }

@media (max-width: 500px) {
  #docsSearch { padding: 52px 18px 56px; }
  #searchBar .search-query { padding: 0 64px 0 22px; }
  #searchBar button { padding: 0; width: 44px; }
  #searchBar button span { display: none; }
  #searchBar button .icon-search { display: block; color: #fff; font-size: 18px; line-height: 44px; }
}

/* ---------- Home: collections and category cards ---------- */

#contentArea { padding-top: 60px; padding-bottom: 8px; }
#noResults { text-align: center; color: var(--slate); }
.collection-category { margin: 0 0 56px; }
.collection-category h2 {
  margin: 0;
  text-align: left;
  font: 600 14px/1.2 var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.collection-category h2 a {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
}
.collection-category h2 a:hover { border-bottom: 0; color: var(--navy); }
.collection-category h2 [class^=icon-] { font-size: 14px; line-height: 1; margin-right: 8px; color: currentColor; }

.category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
#contentArea .collection-category .category-list { margin: 22px 0 0 !important; }
.category-list .category {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 24px 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.category-list .category:hover {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 14px 32px -14px rgba(34, 68, 102, .22);
  transform: translateY(-2px);
}
.category-list .category::before {
  content: '';
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 16px;
  background-color: var(--mist);
  box-shadow: inset 0 0 0 1px var(--mist-line);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M12 3.5l2.3 5 5.2.6-3.9 3.6 1.1 5.3L12 15.4 7.3 18l1.1-5.3L4.5 9.1l5.2-.6z' %2F%3E%3C%2Fsvg%3E");
}
.category-list h3 {
  margin: 0 0 8px;
  font: 800 20px/1.25 var(--display);
  color: var(--navy);
}
.category-list .category p {
  margin: 0 0 14px;
  font: 400 15px/1.6 var(--body);
  color: var(--slate);
}
.category-list .category p:empty { display: none; }
.category-list .category .article-count {
  margin: auto 0 0;
  padding-top: 4px;
  font: 600 14px/1.4 var(--body);
  color: var(--teal-deep);
  text-decoration: none;
  transition: color .2s;
}
.category-list .category .article-count::after {
  content: '\2192';
  display: inline-block;
  margin-left: 6px;
  transition: transform .2s;
}
.category-list .category:hover .article-count { color: var(--teal-deep); }
.category-list .category:hover .article-count::after { transform: translateX(3px); }

/* Category icons */
#category-4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M7 4h10a1 1 0 0 1 1 1v15l-3-1.8L12 20l-3-1.8L6 20V5a1 1 0 0 1 1-1z' %2F%3E%3Cpath d%3D'M9.5 9h5M9.5 12.5h3' %2F%3E%3C%2Fsvg%3E"); }
#category-12::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'3.5' y%3D'4.5' width%3D'17' height%3D'15' rx%3D'2' %2F%3E%3Cpath d%3D'M10 4.5v15' %2F%3E%3Cpath d%3D'M10 11h10.5' %2F%3E%3C%2Fsvg%3E"); }
#category-14::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5z' %2F%3E%3Cpath d%3D'M13 4h5.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H13z' %2F%3E%3Cpath d%3D'M7 8h1.5M7 11h1.5M15.5 8H17M15.5 11H17' %2F%3E%3C%2Fsvg%3E"); }
#category-16::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'9' cy%3D'8.5' r%3D'3' %2F%3E%3Cpath d%3D'M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5' %2F%3E%3Cpath d%3D'M18 8v6M15 11h6' %2F%3E%3C%2Fsvg%3E"); }
#category-17::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'9' cy%3D'8' r%3D'3' %2F%3E%3Cpath d%3D'M3.5 19a5.5 5.5 0 0 1 11 0' %2F%3E%3Ccircle cx%3D'17' cy%3D'9' r%3D'2.2' %2F%3E%3Cpath d%3D'M16.5 14.2a4.5 4.5 0 0 1 4 4.8' %2F%3E%3C%2Fsvg%3E"); }
#category-18::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'3.5' y%3D'4.5' width%3D'17' height%3D'11' rx%3D'2' %2F%3E%3Cpath d%3D'M8 19.5h8M12 15.5v4' %2F%3E%3C%2Fsvg%3E"); }
#category-19::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'5' y%3D'4' width%3D'14' height%3D'17' rx%3D'2' %2F%3E%3Cpath d%3D'M9 4V3h6v1' %2F%3E%3Cpath d%3D'M9 12.5l2 2 4-4.5' %2F%3E%3Cpath d%3D'M9 18h6' %2F%3E%3C%2Fsvg%3E"); }
#category-69::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'12' cy%3D'12' r%3D'8.5' %2F%3E%3Cpath d%3D'M15.5 8.5l-2 5-5 2 2-5z' %2F%3E%3C%2Fsvg%3E"); }
#category-93::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M4 12.5V5a1 1 0 0 1 1-1h7.5L20 11.5 12.5 19z' %2F%3E%3Ccircle cx%3D'8.5' cy%3D'8.5' r%3D'1.2' %2F%3E%3C%2Fsvg%3E"); }
#category-129::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M7.5 3.5H14l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z' %2F%3E%3Cpath d%3D'M14 3.5V8h4' %2F%3E%3Ccircle cx%3D'12' cy%3D'12.4' r%3D'1.8' %2F%3E%3Cpath d%3D'M8.8 18c.3-1.8 1.6-2.8 3.2-2.8s2.9 1 3.2 2.8' %2F%3E%3C%2Fsvg%3E"); }
#category-136::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'6' cy%3D'18' r%3D'2' %2F%3E%3Ccircle cx%3D'18' cy%3D'6' r%3D'2' %2F%3E%3Cpath d%3D'M8 18h6.5a3 3 0 0 0 0-6h-5a3 3 0 0 1 0-6H16' %2F%3E%3C%2Fsvg%3E"); }
#category-139::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'12' cy%3D'12' r%3D'8.5' %2F%3E%3Cpath d%3D'M8.5 12.2l2.5 2.5 4.5-5' %2F%3E%3C%2Fsvg%3E"); }
#category-143::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'3.5' y%3D'6' width%3D'17' height%3D'12' rx%3D'2' %2F%3E%3Ccircle cx%3D'12' cy%3D'12' r%3D'2.5' %2F%3E%3Cpath d%3D'M7 9.5v.01M17 14.5v.01' %2F%3E%3C%2Fsvg%3E"); }
#category-145::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M3.5 9.5L12 4l8.5 5.5' %2F%3E%3Cpath d%3D'M5.5 10v7M10 10v7M14 10v7M18.5 10v7' %2F%3E%3Cpath d%3D'M3.5 19.5h17' %2F%3E%3C%2Fsvg%3E"); }
#category-153::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M7 4h10a1 1 0 0 1 1 1v15l-3-1.8L12 20l-3-1.8L6 20V5a1 1 0 0 1 1-1z' %2F%3E%3Cpath d%3D'M9.5 9h5M9.5 12.5h3' %2F%3E%3C%2Fsvg%3E"); }
#category-157::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'12' cy%3D'12' r%3D'8' %2F%3E%3Cpath d%3D'M12 7.5v9' %2F%3E%3Cpath d%3D'M15 9.7c0-1.1-1.3-1.9-3-1.9s-3 .8-3 1.9 1.3 1.5 3 1.9 3 .8 3 1.9-1.3 1.9-3 1.9-3-.8-3-1.9' %2F%3E%3C%2Fsvg%3E"); }
#category-161::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'3.5' y%3D'4.5' width%3D'17' height%3D'15' rx%3D'2' %2F%3E%3Cpath d%3D'M10 4.5v15' %2F%3E%3Cpath d%3D'M10 11h10.5' %2F%3E%3C%2Fsvg%3E"); }
#category-182::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'4' y%3D'5.5' width%3D'16' height%3D'14' rx%3D'2' %2F%3E%3Cpath d%3D'M4 10h16M8.5 3.5v4M15.5 3.5v4' %2F%3E%3C%2Fsvg%3E"); }
#category-203::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Ccircle cx%3D'12' cy%3D'12' r%3D'8.5' %2F%3E%3Cpath d%3D'M12 7.5V12l3 2' %2F%3E%3C%2Fsvg%3E"); }
#category-212::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' %2F%3E%3Cpath d%3D'M8.6 13.4l2.2-2.4 1.8 1.6 2.8-3' %2F%3E%3C%2Fsvg%3E"); }
#category-221::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M5.2 10A7.5 7.5 0 0 1 18.3 7.2' %2F%3E%3Cpath d%3D'M18.5 3.5v3.8h-3.8' %2F%3E%3Cpath d%3D'M18.8 14A7.5 7.5 0 0 1 5.7 16.8' %2F%3E%3Cpath d%3D'M5.5 20.5v-3.8h3.8' %2F%3E%3Cpath d%3D'M12 9v6' %2F%3E%3Cpath d%3D'M13.8 10.4c0-.8-.8-1.3-1.8-1.3s-1.8.5-1.8 1.3.8 1.1 1.8 1.4 1.8.6 1.8 1.4-.8 1.3-1.8 1.3-1.8-.5-1.8-1.3' %2F%3E%3C%2Fsvg%3E"); }
#category-253::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M3.5 9.5a8.5 8.5 0 0 1 14.2-3.2L20.5 9' %2F%3E%3Cpath d%3D'M20.5 4.5V9H16' %2F%3E%3Cpath d%3D'M20.5 14.5a8.5 8.5 0 0 1-14.2 3.2L3.5 15' %2F%3E%3Cpath d%3D'M3.5 19.5V15H8' %2F%3E%3C%2Fsvg%3E"); }
#category-256::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M7.5 3.5H14l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z' %2F%3E%3Cpath d%3D'M14 3.5V8h4' %2F%3E%3Cpath d%3D'M9.5 14.5l2 2 3.5-4' %2F%3E%3C%2Fsvg%3E"); }
#category-259::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Crect x%3D'3.5' y%3D'5.5' width%3D'17' height%3D'13' rx%3D'2' %2F%3E%3Cpath d%3D'M4.5 7.5l7.5 5.8 7.5-5.8' %2F%3E%3C%2Fsvg%3E"); }
#category-291::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300868f' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M9 15l6-6' %2F%3E%3Cpath d%3D'M8 12l-1.5 1.5a3 3 0 0 0 4 4L12 16' %2F%3E%3Cpath d%3D'M16 12l1.5-1.5a3 3 0 0 0-4-4L12 8' %2F%3E%3C%2Fsvg%3E"); }

/* NEW TOOLS: the featured card, navy like the website's mission band */
#contentArea .category-list a.category[href*="-new-tools"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2300bbcc' stroke-width%3D'1.8' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M12 3.5l2.3 5 5.2.6-3.9 3.6 1.1 5.3L12 15.4 7.3 18l1.1-5.3L4.5 9.1l5.2-.6z' %2F%3E%3C%2Fsvg%3E"); background-color: rgba(255, 255, 255, .10); box-shadow: none; }
#contentArea .category-list a.category[href*="-new-tools"] { background: var(--navy); border-color: var(--navy); }
#contentArea .category-list a.category[href*="-new-tools"]:hover { background: var(--navy-dark); border-color: var(--teal); }
#contentArea .category-list a.category[href*="-new-tools"] h3 { color: #fff; }
#contentArea .category-list a.category[href*="-new-tools"] p { color: rgba(255, 255, 255, .82); }
#contentArea .category-list a.category[href*="-new-tools"] .article-count,
#contentArea .category-list a.category[href*="-new-tools"]:hover .article-count { color: var(--teal); }

@media (max-width: 960px) {
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .category-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #contentArea { padding-top: 40px; }
}

/* ---------- Footer: navy band like the website ---------- */

body { overflow-x: hidden; }
footer {
  position: relative;
  isolation: isolate;
  margin-top: 72px;
  padding: 34px 0;
  background: none;
  border-top: 0;
}
/* The footer sits inside the page container, so the navy band is drawn edge to edge behind it */
footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--navy);
}
footer p {
  margin: 0;
  font: 400 14px/1.7 var(--body);
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
footer p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: opacity .2s; }
footer p a:hover { color: #fff; opacity: .8; }

/* ---------- Inside pages: category, collection, article, search ---------- */

#sidebar form .search-query {
  height: 52px;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: 0 46px 0 20px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%2355677a' stroke-width%3D'1.8' stroke-linecap%3D'round'%3E%3Ccircle cx%3D'11' cy%3D'11' r%3D'7'%2F%3E%3Cpath d%3D'M20 20l-3.5-3.5'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 95% 50%;
  border: 1px solid var(--mist-line);
  border-radius: 999px;
  box-shadow: none;
  font: 400 15px/1 var(--body);
  color: var(--navy);
}
#sidebar form .search-query:focus { border-radius: 999px !important; }
#sidebar h3 {
  font: 800 18px/1.3 var(--display);
  color: var(--navy);
  text-transform: none;
}
#sidebar .nav-list {
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
#sidebar .nav-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  font: 500 15px/1.4 var(--body);
  color: var(--navy);
  text-decoration: none;
  transition: background .2s, color .2s;
}
#sidebar .nav-list a:hover { background: var(--mist); color: var(--navy); text-decoration: none; }
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  background: var(--mist);
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: none;
}
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow,
.icon-arrow:before { color: var(--teal-deep) !important; }

[class^=icon-] { color: var(--navy); }

#main-content { background: none; }
.contentWrapper {
  padding: 40px 44px 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.contentWrapper h1,
#categoryHead h1 {
  font: 900 32px/1.2 var(--display);
  color: var(--navy);
}
.contentWrapper p.descrip {
  margin-top: 14px;
  font: 400 16px/1.6 var(--body);
  color: var(--slate);
}
.articleList li {
  font: 400 16px/1.6 var(--body);
  color: var(--navy);
}
.articleList a span { transition: color .2s; }
.articleList a span:hover { text-decoration: none; color: var(--teal-deep); }
.icon-article-doc:before { color: var(--teal-deep); }
.contentWrapper a { color: var(--teal-deep); transition: color .2s; }
.contentWrapper a:hover { text-decoration: none; color: var(--navy); }
.articleList li a { color: var(--navy); }
.articleList li a:hover { color: var(--teal-deep); }

#categoryHead .sort select {
  width: 160px;
  height: 36px;
  margin: 0;
  font-size: 13px;
  line-height: 24px;
  color: var(--navy);
}
select { border: 1px solid var(--mist-line); border-radius: 10px; box-shadow: none; }

/* Article */
#fullArticle { max-width: 100%; margin: auto; position: relative; }
#fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 { color: var(--navy); }
#fullArticle .title { font: 900 34px/1.2 var(--display); }
#fullArticle h2 { margin-top: 1.6em; font: 800 25px/1.3 var(--display); }
#fullArticle h3 { font: 800 20px/1.35 var(--display); }
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li,
#fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
  font: 400 17px/1.75 var(--body);
  color: #3e5368;
}
#fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5, #fullArticle strong { color: var(--navy); }
#fullArticle a { text-decoration: underline; text-underline-offset: 3px; }
#fullArticle img { border: 0; border-radius: 16px; padding: 0; }
#fullArticle blockquote {
  padding: 22px 26px;
  background: var(--mist);
  border: 0;
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  font-style: normal;
}
pre { background: var(--mist); color: var(--navy); border: 1px solid var(--mist-line); border-radius: 12px; }
#fullArticle pre, #fullArticle code { font-size: 15px; line-height: 1.6; color: var(--navy); }
#fullArticle .admin-edit {
  display: inline-block;
  margin-bottom: 22px;
  padding: 12px 24px;
  background: var(--navy);
  background-image: none;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  font: 600 15px/1 var(--body);
  color: #fff;
  transition: background .2s;
}
#fullArticle .admin-edit:hover { background: var(--navy-dark); }
#fullArticle .printArticle { position: absolute; right: -3%; top: -25px; }
#fullArticle .printArticle:hover .icon-print { color: var(--teal-deep); }
.articleFoot p, .articleFoot time { font: 400 14px/1.6 var(--body); font-style: normal; color: var(--slate); }
#sbContact { color: var(--teal-deep); border: 0; }
#sbContact:hover { color: var(--navy); }

/* A link that opens in a new tab inside an article is drawn as a button (the convention the old stylesheet used) */
.contentWrapper a[target] {
  display: inline-block;
  padding: 14px 30px;
  background: var(--navy);
  border-radius: 999px;
  font: 600 15px/1.2 var(--body);
  color: #fff;
  text-decoration: none;
  transition: background .2s;
}
.contentWrapper a[target]:hover { background: var(--navy-dark); color: #fff; }

/* Related articles */
.related {
  margin-top: 28px;
  padding: 36px 44px 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.related h3 { padding-left: 0; font: 800 20px/1.3 var(--display); color: var(--navy); text-transform: none; }
.related ul > li { font: 400 16px/1.6 var(--body); color: var(--teal-deep); }
.related ul > li a { font-size: 16px; line-height: 1.6; color: var(--navy); }
.related ul > li a:hover span { text-decoration: none; }
.related a:hover { color: var(--teal-deep); }

/* ---------- Contact pop-up and forms ---------- */

.modal { width: 650px; max-width: 94vw; }
#contactModal, .abuse {
  top: 6%;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 70px -24px rgba(34, 68, 102, .35);
}
#contactModal h2, .abuse h2 {
  padding: 46px 0 14px 50px;
  border-bottom: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font: 900 30px/1.2 var(--display);
  color: var(--navy);
}
.modal-body { padding: 0 50px 56px; min-height: 630px; }
#contactModal .control-label { width: 100%; float: left; text-align: left; }
#contactModal .controls { margin-left: 0; }
#contactModal .form-actions { padding-left: 0; }
#contactModal #md-message { width: 100%; padding-top: 10px; height: 70px; }
.form-actions:before, .form-actions:after { display: none; }
.form-horizontal .control-label,
label { font: 600 15px/1.6 var(--body); color: var(--navy); }
input[type=text],
.form-horizontal textarea,
.form-search input, .form-inline input, .form-horizontal input,
.form-search textarea, .form-inline textarea,
.form-search select, .form-inline select, .form-horizontal select {
  box-sizing: border-box;
  width: 95%;
  height: 44px;
  padding: 4px 14px;
  background: #fff;
  border: 1px solid var(--mist-line);
  border-radius: 12px;
  box-shadow: none;
  font: 400 15px/1.4 var(--body);
  color: var(--navy);
}
#contactModal input[type=file] { height: 25px; padding: 18px 12px; }
textarea:focus, input:focus { box-shadow: 0 0 0 3px rgba(0, 187, 204, .18); }
textarea:focus { border: 1px solid var(--teal); }
#contactModal input[type=submit].btn,
button.btn, input[type=submit].btn {
  width: 100%;
  height: 50px;
  margin-top: 15px;
  background: var(--navy);
  background-image: none;
  border: 0;
  border-radius: 999px;
  text-shadow: none;
  font: 600 16px/1 var(--body);
  color: #fff;
  transition: background .2s;
}
#contactModal input[type=submit].btn:hover,
button.btn:hover, input[type=submit].btn:hover { background: var(--navy-dark); }
#searchBar button.btn { width: auto; margin-top: 0; }
.icon-close:before, .featherlight-close-icon:before { display: none; }
.modal #closeBtn { top: 28px; right: 28px; }
#contactModal .icon-close {
  position: relative;
  right: 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 24 24' fill%3D'none' stroke%3D'%23224466' stroke-width%3D'2' stroke-linecap%3D'round'%3E%3Cpath d%3D'M5 5l14 14M19 5L5 19'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: .6;
  transition: opacity .2s;
}
#contactModal .icon-close:hover { opacity: 1; }
#contactModal .parsley-errors-list { margin-top: 16px; font-size: 15px; color: #d60000; }
#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]) { border: 1px solid #d60000; }

/* ---------- Narrow screens ---------- */

@media (max-width: 768px) {
  #main-content { margin: 36px 0 2em; }
  #categoryHead .sort { display: none; }
  #sidebar form { position: relative; margin: 32px 0; }
  .contentWrapper { padding: 32px 22px 44px; border-radius: 16px; }
  .related { padding: 32px 22px; border-radius: 16px; }
  #fullArticle .title { font-size: 28px; line-height: 1.25; }
  #fullArticle h2 { font-size: 22px; }
  #fullArticle .printArticle { right: -4px; top: -22px; }
  .articleFoot time.lu { float: left; }
  .modal-body { min-height: 730px; padding: 0 24px 48px; }
  #contactModal h2, .abuse h2 { padding-left: 24px; font-size: 26px; }
  .contentWrapper.withRelated { min-height: 205px; padding-bottom: 64px; }
  footer { margin-top: 48px; }
}