/* x101 overrides on top of the Robok theme.
   Keep this file thin — theme CSS stays untouched so it can be re-copied on updates. */

/* ---- Reveal animation for .fade-up-anim (driven by theme-init.js) ---- */
.fade-up-anim {
  opacity: 0;
  transform: translate3d(0, 45px, 0);
  transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1);
}
.fade-up-anim.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up-anim { opacity: 1; transform: none; transition: none; }
}

/* ---- Brand ---- */
.navbar .navbar-brand .logo { height: 34px; width: auto; }
.footer-bottom-one .logo img { height: 30px; width: auto; }
.side .widget .logo img { height: 34px; width: auto; }

/* Connector names in place of the theme's brand logos */
.brand-item-text {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  opacity: .55;
  text-align: center;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.brand-item-text:hover { opacity: 1; }

/* ---- Process section: keep the heading clear of the side illustration ----
   (the theme's shape is height:100%, which grows very wide on a tall section) */
.process-style-one-area .shape { max-width: 32%; opacity: .75; }
.process-style-one-area .shape img { width: auto; object-fit: contain; }
.process-style-one-area .container { position: relative; z-index: 2; }

/* ---- Hero stat row under the banner copy ---- */
.banner-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 60px;
  margin-top: 50px;
}
.banner-hero-stats .item { min-width: 150px; }
.banner-hero-stats .item h3 {
  font-size: 34px;
  margin-bottom: 6px;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.banner-hero-stats .item span {
  font-size: 14px;
  color: var(--white-secondary);
}

/* ---- Capability list used in the "governed" band ---- */
.x-check-list { margin: 0; padding: 0; list-style: none; }
.x-check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 16px;
  color: var(--white-secondary);
}
.x-check-list li strong { color: var(--white); display: block; font-weight: 600; }
.x-check-list li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--color-primary);
}

/* ---- Section number badge (Platform page: 01 … 07) ---- */
.x-section-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--color-primary);
  border: 1px solid rgba(116, 118, 255, .4);
  border-radius: 30px;
  padding: 6px 18px;
  margin-bottom: 20px;
}

/* ---- Anchor nav under the breadcrumb ---- */
.x-anchor-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.x-anchor-nav a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--white-secondary);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  padding: 9px 20px;
  transition: all .3s ease;
}
.x-anchor-nav a:hover {
  color: var(--white);
  border-color: var(--color-primary);
  background: rgba(116, 118, 255, .12);
}

/* ---- Layer / step cards ---- */
.x-layer-card {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 40px 30px;
  height: 100%;
  background: rgba(255, 255, 255, .02);
}
.x-layer-card .num {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  display: block;
  margin-bottom: 14px;
}
.x-layer-card h4 { margin-bottom: 8px; }
.x-layer-card .sub {
  font-size: 14px;
  color: var(--white-secondary);
  margin-bottom: 22px;
}
.x-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-tags li {
  font-size: 13px;
  color: var(--white-common);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 5px 14px;
}
.x-layer-card ul.plain { list-style: none; margin: 18px 0 0; padding: 0; }
.x-layer-card ul.plain li {
  color: var(--white-secondary);
  font-size: 15px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.x-layer-card ul.plain li strong { color: var(--white); font-weight: 600; }

/* ---- Case study cards ---- */
.x-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 14px;
}
.x-badge-live {
  color: var(--white);
  background: var(--bg-gradient);
}
.x-badge-example {
  color: var(--white-secondary);
  border: 1px solid rgba(255, 255, 255, .22);
}
.x-cs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.x-cs-meta .sector { font-size: 14px; color: var(--white-secondary); }

.x-cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 50px;
  margin: 26px 0 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.x-cs-stats .n {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.x-cs-stats .l { font-size: 14px; color: var(--white-secondary); margin-top: 4px; }

.x-cs-card {
  display: block;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 40px 30px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease, transform .3s ease;
}
.x-cs-card:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.x-cs-card h3 { font-size: 24px; margin-bottom: 14px; color: var(--white); }
.x-cs-card p { color: var(--white-secondary); }
.x-cs-card .more {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  color: var(--white);
}
.x-cs-card:hover .more { color: var(--color-primary); }

/* ---- Spec tables (deployment characteristics, integration surfaces) ---- */
.x-table-wrap { overflow-x: auto; }
.x-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.x-table th,
.x-table td {
  text-align: left;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  vertical-align: top;
  color: var(--white-secondary);
}
.x-table thead th {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  border-bottom-color: rgba(255, 255, 255, .22);
}
.x-table tbody th {
  color: var(--white);
  font-weight: 600;
  width: 240px;
}
.x-table tbody tr:last-child th,
.x-table tbody tr:last-child td { border-bottom: none; }

/* ---- Lead form on the dark closing band ---- */
.x-lead-form .form-group { margin-bottom: 18px; }
.x-lead-form .form-control {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--white);
  border-radius: 10px;
  padding: 16px 20px;
  height: auto;
  width: 100%;
}
.x-lead-form .form-control::placeholder { color: rgba(255, 255, 255, .35); }
.x-lead-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
}
.x-lead-form select.form-control option { color: #1f1f1f; }
.x-lead-form .hp { position: absolute; left: -9999px; }

/* ---- Case study lead cards: keep swapped-in theme art at a consistent crop ---- */
.blog-style-one .thumb { border-radius: 12px; overflow: hidden; }
.blog-style-one .thumb img { width: 100%; height: 260px; object-fit: cover; }

/* ---- Case studies hero: theme's product screenshot swapped for abstract art ---- */
.banner-bottom-info .thumb img { width: 100%; height: 420px; object-fit: cover; border-radius: 10px; }
.choose-us-two-thumb img { width: 100%; height: 420px; object-fit: cover; border-radius: 10px; }

/* ---- Breadcrumb sitting above the case studies hero headline ----
   (theme separators live under .breadcrumb-area, so restate them here) */
.x-hero-breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 22px;
  justify-content: flex-start;
}
.x-hero-breadcrumb li,
.breadcrumb-area .x-hero-breadcrumb-center li {
  position: relative;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  padding-right: 18px;
  margin-right: 12px;
}
.x-hero-breadcrumb li a,
.breadcrumb-area .x-hero-breadcrumb-center li a { color: var(--white); opacity: .8; }
.x-hero-breadcrumb li a:hover { opacity: 1; }
.x-hero-breadcrumb li i { margin-right: 6px; }
.x-hero-breadcrumb li::after,
.breadcrumb-area .x-hero-breadcrumb-center li::after {
  content: "/";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--white);
  opacity: .5;
}
.x-hero-breadcrumb li:last-child,
.breadcrumb-area .x-hero-breadcrumb-center li:last-child { padding-right: 0; margin-right: 0; opacity: .7; }
.x-hero-breadcrumb li:last-child::after,
.breadcrumb-area .x-hero-breadcrumb-center li:last-child::after { display: none; }

/* ---- about-style-three sections carrying transparent 3D illustrations ----
   (the theme plates screenshots on white; our art has no frame) */
.x-thumb-illus { padding-bottom: 0; }
.x-thumb-illus img,
.bg-dark .x-thumb-illus img {
  background: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}
.x-thumb-left { padding-left: 0; padding-right: 15%; margin-left: 0; margin-right: 60px; }
@media (max-width: 991px) {
  .x-thumb-illus,
  .x-thumb-left { margin: 40px 0 0; padding: 0; }
}
.about-style-three-area .list-style-two { margin-top: 10px; }

/* ---- Built to Connect: theme brand cards, trimmed to name-only chips ---- */
.x-conn-items { gap: 16px; }
.x-conn-items .brand-style-two-item {
  width: auto;
  flex: 0 0 auto;
}
.x-conn-items .brand-style-two-item a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 14px 24px;
  background: none;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  white-space: nowrap;
  transition: background .3s ease;
}
/* Brand marks in the chips. Height-constrained rather than boxed, so the
   square marks (Slack, Jira) and the wordmarks (SAP, Salesforce) both sit on
   the same optical baseline. Chips with no logo asset keep the text inset the
   theme gives them, so the row still lines up. */
.x-conn-items .brand-style-two-item a img {
  height: 22px;
  width: auto;
  max-width: 74px;
  flex: 0 0 auto;
  object-fit: contain;
}
.x-conn-items .brand-style-two-item:hover { border-color: rgba(255, 255, 255, .25); }
.x-conn-items .brand-style-two-item a:hover { background: rgba(255, 255, 255, .08); }
.x-conn-items .x-conn-more { background: var(--bg-gradient); border-color: transparent; }
.x-conn-items .x-conn-more a i { margin-left: 6px; font-size: 13px; }

/* ---- Platform hero (BannerV5 shape) ---- */
.x-hero-breadcrumb-center { justify-content: center; margin-bottom: 26px; }

.x-hero-bar {
  max-width: 800px;
  margin: 40px auto auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 10px 10px 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(15px);
  text-align: left;
}
.x-hero-bar-text { color: var(--white); font-size: 17px; }
.x-hero-bar .btn-style-one {
  flex-shrink: 0;
  padding: 19px 35px;
  border-radius: 15px;
  font-size: 16px;
  text-transform: capitalize;
}
@media (max-width: 767px) {
  .x-hero-bar { flex-direction: column; align-items: stretch; padding: 20px; text-align: center; }
}

/* Marquee of the seven sections, in place of the demo's image gallery */
.x-hero-marquee { padding: 0 20px; }
.x-hero-tile {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(15px);
  padding: 30px 28px;
  text-align: left;
  min-height: 170px;
}
.x-hero-tile .n {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--color-secondary);
  display: block;
  margin-bottom: 12px;
}
.x-hero-tile h4 { font-size: 20px; margin-bottom: 8px; color: var(--white); }
.x-hero-tile p { font-size: 14px; color: var(--white-secondary); margin: 0; }
.banner-style-five-items .search-tags h5 { white-space: nowrap; }
.banner-style-five-items .search-tags { flex-wrap: wrap; justify-content: center; row-gap: 10px; }

/* ---- Platform: compact 2×2 feature cards ---- */
.x-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.x-feature-grid .feature-style-one { padding: 26px 24px; }
.x-feature-grid .feature-style-one .icon img { height: 32px; margin-bottom: 24px; }
.x-feature-grid .feature-style-one h4 { font-size: 18px; line-height: 1.35; margin-bottom: 8px; }
.x-feature-grid .feature-style-one p { font-size: 14px; line-height: 1.6; }
/* the decorative shape sat over the copy on hover — keep it behind and quiet */
.x-feature-grid .feature-style-one > img { max-width: 26%; opacity: 0; z-index: -1; }
.x-feature-grid .feature-style-one.active > img { max-width: 30%; opacity: .3; }
@media (max-width: 575px) {
  .x-feature-grid { grid-template-columns: 1fr; }
}

/* ---- Platform: sticky section nav under the hero ---- */
.x-jump-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  padding: 12px 0;
  background: rgba(17, 19, 21, .85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.x-jump-nav .x-anchor-nav { justify-content: center; gap: 10px; }
.x-jump-nav .x-anchor-nav a { padding: 7px 16px; font-size: 13px; }

/* ---- Platform CTA actions ---- */
.x-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* ---- Page ground: the theme paints .bg-dark on the wrapper only, so a short
        page (or overscroll) showed the browser's white body underneath ---- */
html, body { background: var(--dark-optional); }

/* ---- Footer: even columns, no dead space under the last row ---- */
footer.footer-style-one .f-items { padding-bottom: 40px; }
footer.footer-style-one .footer-style-one-items { justify-content: space-between; gap: 26px; }
/* five link columns need to wrap rather than crush on mid-size screens */
@media (max-width: 1399px) {
  footer.footer-style-one .footer-style-one-items { flex-wrap: wrap; gap: 26px 30px; }
  footer.footer-style-one .footer-style-one-items .f-item { flex: 0 1 auto; min-width: 120px; }
}
footer.footer-style-one .f-item.contact { padding-right: 40px; }
footer.footer-style-one .footer-bottom { padding: 22px 0; }
footer.footer-style-one .footer-bottom p { margin: 0; }

/* ---- footer fix ---- */
.footer-style-one{
  margin-top: 48px !important;
  margin-left: 0px !important;
  margin-bottom: 0px !important;
  margin-right: 0px !important;
}



/* ---- Keep the theme's blurred glows inside their own section (they bled
        across the boundary and painted a blue band above the CTA) ---- */
.blurry-shape-half-right-bottom,
.blurry-shape-left-bottom,
.blurry-shape-right-bottom,
.blurry-shape-top-full { overflow: hidden; }

/* ---- CTA band: flat dark, no inherited glow bleeding in from above ---- */
.x-no-glow { position: relative; z-index: 1; }
.x-no-glow::after, .x-no-glow::before { display: none !important; }
.x-cta-band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--dark-optional);
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 48px;
  /* the theme's blurred glow from the section above bleeds past its own box;
     paint over that strip rather than editing theme CSS */
}
.x-cta-band::after, .x-cta-band::before { display: none !important; }

/* ---- Platform section columns: top-aligned, with room between them ---- */
.feature-style-one-area .row > [class^="col-xl-5"] { padding-right: 50px; }
@media (max-width: 1199px) {
  .feature-style-one-area .row > [class^="col-xl-5"] { padding-right: 15px; }
}
.feature-style-one-area .x-platform-illus { padding-top: 0; }

/* the hero used to hang a carousel below it; without that the gap is dead space */
.banner-style-five-area { margin-bottom: 0; padding-bottom: 60px; }
/* the theme spreads this column top-to-bottom for its stat block; we want the
   cards to follow straight after the copy */
.feature-style-one-area .feature-style-one-left-info { justify-content: flex-start; height: auto; }

/* ---- Header: centred menu, compact CTA, no info-panel trigger ---- */
@media (min-width: 992px) {
  .navbar.validnavs .container-full > .collapse.navbar-collapse {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
}
.attr-nav > ul > li.button .btn-style-one {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  text-transform: none;
}
.attr-nav > ul > li.button .btn-style-one i { font-size: 12px; margin-left: 6px; }

/* ---- Platform card icons (SVG set) ---- */
.x-feature-grid .feature-style-one .icon img { height: 42px; width: auto; margin-bottom: 20px; }
.x-feature-grid .feature-style-one.active .icon img { filter: none; }

/* ---- Platform sections: keep the card grid clear of the section edge ---- */
.feature-style-one-area.default-padding { padding-bottom: 120px; }
.feature-style-one-area .x-feature-grid { margin-bottom: 0; }

/* ═══════════ Case-study detail pages ═══════════ */
.x-cs-hero .banner-six-top-info h2 { font-size: 52px; line-height: 1.14; }
.x-cs-hero .banner-six-top-info p { font-size: 17px; }
.x-meta-tags { margin-top: 24px; }
.x-meta-tags li { font-size: 13px; }

.x-kpi {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 18px;
  margin-top: 30px;
}
.x-kpi-n {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.x-kpi-n .u { font-size: 22px; }
.x-kpi-l { font-size: 13px; color: var(--white-secondary); margin-top: 8px; line-height: 1.5; }

.x-split-card { height: 100%; }
.x-split-card h4 { font-size: 22px; }
.x-split-card .list-style-two li { margin-bottom: 12px; }

.x-gov-bar { border-color: rgba(116, 118, 255, .35); background: rgba(116, 118, 255, .08); }
.x-gov-bar p { margin: 0; color: var(--white-common); }

.x-out-card { text-align: left; }
.x-out-n {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14px;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.x-note, .x-draft-note {
  font-size: 14px;
  color: var(--white-secondary);
  border-left: 2px solid var(--color-primary);
  padding-left: 16px;
  margin: 0;
}
.x-draft-note { margin: 40px auto; max-width: 1170px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.x-cap-card h3 { font-size: 20px; }
.x-pullquote {
  border-left: 3px solid var(--color-primary);
  padding: 6px 0 6px 30px;
  margin: 0;
}
.x-pullquote p {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 16px;
}
.x-pullquote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.x-cs-hero .banner-six-top-info h2,
.x-cs-hero .banner-six-top-info .sub-title { text-align: left; }

/* Process step badge: the theme sets it sideways for one-word labels;
   case-study steps read "Step 01", so keep them horizontal */
.x-cs-step span {
  writing-mode: horizontal-tb;
  width: auto;
  height: auto;
  line-height: 1.2;
  padding: 10px 18px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.x-note a, .x-draft-note a, .x-pullquote a { color: var(--color-secondary); text-decoration: underline; }
.x-note a:hover, .x-draft-note a:hover { color: var(--white); }

/* ---- Before / after table: the "after" column reads as the win ---- */
.x-table th.x-after,
.x-table td.x-after {
  background: rgba(69, 208, 189, .07);
  border-left: 1px solid rgba(69, 208, 189, .25);
  border-right: 1px solid rgba(69, 208, 189, .25);
  color: #7fe3d4;
}
.x-table thead th.x-after {
  color: #45d0bd;
  background: rgba(69, 208, 189, .12);
}
.x-table tbody tr:last-child td.x-after { border-bottom: 1px solid rgba(69, 208, 189, .25); }
/* the second line inside an after cell is a sub-note, not a run-on sentence */
.x-table td .mini {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--white-secondary);
}
.x-cap-card .more { margin-top: 18px; }

/* ═══════════ FAQ page ═══════════ */
.x-faq-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}
.x-faq-search {
  position: relative;
  flex: 1 1 300px;
  min-width: 260px;
}
.x-faq-search i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-secondary);
  font-size: 14px;
}
.x-faq-input {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 16px 20px 16px 48px;
  color: var(--white);
  font-size: 15px;
}
.x-faq-input::placeholder { color: rgba(255, 255, 255, .4); }
.x-faq-input:focus { outline: none; border-color: var(--color-primary); }

.x-faq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.x-faq-chip {
  background: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--white-secondary);
  transition: all .3s ease;
}
.x-faq-chip .n {
  margin-left: 8px;
  font-size: 11px;
  color: var(--color-secondary);
}
.x-faq-chip:hover { color: var(--white); border-color: var(--color-primary); }
.x-faq-chip[aria-pressed="true"] {
  background: var(--bg-gradient);
  border-color: transparent;
  color: var(--white);
}
.x-faq-chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .8); }
.x-faq-count { font-size: 13px; color: var(--white-secondary); margin: 0; width: 100%; }

.x-faq-empty { display: none; color: var(--white-secondary); margin-bottom: 30px; }
.x-faq-empty.on { display: block; }
.x-faq-empty b { display: block; color: var(--white); margin-bottom: 4px; }

.x-faq-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  margin: 40px 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.x-faq-group-title .n {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
  border: 1px solid rgba(116, 118, 255, .4);
  border-radius: 20px;
  padding: 2px 10px;
}
.x-faq-pop {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border: 1px solid rgba(137, 199, 254, .4);
  border-radius: 20px;
  padding: 3px 10px;
}
[data-item][hidden], [data-group][hidden] { display: none !important; }

/* ═══════════ Glossary: sticky filter rail beside the terms ═══════════ */
.x-gl-filters {
  position: sticky;
  top: 110px;
  padding-right: 20px;
}
.x-gl-filters .x-faq-search { min-width: 0; margin-bottom: 20px; }
.x-gl-chips { margin-bottom: 24px; }
.x-gl-chips .x-faq-chip { padding: 7px 14px; font-size: 12.5px; }

.x-gl-az {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 18px;
}
.x-gl-az a, .x-gl-az span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.x-gl-az a { color: var(--white); background: rgba(255, 255, 255, .06); }
.x-gl-az a:hover { background: var(--bg-gradient); }
.x-gl-az span { color: rgba(255, 255, 255, .22); }

.x-gl-group { margin-bottom: 40px; scroll-margin-top: 120px; }
.x-gl-letter {
  font-size: 18px;
  color: var(--color-secondary);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.x-gl-list { margin: 0; }
.x-gl-term {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  padding: 22px 26px;
  margin-bottom: 14px;
  scroll-margin-top: 120px;
}
.x-gl-term dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.x-gl-term dd { margin: 0; color: var(--white-secondary); font-size: 15px; line-height: 1.7; }
.x-gl-cat {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border: 1px solid rgba(116, 118, 255, .35);
  border-radius: 20px;
  padding: 3px 10px;
}
@media (max-width: 991px) {
  .x-gl-filters { position: static; padding-right: 0; margin-bottom: 40px; }
}

/* ═══════════ Connectors catalogue ═══════════ */
.x-kpi-row { margin-top: 40px; }
.breadcrumb-area .x-kpi { border-top-color: rgba(255, 255, 255, .25); }

.x-cn-chips { max-height: 420px; overflow-y: auto; padding-right: 6px; }
.x-cn-chips::-webkit-scrollbar { width: 4px; }
.x-cn-chips::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }

.cn-group { display: block; margin-bottom: 50px; scroll-margin-top: 120px; }
/* the category heading rides along until its own group scrolls past */
.cn-group-head {
  position: sticky;
  top: 71px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 18px;
  background: var(--dark);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cn-group-title { font-size: 20px; margin: 0; color: var(--white); }
.cn-group-count {
  font-size: 12px;
  color: var(--color-secondary);
  border: 1px solid rgba(116, 118, 255, .4);
  border-radius: 20px;
  padding: 2px 10px;
}
.cn-group-ops { font-size: 12px; color: var(--white-secondary); margin-left: auto; }

.cn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cn {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  padding: 22px 26px;
  scroll-margin-top: 140px;
}
.cn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cn-name { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--white); }
.cn-cat {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border: 1px solid rgba(116, 118, 255, .35);
  border-radius: 20px;
  padding: 3px 10px;
}
.cn-desc { color: var(--white-secondary); font-size: 14.5px; line-height: 1.7; margin: 10px 0 0; }

.cn-ops-toggle { margin-top: 14px; }
.cn-ops-toggle summary {
  cursor: pointer;
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 6px 16px;
  list-style: none;
}
.cn-ops-toggle summary::-webkit-details-marker { display: none; }
.cn-ops-toggle summary:hover { border-color: var(--color-primary); }
.cn-ops-toggle[open] summary { background: rgba(116, 118, 255, .16); border-color: rgba(116, 118, 255, .4); }
.cn-op-list { margin-top: 16px; }
.cn-op-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.cn-op-row b {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  min-width: 52px;
}
.cn-op-row i {
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--white-secondary);
  background: rgba(255, 255, 255, .05);
  border-radius: 6px;
  padding: 3px 9px;
}
.cn-op-row--w b { color: #45d0bd; }
.cn-op-row--w i { background: rgba(69, 208, 189, .1); color: #7fe3d4; }

/* Breadcrumb sitting above the page-hero headline on the resource pages */
.breadcrumb-area .x-hero-breadcrumb-center {
  justify-content: center;
  margin: 0 0 22px;
}
/* sticky rails need every ancestor to keep overflow visible */
.faq-style-one-area { overflow: visible; }
/* the theme clips the body on the x-axis, which turns it into a scroll container
   and silently kills every position:sticky rail — clip achieves the same without that */
body { overflow-x: clip; }

/* ---- Breadcrumb: centre the row itself, not just its items ---- */
.breadcrumb-area .breadcrumb,
.breadcrumb-area .x-hero-breadcrumb-center {
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ═══════════ Contact page ═══════════ */
.x-contact-items {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 60px 50px;
}
.x-contact-info .title { font-size: 34px; margin-bottom: 40px; }
.x-contact-info ul { list-style: none; margin: 0; padding: 0; }
.x-contact-info li { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 30px; margin-top: 0; }

/* The theme paints these as three 60px circles in three different fills
   (primary, secondary, then --dark, which all but disappears on this page).
   One consistent tinted tile reads as a set and matches the site's cards. */
.x-contact-info .icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(116, 118, 255, .14);
  border: 1px solid rgba(116, 118, 255, .32);
}
.x-contact-info li i,
.x-contact-info li:nth-child(2) i,
.x-contact-info li:nth-child(3) i {
  height: auto;
  width: auto;
  line-height: 1;
  margin-right: 0;
  border-radius: 0;
  background: none;
  font-size: 19px;
  color: var(--color-secondary);
}

/* the theme pads this paragraph 20% at >=1400px, which broke the two-line
   address onto four lines */
.x-contact-info li p { padding-right: 0; }
.x-contact-info h4 { font-size: 16px; margin-bottom: 6px; }
.x-contact-info p, .x-contact-info a { color: var(--white-secondary); font-size: 15px; line-height: 1.7; }
.x-contact-info a:hover { color: var(--color-secondary); }
.x-contact-card {
  background-repeat: no-repeat;
  background-position: right top;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background-color: rgba(255, 255, 255, .03);
  padding: 45px 40px;
}
@media (max-width: 767px) {
  .x-contact-items { padding: 40px 24px; }
  .x-contact-card { padding: 32px 24px; }
}

/* ═══════════ 404 ═══════════ */
.error-page-area .error-box h1 {
  /* the theme drops a light grey text-shadow behind the numerals */
  text-shadow: none;
  font-size: 160px;
  line-height: 1;
  font-weight: 700;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.error-page-area .error-box h2 { font-size: 34px; margin-bottom: 18px; }
.error-page-area .error-box p { max-width: 620px; margin: 0 auto; }
.error-page-area .x-cta-actions { justify-content: center; }

/* ---- Footer contact block ---- */
.x-footer-contact li p { margin-bottom: 4px; font-size: 13px; color: var(--white-secondary); }
.x-footer-contact li h4 { font-size: 16px; line-height: 1.6; }
/* the theme's form card is built for a light panel; keep our dark field styling */
.x-contact-card .x-lead-form .form-control,
.x-contact-card .x-lead-form .form-control:focus {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: var(--white);
  padding: 16px 20px;
  height: auto;
  box-shadow: none;
}
.x-contact-card .x-lead-form .form-control:focus { border-color: var(--color-primary); }
.x-contact-card .x-lead-form textarea.form-control { min-height: 130px; }
.x-contact-card .form-group { margin-bottom: 18px; }

/* ═══════════ Home page · content update (PO copy) ═══════════ */

/* ---- Unify: the four source categories and the shared-language band ---- */
.x-unify-sources {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.x-unify-sources li {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md, 12px);
  border-radius: 12px;
  padding: 18px 20px;
}
.x-unify-sources strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}
.x-unify-sources span { font-size: 13px; color: var(--white-secondary); }
.x-unify-band {
  margin: 22px 0 0;
  padding: 18px 24px;
  border-radius: 14px;
  background: var(--bg-gradient);
  text-align: center;
  line-height: 1.4;
}
.x-unify-band strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.5px;
}
.x-unify-band span {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, .9);
}
@media (max-width: 991px) { .x-unify-sources { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .x-unify-sources { grid-template-columns: 1fr; } }

/* ---- No vendor lock-in: three stacked layers of choice ---- */
.lk-stack { display: flex; flex-direction: column; gap: 0; }
.lk-layer {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 20px 22px;
}
.lk-layer.lk-base { background: rgba(116, 118, 255, .10); border-color: rgba(116, 118, 255, .35); }
.lk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.lk-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
}
.lk-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid rgba(116, 118, 255, .4);
  border-radius: 30px;
  padding: 4px 12px;
}
.lk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-chips .chip-mute { opacity: .6; }
.lk-link {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--white-secondary);
}

/* ---- Proof: outcome stat cards ---- */
.x-proof-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.x-proof-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 32px 30px;
  transition: all .3s ease;
}
.x-proof-card a:hover { border-color: var(--color-primary); background: rgba(116, 118, 255, .08); }
.x-proof-num {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  background: var(--bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.x-proof-label {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  margin-top: 10px;
}
.x-proof-attr {
  font-size: 13px;
  color: var(--white-secondary);
  margin-top: 12px;
  line-height: 1.6;
}
.x-proof-more { font-size: 14px; font-weight: 500; color: var(--color-primary); margin-top: 22px; }
.x-proof-more i { margin-left: 6px; }
.x-proof-note {
  font-size: 13px;
  color: var(--white-secondary);
  margin: 26px 0 0;
}
.x-section-link { margin: 18px 0 0; }
.x-section-link a { font-weight: 500; color: var(--color-primary); }
.x-section-link a i { margin-left: 6px; }
@media (max-width: 991px) { .x-proof-cards { grid-template-columns: 1fr; } }

/* ---- Closing: "Choose your next step" routes ---- */
.x-next-title { font-size: 22px; margin: 40px 0 0; }
.x-route-cards {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.x-route-cards li {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--white-secondary);
  font-size: 15px;
}
.x-route-cards strong { color: var(--white); font-weight: 600; }
.x-route-cards a { color: var(--color-primary); font-weight: 500; }
.x-route-cards span { display: block; margin-top: 4px; font-size: 13px; }

/* ---- Lead form: inline errors, optional hint, success panel ---- */
.x-lead-form label[for] { font-size: 13px; color: var(--white-secondary); margin-bottom: 8px; display: block; }
.x-lead-form label .opt { opacity: .7; }
.lead-error {
  display: none;
  margin: 8px 0 0;
  font-size: 13px;
  color: #ff8f8f;
}
.form-group.is-invalid .lead-error { display: block; }
.form-group.is-invalid .form-control { border-color: rgba(255, 143, 143, .6); }
.lead-done {
  display: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(69, 208, 189, .25);
  border-radius: 16px;
  padding: 40px 34px;
  text-align: center;
}
.lead-done.is-visible { display: block; }
.lead-done-tick {
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(69, 208, 189, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-done-tick svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--color-style-two);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lead-done p { color: var(--white-secondary); }
.lead-done-next { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; }
.lead-done-next a { font-size: 14px; font-weight: 500; color: var(--color-primary); }
.lead-done-next a i { margin-left: 6px; }

/* ---- Explainability heading is longer than the theme's 120px display size ---- */
#explainability .heading-style-two h1 { font-size: clamp(38px, 5.4vw, 78px); }
#explainability .heading-style-two .sub-title { margin-bottom: 22px; }

/* ═══════════ Compare page ═══════════ */

/* Hero headline highlight. The banner art is already blue-on-purple, so a
   gradient fill greys out against it — the site's hero headlines stay white. */
.x-hi { color: var(--white); }

/* ---- Comparison matrix ---- */
.x-cmp-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.x-cmp-wrap:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.x-cmp-wrap::-webkit-scrollbar { height: 6px; }
.x-cmp-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }

.x-cmp-tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  table-layout: fixed;
}
.x-cmp-tbl th:first-child,
.x-cmp-tbl td:first-child { width: 24%; }

.x-cmp-tbl thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 26px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.x-cmp-col-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.x-cmp-col-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--white-secondary);
}
.x-cmp-pill {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--bg-gradient);
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
}

/* the x101 column reads as the answer, so it carries the brand tint */
.x-cmp-tbl .x-cmp-me {
  background: rgba(116, 118, 255, .08);
  border-left: 1px solid rgba(116, 118, 255, .35);
  border-right: 1px solid rgba(116, 118, 255, .35);
}
.x-cmp-tbl thead .x-cmp-me {
  background: rgba(116, 118, 255, .15);
  border-top: 1px solid rgba(116, 118, 255, .35);
  border-bottom-color: rgba(116, 118, 255, .35);
}
.x-cmp-tbl tbody tr:last-child .x-cmp-me {
  border-bottom: 1px solid rgba(116, 118, 255, .35);
}

.x-cmp-tbl tbody th,
.x-cmp-tbl tbody td {
  text-align: left;
  vertical-align: middle;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.x-cmp-tbl tbody tr:last-child th,
.x-cmp-tbl tbody tr:last-child td { border-bottom: none; }
.x-cmp-tbl tbody tr:hover th,
.x-cmp-tbl tbody tr:hover td { background: rgba(255, 255, 255, .035); }
.x-cmp-tbl tbody tr:hover .x-cmp-me { background: rgba(116, 118, 255, .15); }

.x-cmp-row-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 5px;
}
.x-cmp-row-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--white-secondary);
}

/* Coverage marks: ✓ full, ◐ partial */
.x-cv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.x-cv::before {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}
/* the theme paints every span white inside .text-light, so these need to match
   its specificity to keep the coverage marks readable as marks */
.text-light .x-cv-yes { color: #45d0bd; font-weight: 600; }
.x-cv-yes::before {
  content: "\2713";
  background: rgba(69, 208, 189, .14);
  color: #45d0bd;
  border: 1px solid rgba(69, 208, 189, .5);
}
.text-light .x-cv-part { color: var(--white-secondary); }
.x-cv-part::before {
  content: "\25D0";
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .2);
}

.x-cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--white-secondary);
}
.x-cmp-legend .x-cv { font-size: 13px; font-weight: 400; }
.text-light .x-cmp-legend .x-cv-yes { color: var(--white-secondary); font-weight: 400; }

.x-cmp-scroll-hint { display: none; font-size: 13px; color: var(--white-secondary); margin: 10px 0 0; }
@media (max-width: 1080px) { .x-cmp-scroll-hint { display: block; } }

/* ---- Category narratives ---- */
.x-cat-list { list-style: none; margin: 0; padding: 0; }
.x-cat-row {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 40px;
  padding: 34px 36px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease;
}
.x-cat-row:last-child { margin-bottom: 0; }
.x-cat-row:hover { border-color: rgba(255, 255, 255, .25); }
.x-cat-row--me {
  border-color: rgba(116, 118, 255, .35);
  background: rgba(116, 118, 255, .07);
}
.x-cat-row--me:hover { border-color: var(--color-primary); }
.x-cat-name h3 { font-size: 24px; margin-bottom: 8px; color: var(--white); }
.x-cat-tag { font-size: 13px; line-height: 1.6; color: var(--white-secondary); margin: 0; }
.x-cat-body p { color: var(--white-secondary); line-height: 1.8; margin: 0; }
.x-cat-body p + p { margin-top: 14px; }
.x-cat-body strong { color: var(--white); font-weight: 600; }

@media (max-width: 991px) {
  .x-cat-row { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
  .x-cat-name h3 { font-size: 21px; }
}

/* ═══════════ Resources hub ═══════════ */

/* ---- "Start here" route cards ---- */
.x-res-route {
  height: 100%;
  padding: 32px 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease, transform .3s ease;
}
.x-res-route:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.x-res-route-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--bg-gradient);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.x-res-route h3 { font-size: 22px; line-height: 1.35; margin-bottom: 12px; color: var(--white); }
.text-light .x-res-route p { color: var(--white-secondary); font-size: 15px; line-height: 1.7; }

.x-res-route-links { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.x-res-route-links li + li { margin-top: 12px; }
.text-light .x-res-route-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-secondary);
}
.text-light .x-res-route-links a:hover { color: var(--white); }
.x-res-route-links a i { font-size: 12px; transition: transform .3s ease; }
.x-res-route-links a:hover i { transform: translateX(4px); }

/* ---- Library cards ---- */
.x-res-card {
  display: block;
  height: 100%;
  padding: 34px 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.x-res-card:hover {
  border-color: var(--color-primary);
  background: rgba(116, 118, 255, .08);
  transform: translateY(-4px);
}
.x-res-ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 24px;
  background: rgba(116, 118, 255, .14);
  border: 1px solid rgba(116, 118, 255, .3);
}
.text-light .x-res-ico i { font-size: 20px; color: var(--color-secondary); }
.x-res-card:hover .x-res-ico { background: var(--bg-gradient); border-color: transparent; }
.text-light .x-res-card:hover .x-res-ico i { color: var(--white); }

.x-res-card h3 { font-size: 22px; margin-bottom: 12px; color: var(--white); }
.text-light .x-res-card p { color: var(--white-secondary); font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.text-light .x-res-meta {
  display: block;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 500;
  color: var(--white-secondary);
}
.text-light .x-res-card:hover .x-res-meta { color: var(--color-secondary); }

/* ---- Popular answers ---- */
.x-res-answers { list-style: none; margin: 0; padding: 0; }
.x-res-answers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 32px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .3s ease;
}
.x-res-answers li:last-child { margin-bottom: 0; }
.x-res-answers li:hover { border-color: rgba(255, 255, 255, .25); }
.x-res-a-q h3 { font-size: 20px; margin-bottom: 8px; color: var(--white); }
.text-light .x-res-a-q p { color: var(--white-secondary); font-size: 15px; line-height: 1.7; margin: 0; }
.text-light .x-res-a-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-secondary);
  white-space: nowrap;
}
.text-light .x-res-a-link:hover { color: var(--white); }
.x-res-a-link i { font-size: 12px; transition: transform .3s ease; }
.x-res-a-link:hover i { transform: translateX(4px); }

@media (max-width: 767px) {
  .x-res-answers li { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
  .x-res-a-q h3 { font-size: 18px; }
}

/* ═══════════ Legal documents (Privacy · Terms · DPA) ═══════════ */

/* "Last updated" line under the hero headline */
.text-light .x-legal-updated {
  font-size: 14px;
  color: var(--white-secondary);
  margin-top: 18px;
}

/* Long-form prose: generous measure and rhythm, since these get read closely */
.x-legal { font-size: 16px; line-height: 1.85; }
.text-light .x-legal p { color: var(--white-common); margin-bottom: 20px; }
.text-light .x-legal p:last-child { margin-bottom: 0; }

.x-legal h2 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--white);
  margin: 52px 0 18px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.x-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.x-legal h3 {
  font-size: 19px;
  line-height: 1.4;
  color: var(--white);
  margin: 34px 0 14px;
}

.x-legal ul { margin: 0 0 22px; padding: 0; list-style: none; }
.x-legal li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: var(--white-common);
}
.x-legal li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.x-legal strong { color: var(--white); font-weight: 600; }
.text-light .x-legal a { color: var(--color-secondary); text-decoration: underline; }
.text-light .x-legal a:hover { color: var(--white); }

/* the DPA carries one wide table; it reuses the theme's spec-table styling */
.x-legal .x-table-wrap { margin: 0 0 24px; }
.x-legal .x-table-wrap:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.x-legal .x-table { font-size: 14.5px; line-height: 1.7; }
.x-legal .x-table th,
.x-legal .x-table td { padding: 16px 18px; }
.x-legal .x-table td { color: var(--white-common); }

@media (max-width: 767px) {
  .x-legal { font-size: 15px; }
  .x-legal h2 { font-size: 22px; margin-top: 40px; padding-top: 26px; }
  .x-legal h3 { font-size: 17px; }
}

/* ═══════════ Page hero scrim ═══════════
   Each page hero carries its own abstract art, and some of those images run
   bright exactly where the headline and lead sit (the mesh wave on Platform,
   the node field on Connectors). A soft vertical scrim keeps white type
   readable on any of them without flattening the artwork. */
.breadcrumb-area,
.banner-style-five-area { position: relative; z-index: 1; }

.breadcrumb-area::after,
.banner-style-five-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 11, 22, .55) 0%,
    rgba(10, 11, 22, .34) 42%,
    rgba(10, 11, 22, .58) 100%);
}

/* keep the hero content above the scrim */
.breadcrumb-area > .container,
.banner-style-five-area > .container { position: relative; z-index: 1; }

/* Heroes carrying bright artwork need a deeper scrim: the KPI row under the
   lead is gradient-filled text, which loses contrast against a light ground. */
.breadcrumb-area.x-hero-dim::after {
  background: linear-gradient(180deg,
    rgba(8, 9, 20, .72) 0%,
    rgba(8, 9, 20, .60) 38%,
    rgba(8, 9, 20, .82) 100%);
}

/* ---- Explainability heading: let the closing clause run on ----
   The theme sets this <strong> to inline-flex at width:100%, which drops
   "and stand behind." onto its own right-aligned line and breaks the
   sentence in two. Keep it inline so the headline reads as one line of copy. */
.heading-style-two h1 strong {
  display: inline;
  width: auto;
  justify-content: normal;
  text-align: inherit;
}

/* ---- Compare teaser: a bento of one visual tile and four point cards ----
   The tile carries the brand mark inside the theme's rotating curve-text ring;
   it spans both rows so the four points sit as a 2x2 block beside it with no
   orphan cell. Card language matches the case-study and resources cards. */
#compare-teaser .x-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 55px;
}

#compare-teaser .x-compare-visual {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 40px 24px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* the ring sits on vivid gradient art, so the glass disc is tinted dark to
   keep both the curved label and the brand mark legible */
#compare-teaser .curve-text {
  background: radial-gradient(circle at 50% 50%,
    rgba(9, 10, 20, .58) 0%, rgba(9, 10, 20, .34) 62%, rgba(9, 10, 20, .22) 100%);
  box-shadow: 0 18px 50px rgba(6, 7, 18, .35);
}
#compare-teaser .curve-text svg { animation-duration: 28s; }
#compare-teaser .curve-text svg text { font-size: 17px; letter-spacing: .3px; }
#compare-teaser .curve-text img { height: 96px; width: auto; }

#compare-teaser .process-style-three-item {
  padding: 34px 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  /* the section carries a background wash, so the panel needs real opacity
     rather than the 3% used elsewhere */
  background: rgba(18, 19, 32, .72);
  backdrop-filter: blur(6px);
  transition: border-color .25s ease, transform .25s ease;
}
/* #compare-teaser .process-style-three-item:hover {
  border-color: rgba(122, 105, 255, .45);
  transform: translateY(-4px);
} */
/* the theme spaces the icon for a bare grid; a card needs it tighter */
#compare-teaser .process-style-three-item .icon img { height: 46px; margin-bottom: 22px; }
#compare-teaser .process-style-three-item h4 { font-size: 21px; margin-bottom: 10px; }
.text-light #compare-teaser .process-style-three-item p {
  color: var(--white-secondary);
  font-size: 15px;
  line-height: 1.7;
}

/* Tablet: the tile goes full width above a 2x2 block of points. */
@media (max-width: 991px) {
  #compare-teaser .x-compare-grid { grid-template-columns: repeat(2, 1fr); }
  #compare-teaser .x-compare-visual { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
}

@media (max-width: 767px) {
  #compare-teaser .x-compare-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  #compare-teaser .x-compare-visual { min-height: 260px; padding: 32px 20px; }
  #compare-teaser .process-style-three-item { padding: 26px 24px; }
  #compare-teaser .process-style-three-item .icon img { height: 40px; margin-bottom: 18px; }
}

/* The section's background art is absolutely positioned, so lift the content
   above it; the artwork stays a background element. */
#compare-teaser .container { position: relative; z-index: 1; }

/* ---- Page whose content starts straight under the fixed header ----
   (Contact drops the hero, so the first section supplies the top clearance.) */
.x-page-top { padding-top: 180px; }
@media (max-width: 991px) { .x-page-top { padding-top: 140px; } }
@media (max-width: 767px) { .x-page-top { padding-top: 120px; } }

/* ---- Breadcrumb separator: sit the "/" on the text's centre line ----
   The theme positions it with line-height:0 at top:50%, which collapses the
   glyph's line box so it renders above the baseline; our earlier override
   pinned it to top:0, which raised it further. Centre it properly instead.
   Covers both hero shapes: .breadcrumb-area pages and the banner-style pages. */
.breadcrumb-area .breadcrumb li::after,
.x-hero-breadcrumb li::after,
.breadcrumb-area .x-hero-breadcrumb-center li::after {
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  margin-top: 0;
}

/* ---- Breadcrumb home icon: one weight everywhere ----
   The theme sets `font-weight:100` on icons inside .breadcrumb-area, which
   renders the Font Awesome glyph in its thin cut, so those pages got a hairline
   house while Platform and the case-study heroes (outside that container) kept
   the solid one. Match Platform across the board. */
.breadcrumb-area .breadcrumb li i,
.x-hero-breadcrumb li i,
.breadcrumb-area .x-hero-breadcrumb-center li i { font-weight: 900; }

/* ═══════════ Bullet markers · Phosphor icons ═══════════
   The theme ships a PNG arrow (list-style-two) and a validicon tick
   (list-style-three). Both are swapped for Phosphor glyphs here so every
   bullet in the site comes from one icon set. Per-list overrides go through
   the .ph-list-* modifiers below. */
ul.list-style-two li {
  padding-left: 28px;
}
ul.list-style-two li::after {
  content: "\e13a";                 /* ph-fill · caret-right */
  font-family: 'Phosphor-Fill' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  background-image: none;
  height: auto;
  width: auto;
  top: 3px;
  color: var(--color-primary);
}
/* Opt-in markers for lists that read better as ticks or arrows. */
ul.list-style-two.ph-list-check li::after       { content: "\eba6"; font-size: 13px; }  /* check-fat */
ul.list-style-two.ph-list-check-circle li::after{ content: "\e184"; font-size: 16px; }  /* check-circle */
ul.list-style-two.ph-list-arrow li::after       { content: "\e06c"; font-size: 14px; top: 4px; }  /* arrow-right */

/* Same bordered chip the theme draws, with the validicon tick swapped for
   Phosphor's — check-circle would fill the chip and lose the outline. */
ul.list-style-three li::after {
  content: "\eba6";                 /* ph-fill · check-fat */
  font-family: 'Phosphor-Fill' !important;
  font-size: 14px;
  color: var(--color-primary);
}

.x-check-list li i {
  font-size: 19px;
  line-height: 1;
  top: 2px;
}

/* ═══════════ Unify · source cards flowing into the x101 band ═══════════
   The SVG layer is drawn by scripts.js from the live card geometry, so the
   curves land exactly on the band at every breakpoint. When the grid wraps
   to more than one row the connectors are dropped (they would cut straight
   across the cards) and the block falls back to plain stacked spacing. */
.x-unify-flow { position: relative; }
.x-unify-flow > .x-unify-sources,
.x-unify-flow > .x-unify-band { position: relative; z-index: 1; }
.x-unify-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.x-unify-flow .x-unify-band {
  width: 460px;
  max-width: 100%;
  margin: 108px auto 0;
  padding: 20px 24px;
  box-shadow: 0 18px 46px -22px rgba(116, 118, 255, .85);
}
.x-unify-flow.is-stacked .x-unify-band { margin-top: 26px; }
.x-unify-flow.is-stacked .x-unify-links { display: none; }
.x-unify-band span { text-transform: uppercase; }
@media (max-width: 1199px) { .x-unify-flow .x-unify-band { margin-top: 88px; } }
@media (prefers-reduced-motion: reduce) { .x-unify-dot { display: none; } }

/* Three stats inside a listing card: a fixed 3-up grid, so the numbers line
   up across the row instead of wrapping differently in every card. */
.x-cs-card .x-cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 12px;
  margin: 22px 0 18px;
  padding-top: 20px;
}
.x-cs-card .x-cs-stats .n { font-size: 22px; }
.x-cs-card .x-cs-stats .l { font-size: 12px; line-height: 1.35; margin-top: 2px; }

/* ---- Explainability: keep the panel inside its section ----
   The theme bleeds .about-style-two-thumb 120px past the section bottom and
   clips it with overflow:hidden — the intended look for a photo rising out of
   the band, but it cut the bottom off the explainability panel. Where the
   thumb carries an x101 illustration the whole panel has to stay readable, so
   the bleed is neutralised and the section's own bottom padding restored. */
.about-style-two-thumb.x-illus {
  position: relative;
  bottom: 0;
  margin-top: 0;
  height: auto;
  overflow: visible;
  padding-bottom: 120px;
}
/* The theme also hides this thumb outright between 768px and 991px — right
   for decoration, wrong for a panel that carries the section's proof. */
@media (max-width: 991px) {
  .about-style-two-thumb.x-illus {
    display: block;
    padding-bottom: 80px;
  }
}

/* ═══════════ Platform page · restored PO content ═══════════ */

/* Descriptive line under the numbered section label ("How an agent is built"). */
.x-kicker {
  margin: -6px 0 14px;
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* ---- Full-bleed page heroes ----
   Above 1600px the theme insets .breadcrumb-area to 95% width with a 30px
   radius and a top margin, so the hero floats as a rounded card with the
   page background showing around it. Every other hero on the site runs edge
   to edge, so square this one off and let it fill the viewport too. */
@media (min-width: 1600px) {
  .breadcrumb-area {
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

/* Proof: the attribution note and the "see all" link sit under a centred
   card grid, so centre them with it. Scoped to #proof — the other
   .x-section-link lives in the left-aligned closing block. */
#proof .x-proof-note,
#proof .x-section-link { text-align: center; }

/* Full-width still illustration inside a platform section. */
.x-illus-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl, 18px);
}

/* ═══════════ Unify reads as page copy, not a panel ═══════════
   The theme plates .about-style-one-info on a tinted rounded card with a
   200px watermark and a blurred glow behind it. On this page the section is
   straight narrative between two full-bleed bands, so the plate is dropped
   and its two box-only decorations go with it. */
#unify .about-style-one-info {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0;
  padding: 0 0 40px;
  overflow: visible;
}
#unify .about-style-one-info::after,
#unify .about-style-one-info .fixed-text { display: none; }

@media (max-width: 767px) {
  #unify .about-style-one-info { padding-bottom: 20px; }
}


/* ═══════════ Capabilities: one heading, five auto-switching tabs ═══════════
   Act, Agentic Orchestration, Company Knowledge, Instant Analytics and Deep
   Research were five full-bleed sections. Their eyebrows are now the tab
   labels and their bodies the panels: the deck advances itself every 5s, and
   each tab's bottom border doubles as the progress track for that dwell.

   The advance is driven by the progress bar's own animationend, not a timer,
   so pausing the animation (hover, focus, off-screen, reduced motion) pauses
   the rotation for free and the two can never drift apart. */
.x-cap-area { --cap-dwell: 5s; }

.x-cap-intro { max-width: 780px; margin-bottom: 44px; }
.x-cap-intro .title {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.22;
  margin-bottom: 20px;
}
.text-light .x-cap-intro p { color: var(--white-secondary); font-size: 17px; line-height: 1.75; }

/* ---- Tab row ---- */
.x-cap-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 24px;
  margin-bottom: 46px;
}
.x-cap-tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 4px 0;
  text-align: left;
  cursor: pointer;
  color: var(--white-secondary);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  transition: color .2s ease;
}
.x-cap-tab:hover { color: var(--white); }
.x-cap-tab.is-active { color: var(--white); }
.x-cap-tab-label { display: block; padding-bottom: 14px; }

/* the bottom border is the progress track */
.x-cap-tab-track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
}
.x-cap-tab-track i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--bg-gradient);
  transform: scaleX(0);
  transform-origin: left center;
}
.x-cap-tab.is-active .x-cap-tab-track i {
  animation: x-cap-progress var(--cap-dwell) linear forwards;
}
/* one switch to stop everything: hover, keyboard focus, or scrolled away */
.x-cap-tabs.is-paused .x-cap-tab.is-active .x-cap-tab-track i { animation-play-state: paused; }
@keyframes x-cap-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Panels: all stacked in one grid cell so the height never jumps ---- */
.x-cap-panels { display: grid; }
.x-cap-panel {
  grid-area: 1 / 1;
  /* case-study pages deep-link straight to a panel id; keep the landing clear
     of the fixed header */
  scroll-margin-top: 96px;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 34px;
  align-items: center;
  /* visibility (not display) keeps every panel measured, so the block is as
     tall as the tallest one and switching tabs never reflows the page */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.x-cap-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.x-cap-figure { min-width: 0; }
.x-cap-figure .about-style-three-thumb.x-illus { padding: 0; margin: 0; }
.x-cap-text { min-width: 0; }

.x-cap-title {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.32;
  margin-bottom: 16px;
}
.text-light .x-cap-panel p { color: var(--white-secondary); font-size: 17px; line-height: 1.75; }
.x-cap-panel .list-style-two { margin-top: 12px; }
.x-cap-panel .list-style-two li { font-size: 16px; line-height: 1.65; margin-bottom: 9px; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .x-cap-intro { margin-bottom: 34px; }
  .x-cap-tabs { grid-template-columns: repeat(3, 1fr); gap: 22px 20px; margin-bottom: 36px; }
  /* stacked, the panel box is still as tall as the tallest panel; keep its
     two rows at their own height at the top rather than letting the spare
     space stretch them apart */
  .x-cap-panel {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
    align-content: start;
  }
}
@media (max-width: 575px) {
  .x-cap-tabs { grid-template-columns: repeat(2, 1fr); }
  .x-cap-tab { font-size: 14px; }
  .x-cap-title { font-size: 24px; }
  .text-light .x-cap-panel p { font-size: 16px; }
}

/* Nothing should auto-advance for a visitor who asked for less motion: with
   the bar's animation off there is no animationend, so the rotation stops. */
@media (prefers-reduced-motion: reduce) {
  .x-cap-tab.is-active .x-cap-tab-track i { animation: none; transform: scaleX(1); }
  .x-cap-panel { transition: none; }
}

/* ---- Highlighted phrase inside a heading ----
   Same chip the hero uses for "new interface", carried into section titles.
   Kept inline (not inline-block) with box-decoration-break so a phrase that
   wraps gets the padding and radius on every line instead of one long bar. */
.x-mark {
  display: inline;
  background: var(--bg-gradient);
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 7px;
  padding: 0 9px;
  /* the chip sits tight on the cap height, so the line box needs the room */
  line-height: 1.4;
}
@media (max-width: 767px) {
  .x-mark { padding: 0 7px; border-radius: 6px; }
}

/* ═══════════ Platform: heading beside the diagram, not above it ═══════════
   Architecture and Agent creation used to run heading-then-full-width-figure.
   Both now put the heading in a narrow left column that holds while the
   figure (or the card stack) scrolls past it on the right. */
/* One heading treatment for every section on the page. The theme's 55px
   .title was sized for a full-bleed band; two of these sections now run
   their heading down a 4-of-12 column, and a page where one heading is
   55px and the next 38px reads as a mistake. All three share this. */
.x-plat-heading .title {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.2;
  margin-bottom: 16px;
}
.x-plat-heading .x-kicker { margin-bottom: 10px; }
.text-light .x-plat-heading p {
  color: var(--white-secondary);
  font-size: 16px;
  line-height: 1.7;
  /* the theme spaces the subtext off a heading with no bottom margin of its
     own; .title has one here, so the 25px would double up */
  margin-top: 0;
}
/* a stacked heading still needs a measure, or the subtext runs the full row */
.x-plat-heading { max-width: 720px; }

/* the two sections that put their heading beside the figure */
.x-side-intro { max-width: 460px; }

@media (min-width: 992px) {
  /* clears the page header (72px) plus the sticky jump nav below it (64px) */
  .x-side-intro { position: sticky; top: 152px; }
}
@media (max-width: 991px) {
  .x-side-intro { max-width: none; margin-bottom: 38px; }
}

/* ---- Lifecycle rail, lifted out of the wizard panel into the heading ----
   It used to be a centred footing line under a full-width grid. In a 400px
   column it wraps, so the chips run left-aligned and the note sits under
   them rather than being centred across a width it no longer has. */
.x-side-intro .lc-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.x-side-intro .lc-label {
  flex: 1 0 100%;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 2px;
}
.x-side-intro .lc-arrow { color: rgba(255, 255, 255, .45); font-size: .8rem; }
/* the chips came from .x-illus .chip; out here in the heading they need
   their own copy of that pill */
.x-side-intro .lc-rail .chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(116, 118, 255, .14);
  border: 1px solid rgba(116, 118, 255, .42);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.x-side-intro .lc-rail .chip-mute {
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.x-side-intro .lc-note {
  flex: 1 0 100%;
  margin: 8px 0 0;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}