/* ==========================================================================
   SELECTSYS - PAGE FAMILY LAYOUTS
   --------------------------------------------------------------------------
   Composition that belongs to a family of pages rather than to the site as a
   whole. Shared rules live in sx-legacy.css (look) and sx-layout.css (how
   sections use the canvas); this file is the third layer, and only what a
   family genuinely needs goes in it.

   Families in this file:
     .sx-about-*     Corporate: About
   ========================================================================== */

/* --------------------------------------------------------------------------
   A five-item card row that fills the canvas.
   Three across, then two across on a wider track, instead of four across and
   one stranded on the left. Used by two sections on About, and available to
   any family with an odd count.
   -------------------------------------------------------------------------- */
.sx-legacy .sx-grid-5{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
  margin:0;
}
.sx-legacy .sx-grid-5 > *{
  width:auto;max-width:none;
  padding:0;margin:0;
  grid-column:span 2;
  display:flex;
}
.sx-legacy .sx-grid-5 > *:nth-child(4),
.sx-legacy .sx-grid-5 > *:nth-child(5){ grid-column:span 3; }
.sx-legacy .sx-grid-5 > * > *{ width:100%; }

@media (max-width:1199px){
  .sx-legacy .sx-grid-5{grid-template-columns:repeat(2,1fr)}
  .sx-legacy .sx-grid-5 > *{grid-column:span 1}
  .sx-legacy .sx-grid-5 > *:nth-child(4){grid-column:span 1}
  .sx-legacy .sx-grid-5 > *:nth-child(5){grid-column:span 2}
}
@media (max-width:767px){
  .sx-legacy .sx-grid-5{grid-template-columns:1fr;gap:16px}
  .sx-legacy .sx-grid-5 > *,
  .sx-legacy .sx-grid-5 > *:nth-child(4),
  .sx-legacy .sx-grid-5 > *:nth-child(5){grid-column:span 1}
}

/* ==========================================================================
   CORPORATE FAMILY - ABOUT
   ========================================================================== */

/* ---- Our Story: a split, not a narrow column under a centred heading ----- */
.sx-legacy .sx-about-story .sx-split{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,2fr);
  gap:48px 64px;
  align-items:start;
  margin:0;
}
.sx-legacy .sx-about-story .sx-split > *{width:auto;max-width:none;padding:0;margin:0}
.sx-legacy .sx-about-story h2{
  margin:0;
  text-align:left;
  letter-spacing:.01em;
}
.sx-legacy .sx-about-story h2::after{
  content:"";display:block;width:56px;height:3px;margin-top:18px;
  background:var(--sx-blue);border-radius:2px;
}
/* inside a deliberate split the prose fills its column: it is no longer a
   lone block in a wide canvas, so it must not re-centre itself */
.sx-legacy .sx-about-story .sx-split p{margin-inline:0;max-width:62ch}
@media (max-width:991px){
  .sx-legacy .sx-about-story .sx-split{grid-template-columns:1fr;gap:24px}
  .sx-legacy .sx-about-story h2::after{margin-top:14px}
}

/* ---- Why Our Platform Stands Out: one panel, two columns of points ------- */
.sx-legacy .sx-about-why .row > [class*="col-"]{
  flex:0 0 100%;max-width:100%;
}
.sx-legacy .sx-about-why .common-card{
  padding:40px 44px;
}
@media (min-width:992px){
  .sx-legacy .sx-about-why .list-items{
    columns:2;
    column-gap:56px;
  }
  .sx-legacy .sx-about-why .list-items li{
    break-inside:avoid;
    max-width:none;
  }
}

/* ---- By the Numbers: same five-item rhythm, one alignment --------------- */
.sx-legacy .sx-about-numbers .card{
  text-align:left !important;
  height:100% !important;
}
.sx-legacy .sx-about-numbers .card :is(p, h3){text-align:left !important;margin-inline:0 !important}
.sx-legacy .sx-about-numbers .label-about{
  display:block;
  text-align:left;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--sx-line);
}
.sx-legacy .sx-about-numbers .card h3{margin-top:22px}
.sx-legacy .sx-about-numbers .card > h3:first-of-type{margin-top:0}

/* ---- Testimonials: a quote, sized like one ------------------------------ */
.sx-legacy .sx-about-quotes .about-quote{
  max-width:780px;
  margin-inline:auto;
  padding:40px 48px;
  background:var(--sx-white);
  border:1px solid var(--sx-line);
  border-radius:var(--sx-radius, 10px);
  box-shadow:var(--sx-shadow-sm);
}
.sx-legacy .sx-about-quotes .about-quote p:nth-of-type(2){
  font-size:1.25rem;
  line-height:1.55;
  margin-inline:auto;
  max-width:52ch;
}
.sx-legacy .sx-about-quotes .attribution{margin-top:18px}

/* ---- Team: four across on a wide canvas, so 23 people fill the rows ----- */
@media (min-width:1400px){
  .sx-legacy .sx-about-team .team-card{flex:0 0 25%;max-width:25%}
}

/* ---- Footprint: four equal cards, one alignment ------------------------- */
.sx-legacy .sx-about-footprint .card{
  height:100% !important;
  text-align:left !important;
}
.sx-legacy .sx-about-footprint .card :is(h3,h4,h5,p){
  text-align:left !important;
  margin-inline:0 !important;
}
.sx-legacy .sx-about-footprint .card p{max-width:none}
.sx-legacy .sx-about-footprint .card i{
  display:block;
  font-size:1.4rem;
  color:var(--sx-blue);
  margin-bottom:14px;
}

/* ==========================================================================
   AGENCY SUPPORT / BPO FAMILY - testimonial lists
   A column of five full-width quote cards became a page and a half of
   one-line quotes. Two across on desktop.
   ========================================================================== */
@media (min-width:992px){
  .sx-legacy .testimonials .row > [class*="col-"]{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;
  }
  .sx-legacy .testimonials .testimonial-card{height:100%;margin:0}
}

/* ==========================================================================
   COMPARE FAMILY - the hub page
   Each comparison group was a left-aligned heading, a centred paragraph and
   nine bare text links scattered across three columns. The links become a
   tile grid, and heading, intro and note share one alignment.
   ========================================================================== */
.sx-legacy .sx-compare-hub h2{text-align:center}
.sx-legacy .sx-compare-hub .container > p{max-width:72ch}
.sx-legacy .sx-compare-hub .row.g-3{margin-top:12px;margin-bottom:8px}
.sx-legacy .sx-compare-hub .row.g-3 > [class*="col-"] > a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;
  border:1px solid var(--sx-line);border-radius:var(--sx-radius-sm,8px);
  background:var(--sx-white);
  font-weight:var(--sx-w-semi,600);color:var(--sx-ink);text-decoration:none;
  transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.sx-legacy .sx-compare-hub .row.g-3 > [class*="col-"] > a::after{
  content:"\2192";color:var(--sx-blue);margin-left:12px;
}
.sx-legacy .sx-compare-hub .row.g-3 > [class*="col-"] > a:hover{
  border-color:var(--sx-blue);color:var(--sx-blue);box-shadow:var(--sx-shadow-sm);
}
.sx-legacy .sx-compare-hub.bg-light .row.g-3 > [class*="col-"] > a{background:var(--sx-white)}

/* ==========================================================================
   CORPORATE FAMILY - legal pages (privacy, terms, disclaimer)
   A document: one left-aligned column at a reading measure, centred as a
   block, headings and lists on the same left edge as the paragraphs.
   ========================================================================== */
.sx-legacy .sx-legal .container{max-width:840px}
.sx-legacy .sx-legal .container :is(h2,h3,h4,p,ul,ol,li){
  text-align:left !important;
  margin-inline:0 !important;
  max-width:none !important;
}
.sx-legacy .sx-legal .container :is(h2,h3){margin-top:1.6em;margin-bottom:.5em}
.sx-legacy .sx-legal .container > :is(h2,h3):first-child,
.sx-legacy .sx-legal .container > .row > [class*="col-"] > :is(h2,h3):first-child{margin-top:0}
.sx-legacy .sx-legal .container ul{padding-left:1.25em;list-style:disc}

/* ==========================================================================
   RATING / LOB FAMILY - the line-of-business strip
   .stickyBar was position:fixed at top:69px, sized for the old 69px header.
   Under the 78px dark header plus the announcement bar it sat on top of
   both and its items wrapped into three ragged lines. It becomes a static
   strip directly under the hero: family link on the left, lines of business
   in one wrapping row.
   ========================================================================== */
.sx-legacy .stickyBar{
  position:static !important;top:auto !important;width:auto !important;
  background:var(--sx-tint,#F5F7FB) !important;
  border-top:1px solid var(--sx-line);border-bottom:1px solid var(--sx-line);
  padding:10px 0;z-index:auto;
}
.sx-legacy .sticky-inner{
  display:flex;flex-direction:row !important;align-items:center !important;
  flex-wrap:wrap;gap:8px 28px;
}
.sx-legacy .sticky-left .nav-link{
  font-weight:var(--sx-w-semi,600) !important;color:var(--sx-ink) !important;
  padding:6px 0 !important;font-size:14.5px !important;white-space:nowrap;
}
.sx-legacy .sticky-right{flex:1 1 auto;justify-content:flex-start;width:auto !important;min-width:0}
.sx-legacy .nav-scroll{overflow:visible;width:auto}
.sx-legacy .nav-scroll .nav{display:flex;flex-wrap:wrap;gap:2px 18px;min-width:0;white-space:normal}
.sx-legacy .nav-scroll .nav-item{flex:0 0 auto}
.sx-legacy .stickyBar .nav{display:flex;flex-wrap:wrap;gap:2px 18px;list-style:none;margin:0;padding:0}
.sx-legacy .stickyBar .nav-item{flex:0 0 auto}
.sx-legacy .nav-underline .nav-link{padding:6px 0 !important;font-size:14px !important;color:var(--sx-body) !important}
.sx-legacy .nav-underline .nav-link.active,
.sx-legacy .nav-underline .nav-link:hover{color:var(--sx-blue) !important}
@media (max-width:767px){
  .sx-legacy .sticky-right{flex:1 1 100%}
  .sx-legacy .nav-scroll{overflow:visible;width:100%;max-width:100%}
  .sx-legacy .nav-scroll .nav{flex-wrap:wrap;gap:0 16px}
}

/* ==========================================================================
   COMPOSITION PATTERNS (applied page by page, never site-wide by default)
   Each pattern is opted into by a class on the section or panel after the
   page has been looked at. The one exception is the centred hero H1 cap,
   which was 22ch (about 600px) and forced most product headlines into three
   lines on a 1264px canvas; a product headline is allowed the canvas.
   ========================================================================== */

/* Centred hero headline: the length of the headline decides the line count,
   not a small fixed measure. text-wrap:balance keeps the lines even. */
@media (min-width:992px){
  .sx-legacy section.hero.text-center h1,
  .sx-legacy section.hero h1.text-center{max-width:min(1100px,100%)}
}

/* A. Two short intro paragraphs side by side on the structured canvas. */
@media (min-width:992px){
  .sx-legacy .sx-intro-cols [class*="col-"]{
    display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;
    max-width:1100px !important;margin-inline:auto;
  }
  .sx-legacy .sx-intro-cols [class*="col-"] > p{max-width:none;margin:0 !important;font-size:var(--sx-lead) !important;line-height:1.6 !important}
}
.sx-legacy section.sx-intro-cols{padding-block:var(--sx-section-y-tight) !important}

/* B. A panel holding two "label + list" pairs sets them side by side. */
@media (min-width:768px){
  .sx-legacy .sx-panel-pairs .common-card{
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
    grid-auto-flow:column;gap:0 48px;
  }
  .sx-legacy .sx-panel-pairs .common-card > ul{margin-bottom:0 !important}
}

/* C. A panel of prose followed by a list becomes prose left, list right. */
@media (min-width:992px){
  .sx-legacy .sx-panel-split .common-card:has(> ul:last-child){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px 56px;
  }
  .sx-legacy .sx-panel-split .common-card:has(> ul:last-child) > p{grid-column:1;max-width:none}
  .sx-legacy .sx-panel-split .common-card:has(> ul:last-child) > ul{
    grid-column:2;grid-row:1 / span 12;margin:0 !important;
  }
  .sx-legacy .sx-panel-split .common-card:has(> ul:last-child) > ul > li{max-width:none}
}

/* D. Sibling feature sections of one product, each an H2 + a line + a list
   + a deep link, sit together as a grid of feature blocks rather than as a
   column of near-empty full-height sections. Every heading, line, list item
   and link is unchanged; only the composition is. */
.sx-legacy .sx-features{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:1160px;margin-inline:auto}
.sx-legacy .sx-feature{min-width:0;overflow-wrap:anywhere}
@media (min-width:992px){
  .sx-legacy .sx-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .sx-legacy .sx-features.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.sx-legacy .sx-feature{
  background:var(--sx-white);border:1px solid var(--sx-line);
  border-radius:var(--sx-radius-lg);padding:30px 32px 26px;
  display:flex;flex-direction:column;
}
.sx-legacy .sx-feature h2{
  font-size:var(--sx-h3) !important;line-height:1.3 !important;letter-spacing:-.01em !important;
  text-align:left !important;margin:0 0 6px !important;max-width:none;
}
.sx-legacy .sx-feature > p{text-align:left !important;margin:0 0 16px !important;max-width:none;margin-inline:0 !important}
.sx-legacy .sx-feature .row{margin:0 !important;display:block}
.sx-legacy .sx-feature .row > [class*="col-"]{padding:0 !important;max-width:none !important;flex:none !important;width:auto}
.sx-legacy .sx-feature .common-card{
  border:0 !important;box-shadow:none !important;background:var(--sx-tint) !important;
  padding:18px 20px !important;border-radius:8px !important;
}
.sx-legacy .sx-feature .common-card .list-items,
.sx-legacy .sx-feature .common-card ul.list-unstyled{columns:auto;column-count:1}
.sx-legacy .sx-feature:has(.row) > p:last-child{margin:auto 0 0 !important;padding-top:16px;font-size:15px !important}

/* E. A long run of editorial paragraphs flows into two text columns on the
   structured canvas: each column keeps a 50-55 character measure, and the
   block stops being a narrow strip down the middle of the page. */
@media (min-width:992px){
  .sx-legacy .sx-cols{columns:2;column-gap:56px;max-width:1100px;margin-inline:auto}
  .sx-legacy .sx-cols > p{break-inside:auto;orphans:3;widows:3;max-width:none !important;margin-inline:0 !important;text-align:left !important}
  .sx-legacy .sx-cols > p:last-child{margin-bottom:0 !important}
}
/* F. A callout (heading, one line, one button) composes as a bar: text left,
   action right, instead of three stacked centred fragments. */
@media (min-width:768px){
  .sx-legacy .sx-callout{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:6px 40px;max-width:1100px;margin-inline:auto;text-align:left !important;
  }
  .sx-legacy .sx-callout > :is(h2,h3,h4){grid-column:1;margin:0 !important}
  .sx-legacy .sx-callout > p{grid-column:1;margin:0 !important;max-width:72ch;margin-inline:0 !important;text-align:left !important}
  .sx-legacy .sx-callout > .btn,
  .sx-legacy .sx-callout > a{grid-column:2;grid-row:1 / span 3;align-self:center;white-space:nowrap}
}

/* Logo walls are grids of images, not reading matter: the plain-list measure
   never applies to them. */
.sx-legacy .integrations-container ul,
.sx-legacy .partners ul, .sx-legacy .carriers ul{max-width:none !important;margin-inline:0 !important;justify-content:center !important}

/* RQB "Modern Quoting for Every Line of Business": thirteen one-word lines of
   business ran as one tall column beside the product image; two columns. */
@media (min-width:768px){
  .sx-legacy .support-services ul.services{display:grid !important;grid-template-columns:1fr 1fr;gap:2px 24px}
}

/* A six-step flow row (SelectRate "No Premium Without a Trace") wrapped its
   sixth step onto a line of its own; six steps fit the canvas at 150px each. */
@media (min-width:992px){
  .sx-legacy .flow-row:has(> .flow-card ~ .flow-card ~ .flow-card ~ .flow-card ~ .flow-card ~ .flow-card) > .flow-card{flex:1 1 150px;min-width:0}
}
/* Carrier logo sections: the label above the logos and the logos themselves
   share the section's centred alignment. */
.sx-legacy section.carriers .integrations-container > p{text-align:center}

/* A split hero whose headline column is wider than half the canvas: the
   column is the measure, not the 20ch cap (which put a seven-word product
   headline on five lines). */
@media (min-width:992px){
  .sx-legacy section.hero.sx-hero-wide h1{max-width:none}
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-process{justify-content:flex-end}
}
@media (min-width:992px){
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-process{flex-wrap:nowrap;gap:4px}
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-step{min-width:0;flex:1 1 0}
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-step .icon-block{padding:14px 6px}
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-step .h5{font-size:13.5px}
  .sx-legacy section.hero.sx-hero-wide .right-section .workflow-arrow i{font-size:14px}
}
.sx-legacy section.hero.sx-hero-wide [class*="col-"] > p{margin-inline:0 !important}
/* A closing line that the markup nests inside the panel's row reads like the
   card's other copy: left, on the card's measure. */
.sx-legacy .sx-feature .row > p{text-align:left !important;max-width:none !important;margin:14px 0 0 !important;font-size:15px !important}
/* Label + value list items ("<strong>Label</strong>: value") inside the flex
   list rows: the label keeps its width instead of wrapping as a flex item. */
/* Arrow-list rows hold inline runs (a link, a label, then text). As flex rows
   each fragment became its own item and links wrapped mid-word ("MG / As").
   The row is a normal block; the icon sits inline before the text. */
.sx-legacy .list-items li{display:block !important}
.sx-legacy .list-items li > i{display:inline-block;margin-right:6px;vertical-align:-1px}
/* A row of six short vendor cards runs three across at desktop. */
@media (min-width:992px){
  .sx-legacy .row.sx-three-up > [class*="col-"]{flex:0 0 33.333% !important;max-width:33.333% !important}
}
/* In a two-column feature grid an odd last card takes the full row rather
   than sitting alone on the left. */
@media (min-width:992px){
  .sx-legacy .sx-features:not(.cols-3) > .sx-feature:last-child:nth-child(odd){grid-column:1 / -1}
  .sx-legacy .sx-features:not(.cols-3) > .sx-feature:last-child:nth-child(odd) .common-card .list-items,
  .sx-legacy .sx-features:not(.cols-3) > .sx-feature:last-child:nth-child(odd) .common-card ul.list-unstyled{columns:21rem;column-count:auto}
  .sx-legacy .sx-features .sx-feature > ul{padding-left:1.25em;margin-bottom:12px}
  .sx-legacy .sx-features .sx-feature > ul li{max-width:none}
}
/* A plain bullet list of four or more short items in a full-width panel
   flows into columns like the arrow lists do. */
@media (min-width:992px){
  .sx-legacy .row > [class*="col-"] > .common-card > ul:not(.list-unstyled):not(.list-items):has(> li:nth-child(4)){columns:21rem;column-gap:48px}
  .sx-legacy .row > [class*="col-"] > .common-card > ul:not(.list-unstyled):not(.list-items):has(> li:nth-child(4)) > li{break-inside:avoid}
}
/* G. Two hand-grouped blocks side by side (prose beside a list, two lists). */
@media (min-width:992px){
  .sx-legacy .sx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;max-width:1100px;margin-inline:auto;text-align:left}
  .sx-legacy .sx-two > div > :is(p,ul,ol){max-width:none !important;margin-inline:0 !important;text-align:left !important}
  .sx-legacy .sx-two > div > ul{padding-left:1.25em}
}
/* An odd last testimonial spans the row rather than sitting alone. */
@media (min-width:768px){
  .sx-legacy .testimonials .row > [class*="col-"] > :last-child:nth-child(odd){grid-column:1 / -1}
}
/* A feature card that holds a plain list of roles runs it in two columns. */
@media (min-width:992px){
  .sx-legacy .sx-feature > ul:has(> li:nth-child(5)){columns:2;column-gap:32px}
  .sx-legacy .sx-feature .row.g-4{display:flex !important;flex-wrap:wrap;margin:0 -8px !important}
  .sx-legacy .sx-feature .row.g-4 > [class*="col-"]{flex:0 0 50% !important;max-width:50% !important;padding:0 8px !important}
}
/* Inside a feature card any column wrapper is just a wrapper. */
.sx-legacy .sx-feature > [class*="col-"]{padding:0 !important;margin:0 !important;max-width:none !important;width:auto !important;flex:none !important}
.sx-legacy .sx-feature > [class*="col-"] > ul.list-items{margin:0 !important}
@media (min-width:992px){
  .sx-legacy .sx-feature .row.g-4 > [class*="col-"]:has(> .h-card){flex:0 0 100% !important;max-width:100% !important}
  .sx-legacy .sx-feature .h-card .rounded-circle{width:44px !important;height:44px !important}
  .sx-legacy .sx-feature .h-card{padding:14px 16px !important}
}
/* Footer link groups fill from the left; an odd last group is not centred. */
body.sx-page footer .row{justify-content:flex-start !important}
/* Logo tiles keep a uniform width so the wall reads as a grid. */
.sx-legacy .integrations-container ul li{max-width:150px !important;min-width:150px}
@media (max-width:767px){.sx-legacy .integrations-container ul li{max-width:100px !important;min-width:100px}}

/* ==========================================================================
   SHARED ARCHITECTURE SUMMARY (templates/sx-architecture.php)
   One component, three variants, one story. Not scoped to .sx-legacy so it
   renders the same on every page type.
   ========================================================================== */
.sx-arch{max-width:1200px;margin-inline:auto;text-align:left}
.sx-arch-label{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--sx-muted,#5B6478);margin:0 0 12px !important;text-align:left !important;max-width:none !important}
.sx-arch-tile{
  display:flex;flex-direction:column;gap:3px;text-decoration:none !important;color:inherit;
  background:var(--sx-white,#fff);border:1px solid var(--sx-line,#E3E7EF);border-radius:10px;padding:18px 20px;
  transition:border-color .15s ease;min-width:0;
}
.sx-arch-tile:hover{border-color:var(--sx-blue-soft,#7A93C9)}
.sx-arch-name{font-weight:700;color:var(--sx-ink,#0B1B3A);font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
.sx-arch-cat{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--sx-blue,#1F3F8F)}
.sx-arch-desc{font-size:14px;line-height:1.5;color:var(--sx-body,#3C465A);margin-top:6px;max-width:none}
.sx-arch-within{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted,#5B6478);font-weight:600}
.sx-arch-tile.lead{background:var(--sx-tint-blue,#EDF2FD);border-color:var(--sx-blue-pale,#C9D6F2)}
.sx-arch-tile.nested{border-style:dashed}
.sx-arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sx-arch-band{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:12px 18px;border:1px dashed var(--sx-line,#E3E7EF);border-radius:10px;background:var(--sx-tint-blue,#EDF2FD);
}
.sx-arch-band-lab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--sx-blue,#1F3F8F);white-space:nowrap}
.sx-arch-band-txt{font-size:14px;color:var(--sx-body,#3C465A);line-height:1.5}
/* full: SelectConnect wide with RQB set inside its field, then five peers */
.sx-arch--full .sx-arch-lead{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-bottom:14px;
  padding:14px;border:1px solid var(--sx-blue-pale,#C9D6F2);border-radius:12px;background:var(--sx-tint-blue,#EDF2FD);
}
.sx-arch--full .sx-arch-lead .sx-arch-tile.lead{border:0;background:transparent;padding:6px 6px 6px 8px}
.sx-arch--full .sx-arch-lead .sx-arch-tile.nested{background:var(--sx-white,#fff)}
.sx-arch--full .sx-arch-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
/* compact: seven tiles across, name + category only */
.sx-arch--compact .sx-arch-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.sx-arch--compact .sx-arch-tile{padding:14px 14px}
.sx-arch--compact .sx-arch-name{font-size:14.5px}
.sx-arch--compact .sx-arch-cat{font-size:10.5px}
.sx-arch--compact .sx-arch-tile.nested::before{content:"Within SelectConnect";font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--sx-muted,#5B6478);font-weight:600}
/* contextual: whatever the page names, two across in an aside */
.sx-arch--contextual .sx-arch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-arch--contextual .sx-arch-tile.lead{grid-column:1 / -1}
.sx-arch--contextual .sx-arch-grid:has(> :nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1199px){
  .sx-arch--compact .sx-arch-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sx-arch--full .sx-arch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .sx-arch--full .sx-arch-lead{grid-template-columns:1fr}
  .sx-arch--full .sx-arch-grid,.sx-arch--compact .sx-arch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-arch--contextual .sx-arch-grid{grid-template-columns:1fr}
}
/* architecture tiles never inherit link underlines from legacy section styles */
.custom-blog-section .sx-arch-tile,.recommended .sx-arch-tile,.blog-section .sx-arch-tile,.solution-section .sx-arch-tile,.sx-arch-tile,.sx-arch-tile *{text-decoration:none !important}
.custom-blog-section .sx-arch-tile:hover,.recommended .sx-arch-tile:hover,.sx-arch-tile:hover,.sx-arch-tile:hover *{text-decoration:none !important}
.sx-arch--contextual .sx-arch-grid:has(> :nth-child(6)){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1199px){.sx-arch--contextual .sx-arch-grid:has(> :nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.sx-arch--contextual .sx-arch-grid:has(> :nth-child(6)){grid-template-columns:1fr}}

/* product marks inside the architecture tiles (same glyphs as the homepage
   product cards): a 30px tinted square, solid blue on the SelectConnect lead */
.sx-arch-mark{width:30px;height:30px;border-radius:8px;background:var(--sx-tint-blue,#EDF2FD);color:var(--sx-blue,#214497);display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex:none}
.sx-arch-mark svg{width:16px;height:16px}
.sx-arch-tile.lead .sx-arch-mark{background:var(--sx-blue,#214497);color:#fff}
.sx-arch--full .sx-arch-lead .sx-arch-tile.lead .sx-arch-mark{width:38px;height:38px;border-radius:10px;margin-bottom:12px}
.sx-arch--full .sx-arch-lead .sx-arch-tile.lead .sx-arch-mark svg{width:19px;height:19px}
.sx-arch--compact .sx-arch-mark{width:26px;height:26px;border-radius:7px;margin-bottom:6px}
.sx-arch--compact .sx-arch-mark svg{width:14px;height:14px}
.sx-arch--compact .sx-arch-tile.nested::before{order:-1}
.sx-arch--contextual .sx-arch-tile .sx-arch-mark{width:26px;height:26px;border-radius:7px;margin-bottom:6px}
.sx-arch--contextual .sx-arch-tile .sx-arch-mark svg{width:14px;height:14px}