/* ==========================================================================
   Selectsys legacy adapter
   --------------------------------------------------------------------------
   The homepage and Platform Overview were rewritten into the design system's
   own markup (.sx-section / .sx-wrap / .sx-card). Doing that to every core
   page would mean re-typing thousands of lines of indexed copy, and every
   re-typing is a chance to lose a heading, a link or a claim.

   This file takes the opposite approach: it maps the markup the site already
   has onto the approved design language, so a page is modernised by adding one
   flag rather than by being rewritten. Content, headings, links and schema are
   untouched by definition.

   SCOPE: every rule is prefixed .sx-legacy, a body class set only when a page
   sets $data['sx_legacy']. Pages without the flag are byte-for-byte unaffected,
   which is what makes the eventual long-tail rollout safe: it becomes one flag
   per file, reversible, with no markup edit.

   !important: css/style.css and css/innerpages.css carry !important on almost
   every declaration they make (padding, background, font-size, colour). Every
   !important below exists solely to cancel one of those. No new !important is
   introduced for its own sake.

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

/* ==========================================================================
   1. PAGE GROUND
   ========================================================================== */
body.sx-legacy{background:var(--sx-white)}

/* ==========================================================================
   2. CONTAINER
   The site's .container is Bootstrap's, so it steps 540/720/960/1140/1320 and
   ends up wider than the new pages at large viewports. One width everywhere.
   ========================================================================== */
.sx-legacy .container,
.sx-legacy .container-fluid{
  max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2)) !important;
  padding-inline:var(--sx-gutter) !important;
  margin-inline:auto !important;
  width:100%;
}
@media (max-width:767px){
  .sx-legacy .container,
  .sx-legacy .container-fluid{padding-inline:var(--sx-gutter-mob) !important}
}

/* ==========================================================================
   3. SECTION RHYTHM
   The audit found eight different section paddings. One value, one tight
   variant, and a mobile step down.
   ========================================================================== */
.sx-legacy section,
.sx-legacy .sec-padding,
.sx-legacy .sec-padding-40{
  padding-block:var(--sx-section-y) !important;
  position:relative;
}
.sx-legacy section.pt-30{padding-top:var(--sx-section-y-tight) !important}
.sx-legacy section.pb-30{padding-bottom:var(--sx-section-y-tight) !important}
.sx-legacy section.seperator,
.sx-legacy section.thp{padding-block:var(--sx-section-y-tight) !important}
@media (max-width:767px){
  .sx-legacy section,
  .sx-legacy .sec-padding,
  .sx-legacy .sec-padding-40{padding-block:var(--sx-section-y-mobile) !important}
}
/* the footer manages its own rhythm (templates/footer.php, .sx-footer in sx-components.css) */
.sx-legacy footer,
.sx-legacy footer.sec-padding{padding-block:0 !important}
.sx-legacy .sx-ann,
.sx-legacy header,
.sx-legacy header section{padding-block:0 !important}

/* ==========================================================================
   4. GROUNDS
   Three, as on the new pages: white, tint, blue. Everything the legacy CSS
   used (#f5f7fa, #ecf5ff, .bg-light, .bg-white) collapses into those.
   ========================================================================== */
.sx-legacy section.bg-white,
.sx-legacy section.bg-transparent{background:var(--sx-white) !important}

.sx-legacy section.bg-custom-light,
.sx-legacy section.light-bg,
.sx-legacy section.bg-light,
.sx-legacy section.bg-custom-light2{
  background:var(--sx-tint) !important;
  border-block:1px solid var(--sx-line);
}
/* two tinted sections in a row would draw a hairline between them */
.sx-legacy section.bg-custom-light + section.bg-custom-light,
.sx-legacy section.light-bg + section.light-bg,
.sx-legacy section.bg-custom-light + section.light-bg,
.sx-legacy section.light-bg + section.bg-custom-light{border-top:0}

.sx-legacy section.bg-primary,
.sx-legacy section.cta-section.bg-primary{
  background:var(--sx-blue) !important;
  color:#D6E0F5 !important;
}
.sx-legacy section.bg-primary :is(h1,h2,h3,h4){color:#fff !important}
.sx-legacy section.bg-primary :is(p,li,span,em,i){color:#D6E0F5 !important}
.sx-legacy section.bg-primary strong{color:#fff !important}
.sx-legacy section.bg-primary a:not(.btn){color:var(--sx-blue-on-dark) !important}

/* ==========================================================================
   5. HERO
   The legacy hero is a #21409a block with 120px of padding and white text.
   The approved direction is a white-dominant canvas, so the hero becomes page
   surface: same copy, same H1, on white.
   ========================================================================== */
.sx-legacy section.hero,
.sx-legacy section.inner-page-hero,
.sx-legacy .hero.inner-page-hero{
  background:var(--sx-white) !important;
  background-image:none !important;
  color:var(--sx-body) !important;
  padding-top:var(--sx-hero-top) !important;
  padding-bottom:var(--sx-hero-bottom) !important;
  border-bottom:0;
}
.sx-legacy section.hero h1,
.sx-legacy section.hero h2{
  color:var(--sx-ink) !important;
  font-size:var(--sx-h1) !important;
  line-height:var(--sx-lh-h1) !important;
  letter-spacing:var(--sx-track-h1) !important;
  font-weight:var(--sx-w-bold) !important;
  margin:0 !important;
  text-wrap:balance;
  max-width:20ch;
}
.sx-legacy section.hero.text-center h1,
.sx-legacy section.hero h1.text-center{margin-inline:auto !important;max-width:22ch}
.sx-legacy section.hero p,
.sx-legacy section.hero h1 + p,
.sx-legacy section.hero p.text-white{
  color:var(--sx-body) !important;
  font-size:var(--sx-lead) !important;
  line-height:1.6 !important;
  max-width:var(--sx-measure-lead);
  margin-top:var(--sx-5) !important;
}
.sx-legacy section.hero.text-center p,
.sx-legacy section.hero p.text-center{margin-inline:auto !important}
.sx-legacy section.hero .btn,
.sx-legacy section.hero .d-flex{margin-top:var(--sx-3)}
/* a two-column hero centred its H1 against a much taller copy column, leaving
   the headline floating in the middle of the section. Top alignment reads as
   one composition. */
.sx-legacy section.hero .align-items-center{align-items:flex-start !important}
.sx-legacy section.hero .hero-devider,
.sx-legacy section.hero .border-right{
  border-color:var(--sx-line) !important;border-right-width:1px !important;
}
/* bare list items in a hero are feature tags in the markup's intent, but with
   their white colour removed they read as stray sentences. */
.sx-legacy section.hero ul.list-unstyled{
  display:flex;flex-wrap:wrap;gap:var(--sx-2);margin:var(--sx-4) 0 0 !important;padding:0;
}
.sx-legacy section.hero ul.list-unstyled li{
  font-size:13.5px !important;font-weight:var(--sx-w-semi) !important;
  color:var(--sx-blue) !important;background:var(--sx-tint-blue);
  border:1px solid #DCE6FA;border-radius:var(--sx-radius-pill);
  padding:6px 13px !important;margin:0 !important;max-width:none;
}
.sx-legacy section.hero .text-white,
.sx-legacy section.hero .text-light{color:inherit !important}
.sx-legacy section.hero a.text-white{color:var(--sx-blue) !important}
.sx-legacy section.hero .subheadline{
  font-size:var(--sx-lead) !important;color:var(--sx-body) !important;
}
/* a link inside an H1 picked up the legacy link size and colour, so the
   Expert Insured H1 read as one large word followed by small blue text. */
.sx-legacy section.hero h1 a,
.sx-legacy section.hero h1 a.text-white,
.sx-legacy section.hero h1 a.text-light,
.sx-legacy h2 a,.sx-legacy h3 a{
  font-size:inherit !important;font-weight:inherit !important;
  color:inherit !important;text-decoration:none !important;
}
.sx-legacy section.hero h1 a:hover,
.sx-legacy section.hero h1 a.text-white:hover,
.sx-legacy h2 a:hover,.sx-legacy h3 a:hover{color:var(--sx-blue) !important}
/* product lockups in a hero: one height, centred with the copy */
.sx-legacy section.hero > .container > .mb-4 > img,
.sx-legacy section.hero > .container > .mb-3 > img,
.sx-legacy section.hero .mb-4 > img[alt*="Logo"],
.sx-legacy section.hero .mb-3 > img[alt*="Logo"]{
  height:38px !important;width:auto !important;max-width:220px;
  display:block;margin:0 auto var(--sx-2);
}
.sx-legacy section.hero.text-center > .container > .mb-4,
.sx-legacy section.hero > .container > .mb-4{text-align:center}

/* the contact page uses its own #21409a block rather than .hero. Same
   treatment: the copy stays exactly as written, on the white canvas. */
.sx-legacy section.contact-section{
  background:var(--sx-white) !important;
  background-image:none !important;
  color:var(--sx-body) !important;
}
.sx-legacy section.contact-section :is(h1,h2,h3,h4){color:var(--sx-ink) !important}
.sx-legacy section.contact-section :is(p,li,address,span,div){color:var(--sx-body) !important}
.sx-legacy section.contact-section .text-white{color:var(--sx-blue) !important}
.sx-legacy section.contact-section .border-muted,
.sx-legacy section.contact-section .border-top{border-color:var(--sx-line) !important}
.sx-legacy section.contact-section .contact-form{
  background:var(--sx-white) !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius-lg) !important;
  box-shadow:none !important;
  padding:var(--sx-6) !important;
  color:var(--sx-body) !important;
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
.sx-legacy :is(h1,h2,h3,h4,h5,h6){
  color:var(--sx-ink) !important;
  font-family:var(--sx-font);
  text-wrap:balance;
}
.sx-legacy h2{
  font-size:var(--sx-h2) !important;
  line-height:var(--sx-lh-h2) !important;
  letter-spacing:var(--sx-track-h2) !important;
  font-weight:var(--sx-w-bold) !important;
  margin:0 0 var(--sx-4) !important;
  max-width:26ch;
}
.sx-legacy .text-center h2,
.sx-legacy .sx-center h2,
.sx-legacy h2.text-center{margin-inline:auto !important;max-width:38ch}
.sx-legacy h3{
  font-size:var(--sx-h3) !important;
  line-height:var(--sx-lh-h3) !important;
  letter-spacing:var(--sx-track-h3) !important;
  font-weight:var(--sx-w-semi) !important;
  margin:0 0 var(--sx-3) !important;
}
.sx-legacy h4,.sx-legacy h5{
  font-size:var(--sx-h4) !important;
  line-height:1.35 !important;
  font-weight:var(--sx-w-semi) !important;
  margin:0 0 var(--sx-2) !important;
  background:none !important;padding:0 !important;
}
.sx-legacy p,
.sx-legacy li{
  font-size:var(--sx-body-size) !important;
  line-height:var(--sx-lh-body) !important;
  color:var(--sx-body) !important;
}
/* Bootstrap's .fs-* utilities are how the existing markup says "this heading
   is deliberately smaller". The heading rules above would otherwise flatten a
   .fs-5 subhead to full H2 size, which is how /contact ended up with a second
   heading nearly as large as its H1. */
.sx-legacy .fs-1{font-size:var(--sx-h1) !important}
.sx-legacy .fs-2{font-size:var(--sx-h2) !important}
.sx-legacy .fs-3{font-size:23px !important}
.sx-legacy .fs-4{font-size:var(--sx-h3) !important}
.sx-legacy .fs-5{font-size:var(--sx-h4) !important}
.sx-legacy .fs-6{font-size:15px !important}
.sx-legacy h2.fs-5,.sx-legacy h2.fs-6,.sx-legacy h3.fs-5,.sx-legacy h3.fs-6{
  letter-spacing:-.01em !important;margin-bottom:var(--sx-3) !important;
}

/* the contact columns were vertically centred against the form, which left a
   large void above the H1. Top alignment reads as one composition. */
.sx-legacy .contact-section .justify-content-center{justify-content:flex-start !important}

.sx-legacy .mb-35{margin-bottom:var(--sx-6) !important}
.sx-legacy .sub-heading{font-size:var(--sx-lead) !important;color:var(--sx-body) !important}
.sx-legacy strong,.sx-legacy b{color:var(--sx-ink) !important;font-weight:var(--sx-w-semi) !important}
.sx-legacy a{color:var(--sx-blue);text-underline-offset:3px}
.sx-legacy a:hover{color:var(--sx-blue-hover)}

/* the reading measure, which is the single change that most affects how these
   pages read. Excluded: anything inside a card, table, figure or grid cell
   that is already narrow, and centred intros, which centre their measure. */
.sx-legacy section p,
.sx-legacy section li,
.sx-legacy section address{max-width:var(--sx-measure)}
/* anything that genuinely needs its own width opts back out */
.sx-legacy .card p, .sx-legacy .card li,
.sx-legacy .pillar-card p, .sx-legacy .pillar-card li,
.sx-legacy .faq-card p, .sx-legacy .faq-card li,
.sx-legacy .integration-card p, .sx-legacy .integration-card li,
.sx-legacy .h-card p, .sx-legacy .h-card li,
.sx-legacy .flow-card p, .sx-legacy .flow-card li,
.sx-legacy .workflow-step p, .sx-legacy .workflow-step li,
.sx-legacy table p, .sx-legacy table li,
.sx-legacy figure p,
.sx-legacy .contact-form p, .sx-legacy .contact-form li,
.sx-legacy .workflow-supporting-layer p{max-width:none}
/* .common-card is used two ways: as a narrow tile in a 3-up row, and as a
   single full-row block. In the second case its text runs to ~104 characters
   per line without a cap of its own. */
.sx-legacy .common-card p,
.sx-legacy .common-card li{max-width:72ch}

/* the same applies to a Bootstrap .card that spans a full row rather than
   sitting in a 3-up grid: the glossary's entry cards run to 152 characters
   per line without a cap. Narrow tiles are unaffected because their track is
   already narrower than the cap. */
.sx-legacy .card p,
.sx-legacy .card li,
.sx-legacy .card-body p,
.sx-legacy .card-body li{max-width:72ch}
/* centred copy centres its measure rather than hugging the left edge */
.sx-legacy .text-center > p,
.sx-legacy .text-center > ul > li,
.sx-legacy p.text-center,
.sx-legacy section > .container > .text-center p{
  max-width:var(--sx-measure-lead);margin-inline:auto;
}

/* ==========================================================================
   7. CARDS
   Six legacy card classes, one object: white, one hairline, 10px radius, no
   shadow, content-driven height.
   ========================================================================== */
.sx-legacy .card,
.sx-legacy .common-card,
.sx-legacy .pillar-card,
.sx-legacy .faq-card,
.sx-legacy .integration-card,
.sx-legacy .h-card,
.sx-legacy .flow-card,
.sx-legacy .workflow-step{
  background:var(--sx-white) !important;
  background-image:none !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius-lg) !important;
  box-shadow:none !important;
  padding:var(--sx-5) !important;
  transition:border-color .15s ease !important;
  height:auto !important;min-height:0 !important;
  color:var(--sx-body) !important;
}
.sx-legacy .card:hover,
.sx-legacy .common-card:hover,
.sx-legacy .pillar-card:hover,
.sx-legacy .faq-card:hover,
.sx-legacy .integration-card:hover,
.sx-legacy .h-card:hover{
  border-color:var(--sx-blue-soft) !important;
  box-shadow:none !important;
  transform:none !important;
}
/* on the tinted ground a card still reads as white */
.sx-legacy .bg-custom-light .card,
.sx-legacy .light-bg .card,
.sx-legacy .bg-light .card{background:var(--sx-white) !important}
.sx-legacy .card p:last-child,
.sx-legacy .common-card p:last-child{margin-bottom:0 !important}
.sx-legacy .card h3,
.sx-legacy .common-card h3,
.sx-legacy .pillar-card h3{font-size:var(--sx-h3) !important}
/* the icon glyphs the legacy cards open with */
.sx-legacy .card > i,
.sx-legacy .card i.d-block,
.sx-legacy .card [class^="bi-"],
.sx-legacy .card [class*=" bi-"]{
  color:var(--sx-blue) !important;
  font-size:22px !important;
  margin-bottom:var(--sx-3) !important;
  background:none !important;
}
/* product logos inside cards, normalised to one height */
.sx-legacy .pillar-card img,
.sx-legacy .flow-card img,
.sx-legacy .card > .mb-3 > img{height:32px !important;width:auto !important;max-width:150px}

/* ==========================================================================
   8. LISTS
   ========================================================================== */
.sx-legacy .list-unstyled li,
.sx-legacy .list-items li{
  position:relative;
  line-height:var(--sx-lh-tight) !important;
  margin-bottom:var(--sx-2) !important;
}
.sx-legacy .list-unstyled li:last-child{margin-bottom:0 !important}
/* the legacy arrow bullets become the system's dot */
.sx-legacy .list-unstyled li > i.bi-arrow-right-short,
.sx-legacy .list-unstyled li > i.bi-arrow-right,
.sx-legacy .list-items li > i{
  color:var(--sx-blue-soft) !important;
  font-size:16px !important;
}
.sx-legacy ul:not(.list-unstyled):not(.sx-nav):not(.sx-list) li{margin-bottom:var(--sx-2) !important}

/* ==========================================================================
   9. BUTTONS
   Three types, as approved: solid, outline, text. The legacy classes map on.
   ========================================================================== */
.sx-legacy .btn{
  font-family:var(--sx-font) !important;
  font-size:15px !important;
  font-weight:var(--sx-w-semi) !important;
  line-height:1.2 !important;
  padding:13px 22px !important;
  border-radius:var(--sx-radius-sm) !important;
  border:1px solid transparent !important;
  text-decoration:none !important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease !important;
  box-shadow:none !important;
}
.sx-legacy .btn-primary,
.sx-legacy .btn-light{
  background:var(--sx-blue) !important;
  border-color:var(--sx-blue) !important;
  color:#fff !important;
}
.sx-legacy .btn-primary:hover,
.sx-legacy .btn-light:hover{
  background:var(--sx-blue-hover) !important;
  border-color:var(--sx-blue-hover) !important;
  color:#fff !important;
}
.sx-legacy .btn-outline-primary,
.sx-legacy .btn-outline-light,
.sx-legacy .btn-secondary{
  background:var(--sx-white) !important;
  border-color:var(--sx-line) !important;
  color:var(--sx-ink) !important;
}
.sx-legacy .btn-outline-primary:hover,
.sx-legacy .btn-outline-light:hover,
.sx-legacy .btn-secondary:hover{
  background:var(--sx-tint) !important;
  border-color:var(--sx-blue-pale) !important;
  color:var(--sx-blue) !important;
}
/* on the blue band the pair inverts */
.sx-legacy .bg-primary .btn-primary,
.sx-legacy .bg-primary .btn-light{
  background:#fff !important;border-color:#fff !important;color:var(--sx-blue) !important;
}
.sx-legacy .bg-primary .btn-outline-light,
.sx-legacy .bg-primary .btn-outline-primary{
  background:transparent !important;border-color:rgba(255,255,255,.5) !important;color:#fff !important;
}
.sx-legacy .btn.me-3{margin-right:var(--sx-3) !important}

/* ==========================================================================
   10. FAQ
   .faq-card is a plain block, not a disclosure widget, so it keeps its markup
   and simply becomes a readable card with a clear question.
   ========================================================================== */
.sx-legacy .faq-card{padding:var(--sx-5) !important}
.sx-legacy .faq-card h3,
.sx-legacy .faq-card h4,
.sx-legacy .faq-card .fw-bold{
  font-size:17px !important;font-weight:var(--sx-w-semi) !important;
  color:var(--sx-ink) !important;margin-bottom:var(--sx-3) !important;
}
.sx-legacy .faq-card p{margin-bottom:0 !important;max-width:none}

/* ==========================================================================
   11. TABLES
   ========================================================================== */
.sx-legacy table{
  width:100%;border-collapse:collapse !important;
  font-size:15px !important;background:var(--sx-white) !important;
}
.sx-legacy table th{
  text-align:left !important;
  font-size:12px !important;font-weight:var(--sx-w-semi) !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:var(--sx-muted) !important;background:var(--sx-tint) !important;
  padding:14px 18px !important;border:0 !important;
  border-bottom:1px solid var(--sx-line) !important;
}
.sx-legacy table td{
  padding:14px 18px !important;color:var(--sx-body) !important;
  border:0 !important;border-bottom:1px solid var(--sx-line-soft) !important;
  vertical-align:top !important;
}
.sx-legacy table tr:last-child td{border-bottom:0 !important}
/* the compare tables mark one column with a dark navy fill. The generic td
   colour above lands dark-on-dark there, so the highlighted column gets its
   own treatment. Found by flagging a /compare/ page in the long-tail preview. */
.sx-legacy table td.highlight-column,
.sx-legacy table th.highlight-column{
  background:var(--sx-blue-deep) !important;
  color:#DCE6FA !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
}
.sx-legacy table th.highlight-column{color:#A8C0F0 !important}
.sx-legacy table td.highlight-column :is(strong,b,a){color:#fff !important}
.sx-legacy .table-responsive{
  border:1px solid var(--sx-line);border-radius:var(--sx-radius-lg);overflow-x:auto;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.sx-legacy .form-label{
  font-size:14px !important;font-weight:var(--sx-w-semi) !important;
  color:var(--sx-ink) !important;margin-bottom:6px !important;
}
.sx-legacy .form-control,
.sx-legacy .form-select,
.sx-legacy textarea,
.sx-legacy input[type="text"],
.sx-legacy input[type="email"],
.sx-legacy input[type="tel"]{
  font-family:var(--sx-font) !important;
  font-size:15.5px !important;
  color:var(--sx-ink) !important;
  background:var(--sx-white) !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius-sm) !important;
  padding:12px 14px !important;
  box-shadow:none !important;
  min-height:46px;
}
.sx-legacy .form-control::placeholder,
.sx-legacy textarea::placeholder{color:var(--sx-muted) !important;opacity:1}
.sx-legacy .form-control:focus,
.sx-legacy .form-select:focus,
.sx-legacy textarea:focus{
  border-color:var(--sx-blue) !important;
  box-shadow:0 0 0 3px rgba(33,68,151,.12) !important;
  outline:none !important;
}
.sx-legacy .form-control.is-invalid{border-color:var(--sx-err) !important}
.sx-legacy .invalid-feedback,
.sx-legacy .text-danger{color:var(--sx-err) !important;font-size:13.5px !important}
.sx-legacy form .btn{width:auto}

/* ==========================================================================
   13. GRID SPACING
   Bootstrap's .g-4 gutter is 1.5rem; the system's card gap is 20px. Close
   enough to leave alone, but rows need bottom rhythm where cards wrap.
   ========================================================================== */
.sx-legacy .row > [class*="col-"]{margin-bottom:0}
.sx-legacy .row.g-4,
.sx-legacy .row.g-3{--bs-gutter-y:var(--sx-5);--bs-gutter-x:var(--sx-5)}
.sx-legacy .d-flex.gap-3{gap:var(--sx-3) !important}

/* ==========================================================================
   14. RESIDUE
   Gradients, heavy shadows and decorative rules the audit flagged.
   ========================================================================== */
.sx-legacy [class*="gradient"],
.sx-legacy .bg-gradient{background-image:none !important}
.sx-legacy .shadow,
.sx-legacy .shadow-sm,
.sx-legacy .shadow-lg{box-shadow:var(--sx-shadow) !important}
.sx-legacy hr{border-color:var(--sx-line) !important;opacity:1 !important}
.sx-legacy img{max-width:100%;height:auto}

/* ==========================================================================
   15. LEGACY FLOW DIAGRAMS
   Several pages draw a left-to-right product chain. The chain itself is page
   content and is not removed here; it is only restyled to the system. Where a
   chain asserts a product sequence that the approved architecture retired, the
   page's own markup is corrected instead, not this file.
   ========================================================================== */
.sx-legacy .flow-row{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:var(--sx-3);
}
.sx-legacy .flow-card{flex:1 1 190px;max-width:260px;text-align:center}
.sx-legacy .flow-arrow-right,
.sx-legacy .workflow-arrow{
  display:flex;align-items:center;color:var(--sx-blue-soft) !important;
  font-size:18px !important;
}
.sx-legacy .flow-arrow-down-mobile{display:none}
@media (max-width:767px){
  .sx-legacy .flow-row{flex-direction:column}
  .sx-legacy .flow-card{max-width:none}
  .sx-legacy .flow-arrow-right{display:none}
  .sx-legacy .flow-arrow-down-mobile{
    display:flex;justify-content:center;color:var(--sx-blue-soft) !important;font-size:18px !important;
  }
}
.sx-legacy .workflow-supporting-layer{
  border:1px dashed var(--sx-line) !important;
  background:var(--sx-tint-blue) !important;
  border-radius:var(--sx-radius-lg) !important;
  padding:var(--sx-4) var(--sx-5) !important;
  margin-top:var(--sx-5) !important;
  color:var(--sx-body) !important;
}

/* ==========================================================================
   16. PARTNERS STRIP
   Shared template; already normalised globally in sx-components.css.
   ========================================================================== */
.sx-legacy section.parteners{padding-block:var(--sx-section-y-tight) !important}

/* slim blue promotional strips on legacy pages (one or two sentences and a
   link, no heading: "Not sure where to start? Read our guide..."). The generic
   section padding made them 180 to 240px tall; they are strips, not sections.
   Compact and left-aligned like the rest of the system. Structured blue
   sections (CTA bands with headings and buttons) are not affected. */
.sx-legacy section.bg-primary.pt-30,
.sx-legacy section.bg-primary.pb-30{padding-block:26px !important}
.sx-legacy section.bg-primary.pt-30 .container,
.sx-legacy section.bg-primary.pb-30 .container,
.sx-legacy section.bg-primary.pt-30 p,
.sx-legacy section.bg-primary.pb-30 p{text-align:left !important}
.sx-legacy section.bg-primary.pt-30 p,
.sx-legacy section.bg-primary.pb-30 p{margin:0 !important;max-width:none;font-size:15.5px !important;line-height:1.55 !important}