/* ==========================================================================
   Selectsys components
   --------------------------------------------------------------------------
   HEADER and FOOTER are global: both templates are shared by all 374 page
   files, so restyling them restyles the whole site. Both use new class names
   (sx-*) so no legacy rule applies to them and no legacy page can be broken
   by them.

   BUTTONS are global by design: they retune Bootstrap's own .btn-* classes so
   the 1,127 existing buttons across the site inherit one system. Geometry is
   unchanged enough that no layout moves.

   Everything else is scoped to .sx-page and reaches only pages that opt in.

   Requires sx-tokens.css and sx-base.css.
   ========================================================================== */

/* ==========================================================================
   1. HEADER  (global)
   ========================================================================== */
.sx-header{
  position:sticky;top:0;z-index:var(--sx-z-header);
  background:var(--sx-white);
  border-bottom:1px solid var(--sx-line);
  font-family:var(--sx-font);
}
.sx-header .sx-bar{
  max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--sx-gutter);
  height:var(--sx-header-h);
  display:flex;align-items:center;gap:var(--sx-4);
}
.sx-brand{display:flex;align-items:center;flex:none;padding:0;margin-right:var(--sx-2)}
/* the existing Selectsys logo, unmodified. logo1.svg is the light-background
   lockup already in the repository. */
.sx-brand img{display:block;height:34px;width:auto;max-width:none}

/* css/style.css line 848 carries a global `button, .cta-button` rule in which
   every declaration is !important: 18px, weight 600, a #0d47a1 fill, 16px/32px
   padding and a 4px radius on every <button> element on the site. It cannot be
   deleted without auditing every page that depends on it, so the header's own
   buttons are reset here. These are the only !important declarations added in
   Phase 2, and each one exists purely to cancel an existing !important. */
.sx-header button{
  font-size:inherit !important;
  font-weight:inherit !important;
  background-color:transparent !important;
  color:inherit !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
}
.sx-header .sx-burger{
  padding:0 !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius-sm) !important;
  color:var(--sx-ink) !important;
}
.sx-header .sx-burger:hover{background-color:var(--sx-tint) !important}

.sx-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.sx-nav > li{position:static}
.sx-nav .sx-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px !important;border-radius:var(--sx-radius-sm) !important;
  font-size:15px !important;font-weight:var(--sx-w-medium) !important;color:var(--sx-body) !important;
  text-decoration:none;background:none;border:0;cursor:pointer;
  font-family:inherit;line-height:1.2;white-space:nowrap;
}
.sx-nav .sx-link:hover,
.sx-nav .sx-link:focus-visible{background-color:var(--sx-tint) !important;color:var(--sx-ink) !important;text-decoration:none}
.sx-nav .sx-link[aria-expanded="true"]{background-color:var(--sx-tint) !important;color:var(--sx-ink) !important}
.sx-nav .sx-caret{width:9px;height:9px;flex:none;opacity:.6;transition:transform .15s ease}
.sx-nav .sx-link[aria-expanded="true"] .sx-caret{transform:rotate(180deg)}

.sx-header .sx-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sx-4);flex:none}
.sx-header .sx-phone{
  font-size:14.5px;font-weight:var(--sx-w-medium);color:var(--sx-body);text-decoration:none;
}
.sx-header .sx-phone:hover{color:var(--sx-blue)}

/* ---- mega panel --------------------------------------------------------- */
/* Every destination is a real <a href> present in the HTML at all times. The
   panel is hidden with visibility, not removed, so nothing depends on
   JavaScript to be crawlable. */
.sx-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--sx-white);
  border-top:1px solid var(--sx-line);
  border-bottom:1px solid var(--sx-line);
  box-shadow:var(--sx-shadow-lg);
  z-index:var(--sx-z-panel);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.sx-mega[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.sx-mega .sx-mega-in{
  max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2));
  margin-inline:auto;padding:var(--sx-6) var(--sx-gutter) var(--sx-7);
  display:grid;gap:var(--sx-6) var(--sx-7);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.sx-mega .sx-col-label{
  font-size:11.5px;font-weight:var(--sx-w-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sx-muted);
  margin:0 0 var(--sx-3);padding-bottom:var(--sx-2);
  border-bottom:1px solid var(--sx-line);
}
.sx-mega .sx-col-label + .sx-col-label{margin-top:var(--sx-5)}
.sx-mega a{
  display:block;text-decoration:none;padding:6px 0;color:var(--sx-body);
}
.sx-mega a .t{display:block;font-size:14.5px;font-weight:var(--sx-w-semi);color:var(--sx-ink);line-height:1.3}
.sx-mega a .d{display:block;font-size:12.8px;color:var(--sx-muted);margin-top:1px;line-height:1.35}
.sx-mega a:hover .t,.sx-mega a:focus-visible .t{color:var(--sx-blue)}
.sx-mega a:hover{text-decoration:none}
.sx-mega .sx-mega-foot{
  grid-column:1 / -1;margin-top:var(--sx-2);padding-top:var(--sx-4);
  border-top:1px solid var(--sx-line);
  display:flex;flex-wrap:wrap;gap:var(--sx-5);align-items:center;
  font-size:14px;
}
.sx-mega .sx-mega-foot a{display:inline;padding:0;color:var(--sx-blue);font-weight:var(--sx-w-semi)}
.sx-mega .sx-mega-foot a:hover{text-decoration:underline}

/* ---- mobile ------------------------------------------------------------- */
.sx-burger{
  display:none;margin-left:auto;
  width:42px;height:42px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--sx-line);border-radius:var(--sx-radius-sm);
  color:var(--sx-ink);cursor:pointer;flex:none;
}
.sx-burger:hover{background:var(--sx-tint)}
.sx-burger svg{width:19px;height:19px}
.sx-burger .x{display:none}
.sx-burger[aria-expanded="true"] .x{display:block}
.sx-burger[aria-expanded="true"] .m{display:none}

/* The bar has to survive the web font failing to load, when Inter falls back to
   a wider face, so the desktop band is tightened rather than left to chance.
   Measured with the fallback face: logo 136 + nav 561 + button 166 = 863
   against 960 of usable width at 1024px, so a 992px breakpoint is safe. */
@media (min-width:992px) and (max-width:1319px){
  .sx-header .sx-bar{gap:var(--sx-2)}
  .sx-nav .sx-link{padding:9px 10px !important;font-size:14.6px !important}
}
@media (max-width:991px){
  .sx-burger{display:flex}
  .sx-header .sx-bar{height:66px}
  .sx-header .sx-actions{display:none}
  .sx-drawer{
    display:none;
    position:fixed;left:0;right:0;top:66px;bottom:0;
    background:var(--sx-white);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--sx-line);
    padding:var(--sx-4) var(--sx-gutter-mob) var(--sx-8);
    z-index:var(--sx-z-panel);
  }
  .sx-drawer[data-open="true"]{display:block}
  .sx-nav{display:block;width:100%}
  .sx-nav > li{border-bottom:1px solid var(--sx-line-soft)}
  .sx-nav .sx-link{
    width:100%;justify-content:space-between;padding:14px 2px !important;
    font-size:16px !important;font-weight:var(--sx-w-semi) !important;
    color:var(--sx-ink) !important;border-radius:0 !important;min-height:48px;
  }
  .sx-nav .sx-link:hover{background-color:transparent !important}
  .sx-mega{
    position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;box-shadow:none;border:0;display:none;
    background:var(--sx-tint);border-radius:var(--sx-radius-lg);
    margin-bottom:var(--sx-3);
  }
  .sx-mega[data-open="true"]{display:block}
  .sx-mega .sx-mega-in{
    grid-template-columns:minmax(0,1fr);gap:var(--sx-4);padding:var(--sx-4);
  }
  .sx-mega a{padding:9px 0;min-height:44px}
  .sx-drawer .sx-drawer-cta{
    display:flex;flex-direction:column;gap:var(--sx-3);margin-top:var(--sx-5);
  }
}
@media (min-width:992px){
  .sx-drawer{display:contents}
  .sx-drawer .sx-drawer-cta{display:none}
  /* The mega panel is positioned under the whole header bar, so there is a
     strip of bar between the bottom of a trigger and the top of its panel
     that the pointer has to cross. An earlier attempt stretched each list
     item to the height of the bar to close that strip. That reconnected the
     trigger to its panel, but it also handed the strip to the list items,
     so travelling sideways across it swapped the open panel for a
     neighbour's and the link the pointer was heading for disappeared from
     under it.

     The strip belongs to the panel that is open, not to the nav items. An
     invisible extension of the open panel covers it, so crossing it keeps
     that panel open and cannot trigger a neighbour. It exists only while a
     panel is open, so it never sits over the nav in the resting state, and
     it is exactly as tall as the strip, so it never covers a trigger. */
  /* Height of that strip. Kept just short of the tallest thing in the bar,
     so the strip never covers the logo or the Request a Demo button. The
     couple of pixels it leaves uncovered are bar background, which belongs
     to no nav item, so crossing them cannot swap the panel either, and the
     deferred close covers the moment the pointer spends there. */
  .sx-header{--sx-nav-bridge:14px}
  body.sx-page .sx-header{--sx-nav-bridge:18px}
  .sx-mega[data-open="true"]::before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:100%;
    height:var(--sx-nav-bridge,18px);
  }
}

/* ==========================================================================
   1b. DARK HEADER  —  scoped to modernised pages only
   --------------------------------------------------------------------------
   Approved as Option B. Everything here is scoped to body.sx-page, which is
   the same flag that turns on the design system, so:

     - a page that has been modernised gets the navy masthead automatically;
     - the ~360 pages that have NOT been converted keep the white header they
       have today, which matters because many of them still open with a
       #21409A hero that would merge into a navy header.

   Rolling the header out to a long-tail page therefore requires no header
   change at all: it happens the moment that page is flagged, together with
   the rest of the system. Nothing here is global.

   The logo asset is untouched. images/logo1.svg is a single-colour mark (17
   fills, all #214497), so a brightness/invert filter renders the identical
   artwork in white. No second file, no edit.
   ========================================================================== */
body.sx-page .sx-header{
  background:var(--sx-blue-deep);
  border-bottom:0;
}
body.sx-page .sx-header .sx-bar{height:78px;gap:var(--sx-3)}

/* ---- brand ---- */
body.sx-page .sx-header .sx-brand{margin-right:var(--sx-6)}
body.sx-page .sx-header .sx-brand img{
  height:42px;
  filter:brightness(0) invert(1);
}

/* ---- navigation ---- */
body.sx-page .sx-nav{gap:4px}
body.sx-page .sx-nav .sx-link{
  padding:10px 15px !important;
  font-size:15px !important;
  color:#C9D6F2 !important;
  font-weight:var(--sx-w-medium) !important;
}
body.sx-page .sx-nav .sx-link:hover,
body.sx-page .sx-nav .sx-link:focus-visible,
body.sx-page .sx-nav .sx-link[aria-expanded="true"]{
  background-color:rgba(255,255,255,.12) !important;
  color:#fff !important;
}
body.sx-page .sx-header .sx-phone{color:#C9D6F2}
body.sx-page .sx-header .sx-phone:hover{color:#fff}

/* ---- burger ---- */
body.sx-page .sx-header .sx-burger{
  border-color:rgba(255,255,255,.35) !important;
  color:#fff !important;
}
body.sx-page .sx-header .sx-burger:hover{background-color:rgba(255,255,255,.12) !important}

/* focus rings have to invert too, or they vanish on the navy */
body.sx-page .sx-header a:focus-visible,
body.sx-page .sx-header button:focus-visible,
body.sx-page .sx-ann a:focus-visible,
body.sx-page .sx-ann button:focus-visible{outline-color:#fff}

/* ---- CTA: one solid light block at the right end. A Selectsys-blue fill
        would disappear into a navy ground, so the restraint is in size ---- */
body.sx-page .sx-header .sx-actions{gap:var(--sx-5)}
body.sx-page .sx-header .sx-actions .sx-btn.primary{
  background:#fff !important;border-color:#fff !important;
  color:var(--sx-blue-deep) !important;
  padding:11px 20px !important;font-size:14.5px !important;
}
body.sx-page .sx-header .sx-actions .sx-btn.primary:hover{
  background:#EDF2FD !important;border-color:#EDF2FD !important;
}

/* ---- mega panel stays white: it is page surface, not header chrome, and
        inverting it too would make a very heavy top third of the screen ---- */
body.sx-page .sx-mega{border-top-color:rgba(255,255,255,.16)}

/* ---- announcement bar: deeper navy, so it reads as part of the masthead
        rather than as a separate strip advertising at the reader ---- */
body.sx-page .sx-ann{
  background:#12275A;
  border-top:0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
body.sx-page .sx-ann .sx-ann-in{height:35px}
body.sx-page .sx-ann .msg .nm{font-size:12.8px;color:#fff;font-weight:var(--sx-w-semi)}
body.sx-page .sx-ann .msg .ds{font-size:12.8px;color:#A8C0F0}
body.sx-page .sx-ann .msg a{
  border:0 !important;padding:0 !important;
  font-size:12.8px;color:#A8C0F0;text-decoration:none;
}
body.sx-page .sx-ann .msg a:hover{background:none;color:#fff;text-decoration:underline}
body.sx-page .sx-ann .sx-ann-x{color:rgba(255,255,255,.5) !important}
body.sx-page .sx-ann .sx-ann-x:hover{color:#fff !important}

/* between 992 and 1319 the bar has to hold logo + five groups + CTA in a
   narrow row. The base header already tightens the nav there; this block
   restores that tightening, which the dark rules above would otherwise
   outrank on specificity and push the nav past the viewport at 1024. */
@media (min-width:992px) and (max-width:1319px){
  body.sx-page .sx-header{--sx-nav-bridge:17px}
  body.sx-page .sx-header .sx-bar{gap:var(--sx-2);height:74px}
  body.sx-page .sx-header .sx-brand{margin-right:var(--sx-4)}
  body.sx-page .sx-header .sx-brand img{height:38px}
  body.sx-page .sx-nav{gap:2px}
  body.sx-page .sx-nav .sx-link{padding:9px 10px !important;font-size:14.6px !important}
  body.sx-page .sx-header .sx-actions{gap:var(--sx-3)}
  body.sx-page .sx-header .sx-actions .sx-btn.primary{padding:10px 14px !important;font-size:14px !important}
}

/* ---- mobile: the drawer sits inside the navy header ---- */
@media (max-width:991px){
  body.sx-page .sx-header .sx-bar{height:70px}
  body.sx-page .sx-header .sx-brand img{height:36px}
  body.sx-page .sx-header .sx-brand{margin-right:var(--sx-3)}
  body.sx-page .sx-drawer{
    top:70px;
    background:var(--sx-blue-deep);
    border-top-color:rgba(255,255,255,.14);
  }
  body.sx-page .sx-nav > li{border-bottom-color:rgba(255,255,255,.12)}
  body.sx-page .sx-nav .sx-link{color:#DCE6FA !important}
  body.sx-page .sx-nav .sx-link:hover{background-color:transparent !important;color:#fff !important}
  body.sx-page .sx-mega{background:rgba(255,255,255,.06)}
  body.sx-page .sx-mega a{color:#C9D6F2}
  body.sx-page .sx-mega a:hover{color:#fff}
  body.sx-page .sx-mega .sx-col-label{
    color:#8FAAE8;border-bottom-color:rgba(255,255,255,.16);
  }
  /* the link title carries its own ink colour, which is 1.64:1 on navy. The
     anchor-level rule above does not reach it. */
  body.sx-page .sx-mega .t{color:#fff}
  body.sx-page .sx-mega .d{color:#A8C0F0}
  body.sx-page .sx-mega-foot a{color:#C9D6F2}
  body.sx-page .sx-mega-foot a:hover{color:#fff}
  body.sx-page .sx-ann .sx-ann-in{height:37px}
}

/* ---- announcement bar (global) ------------------------------------------
   Two messages, cross-faded. Both are present in the HTML at all times and the
   inactive one is only transparent, never display:none and never removed, so
   the second product name stays crawlable and stays in the accessibility tree
   in document order. The bar has a fixed height at each breakpoint so the
   header never reflows when the message changes, which is the difference
   between a quiet announcement and a marquee.

   Deliberately renamed from .starter-ribbon: the legacy theme carries its own
   .starter-ribbon rules, and the previous Phase 2 styling had to fight them
   with !important on nine declarations. On a new class name none of that
   applies, so this block has no !important at all except the two that cancel
   the global button rule in style.css. */
.sx-ann{
  background:var(--sx-tint-blue);
  border-bottom:1px solid #DCE6FA;
  font-family:var(--sx-font);
  position:relative;
}
.sx-ann .sx-ann-in{
  max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--sx-gutter);
  height:40px;
  display:flex;align-items:center;justify-content:center;gap:var(--sx-3);
}
/* the messages are stacked in one grid cell so the bar cannot change height
   when the longer message is showing */
.sx-ann .sx-ann-stack{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  place-items:center;
}
.sx-ann .msg{
  grid-area:1/1;
  display:flex;align-items:center;gap:10px;
  min-width:0;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.sx-ann .msg.on{opacity:1;pointer-events:auto}
.sx-ann .msg .nm{
  font-size:13.8px;font-weight:var(--sx-w-semi);color:var(--sx-ink);
  white-space:nowrap;
}
.sx-ann .msg .ds{
  font-size:13.8px;color:var(--sx-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sx-ann .msg a{
  font-size:13.4px;font-weight:var(--sx-w-semi);color:var(--sx-blue);
  text-decoration:none;white-space:nowrap;
  border:1px solid var(--sx-blue-pale);border-radius:var(--sx-radius-sm);
  padding:5px 11px;line-height:1.2;
}
.sx-ann .msg a:hover{background:var(--sx-white);border-color:var(--sx-blue)}
/* style.css line 848 sets font-size, padding, fill and colour on every
   <button> with !important. These two cancel it for the dismiss control. */
.sx-ann .sx-ann-x{
  flex:none;position:relative;
  background-color:transparent !important;
  padding:4px 6px !important;
  border:none !important;
  color:var(--sx-muted) !important;
  font-size:15px !important;line-height:1;cursor:pointer;
}
/* the glyph is small so the bar can stay compact, but the touch target must
   not be. This extends the hit area to at least 44x44 without adding a single
   pixel to the bar's height. */
.sx-ann .sx-ann-x::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
}
.sx-ann .sx-ann-x:hover{color:var(--sx-ink) !important}

@media (max-width:767px){
  .sx-ann .sx-ann-in{padding-inline:var(--sx-gutter-mob);height:44px;gap:var(--sx-2)}
}
/* below 480px the category text is dropped rather than wrapped: "SelectRate"
   plus its link still says everything the bar needs to say, and a wrapped bar
   would double the height of the header on the smallest screens. */
@media (max-width:479px){
  .sx-ann .msg .ds{display:none}
  .sx-ann .msg .nm{font-size:13.2px}
}
/* no rotation for anyone who has asked for less motion: message 1 stays put.
   The base layer already neutralises the transition duration; this also stops
   the script, which checks the same query. */
@media (prefers-reduced-motion:reduce){
  .sx-ann .msg{transition:none}
}

/* ==========================================================================
   2. BUTTONS  (global — retunes the existing Bootstrap classes)
   ========================================================================== */
.btn,
.sx-btn{
  --bs-btn-border-radius:var(--sx-radius);
  font-family:var(--sx-font);
  font-size:15px;
  font-weight:var(--sx-w-semi);
  line-height:1.2;
  letter-spacing:-.006em;
  border-radius:var(--sx-radius);
  padding:12px 22px;
  border:1px solid transparent;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none;
}
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--sx-control-h);cursor:pointer;text-align:center;
}
.btn:focus-visible,.sx-btn:focus-visible{box-shadow:var(--sx-focus);outline:none}

/* primary — solid Selectsys blue */
.btn-primary,.sx-btn.primary{
  background-color:var(--sx-blue);border-color:var(--sx-blue);color:#fff;
  --bs-btn-bg:var(--sx-blue);--bs-btn-border-color:var(--sx-blue);
  --bs-btn-hover-bg:var(--sx-blue-hover);--bs-btn-hover-border-color:var(--sx-blue-hover);
  --bs-btn-active-bg:var(--sx-blue-deep);--bs-btn-active-border-color:var(--sx-blue-deep);
  --bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;
}
.btn-primary:hover,.sx-btn.primary:hover{
  background-color:var(--sx-blue-hover);border-color:var(--sx-blue-hover);color:#fff;
}
/* an <a class="btn btn-primary"> must not take the link colour */
a.btn-primary,a.btn-primary:hover,a.sx-btn.primary,a.sx-btn.primary:hover{color:#fff;text-decoration:none}

/* secondary — white with a border */
.btn-outline-primary,.sx-btn.secondary{
  background-color:var(--sx-white);border-color:var(--sx-line);color:var(--sx-ink);
  --bs-btn-color:var(--sx-ink);--bs-btn-border-color:var(--sx-line);
  --bs-btn-hover-bg:var(--sx-tint);--bs-btn-hover-border-color:var(--sx-blue-soft);
  --bs-btn-hover-color:var(--sx-blue);--bs-btn-bg:var(--sx-white);
}
.btn-outline-primary:hover,.sx-btn.secondary:hover{
  background-color:var(--sx-tint);border-color:var(--sx-blue-soft);color:var(--sx-blue);
}
a.btn-outline-primary,a.sx-btn.secondary{text-decoration:none}

/* on the blue band */
.sx-btn.on-blue{background:#fff;border-color:#fff;color:var(--sx-blue)}
.sx-btn.on-blue:hover{background:#EDF2FD;border-color:#EDF2FD;color:var(--sx-blue-deep)}
.sx-btn.on-blue-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.sx-btn.on-blue-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
a.sx-btn.on-blue,a.sx-btn.on-blue:hover,
a.sx-btn.on-blue-ghost,a.sx-btn.on-blue-ghost:hover{text-decoration:none}

/* text link action */
.sx-btn.text{
  background:none;border-color:transparent;color:var(--sx-blue);padding:0;min-height:0;
  font-weight:var(--sx-w-semi);
}
.sx-btn.text:hover{color:var(--sx-blue-hover);text-decoration:underline}

.sx-btn.sm{min-height:var(--sx-control-h-sm);padding:9px 16px;font-size:14.4px}
.sx-btn.block{width:100%}
.sx-btn-row{display:flex;flex-wrap:wrap;gap:var(--sx-3);align-items:center}

/* ==========================================================================
   3. CARDS  (.sx-page)
   --------------------------------------------------------------------------
   Four kinds, one object. Border, no shadow, 10px radius.
   ========================================================================== */
.sx-page .sx-card{
  background:var(--sx-white);
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  padding:var(--sx-5);
  display:flex;flex-direction:column;
  transition:border-color .15s ease;
}
.sx-page a.sx-card{text-decoration:none;color:inherit}
.sx-page .sx-card:hover{border-color:var(--sx-blue-soft)}
.sx-page .sx-card > :last-child{margin-bottom:0}
.sx-page .sx-card h3{margin:0 0 var(--sx-2)}
.sx-page .sx-card p{font-size:15px;line-height:1.55;margin:0;color:var(--sx-body)}
.sx-page .sx-card .sx-card-foot{margin-top:auto;padding-top:var(--sx-4)}
.sx-page .sx-card .sx-card-foot a{font-size:14.5px;font-weight:var(--sx-w-semi)}

/* on the tinted ground a card turns white; on white it keeps its border */
.sx-page .ground-tint .sx-card{background:var(--sx-white)}

/* --- product card: name, one category, one short explanation, one CTA ---- */
.sx-page .sx-card.product .sx-logo{
  height:34px;width:auto;max-width:150px;display:block;margin-bottom:var(--sx-4);
}
.sx-page .sx-card.product .sx-mark{
  width:38px;height:38px;border-radius:var(--sx-radius);
  background:var(--sx-tint-blue);color:var(--sx-blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sx-4);
}
.sx-page .sx-card.product .sx-mark svg{width:19px;height:19px}
/* SelectConnect is the broader layer, not one more equal module. The emphasis
   is deliberately limited to ground, border and mark colour: no size change, no
   second brand, no logo. It reads as "this one is different" without shouting. */
.sx-page .sx-card.product.lead{
  background:var(--sx-tint-blue);
  border-color:var(--sx-blue-pale);
}
.sx-page .ground-tint .sx-card.product.lead{background:var(--sx-tint-blue)}
.sx-page .sx-card.product.lead:hover{border-color:var(--sx-blue)}
.sx-page .sx-card.product.lead .sx-mark{
  background:var(--sx-blue);color:#fff;border-color:var(--sx-blue);
}
.sx-page .sx-card.product.lead .sx-cat{color:var(--sx-blue)}
/* the lead card can take two grid tracks where the grid is wide enough. Below
   640px the grid is a single column, so the span is never applied and the card
   cannot overflow its track. */
@media (min-width:640px){
  .sx-page .sx-grid .sx-card.span-2{grid-column:span 2}
}

/* kinship label: says how a product relates to the architecture before the
   reader gets to its name. Only used where the relationship is not obvious. */
.sx-page .sx-card .sx-kin{
  display:block;margin-bottom:var(--sx-2);
  font-size:11px;font-weight:var(--sx-w-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sx-blue);
}
.sx-page .sx-card.product.lead p{color:var(--sx-ink)}

.sx-page .sx-card.product .sx-cat{
  display:block;font-size:12px;font-weight:var(--sx-w-semi);
  letter-spacing:.07em;text-transform:uppercase;color:var(--sx-muted);
  margin:0 0 var(--sx-2);
}

/* --- data / comparison card --------------------------------------------- */
.sx-page .sx-card.data{padding:var(--sx-5) var(--sx-5) var(--sx-4)}
.sx-page .sx-card.data .sx-figure{
  font-size:30px;font-weight:var(--sx-w-bold);color:var(--sx-ink);
  letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--sx-2);
  font-variant-numeric:tabular-nums;
}

/* --- resource card ------------------------------------------------------- */
.sx-page .sx-card.resource h3{font-size:17px}
.sx-page .sx-card.resource .sx-kind{
  font-size:12px;font-weight:var(--sx-w-semi);letter-spacing:.07em;
  text-transform:uppercase;color:var(--sx-blue);margin-bottom:var(--sx-2);display:block;
}

/* ==========================================================================
   4. PLATFORM DIAGRAMS  (.sx-page)
   ========================================================================== */

/* --- the ecosystem grid --------------------------------------------------
   Replaces the numbered 01-05 strip. The numbering asserted a pipeline that
   does not exist: SelectRate, SelectConnect and RQB are peers, not stages.
   A two-column grid of equal tiles carries the same six products with no
   implied order and no arrows. */
.sx-page .sx-eco{
  display:grid;gap:var(--sx-2);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:520px){
  .sx-page .sx-eco{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sx-page .sx-eco .node{
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  background:var(--sx-white);
  padding:var(--sx-4) var(--sx-4) calc(var(--sx-4) + 2px);
  display:block;text-decoration:none;
}
a.node:hover{border-color:var(--sx-blue-pale);background:var(--sx-tint)}
.sx-page .sx-eco .node .nm{
  display:block;
  font-size:15.5px;font-weight:var(--sx-w-bold);color:var(--sx-ink);
  letter-spacing:-.015em;line-height:1.25;
}
.sx-page .sx-eco .node .cat{
  display:block;margin-top:3px;
  font-size:13.2px;line-height:1.38;color:var(--sx-muted);
}

/* SelectConnect is the broader platform, so its tile spans the row and states
   what sits inside it. The other four are products in their own right and are
   drawn identically to each other, in no order. */
@media (min-width:520px){
  .sx-page .sx-eco .node.lead{grid-column:1 / -1}
}
.sx-page .sx-eco .node.lead{
  border-color:var(--sx-blue-pale);
  background:var(--sx-tint-blue);
}
.sx-page .sx-eco .node.lead .nm{font-size:17.5px}
.sx-page .sx-eco .node.lead .cat{
  color:var(--sx-body);max-width:52ch;
}
a.node.lead:hover{border-color:var(--sx-blue);background:var(--sx-tint-blue)}

/* the two capabilities that run across every workflow rather than inside one */
.sx-page .sx-across{
  margin-top:var(--sx-2);
  border:1px dashed var(--sx-line);
  border-radius:var(--sx-radius-lg);
  background:var(--sx-tint-blue);
  padding:var(--sx-4) var(--sx-5);
  display:flex;flex-wrap:wrap;gap:var(--sx-2) var(--sx-5);align-items:baseline;
}
.sx-page .sx-across .lab{
  font-size:11.5px;font-weight:var(--sx-w-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sx-blue);flex:none;
}
.sx-page .sx-across .item{font-size:14.4px;color:var(--sx-body)}
.sx-page .sx-across .item b{color:var(--sx-ink);font-weight:var(--sx-w-semi)}

/* --- the connected transaction: one submission, parallel connections -----
   The previous version of this diagram was six stacked rows, each feeding the
   next. That arrangement is what made SelectRate read as an input to the
   product below it. Here the connections sit side by side at one level, so
   nothing is upstream of anything else, and only the transaction outcomes
   (quote, bind, issue) are drawn in sequence, because those genuinely are. */
.sx-page .sx-hub{
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  background:var(--sx-white);
  padding:var(--sx-6) var(--sx-5) var(--sx-7);
}
@media (min-width:760px){.sx-page .sx-hub{padding:var(--sx-7) var(--sx-7) var(--sx-8)}}

.sx-page .sx-hub .entry{text-align:center}
.sx-page .sx-hub .entry span{
  display:inline-block;
  font-size:12px;font-weight:var(--sx-w-bold);letter-spacing:.11em;text-transform:uppercase;
  color:var(--sx-ink);background:var(--sx-tint);
  border:1px solid var(--sx-line);border-radius:var(--sx-radius-pill);
  padding:9px 20px;
}
.sx-page .sx-hub .down{
  display:block;text-align:center;color:var(--sx-blue-soft);
  font-size:18px;line-height:1;padding:12px 0;
}

.sx-page .sx-hub .core{
  text-align:center;
  background:var(--sx-blue);color:#fff;
  border-radius:var(--sx-radius-lg);
  padding:var(--sx-5) var(--sx-5);
  max-width:520px;margin-inline:auto;
}
.sx-page .sx-hub .core .nm{
  display:block;font-size:21px;font-weight:var(--sx-w-bold);
  letter-spacing:-.018em;line-height:1.2;color:#fff;
}
.sx-page .sx-hub .core .cat{
  display:block;margin-top:4px;
  font-size:13px;font-weight:var(--sx-w-semi);letter-spacing:.06em;
  text-transform:uppercase;color:var(--sx-blue-pale);
}
.sx-page .sx-hub .core .pr{
  display:block;margin-top:var(--sx-3);
  font-size:14.5px;line-height:1.5;color:#DCE6FA;
}

.sx-page .sx-hub .conns{
  display:grid;gap:var(--sx-2);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:600px){
  .sx-page .sx-hub .conns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .sx-page .sx-hub .conns{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.sx-page .sx-hub .conn{
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius);
  background:var(--sx-white);
  padding:var(--sx-4);
  display:block;text-decoration:none;
}
a.conn:hover{border-color:var(--sx-blue-pale);background:var(--sx-tint)}
.sx-page .sx-hub .conn .ct{
  display:block;font-size:14.6px;font-weight:var(--sx-w-semi);color:var(--sx-ink);
  line-height:1.3;letter-spacing:-.01em;
}
.sx-page .sx-hub .conn .cd{
  display:block;margin-top:4px;
  font-size:13.2px;line-height:1.45;color:var(--sx-muted);
}

.sx-page .sx-hub .out{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--sx-2) var(--sx-3);
}
.sx-page .sx-hub .out span{
  font-size:12px;font-weight:var(--sx-w-bold);letter-spacing:.11em;text-transform:uppercase;
  color:var(--sx-blue);background:var(--sx-tint-blue);
  border:1px solid #DCE6FA;border-radius:var(--sx-radius-pill);
  padding:9px 22px;
}
.sx-page .sx-hub .out i{font-style:normal;color:var(--sx-blue-soft);font-size:14px}
/* at phone width the three outcome chips plus their arrows wrapped after
   "BIND ->", leaving a dangling arrow at the end of the first line. Tightening
   the chips lets the whole sequence hold one line instead. */
@media (max-width:479px){
  .sx-page .sx-hub .out{gap:var(--sx-1) 6px}
  .sx-page .sx-hub .out span{font-size:11px;padding:8px 12px;letter-spacing:.08em}
  .sx-page .sx-hub .out i{font-size:12px}
}
.sx-page .sx-hub .foot{
  margin:var(--sx-5) auto 0;text-align:center;max-width:72ch;
  font-size:14px;line-height:1.55;color:var(--sx-muted);
}

/* ==========================================================================
   5. COMPARISON TABLE  (.sx-page)
   ========================================================================== */
.sx-page .sx-table-wrap{
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  overflow-x:auto;
  background:var(--sx-white);
}
.sx-page .sx-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:15px;min-width:520px;margin:0;
}
.sx-page .sx-table th,
.sx-page .sx-table td{
  text-align:left;padding:14px 20px;
  border-bottom:1px solid var(--sx-line-soft);
  vertical-align:top;max-width:none;
}
.sx-page .sx-table thead th{
  background:var(--sx-tint);
  font-size:11.5px;font-weight:var(--sx-w-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sx-muted);
  border-bottom:1px solid var(--sx-line);white-space:nowrap;
}
.sx-page .sx-table thead th:last-child{color:var(--sx-blue)}
.sx-page .sx-table tbody tr:last-child td{border-bottom:0}
.sx-page .sx-table td:last-child{color:var(--sx-ink);font-weight:var(--sx-w-medium)}
@media (min-width:720px){
  .sx-page .sx-table td:first-child,
  .sx-page .sx-table th:first-child{width:44%;border-right:1px solid var(--sx-line-soft)}
}

/* ==========================================================================
   6. FAQ  (.sx-page)
   --------------------------------------------------------------------------
   Native <details>. The answers are in the HTML and crawlable at all times,
   with no JavaScript involved.
   ========================================================================== */
.sx-page .sx-faq{border-top:1px solid var(--sx-line);max-width:980px}
/* the container widened, so the answers get their own cap: a 980px answer would
   run past the reading measure the rest of the page holds to. */
.sx-page .sx-faq .sx-answer p,
.sx-page .sx-faq .sx-answer li{max-width:72ch}
.sx-page .sx-faq details{border-bottom:1px solid var(--sx-line)}
.sx-page .sx-faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 44px 20px 0;
  font-size:17px;font-weight:var(--sx-w-semi);color:var(--sx-ink);
  line-height:1.4;
}
.sx-page .sx-faq summary::-webkit-details-marker{display:none}
.sx-page .sx-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;margin-top:-1px;
  width:14px;height:2px;background:var(--sx-blue);border-radius:2px;
}
.sx-page .sx-faq summary::before{
  content:"";position:absolute;right:12px;top:50%;margin-top:-7px;
  width:2px;height:14px;background:var(--sx-blue);border-radius:2px;
  transition:transform .15s ease;
}
.sx-page .sx-faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.sx-page .sx-faq summary:hover{color:var(--sx-blue)}
.sx-page .sx-faq .sx-answer{padding:0 44px 22px 0;color:var(--sx-body)}
.sx-page .sx-faq .sx-answer > :last-child{margin-bottom:0}

/* ==========================================================================
   7. FORMS  (.sx-page)
   ========================================================================== */
.sx-page .sx-field{margin-bottom:var(--sx-4)}
.sx-page .sx-field label{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:var(--sx-w-semi);color:var(--sx-ink);
}
.sx-page .sx-input,
.sx-page .sx-select,
.sx-page .sx-textarea{
  width:100%;min-height:var(--sx-control-h);padding:11px 14px;
  font-family:var(--sx-font);font-size:15.5px;color:var(--sx-ink);
  background:var(--sx-white);
  border:1px solid var(--sx-line);border-radius:var(--sx-radius);
}
.sx-page .sx-textarea{min-height:104px;line-height:1.5;resize:vertical}
.sx-page .sx-input:focus,
.sx-page .sx-select:focus,
.sx-page .sx-textarea:focus{outline:none;border-color:var(--sx-blue);box-shadow:var(--sx-focus)}
.sx-page .sx-input.is-invalid{border-color:var(--sx-err)}
.sx-page .sx-help{margin:6px 0 0;font-size:13.4px;color:var(--sx-muted)}

/* ==========================================================================
   8. CUSTOMER LOGOS  (.sx-page)
   --------------------------------------------------------------------------
   One optical weight. The source files are a mix of PNG, JPG, WEBP and SVG at
   different densities, which is what made the row look untidy; a shared height
   with a slight desaturation evens them out without touching the files.
   ========================================================================== */
.sx-page .sx-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sx-6) var(--sx-8);
}
.sx-page .sx-logos img{
  height:34px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .2s ease, opacity .2s ease;
}
.sx-page .sx-logos a:hover img,
.sx-page .sx-logos img:hover{filter:grayscale(0);opacity:1}
@media (max-width:767px){
  .sx-page .sx-logos{gap:var(--sx-5) var(--sx-6)}
  .sx-page .sx-logos img{height:26px;max-width:112px}
}

/* ==========================================================================
   9. QUOTE  (.sx-page)
   ========================================================================== */
.sx-page .sx-quote{max-width:760px}
.sx-page .sx-quote blockquote{
  margin:0 0 var(--sx-4);padding:0;
  font-size:19.5px;line-height:1.55;color:var(--sx-ink);
  font-weight:var(--sx-w-medium);letter-spacing:-.012em;
}
.sx-page .sx-quote figcaption{
  font-size:14.4px;color:var(--sx-muted);
  display:flex;align-items:center;gap:var(--sx-3);flex-wrap:wrap;
}
.sx-page .sx-quote figcaption img{height:26px;width:auto;filter:grayscale(1);opacity:.7}

/* ==========================================================================
   10. PRODUCT UI FRAME  (.sx-page)
   ========================================================================== */
.sx-page .sx-ui{
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  background:var(--sx-white);
  overflow:hidden;
  box-shadow:var(--sx-shadow);
}
.sx-page .sx-ui img{display:block;width:100%;height:auto}
.sx-page .sx-ui figcaption{
  padding:var(--sx-3) var(--sx-4);
  border-top:1px solid var(--sx-line);
  background:var(--sx-tint);
  font-size:13.4px;color:var(--sx-muted);
}
.sx-page figure{margin:0}

/* ==========================================================================
   10b. PARTNER / ACCREDITATION STRIP  (global — shared by 257 pages)
   --------------------------------------------------------------------------
   The marks arrive at intrinsic heights of 41 to 94px, which is what made the
   row look untidy rather than the marks themselves. One optical height fixes
   it without touching a file. These are accreditations, so unlike customer
   logos they keep their colour. The markup is unchanged.
   ========================================================================== */
section.parteners{
  background:var(--sx-tint) !important;
  border-block:1px solid var(--sx-line);
  padding-block:var(--sx-8) !important;
  font-family:var(--sx-font);
}
section.parteners .container{
  max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2));
  padding-inline:var(--sx-gutter);
}
/* the heading is a quiet label here, not a section title. The tag is unchanged. */
section.parteners h2{
  font-size:12px !important;
  font-weight:var(--sx-w-semi) !important;
  letter-spacing:var(--sx-track-eyebrow);
  text-transform:uppercase;
  color:var(--sx-muted) !important;
  margin-bottom:var(--sx-6) !important;
}
section.parteners .partner-logos{gap:var(--sx-6) var(--sx-7) !important;row-gap:var(--sx-6)}
section.parteners .partner-logo{
  height:44px !important;
  width:auto !important;
  max-width:150px;
  object-fit:contain;
  margin-inline:auto;
}
@media (max-width:767px){
  section.parteners{padding-block:var(--sx-7) !important}
  section.parteners .container{padding-inline:var(--sx-gutter-mob)}
  section.parteners .partner-logo{height:34px !important;max-width:118px}
}

/* ==========================================================================
   FOOTER  (templates/footer.php, final polish pass)
   Brand column beside four primary groups; a compact index row for the
   long-tail rating-platform and BPO service links; four compact secondary
   groups; a legal bar. Same 84 destinations as before. Dense, organised,
   with three levels of visual priority: primary group links (14px), index
   and secondary links (13px), legal (12.5px).
   ========================================================================== */
footer.sx-footer{
  background:var(--sx-ink) !important;
  color:#A9B3C7;
  font-family:var(--sx-font);
  padding:0 !important;
  border-top:1px solid rgba(255,255,255,.06);
}
.sx-footer-in{width:100%;max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2));margin-inline:auto;padding-inline:var(--sx-gutter)}
.sx-footer-top{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:64px 48px}
@media (min-width:992px){
  .sx-footer-top{grid-template-columns:minmax(0,27fr) minmax(0,73fr);gap:72px}
}
/* brand column */
.sx-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sx-footer-logo{display:inline-block;line-height:0;margin-bottom:22px}
.sx-footer-logo img{width:176px;height:44px;max-height:none !important}
footer.sx-footer .sx-footer-tagline{font-size:15px !important;line-height:1.6 !important;color:#C4CCDC !important;margin:0 0 18px !important;max-width:34ch}
footer.sx-footer a.sx-footer-mail{font-size:15px;font-weight:var(--sx-w-semi);color:#fff !important;text-decoration:none;padding:0;display:inline-block;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.25)}
footer.sx-footer a.sx-footer-mail:hover{border-bottom-color:#fff}
.sx-footer-cta{margin-bottom:28px}
footer.sx-footer .sx-footer-cta .btn{background:#fff !important;color:var(--sx-blue) !important;border-color:#fff !important;font-weight:var(--sx-w-semi);padding:11px 20px}
footer.sx-footer .sx-footer-cta .btn:hover{background:#EDF2FD !important;color:var(--sx-blue-deep) !important;border-color:#EDF2FD !important}
footer.sx-footer .sx-footer-hq{font-size:13px !important;line-height:1.55 !important;color:#8F99B0 !important;margin:0 !important;max-width:34ch;padding-top:22px;border-top:1px solid rgba(255,255,255,.10)}
footer.sx-footer .sx-footer-hq-label{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#7C879E;margin-bottom:6px}
/* primary groups */
.sx-footer-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}
@media (min-width:768px){.sx-footer-primary{grid-template-columns:repeat(4,minmax(0,1fr))}}
footer.sx-footer .sx-footer-label{
  font-size:11.5px !important;font-weight:var(--sx-w-bold) !important;letter-spacing:.11em;text-transform:uppercase;
  color:#fff !important;margin:0 0 14px !important;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);
}
footer.sx-footer .sx-footer-group ul{list-style:none;margin:0;padding:0;max-width:none}
footer.sx-footer ul:not(.sx-nav):not(.sx-list):not(.list-items) li{margin:0 !important;padding:0 !important;max-width:none;font-size:inherit !important;line-height:inherit !important;list-style:none}
footer.sx-footer .sx-footer-group a{
  display:block;padding:5px 0;font-size:14px !important;line-height:1.4 !important;color:#C4CCDC !important;text-decoration:none;
  transition:color .15s ease,transform .15s ease;
}
footer.sx-footer .sx-footer-group a:hover{color:#fff !important;text-decoration:none;transform:translateX(2px)}
/* index rows: the long-tail lists, inline, quieter */
.sx-footer-index{border-top:1px solid rgba(255,255,255,.10);padding-block:26px 8px}
.sx-footer-index-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px;padding-block:10px}
@media (min-width:992px){.sx-footer-index-row{grid-template-columns:minmax(0,27fr) minmax(0,73fr);gap:72px;align-items:baseline}}
footer.sx-footer .sx-footer-index .sx-footer-label{border:0;margin:0 !important;padding:0;color:#7C879E !important}
footer.sx-footer .sx-footer-inline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 22px;max-width:none}
footer.sx-footer .sx-footer-inline li{margin:0;padding:0;display:flex;align-items:center}
footer.sx-footer .sx-footer-inline a{font-size:13px !important;line-height:1.5 !important;color:#B3BDD0 !important;text-decoration:none;padding:2px 0;transition:color .15s ease}
footer.sx-footer .sx-footer-inline a:hover{color:#fff !important}
/* secondary groups */
.sx-footer-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;border-top:1px solid rgba(255,255,255,.10);padding-block:36px 44px}
@media (min-width:768px){.sx-footer-secondary{grid-template-columns:repeat(4,minmax(0,1fr))}}
footer.sx-footer .sx-footer-group.compact .sx-footer-label{color:#AEB8CC !important;border-bottom:0;padding-bottom:0;margin-bottom:10px !important}
footer.sx-footer .sx-footer-group.compact a{font-size:13px !important;padding:3px 0;color:#B3BDD0 !important}
footer.sx-footer .sx-footer-group.compact a:hover{color:#fff !important}
/* legal bar */
.sx-footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;border-top:1px solid rgba(255,255,255,.10);padding-block:20px 24px;font-size:12.5px;color:#8F99B0}
footer.sx-footer .sx-footer-legal-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0;max-width:none}
footer.sx-footer .sx-footer-legal-links li{margin:0;padding:0;display:flex;align-items:center}
footer.sx-footer .sx-footer-legal-links li + li::before{content:"";width:1px;height:12px;background:rgba(255,255,255,.18);margin:0 14px}
footer.sx-footer .sx-footer-legal-links a{font-size:12.5px;color:#B3BDD0 !important;text-decoration:none;padding:2px 0}
footer.sx-footer .sx-footer-legal-links a:hover{color:#fff !important;text-decoration:underline}
@media (max-width:767px){
  .sx-footer-in{padding-inline:var(--sx-gutter-mob)}
  .sx-footer-top{padding-block:48px 36px;gap:36px}
  .sx-footer-logo img{width:160px;height:40px}
  footer.sx-footer .sx-footer-group a{min-height:36px;display:flex;align-items:center}
  footer.sx-footer .sx-footer-group.compact a{min-height:32px}
  footer.sx-footer .sx-footer-inline{gap:2px 16px}
  .sx-footer-legal{flex-direction:column;align-items:flex-start}
}
}

/* ==========================================================================
   12. UTILITIES  (.sx-page)
   ========================================================================== */
.sx-page .sx-mt-0{margin-top:0}
.sx-page .sx-mb-0{margin-bottom:0}
.sx-page .sx-mt-4{margin-top:var(--sx-4)}
.sx-page .sx-mt-5{margin-top:var(--sx-5)}
.sx-page .sx-mt-6{margin-top:var(--sx-6)}
.sx-page .sx-mt-7{margin-top:var(--sx-7)}
.sx-page .sx-divider{height:1px;background:var(--sx-line);border:0;margin:0}
.sx-mega a + .sx-col-label{margin-top:var(--sx-5)}

/* ==========================================================================
   ON THIS PAGE  (shared in-page navigation, templates/sx-onpage.php)
   Sits in the hero's right column on long overview / product / service
   pages. Plain anchors; every id is a real section on the page.
   ========================================================================== */
.sx-onpage{
  background:var(--sx-white);
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);
  box-shadow:0 1px 2px rgba(16,26,49,.04), 0 10px 28px -18px rgba(16,26,49,.25);
  padding:18px 6px 8px;
  font-family:var(--sx-font);
}
.sx-onpage .sx-onpage-label{
  margin:0 0 6px;padding:0 16px;
  font-size:11.5px;line-height:1.2;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sx-blue);
  display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:default;
}
.sx-onpage summary::-webkit-details-marker{display:none}
.sx-onpage .sx-onpage-chevron{display:none;color:var(--sx-blue-soft)}
@media (max-width:991px){
  .sx-onpage .sx-onpage-label{cursor:pointer;padding:6px 14px}
  .sx-onpage .sx-onpage-chevron{display:block;transition:transform .15s ease}
  .sx-onpage details:not([open]) .sx-onpage-chevron{transform:rotate(-90deg)}
  .sx-onpage details:not([open]){padding-bottom:0}
  .sx-onpage summary:focus-visible{outline:2px solid var(--sx-blue);outline-offset:-2px;border-radius:8px}
}
.sx-onpage .sx-onpage-list{list-style:none;margin:0;padding:0;max-width:none}
.sx-onpage .sx-onpage-list li{margin:0;padding:0;max-width:none;border-top:1px solid var(--sx-line-soft)}
.sx-onpage .sx-onpage-list li:first-child{border-top:0}
.sx-onpage .sx-onpage-list a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px;border-radius:8px;
  color:var(--sx-ink);font-size:15px;line-height:1.35;font-weight:600;text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.sx-onpage .sx-onpage-list a .sx-onpage-arrow{width:14px;height:14px;color:var(--sx-blue-soft);flex:none;transition:transform .15s ease,color .15s ease}
.sx-onpage .sx-onpage-list a:hover{background:var(--sx-tint-blue);color:var(--sx-blue)}
.sx-onpage .sx-onpage-list a:hover .sx-onpage-arrow{color:var(--sx-blue);transform:translateX(3px)}
.sx-onpage .sx-onpage-list a:focus-visible{outline:2px solid var(--sx-blue);outline-offset:-2px;background:var(--sx-tint-blue)}
/* anchor targets clear the sticky header */
.sx-page section[id],.sx-master section[id]{scroll-margin-top:96px}
@media (max-width:991px){
  .sx-onpage{padding:14px 4px 6px}
  .sx-onpage .sx-onpage-list a{padding:10px 14px;font-size:14.5px}
}
/* homepage-system hero split (7/5) used by overview pages that are not masters */
@media (min-width:992px){
  .sx-page .sx-split.hero-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sx-8);align-items:start}
}
@media (min-width:1200px){
  .sx-page .sx-split.hero-split{gap:88px}
}
/* overview hero on the homepage design system: master-scale headline, left aligned */
.sx-page .sx-hero-overview h1{font-size:clamp(32px,3.1vw,44px);line-height:1.08;letter-spacing:-.02em;max-width:none}
.sx-page .sx-hero-overview .sx-lead{max-width:60ch}
/* every in-page anchor target clears the sticky header (sections, bands, panels) */
.sx-page main [id],.sx-master main [id]{scroll-margin-top:96px}

/* ==========================================================================
   THIRD-PARTY / COMPETITOR DISCLOSURE  (templates/competitor-disclaimer.php)
   A compact legal panel that sits at the end of the page content, above the
   footer: tinted ground, one top rule, small left-aligned copy on a reading
   measure, an uppercase "Disclaimer" label. Secondary by design. Unscoped so
   it renders identically on master, propagated and legacy pages; the legacy
   adapter's paragraph rules are overridden explicitly below.
   ========================================================================== */
.sx-disclosure{
  background:var(--sx-tint);
  border-top:1px solid var(--sx-line);
  padding:22px 0 26px;
  margin:0;
  text-align:left;
}
.sx-disclosure-in{
  width:100%;
  max-width:1264px;          /* same content edge as .sx-legacy .container and .sxm-wrap (120px at 1440) */
  margin-inline:auto;
  padding-inline:32px;
}
/* desktop: the four short paragraphs flow in two columns so the panel stays
   shallow; each paragraph stays whole */
@media (min-width:992px){
  .sx-disclosure-body{columns:2;column-gap:48px;max-width:1100px}
  .sx-disclosure-body p,.sx-legacy .sx-disclosure-body p,.sx-page .sx-disclosure-body p{max-width:none;break-inside:avoid;page-break-inside:avoid}
}
.sx-disclosure .sx-disclosure-label,
.sx-legacy .sx-disclosure .sx-disclosure-label,
.sx-page .sx-disclosure .sx-disclosure-label{
  display:block;
  max-width:none;
  margin:0 0 6px;
  font-size:11px !important;
  line-height:1.4 !important;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sx-ink) !important;
  text-align:left;
}
.sx-disclosure p,
.sx-legacy .sx-disclosure p,
.sx-page .sx-disclosure p{
  max-width:78ch;
  margin:0 0 6px;
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--sx-muted) !important;
  text-align:left;
}
.sx-disclosure .sx-disclosure-body p:last-child{margin-bottom:0}
.sx-disclosure a{color:var(--sx-blue);text-decoration:underline;text-underline-offset:2px}
.sx-disclosure a:hover{color:var(--sx-blue-hover)}
@media (max-width:767.98px){
  .sx-disclosure{padding:18px 0 22px}
  .sx-disclosure-in{padding-inline:20px}
}

/* ==========================================================================
   SHARED BLUE BANDS  (.sx-section.ground-blue.sx-band)
   Statement and closing-CTA bands on the page system. Compact (72px block
   padding on desktop, 56px on phones) and composed across the canvas instead
   of a narrow centered stack: eyebrow + heading left, explanation right for a
   statement band; heading + copy left (7 cols), actions + proof right (5 cols)
   for a CTA band. Blue ground kept; no decoration added.
   ========================================================================== */
.sx-page .sx-section.ground-blue.sx-band{padding-block:72px}
.sx-page .sx-band-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sx-5);align-items:start}
.sx-page .sx-band .sx-eyebrow{display:block;margin-bottom:var(--sx-3)}
.sx-page .sx-band h2{margin:0;text-wrap:balance;letter-spacing:-.02em}
.sx-page .sx-band .sx-lead{margin:0;max-width:none;font-size:17px;line-height:1.6}
.sx-page .sx-band h2 + .sx-lead{margin-top:var(--sx-4)}
.sx-page .sx-band .sx-band-actions{display:flex;flex-wrap:wrap;gap:var(--sx-3)}
.sx-page .sx-band .sx-band-proof{margin:var(--sx-4) 0 0;max-width:none;font-size:14px;line-height:1.5;color:#AFBEDD}
@media (min-width:992px){
  .sx-page .sx-band-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sx-8)}
  .sx-page .sx-band-grid.cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .sx-page .sx-band-grid.cta .sx-lead{max-width:56ch}
}
@media (max-width:767.98px){
  .sx-page .sx-section.ground-blue.sx-band{padding-block:56px}
  .sx-page .sx-band .sx-band-actions{flex-direction:column}
  .sx-page .sx-band .sx-band-actions .sx-btn{width:100%;justify-content:center}
}

/* ==========================================================================
   POLISH LAYER (final pass): restrained depth and micro-interactions
   Shared components only. No new library, no decoration; every motion is a
   150 to 180ms ease and is switched off under prefers-reduced-motion.
   ========================================================================== */
footer.sx-footer a:hover{text-decoration:none !important}
footer.sx-footer .sx-footer-legal-links a:hover{text-decoration:underline !important}

/* buttons: a one-pixel lift and a soft brand shadow on hover, none on press */
.btn,.sx-btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn:hover,.sx-btn:hover{transform:translateY(-1px)}
.btn-primary:hover,.sx-btn.primary:hover{box-shadow:0 8px 18px -10px rgba(33,68,151,.55)}
.btn-outline-primary:hover,.sx-btn.secondary:hover{box-shadow:0 6px 14px -10px rgba(33,68,151,.35)}
.sx-btn.on-blue:hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.btn:active,.sx-btn:active{transform:translateY(0);box-shadow:none}

/* page-system cards: hairline at rest, lift only when the whole card is a link */
.sx-page .sx-card{box-shadow:0 1px 2px rgba(16,26,49,.03);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sx-page a.sx-card:hover,.sx-page .sx-card:has(> a:only-child):hover{
  border-color:var(--sx-blue-soft);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(16,26,49,.32),0 1px 2px rgba(16,26,49,.04);
}

/* product / capability tiles (templates/sx-architecture.php): one family */
.sx-arch-tile{box-shadow:0 1px 2px rgba(16,26,49,.03);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sx-arch-tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(16,26,49,.32),0 1px 2px rgba(16,26,49,.04);border-color:var(--sx-blue-soft)}
.sx-arch-tile.lead{box-shadow:inset 3px 0 0 var(--sx-blue),0 1px 2px rgba(16,26,49,.03)}
.sx-arch-tile.lead:hover{box-shadow:inset 3px 0 0 var(--sx-blue),0 14px 30px -18px rgba(16,26,49,.32)}
.sx-arch--full .sx-arch-lead .sx-arch-tile.lead,.sx-arch--full .sx-arch-lead .sx-arch-tile.lead:hover{box-shadow:none;transform:none}
.sx-arch-band{transition:border-color .16s ease}

/* mega menu rows: a clear hover surface, not only a colour change */
.sx-mega a{border-radius:8px;transition:background-color .14s ease,color .14s ease}
.sx-mega a:hover,.sx-mega a:focus-visible{background:var(--sx-tint-blue)}
.sx-mega a:focus-visible{outline:2px solid var(--sx-blue);outline-offset:-2px}
@media (max-width:991px){.sx-mega a{padding-inline:10px}}

/* On this page rows: hover surface, arrow travel, visible keyboard focus (kept), press state */
.sx-onpage .sx-onpage-list a:active{background:var(--sx-blue-pale)}
.sx-onpage .sx-onpage-list a:hover{box-shadow:inset 3px 0 0 var(--sx-blue)}

/* directional links: the arrow glyph travels with the hover */
.sx-page .sx-card-foot a,.sx-master .sxm-more,.sx-master .sxm-tile .learn-more,.sx-legacy .learn-more{transition:color .15s ease,padding-left .15s ease}
.sx-page .sx-card-foot a:hover,.sx-master .sxm-more:hover,.sx-master .sxm-tile .learn-more:hover{padding-left:3px}

/* section rhythm: heroes carry a faint tonal falloff; tint bands keep their
   hairlines; adjacent white sections get a soft rule so bands read as a
   sequence with intent rather than a stack of identical rectangles */
.sx-page .sx-hero-overview,.sx-master .sxm-hero{background:linear-gradient(180deg,#FFFFFF 0%,#F9FAFD 100%) !important}
.sx-page .sx-section.ground-white + .sx-section.ground-white{border-top:1px solid var(--sx-line-soft)}
.sx-onpage{box-shadow:0 1px 2px rgba(16,26,49,.04),0 18px 40px -24px rgba(16,26,49,.35)}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.sx-btn:hover,.sx-page a.sx-card:hover,.sx-arch-tile:hover,footer.sx-footer .sx-footer-group a:hover{transform:none}
  .sx-page .sx-card-foot a:hover,.sx-master .sxm-more:hover{padding-left:0}
}
/* hero ecosystem nodes carry the same product marks as the product cards and
   the architecture partial */
.sx-page .sx-eco .node .sx-mark{width:26px;height:26px;border-radius:7px;background:var(--sx-tint-blue);color:var(--sx-blue);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.sx-page .sx-eco .node .sx-mark svg{width:14px;height:14px}
.sx-page .sx-eco .node.lead .sx-mark{background:var(--sx-blue);color:#fff;width:30px;height:30px;border-radius:8px}
.sx-page .sx-eco .node.lead .sx-mark svg{width:16px;height:16px}
/* SelectRate carries its approved brand mark (white double chevron on the
   SelectRate blue square, logo/selectrate-mark-*.svg geometry) wherever the
   product family is shown; the box is the mark, not a tinted holder */
/* (SelectRate now uses its approved icon asset like the other products; see the product-marks block below) */

/* ==========================================================================
   MEGA MENU SIZING (final pass): the panel follows its content.
   Three shared variants, set as a class on the nav <li>:
     .sx-menu-sm   1-5 items    one column, ~340px, anchored under its trigger
     .sx-menu-md   6-10 items   up to three columns, ~700px, under its trigger
     .sx-menu-lg   11+ / grouped  four columns, 960px max, aligned to the
                   header container's content edge
   Desktop only (min-width 992px); the mobile drawer keeps its own rules.
   Spacing is tightened across all three: 20px panel padding, 8px rows,
   14px titles, 12.5px descriptions, 28px column gaps.
   ========================================================================== */
@media (min-width:992px){
  .sx-nav > li.sx-menu-sm,.sx-nav > li.sx-menu-md{position:relative}
  .sx-nav > li.sx-menu-lg{position:static}
  .sx-mega{
    left:auto;right:auto;
    border:1px solid var(--sx-line);border-radius:12px;
    box-shadow:0 1px 2px rgba(16,26,49,.04),0 24px 48px -24px rgba(16,26,49,.35);
    max-width:calc(100vw - 48px);
  }
  .sx-menu-sm .sx-mega{left:0;width:340px;top:calc(100% + 4px)}
  .sx-menu-md .sx-mega{left:0;width:700px;top:calc(100% + 4px)}
  .sx-nav > li:last-child.sx-menu-sm .sx-mega,.sx-nav > li:last-child.sx-menu-md .sx-mega{left:auto;right:0}
  .sx-menu-lg .sx-mega{
    left:max(24px,calc((100% - 1264px) / 2 + var(--sx-gutter)));
    width:min(1000px,calc(100vw - 48px));
    top:100%;
    border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid var(--sx-line);
  }
  /* the hover bridge follows the panel's own width, so a narrow dropdown
     only bridges its own trigger and never covers a neighbour */
  .sx-mega[data-open="true"]::before{left:0;right:0}
  .sx-menu-sm .sx-mega[data-open="true"]::before,.sx-menu-md .sx-mega[data-open="true"]::before{height:calc(var(--sx-nav-bridge,18px) + 4px)}

  .sx-mega .sx-mega-in{
    max-width:none;margin:0;
    padding:18px 16px 16px;
    gap:16px 20px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .sx-menu-sm .sx-mega .sx-mega-in{grid-template-columns:minmax(0,1fr);padding:12px 10px 10px}
  .sx-menu-md .sx-mega .sx-mega-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-mega .sx-col-label{font-size:11px;margin:0 0 6px;padding:0 8px 6px;letter-spacing:.09em}
  .sx-mega .sx-col-label + .sx-col-label,.sx-mega a + .sx-col-label{margin-top:14px}
  .sx-menu-sm .sx-mega .sx-col-label{margin-bottom:4px}
  .sx-mega a{padding:6px 8px;margin-inline:0;border-radius:8px;min-height:34px;display:flex;flex-direction:column;justify-content:center}
  .sx-mega a .t{font-size:14px;line-height:1.3}
  .sx-mega a .d{font-size:12.5px;line-height:1.35;margin-top:1px}
  .sx-mega .sx-mega-foot{margin-top:2px;padding:12px 8px 0;gap:8px 20px;font-size:13.5px}
  .sx-menu-sm .sx-mega .sx-mega-foot{padding-inline:10px}
}
@media (min-width:992px) and (max-width:1199px){
  .sx-menu-lg .sx-mega{left:24px;width:calc(100vw - 48px);max-width:1000px}
  .sx-mega .sx-mega-in{gap:16px 22px;padding:16px 16px 14px}
}
/* the legacy adapter's paragraph and link sizing must not leak into the
   header panels on legacy pages; the menu type is the same on every page */
.sx-header .sx-mega .sx-col-label{font-size:11px !important;line-height:1.3 !important;font-weight:700 !important;color:var(--sx-muted) !important;margin:0 0 6px !important;max-width:none !important;text-align:left !important}
@media (min-width:992px){.sx-header .sx-mega .sx-col-label + .sx-col-label,.sx-header .sx-mega a + .sx-col-label{margin-top:14px !important}}
.sx-header .sx-mega a .t{font-size:14px !important;line-height:1.3 !important;font-weight:600 !important}
.sx-header .sx-mega a .d{font-size:12.5px !important;line-height:1.35 !important;font-weight:400 !important}
.sx-header .sx-mega .sx-mega-foot,.sx-header .sx-mega .sx-mega-foot a{font-size:13.5px !important;line-height:1.4 !important}

/* ==========================================================================
   OFFICIAL PRODUCT MARKS + THE LAST 10% OF COLOUR (final pass)
   Real products (SelectRate, Expert Insured, Premium Accounting, CoverPay)
   show their approved mark on a faint tint taken from their own identity;
   capabilities without an approved logo (SelectConnect, RQB, Insurance BPO)
   keep the line glyph on the Selectsys pale blue. All marks share one box
   size so no brand outweighs another.
   ========================================================================== */
.sx-mark.has-logo,.sx-arch-mark.has-logo{
  background:var(--mark-tint,var(--sx-tint-blue));color:inherit;
  border:1px solid rgba(16,26,49,.06);
  padding:0;overflow:hidden;
}
.sx-mark.has-logo img,.sx-arch-mark.has-logo img{display:block;width:26px;height:26px;object-fit:contain;border-radius:7px}
.sx-page .sx-card.product .sx-mark.has-logo{width:40px;height:40px;border-radius:10px}
.sx-page .sx-card.product .sx-mark.has-logo img{width:28px;height:28px;border-radius:8px}
.sx-page .sx-eco .node .sx-mark.has-logo{width:30px;height:30px;border-radius:8px}
.sx-page .sx-eco .node .sx-mark.has-logo img{width:22px;height:22px;border-radius:6px}
.sx-arch-mark.has-logo{width:34px;height:34px;border-radius:9px}
.sx-arch--compact .sx-arch-mark.has-logo,.sx-arch--contextual .sx-arch-tile .sx-arch-mark.has-logo{width:30px;height:30px;border-radius:8px}
.sx-arch--compact .sx-arch-mark.has-logo img,.sx-arch--contextual .sx-arch-tile .sx-arch-mark.has-logo img{width:22px;height:22px;border-radius:6px}
/* glyph boxes for the capabilities keep the same footprint */
.sx-arch-mark:not(.has-logo){width:34px;height:34px;border-radius:9px;background:var(--sx-tint-blue-2,#E4ECFB)}
.sx-arch--compact .sx-arch-mark:not(.has-logo),.sx-arch--contextual .sx-arch-tile .sx-arch-mark:not(.has-logo){width:30px;height:30px;border-radius:8px}
.sx-page .sx-card.product .sx-mark:not(.has-logo){width:40px;height:40px;border-radius:10px;background:var(--sx-tint-blue-2,#E4ECFB)}
.sx-page .sx-eco .node .sx-mark:not(.has-logo){width:30px;height:30px;background:var(--sx-tint-blue-2,#E4ECFB)}
.sx-page .sx-card.product.lead .sx-mark:not(.has-logo),.sx-page .sx-eco .node.lead .sx-mark:not(.has-logo),.sx-arch-tile.lead .sx-arch-mark:not(.has-logo){background:var(--sx-blue);color:#fff}

/* ---- colour layer: pale blue where it explains hierarchy, nowhere else ---- */
:root{--sx-tint-blue-2:#E4ECFB;--sx-line-blue:#D6E0F5;--sx-tint-cool:#F3F6FB}
/* architecture areas: the Selectsys pale blue, one shade stronger than the
   neutral tint, with blue-tinted hairlines */
.sx-page .sx-section:has(> .sx-wrap > .sx-arch),.sx-page .sx-section.ground-tint:has(.sx-arch),
.sx-master .sxm.ground-tint:has(.sx-arch),.sx-master .sxm-arch-band{background:#EEF3FC !important;border-color:var(--sx-line-blue) !important}
.sx-master .sxm.ground-tint:has(.sx-arch) .sx-arch-tile,.sx-master .sxm-arch-band .sx-arch-tile,.sx-page .sx-section:has(.sx-arch) .sx-arch-tile{border-color:var(--sx-line-blue)}
/* section hairlines carry a little blue */
.sx-page .sx-section.ground-tint,.sx-master .sxm.ground-tint{border-color:var(--sx-line-blue)}
.sx-page .sx-section.ground-white + .sx-section.ground-white,.sx-master .sxm.ground-white + .sxm.ground-white{border-top-color:var(--sx-line-blue)}
/* heroes fall off toward pale blue rather than grey */
.sx-page .sx-hero-overview,.sx-master .sxm-hero{background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FD 100%) !important}
/* On this page: blue top accent and a tinted label row */
.sx-onpage{border-top:3px solid var(--sx-blue);border-color:var(--sx-line-blue);border-top-color:var(--sx-blue)}
.sx-onpage .sx-onpage-label{color:var(--sx-blue)}
/* high-priority cards: lead tiles get the blue hairline, not only the tint */
.sx-page .sx-card.product.lead,.sx-arch-tile.lead,.sx-page .sx-eco .node.lead{border-color:var(--sx-blue-pale)}
/* small icon containers a shade stronger */
.sx-page .sx-card.product .sx-mark{background:var(--sx-tint-blue-2)}
/* the closing CTA panel sits on a cool near-white so it reads as contained */
.sx-master .sxm-cta{background:var(--sx-tint-cool)}
.sx-master .sxm-cta:has(+ .sx-disclosure),.sx-master .sxm-cta + .sx-disclosure{border-top:0}
/* active sticky sub-nav item and eyebrows already use the brand blue; the
   sub-nav strip gets a blue-tinted rule */
.sx-legacy .stickyBar{border-bottom-color:var(--sx-line-blue)}
/* the Expert Insured lockup raster carries transparent padding (the artwork
   is 61% of the file height); size the file so the visible lockup matches the
   other product lockups at ~34px */
.sx-master .sxm-hero .sxm-logo[src*="expert-insured-logo-dark"]{height:56px;margin-top:-8px;margin-bottom:14px}