/* ==========================================================================
   Selectsys platform pages design layer
   --------------------------------------------------------------------------
   Loaded only by views that set $data['sx_plat'], which adds the body class
   .sxp. Four routes use it: /platform, /platform/selectconnect, /platform/rqb
   and /platform/value-flywheel. Every selector below is scoped to .sxp, so no
   other route on the site can be affected by this file.

   It builds on sx-tokens / sx-base / sx-components. It adds nothing the design
   system already has; it adds the compositions these four pages need.
   ========================================================================== */

/* ------------------------------------------------------------- box sizing
   The legacy stylesheets do not set border-box globally, so .sx-wrap computes
   as width:100% PLUS its gutter and pushes the document 40px wider than the
   viewport on small screens. The homepage layer solves this the same way. */
.sxp,.sxp *,.sxp *::before,.sxp *::after{box-sizing:border-box}

/* ------------------------------------------------------------------ rhythm
   style.css sets section{padding:80px 0 !important} site-wide, which defeats
   .sx-page .sx-section{padding-block:96px}. These four pages take that back
   for themselves and run a tighter vertical rhythm. */
.sxp .sx-section{padding-block:72px !important}
.sxp .sx-section.tight{padding-block:52px !important}
.sxp .sx-section.sxp-hero{padding:52px 0 40px !important}
.sxp .sx-section.sxp-flush{padding-top:0 !important}
.sxp .sx-section.sxp-tail{padding-bottom:0 !important}

/* --------------------------------------------------------------------- hero */
.sxp .sxp-hero-in{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:52px;align-items:center;
}
.sxp .sxp-hero h1{margin:14px 0 0}
.sxp .sxp-hero .sx-lead{margin-top:20px}
.sxp .sxp-hero .sx-btn-row{margin-top:28px}

/* on-page navigation, as a chip row instead of a card that eats the hero */
.sxp .sxp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.sxp .sxp-chips a{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;
  border:1px solid var(--sx-line);border-radius:100px;background:#fff;
  font-size:13px;font-weight:600;color:var(--sx-body);white-space:nowrap;
}
.sxp .sxp-chips a:hover{border-color:var(--sx-blue);color:var(--sx-blue);text-decoration:none}

/* ---------------------------------------------------------------- figures */
.sxp .sxp-fig{margin:0;background:#fff;border:1px solid var(--sx-line);border-radius:14px;padding:20px 22px}
.sxp .sxp-fig.plain{background:none;border:0;padding:0}
.sxp .sxp-fig svg{display:block;width:100%;height:auto}
.sxp .sxp-fig figcaption{margin-top:14px;font-size:13px;line-height:1.55;color:var(--sx-muted)}
.sxp .sxp-fig img{display:block;width:100%;height:auto;border-radius:8px}


/* ---------------------------------------------------------- product index */
.sxp .sxp-prod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sxp .sxp-prod .it{
  display:block;position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sx-line);border-radius:12px;padding:22px 22px 18px;
}
.sxp .sxp-prod .it::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ac,var(--sx-blue))}
.sxp .sxp-prod a.it:hover{border-color:var(--sx-blue);text-decoration:none;box-shadow:var(--sx-shadow)}
.sxp .sxp-prod .it.lead{grid-column:span 2;background:linear-gradient(180deg,#F7FAFF,#fff)}
.sxp .sxp-prod .kin{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--sx-blue))}
.sxp .sxp-prod h3{margin:9px 0 2px}
.sxp .sxp-prod .cat{display:block;font-size:12.5px;color:var(--sx-muted);margin-bottom:10px}
.sxp .sxp-prod .go{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--sx-blue)}

/* ---------------------------------------------------------- numbered steps */
.sxp .sxp-steps{display:grid;gap:10px;counter-reset:s;margin:0;padding:0}
.sxp .sxp-steps li{
  list-style:none;display:grid;grid-template-columns:32px minmax(0,1fr);
  grid-template-areas:"n t" "n d";column-gap:12px;
  border:1px solid var(--sx-line);border-radius:10px;padding:14px 16px;background:#fff;
}
.sxp .sxp-steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sx-blue-soft);padding-top:3px;
  grid-area:n;
}
.sxp .sxp-steps b{grid-area:t;display:block;font-size:15px;color:var(--sx-ink)}
.sxp .sxp-steps span{grid-area:d;display:block;font-size:13.5px;line-height:1.55;color:var(--sx-muted);margin-top:3px}

/* ----------------------------------------------------------- labelled rows */
.sxp .sxp-rows{border:1px solid var(--sx-line);border-radius:12px;overflow:hidden;background:#fff}
.sxp .sxp-rows .r{
  display:grid;grid-template-columns:minmax(0,252px) minmax(0,1fr);gap:22px;
  padding:16px 22px;border-top:1px solid var(--sx-line-soft);
}
.sxp .sxp-rows .r:first-child{border-top:0}
.sxp .sxp-rows .r b{font-size:14.5px;color:var(--sx-ink)}
.sxp .sxp-rows .r em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sx-muted);margin-top:3px}
.sxp .sxp-rows .r p{margin:0;font-size:14.5px;line-height:1.6;color:var(--sx-body)}

/* ------------------------------------------------------------ feature tiles */
.sxp .sxp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sxp .sxp-tiles .t{border:1px solid var(--sx-line);border-radius:12px;background:#fff;padding:20px 22px}
.sxp .sxp-tiles h3{font-size:16.5px;margin:0 0 10px}
.sxp .sxp-tiles ul{margin:0;padding-left:18px}
.sxp .sxp-tiles li{font-size:14px;line-height:1.55;margin-bottom:6px;color:var(--sx-body)}
.sxp .sxp-tiles li:last-child{margin-bottom:0}

/* --------------------------------------------------------------- use cases */
.sxp .sxp-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sxp .sxp-cases a{
  display:block;border:1px solid var(--sx-line);border-radius:12px;background:#fff;
  padding:18px 20px;font-size:14.5px;line-height:1.55;color:var(--sx-ink);
}
.sxp .sxp-cases a:hover{border-color:var(--sx-blue);text-decoration:none;box-shadow:var(--sx-shadow)}
.sxp .sxp-cases a::after{content:"\2192";display:block;margin-top:12px;color:var(--sx-blue)}

/* -------------------------------------------------------------- outcomes */
.sxp .sxp-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0}
.sxp .sxp-outs li{
  list-style:none;display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--sx-line);border-radius:10px;background:#fff;padding:16px 18px;
  font-size:14.5px;line-height:1.5;font-weight:600;color:var(--sx-ink);
}
.sxp .sxp-outs li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sx-blue);margin-top:6px}

/* ------------------------------------------------------------------- tags */
.sxp .sxp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.sxp .sxp-tags li{
  list-style:none;border:1px solid var(--sx-line);background:#fff;border-radius:100px;
  padding:7px 15px;font-size:13.5px;color:var(--sx-body);
}

/* --------------------------------------------------------- reading + panel */
.sxp .sxp-read{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:44px;align-items:start}
.sxp .sxp-panel{border:1px solid var(--sx-line);border-radius:12px;background:var(--sx-tint);padding:22px 24px}
.sxp .sxp-panel h3{font-size:16px;margin:0 0 10px}
.sxp .sxp-panel p{font-size:14px;line-height:1.6}
.sxp .sxp-panel ul{margin:0;padding-left:18px}
.sxp .sxp-panel li{font-size:14px;line-height:1.6;margin-bottom:6px}
.sxp .sxp-panel li:last-child{margin-bottom:0}
.sxp .sxp-panel :last-child{margin-bottom:0}

/* ------------------------------------------------------------- callout note */
.sxp .sxp-note{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--sx-line);border-left:3px solid var(--sx-blue);border-radius:10px;
  background:var(--sx-tint-blue);padding:18px 22px;
}
.sxp .sxp-note p{margin:0;font-size:14.5px;line-height:1.6}

/* ----------------------------------------------------------- hierarchy line */
.sxp .sxp-hier{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:14.5px;color:var(--sx-muted);margin:0}
.sxp .sxp-hier b{color:var(--sx-ink);font-weight:600}
.sxp .sxp-hier i{font-style:normal;color:var(--sx-blue-soft)}

/* ------------------------------------------------------------ measure reset
   .sx-page .sx-section p/li caps body copy at 68ch, which is right for prose
   and wrong inside a grid cell. Only the components above are exempted. */
.sxp .sx-section :is(.sxp-prod,.sxp-steps,.sxp-rows,.sxp-tiles,.sxp-cases,.sxp-outs,.sxp-tags,.sxp-panel,.sxp-note,.sxp-fig,.sxp-hier) :is(p,li){max-width:none}
.sxp .sx-section :is(.sxp-prod,.sxp-tiles,.sxp-panel,.sxp-note) p{max-width:none}

/* --------------------------------------------------------------- responsive */
@media (max-width:1023px){
  .sxp .sx-section{padding-block:56px !important}
  .sxp .sx-section.tight{padding-block:44px !important}
  .sxp .sx-section.sxp-hero{padding:36px 0 30px !important}
  .sxp .sxp-prod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxp .sxp-prod .it.lead{grid-column:span 2}
  .sxp .sxp-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxp .sxp-read{grid-template-columns:1fr;gap:28px}
}
@media (max-width:899px){
  .sxp .sxp-tiles{grid-template-columns:1fr}
  .sxp .sxp-outs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sxp .sx-section{padding-block:44px !important}
  .sxp .sxp-prod,.sxp .sxp-cases{grid-template-columns:1fr}
  .sxp .sxp-prod .it.lead{grid-column:auto}
  .sxp .sxp-rows .r{grid-template-columns:1fr;gap:6px}
  .sxp .sxp-fig{padding:16px}
  .sxp .sxp-chips{gap:6px}
  .sxp .sxp-chips a{height:30px;padding:0 12px;font-size:12.5px}
}

/* ------------------------------------------------------- diagram / list swap
   Last in the file on purpose: these two rules decide whether the desktop
   diagram or its ordered-list equivalent is shown, and they have to win over
   the display value each component sets for itself. Below 900 the same
   information is carried by the list, so nothing is lost and nothing is
   squeezed into unreadable type. */
.sxp .sxp-alt{display:none}
@media (max-width:899px){
  .sxp .sxp-wide{display:none}
  .sxp .sxp-alt{display:grid}
  .sxp ol.sxp-alt{display:grid}
  .sxp div.sxp-alt{display:block}
}
@media (max-width:1023px){
  .sxp .sxp-aside{display:none}
  .sxp .sxp-hero-in{grid-template-columns:1fr;gap:0}
}

/* ------------------------------------------------------------ header clip
   The closed mega panel is visibility:hidden but still laid out, and between
   roughly 1024px and 1100px it extends the document about 230px past the
   viewport. That is a shared-header defect on every route, not something these
   pages introduce. Clipping the header horizontally removes the phantom scroll
   on these four pages without changing a single painted pixel: the panel opens
   downward, and overflow-y stays visible. */
.sxp .sx-header{overflow-x:clip;overflow-y:visible}