/* myXP Support (support.myxp.church) - 2026 "GoodWork style" look, matched to the Hub and the five modules.
   GENERATED by build.mjs from styles.template.css. Edit the template, not this file.
   Rules come from DESIGN-SYSTEM-HANDOFF.md and design-system-kit/ (warm page, deep glow band, hairline white cards,
   pill buttons, Archivo + Inter, thin line icons, tile side menu). Palette: see build.mjs (teal = the kit's Support teal, navy = myXP navy with teal accents).
   Icons are the website's own line icons, embedded below, so no image is loaded from an outside host.
   The previous stylesheets are kept in previous/ and original/ (rollback = upload one of those). */

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

:root {
  /* Shared neutrals (every tool) */
  --page: #f7f7f2;
  --ink: #37423d;
  --muted: #66716b;
  --line: rgba(55, 66, 61, 0.12);
  --field-line: rgba(55, 66, 61, 0.8);

  /* Palette: generated by build.mjs from the palettes object (teal = the kit's Support teal, navy = myXP navy + teal accents).
     To change a color, edit the palettes object in build.mjs, not this file. */
  --brand: #33a3b4;
  --spark: #00bbcc;
  --deep: #00515c;
  --deep-2: #00373f;
  --strong: #087a89;
  --strong-hover: #00515c;
  --accent: #087a89;
  --sage: #a1d5de;
  --tint: #ddf1f5;
  --row-alt: #ebf6f8;
  --border: #c8e4e9;
  --deep-rgb: 0, 81, 92;
  --shadow-rgb: 0, 55, 63;
  --strong-rgb: 8, 122, 137;
  --sage-rgb: 161, 213, 222;

  --display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --gutter: 24px;
  --maxw: 1008px;
  --pad: 2.25rem;

  /* The soft glow every page header uses (same recipe as the Hub), in Support's color */
  --glow:
    radial-gradient(ellipse 70% 150% at 100% 0%, rgba(var(--sage-rgb), .36), rgba(var(--sage-rgb), 0) 72%),
    radial-gradient(ellipse 55% 120% at 0% 100%, rgba(var(--sage-rgb), .20), rgba(var(--sage-rgb), 0) 72%),
    var(--deep);
}
@media (max-width: 767px) { :root { --gutter: 16px; --pad: 1.25rem; } }

/* The category icons, each embedded once (generated from the website's icon set by build.mjs) */
:root {
  --ico-guide: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-new: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-4: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-12: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-14: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-16: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-17: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-18: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-19: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-69: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-93: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-129: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-136: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-139: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-143: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-145: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-153: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-157: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-161: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-182: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-203: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-212: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-221: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-253: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-256: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-259: 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'%23087a89' stroke-width%3D'1.5' 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");
  --ico-291: 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'%23087a89' stroke-width%3D'1.5' 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");
}

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

html { -webkit-text-size-adjust: 100%; }
body, input, button, select, textarea {
  font-family: var(--body);
  font-weight: 400;
}
body {
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--deep);
  letter-spacing: -0.015em;
  word-spacing: .1em;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
strong { font-weight: 700; }
em { color: inherit !important; }
a:focus { outline: none; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--strong); outline-offset: 3px; border-radius: 6px; }
::placeholder { color: var(--muted) !important; opacity: 1; }
:-ms-input-placeholder { color: var(--muted) !important; }
::selection { background: var(--sage); color: var(--deep-2); }

.container-fluid {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  /* Help Scout's base sheet pads the page 20px on phones and pulls the header back out; drop both */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .navbar { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- Header: the S monogram and the name, then the collections as pills ---------- */

#mainNav, .navbar { background: none; border: 0; box-shadow: none; margin: 0; }
.navbar .navbar-inner {
  background: none;
  box-shadow: none;
  border: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 999;
}

.navbar .brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-decoration: none;
  text-shadow: none;
}
.navbar .brand::before {
  content: 'S';
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: var(--glow);
  border: 1px solid rgba(247, 247, 242, .28);
  font: 900 1.4rem/1 var(--display);
  letter-spacing: -.02em;
  color: #fff;
}
.navbar .brand span {
  display: inline-block;
  padding: 0;
  border: 0;
  font: 900 1.45rem/1 var(--display);
  letter-spacing: -.02em;
  word-spacing: .1em;
  text-transform: none;
  color: var(--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: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  font: 600 .9rem/1.2 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--deep);
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus {
  background: var(--tint);
  border-color: var(--border);
  color: var(--deep);
  box-shadow: none;
}
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  box-shadow: none;
}
.navbar .nav li a [class^=icon-] {
  font-size: 13px;
  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(--deep) !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: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !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: 20px !important;
    padding-bottom: 16px !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: 8px;
    position: static;
    float: none;
    margin: 0;
  }
  .navbar .nav li { float: none; }
  .navbar .nav li a { padding: 9px 18px; }
}
@media (max-width: 768px) {
  #mainNav .navbar-inner .container-fluid { padding-top: 14px !important; padding-bottom: 10px !important; }
  .navbar .brand::before { width: 2.35rem; height: 2.35rem; font-size: 1.25rem; }
  .navbar .brand span { font-size: 1.3rem; }
  .navbar .btn-navbar { position: absolute; top: 12px; right: 12px; margin: 0; padding: 8px; }
  .nav-collapse .nav { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 6px; }
  .nav-collapse .nav > li > a { text-align: left; }
  .navbar .nav li a { display: block; padding: 11px 16px; font-size: .95rem; }
}

/* ---------- Hero and search: a deep glow band with a title, one sentence and the search ---------- */

/* The glow is a background, not a clipped shape, so the search-results list can hang below the band and over the cards. */
#docsSearch {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 4px auto 0;
  padding: 3.1rem 2.2rem 3.3rem;
  border: 0;
  border-radius: 22px;
  background: var(--glow);
  color: var(--page);
  text-align: left;
}
#docsSearch h1 {
  order: 1;
  float: none;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  font: 900 clamp(2.1rem, 6vw, 3.2rem)/1.04 var(--display);
  letter-spacing: -.02em;
  text-align: left !important;
  color: var(--page);
}
#docsSearch::after {
  order: 2;
  content: 'Search our guides and videos, or pick a topic below.';
  display: block;
  margin-top: .8rem;
  max-width: 32rem;
  font: 400 1.1rem/1.55 var(--body);
  color: rgba(247, 247, 242, .9);
}
#searchBar {
  order: 3;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 40rem;
  margin: 1.7rem 0 0;
  padding: 0;
}
#searchBar .search-query {
  float: none;
  display: block;
  width: 100%;
  height: 3.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 9.5rem 0 1.3rem;
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 14px;
  box-shadow: none;
  font: 400 1.0625rem/1 var(--body);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s !important;
}
#searchBar .search-query:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(var(--sage-rgb), .75) !important;
}
#searchBar button {
  position: absolute;
  top: 6px;
  right: 6px;
  height: calc(3.5rem - 15px);
  padding: 0 1.5rem;
  background: var(--strong);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  font: 600 .95rem/1 var(--body);
  color: #fff;
  transition: background-color .15s;
}
#searchBar button:hover { background: var(--strong-hover); }
#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: 18px;
  box-shadow: 0 18px 40px -16px rgba(var(--shadow-rgb), .35);
  font: 400 15px/1.4 var(--body);
  color: var(--ink);
  overflow: hidden;
}
#serp-dd, #serp-dd.sb { width: 100%; }
#sidebar #serp-dd.sb { width: 24rem; max-width: calc(100vw - 2 * var(--gutter)); }
#serp-dd .result a {
  padding: 12px 18px;
  font-size: 15px;
  color: var(--ink);
  transition: background-color .15s;
}
#serp-dd .result > li.active,
#serp-dd .result a:hover { background: var(--tint); color: var(--deep); }

@media (max-width: 600px) {
  #docsSearch { padding: 2.2rem 1.3rem 2.4rem; border-radius: 18px; }
  #docsSearch::after { font-size: 1.02rem; }
  #searchBar { margin-top: 1.4rem; }
  #searchBar .search-query { padding: 0 4.2rem 0 1.1rem; }
  #searchBar button {
    width: calc(3.5rem - 15px);
    padding: 0;
    background: var(--strong) 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'%23ffffff' stroke-width%3D'2' 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") no-repeat center / 20px;
  }
  #searchBar button span { display: none; }
}

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

#contentArea { padding-top: 1.5rem; padding-bottom: 8px; }
#docsSearch + #contentArea { padding-top: 3rem; }
#noResults { text-align: center; color: var(--muted); }
.collection-category { margin: 0 0 3rem; }
.collection-category h2 {
  margin: 0;
  text-align: left;
  font: 900 clamp(1.4rem, 3.4vw, 1.8rem)/1.12 var(--display);
  letter-spacing: -.018em;
  color: var(--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(--accent); }
.collection-category h2 [class^=icon-] { font-size: .8em; line-height: 1; margin-right: 8px; color: var(--accent); }

.category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
#contentArea .collection-category .category-list { margin: 1.25rem 0 0 !important; }
.category-list .category {
  --chip: 4.25rem;   /* the icon chip */
  --glyph: 2.75rem;  /* the icon inside it */
  --cpad: 1.5rem;    /* card padding */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--cpad);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
  text-align: left;
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.category-list .category:hover {
  background: #fff;
  border-color: var(--sage);
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .09);
  transform: translateY(-1px);
}
.category-list .category:focus-visible { outline-offset: 2px; border-radius: 18px; }

/* The icon: a large chip (::before, outlined with a very soft wash) with the thin line icon drawn over it (::after)
   in a deep to bright teal gradient. Line only, nothing solid inside the icon (ICON-POLICY.md).
   On hover the chip fills deep and the icon turns white, like the active tile in the side menu. */
.category-list .category::before {
  content: '';
  flex: none;
  width: var(--chip);
  height: var(--chip);
  margin: 0 0 1.1rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #fff 35%, var(--row-alt) 100%);
  transition: border-color .15s; /* the fill and the icon colour switch together on hover, so no fade (a fade would show a white icon on a pale chip) */
}
.category-list .category::after {
  content: '';
  position: absolute;
  top: var(--cpad);
  left: var(--cpad);
  width: var(--chip);
  height: var(--chip);
  pointer-events: none;
  background: linear-gradient(135deg, var(--deep) 10%, var(--spark) 100%);
  -webkit-mask: var(--ico-guide) no-repeat center / var(--glyph);
  mask: var(--ico-guide) no-repeat center / var(--glyph);
}
.category-list .category:hover::before { background: var(--deep); border-color: var(--deep); }
.category-list .category:hover::after { background: linear-gradient(135deg, #fff 20%, var(--sage) 100%); }

.category-list h3 {
  margin: 0;
  font: 800 1.2rem/1.25 var(--display);
  letter-spacing: -.01em;
  word-spacing: .1em;
  color: var(--deep);
}
.category-list .category p:not(.article-count) {
  margin: .45rem 0 1.1rem;
  font: 400 .92rem/1.5 var(--body);
  color: var(--muted);
}
.category-list .category p:empty { display: none; }
.category-list .category .article-count {
  align-self: flex-start;
  margin: auto 0 0;
  padding: 3px 11px;
  background: var(--tint);
  border-radius: 999px;
  font: 600 .72rem/1.5 var(--body);
  letter-spacing: .01em;
  color: var(--deep);
}
.category-list .category p:empty + .article-count { margin-top: 1.1rem; } /* a card with no description */

/* Category icons (home cards) */
#category-4::after { -webkit-mask-image: var(--ico-4); mask-image: var(--ico-4); }
#category-12::after { -webkit-mask-image: var(--ico-12); mask-image: var(--ico-12); }
#category-14::after { -webkit-mask-image: var(--ico-14); mask-image: var(--ico-14); }
#category-16::after { -webkit-mask-image: var(--ico-16); mask-image: var(--ico-16); }
#category-17::after { -webkit-mask-image: var(--ico-17); mask-image: var(--ico-17); }
#category-18::after { -webkit-mask-image: var(--ico-18); mask-image: var(--ico-18); }
#category-19::after { -webkit-mask-image: var(--ico-19); mask-image: var(--ico-19); }
#category-69::after { -webkit-mask-image: var(--ico-69); mask-image: var(--ico-69); }
#category-93::after { -webkit-mask-image: var(--ico-93); mask-image: var(--ico-93); }
#category-129::after { -webkit-mask-image: var(--ico-129); mask-image: var(--ico-129); }
#category-136::after { -webkit-mask-image: var(--ico-136); mask-image: var(--ico-136); }
#category-139::after { -webkit-mask-image: var(--ico-139); mask-image: var(--ico-139); }
#category-143::after { -webkit-mask-image: var(--ico-143); mask-image: var(--ico-143); }
#category-145::after { -webkit-mask-image: var(--ico-145); mask-image: var(--ico-145); }
#category-153::after { -webkit-mask-image: var(--ico-153); mask-image: var(--ico-153); }
#category-157::after { -webkit-mask-image: var(--ico-157); mask-image: var(--ico-157); }
#category-161::after { -webkit-mask-image: var(--ico-161); mask-image: var(--ico-161); }
#category-182::after { -webkit-mask-image: var(--ico-182); mask-image: var(--ico-182); }
#category-203::after { -webkit-mask-image: var(--ico-203); mask-image: var(--ico-203); }
#category-212::after { -webkit-mask-image: var(--ico-212); mask-image: var(--ico-212); }
#category-221::after { -webkit-mask-image: var(--ico-221); mask-image: var(--ico-221); }
#category-253::after { -webkit-mask-image: var(--ico-253); mask-image: var(--ico-253); }
#category-256::after { -webkit-mask-image: var(--ico-256); mask-image: var(--ico-256); }
#category-259::after { -webkit-mask-image: var(--ico-259); mask-image: var(--ico-259); }
#category-291::after { -webkit-mask-image: var(--ico-291); mask-image: var(--ico-291); }

/* NEW TOOLS: the one featured card, a deep glow band like the Hub's tool cards */
#contentArea .category-list a.category[href*="-new-tools"] { grid-column: 1 / -1; display: grid; grid-template-columns: var(--chip) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.25rem; align-items: start; background: var(--glow); border-color: var(--deep); box-shadow: none; }
#contentArea .category-list a.category[href*="-new-tools"]:hover { border-color: var(--deep); box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .25); filter: brightness(1.08); }
#contentArea .category-list a.category[href*="-new-tools"]::before { grid-column: 1; grid-row: 1 / span 3; margin: 0; background: rgba(247, 247, 242, .08); border-color: rgba(247, 247, 242, .38); }
#contentArea .category-list a.category[href*="-new-tools"]:hover::before { background: rgba(247, 247, 242, .16); border-color: var(--sage); }
#contentArea .category-list a.category[href*="-new-tools"]::after { background: linear-gradient(135deg, #fff 20%, var(--sage) 100%); -webkit-mask-image: var(--ico-new); mask-image: var(--ico-new); }
#contentArea .category-list a.category[href*="-new-tools"] h3 { grid-column: 2; grid-row: 1; color: #fff; font-size: 1.4rem; }
#contentArea .category-list a.category[href*="-new-tools"] p { grid-column: 2; grid-row: 2; margin: .4rem 0 0; color: rgba(247, 247, 242, .9); }
#contentArea .category-list a.category[href*="-new-tools"] .article-count { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; margin: 1rem 0 0; background: rgba(247, 247, 242, .16); color: #fff; }

@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: .9rem; }
  .category-list .category {
    --chip: 3.5rem;
    --glyph: 2.2rem;
    --cpad: 1.15rem;
    display: grid;
    grid-template-columns: var(--chip) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1rem;
    align-items: start;
  }
  .category-list .category::before { grid-column: 1; grid-row: 1 / span 3; margin: 0; border-radius: 16px; }
  .category-list h3 { grid-column: 2; grid-row: 1; font-size: 1.1rem; }
  .category-list .category p:not(.article-count) { grid-column: 2; grid-row: 2; margin: .35rem 0 0; }
  .category-list .category .article-count,
  .category-list .category p:empty + .article-count { grid-column: 2; grid-row: 3; align-self: end; justify-self: start; margin: .8rem 0 0; }
  #docsSearch + #contentArea { padding-top: 2.2rem; }
  .collection-category { margin-bottom: 2.2rem; }
}

/* ---------- Footer: one quiet line, like the Hub ---------- */

footer {
  margin-top: 3.5rem;
  padding: 1.3rem 0 2.6rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
footer::before {
  content: 'Support is part of myXP. Solving problems for pastors.';
  display: block;
  margin-bottom: .2rem;
  font: 500 .9rem/1.6 var(--body);
  color: var(--ink);
}
footer p {
  margin: 0;
  font: 400 .86rem/1.7 var(--body);
  color: var(--muted);
  text-align: left;
}
footer p a { color: var(--deep); text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; transition: text-decoration-color .15s; }
footer p a:hover { color: var(--deep); text-decoration-color: var(--deep); }

/* ---------- Inside pages: the tile menu on the left, one white card on the right ---------- */

@media (min-width: 900px) {
  #contentArea > .row-fluid {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1.75rem;
  }
  #contentArea > .row-fluid::before,
  #contentArea > .row-fluid::after { display: none; }
  #contentArea > .row-fluid > #main-content { flex: 1 1 0; min-width: 0; float: none; width: auto; margin: 0; }
  #contentArea > .row-fluid > #sidebar { flex: 0 0 17.5rem; float: none; width: 17.5rem; margin: 0; }
}
#main-content { background: none; padding: 0; }
@media (max-width: 899px) {
  #contentArea > .row-fluid > #sidebar { margin-top: 2rem; }
}

/* Sidebar search: a field, 14px corners, with a round pill button inside */
#sidebar form { position: relative; margin: 0 0 1.4rem; }
#sidebar form .search-query {
  float: none;
  display: block;
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 3.4rem 0 1rem;
  background: #fff;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  box-shadow: none;
  font: 400 1rem/1 var(--body);
  color: var(--ink);
}
#sidebar form .search-query:focus {
  border-color: var(--strong) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 4px rgba(var(--strong-rgb), .2) !important;
}
#searchBar.sm button {
  top: 6px;
  right: 6px;
  width: calc(3rem - 15px);
  height: calc(3rem - 15px);
  padding: 0;
  background: var(--strong) 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'%23ffffff' stroke-width%3D'2' 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") no-repeat center / 18px;
}
#searchBar.sm button:hover { background-color: var(--strong-hover); }
#searchBar.sm button .icon-search { display: none; }

#sidebar h3 {
  margin: 0 0 .65rem .35rem;
  font: 700 .68rem/1.3 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  word-spacing: 0;
  color: rgba(var(--deep-rgb), .88);
}
#sidebar .nav-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#sidebar .nav-list li { margin: 0; }
#sidebar .nav-list a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  font: 700 .88rem/1.25 var(--display);
  letter-spacing: 0;
  word-spacing: .05em;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
#sidebar .nav-list a::before {
  content: '';
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  background: linear-gradient(135deg, var(--deep) 10%, var(--spark) 100%);
  -webkit-mask: var(--ico-guide) no-repeat center / contain;
  mask: var(--ico-guide) no-repeat center / contain;
}
#sidebar .nav-list a:hover { background: #fff; border-color: rgba(var(--deep-rgb), .4); color: var(--deep); text-decoration: none; }
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--page);
  box-shadow: 0 4px 14px rgba(var(--deep-rgb), .28);
  text-decoration: none;
}
#sidebar .nav-list .active a::before { background: linear-gradient(135deg, #fff 20%, var(--sage) 100%); }
#sidebar .nav-list a .icon-arrow,
#sidebar .nav-list .active a .icon-arrow { display: none !important; }

/* Sidebar icons per category */
#sidebar .nav-list a[href*="/category/4-"]::before { -webkit-mask-image: var(--ico-4); mask-image: var(--ico-4); }
#sidebar .nav-list a[href*="/category/12-"]::before { -webkit-mask-image: var(--ico-12); mask-image: var(--ico-12); }
#sidebar .nav-list a[href*="/category/14-"]::before { -webkit-mask-image: var(--ico-14); mask-image: var(--ico-14); }
#sidebar .nav-list a[href*="/category/16-"]::before { -webkit-mask-image: var(--ico-16); mask-image: var(--ico-16); }
#sidebar .nav-list a[href*="/category/17-"]::before { -webkit-mask-image: var(--ico-17); mask-image: var(--ico-17); }
#sidebar .nav-list a[href*="/category/18-"]::before { -webkit-mask-image: var(--ico-18); mask-image: var(--ico-18); }
#sidebar .nav-list a[href*="/category/19-"]::before { -webkit-mask-image: var(--ico-19); mask-image: var(--ico-19); }
#sidebar .nav-list a[href*="/category/69-"]::before { -webkit-mask-image: var(--ico-69); mask-image: var(--ico-69); }
#sidebar .nav-list a[href*="/category/93-"]::before { -webkit-mask-image: var(--ico-93); mask-image: var(--ico-93); }
#sidebar .nav-list a[href*="/category/129-"]::before { -webkit-mask-image: var(--ico-129); mask-image: var(--ico-129); }
#sidebar .nav-list a[href*="/category/136-"]::before { -webkit-mask-image: var(--ico-136); mask-image: var(--ico-136); }
#sidebar .nav-list a[href*="/category/139-"]::before { -webkit-mask-image: var(--ico-139); mask-image: var(--ico-139); }
#sidebar .nav-list a[href*="/category/143-"]::before { -webkit-mask-image: var(--ico-143); mask-image: var(--ico-143); }
#sidebar .nav-list a[href*="/category/145-"]::before { -webkit-mask-image: var(--ico-145); mask-image: var(--ico-145); }
#sidebar .nav-list a[href*="/category/153-"]::before { -webkit-mask-image: var(--ico-153); mask-image: var(--ico-153); }
#sidebar .nav-list a[href*="/category/157-"]::before { -webkit-mask-image: var(--ico-157); mask-image: var(--ico-157); }
#sidebar .nav-list a[href*="/category/161-"]::before { -webkit-mask-image: var(--ico-161); mask-image: var(--ico-161); }
#sidebar .nav-list a[href*="/category/182-"]::before { -webkit-mask-image: var(--ico-182); mask-image: var(--ico-182); }
#sidebar .nav-list a[href*="/category/203-"]::before { -webkit-mask-image: var(--ico-203); mask-image: var(--ico-203); }
#sidebar .nav-list a[href*="/category/212-"]::before { -webkit-mask-image: var(--ico-212); mask-image: var(--ico-212); }
#sidebar .nav-list a[href*="/category/221-"]::before { -webkit-mask-image: var(--ico-221); mask-image: var(--ico-221); }
#sidebar .nav-list a[href*="/category/253-"]::before { -webkit-mask-image: var(--ico-253); mask-image: var(--ico-253); }
#sidebar .nav-list a[href*="/category/256-"]::before { -webkit-mask-image: var(--ico-256); mask-image: var(--ico-256); }
#sidebar .nav-list a[href*="/category/259-"]::before { -webkit-mask-image: var(--ico-259); mask-image: var(--ico-259); }
#sidebar .nav-list a[href*="/category/291-"]::before { -webkit-mask-image: var(--ico-291); mask-image: var(--ico-291); }
#sidebar .nav-list a[href*="-new-tools"]::before { -webkit-mask-image: var(--ico-new); mask-image: var(--ico-new); }

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

/* The page card: a deep glow band with the title, then white */
.contentWrapper {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}
#categoryHead,
.contentWrapper > h1,
#serp > h1,
#fullArticle .title {
  position: relative;
  margin: 0;
  padding: 1.6rem var(--pad) 1.7rem;
  background: var(--glow);
  color: var(--page);
}
.contentWrapper h1,
#categoryHead h1 {
  margin: 0;
  font: 900 clamp(1.55rem, 3.4vw, 2.1rem)/1.1 var(--display);
  letter-spacing: -.02em;
  color: var(--page);
}
#categoryHead h1 { padding: 0; background: none; }
.contentWrapper p.descrip {
  margin: .55rem 0 0;
  max-width: 40rem;
  font: 400 1rem/1.55 var(--body);
  color: rgba(247, 247, 242, .9);
}
#categoryHead .sort { position: absolute; top: 1.4rem; right: var(--pad); margin: 0; float: none; }
#categoryHead .sort select {
  width: auto;
  min-width: 10.5rem;
  height: 2.4rem;
  margin: 0;
  padding: 0 2.2rem 0 1rem;
  background-color: rgba(247, 247, 242, .14);
  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'%23ffffff' stroke-width%3D'2.5' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpolyline points%3D'6 9 12 15 18 9'%2F%3E%3C%2Fsvg%3E");
  border: 1px solid rgba(247, 247, 242, .4);
  border-radius: 999px;
  font: 600 .82rem/1 var(--body);
  color: #fff;
}
#categoryHead .sort select option { color: var(--ink); background: #fff; }
select {
  appearance: none;
  -webkit-appearance: none;
  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'%2366716b' stroke-width%3D'2.5' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpolyline points%3D'6 9 12 15 18 9'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px;
  box-shadow: none;
}

/* Article lists: hairline rows with a quiet arrow, like the Hub's link rows */
.articleList { margin: 0; padding: .35rem 0 .6rem; list-style: none; }
.articleList li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  font: 400 1rem/1.5 var(--body);
  color: var(--ink);
}
.articleList li:last-child { border-bottom: 0; }
.articleList li a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem var(--pad);
  font: 800 1.02rem/1.3 var(--display);
  letter-spacing: -.01em;
  word-spacing: .1em;
  color: var(--deep);
  text-decoration: none;
  transition: color .15s;
}
.articleList li a { margin: 0; }
.articleList li a > i { display: none; }
.articleList li a::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 1.05rem;
  height: 1.05rem;
  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'%23087a89' stroke-width%3D'1.75' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M5 12h14M13 6l6 6-6 6'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform .15s;
}
.articleList li a:hover { color: var(--accent); text-decoration: none; }
.articleList li a:hover::after { transform: translateX(3px); }
.articleList li a:focus-visible { outline-offset: -3px; border-radius: 10px; }
.articleList a span { transition: color .15s; }
.articleList a span:hover { text-decoration: none; }
.articleList li > p {
  margin: -.35rem var(--pad) 0;
  padding: 0 2rem .95rem 0;
  font: 400 .9rem/1.5 var(--body);
  color: var(--muted);
}
.articleList li > p:empty { display: none; }

/* Search results (Help Scout's base sheet indents these with #serp rules, so the same ids are used here) */
#serp .articleList > li { padding-left: 0; }
#serp .articleList > li a { display: flex; margin: 0; font-size: 1.02rem; }
#serp .articleList > li > p { margin: -.35rem var(--pad) 0; padding: 0 2rem .95rem 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
#serp > h1 strong { font-weight: 900; color: var(--sage); }
#serp .articlesFound {
  margin: 0;
  padding: .9rem var(--pad);
  border-bottom: 1px solid var(--line);
  font: 400 .9rem/1.4 var(--body);
  color: var(--muted);
}
#serp .articlesFound strong { color: var(--deep); }

/* Article text */
#fullArticle {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--pad) 1.6rem;
}
#fullArticle .title {
  margin: 0 calc(-1 * var(--pad)) 1.7rem;
  padding: 1.7rem 4.2rem 1.8rem var(--pad);
  font: 900 clamp(1.7rem, 3.6vw, 2.3rem)/1.1 var(--display);
  letter-spacing: -.02em;
  color: var(--page);
}
#fullArticle .printArticle {
  position: absolute;
  top: 1.45rem;
  right: 1.2rem;
  z-index: 2;
  opacity: .85;
  transition: opacity .15s;
}
#fullArticle .printArticle:hover { opacity: 1; }
#fullArticle .printArticle [class^=icon-],
#fullArticle .printArticle:hover .icon-print { color: #fff; }
#fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5, #fullArticle strong { color: var(--deep); }
#fullArticle h2 { margin-top: 1.6em; font: 800 1.55rem/1.3 var(--display); }
#fullArticle h3 { font: 800 1.25rem/1.35 var(--display); }
#fullArticle h4, #fullArticle h5 { font: 800 1.05rem/1.4 var(--display); }
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li,
#fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
  font: 400 1.0625rem/1.75 var(--body);
  color: var(--ink);
}
#fullArticle strong, #fullArticle b { font-weight: 700; }
#fullArticle a, .contentWrapper a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sage);
  transition: text-decoration-color .15s, color .15s;
}
#fullArticle a:hover, .contentWrapper a:hover { color: var(--deep); text-decoration-color: var(--deep); }
#fullArticle strong a, #fullArticle a strong { color: var(--deep); }
#fullArticle img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; padding: 0; }
#fullArticle iframe { max-width: 100%; border-radius: 14px; }
#fullArticle hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
#fullArticle blockquote {
  padding: 1.1rem 1.4rem;
  background: var(--tint);
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  font-style: normal;
  color: var(--deep-2);
}
#fullArticle table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
#fullArticle th {
  padding: .6rem .8rem;
  background: var(--row-alt);
  border-bottom: 1.5px solid var(--line);
  font: 700 .72rem/1.3 var(--body);
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}
#fullArticle td { padding: .7rem .8rem; border-bottom: 1px solid rgba(55, 66, 61, .08); vertical-align: top; }
pre { background: var(--row-alt); color: var(--deep-2); border: 1px solid var(--border); border-radius: 12px; }
#fullArticle pre, #fullArticle code { font-size: .92rem; line-height: 1.6; color: var(--deep-2); }
#fullArticle code { background: var(--row-alt); border-radius: 6px; padding: 1px 6px; }
#fullArticle pre code { background: none; padding: 0; }

/* Help Scout callouts follow the kit's alert colors (amber only where it means "careful") */
#fullArticle .callout { padding: .95rem 1.2rem; border: 0; border-left: 4px solid; border-radius: 14px; font-size: 1rem; line-height: 1.6; }
#fullArticle .callout-blue   { background: #e1ebf5; border-color: #2f6fb0; color: #1e4a7a; }
#fullArticle .callout-green  { background: var(--tint); border-color: var(--accent); color: var(--deep); }
#fullArticle .callout-yellow { background: #fbf3cf; border-color: #d3a400; color: #6b5400; }
#fullArticle .callout-red    { background: #f9dcdc; border-color: #a32d2d; color: #7a1f1f; }
#fullArticle .callout p, #fullArticle .callout li, #fullArticle .callout strong { color: inherit; }

#fullArticle .admin-edit {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .7rem 1.4rem;
  background: var(--strong);
  background-image: none;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
  font: 600 .95rem/1 var(--body);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s;
}
#fullArticle .admin-edit:hover { background: var(--strong-hover); color: #fff; }

.articleFoot {
  margin: 0;
  padding: 1rem var(--pad) 1.4rem;
  border-top: 1px solid var(--line);
}
.articleFoot p, .articleFoot time { font: 400 .86rem/1.6 var(--body); font-style: normal; color: var(--muted); }
#sbContact { color: var(--deep); border: 0; font-weight: 600; }
#sbContact:hover { color: var(--deep); }

/* A link that opens in a new tab inside an article is drawn as a pill button (the convention articles already rely on) */
.contentWrapper a[target],
#fullArticle a[target] {
  display: inline-block;
  padding: .8rem 1.6rem;
  background: var(--strong);
  border-radius: 999px;
  font: 600 .95rem/1.2 var(--body);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s;
}
.contentWrapper a[target]:hover,
#fullArticle a[target]:hover { background: var(--strong-hover); color: #fff; text-decoration: none; }
#fullArticle a[target] strong, #fullArticle strong a[target] { color: #fff; }

/* Related articles */
.related {
  margin-top: 1.5rem;
  padding: 1.6rem var(--pad) 1.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}
.related h3 { padding-left: 0; font: 800 1.2rem/1.3 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--deep); }
.related ul { margin-left: 0; padding-top: .6rem; }
.related ul > li { padding: .35rem 0; font: 400 1rem/1.6 var(--body); color: var(--accent); }
.related ul > li a { margin-left: 0; font-size: 1rem; line-height: 1.6; color: var(--deep); }
.related ul > li a:hover span { text-decoration: none; }
.related a:hover { color: var(--accent); }

/* ---------- Contact pop-up and forms (not on the live pages today, kept in the same style) ---------- */

.modal { width: 650px; max-width: 94vw; }
#contactModal, .abuse {
  top: 6%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(var(--shadow-rgb), .35);
}
#contactModal h2, .abuse h2 {
  padding: 2.4rem 0 .9rem 3rem;
  border-bottom: 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  font: 900 1.9rem/1.2 var(--display);
  color: var(--deep);
}
.modal-body { padding: 0 3rem 3.4rem; 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 .9rem/1.6 var(--body); color: var(--deep); }
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: 3.25rem;
  padding: 4px 14px;
  background-color: #fff;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  box-shadow: none;
  font: 400 1.0625rem/1.4 var(--body);
  color: var(--ink);
}
#contactModal input[type=file] { height: 25px; padding: 18px 12px; }
textarea:focus, input:focus { border-color: var(--strong); box-shadow: 0 0 0 4px rgba(var(--strong-rgb), .2); }
#contactModal input[type=submit].btn,
button.btn, input[type=submit].btn {
  width: 100%;
  height: 3.1rem;
  margin-top: 15px;
  background: var(--strong);
  background-image: none;
  border: 0;
  border-radius: 999px;
  text-shadow: none;
  font: 600 1rem/1 var(--body);
  color: #fff;
  transition: background-color .15s;
}
#contactModal input[type=submit].btn:hover,
button.btn:hover, input[type=submit].btn:hover { background: var(--strong-hover); }
#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'%2300515c' 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 .15s;
}
#contactModal .icon-close:hover { opacity: 1; }
#contactModal .parsley-errors-list { margin-top: 16px; font-size: .95rem; color: #a32d2d; }
#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]) { border-color: #a32d2d; }

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

@media (max-width: 768px) {
  #main-content { margin: 0; }
  #contentArea { padding-top: 1rem; }
  #categoryHead .sort { display: none; }
  #fullArticle .title { padding-right: 3.6rem; }
  #fullArticle h2 { font-size: 1.35rem; }
  #fullArticle .printArticle { right: .9rem; }
  .articleFoot time.lu { float: none; }
  .modal-body { min-height: 730px; padding: 0 1.5rem 3rem; }
  #contactModal h2, .abuse h2 { padding-left: 1.5rem; font-size: 1.6rem; }
  footer { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .category-list .category:hover { transform: none; }
  .articleList li a:hover::after { transform: none; }
}

/* ---------- Print: the glow band does not print, so the title goes back to dark ink ---------- */

@media print {
  body { background: #fff; }
  #mainNav, #docsSearch, #sidebar, footer::before, #fullArticle .printArticle { display: none !important; }
  .contentWrapper { border: 0; box-shadow: none; border-radius: 0; }
  #fullArticle { padding: 0; }
  #fullArticle .title, #categoryHead, #serp > h1 { margin: 0 0 1rem; padding: 0; background: none; color: #000; }
  #fullArticle .title, #categoryHead h1 { color: #000; }
  #fullArticle, #fullArticle p, #fullArticle li { color: #000; }
}