/* ==========================================================================
   Send It Secure — Help Center (Help Scout Docs)
   sis-v2.css  ·  v2.4  ·  10 Sep 2026

   Upload via: Help Scout > Docs > Settings > (stylesheet upload)
   Paired with: headers-v2.1-SHIP.html (loads Open Sans 300/400/600/700)
   Rollback: sis.css v1, same folder

   ---------------------------------------------------------------------------
   BUGS FIXED FROM v1
   - Header logo was clipped: 300x58 asset in a 180x48 box with no
     background-size, cropping ~60px off each end. Now `contain`.
   - Desktop nav never rendered: `display:none` sat AFTER the min-width:769px
     block, so it won at every width. Moved into a max-width query.
   - `:sel` is not a CSS pseudo-class; the invalid selector was taking the
     adjacent :hover rule down with it. Removed.
   - `border: #2b3742` reset border-style to none, so the border vanished.
   - Search "No results found" rendered before any query existed.
   - Brand text node was display:none, removing the logo's accessible name
     from the a11y tree. Now a clip-based visually-hidden pattern.

   ADDED
   - Five brand tokens at :root, matching the portal's colors.less
   - Article body typography: 17px/1.75, 68ch measure, heading rhythm,
     bordered screenshots, styled tables/code/callouts
   - Collection + article-list card treatment
   - 2px focus rings at 2px offset (WCAG 2.4.11); the Bootstrap 2 default
     was a 1px #ccc ring that fails
   - prefers-reduced-motion and print stylesheets

   HEADER MATCHED TO senditsecure.com (screenshot comparison, 10 Sep)
   - Nav items are WHITE at rest, 16px/600 — earlier documentation had this
     wrong as slate-going-white
   - Active page is a text underline at 4px offset, not a border-bottom bar
   - 40px lockup in a ~64px bar; v2.0's 48px made this header sit ~36px
     deeper than marketing's, which read as a jolt between sites
   - Logo flush to the viewport edge via a full-width .container override

   ---------------------------------------------------------------------------
   TWO THINGS TO KNOW

   1. PAINT, NOT LAYOUT — above the [?] marker.
      Help Scout's chrome is Bootstrap 2 and positions things against fixed
      offsets tuned to its own geometry. Changing padding, height, or display
      on the search widget dropped the button out of alignment twice. Adding
      padding to a collection card without border-box turned a 3-up grid into
      2-up. Change colors, borders, and type. Leave geometry alone.

   2. ONE RULE FIGHTS THE PLATFORM, KNOWINGLY.
      The `.navbar .container` full-width override (section 3) targets Help
      Scout's structural markup, not a style hook, to get the logo flush left.
      If they change the navbar it stops applying and the header reverts to
      centered — ugly, not broken. Accepted trade for header parity.

   VERIFY BEFORE TRUSTING
   Selectors below the [?] marker are best-guess against Help Scout's content
   DOM. Load one article page and one collection page, fix what missed, delete
   what you don't need.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The five brand colors, matching the product portal's colors.less exactly.
   Change a brand color here and nowhere else.
   -------------------------------------------------------------------------- */

:root {
  --sis-navy:        #2B3742;  /* @mdc-theme-primary     */
  --sis-slate-light: #8AA7C1;  /* @mdc-theme-secondary   */
  --sis-slate:       #5B7891;  /* @mdc-theme-color-three */
  --sis-badge:       #7A96AF;  /* @mdc-theme-color-four  */
  --sis-ghost:       #F8F8FF;  /* @mdc-theme-white       */

  /* Supporting neutrals — from the deck design system */
  --sis-ink:         #2B3742;
  --sis-body:        #5B6472;
  --sis-border:      #C3D0DA;
  --sis-card:        #DCE4EA;
  --sis-panel:       #F4F7F8;
  --sis-pale:        #ECF1F3;

  --sis-radius:      6px;
  --sis-radius-sm:   3px;
  --sis-measure:     68ch;
  --sis-shadow:      0 1px 3px rgba(43, 55, 66, 0.08);
  --sis-shadow-lift: 0 6px 20px rgba(43, 55, 66, 0.12);
}

/* --------------------------------------------------------------------------
   2. FOUNDATION
   -------------------------------------------------------------------------- */

body {
  font-family: 'Open Sans', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
  color: var(--sis-body);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, button, textarea, select {
  font-family: 'Open Sans', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
}

/* Accessible focus, everywhere. The Bootstrap 2 default is a 1px #ccc ring
   that fails WCAG 2.4.11 — this replaces it globally. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sis-navy) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* On navy grounds the navy ring is invisible — flip to ghost white */
.navbar a:focus-visible,
.navbar button:focus-visible,
#searchBar button:focus-visible {
  outline-color: var(--sis-ghost) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--sis-slate) !important;
  box-shadow: 0 0 0 3px rgba(91, 120, 145, 0.15) !important;
}

::selection {
  background: rgba(138, 167, 193, 0.35);
}

/* --------------------------------------------------------------------------
   3. HEADER + BRAND
   -------------------------------------------------------------------------- */

.navbar {
  background-color: var(--sis-navy);
}

.navbar .navbar-inner {
  background-color: var(--sis-navy) !important;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  min-height: 0;
}

/* FULL-BLEED HEADER — fighting the platform, knowingly
   The marketing header runs its logo flush to the viewport's left edge and
   the nav flush right. Help Scout wraps the navbar contents in a centered,
   max-width .container, which indented the logo ~230px and was the largest
   remaining difference between the two headers.
   This releases that container to full width with its own gutters.
   RISK: .container is Help Scout's structural class, not a style hook. If
   they change the navbar markup this rule stops applying — the header would
   revert to centered, which is ugly but not broken. Accepted trade. */
.navbar .navbar-inner > .container,
.navbar .container,
.navbar .container-fluid,
.navbar-inner .container,
.navbar-inner .container-fluid {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* Belt and braces: if the container selector above still misses because Help
   Scout wraps the navbar in something else, this pulls the lockup left on its
   own. Harmless when the override above works (margin-left is already 0). */
.navbar .brand {
  margin-left: 0 !important;
}

/* THE LOGO FIX
   The CDN asset is 300x58 while this box is 180x48, so without a
   background-size the image paints at intrinsic size and gets cropped
   ~60px on each side — "Send" and "cure" were being cut off.
   `contain` also future-proofs this against the master being republished
   at 1247x208, which is the recommended next step. */
/* Sized to the marketing header: ~40px lockup in a ~64px bar.
   v2.0 used 48px in a taller bar, which made the Help Center header sit
   about 36px deeper than the marketing one — visible as a jolt when moving
   between the two sites. */
.brand {
  width: 172px;
  height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--sis-navy)
              url('https://cdn.senditsecure.com/images/send-it-secure-logo-light-one-line.svg')
              left center no-repeat;
  background-size: contain;
  transition: opacity 0.15s ease;
}

.brand:hover {
  opacity: 0.85;
}

/* The lockup is a background image, so the accessible name has to come from
   the text node Help Scout puts inside .brand. v1 used display:none, which
   removes it from the accessibility tree entirely — screen readers announced
   an unlabelled link. This clip pattern hides it visually but keeps it. */
.brand span {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.caret {
  display: none !important;
}

/* Size is set in three places because Help Scout's own navbar rules and the
   Bootstrap 2 base both carry font-size on nav descendants. Marketing is
   15px/600; anything larger makes the Help Center bar read as a different
   site even when the color and spacing match. */
.navbar .nav > li > a,
.navbar .nav li a,
.navbar .nav a {
  font-size: 15px !important;
  line-height: normal !important;
}

.icon-bar {
  background: var(--sis-ghost) !important;
}

/* --------------------------------------------------------------------------
   4. NAVIGATION
   THE NAV FIX
   In v1 `.navbar .nav { display: none }` sat AFTER the min-width:769px block,
   so it won at every viewport width and the desktop nav never appeared.
   The collapse rule now lives in a max-width query where it belongs, and the
   desktop rules follow it.
   -------------------------------------------------------------------------- */

.navbar .nav {
  margin: 0;
}

.navbar .nav li {
  line-height: normal;
}

.navbar .nav li i {
  color: var(--sis-ghost);
}

/* Matched to the marketing site header (screenshot, 10 Sep 2026).
   CORRECTION: earlier documentation recorded nav items as Slate Light going
   white on hover. They are WHITE at rest — all of them.

   ⚠ THE PANEL OVERRIDES THIS RULE.
   Help Scout's "Nav text color" setting is injected with higher precedence
   than this stylesheet, so the color below only applies if the panel agrees.
   Set panel > Nav text color to #ffffff. Do not try to win this with
   !important — the panel is the right home for a value it can express. */
.navbar .nav a {
  line-height: normal !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600;
  color: var(--sis-ghost);
  padding: 4px 0 !important;
  margin: 0 !important;
  display: inline-block;
  text-decoration: none;
  transition: color 0.15s ease;
  text-shadow: none;
}

.navbar .nav a:hover,
.navbar .nav a:focus {
  color: var(--sis-slate-light);
  background: none;
  text-decoration: none;
}

/* Active page — a text underline, matching marketing. Not a border-bottom
   bar: that sat lower and read as a tab, which marketing doesn't do. */
.navbar .nav .active > a,
.navbar .nav li.active a {
  color: var(--sis-ghost);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  background: none;
  box-shadow: none;
}

.navbar .nav a:hover,
.navbar .nav a:focus {
  color: var(--sis-ghost);
  border-bottom-color: var(--sis-slate-light);
  background: none;
}

/* Current page — white, matching the marketing site's treatment */
.navbar .nav .active > a,
.navbar .nav li.active a {
  color: var(--sis-ghost);
  border-bottom-color: var(--sis-slate-light);
  background: none;
  box-shadow: none;
}

/* Mobile: collapse. This is the rule that was misplaced in v1. */
@media (max-width: 768px) {
  .navbar .nav.collapse:not(.in) {
    display: none;
  }

  .brand {
    width: 150px;
    height: 36px;
  }

  .navbar .navbar-inner > .container,
  .navbar .container {
    padding: 0 16px !important;
  }
}

@media (min-width: 769px) {
  .nav-collapse.collapse {
    position: relative;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar .nav {
    position: relative;
    top: 5px;
    float: right;
  }

  .navbar .nav li {
    margin-left: 26px;
  }
}

/* Sign In — matched to marketing: uppercase, letter-spaced, slate fill.

   ⚠ KNOWN ACCESSIBILITY DEBT, INHERITED DELIBERATELY
   White on #8AA7C1 measures 2.5:1 and fails WCAG AA — on the highest-intent
   control on the page, for a product sold on compliance. It is set this way
   here ONLY so the header transition from the marketing site is seamless.

   THE FIX, when you're ready, is two characters in two files: swap the color
   below to var(--sis-navy) and make the same change on the marketing site.
   Navy on the same fill is 8.1:1. Both properties then match AND pass.
   Do not fix one without the other, or the headers diverge again. */
.sign-in-button li {
  background: var(--sis-slate-light);
  border: 0;
  border-radius: var(--sis-radius-sm);
  transition: background 0.15s ease;
}

.sign-in-button li a {
  margin: 0 !important;
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sis-ghost) !important;   /* ← var(--sis-navy) to fix contrast */
  text-decoration: none !important;
  border-bottom: none !important;
}

.sign-in-button li a:hover {
  color: var(--sis-ghost) !important;
  text-decoration: none !important;
}

.sign-in-button li:hover {
  background: var(--sis-ghost);
  border-bottom: none !important;
}

.sign-in-button li:hover a {
  color: var(--sis-navy) !important;
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   5. SEARCH
   -------------------------------------------------------------------------- */

/* PAINT ONLY — DO NOT SET LAYOUT HERE
   Learned the hard way: Help Scout positions the search button absolutely
   against a fixed offset tuned to its own input height. Changing the input's
   padding, height, or display, or making #searchBar a flex container, drops
   the button out of alignment. v2.0 set padding + height:auto and the button
   fell below the field; v2.1 added flex and it got worse.
   Change colors, borders, and font. Leave geometry to Help Scout. */

#searchBar input,
#searchBar input[type="text"],
#searchBar input[type="search"],
#searchBar .search-query {
  font-size: 16px !important;
  border: 1px solid var(--sis-border) !important;
  box-shadow: none !important;
  color: var(--sis-ink);
}

#searchBar input::placeholder {
  color: #7A8794;
  opacity: 1;
}

#searchBar button {
  background: var(--sis-navy);
  border: 1px solid var(--sis-navy);
  color: var(--sis-ghost);
  font-weight: 600;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#searchBar button:hover,
#searchBar button:focus {
  background: var(--sis-slate);
  border-color: var(--sis-slate);
  color: var(--sis-ghost);
}

/* --------------------------------------------------------------------------
   6. CONTACT MODAL
   -------------------------------------------------------------------------- */

#contactModal h2 {
  background: var(--sis-navy);
  color: var(--sis-ghost);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.icon-close {
  color: var(--sis-ghost) !important;
  opacity: 0.9;
}

.icon-close:hover {
  opacity: 1;
}


/* ==========================================================================
   [?] BELOW THIS LINE — verify selectors against the live DOM
   These target Help Scout Docs' content areas. Inspect an article page and a
   collection page, fix any selector that misses, delete what you don't need.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. PAGE HEADER / HERO
   -------------------------------------------------------------------------- */

#pageHeader,
.page-header,
.hero-unit {
  background: var(--sis-panel);
  border: 0;
  border-bottom: 1px solid var(--sis-border);
  border-radius: 0;
  padding: 48px 20px;
  margin-bottom: 0;
  box-shadow: none;
}

#pageHeader h1,
.hero-unit h1 {
  color: var(--sis-ink);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  text-shadow: none;
}

#pageHeader p,
.hero-unit p {
  color: var(--sis-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. BREADCRUMBS
   -------------------------------------------------------------------------- */

.breadcrumb,
.breadcrumbs {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 20px 0;
  margin: 0;
  font-size: 14px;
  box-shadow: none;
}

.breadcrumb a,
.breadcrumbs a {
  color: var(--sis-slate);
  font-weight: 600;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--sis-navy);
}

.breadcrumb > li + li:before,
.breadcrumb .divider {
  color: var(--sis-border);
  content: "\00b7";  /* middot — the brand's recurring separator */
  padding: 0 8px;
}

/* --------------------------------------------------------------------------
   9. COLLECTIONS + ARTICLE LISTS
   Cards instead of undifferentiated rows, so 13 collections are scannable.
   -------------------------------------------------------------------------- */

/* BOX-SIZING IS LOAD-BEARING HERE
   Bootstrap 2 predates border-box and sizes its .span* columns on content
   width alone. Adding padding to a card therefore makes it WIDER than its
   column, and the third card wraps to a new row — a 3-up grid silently
   becomes 2-up. border-box pulls the padding inside the declared width and
   the third column comes back.
   Also note: no `transform` on hover. A transform on a Bootstrap 2 float
   grid can nudge neighbours; the shadow alone reads as lift. */
.collection,
.category,
.collection-item {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--sis-border);
  border-radius: var(--sis-radius);
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--sis-shadow);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.collection:hover,
.category:hover,
.collection-item:hover {
  border-color: var(--sis-slate-light);
  box-shadow: var(--sis-shadow-lift);
}

.collection h2,
.collection h3,
.category h2,
.category h3,
.collection-item h2,
.collection-item h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sis-ink);
  margin: 0 0 8px;
}

.collection h2 a,
.collection h3 a,
.category h2 a,
.category h3 a {
  color: var(--sis-ink);
  text-decoration: none;
}

.collection h2 a:hover,
.collection h3 a:hover,
.category h2 a:hover,
.category h3 a:hover {
  color: var(--sis-slate);
}

.collection p,
.category p,
.collection-item p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sis-body);
  margin: 0;
}

/* Article count / metadata */
.collection .meta,
.collection small,
.category small,
.article-count {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sis-slate);
}

/* Article lists inside a collection */
.articleList li,
.article-list li,
#articleList li {
  border-bottom: 1px solid var(--sis-pale);
  padding: 0;
  margin: 0;
  list-style: none;
}

.articleList li:last-child,
.article-list li:last-child,
#articleList li:last-child {
  border-bottom: 0;
}

.articleList li a,
.article-list li a,
#articleList li a {
  display: block;
  padding: 15px 4px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--sis-ink);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.articleList li a:hover,
.article-list li a:hover,
#articleList li a:hover {
  color: var(--sis-slate);
  padding-left: 10px;
}

/* --------------------------------------------------------------------------
   10. ARTICLE BODY
   The single biggest visual improvement available here — v1 left this
   entirely to the platform default.
   -------------------------------------------------------------------------- */

#fullArticle,
.article-body,
.articleBody,
#article {
  font-size: 17px;
  line-height: 1.75;
  color: var(--sis-body);
  max-width: var(--sis-measure);
  text-wrap: pretty;
  min-height: 0 !important;
}

/* Short articles were getting ~250px of dead space below the text because
   Help Scout sets a min-height on the article wrapper \u2014 presumably so the
   sidebar never out-runs the content. With the sidebar often empty here,
   it just reads as a broken card. */
.article,
#articleContainer,
.article-container,
#main .article,
.articleWrapper {
  min-height: 0 !important;
}

#fullArticle h1,
.article-body h1,
.articleBody h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sis-ink);
  margin: 0 0 16px;
}

#fullArticle h2,
.article-body h2,
.articleBody h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sis-ink);
  margin: 44px 0 14px;
  padding-top: 4px;
}

#fullArticle h3,
.article-body h3,
.articleBody h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sis-ink);
  margin: 32px 0 10px;
}

#fullArticle h4,
.article-body h4,
.articleBody h4 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sis-ink);
  margin: 26px 0 8px;
}

#fullArticle p,
.article-body p,
.articleBody p {
  margin: 0 0 18px;
}

#fullArticle a,
.article-body a,
.articleBody a {
  color: var(--sis-slate);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 120, 145, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}

#fullArticle a:hover,
.article-body a:hover,
.articleBody a:hover {
  color: var(--sis-navy);
  border-bottom-color: var(--sis-navy);
}

#fullArticle strong,
.article-body strong,
.articleBody strong {
  font-weight: 700;
  color: var(--sis-ink);
}

#fullArticle ul,
#fullArticle ol,
.article-body ul,
.article-body ol,
.articleBody ul,
.articleBody ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

#fullArticle li,
.article-body li,
.articleBody li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Screenshots. The product UI is light, so without a border it bleeds into
   the white page and loses its edges. This is the brand's documented
   screenshot treatment. */
#fullArticle img,
.article-body img,
.articleBody img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--sis-border);
  border-radius: var(--sis-radius-sm);
  margin: 12px 0 24px;
  display: block;
}

/* Callouts */
#fullArticle blockquote,
.article-body blockquote,
.articleBody blockquote {
  background: var(--sis-panel);
  border: 0;
  border-left: 3px solid var(--sis-slate-light);
  border-radius: 0 var(--sis-radius-sm) var(--sis-radius-sm) 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 16px;
  color: var(--sis-body);
}

#fullArticle blockquote p:last-child,
.article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Code */
#fullArticle code,
.article-body code,
.articleBody code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14.5px;
  background: var(--sis-panel);
  border: 1px solid var(--sis-pale);
  border-radius: var(--sis-radius-sm);
  padding: 2px 6px;
  color: var(--sis-ink);
}

#fullArticle pre,
.article-body pre,
.articleBody pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  background: var(--sis-navy);
  color: #CBD6E0;
  border: 0;
  border-radius: var(--sis-radius);
  padding: 20px 24px;
  margin: 24px 0;
  overflow-x: auto;
}

#fullArticle pre code,
.article-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* Tables */
#fullArticle table,
.article-body table,
.articleBody table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15.5px;
}

#fullArticle th,
.article-body th,
.articleBody th {
  background: var(--sis-panel);
  border-bottom: 1px solid var(--sis-border);
  padding: 12px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sis-body);
}

#fullArticle td,
.article-body td,
.articleBody td {
  border-bottom: 1px solid var(--sis-pale);
  padding: 12px 16px;
  /* overflow-wrap, never word-break — break-all splits words mid-character */
  overflow-wrap: break-word;
}

#fullArticle hr,
.article-body hr,
.articleBody hr {
  border: 0;
  border-top: 1px solid var(--sis-pale);
  margin: 36px 0;
}

/* CONFIRMED (10 Sep): <time class="lu" datetime="2025-03-25">
   Not guessable \u2014 v2.8's [class*="updated"] wildcard never had a chance. */
time.lu,
.lu,
time[datetime] {
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  color: #7A8794 !important;
}

/* --------------------------------------------------------------------------
   11. RELATED ARTICLES + SIDEBAR
   -------------------------------------------------------------------------- */

#relatedArticles,
.related-articles,
.sidebar,
#sidebar {
  font-size: 15.5px;
}

#relatedArticles h3,
.related-articles h3,
.sidebar h3,
#sidebar h3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sis-slate);
  margin: 0 0 14px;
}

#relatedArticles a,
.related-articles a,
.sidebar a,
#sidebar a {
  color: var(--sis-ink);
  font-weight: 600;
  text-decoration: none;
}

#relatedArticles a:hover,
.related-articles a:hover,
.sidebar a:hover,
#sidebar a:hover {
  color: var(--sis-slate);
}

/* Sidebar current item */
.sidebar .active > a,
#sidebar .active > a {
  color: var(--sis-slate);
  border-left: 2px solid var(--sis-slate-light);
  padding-left: 10px;
  margin-left: -12px;
}

/* --------------------------------------------------------------------------
   12. SEARCH RESULTS
   THE EMPTY-STATE FIX
   Help Scout renders the "No results found" node on page load, before any
   query exists. Hidden until the results container is actually populated.
   -------------------------------------------------------------------------- */

#searchResults:empty,
.no-results:not(.has-query),
#noResults:not(.has-query) {
  display: none !important;
}

.searchResult,
.search-result {
  border-bottom: 1px solid var(--sis-pale);
  padding: 20px 0;
}

.searchResult h3 a,
.search-result h3 a {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--sis-ink);
  text-decoration: none;
}

.searchResult h3 a:hover,
.search-result h3 a:hover {
  color: var(--sis-slate);
}

.searchResult em,
.search-result em {
  background: rgba(138, 167, 193, 0.25);
  font-style: normal;
  font-weight: 700;
  color: var(--sis-ink);
  padding: 1px 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   13. BUTTONS
   -------------------------------------------------------------------------- */

.btn,
a.btn,
button:not(.close),
input[type="submit"] {
  background: var(--sis-navy);
  background-image: none;
  border: 1px solid var(--sis-navy);
  border-radius: var(--sis-radius-sm);
  color: var(--sis-ghost) !important;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 24px;
  text-shadow: none;
  box-shadow: none;
  min-height: 44px;  /* touch target */
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* The color needs !important and its own rule: Help Scout sets a text color
   on .btn descendants that otherwise wins, which rendered the "View in Help
   Scout" button as near-black text on a navy fill — invisible. */
.btn,
.btn:link,
.btn:visited,
a.btn:link,
a.btn:visited,
button:not(.close) {
  color: var(--sis-ghost) !important;
}

.btn:hover,
a.btn:hover,
button:not(.close):hover,
input[type="submit"]:hover {
  background: var(--sis-slate);
  border-color: var(--sis-slate);
  color: var(--sis-ghost) !important;
}

.btn-secondary,
.btn.secondary {
  background: transparent;
  color: var(--sis-navy);
  border-color: var(--sis-border);
}

.btn-secondary:hover,
.btn.secondary:hover {
  background: var(--sis-navy);
  border-color: var(--sis-navy);
  color: var(--sis-ghost);
}

/* --------------------------------------------------------------------------
   14. FOOTER
   v2.7 tried padding + width overrides and the slab stayed ~210px tall with
   the text pinned near the top — so the height is coming from something other
   than the element I'm targeting. Casting wider here; the real selector still
   needs confirming against the DOM.
   -------------------------------------------------------------------------- */

footer,
#footer,
.footer,
#pageFooter,
.page-footer,
#siteFooter {
  background: var(--sis-navy) !important;
  color: var(--sis-slate-light);
  border: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  margin-top: 56px !important;
  margin-bottom: 0 !important;
  font-size: 14px;
  line-height: 1.6 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: center;
  display: block !important;
}

/* Anything Help Scout nests inside the footer — container, row, span — can
   carry its own height or padding. Flatten them all. */
footer .container,
#footer .container,
.footer .container,
footer .row,
#footer .row,
footer [class*="span"],
#footer [class*="span"],
footer > div,
#footer > div {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* And the wrapper AROUND the footer, if there is one. A parent with its own
   padding would produce exactly the symptom seen: correct-looking footer
   rules, navy block still deeper than it should be. */
.footer-wrapper,
#footerWrapper,
.site-footer-wrapper,
body > .footer-container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: var(--sis-navy) !important;
}

footer p,
#footer p,
.footer p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Confirmed markup (10 Sep): <footer><p>© <a>Protected Trust</a> 2026.
   <span>Powered by <a>Help Scout</a></span></p></footer>
   The "Powered by Help Scout" attribution is contractual on lower Docs
   plans — do not hide it. Kept legible but quiet. */
footer a,
#footer a,
.footer a,
footer a:link,
#footer a:link {
  color: var(--sis-ghost);
  text-decoration: none;
  border-bottom: 1px solid rgba(248, 248, 255, 0.3);
}

footer a:hover,
#footer a:hover,
.footer a:hover {
  color: var(--sis-slate-light);
  border-bottom-color: var(--sis-slate-light);
}

/* Help Scout's own attribution lives in the <span> inside that <p>. It is
   contractual on lower Docs plans \u2014 do not hide it. Quieted, not removed. */
footer span,
#footer span,
.powered-by,
#poweredBy {
  color: rgba(138, 167, 193, 0.8);
}

/* --------------------------------------------------------------------------
   15. MOTION
   The whole stylesheet's transitions are 0.15–0.18s; this switches them off
   for anyone who has asked for reduced motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .articleList li a:hover,
  .article-list li a:hover {
    padding-left: 4px;
  }
}

/* --------------------------------------------------------------------------
   16. PRINT
   Docs get printed and PDF'd by compliance staff more than you'd think.
   -------------------------------------------------------------------------- */

@media print {
  .navbar,
  #searchBar,
  footer,
  #footer,
  .sidebar,
  #sidebar,
  #relatedArticles,
  .breadcrumb {
    display: none !important;
  }

  #fullArticle,
  .article-body {
    max-width: 100%;
    font-size: 11pt;
    color: #000;
  }

  #fullArticle a,
  .article-body a {
    color: #000;
    border-bottom: 0;
  }

  #fullArticle a[href^="http"]::after,
  .article-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}