@charset "UTF-8";
/* =========================
   TOKENS / BASE
   ========================= */
:root {
  --sx-maxw: 1200px;
  --sx-radius: 16px;
  --sx-radius-lg: 24px;
  --sx-gap: 16px;
  --sx-gap-lg: 24px;
  --sx-gap-xl: 40px;
  --sx-bg: #0b0f13;
  --sx-panel: #11171d;
  --sx-panel-2: #0f141a;
  --sx-border: rgba(255, 255, 255, 0.1);
  --sx-text: #e7edf2;
  --sx-text-dim: #cfe5e0;
  --sx-accent: #44d7b6;
  --sx-accent-2: #6aa3ff;
  --sx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 24px rgba(0, 0, 0, 0.35);
  --sx-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
  /* =========================================================
   PARTNER PAGE — SECTIONS
   Uses site tokens when available; safe fallbacks provided.
========================================================= */
  --p-accent-1: var(--sx-accent, #44d7b6);
  --p-accent-2: var(--sx-accent-2, #6aa3ff);
  --p-ink: var(--sx-text, #ffffff);
  --p-dim: var(--sx-text-dim, #cfe5e0);
  --p-bg-1: var(--sx-bg, #0b131a);
  --p-bg-2: #0e1821;
  --p-panel-1: var(--sx-panel, #11171d);
  --p-panel-2: var(--sx-panel-2, #0f141a);
  --p-border: var(--sx-border, rgba(255, 255, 255, 0.1));
  --p-shadow-1: var(--sx-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42));
  --p-shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --p-maxw: var(--sx-maxw, 1200px);
  /* =========================================================
   THEME TOKENS (used by all sections below)
========================================================= */
  --gx-accent-1: #44d7b6;
  --gx-accent-2: #6aa3ff;
  --gx-bg-1: #0b131a;
  --gx-bg-2: #0d1821;
  --gx-panel-1: #11171d;
  --gx-panel-2: #0f141a;
  --gx-ink: #ffffff;
  --gx-text: #cfe5e0;
  --gx-dim: #9bb4ad;
  --gx-border: rgba(255, 255, 255, 0.12);
  --gx-shadow-1: 0 10px 28px rgba(0, 0, 0, 0.42);
  --gx-shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --gx-maxw: 1200px;
  --cmmc-border: rgba(255, 255, 255, 0.12);
  --cmmc-text: #ffffff;
  --cmmc-text-dim: #cfe5e0;
  --cmmc-panel-1: #11171d;
  --cmmc-panel-2: #0f141a;
  --cmmc-accent-1: #44d7b6;
  /* teal */
  --cmmc-accent-2: #6aa3ff;
  /* blue */ }

.hero .btn {
  background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
  color: #071115;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 24px; }

* {
  box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: #0a0f14;
  color: var(--sx-text); }

img {
  max-width: 100%;
  display: block; }

a {
  color: inherit;
  text-decoration: none; }

.container {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  padding: 0 20px; }

.btn.btn--cta {
  background: var(--sx-accent);
  color: #071115 !important;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: var(--sx-shadow-1); }

/* =========================
   DEMO CTA
   ========================= */
.get-demo {
  position: relative;
  padding: 96px 0;
  background: radial-gradient(900px 420px at 15% -10%, rgba(68, 215, 182, 0.1), transparent 60%), radial-gradient(1000px 460px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0a0f14 0%, #0b1117 100%);
  border-top: 1px solid var(--sx-border);
  border-bottom: 1px solid var(--sx-border);
  overflow: hidden; }

.demo-container {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: start; }

/* Left: copy */
.demo-text h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 800;
  color: #fff; }

.demo-text p {
  margin: 0 0 16px;
  color: var(--sx-text-dim);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 60ch; }

.demo-text ul {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px; }

.demo-text li {
  list-style: none;
  position: relative;
  padding-left: 28px;
  color: #d8eee9;
  line-height: 1.6; }

.demo-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-2));
  box-shadow: 0 0 12px rgba(68, 215, 182, 0.28); }

/* Right: form card */
.demo-form {
  position: relative;
  background: linear-gradient(180deg, #121920, #0f151b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--sx-shadow-1); }

.demo-form::after {
  /* soft mint/blue corner glow */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  z-index: -1;
  background: radial-gradient(240px 120px at 8% 0%, rgba(68, 215, 182, 0.13), transparent 60%), radial-gradient(240px 120px at 100% 100%, rgba(106, 163, 255, 0.1), transparent 60%);
  filter: blur(12px); }

.demo-form h3 {
  margin: 4px 0 14px;
  color: #f3fbf8;
  font-weight: 800;
  font-size: 1.15rem; }

/* Form grid */
.demo-form form p,
.col-2 p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; }

.demo-form form .col-2 p {
  display: flex; }

.demo-form input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e141a;
  color: #eaf7f3;
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
 background 0.18s ease; }

.demo-form input::placeholder {
  color: rgba(231, 237, 242, 0.55); }

/* Full-width rows on small screens + email/phone full width */
.demo-form input[name="Organization"],
.demo-form form p [data-name="Organization"] {
  grid-column: span 2; }

.demo-form input[name="email"] {
  grid-column: span 1; }

.demo-form input[name="phone"] {
  grid-column: span 1; }

.demo-form input:focus {
  border-color: var(--sx-accent);
  box-shadow: 0 0 0 3px rgba(68, 215, 182, 0.18);
  background: #0f161d; }

/* Submit button */
.demo-form .submit-btn,
.demo-form input[type="submit"] {
  grid-column: span 2;
  justify-self: stretch;
  background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
  color: #071115;
  font-weight: 800;
  padding: 13px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: var(--sx-shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease; }

.demo-form .submit-btn:hover,
.demo-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  filter: saturate(1.05); }

/* Responsive */
@media (max-width: 1024px) {
  .demo-container {
    grid-template-columns: 1fr;
    gap: 28px; }
  .demo-form form {
    grid-template-columns: 1fr; }
  .demo-form input[name="Organization"],
  .demo-form input[name="email"],
  .demo-form input[name="phone"],
  .demo-form .submit-btn {
    grid-column: auto; } }

.demo-form .wpcf7-spinner {
  position: absolute; }

/* Brand colors */
/* Neutral colors */
/* Gradients */
body {
  font-family: "urw-din", Arial, Helvetica, sans-serif; }

.body {
  font-size: 30px;
  line-height: 36px; }
  @media (max-width: 850px) {
    .body {
      font-size: 18px;
      line-height: 24px; } }

/*
h1 {
  font-family: $font-urwdin;
  font-size: 90px;
  line-height: 100px;
  text-transform: uppercase;
  font-weight: 300;

  @media (max-width: 850px) {
    font-size: 48px;
    line-height: 50px;
  }
}

h2 {
  font-family: $font-urwdin;
  font-size: 60px;
  line-height: 72px;
  text-transform: uppercase;
  font-weight: 300;
  margin: 45px 0;

  @media (max-width: 850px) {
    font-size: 36px;
    line-height: 36px;
  }
}

h3 {
  font-family: $font-ballinger;
  font-size: 26px;
  line-height: 31px;
  text-transform: uppercase;
  font-weight: 300;

  @media (max-width: 850px) {
    font-size: 21px;
    line-height: 22px;
  }
}

h4 {
  font-family: $font-ballinger;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  font-weight: 300;

  @media (max-width: 850px) {
    font-size: 14px;
    line-height: 17px;
  }
}

h5 {
  font-family: $font-ballinger;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: $brand-color--1;

  &:hover {
    color: $brand-color--4;
    text-decoration: underline;
  }
}
  */
/* 
// This class gets applied to every instance of the word Guardient and can be globally styled here.
  .guardientLogo {
} */
.guardientLogo sup {
  font-size: .4em;
  position: relative;
  top: -5px; }

h3 .guardientLogo sup {
  font-size: 1em; }

/* =========================
   HEADER / NAV
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #0b1117 0%, #0a0f14 100%);
  border-bottom: 1px solid var(--sx-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px; }

.site-header .logo img {
  height: 36px;
  width: auto; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 36px;
  border: 1px solid var(--sx-border);
  background: transparent;
  border-radius: 12px;
  align-items: center;
  justify-content: center; }

.nav-toggle .nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #dbe8e5;
  margin: 3px auto; }

.nav {
  margin-left: auto; }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px; }

.menu-item > a,
.menu-item > .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 10px;
  color: #e8f6f1;
  font-weight: 700; }

/* Navigation item hover style (updated for darker mint tone) */
.menu-item > a:hover,
.menu-item > .dropdown-toggle:hover,
.menu-item.active {
  background: #2eb99c;
  /* darker mint hover color */
  color: #071115;
  /* dark text for contrast */
  transition: background 0.25s ease, color 0.25s ease; }

.menu-item.active {
  border-radius: 10px; }

/* DROPDOWNS — fix bullets + hover gap */
.has-dropdown {
  position: relative; }

.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  /* no gap so hover doesn't collapse */
  z-index: 1000;
  /* reset list styles so no bullets */
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 240px;
  background: linear-gradient(180deg, #121920, #0f151b);
  border: 1px solid var(--sx-border);
  border-radius: 14px;
  box-shadow: var(--sx-shadow-2);
  display: none; }

/* bullets off for <li> too, just in case */
.dropdown li {
  list-style: none; }

/* Dropdown caret */
.has-dropdown > .dropdown-toggle::after {
  content: "▾";
  font-size: 12px;
  opacity: 0.8;
  margin-left: 4px;
  transition: transform 0.2s ease; }

.has-dropdown:hover > .dropdown-toggle::after,
.has-dropdown.open > .dropdown-toggle::after {
  transform: rotate(180deg); }

/* dropdown links */
.dropdown a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: #eaf7f3;
  font-weight: 600; }

.dropdown a:hover {
  background: rgba(255, 255, 255, 0.06); }

/* open states */
.has-dropdown:hover > .dropdown {
  display: block; }

.has-dropdown.open > .dropdown {
  display: block; }

/* keep right-edge menus on-screen */
.menu > .has-dropdown:last-child .dropdown {
  right: 0;
  left: auto; }

/* mobile layout keeps click-to-open behavior */
@media (max-width: 1024px) {
  .has-dropdown .dropdown {
    position: static;
    display: none;
    margin: 4px 0 8px 8px;
    min-width: 0; }
  .has-dropdown.open .dropdown {
    display: block; }
  .has-dropdown:hover > .dropdown {
    display: none; }
  /* disable hover-open on touch */ }

/* =========================
   RESPONSIVE NAV
   ========================= */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex; }
  .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: rgba(9, 14, 19, 0.98);
    border-top: 1px solid var(--sx-border);
    display: none; }
  .nav.is-open {
    display: block; }
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px; }
  .menu-item > a,
  .menu-item > .dropdown-toggle {
    padding: 12px 14px;
    border-radius: 12px; }
  /* Mobile dropdowns become inline panels */
  .has-dropdown .dropdown {
    position: static;
    display: none;
    margin: 4px 0 8px 8px;
    min-width: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--sx-border); }
  .has-dropdown.open .dropdown {
    display: block; }
  /* Disable hover-open on mobile (optional safety) */
  .has-dropdown:hover > .dropdown {
    display: none; } }

/* Optional: focus styles for accessibility */
.menu a:focus,
.dropdown a:focus,
.dropdown-toggle:focus,
.nav-toggle:focus {
  outline: 2px solid var(--sx-accent);
  outline-offset: 2px;
  border-radius: 10px; }

/* === Responsive Navigation === */
@media (max-width: 768px) {
  .site-header {
    justify-content: space-between; } }

.blogpost {
  padding-top: 150px;
  width: 80%;
  margin: 0 auto; }

.margins {
  padding-left: 240px;
  padding-right: 240px; }
  @media (max-width: 1500px) {
    .margins {
      padding-right: 120px;
      padding-left: 120px; } }
  @media (max-width: 850px) {
    .margins {
      padding-right: 24px;
      padding-left: 24px; } }

.left-margin {
  padding-left: 240px; }

.background-color--black,
.background-color--black a {
  background-color: #000000;
  color: #ffffff; }

.background-color--black a:hover {
  color: #DE3238;
  text-decoration: underline; }

.primary {
  padding-top: 118px; }

.blogGrid--title {
  text-align: center;
  margin: 100px 0 30px 0;
  font-size: 60px; }
  @media (max-width: 850px) {
    .blogGrid--title {
      text-align: left;
      line-height: 1.25;
      font-size: 48px;
      width: 88%;
      margin: 130px auto 50px auto; } }

.blogGrid--body {
  text-align: center;
  font-size: 30px; }

.blogGrid--container {
  max-width: 1496px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  @media (max-width: 850px) {
    .blogGrid--container {
      margin: 0 auto; } }

.blogGrid--item_date {
  font-family: "ballinger-mono", Arial, Helvetica, sans-serif; }

.blogGrid--item {
  width: 38%;
  margin: 2%;
  height: 400px;
  color: #fff;
  background: #47D0A5;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4); }
  .blogGrid--item:hover {
    color: #fff; }
  @media (max-width: 1100px) {
    .blogGrid--item {
      width: 35%;
      height: 300px; } }
  @media (max-width: 850px) {
    .blogGrid--item {
      width: 100%;
      margin: 2% 0; } }
  .blogGrid--item.item--color-green {
    background-color: #47D0A5;
    box-shadow: none; }
  .blogGrid--item.item--color-lime {
    color: #000000;
    background-color: #ACFE00;
    box-shadow: none; }
  .blogGrid--item.item--color-blue {
    background-color: #459BB0;
    box-shadow: none; }
  .blogGrid--item.item--color-red {
    color: #000000;
    background-color: #DE3238;
    box-shadow: none; }

.blogGrid--item_title {
  font-size: 30px; }

.blogList__filterWrap {
  max-width: 960px;
  padding-left: 120px;
  padding-right: 120px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center; }
  .blogList__filterWrap h3 {
    flex-basis: 100%;
    font-size: 60px;
    line-height: 1.25; }
  .blogList__filterWrap .blogList__body {
    text-align: center;
    font-size: 30px; }
  .blogList__filterWrap label {
    margin: 0 15px;
    text-align: left;
    font-size: 18px; }
    @media (max-width: 850px) {
      .blogList__filterWrap label {
        text-align: center;
        margin-bottom: 15px; } }
  .blogList__filterWrap input, .blogList__filterWrap select {
    padding: 20px;
    width: 250px;
    display: block;
    border: 2px solid #000;
    margin-top: 5px; }
  .blogList__filterWrap input {
    width: 350px; }
  .blogList__filterWrap input:placeholder {
    color: #0000004D;
    font-size: 16px; }

.custom-post-select {
  margin-top: 100px;
  margin-bottom: 100px; }
  @media (max-width: 850px) {
    .custom-post-select {
      margin-top: 50px;
      margin-bottom: 50px; } }
  .custom-post-select--container {
    display: flex; }
    @media (max-width: 850px) {
      .custom-post-select--container {
        display: block; } }
    .custom-post-select--container > div {
      flex: 1 1 0; }
    .custom-post-select--container > div:first-child {
      margin-right: 50px; }
      @media (max-width: 1050px) {
        .custom-post-select--container > div:first-child {
          margin-right: 15px; } }
      @media (max-width: 850px) {
        .custom-post-select--container > div:first-child {
          margin-right: 0;
          margin-bottom: 50px; } }
    .custom-post-select--container > div:last-child {
      margin-left: 50px; }
      @media (max-width: 1050px) {
        .custom-post-select--container > div:last-child {
          margin-left: 15px; } }
      @media (max-width: 850px) {
        .custom-post-select--container > div:last-child {
          margin-left: 0; } }
  .custom-post-select--body {
    font-size: 30px; }
  .custom-post-select--item {
    display: block;
    margin: 2%;
    height: 400px;
    color: #fff;
    background: #47D0A5;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4); }
    .custom-post-select--item:hover {
      color: #fff; }
    @media (max-width: 850px) {
      .custom-post-select--item {
        margin: 2% 0; } }
  .custom-post-select--item_date {
    font-family: "ballinger-mono", Arial, Helvetica, sans-serif; }
  .custom-post-select--item_title {
    font-size: 30px; }

.horizontal-infoblock {
  padding-top: 100px;
  padding-bottom: 100px; }
  @media (max-width: 1000px) {
    .horizontal-infoblock {
      padding-top: 100px;
      padding-bottom: 100px; } }
  .horizontal-infoblock.background-color--white + .horizontal-infoblock.background-color--white {
    padding-top: 0; }
  .horizontal-infoblock .horizontal-content {
    display: flex;
    flex-direction: row;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px; }
    @media (max-width: 1000px) {
      .horizontal-infoblock .horizontal-content {
        display: block; } }
    .horizontal-infoblock .horizontal-content > div {
      flex: 1 1 0; }
    .horizontal-infoblock .horizontal-content > div:first-child {
      margin-right: 50px; }
      @media (max-width: 1100px) {
        .horizontal-infoblock .horizontal-content > div:first-child {
          margin-right: 10px; } }
      @media (max-width: 1000px) {
        .horizontal-infoblock .horizontal-content > div:first-child {
          margin-right: 0; } }
    .horizontal-infoblock .horizontal-content > div:last-child {
      margin-left: 50px; }
      @media (max-width: 1100px) {
        .horizontal-infoblock .horizontal-content > div:last-child {
          margin-left: 10px; } }
      @media (max-width: 1000px) {
        .horizontal-infoblock .horizontal-content > div:last-child {
          margin-right: 0; } }
    .horizontal-infoblock .horizontal-content h2 {
      margin-top: 0; }
    .horizontal-infoblock .horizontal-content .text--body p:first-child {
      margin-top: 0; }
  .horizontal-infoblock img {
    max-width: 100%; }

.title {
  padding-top: 118px;
  padding-bottom: 120px;
  text-align: center;
  background-position: top center;
  background-size: cover; }
  .title--container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto; }
  .title--subtitle {
    padding-bottom: 150px; }
  .title--body {
    color: #47D0A5;
    font-size: 30px;
    line-height: 36px; }
  .title--button {
    display: inline-block;
    border: 1px solid #FFFFFF;
    padding: 20px 60px;
    text-transform: uppercase; }
    @media (max-width: 850px) {
      .title--button {
        font-size: 20px; } }
    .title--button:hover {
      border-color: #47D0A5;
      color: #47D0A5;
      text-decoration: underline; }

.usx-home {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   PILLARS / VALUES SECTION
   ========================= */
  /* grid */
  /* card */
  /* responsive */
  /* =========================
   WHY CHOOSE SECTION
   ========================= */
  /* Cards grid */
  /* Card */
  /* Accent top edge using mint→blue gradient */
  /* Hover: lift + glow + stronger border */
  /* Stat + text */
  /* CTA row */
  /* =========================
   TRUSTED / TESTIMONIALS
========================= */
  /* 2-col layout: left copy wider than quotes */
  /* Left column */
  /* Right column: stacked quotes */
  /* Cards */
  /* Marquee */
  /* Responsive */
  /* ========== 8) HOW IT WORKS (1-2-3) ========== */
  /* ========== 5) PLATFORM COLLAGE (optional visuals) ========== */
  /* ========== 4) WHY GUARDIENT (pillar cards) — refreshed ========== */
  /* Section heading */
  /* Pillar grid */
  /* Card — subtle gradient + glow edge */
  /* Gradient “edge” that makes the cards pop without noise */
  /* Soft corner glows (mint/blue) */
  /* Hover lift + brighter surface */
  /* Titles + text */
  /* Fancy bullets (keep but brighten + align) */
  /* Optional: subtle per-card accent variation for visual rhythm */ }
  .usx-home .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-home .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-home .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-home .hero-content h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-home .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-home .hero .btn,
  .usx-home .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-home .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-home .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-home .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-home .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-home .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-home .hero-visual {
    position: relative;
    width: 100%;
    /* clamp: min on small screens, scale by viewport in middle, cap at a max */
    max-width: clamp(420px, 46vw, 880px);
    margin-left: auto;
    /* pushes image to the right in 2-col layouts */ }
  .usx-home .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-home .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-home .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-home .hero-content h1 {
      font-size: 2.4rem; }
    .usx-home .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-home .gx-values {
    position: relative;
    background: radial-gradient(circle at 30% 40%, #091318 0%, #060b0e 100%);
    padding: 120px 0;
    overflow: hidden; }
  .usx-home .gx-values::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(46, 185, 156, 0.12) 0%, rgba(106, 163, 255, 0.1) 100%);
    z-index: 0; }
  .usx-home .values-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 1; }
  .usx-home .values-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 12px; }
  .usx-home .values-header p {
    font-size: 1.5rem;
    color: var(--sx-text-dim); }
  .usx-home .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 1; }
  .usx-home .value-card {
    background: linear-gradient(180deg, rgba(15, 25, 30, 0.95) 0%, rgba(8, 12, 16, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sx-radius-lg);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .usx-home .value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    border-color: var(--sx-accent);
    background: linear-gradient(180deg, rgba(20, 35, 40, 0.95) 0%, rgba(10, 20, 25, 0.95) 100%); }
  .usx-home .value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(68, 215, 182, 0.4); }
  .usx-home .value-icon img {
    width: 32px;
    height: 32px; }
  .usx-home .value-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px; }
  .usx-home .value-card p {
    font-size: 1.2rem;
    color: var(--sx-text-dim);
    line-height: 1.6; }
  @media (max-width: 768px) {
    .usx-home .gx-values {
      padding: 80px 0; }
    .usx-home .values-header h2 {
      font-size: 2rem; } }
  .usx-home .why-choose {
    position: relative;
    padding: 100px 0;
    background: radial-gradient(1000px 420px at 80% -10%, rgba(106, 163, 255, 0.1), transparent 60%), radial-gradient(900px 380px at 10% 0%, rgba(68, 215, 182, 0.12), transparent 60%), linear-gradient(180deg, #0a0f14 0%, #0b1117 100%);
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border);
    overflow: clip; }
  .usx-home .why-choose::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 28px);
    mask-image: radial-gradient(70% 70% at 50% 35%, black 60%, transparent 100%); }
  .usx-home .why-head {
    text-align: center;
    margin: 0 0 28px; }
  .usx-home .why-head h2 {
    margin: 0 0 8px;
    font-size: 3rem;
    color: #fff;
    font-weight: 800; }
  .usx-home .why-kicker {
    margin: 0 auto;
    max-width: 820px;
    color: var(--sx-text-dim);
    font-size: 2.5rem; }
  .usx-home .why-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sx-gap-lg);
    margin-top: 28px; }
  @media (max-width: 1200px) {
    .usx-home .why-cards {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) {
    .usx-home .why-cards {
      grid-template-columns: 1fr; } }
  .usx-home .why-card {
    position: relative;
    background: linear-gradient(180deg, var(--sx-panel), var(--sx-panel-2));
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-lg);
    padding: 24px;
    box-shadow: var(--sx-shadow-1);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-home .why-card::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
    opacity: 0.8; }
  .usx-home .why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #121920, #0f151b); }
  .usx-home .why-card .stat {
    margin: 4px 0 6px;
    font-size: clamp(28px, 5.4vw, 44px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; }
  .usx-home .why-card h3 {
    margin: 0 0 6px;
    color: #f2fbf8;
    font-size: 1.05rem;
    font-weight: 700; }
  .usx-home .why-card .desc {
    margin: 0;
    color: var(--sx-text-dim);
    line-height: 1.55;
    font-size: 0.98rem; }
  .usx-home .why-cta {
    text-align: center;
    margin-top: 32px; }
  .usx-home .btn.btn--primary {
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
    color: #071115;
    font-weight: 800;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: var(--sx-shadow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease; }
  .usx-home .btn.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    filter: saturate(1.05); }
  .usx-home .trusted-section {
    position: relative;
    background: radial-gradient(circle at 30% 40%, #091318 0%, #060b0e 100%);
    padding: 120px 0;
    overflow: hidden; }
  .usx-home .trusted-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(46, 185, 156, 0.12) 0%, rgba(106, 163, 255, 0.1) 100%); }
  .usx-home .trusted-section::after {
    content: none !important; }
  .usx-home .trusted-container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-home .trusted-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
    /* change to center if preferred */
    margin-bottom: 24px; }
  .usx-home .trusted-head {
    text-align: left;
    max-width: 640px; }
  .usx-home .trusted-head h2 {
    margin: 0 0 16px;
    line-height: 1.12;
    letter-spacing: 0.2px;
    font-size: 3.5rem;
    color: #fff;
    font-weight: 800; }
  .usx-home .trusted-subheading {
    margin: 0 0 26px;
    max-width: 56ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 2.5rem;
    line-height: 1.6; }
  .usx-home .trusted-head .btn.btn--primary {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    font-weight: 800;
    padding: 15px 24px;
    border-radius: 999px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease; }
  .usx-home .trusted-head .btn.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    filter: saturate(1.05); }
  .usx-home .testimonial-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px; }
  .usx-home .testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    padding: 30px 24px 24px 30px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-home .testimonial-card::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-home .testimonial-card::after {
    content: "“";
    position: absolute;
    z-index: 0;
    top: -8px;
    right: 14px;
    font-size: 60px;
    line-height: 1;
    font-weight: 900;
    color: rgba(68, 215, 182, 0.22);
    pointer-events: none; }
  .usx-home .testimonial-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-home .testimonial-text {
    position: relative;
    z-index: 1;
    color: #eaf7f3;
    margin: 8px 0 14px; }
  .usx-home .testimonial-author {
    color: #9ec8bd;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0; }
  .usx-home .logo-marquee {
    margin-top: 18px;
    background: var(--sx-panel, #11171d);
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--sx-radius, 16px);
    padding: 12px 0;
    overflow: hidden;
    position: relative;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%); }
  .usx-home .logo-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: marquee 42s linear infinite; }
  .usx-home .logo-marquee img {
    height: 38px;
    filter: grayscale(100%) brightness(1.12) contrast(0.9);
    opacity: 0.88;
    transition: filter 0.2s, opacity 0.2s, transform 0.2s; }
  .usx-home .logo-marquee img:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-2px); }
  .usx-home .logo-marquee:hover .logo-track {
    animation-play-state: paused; }

@keyframes marquee {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-50%); } }
  @media (max-width: 1024px) {
    .usx-home .trusted-layout {
      grid-template-columns: 1fr;
      gap: 22px; }
    .usx-home .trusted-head {
      max-width: none; } }
  .usx-home .how-it-works {
    background: linear-gradient(180deg, #0a0f14 0%, #0b1117 100%);
    padding: 64px 0;
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border); }
  .usx-home .how-it-works h2 {
    text-align: center;
    margin: 0 0 30px;
    font-size: 3rem; }
  .usx-home .how-it-works h3 {
    font-size: 2rem;
    font-weight: bold; }
  .usx-home .how-it-works p {
    font-size: 1.5rem; }
  .usx-home .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sx-gap-lg); }
  .usx-home .step-card {
    background: var(--sx-panel);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius);
    padding: 22px;
    box-shadow: var(--sx-shadow-1);
    position: relative; }
  .usx-home .step-number {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--sx-accent);
    color: #071115;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sx-shadow-1); }
  @media (max-width: 980px) {
    .usx-home .steps {
      grid-template-columns: 1fr; } }
  .usx-home .platform-collage {
    padding: 68px 0;
    background: radial-gradient(1000px 420px at 20% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(900px 380px at 80% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0b1117 0%, #0b0f13 100%);
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border); }
  .usx-home .platform-collage h2 {
    text-align: center;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(28px, 4.6vw, 40px); }
  .usx-home .platform-collage .collage-sub {
    text-align: center;
    color: var(--sx-text-dim);
    max-width: 820px;
    margin: 0 auto 28px; }
  .usx-home .collage-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 22px;
    align-items: end; }
  .usx-home .collage-card {
    background: linear-gradient(180deg, var(--sx-panel), var(--sx-panel-2));
    border: 1px solid var(--sx-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    transform-origin: center bottom;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
 border-color 0.18s ease; }
  .usx-home .collage-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-bottom: 1px solid var(--sx-border); }
  .usx-home .collage-card figcaption {
    color: #cfe5e0;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 10px 14px; }
  .usx-home .collage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); }
  .usx-home .collage-card.main {
    transform: translateY(-8px); }
  .usx-home .tilt-left {
    transform: rotate(-2.2deg); }
  .usx-home .tilt-right {
    transform: rotate(2.2deg); }
  @media (max-width: 1024px) {
    .usx-home .collage-wrap {
      grid-template-columns: 1fr; }
    .usx-home .collage-card,
    .usx-home .collage-card.main,
    .usx-home .tilt-left,
    .usx-home .tilt-right {
      transform: none; } }
  .usx-home .why-guardient {
    position: relative;
    padding: 96px 0;
    /* New background: layered mint→blue “light wells”, no grid */
    background: radial-gradient(900px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(1000px 460px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0a0f14 0%, #090e13 50%, #070c11 100%);
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border);
    overflow: hidden;
    isolation: isolate;
    /* ensure overlays never bleed to neighbors */ }
  .usx-home .why-guardient .why-guardient-container {
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-home .why-guardient h2 {
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 10px; }
  .usx-home .why-guardient .subheading {
    color: #cfe5e0;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
    font-size: 1.08rem;
    line-height: 1.6;
    opacity: 0.95; }
  .usx-home .guardient-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px; }
  @media (max-width: 1080px) {
    .usx-home .guardient-pillars {
      grid-template-columns: 1fr; } }
  .usx-home .pillar-card {
    position: relative;
    background: linear-gradient(180deg, #121920, #0f151b);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 28px 24px 24px;
    box-shadow: var(--sx-shadow-1);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-home .pillar-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    /* inside the border */
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    pointer-events: none; }
  .usx-home .pillar-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: radial-gradient(260px 120px at 10% 0%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(260px 120px at 100% 100%, rgba(106, 163, 255, 0.1), transparent 60%);
    opacity: 0.7;
    filter: blur(14px);
    z-index: -1; }
  .usx-home .pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #16222a, #10171e); }
  .usx-home .pillar-card h3 {
    color: #f3fbf8;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.25;
    margin: 0 0 10px; }
  .usx-home .pillar-card > p {
    color: #d8eee9;
    max-width: 62ch;
    line-height: 1.65;
    margin: 0 0 14px; }
  .usx-home .pillar-card ul {
    margin: 12px 0 0;
    padding: 0; }
  .usx-home .pillar-card li {
    list-style: none;
    position: relative;
    padding-left: 26px;
    margin: 8px 0;
    color: var(--sx-text-dim); }
  .usx-home .pillar-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--sx-accent), var(--sx-accent-2));
    box-shadow: 0 0 10px rgba(68, 215, 182, 0.28); }
  .usx-home .guardient-pillars .pillar-card:nth-child(2)::after {
    background: radial-gradient(260px 120px at 90% 0%, rgba(106, 163, 255, 0.12), transparent 60%), radial-gradient(260px 120px at 0% 100%, rgba(68, 215, 182, 0.1), transparent 60%); }
  .usx-home .guardient-pillars .pillar-card:nth-child(3)::after {
    background: radial-gradient(260px 120px at 20% 100%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(260px 120px at 100% 10%, rgba(106, 163, 255, 0.1), transparent 60%); }

.usx-company {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================================================
   STORY — “Why We Built USX Cyber” (Bolder / Elevated)
   Drop-in replacement for .story-premium section only
========================================================= */
  /* soft grid texture */
  /* header */
  /* grid */
  /* card */
  /* glowing gradient edge (subtle) */
  /* top accent bar */
  /* hover */
  /* icon badge (uses your emoji if present) */
  /* titles + copy */
  /* optional entrance motion for cards */
  /* =========================================================
   TEAM — “Experience That Spans Every Industry”
   Drop-in styling for .meet-experts section
========================================================= */
  /* Highlight list */
  /* Closing paragraph */
  /* Image panel */
  /* Subtle motion */
  /* =========================================================
   CORE VALUES — “What Drives Us”
   Drop-in styling for .core-values-premium section only
========================================================= */
  /* faint grid texture for depth (no diagonals) */
  /* Header */
  /* Grid */
  /* Card */
  /* subtle glow halo */
  /* slim accent bar at the top */
  /* Icon */
  /* Text */
  /* Optional motion preference */
  /* =========================================================
   PROMISE — “Our Promise” (bold, modern, on-brand)
   Drop-in styling for .promise-section only
========================================================= */
  /* soft grid texture */
  /* layout */
  /* text column */
  /* statement blockquote */
  /* gradient headline tag */
  /* visual panel */
  /* subtle motion */ }
  .usx-company .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-company .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-company .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-company .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-company .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-company .hero .btn,
  .usx-company .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-company .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-company .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-company .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-company .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-company .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-company .hero-visual {
    position: relative;
    width: 100%;
    max-width: clamp(660px, 40vw, 680px);
    margin-left: auto; }
  .usx-company .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-company .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-company .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-company .hero-content h1 {
      font-size: 2.4rem; }
    .usx-company .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-company .story-premium {
    position: relative;
    padding: 104px 0 92px;
    background: radial-gradient(1100px 380px at 50% -12%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(1000px 360px at 50% 112%, rgba(68, 215, 182, 0.1), transparent 72%), linear-gradient(180deg, var(--co-bg-1, #0b131a), var(--co-bg-2, #0e1821));
    border-top: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    border-bottom: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    isolation: isolate; }
  .usx-company .story-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 0.06; }
  .usx-company .story-premium .story-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 0 24px; }
  .usx-company .story-premium .story-header h2 {
    margin: 0 0 8px;
    font-weight: 1000;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.12;
    color: #fff;
    letter-spacing: 0.3px; }
  .usx-company .story-premium .story-header p {
    margin: 0 auto;
    max-width: 72ch;
    color: var(--co-dim, #cfe5e0);
    font-size: clamp(1.02rem, 1.7vw, 1.18rem);
    line-height: 1.75;
    opacity: 0.95; }
  .usx-company .story-premium .story-milestones {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 980px) {
    .usx-company .story-premium .story-milestones {
      grid-template-columns: 1fr; } }
  .usx-company .story-premium .story-item {
    position: relative;
    border-radius: 22px;
    padding: 22px 20px 18px 22px;
    background: linear-gradient(180deg, var(--co-panel-1, #11171d), var(--co-panel-2, #0f141a));
    color: var(--co-dim, #cfe5e0);
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease;
    overflow: hidden; }
  .usx-company .story-premium .story-item::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 22px;
    z-index: 0;
    background: conic-gradient(from 160deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff), transparent 45%);
    filter: blur(18px);
    opacity: 0.18;
    pointer-events: none; }
  .usx-company .story-premium .story-item::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    z-index: 1;
    background: linear-gradient(90deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-company .story-premium .story-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
    border-color: rgba(68, 215, 182, 0.32); }
  .usx-company .story-premium .story-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    font-size: 22px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.35); }
  .usx-company .story-premium .story-item h3 {
    position: relative;
    z-index: 1;
    margin: 6px 0 6px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.2px; }
  .usx-company .story-premium .story-item p {
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1.7;
    font-size: 1.05rem; }
  @media (prefers-reduced-motion: no-preference) {
    .usx-company .story-premium .story-item {
      transform: translateY(2px); }
    .usx-company .story-premium .story-item:nth-child(1) {
      animation: sp-pop 0.5s 0.05s both ease-out; }
    .usx-company .story-premium .story-item:nth-child(2) {
      animation: sp-pop 0.5s 0.12s both ease-out; }
    .usx-company .story-premium .story-item:nth-child(3) {
      animation: sp-pop 0.5s 0.19s both ease-out; }
    @keyframes sp-pop {
      from {
        opacity: 0;
        transform: translateY(10px); }
      to {
        opacity: 1;
        transform: translateY(0); } } }
  .usx-company .meet-experts {
    position: relative;
    padding: 96px 0 88px;
    background: radial-gradient(1000px 360px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--co-bg-1, #0b131a), var(--co-bg-2, #0e1821));
    border-top: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    border-bottom: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    isolation: isolate; }
  .usx-company .meet-experts::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 0.05; }
  .usx-company .meet-experts .experts-container {
    position: relative;
    z-index: 1;
    max-width: var(--co-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 26px;
    grid-template-columns: 1.05fr 0.95fr; }
  @media (max-width: 980px) {
    .usx-company .meet-experts .experts-container {
      grid-template-columns: 1fr; } }
  .usx-company .meet-experts h2 {
    margin: 0 0 10px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.15;
    letter-spacing: 0.2px; }
  .usx-company .experts-content {
    color: var(--co-dim, #cfe5e0); }
  .usx-company .experts-lead {
    margin: 0 0 12px;
    max-width: 70ch;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.75;
    opacity: 0.95; }
  .usx-company .expert-highlights {
    display: grid;
    gap: 10px;
    margin: 10px 0 14px; }
  .usx-company .highlight-line {
    position: relative;
    padding: 12px 14px 12px 46px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--co-panel-1, #11171d), var(--co-panel-2, #0f141a));
    border: 1px solid var(--co-border, rgba(255, 255, 255, 0.12));
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42));
    color: var(--co-dim, #cfe5e0);
    line-height: 1.6; }
  .usx-company .highlight-line::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
  .usx-company .highlight-line::after {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #062018;
    font-weight: 900;
    font-size: 0.9rem; }
  .usx-company .experts-close {
    margin: 2px 0 0;
    max-width: 70ch;
    line-height: 1.75; }
  .usx-company .experts-image {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--co-border, rgba(255, 255, 255, 0.12));
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42));
    background: linear-gradient(180deg, var(--co-panel-1, #11171d), var(--co-panel-2, #0f141a)); }
  .usx-company .experts-image::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    z-index: 0;
    background: conic-gradient(from 160deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff), transparent 45%);
    filter: blur(18px);
    opacity: 0.18;
    pointer-events: none; }
  .usx-company .experts-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 18px; }
  @media (prefers-reduced-motion: no-preference) {
    .usx-company .highlight-line {
      transform: translateY(1px);
      transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease; }
    .usx-company .highlight-line:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
      border-color: rgba(68, 215, 182, 0.3); } }
  .usx-company .core-values-premium {
    position: relative;
    padding: 100px 0 90px;
    background: radial-gradient(1100px 380px at 50% -12%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(1000px 360px at 50% 112%, rgba(68, 215, 182, 0.1), transparent 72%), linear-gradient(180deg, var(--co-bg-1, #0b131a), var(--co-bg-2, #0e1821));
    border-top: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    border-bottom: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    isolation: isolate; }
  .usx-company .core-values-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 0.05; }
  .usx-company .core-values-premium .values-wrapper {
    position: relative;
    z-index: 1;
    max-width: var(--co-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; }
  .usx-company .core-values-premium h2 {
    margin: 0 0 10px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(30px, 4.8vw, 44px);
    line-height: 1.15;
    letter-spacing: 0.2px; }
  .usx-company .core-values-premium .values-subhead {
    margin: 0 auto 20px;
    max-width: 72ch;
    color: var(--co-dim, #cfe5e0);
    font-size: clamp(1rem, 1.65vw, 1.14rem);
    line-height: 1.75;
    opacity: 0.95; }
  .usx-company .core-values-premium .values-columns {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 860px) {
    .usx-company .core-values-premium .values-columns {
      grid-template-columns: 1fr; } }
  .usx-company .core-values-premium .value-item {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: start;
    text-align: left;
    background: linear-gradient(180deg, var(--co-panel-1, #11171d), var(--co-panel-2, #0f141a));
    border: 1px solid var(--co-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    padding: 18px 18px 16px;
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42));
    color: var(--co-dim, #cfe5e0);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease; }
  .usx-company .core-values-premium .value-item::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    z-index: 0;
    background: conic-gradient(from 160deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff), transparent 45%);
    filter: blur(18px);
    opacity: 0.16;
    pointer-events: none; }
  .usx-company .core-values-premium .value-item::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    z-index: 1;
    background: linear-gradient(90deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-company .core-values-premium .value-item:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); }
  .usx-company .core-values-premium .value-item img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
  .usx-company .core-values-premium .value-item h3 {
    margin: 6px 0 6px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1; }
  .usx-company .core-values-premium .value-item p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.04rem;
    position: relative;
    z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .usx-company .core-values-premium .value-item {
      transform: translateY(1px); } }
  .usx-company .promise-section {
    position: relative;
    padding: 104px 0 96px;
    background: radial-gradient(1100px 360px at 50% -12%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(980px 340px at 50% 112%, rgba(68, 215, 182, 0.1), transparent 72%), linear-gradient(180deg, var(--co-bg-1, #0b131a), var(--co-bg-2, #0e1821));
    border-top: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    border-bottom: 1px solid var(--co-border, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    isolation: isolate; }
  .usx-company .promise-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 0.05; }
  .usx-company .promise-section .promise-container {
    position: relative;
    z-index: 1;
    max-width: var(--co-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 24px;
    grid-template-columns: 1.1fr 0.9fr; }
  @media (max-width: 980px) {
    .usx-company .promise-section .promise-container {
      grid-template-columns: 1fr; } }
  .usx-company .promise-section .promise-text {
    color: var(--co-dim, #cfe5e0); }
  .usx-company .promise-section .promise-text h2 {
    margin: 0 0 10px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(30px, 4.8vw, 44px);
    line-height: 1.15;
    letter-spacing: 0.2px; }
  .usx-company .promise-section .promise-text p {
    margin: 0 0 12px;
    max-width: 70ch;
    line-height: 1.75;
    font-size: clamp(1rem, 1.65vw, 1.14rem);
    opacity: 0.95; }
  .usx-company .promise-section blockquote {
    position: relative;
    margin: 8px 0 14px;
    padding: 14px 16px 14px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eaf7f3;
    font-weight: 850;
    line-height: 1.7;
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42)); }
  .usx-company .promise-section blockquote::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-company .promise-section .promise-final {
    margin: 0;
    font-weight: 1000;
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.2;
    background: linear-gradient(90deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .usx-company .promise-section .promise-visual {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--co-border, rgba(255, 255, 255, 0.12));
    background: linear-gradient(180deg, var(--co-panel-1, #11171d), var(--co-panel-2, #0f141a));
    box-shadow: var(--co-shadow-1, 0 10px 28px rgba(0, 0, 0, 0.42)); }
  .usx-company .promise-section .promise-visual::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    z-index: 0;
    background: conic-gradient(from 160deg, var(--co-accent-1, #44d7b6), var(--co-accent-2, #6aa3ff), transparent 45%);
    filter: blur(18px);
    opacity: 0.18;
    pointer-events: none; }
  .usx-company .promise-section .promise-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 18px; }
  @media (prefers-reduced-motion: no-preference) {
    .usx-company .promise-section blockquote {
      transform: translateY(1px);
      transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease; }
    .usx-company .promise-section blockquote:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
      border-color: rgba(68, 215, 182, 0.3); } }

.usx-compliance {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================================================
   THEME TOKENS (used by all sections below)
========================================================= */
  /* Shared container */
  /* Shared section heading + subhead */
  /* =========================================
   COMPLIANCE PAINPOINTS — Guardient theme
   Drop-in replacement for .compliance-painpoints
========================================= */
  /* Grid */
  /* Cards (match Guardient panels) */
  /* Thin accent bar on top for brand continuity */
  /* Hover lift (subtle) */
  /* Titles & copy */
  /* =========================================================
   COMPLIANCE SECTION (4 tiles: Guardient, X-Matters, Experts, Reporting)
========================================================= */
  /* =========================================================
   COVERAGE SECTION — 4 big, centered, uniform tiles (REPLACE)
========================================================= */
  /* 4 large tiles on desktop; responsive down */
  /* Tiles: enforce uniform background on ALL tiles */
  /* Header row: name + big pill */
  /* Status pill (uniform) */
  /* Progress bar: taller + glow */
  /* Detail line */
  /* =========================================================
   COMPLIANCE JOURNEY (timeline)
========================================================= */
  /* =========================================================
   X-MATTERS ACCESS (3 cards)
========================================================= */
  /* =========================================================
   LINK & BUTTON PRIMITIVES (if needed in these sections)
========================================================= */
  /* =========================
   Learn band (Vanta-style cards, Guardient theme)
========================= */
  /* Headline like the example: large, friendly */
  /* Three equal cards */
  /* Card */
  /* Top media (clickable) */
  /* Title + blurb */
  /* Read more link with arrow */
  /* Optional: make each card’s image glow slightly on hover */ }
  .usx-compliance .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-compliance .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-compliance .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-compliance .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-compliance .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-compliance .hero .btn,
  .usx-compliance .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-compliance .container,
  .usx-compliance .coverage-container,
  .usx-compliance .lifecycle-container {
    max-width: var(--gx-maxw);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-compliance h2.section-title,
  .usx-compliance .compliance-painpoints h2,
  .usx-compliance .compliance-section .compliance-title,
  .usx-compliance .coverage-section .coverage-header h2,
  .usx-compliance .lifecycle-journey .lifecycle-title,
  .usx-compliance .xmatters-access h2 {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
    color: var(--gx-ink);
    letter-spacing: 0.2px; }
  .usx-compliance .subheading,
  .usx-compliance .compliance-painpoints .subheading,
  .usx-compliance .lifecycle-journey .lifecycle-subhead,
  .usx-compliance .xmatters-access .subheading,
  .usx-compliance .coverage-section .coverage-header p {
    margin: 0 0 18px;
    color: var(--gx-text);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.7;
    max-width: 68ch; }
  .usx-compliance .compliance-painpoints {
    padding: 88px 0 78px;
    background: radial-gradient(900px 320px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--sx-bg, #0b0f13), #0a0f14);
    border-top: 1px solid var(--sx-border, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--sx-border, rgba(255, 255, 255, 0.08));
    position: relative;
    overflow: hidden;
    isolation: isolate; }
  .usx-compliance .compliance-painpoints .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-compliance .compliance-painpoints h2 {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.15;
    color: #fff;
    letter-spacing: 0.2px; }
  .usx-compliance .compliance-painpoints .subheading {
    margin: 0 0 22px;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65;
    max-width: 68ch; }
  .usx-compliance .painpoint-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 980px) {
    .usx-compliance .painpoint-grid {
      grid-template-columns: 1fr; } }
  .usx-compliance .painpoint-card {
    position: relative;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 22px 20px 18px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    color: var(--sx-text-dim, #cfe5e0);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-compliance .painpoint-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-compliance .painpoint-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #132029, #10171e); }
  .usx-compliance .painpoint-card h3 {
    margin: 8px 0 6px;
    /* gives room under the accent bar */
    font-weight: 850;
    font-size: clamp(18px, 2.1vw, 20px);
    color: #f3fbf8;
    letter-spacing: 0.2px; }
  .usx-compliance .painpoint-card p {
    margin: 0;
    line-height: 1.65;
    font-size: 1.02rem; }
  .usx-compliance .compliance-section {
    padding: 80px 0 70px;
    background: radial-gradient(900px 340px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, var(--gx-bg-1), var(--gx-bg-2)); }
  .usx-compliance .compliance-section .compliance-title {
    margin-bottom: 16px; }
  .usx-compliance .compliance-section .compliance-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1180px) {
    .usx-compliance .compliance-section .compliance-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .usx-compliance .compliance-section .compliance-grid {
      grid-template-columns: 1fr; } }
  .usx-compliance .compliance-section .compliance-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: start;
    background: linear-gradient(180deg, var(--gx-panel-1), var(--gx-panel-2));
    border: 1px solid var(--gx-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--gx-shadow-1);
    color: var(--gx-text); }
  .usx-compliance .compliance-section .compliance-card img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1); }
  .usx-compliance .compliance-section .compliance-content h3 {
    margin: 2px 0 6px;
    font-weight: 900;
    color: var(--gx-ink);
    font-size: 1rem;
    letter-spacing: 0.3px; }
  .usx-compliance .compliance-section .compliance-content p {
    margin: 0;
    line-height: 1.65; }
  .usx-compliance .coverage-section {
    padding: 100px 0 88px;
    background: radial-gradient(1000px 360px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--gx-bg-1), var(--gx-bg-2)); }
  .usx-compliance .coverage-container {
    max-width: var(--gx-maxw);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-compliance .coverage-header h2 {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: clamp(30px, 4.6vw, 44px);
    line-height: 1.15;
    color: var(--gx-ink);
    letter-spacing: 0.2px; }
  .usx-compliance .coverage-header p {
    margin: 0 auto;
    max-width: 70ch;
    color: var(--gx-text);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.7; }
  .usx-compliance .coverage-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(260px, 1fr)); }
  @media (max-width: 1180px) {
    .usx-compliance .coverage-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .usx-compliance .coverage-grid {
      grid-template-columns: 1fr; } }
  .usx-compliance .coverage-section .coverage-grid .coverage-tile {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--gx-panel-1), var(--gx-panel-2));
    border: 1px solid var(--gx-border);
    border-radius: 22px;
    padding: 22px 20px 18px;
    box-shadow: var(--gx-shadow-1);
    color: var(--gx-text);
    min-height: 180px;
    transition: transform 0.16s ease, box-shadow 0.18s ease,
 border-color 0.18s ease; }
  .usx-compliance .coverage-section .coverage-grid .coverage-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.28);
    box-shadow: var(--gx-shadow-2); }
  .usx-compliance .coverage-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px; }
  .usx-compliance .coverage-framework-name {
    font-weight: 900;
    color: var(--gx-ink);
    letter-spacing: 0.2px;
    font-size: 1.15rem; }
  .usx-compliance .coverage-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14); }
  .usx-compliance .coverage-status-badge.in-progress {
    background: rgba(255, 255, 255, 0.08);
    color: #eaf7f3; }
  .usx-compliance .coverage-progress-bar {
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-bottom: 8px; }
  .usx-compliance .coverage-progress {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gx-accent-1), var(--gx-accent-2));
    box-shadow: 0 0 14px rgba(106, 163, 255, 0.35); }
  .usx-compliance .coverage-framework-detail {
    margin: 0;
    font-size: 1.02rem;
    color: var(--gx-dim); }
  .usx-compliance .lifecycle-journey {
    padding: 80px 0 70px;
    background: radial-gradient(900px 340px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, var(--gx-bg-1), var(--gx-bg-2)); }
  .usx-compliance .lifecycle-flow {
    position: relative;
    margin-top: 10px;
    display: grid;
    gap: 16px; }
  .usx-compliance .lifecycle-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    background: linear-gradient(180deg, var(--gx-panel-1), var(--gx-panel-2));
    border: 1px solid var(--gx-border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--gx-shadow-1);
    color: var(--gx-text); }
  .usx-compliance .lifecycle-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #062018;
    background: linear-gradient(135deg, var(--gx-accent-1), var(--gx-accent-2));
    border: 1px solid rgba(255, 255, 255, 0.2); }
  .usx-compliance .lifecycle-content h3 {
    margin: 2px 0 6px;
    font-weight: 900;
    color: var(--gx-ink);
    font-size: 1rem;
    letter-spacing: 0.2px; }
  .usx-compliance .lifecycle-content p {
    margin: 0;
    line-height: 1.65; }
  .usx-compliance .xmatters-access {
    padding: 80px 0 70px;
    background: radial-gradient(900px 320px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--gx-bg-1), var(--gx-bg-2)); }
  .usx-compliance .xmatters-access .xmatters-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 980px) {
    .usx-compliance .xmatters-access .xmatters-grid {
      grid-template-columns: 1fr; } }
  .usx-compliance .xmatters-access .xmatters-card {
    background: linear-gradient(180deg, var(--gx-panel-1), var(--gx-panel-2));
    border: 1px solid var(--gx-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--gx-shadow-1);
    color: var(--gx-text);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-compliance .xmatters-access .xmatters-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.28);
    box-shadow: var(--gx-shadow-2); }
  .usx-compliance .xmatters-access .xmatters-card h3 {
    margin: 2px 0 6px;
    font-weight: 900;
    color: var(--gx-ink);
    font-size: 1rem;
    letter-spacing: 0.2px; }
  .usx-compliance .xmatters-access .xmatters-card p {
    margin: 0;
    line-height: 1.65; }
  .usx-compliance a.btn.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    color: #062018;
    background: linear-gradient(90deg, var(--gx-accent-1), var(--gx-accent-2));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .usx-compliance a.btn.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
  .usx-compliance .learn-band {
    --accent1: #44d7b6;
    /* teal */
    --accent2: #6aa3ff;
    /* blue */
    --ink: #ffffff;
    --muted: #cfe5e0;
    --panel: #0f141a;
    --bg1: #0b131a;
    --bg2: #0d1821;
    --border: rgba(255, 255, 255, 0.12);
    padding: 64px 0 72px;
    background: radial-gradient(900px 320px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--bg1), var(--bg2)); }
  .usx-compliance .learn-container {
    max-width: 1120px;
    /* narrower so it doesn’t dominate */
    margin: 0 auto;
    padding: 0 20px; }
  .usx-compliance #learn-title {
    margin: 0 0 22px;
    text-align: center;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15; }
  .usx-compliance .learn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 980px) {
    .usx-compliance .learn-grid {
      grid-template-columns: 1fr; } }
  .usx-compliance .learn-card {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .usx-compliance .learn-card .card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* consistent crop like the example */
    border-radius: 18px;
    background: radial-gradient(120% 70% at 50% 10%, rgba(255, 255, 255, 0.08), transparent 55%), var(--img) center/cover no-repeat;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .usx-compliance .learn-card .card-media:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
  .usx-compliance .card-title {
    margin: 2px 0 2px;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.2px; }
  .usx-compliance .card-blurb {
    margin: 0 0 6px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-compliance .card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative; }
  .usx-compliance .card-link .arrow {
    width: 18px;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    transition: transform 0.18s ease; }
  .usx-compliance .card-link:hover .arrow {
    transform: translateX(2px); }
  .usx-compliance .learn-card:hover .card-media {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); }

.usx-learnmore {
  /* === SHARED SECTION STYLES === */
  /* === SHARED SECTION STYLES === */
  /* === HERO SECTION === */
  /* === DEMO SECTION REWORK === */
  /* === FORM STYLING === */
  /* === RESPONSIVE TWEAKS === */ }
  .usx-learnmore section {
    padding: 100px 20px; }
  .usx-learnmore h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #1e1e1e; }
  .usx-learnmore .subheading {
    text-align: center;
    font-size: 1.3rem;
    color: #555;
    margin-bottom: 40px; }
  .usx-learnmore section {
    padding: 20px 20px; }
  .usx-learnmore h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #1e1e1e; }
  .usx-learnmore .subheading {
    text-align: center;
    font-size: 1.3rem;
    color: #555;
    margin-bottom: 40px; }
  .usx-learnmore .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 60px;
    padding: 100px 20px;
    background: linear-gradient(to bottom right, #ffffff 70%, #7e6ee1 100%);
    text-align: left;
    flex-wrap: wrap; }
  .usx-learnmore .hero-content {
    flex: 1;
    min-width: 300px;
    max-width: 600px; }
  .usx-learnmore .hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem; }
  .usx-learnmore .hero-content p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #444; }
  .usx-learnmore .hero-graphic img {
    width: 100%;
    height: auto;
    display: block; }
  @media (max-width: 768px) {
    .usx-learnmore .hero {
      flex-direction: column;
      text-align: center; }
    .usx-learnmore .hero-content {
      max-width: 100%;
      text-align: center; }
    .usx-learnmore .hero img {
      max-width: 100%;
      margin-bottom: 30px; } }
  .usx-learnmore .get-demo {
    background-color: #f8f9fb;
    padding: 100px 30px; }
  .usx-learnmore .demo-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap; }
  .usx-learnmore .demo-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 20px; }
  .usx-learnmore .demo-text h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 25px; }
  .usx-learnmore .demo-text p {
    font-size: 1.15rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.7; }
  .usx-learnmore .demo-text ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .usx-learnmore .demo-text li {
    margin-bottom: 14px;
    padding-left: 28px;
    position: relative;
    font-size: 1.1rem;
    color: #1e1e1e;
    font-weight: 500; }
  .usx-learnmore .demo-text li::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg fill="none" stroke="%232563eb" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5 13l4 4L19 7"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 2px; }
  .usx-learnmore .demo-form {
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
  .usx-learnmore .demo-form h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1e1e1e;
    text-align: left; }
  .usx-learnmore .demo-form label {
    font-weight: 500;
    display: block;
    margin: 10px 0 5px;
    color: #333; }
  .usx-learnmore .demo-form input[type="text"],
  .usx-learnmore .demo-form input[type="email"],
  .usx-learnmore .demo-form input[type="phone"] {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem; }
  .usx-learnmore .demo-form button {
    background-color: #000;
    color: #fff;
    padding: 14px;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease; }
  .usx-learnmore .demo-form button:hover {
    background-color: #222; }
  @media (max-width: 960px) {
    .usx-learnmore .demo-container {
      flex-direction: column;
      align-items: stretch; }
    .usx-learnmore .demo-text,
    .usx-learnmore .demo-form {
      max-width: 100%; }
    .usx-learnmore .demo-text h2,
    .usx-learnmore .demo-form h3 {
      text-align: center; } }

.about-wrap {
  /* Our Story Section Styles */
  /* Meet the Team Section Styles */
  /* Our Core Values Section */
  /* Meet the Team Section Styles */
  /* Promise */
  /* PROMISE SECTION - LIGHT, MODERN TWO-COLUMN LAYOUT */
  /* A subtle highlight for key statements */
  /* Emphasized final line */
  /* Image Column */
  /* Responsive Tweaks */ }
  .about-wrap .our-story {
    padding: 80px 20px;
    background-color: #ffffff; }
  .about-wrap .story-layout {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; }
  .about-wrap .story-image {
    flex: 1;
    text-align: center; }
  .about-wrap .story-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; }
  .about-wrap .story-content {
    flex: 1;
    min-width: 300px; }
  .about-wrap .story-content h2 {
    font-size: 2.5rem;
    color: #111;
    margin-bottom: 20px; }
  .about-wrap .story-content p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 15px; }
  .about-wrap .our-mission {
    padding: 80px 20px;
    background-color: #ffffff; }
  .about-wrap .our-mission .container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    text-align: left !important;
    /* Force left text */ }
  .about-wrap .our-mission h2 {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 30px;
    color: #111;
    text-transform: uppercase; }
  .about-wrap .our-mission p {
    font-size: 2rem;
    line-height: 1.7;
    color: #222;
    max-width: 1200px; }
  .about-wrap .meet-team {
    padding: 80px 20px;
    background-color: #ffffff;
    text-align: center; }
  .about-wrap .meet-team .container {
    max-width: 900px;
    margin: 0 auto; }
  .about-wrap .meet-team h2 {
    font-size: 2.8rem;
    color: #111;
    margin-bottom: 20px; }
  .about-wrap .team-intro {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 40px; }
  .about-wrap .team-summary p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left; }
  .about-wrap .our-values {
    padding: 80px 20px;
    background-color: #f9fafb;
    text-align: center; }
  .about-wrap .our-values h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #111; }
  .about-wrap .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; }
  .about-wrap .value-card {
    background: #fff;
    padding: 30px;
    border: 2px solid #7be44c;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .about-wrap .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15); }
  .about-wrap .value-card h3 {
    font-size: 1.4rem;
    color: #44d7b6;
    margin-bottom: 10px; }
  .about-wrap .value-card p {
    font-size: 1rem;
    color: #222; }
  .about-wrap .meet-team {
    padding: 80px 20px;
    background-color: #ffffff;
    text-align: center; }
  .about-wrap .meet-team .container {
    max-width: 1200px;
    margin: 0 auto; }
  .about-wrap .meet-team h2 {
    font-size: 2.8rem;
    color: #111;
    margin-bottom: 20px; }
  .about-wrap .team-intro {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 40px; }
  .about-wrap .meet-team-content {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left; }
  .about-wrap .team-image {
    flex: 1;
    min-width: 300px;
    text-align: center; }
  .about-wrap .team-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
  .about-wrap .team-text {
    flex: 1;
    min-width: 300px; }
  .about-wrap .team-text p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px; }
  .about-wrap .promise-section {
    background: #f9f9f9;
    /* Light, airy background */
    padding: 80px 20px; }
  .about-wrap .promise-container {
    display: flex;
    flex-wrap: wrap;
    /* Wrap on smaller screens */
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    /* Space between columns */
    max-width: 1200px;
    margin: 0 auto;
    text-align: left; }
  .about-wrap .promise-text {
    flex: 1;
    min-width: 300px; }
  .about-wrap .promise-text h2 {
    font-size: 2.4rem;
    color: #111;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px; }
  .about-wrap .promise-text p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 20px; }
  .about-wrap blockquote {
    font-style: italic;
    margin: 30px 0;
    padding-left: 20px;
    border-left: 4px solid #44d7b6;
    color: #444; }
  .about-wrap .promise-final {
    font-size: 1.6rem;
    font-weight: 700;
    color: #44d7b6;
    margin-top: 30px; }
  .about-wrap .promise-visual {
    flex: 1;
    min-width: 300px;
    text-align: center; }
  .about-wrap .promise-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); }
  @media (max-width: 900px) {
    .about-wrap .promise-container {
      flex-direction: column;
      text-align: left; }
    .about-wrap .promise-visual {
      margin-top: 20px; } }

.usx-blog {
  /* === BASE STYLES === */
  /* Blog Hero */
  /* Blog Grid */
  /* Blog Card */ }
  .usx-blog .blog-hero {
    background: linear-gradient(to bottom right, #f3f4f6, #ffffff);
    padding: 80px 20px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb; }
  .usx-blog .blog-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px; }
  .usx-blog .blog-subtitle {
    font-size: 1.2rem;
    color: #475569;
    max-width: 700px;
    margin: 0 auto; }
  .usx-blog .blog-grid {
    padding: 80px 20px;
    background-color: #ffffff; }
  .usx-blog .blog-hero,
  .usx-blog .blog-grid {
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-blog .blog-grid .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; }
  .usx-blog .blog-card {
    background-color: #f9fafb;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .usx-blog .blog-card {
    background: radial-gradient(1100px 520px at 18% -12%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1000px 520px at 84% 108%, rgba(106, 163, 255, 0.12), transparent 60%), linear-gradient(135deg, #0b141a 0%, #0c181f 52%, #0a1117 100%);
    border-bottom: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12)); }
  .usx-blog .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
  .usx-blog .blog-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px; }
  .usx-blog .blog-card-summary {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 24px; }
  .usx-blog .read-more {
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
    bottom: 1em;
    position: absolute; }
  .usx-blog .read-more:hover {
    color: #2563eb; }
  .usx-blog .blog-card-date {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500; }

.usx-rolm {
  max-width: 600px;
  margin: 1em auto;
  padding: 1em;
  border: 1px solid #eee; }
  .usx-rolm img {
    max-width: 600px; }
  .usx-rolm h2 {
    text-align: center;
    font-size: 25px; }
  .usx-rolm input {
    padding: 1em;
    border-radius: 5px;
    outline: none;
    border: 1px solid;
    width: 95%;
    margin: 0; }
  .usx-rolm label {
    font-weight: bold;
    font-size: 15px; }
  .usx-rolm input[type="submit"] {
    background: #000;
    color: #fff;
    font-weight: bold;
    width: 100%;
    margin-top: 25px;
    cursor: pointer;
    padding: 1.5em; }

.wpcf7-response-output {
  font-size: 16px;
  text-align: center;
  width: fit-content;
  margin: 0 auto !important;
  display: block; }

.wpcf7-spinner {
  margin: 5px auto !important;
  display: block; }

.usx-request-demo {
  /* === SHARED SECTION STYLES === */
  /* === SHARED SECTION STYLES === */
  /* === HERO SECTION === */
  /* === DEMO SECTION REWORK === */
  /* === FORM STYLING === */
  /* === RESPONSIVE TWEAKS === */ }
  .usx-request-demo section {
    padding: 100px 20px; }
  .usx-request-demo h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: var(--sx-text-dim, #cfe5e0); }
  .usx-request-demo .subheading {
    text-align: center;
    font-size: 1.3rem;
    color: var(--sx-text-dim, #cfe5e0);
    margin-bottom: 40px; }
  .usx-request-demo section {
    padding: 20px 20px; }
  .usx-request-demo h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: var(--sx-text-dim, #cfe5e0); }
  .usx-request-demo .subheading {
    text-align: center;
    font-size: 1.3rem;
    color: var(--sx-text-dim, #cfe5e0);
    margin-bottom: 40px; }
  .usx-request-demo .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 60px;
    padding: 100px 20px;
    background: linear-gradient(to bottom right, #ffffff 70%, #7e6ee1 100%);
    text-align: left;
    flex-wrap: wrap; }
  .usx-request-demo .hero-content {
    flex: 1;
    min-width: 300px;
    max-width: 600px; }
  .usx-request-demo .hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem; }
  .usx-request-demo .hero-content p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #444; }
  .usx-request-demo .hero-graphic img {
    width: 100%;
    height: auto;
    display: block; }
  @media (max-width: 768px) {
    .usx-request-demo .hero {
      flex-direction: column;
      text-align: center; }
    .usx-request-demo .hero-content {
      max-width: 100%;
      text-align: center; }
    .usx-request-demo .hero img {
      max-width: 100%;
      margin-bottom: 30px; } }
  .usx-request-demo .get-demo {
    background-color: #f8f9fb;
    padding: 100px 30px; }
  .usx-request-demo .demo-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap; }
  .usx-request-demo .demo-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 20px; }
  .usx-request-demo .demo-text h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--sx-text-dim, #cfe5e0);
    margin-bottom: 25px; }
  .usx-request-demo .demo-text p {
    font-size: 1.15rem;
    color: var(--sx-text-dim, #cfe5e0);
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.7; }
  .usx-request-demo .demo-text ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .usx-request-demo .demo-text li {
    margin-bottom: 14px;
    padding-left: 28px;
    position: relative;
    font-size: 1.1rem;
    color: var(--sx-text-dim, #cfe5e0);
    font-weight: 500; }
  .usx-request-demo .demo-text li::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg fill="none" stroke="%232563eb" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5 13l4 4L19 7"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 2px; }
  .usx-request-demo .demo-form form p {
    grid-template-columns: auto;
    display: flex;
    flex-flow: column; }
  .usx-request-demo .demo-form small {
    text-align: center;
    display: block; }
  .usx-request-demo .demo-form {
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
  .usx-request-demo .demo-form {
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%);
    color: var(--sx-text-dim, #cfe5e0); }
  .usx-request-demo .demo-form h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: inherit;
    text-align: left; }
  .usx-request-demo .demo-form label {
    font-weight: 500;
    display: block;
    color: inherit; }
  .usx-request-demo .demo-form input[type="text"],
  .usx-request-demo .demo-form input[type="email"],
  .usx-request-demo .demo-form input[type="phone"],
  .usx-request-demo #phone {
    width: 100%;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem; }
  .usx-request-demo .demo-form button,
  .usx-request-demo input[type="submit"] {
    background-color: #000;
    color: #fff;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease; }
  .usx-request-demo .demo-form button:hover,
  .usx-request-demo input[type="submit"] {
    background-color: #222; }
  @media (max-width: 960px) {
    .usx-request-demo .demo-container {
      flex-direction: column;
      align-items: stretch; }
    .usx-request-demo .demo-text,
    .usx-request-demo .demo-form {
      max-width: 100%; }
    .usx-request-demo .demo-text h2,
    .usx-request-demo .demo-form h3 {
      text-align: center; } }

.usx-overwatch {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* ================================
   PROBLEM → SOLUTION
   ================================ */
  /* Optional: tone down hover border to mint (not blue) */
  /* ================================
   WHAT OVERWATCH DELIVERS
   ================================ */
  /* ================================
   OUTCOME STORY
   ================================ */
  /* =========================
   OVERWATCH — Problem → Solution
   (styles the .ow-problem-solution markup)
========================= */
  /* Heading + subhead */
  /* Grid */
  /* Cards */
  /* Accent bars: Problem (amber/red), Solution (brand) */
  /* Titles in cards */
  /* Lists */
  /* Problem bullets (cross) */
  /* Solution bullets (check) */
  /* =========================
   OVERWATCH — Core Capabilities (no images)
   Styles .ow-capabilities without icon/thumbs
========================= */
  /* Grid: roomy cards for text */
  /* Cards (text-forward) */
  /* Typography */
  /* If any .feature-image nodes remain in HTML, hide them cleanly */
  /* Tighten on very small screens */
  /* =========================
   OVERWATCH — Service Tier Hint
   (styles the .ow-tiers markup)
========================= */
  /* subtle mesh texture */
  /* Grid */
  /* Cards with glowing ring + underline */
  /* soft “halo” ring behind title */
  /* mint underline under the header */
  /* Hover pop */
  /* Optional: subtle staggered glow variants for rhythm */ }
  .usx-overwatch .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-overwatch .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-overwatch .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-overwatch .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-overwatch .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-overwatch .hero .btn,
  .usx-overwatch .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-overwatch .ow-problem-solution {
    background: radial-gradient(1100px 520px at 18% -12%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1100px 520px at 82% 108%, rgba(68, 215, 182, 0.14), transparent 60%), linear-gradient(180deg, #0b141a 0%, #0c171d 46%, #0a1117 100%) !important;
    box-shadow: none; }
  .usx-overwatch .ow-problem-solution .ps-card:hover {
    border-color: rgba(68, 215, 182, 0.35) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.46); }
  .usx-overwatch .ow-problem-solution h2 {
    text-align: center;
    margin-bottom: 12px;
    font-size: clamp(28px, 4vw, 38px); }
  .usx-overwatch .ow-problem-solution .subheading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 28px auto; }
  .usx-overwatch .ps-grid {
    display: grid;
    grid-template-columns: repeat(2, var(--sx-grid-col));
    gap: var(--sx-gap-lg); }
  .usx-overwatch .ps-card {
    background: linear-gradient(180deg, var(--sx-panel), var(--sx-panel-2));
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius);
    padding: 22px;
    box-shadow: var(--sx-shadow-1); }
  .usx-overwatch .ps-card h3 {
    margin: 0 0 8px 0; }
  .usx-overwatch .ps-card ul {
    margin: 0;
    padding-left: 18px; }
  .usx-overwatch .ps-card .checked li {
    list-style: none;
    position: relative;
    padding-left: 26px;
    margin: 8px 0; }
  .usx-overwatch .ps-card .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sx-accent);
    font-weight: 800; }
  .usx-overwatch .ps-card .checkless li {
    margin: 8px 0; }
  .usx-overwatch .ow-capabilities {
    padding: 64px 0;
    background: linear-gradient(180deg, #0a0f14 0%, #0b1117 100%);
    border-top: 1px solid var(--sx-border);
    border-bottom: 1px solid var(--sx-border); }
  .usx-overwatch .ow-capabilities h2 {
    text-align: center;
    margin-bottom: 28px;
    font-size: clamp(28px, 4vw, 38px); }
  .usx-overwatch .features-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--sx-grid-col));
    gap: var(--sx-gap-lg); }
  .usx-overwatch .feature-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sx-gap);
    align-items: center;
    background: var(--sx-panel);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius);
    padding: 18px;
    box-shadow: var(--sx-shadow-1);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
 border-color 0.2s ease; }
  .usx-overwatch .feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.35); }
  .usx-overwatch .feature-text h3 {
    margin: 0 0 6px 0; }
  .usx-overwatch .feature-image img {
    width: 44px;
    height: 44px;
    display: block;
    opacity: 0.95; }
  .usx-overwatch .ow-outcome {
    padding: 64px 0;
    background: linear-gradient(180deg, #0b1117 0%, #0b0f13 100%);
    border-top: 1px solid var(--sx-border); }
  .usx-overwatch .outcome-wrap {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--sx-gap-xl);
    align-items: center;
    background: radial-gradient(500px 200px at 15% 0%, rgba(106, 163, 255, 0.12), transparent 60%), var(--sx-panel);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-lg);
    padding: 28px;
    box-shadow: var(--sx-shadow-2); }
  .usx-overwatch .outcome-text h2 {
    margin-top: 0; }
  .usx-overwatch .outcome-text p {
    margin-bottom: 18px; }
  .usx-overwatch .btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--sx-accent);
    border: 1px solid rgba(68, 215, 182, 0.5);
    padding: 10px 16px;
    border-radius: 999px;
    transition: background 0.2s ease, transform 0.15s ease; }
  .usx-overwatch .btn-ghost:hover {
    background: rgba(68, 215, 182, 0.08);
    transform: translateY(-1px); }
  .usx-overwatch .outcome-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--sx-border); }
  .usx-overwatch .ow-problem-solution {
    position: relative;
    padding: 96px 0 88px;
    /* distinct look: night-shift vibe (indigo core + teal/blue glows) */
    background: conic-gradient(from 260deg at 78% 28%, rgba(106, 163, 255, 0.14), transparent 40% 100%), radial-gradient(1100px 520px at 18% -12%, rgba(68, 215, 182, 0.16), transparent 60%), linear-gradient(90deg, #0a1220 0%, #0c1424 52%, #0a1018 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-overwatch .ow-problem-solution .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-overwatch .ow-problem-solution h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-overwatch .ow-problem-solution .subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 72ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-overwatch .ow-problem-solution .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-overwatch .ow-problem-solution .ps-grid {
      grid-template-columns: 1fr; } }
  .usx-overwatch .ow-problem-solution .ps-card {
    position: relative;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-overwatch .ow-problem-solution .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(106, 163, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.46); }
  .usx-overwatch .ow-problem-solution .ps-card:first-child::before,
  .usx-overwatch .ow-problem-solution .ps-card:last-child::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-overwatch .ow-problem-solution .ps-card:first-child::before {
    background: linear-gradient(90deg, #ffb86b, #ff6b6b); }
  .usx-overwatch .ow-problem-solution .ps-card:last-child::before {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff)); }
  .usx-overwatch .ow-problem-solution .ps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-overwatch .ow-problem-solution .ps-card ul {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-overwatch .ow-problem-solution .ps-card li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-overwatch .ow-problem-solution .checkless li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #4a1111;
    background: #ffbfb3;
    border: 1px solid rgba(255, 107, 107, 0.45);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-overwatch .ow-problem-solution .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-overwatch .ow-capabilities {
    position: relative;
    padding: 96px 0 88px;
    /* teal-forward, low-blue background distinct from other OW sections */
    background: radial-gradient(1100px 520px at 18% -12%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(1000px 520px at 82% 108%, rgba(68, 215, 182, 0.12), transparent 60%), linear-gradient(90deg, #0b141a 0%, #0c171d 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-overwatch .ow-capabilities .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-overwatch .ow-capabilities h2 {
    margin: 0 0 24px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px); }
  .usx-overwatch .ow-capabilities .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 1024px) {
    .usx-overwatch .ow-capabilities .features-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    .usx-overwatch .ow-capabilities .features-grid {
      grid-template-columns: 1fr; } }
  .usx-overwatch .ow-capabilities .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 24px 22px;
    min-height: 220px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease; }
  .usx-overwatch .ow-capabilities .feature-card::before {
    /* thin mint accent band across the top */
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), color-mix(in oklab, var(--sx-accent, #44d7b6) 20%, #6aa3ff 0%));
    opacity: 0.95; }
  .usx-overwatch .ow-capabilities .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #132029, #0f171e); }
  .usx-overwatch .ow-capabilities .feature-text h3 {
    margin: 2px 0 2px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.15px; }
  .usx-overwatch .ow-capabilities .feature-text p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.06rem;
    line-height: 1.68; }
  .usx-overwatch .ow-capabilities .feature-image {
    display: none !important; }
  @media (max-width: 360px) {
    .usx-overwatch .ow-capabilities .feature-card {
      padding: 24px 18px 18px;
      min-height: 200px; } }
  .usx-overwatch .ow-tiers {
    position: relative;
    padding: 96px 0 90px;
    /* cool but on-brand: teal-first with faint sweep */
    background: radial-gradient(1100px 520px at 18% -10%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1000px 520px at 82% 108%, rgba(68, 215, 182, 0.12), transparent 60%), linear-gradient(135deg, #0b141a 0%, #0c1a20 52%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-overwatch .ow-tiers::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 28px);
    mask-image: radial-gradient(70% 70% at 50% 40%, black 55%, transparent 100%);
    opacity: 0.4; }
  .usx-overwatch .ow-tiers .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-overwatch .ow-tiers h2 {
    margin: 0 0 8px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px); }
  .usx-overwatch .ow-tiers .subheading {
    margin: 0 auto 24px;
    max-width: 70ch;
    text-align: center;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-overwatch .tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 900px) {
    .usx-overwatch .tiers-grid {
      grid-template-columns: 1fr; } }
  .usx-overwatch .tier-card {
    position: relative;
    padding: 28px 22px 24px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    overflow: hidden;
    text-align: center;
    min-height: 180px; }
  .usx-overwatch .tier-card::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 180px;
    background: radial-gradient(120px 90px at 50% 60%, rgba(68, 215, 182, 0.28), transparent 70%), radial-gradient(220px 110px at 50% 30%, rgba(68, 215, 182, 0.16), transparent 70%);
    filter: blur(16px);
    opacity: 0.6;
    pointer-events: none; }
  .usx-overwatch .tier-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 64px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), color-mix(in oklab, var(--sx-accent, #44d7b6) 70%, #6aa3ff 0%));
    opacity: 0.9;
    pointer-events: none; }
  .usx-overwatch .tier-card h3 {
    margin: 0 0 14px;
    padding-top: 6px;
    color: #f3fbf8;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.2vw, 22px); }
  .usx-overwatch .tier-card p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.04rem;
    line-height: 1.65; }
  .usx-overwatch .tier-card:hover {
    transform: translateY(-5px);
    border-color: rgba(68, 215, 182, 0.38);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #132029, #0f171e); }
  .usx-overwatch .tier-card:nth-child(2)::before {
    background: radial-gradient(120px 90px at 50% 60%, rgba(68, 215, 182, 0.24), transparent 70%), radial-gradient(220px 110px at 50% 30%, rgba(68, 215, 182, 0.12), transparent 70%); }
  .usx-overwatch .tier-card:nth-child(3)::before {
    background: radial-gradient(120px 90px at 50% 60%, rgba(68, 215, 182, 0.2), transparent 70%), radial-gradient(220px 110px at 50% 30%, rgba(68, 215, 182, 0.1), transparent 70%); }

.usx-sentry {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   SENTRY — Problem → Solution
   (styles the .sentry-problem-solution markup)
========================= */
  /* optional soft vignette at the bottom for depth—remove if you want it flatter */
  /* Grid */
  /* Cards */
  /* Headings inside cards */
  /* Accent bars (Problem vs Solution) */
  /* Lists */
  /* Problem bullets (cross/dash) */
  /* Solution bullets (check) */
  /* =========================
   SENTRY — What Sentry Replaces
   (styles the .sentry-replaces markup)
========================= */
  /* Headline */
  /* Grid */
  /* Cards */
  /* top accent band for pop */
  /* Text block */
  /* Icon badge (works for SVG/PNG) */
  /* Optional alternating glow for visual rhythm */
  /* Tighten layout on very small screens */
  /* =========================
   SENTRY — Spec & Footprint (Refreshed)
========================= */
  /* Grid */
  /* Cards */
  /* Text */
  /* Subtle alternating glow accents for depth */
  /* =========================
   SENTRY — Case Study Highlight
   (styles the .sentry-case markup you provided)
========================= */
  /* optional soft conic sweep for extra depth */
  /* Wrapper card with split layout */
  /* Soft diagonal sheen for pop */
  /* Text column */
  /* Art column */
  /* Variant if no image loads (keeps balance) */
  /* Responsive */
  /* =========================
   SENTRY — Comparison Table (non-card)
   styles the .sentry-compare markup you pasted
========================= */
  /* wrapper allows horizontal scroll on small screens (no cards) */
  /* Table base */
  /* Header */
  /* Body cells */
  /* Row striping + hover */
  /* First column width bias for readability */
  /* Optional: emphasize Sentry column softly */
  /* Compact mode on very small screens */ }
  .usx-sentry .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-sentry .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-sentry .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-sentry .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-sentry .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-sentry .hero .btn,
  .usx-sentry .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-sentry .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-sentry .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-sentry .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-sentry .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-sentry .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-sentry .hero-visual {
    position: relative;
    width: 100%;
    /* clamp: min on small screens, scale by viewport in middle, cap at a max */
    max-width: clamp(420px, 46vw, 880px);
    margin-left: auto;
    /* pushes image to the right in 2-col layouts */ }
  .usx-sentry .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-sentry .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-sentry .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-sentry .hero-content h1 {
      font-size: 2.4rem; }
    .usx-sentry .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-sentry .sentry-problem-solution {
    background: radial-gradient(1200px 520px at 15% -10%, rgba(68, 215, 182, 0.18), transparent 60%), radial-gradient(1200px 520px at 85% 0%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(135deg, rgba(68, 215, 182, 0.08) 0%, rgba(106, 163, 255, 0.08) 48%, transparent 48%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    padding: 120px 0 110px; }
  .usx-sentry .sentry-problem-solution:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 360px at 50% 120%, rgba(106, 163, 255, 0.08), transparent 70%); }
  .usx-sentry .sentry-problem-solution .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-sentry .sentry-problem-solution h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-sentry .sentry-problem-solution .subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 70ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-sentry .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-sentry .ps-grid {
      grid-template-columns: 1fr; } }
  .usx-sentry .ps-card {
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-sentry .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-sentry .ps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-sentry .ps-card:nth-child(1) {
    position: relative; }
  .usx-sentry .ps-card:nth-child(1)::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6a6a, #ff3b3b);
    /* Problem = warm/red */ }
  .usx-sentry .ps-card:nth-child(2) {
    position: relative; }
  .usx-sentry .ps-card:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    /* Solution = brand */ }
  .usx-sentry .ps-card ul {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-sentry .ps-card li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-sentry .ps-card .checkless li::before {
    content: "✕";
    /* accessible unicode cross */
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #ff9a9a;
    background: rgba(255, 75, 75, 0.12);
    border: 1px solid rgba(255, 75, 75, 0.35);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-sentry .ps-card .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-sentry .sentry-replaces {
    position: relative;
    padding: 98px 0 90px;
    background: radial-gradient(1200px 520px at 12% -15%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(1100px 520px at 88% 0%, rgba(106, 163, 255, 0.18), transparent 60%), linear-gradient(135deg, #0e1c24 0%, #0b141c 45%, #0a1117 100%);
    border-block: 1px solid var(--sx-border);
    overflow: hidden; }
  .usx-sentry .sentry-replaces .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-sentry .sentry-replaces h2 {
    margin: 0 0 22px;
    font-size: clamp(30px, 4.8vw, 44px);
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #fff;
    text-align: center; }
  .usx-sentry .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 1024px) {
    .usx-sentry .features-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) {
    .usx-sentry .features-grid {
      grid-template-columns: 1fr; } }
  .usx-sentry .feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    /* text | icon */
    align-items: center;
    gap: 14px;
    padding: 22px 18px 18px 18px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    isolation: isolate; }
  .usx-sentry .feature-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.95; }
  .usx-sentry .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-sentry .feature-text h3 {
    margin: 6px 0 6px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(17px, 2vw, 20px);
    letter-spacing: 0.15px; }
  .usx-sentry .feature-text p {
    margin: 0;
    color: #d8eee9;
    font-size: 1.02rem;
    line-height: 1.62; }
  .usx-sentry .feature-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: radial-gradient(120% 120% at 20% 10%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(120% 120% at 80% 90%, rgba(106, 163, 255, 0.2), transparent 60%), #0e151b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28); }
  .usx-sentry .feature-image img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: brightness(1.02) contrast(1.05) saturate(1.05); }
  .usx-sentry .features-grid .feature-card:nth-child(odd)::after,
  .usx-sentry .features-grid .feature-card:nth-child(even)::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    z-index: -1;
    background: radial-gradient(220px 140px at 15% -10%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(220px 140px at 90% 110%, rgba(106, 163, 255, 0.18), transparent 60%);
    filter: blur(18px);
    opacity: 0.35; }
  .usx-sentry .features-grid .feature-card:nth-child(even)::after {
    background: radial-gradient(220px 140px at 85% -10%, rgba(106, 163, 255, 0.2), transparent 60%), radial-gradient(220px 140px at 10% 110%, rgba(68, 215, 182, 0.18), transparent 60%); }
  @media (max-width: 420px) {
    .usx-sentry .feature-card {
      grid-template-columns: 1fr;
      text-align: left; }
    .usx-sentry .feature-image {
      justify-self: start;
      margin-top: 6px; } }
  .usx-sentry .sentry-specs {
    position: relative;
    padding: 100px 0 90px;
    background: radial-gradient(900px 480px at 15% 10%, rgba(68, 215, 182, 0.25), transparent 60%), radial-gradient(1000px 460px at 85% 90%, rgba(106, 163, 255, 0.2), transparent 60%), linear-gradient(90deg, #09202c 0%, #0a1722 50%, #0c1018 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden; }
  .usx-sentry .sentry-specs::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px 300px at 40% 20%, rgba(68, 215, 182, 0.12), transparent 70%), radial-gradient(700px 400px at 80% 80%, rgba(106, 163, 255, 0.1), transparent 70%);
    opacity: 0.6;
    mix-blend-mode: overlay; }
  .usx-sentry .sentry-specs .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center; }
  .usx-sentry .sentry-specs h2 {
    margin: 0 0 36px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(32px, 4.8vw, 46px);
    line-height: 1.2;
    background: linear-gradient(90deg, #44d7b6, #6aa3ff);
    -webkit-background-clip: text;
    color: transparent; }
  .usx-sentry .spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px; }
  @media (max-width: 1080px) {
    .usx-sentry .spec-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    .usx-sentry .spec-grid {
      grid-template-columns: 1fr; } }
  .usx-sentry .spec-card {
    background: linear-gradient(160deg, rgba(17, 25, 33, 0.95) 0%, rgba(11, 17, 23, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px 26px 28px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden; }
  .usx-sentry .spec-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(68, 215, 182, 0.18), rgba(106, 163, 255, 0.18));
    opacity: 0;
    transition: opacity 0.3s ease; }
  .usx-sentry .spec-card:hover {
    transform: translateY(-6px);
    border-color: rgba(68, 215, 182, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); }
  .usx-sentry .spec-card:hover::before {
    opacity: 0.5; }
  .usx-sentry .spec-card h3 {
    margin: 0 0 10px;
    font-weight: 800;
    color: #f3fbf8;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.2px; }
  .usx-sentry .spec-card p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.05rem;
    line-height: 1.7; }
  .usx-sentry .spec-card:nth-child(odd) {
    background: linear-gradient(180deg, rgba(14, 23, 30, 0.95), rgba(10, 17, 23, 0.95)); }
  .usx-sentry .spec-card:nth-child(even) {
    background: linear-gradient(180deg, rgba(12, 19, 26, 0.95), rgba(9, 15, 21, 0.95)); }
  .usx-sentry .sentry-case {
    background: radial-gradient(900px 480px at 85% -10%, rgba(106, 163, 255, 0.18), transparent 60%), radial-gradient(900px 480px at 12% 110%, rgba(68, 215, 182, 0.18), transparent 60%), linear-gradient(90deg, #0b141b 0%, #0c1b22 50%, #0a1117 100%);
    padding: 100px 0 94px; }
  .usx-sentry .sentry-case::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 210deg at 25% 40%, rgba(68, 215, 182, 0.08), transparent 35% 100%);
    mix-blend-mode: screen;
    opacity: 0.7; }
  .usx-sentry .sentry-case .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-sentry .case-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* text | art */
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 25, 33, 0.95), rgba(11, 17, 23, 0.95));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
  .usx-sentry .case-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(68, 215, 182, 0.08), rgba(106, 163, 255, 0.06) 45%, transparent 60%); }
  .usx-sentry .case-text h2 {
    margin: 0 0 10px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.2px;
    font-size: clamp(28px, 4.6vw, 40px);
    line-height: 1.15; }
  .usx-sentry .case-text p {
    margin: 0 0 16px;
    color: #cfe5e0;
    line-height: 1.7;
    font-size: 1.08rem;
    max-width: 58ch; }
  .usx-sentry .case-text .btn {
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease; }
  .usx-sentry .case-text .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    filter: saturate(1.05); }
  .usx-sentry .case-art {
    justify-self: end;
    max-width: clamp(420px, 46vw, 820px); }
  .usx-sentry .case-art img {
    display: block;
    width: 105%;
    max-width: none;
    transform: translateX(-3%);
    border-radius: 16px;
    filter: drop-shadow(0 16px 46px rgba(0, 0, 0, 0.55)); }
  .usx-sentry .case-art:has(img[src=""]),
  .usx-sentry .case-art:has(img:not([src])) {
    display: none; }
  .usx-sentry .case-wrap:has(.case-art:empty),
  .usx-sentry .case-wrap:has(.case-art:has(img[src=""])),
  .usx-sentry .case-wrap:has(.case-art:has(img:not([src]))) {
    grid-template-columns: 1fr; }
  @media (max-width: 980px) {
    .usx-sentry .case-wrap {
      grid-template-columns: 1fr;
      padding: 22px;
      gap: 18px; }
    .usx-sentry .case-art {
      justify-self: start;
      max-width: 100%; }
    .usx-sentry .case-art img {
      width: 100%;
      transform: none; } }
  @media (max-width: 420px) {
    .usx-sentry .case-text .btn {
      width: 100%;
      justify-content: center; } }
  .usx-sentry .sentry-compare {
    position: relative;
    padding: 96px 0 88px;
    background: radial-gradient(1100px 520px at 12% -15%, rgba(68, 215, 182, 0.14), transparent 60%), radial-gradient(1100px 520px at 88% 0%, rgba(106, 163, 255, 0.12), transparent 60%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden; }
  .usx-sentry .sentry-compare .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-sentry .sentry-compare h2 {
    margin: 0 0 18px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 42px);
    text-align: center; }
  .usx-sentry .compare-table-wrap {
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    background: #0f151b;
    box-shadow: var(--sx-shadow-1, 0 8px 28px rgba(0, 0, 0, 0.38));
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .usx-sentry .compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    /* keep columns readable before horizontal scroll */
    font-size: 1.02rem; }
  .usx-sentry .compare-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 900;
    color: #f6fffd;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, rgba(68, 215, 182, 0.22), rgba(106, 163, 255, 0.22));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    /* helpful when there’s lots of rows */
    top: 0;
    z-index: 1; }
  .usx-sentry .compare-table thead th:nth-child(2),
  .usx-sentry .compare-table thead th:nth-child(3) {
    text-align: center; }
  .usx-sentry .compare-table tbody td {
    padding: 14px 16px;
    color: #dcefed;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: top; }
  .usx-sentry .compare-table tbody td:nth-child(2),
  .usx-sentry .compare-table tbody td:nth-child(3) {
    text-align: center;
    font-weight: 800; }
  .usx-sentry .compare-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02); }
  @media (hover: hover) {
    .usx-sentry .compare-table tbody tr:hover {
      background: rgba(255, 255, 255, 0.035); } }
  .usx-sentry .compare-table colgroup col:first-child {
    width: 38%; }
  .usx-sentry .compare-table.sentry-strong tbody td:nth-child(2) {
    background: rgba(68, 215, 182, 0.05); }
  @media (max-width: 640px) {
    .usx-sentry .compare-table {
      font-size: 1rem; }
    .usx-sentry .compare-table thead th,
    .usx-sentry .compare-table tbody td {
      padding: 12px 12px; } }

.usx-watchdesk {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   WATCHDESK — Problem → Solution
   (styles the .wd-problem-solution markup)
========================= */
  /* Headings */
  /* Grid */
  /* Cards */
  /* Accent bars (Problem vs Solution) */
  /* Headings inside cards */
  /* Lists */
  /* Problem bullets (warm) */
  /* Solution bullets (brand) */
  /* =========================
   WATCHDESK — Core Capabilities
   New background (diagonal sweep + soft highlights) distinct from others
========================= */
  /* subtle diagonal lines for texture (lighter center, fades at edges) */
  /* Headline */
  /* Grid */
  /* Cards */
  /* Text */
  /* Icon badge */
  /* Small screens */
  /* =========================
   WATCHDESK — Executive Story / Outcome
   (styles the .wd-outcome markup)
========================= */
  /* Split card */
  /* Text column */
  /* Ghost button */
  /* Art column */
  /* If image missing, keep layout tidy */
  /* Responsive */
  /* =========================
   WATCHDESK — Integrations / Connectivity
   (styles the .wd-connectivity markup)
========================= */
  /* Heading + subhead */
  /* Logo row */
  /* Logo chips (consistent size regardless of original asset) */
  /* Logo images */
  /* Compact responsiveness */ }
  .usx-watchdesk .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-watchdesk .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-watchdesk .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-watchdesk .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-watchdesk .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-watchdesk .hero .btn,
  .usx-watchdesk .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-watchdesk .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-watchdesk .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-watchdesk .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-watchdesk .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-watchdesk .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-watchdesk .hero-visual {
    position: relative;
    width: 100%;
    max-width: clamp(160px, 30vw, 380px);
    margin-left: auto; }
  .usx-watchdesk .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-watchdesk .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-watchdesk .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-watchdesk .hero-content h1 {
      font-size: 2.4rem; }
    .usx-watchdesk .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-watchdesk .wd-problem-solution {
    position: relative;
    padding: 96px 0 88px;
    background: radial-gradient(1100px 520px at 18% -15%, rgba(106, 163, 255, 0.18), transparent 60%), radial-gradient(1100px 520px at 82% 105%, rgba(68, 215, 182, 0.16), transparent 60%), linear-gradient(90deg, #0b141b 0%, #0c1b22 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-watchdesk .wd-problem-solution .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-watchdesk .wd-problem-solution h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-watchdesk .wd-problem-solution .subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 70ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-watchdesk .wd-problem-solution .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-watchdesk .wd-problem-solution .ps-grid {
      grid-template-columns: 1fr; } }
  .usx-watchdesk .wd-problem-solution .ps-card {
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease;
    position: relative; }
  .usx-watchdesk .wd-problem-solution .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(106, 163, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-watchdesk .wd-problem-solution .ps-card:first-child::before,
  .usx-watchdesk .wd-problem-solution .ps-card:last-child::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-watchdesk .wd-problem-solution .ps-card:first-child::before {
    /* Problem */
    background: linear-gradient(90deg, #ff8a66, #ff3b3b); }
  .usx-watchdesk .wd-problem-solution .ps-card:last-child::before {
    /* Solution */
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff)); }
  .usx-watchdesk .wd-problem-solution .ps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-watchdesk .wd-problem-solution .ps-card ul {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-watchdesk .wd-problem-solution .ps-card li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-watchdesk .wd-problem-solution .checkless li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #4a1111;
    background: #ffb2a3;
    /* readable on dark bg */
    border: 1px solid rgba(255, 75, 75, 0.35);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-watchdesk .wd-problem-solution .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-watchdesk .wd-capabilities {
    position: relative;
    padding: 98px 0 90px;
    background: radial-gradient(900px 480px at 80% 10%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(900px 520px at 15% 100%, rgba(106, 163, 255, 0.18), transparent 60%), linear-gradient(135deg, #0b1a22 0%, #0e1f2a 55%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-watchdesk .wd-capabilities::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 26px);
    mask-image: radial-gradient(70% 70% at 50% 40%, black 55%, transparent 100%);
    opacity: 0.45; }
  .usx-watchdesk .wd-capabilities .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-watchdesk .wd-capabilities h2 {
    margin: 0 0 24px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px);
    color: #fff; }
  .usx-watchdesk .wd-capabilities .features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 900px) {
    .usx-watchdesk .features-grid {
      grid-template-columns: 1fr; } }
  .usx-watchdesk .wd-capabilities .feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    /* text | icon */
    align-items: center;
    gap: 14px;
    padding: 22px 18px 18px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-watchdesk .wd-capabilities .feature-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.95; }
  .usx-watchdesk .wd-capabilities .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(106, 163, 255, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-watchdesk .wd-capabilities .feature-text h3 {
    margin: 6px 0 6px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.15px; }
  .usx-watchdesk .wd-capabilities .feature-text p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.04rem;
    line-height: 1.65; }
  .usx-watchdesk .wd-capabilities .feature-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: radial-gradient(120% 120% at 25% 15%, rgba(106, 163, 255, 0.24), transparent 60%), radial-gradient(120% 120% at 80% 85%, rgba(68, 215, 182, 0.22), transparent 60%), #0e151b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28); }
  .usx-watchdesk .wd-capabilities .feature-image img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: brightness(1.05) contrast(1.05) saturate(1.05); }
  @media (max-width: 480px) {
    .usx-watchdesk .wd-capabilities .feature-card {
      grid-template-columns: 1fr; }
    .usx-watchdesk .wd-capabilities .feature-image {
      justify-self: start;
      margin-top: 6px; } }
  .usx-watchdesk .wd-outcome {
    position: relative;
    padding: 104px 0 96px;
    /* distinct background: horizontal flow + conic highlight */
    background: conic-gradient(from 240deg at 22% 35%, rgba(68, 215, 182, 0.12), transparent 35% 100%), radial-gradient(1000px 520px at 85% 110%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(90deg, #0a1620 0%, #0d1d27 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-watchdesk .wd-outcome .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-watchdesk .outcome-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* text | art */
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 25, 33, 0.95), rgba(11, 17, 23, 0.95));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
  .usx-watchdesk .outcome-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(68, 215, 182, 0.08), rgba(106, 163, 255, 0.06) 45%, transparent 60%); }
  .usx-watchdesk .outcome-text h2 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.6vw, 40px);
    color: #fff; }
  .usx-watchdesk .outcome-text p {
    margin: 0 0 18px;
    color: #cfe5e0;
    line-height: 1.7;
    font-size: 1.08rem;
    max-width: 58ch; }
  .usx-watchdesk .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #eaf7f3;
    background: transparent;
    border: 2px solid transparent;
    /* gradient border with mask technique for crisp edges */
    background-image: linear-gradient(#0f171e, #0f171e), linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.2s ease, color 0.2s ease,
 background 0.2s ease; }
  .usx-watchdesk .btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: #071115;
    background-image: linear-gradient(#0f171e, #0f171e), linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    /* subtle fill on hover */
    background-color: transparent; }
  .usx-watchdesk .btn-ghost:active {
    transform: translateY(-1px); }
  .usx-watchdesk .outcome-art {
    justify-self: end;
    max-width: clamp(420px, 46vw, 880px); }
  .usx-watchdesk .outcome-art img {
    display: block;
    width: 104%;
    max-width: none;
    transform: translateX(-3%);
    border-radius: 16px;
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55)); }
  .usx-watchdesk .outcome-art:has(img[src=""]),
  .usx-watchdesk .outcome-art:has(img:not([src])) {
    display: none; }
  .usx-watchdesk .outcome-wrap:has(.outcome-art:empty),
  .usx-watchdesk .outcome-wrap:has(.outcome-art:has(img[src=""])),
  .usx-watchdesk .outcome-wrap:has(.outcome-art:has(img:not([src]))) {
    grid-template-columns: 1fr; }
  @media (min-width: 1200px) {
    .usx-watchdesk .wd-outcome {
      padding: 116px 0 106px; }
    .usx-watchdesk .outcome-wrap {
      gap: 32px; } }
  @media (max-width: 980px) {
    .usx-watchdesk .outcome-wrap {
      grid-template-columns: 1fr;
      padding: 22px;
      gap: 18px; }
    .usx-watchdesk .outcome-art {
      justify-self: start;
      max-width: 100%; }
    .usx-watchdesk .outcome-art img {
      width: 100%;
      transform: none; } }
  @media (max-width: 420px) {
    .usx-watchdesk .btn-ghost {
      width: 100%;
      justify-content: center; } }
  .usx-watchdesk .wd-connectivity {
    position: relative;
    padding: 96px 0 88px;
    /* distinct look: subtle vertical blend + off-center glow */
    background: radial-gradient(1000px 480px at 20% -10%, rgba(68, 215, 182, 0.18), transparent 60%), radial-gradient(900px 460px at 85% 110%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(180deg, #0c1821 0%, #0b1218 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-watchdesk .wd-connectivity .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-watchdesk .wd-connectivity h2 {
    margin: 0 0 10px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px); }
  .usx-watchdesk .wd-connectivity .subheading {
    margin: 0 auto 22px;
    max-width: 70ch;
    text-align: center;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-watchdesk .logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 26px 34px;
    list-style: none;
    margin: 16px auto 0;
    padding: 0; }
  .usx-watchdesk .logo-row li {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
    width: 200px;
    /* chip width */
    height: 190px;
    /* chip height */
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0f171e, #0c1218);
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    position: relative;
    overflow: hidden; }
  .usx-watchdesk .logo-row li::before {
    /* thin accent line at top of each chip */
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-watchdesk .logo-row li:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-watchdesk .logo-row img {
    display: block;
    max-width: 100%;
    max-height: 158px;
    /* keeps a consistent visual line */
    object-fit: contain;
    opacity: 0.9;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease; }
  .usx-watchdesk .logo-row li:hover img {
    filter: none;
    opacity: 1;
    transform: translateY(-1px); }
  @media (max-width: 920px) {
    .usx-watchdesk .logo-row {
      gap: 22px 26px; }
    .usx-watchdesk .logo-row li {
      width: 140px;
      height: 64px; }
    .usx-watchdesk .logo-row img {
      max-height: 34px; } }
  @media (max-width: 560px) {
    .usx-watchdesk .logo-row {
      gap: 18px 18px; }
    .usx-watchdesk .logo-row li {
      width: 46%;
      min-width: 150px; } }
  @media (max-width: 380px) {
    .usx-watchdesk .logo-row li {
      width: 100%; } }

.usx-reactor {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   REACTOR — Problem → Solution
   (styles the .rc-problem-solution markup)
========================= */
  /* Headings */
  /* Grid */
  /* Cards */
  /* Accent bars: Problem = warm (coral→amber), Solution = brand mint→blue */
  /* Titles */
  /* Lists */
  /* Problem bullets (warm cross) */
  /* Solution bullets (mint check) */
  /* =========================
   REACTOR — Core Capabilities
   (styles the .rc-capabilities markup)
   Distinct background from other Reactor sections
========================= */
  /* Heading */
  /* Grid */
  /* Cards */
  /* Animated accent band (SOAR vibe) */
  /* Text */
  /* Icon badge (SVG/PNG) */
  /* If you later remove images, this keeps layout clean */
  /* =========================
   REACTOR — Outcome Story
   (styles the .rc-outcome markup)
========================= */
  /* Split card */
  /* subtle highlight sweep */
  /* Text column */
  /* Ghost button (brand gradient border) */
  /* Art column */
  /* Fallback if image missing */
  /* Responsive */
  /* =========================
   REACTOR — Sample Playbooks
   (styles the .rc-playbooks markup)
========================= */
  /* Heading */
  /* Grid */
  /* Cards */
  /* animated accent band */
  /* Title */
  /* Steps list */
  /* Numbered badge */
  /* Slight variants per card for visual rhythm */ }
  .usx-reactor .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-reactor .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-reactor .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-reactor .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-reactor .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-reactor .hero .btn,
  .usx-reactor .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-reactor .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-reactor .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-reactor .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-reactor .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-reactor .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-reactor .hero-visual {
    position: relative;
    width: 100%;
    max-width: clamp(160px, 30vw, 380px);
    margin-left: auto; }
  .usx-reactor .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-reactor .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-reactor .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-reactor .hero-content h1 {
      font-size: 2.4rem; }
    .usx-reactor .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-reactor .rc-problem-solution {
    position: relative;
    padding: 96px 0 88px;
    /* distinct: energized teal base with a subtle diagonal sweep */
    background: radial-gradient(1100px 520px at 20% -12%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(1000px 520px at 85% 108%, rgba(68, 215, 182, 0.12), transparent 60%), linear-gradient(135deg, #0b151b 0%, #0d1b22 52%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-reactor .rc-problem-solution .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-reactor .rc-problem-solution h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-reactor .rc-problem-solution .subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 72ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-reactor .rc-problem-solution .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-reactor .rc-problem-solution .ps-grid {
      grid-template-columns: 1fr; } }
  .usx-reactor .rc-problem-solution .ps-card {
    position: relative;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-reactor .rc-problem-solution .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.46); }
  .usx-reactor .rc-problem-solution .ps-card:first-child::before,
  .usx-reactor .rc-problem-solution .ps-card:last-child::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-reactor .rc-problem-solution .ps-card:first-child::before {
    background: linear-gradient(90deg, #ff7e6e, #ffb86b); }
  .usx-reactor .rc-problem-solution .ps-card:last-child::before {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff)); }
  .usx-reactor .rc-problem-solution .ps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-reactor .rc-problem-solution .ps-card ul {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-reactor .rc-problem-solution .ps-card li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-reactor .rc-problem-solution .checkless li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #4a1111;
    background: #ffb9ac;
    border: 1px solid rgba(255, 126, 110, 0.45);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-reactor .rc-problem-solution .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-reactor .rc-capabilities {
    position: relative;
    padding: 98px 0 90px;
    /* energetic but on-brand: mint-first with faint diagonal sweep */
    background: radial-gradient(1100px 520px at 16% -8%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1000px 520px at 86% 108%, rgba(106, 163, 255, 0.12), transparent 60%), linear-gradient(135deg, #0b151b 0%, #0d1c23 52%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-reactor .rc-capabilities .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-reactor .rc-capabilities h2 {
    margin: 0 0 24px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px); }
  .usx-reactor .rc-capabilities .features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 900px) {
    .usx-reactor .rc-capabilities .features-grid {
      grid-template-columns: 1fr; } }
  .usx-reactor .rc-capabilities .feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    /* text | icon */
    align-items: center;
    gap: 14px;
    padding: 22px 18px 18px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease;
    isolation: isolate; }
  .usx-reactor .rc-capabilities .feature-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9a7a 0%, var(--sx-accent, #44d7b6) 50%, var(--sx-accent-2, #6aa3ff) 100%);
    background-size: 200% 100%;
    animation: rcSweep 6s linear infinite;
    opacity: 0.95; }

@keyframes rcSweep {
  to {
    background-position: -200% 0; } }
  .usx-reactor .rc-capabilities .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-reactor .rc-capabilities .feature-text h3 {
    margin: 6px 0 6px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.15px; }
  .usx-reactor .rc-capabilities .feature-text p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.05rem;
    line-height: 1.65; }
  .usx-reactor .rc-capabilities .feature-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: radial-gradient(120% 120% at 25% 15%, rgba(68, 215, 182, 0.26), transparent 60%), radial-gradient(120% 120% at 80% 85%, rgba(106, 163, 255, 0.2), transparent 60%), #0e151b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28); }
  .usx-reactor .rc-capabilities .feature-image img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: brightness(1.06) contrast(1.06) saturate(1.05); }
  .usx-reactor .rc-capabilities .feature-image:empty {
    display: none; }
  @media (max-width: 480px) {
    .usx-reactor .rc-capabilities .feature-card {
      grid-template-columns: 1fr; }
    .usx-reactor .rc-capabilities .feature-image {
      justify-self: start;
      margin-top: 6px; } }
  .usx-reactor .rc-outcome {
    position: relative;
    padding: 104px 0 96px;
    /* distinct Reactor vibe: energetic mint core + faint warm sweep */
    background: conic-gradient(from 230deg at 78% 28%, rgba(255, 154, 122, 0.08), transparent 40% 100%), radial-gradient(1000px 520px at 18% -8%, rgba(68, 215, 182, 0.2), transparent 60%), linear-gradient(90deg, #0a151b 0%, #0d1b22 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-reactor .rc-outcome .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-reactor .rc-outcome .outcome-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* text | art */
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 25, 33, 0.95), rgba(11, 17, 23, 0.95));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
  .usx-reactor .rc-outcome .outcome-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(68, 215, 182, 0.08), rgba(255, 154, 122, 0.07) 45%, transparent 60%); }
  .usx-reactor .rc-outcome .outcome-text h2 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.6vw, 40px);
    color: #fff; }
  .usx-reactor .rc-outcome .outcome-text p {
    margin: 0 0 18px;
    color: #cfe5e0;
    line-height: 1.7;
    font-size: 1.08rem;
    max-width: 58ch; }
  .usx-reactor .rc-outcome .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #eaf7f3;
    background: transparent;
    border: 2px solid transparent;
    background-image: linear-gradient(#0f171e, #0f171e), linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.2s ease, color 0.2s ease; }
  .usx-reactor .rc-outcome .btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: #071115; }
  .usx-reactor .rc-outcome .outcome-art {
    justify-self: end;
    max-width: clamp(420px, 46vw, 880px); }
  .usx-reactor .rc-outcome .outcome-art img {
    display: block;
    width: 104%;
    max-width: none;
    transform: translateX(-3%);
    border-radius: 16px;
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55)); }
  .usx-reactor .rc-outcome .outcome-art:has(img[src=""]),
  .usx-reactor .rc-outcome .outcome-art:has(img:not([src])) {
    display: none; }
  .usx-reactor .rc-outcome .outcome-wrap:has(.outcome-art:empty),
  .usx-reactor .rc-outcome .outcome-wrap:has(.outcome-art:has(img[src=""])),
  .usx-reactor .rc-outcome .outcome-wrap:has(.outcome-art:has(img:not([src]))) {
    grid-template-columns: 1fr; }
  @media (min-width: 1200px) {
    .usx-reactor .rc-outcome {
      padding: 116px 0 106px; }
    .usx-reactor .rc-outcome .outcome-wrap {
      gap: 32px; } }
  @media (max-width: 980px) {
    .usx-reactor .rc-outcome .outcome-wrap {
      grid-template-columns: 1fr;
      padding: 22px;
      gap: 18px; }
    .usx-reactor .rc-outcome .outcome-art {
      justify-self: start;
      max-width: 100%; }
    .usx-reactor .rc-outcome .outcome-art img {
      width: 100%;
      transform: none; } }
  @media (max-width: 420px) {
    .usx-reactor .rc-outcome .btn-ghost {
      width: 100%;
      justify-content: center; } }
  .usx-reactor .rc-playbooks {
    position: relative;
    padding: 96px 0 90px;
    /* distinct but on-brand: mint core + faint warm accent */
    background: conic-gradient(from 230deg at 80% 25%, rgba(255, 154, 122, 0.08), transparent 40% 100%), radial-gradient(1100px 520px at 18% -10%, rgba(68, 215, 182, 0.2), transparent 60%), linear-gradient(135deg, #0a151b 0%, #0d1b22 52%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-reactor .rc-playbooks .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-reactor .rc-playbooks h2 {
    margin: 0 0 22px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px); }
  .usx-reactor .playbook-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 1000px) {
    .usx-reactor .playbook-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) {
    .usx-reactor .playbook-grid {
      grid-template-columns: 1fr; } }
  .usx-reactor .playbook-card {
    position: relative;
    padding: 22px 20px 20px 22px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    counter-reset: step;
    /* for numbered bullets */
    overflow: hidden; }
  .usx-reactor .playbook-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9a7a 0%, var(--sx-accent, #44d7b6) 50%, var(--sx-accent-2, #6aa3ff) 100%);
    background-size: 200% 100%;
    animation: rcSweep 7s linear infinite;
    opacity: 0.95; }

@keyframes rcSweep {
  to {
    background-position: -200% 0; } }
  .usx-reactor .playbook-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-reactor .playbook-card h3 {
    margin: 6px 0 10px;
    color: #f3fbf8;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.2vw, 22px); }
  .usx-reactor .playbook-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px; }
  .usx-reactor .playbook-card li {
    position: relative;
    padding-left: 44px;
    /* room for number badge */
    color: #cfe5e0;
    line-height: 1.65;
    font-size: 1.04rem; }
  .usx-reactor .playbook-card li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 0.95rem;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  .usx-reactor .playbook-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6) 0%, var(--sx-accent-2, #6aa3ff) 50%, #ff9a7a 100%); }
  .usx-reactor .playbook-card:nth-child(3)::before {
    background: linear-gradient(90deg, var(--sx-accent-2, #6aa3ff) 0%, #ff9a7a 50%, var(--sx-accent, #44d7b6) 100%); }

.usx-cc {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   COMPLIANCE COMMAND — Problem → Solution
   (matches prior PS sections, with its own background & accents)
========================= */
  /* Heading + subhead */
  /* Grid */
  /* Cards */
  /* Accent bars (Problem = coral; Solution = brand) */
  /* Titles in cards */
  /* Lists */
  /* Problem bullets (coral cross) */
  /* Solution bullets (mint/blue check) */
  /* =========================
   COMPLIANCE COMMAND — Core Capabilities
   (styles the .cc-capabilities markup)
   Distinct background from other CC sections
========================= */
  /* Heading */
  /* Grid */
  /* Cards */
  /* top accent band = teal/blue brand */
  /* Text */
  /* Icon badge (SVG/PNG) */
  /* Small screens */
  /* =========================
   COMPLIANCE COMMAND — Frameworks Strip
   (styles the .cc-frameworks markup)
========================= */
  /* Heading */
  /* Logo row (centered chips) */
  /* Each logo sits in a “chip” for consistency */
  /* thin accent line at top of each chip */
  /* Logo images: consistent visual line regardless of asset */
  /* Responsive tweaks */
  /* =========================
   COMPLIANCE COMMAND — Success Story
   (styles the .cc-case markup)
========================= */
  /* Split card */
  /* Text column */
  /* Ghost button (reuses brand colors) */
  /* Art column */
  /* Fallback if image missing */
  /* Responsive */ }
  .usx-cc .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-cc .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-cc .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-cc .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-cc .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-cc .hero .btn,
  .usx-cc .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-cc .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-cc .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-cc .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-cc .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-cc .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    /* slightly tighter */
    margin-top: 12px; }
  .usx-cc .hero-visual {
    position: relative;
    width: 100%;
    max-width: clamp(160px, 30vw, 380px);
    margin-left: auto; }
  .usx-cc .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-cc .hero {
      padding: 64px 0 48px;
      /* reduced on tablet/mobile */ }
    .usx-cc .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 24px; }
    .usx-cc .hero-content h1 {
      font-size: 2.4rem; }
    .usx-cc .hero-visual {
      margin: 24px auto 0;
      max-width: clamp(240px, 56vw, 420px); } }
  .usx-cc .cc-problem-solution {
    position: relative;
    padding: 96px 0 88px;
    /* distinct background: softer teal core + blue sweep */
    background: conic-gradient(from 210deg at 22% 38%, rgba(68, 215, 182, 0.14), transparent 35% 100%), radial-gradient(1100px 520px at 84% 105%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(90deg, #0a1720 0%, #0c1c26 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-cc .cc-problem-solution .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-cc .cc-problem-solution h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-cc .cc-problem-solution .subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 72ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-cc .cc-problem-solution .ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-cc .cc-problem-solution .ps-grid {
      grid-template-columns: 1fr; } }
  .usx-cc .cc-problem-solution .ps-card {
    position: relative;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease; }
  .usx-cc .cc-problem-solution .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-cc .cc-problem-solution .ps-card:first-child::before,
  .usx-cc .cc-problem-solution .ps-card:last-child::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-cc .cc-problem-solution .ps-card:first-child::before {
    background: linear-gradient(90deg, #ff9a7a, #ff5d4f); }
  .usx-cc .cc-problem-solution .ps-card:last-child::before {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff)); }
  .usx-cc .cc-problem-solution .ps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-cc .cc-problem-solution .ps-card ul {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-cc .cc-problem-solution .ps-card li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-cc .cc-problem-solution .checkless li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #4a1111;
    background: #ffb9ac;
    border: 1px solid rgba(255, 93, 79, 0.45);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-cc .cc-problem-solution .checked li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-cc .cc-capabilities {
    position: relative;
    padding: 98px 0 90px;
    /* brighter, teal-forward look with a soft mesh */
    background: radial-gradient(1100px 520px at 20% -10%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1000px 520px at 88% 105%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(135deg, #0a1b20 0%, #0b2028 55%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-cc .cc-capabilities::before {
    /* subtle mesh that fades toward edges */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 28px);
    mask-image: radial-gradient(70% 70% at 55% 40%, black 55%, transparent 100%);
    opacity: 0.45; }
  .usx-cc .cc-capabilities .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-cc .cc-capabilities h2 {
    margin: 0 0 24px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(30px, 4.8vw, 44px);
    color: #fff; }
  .usx-cc .cc-capabilities .features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 900px) {
    .usx-cc .cc-capabilities .features-grid {
      grid-template-columns: 1fr; } }
  .usx-cc .cc-capabilities .feature-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    /* text | icon */
    align-items: center;
    gap: 14px;
    padding: 22px 18px 18px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease, background 0.22s ease;
    isolation: isolate; }
  .usx-cc .cc-capabilities .feature-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.95; }
  .usx-cc .cc-capabilities .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-cc .cc-capabilities .feature-text h3 {
    margin: 6px 0 6px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.15px; }
  .usx-cc .cc-capabilities .feature-text p {
    margin: 0;
    color: #cfe5e0;
    font-size: 1.04rem;
    line-height: 1.65; }
  .usx-cc .cc-capabilities .feature-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: radial-gradient(120% 120% at 25% 15%, rgba(68, 215, 182, 0.26), transparent 60%), radial-gradient(120% 120% at 80% 85%, rgba(106, 163, 255, 0.22), transparent 60%), #0e151b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28); }
  .usx-cc .cc-capabilities .feature-image img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: brightness(1.06) contrast(1.06) saturate(1.05); }
  @media (max-width: 480px) {
    .usx-cc .cc-capabilities .feature-card {
      grid-template-columns: 1fr; }
    .usx-cc .cc-capabilities .feature-image {
      justify-self: start;
      margin-top: 6px; } }
  .usx-cc .cc-frameworks {
    position: relative;
    padding: 84px 0 76px;
    /* distinct background: lighter teal core + soft blue edge */
    background: radial-gradient(1100px 520px at 18% -10%, rgba(68, 215, 182, 0.2), transparent 60%), radial-gradient(1000px 480px at 88% 110%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(180deg, #0b1820 0%, #0a1218 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-cc .cc-frameworks .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-cc .cc-frameworks h2 {
    margin: 0 0 18px;
    text-align: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(28px, 4.6vw, 40px); }
  .usx-cc .cc-frameworks .logo-row {
    list-style: none;
    margin: 14px auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 28px; }
  .usx-cc .cc-frameworks .logo-row li {
    flex: 0 1 auto;
    display: grid;
    place-items: center;
    width: 200px;
    height: 270px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0f171e, #0c1218);
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease; }
  .usx-cc .cc-frameworks .logo-row li::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-cc .cc-frameworks .logo-row li:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-cc .cc-frameworks .logo-row img {
    display: block;
    max-width: 100%;
    max-height: 160px;
    /* tune so all sit on one visual baseline */
    object-fit: contain;
    filter: grayscale(100%) brightness(1.1) contrast(0.9);
    opacity: 0.9;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease; }
  .usx-cc .cc-frameworks .logo-row li:hover img {
    filter: none;
    opacity: 1;
    transform: translateY(-1px); }
  @media (max-width: 920px) {
    .usx-cc .cc-frameworks .logo-row {
      gap: 20px 22px; }
    .usx-cc .cc-frameworks .logo-row li {
      width: 140px;
      height: 64px; }
    .usx-cc .cc-frameworks .logo-row img {
      max-height: 30px; } }
  @media (max-width: 560px) {
    .usx-cc .cc-frameworks .logo-row {
      gap: 16px 16px; }
    .usx-cc .cc-frameworks .logo-row li {
      width: 46%;
      min-width: 150px; } }
  @media (max-width: 380px) {
    .usx-cc .cc-frameworks .logo-row li {
      width: 100%; } }
  .usx-cc .cc-case {
    position: relative;
    padding: 100px 0 94px;
    /* distinct background: teal-forward with soft conic sweep */
    background: conic-gradient(from 210deg at 78% 30%, rgba(68, 215, 182, 0.14), transparent 40% 100%), radial-gradient(1000px 520px at 16% 110%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(90deg, #0a1820 0%, #0c1f28 50%, #0a1117 100%);
    border-block: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-cc .cc-case .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-cc .cc-case .case-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    /* text | art */
    gap: 28px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 25, 33, 0.95), rgba(11, 17, 23, 0.95));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
  .usx-cc .cc-case .case-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(68, 215, 182, 0.08), rgba(106, 163, 255, 0.06) 45%, transparent 60%); }
  .usx-cc .cc-case .case-text h2 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.6vw, 40px);
    color: #fff; }
  .usx-cc .cc-case .case-text p {
    margin: 0 0 18px;
    color: #cfe5e0;
    line-height: 1.7;
    font-size: 1.08rem;
    max-width: 58ch; }
  .usx-cc .cc-case .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #eaf7f3;
    background: transparent;
    border: 2px solid transparent;
    background-image: linear-gradient(#0f171e, #0f171e), linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.2s ease, color 0.2s ease; }
  .usx-cc .cc-case .btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: #071115; }
  .usx-cc .cc-case .case-art {
    justify-self: end;
    max-width: clamp(420px, 46vw, 880px); }
  .usx-cc .cc-case .case-art img {
    display: block;
    width: 104%;
    max-width: none;
    transform: translateX(-3%);
    border-radius: 16px;
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55)); }
  .usx-cc .cc-case .case-art:has(img[src=""]),
  .usx-cc .cc-case .case-art:has(img:not([src])) {
    display: none; }
  .usx-cc .cc-case .case-wrap:has(.case-art:empty),
  .usx-cc .cc-case .case-wrap:has(.case-art:has(img[src=""])),
  .usx-cc .cc-case .case-wrap:has(.case-art:has(img:not([src]))) {
    grid-template-columns: 1fr; }
  @media (min-width: 1200px) {
    .usx-cc .cc-case {
      padding: 112px 0 104px; }
    .usx-cc .cc-case .case-wrap {
      gap: 32px; } }
  @media (max-width: 980px) {
    .usx-cc .cc-case .case-wrap {
      grid-template-columns: 1fr;
      padding: 22px;
      gap: 18px; }
    .usx-cc .cc-case .case-art {
      justify-self: start;
      max-width: 100%; }
    .usx-cc .cc-case .case-art img {
      width: 100%;
      transform: none; } }
  @media (max-width: 420px) {
    .usx-cc .cc-case .btn-ghost {
      width: 100%;
      justify-content: center; } }

.usx-guardient {
  /* =========================
   HERO SECTION
   ========================= */
  /* optional overlay for a soft diagonal sheen */
  /* primary (if you use it in the hero) */
  /* outline variant (your style, upgraded) */
  /* better spacing/layout for the action row */
  /* make the hero image larger on desktop while staying responsive */
  /* responsive */
  /* =========================
   GUARDIENT — Key Outcomes (Metrics)
========================= */
  /* optional soft vignette at the bottom for depth—remove if you want it flatter */
  /* Centered headline, big and airy */
  /* Grid of metric cards */
  /* Card */
  /* Massive number row */
  /* Thin gradient rule like the example */
  /* Description */
  /* Hover polish (very light) */
  /* =========================
   GUARDIENT — Modules Summary (no images)
========================= */
  /* Grid: wider cards now that images are gone */
  /* Cards (text-forward) */
  /* Typography */
  /* Chip stays anchored at the bottom */
  /* Tighten layout on very small screens */
  /* =========================
   GUARDIENT TIERS — Coverage Matrix
   (styles the HTML you pasted)
========================= */
  /* Header */
  /* Matrix container */
  /* Base row layout: Feature | X1 | X2 | X3 */
  /* Cells */
  /* Head row: colorful band */
  /* Subtle row hover */
  /* Column highlight (recommend a tier) — add .reco-x2 or .reco-x3 to .mini-compare */
  /* CTA under the table */
  /* Responsive: bump font slightly for readability, keep scroll */
  /* =========================
   FAQ (Details/Accordion)
   works with: <section class="gx-faq">…</section>
========================= */
  /* Summary line */
  /* Custom chevron */
  /* Answer body */
  /* Hover/focus states */ }
  .usx-guardient .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 140px 0 120px;
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient 800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%, linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-guardient .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-guardient .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 60px; }
  .usx-guardient .hero-content h1 {
    font-size: 3rem;
    line-height: 0.5;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-guardient .hero-content p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 36px; }
  .usx-guardient .hero .btn,
  .usx-guardient .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-guardient .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .usx-guardient .hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-guardient .hero .btn--outline {
    background: transparent;
    border: 2px solid var(--sx-accent, #44d7b6);
    color: var(--sx-accent, #44d7b6);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .usx-guardient .hero .btn--outline:hover {
    background: var(--sx-accent, #44d7b6);
    color: #071115;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
  .usx-guardient .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    margin-top: 14px; }
  .usx-guardient .hero-visual {
    position: relative;
    width: 100%;
    /* clamp: min on small screens, scale by viewport in middle, cap at a max */
    max-width: clamp(420px, 46vw, 880px);
    margin-left: auto;
    /* pushes image to the right in 2-col layouts */ }
  .usx-guardient .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
    border-radius: 14px; }
  @media (max-width: 1024px) {
    .usx-guardient .hero-container {
      grid-template-columns: 1fr;
      text-align: center; }
    .usx-guardient .hero-content h1 {
      font-size: 2.4rem; }
    .usx-guardient .hero-visual {
      margin-top: 40px; } }
  .usx-guardient .gx-metrics {
    background: radial-gradient(1200px 520px at 15% -10%, rgba(68, 215, 182, 0.18), transparent 60%), radial-gradient(1200px 520px at 85% 0%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(135deg, rgba(68, 215, 182, 0.08) 0%, rgba(106, 163, 255, 0.08) 48%, transparent 48%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    padding: 120px 0 110px; }
  .usx-guardient .gx-metrics::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 360px at 50% 120%, rgba(106, 163, 255, 0.08), transparent 70%); }
  .usx-guardient .gx-metrics .container {
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-guardient .metrics-head {
    text-align: center;
    margin: 0 0 18px; }
  .usx-guardient .metrics-head h2 {
    margin: 0;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: #fff;
    margin-inline: auto; }
  .usx-guardient .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 980px) {
    .usx-guardient .metrics-grid {
      grid-template-columns: 1fr; } }
  .usx-guardient .metric-card {
    background: #0e151b;
    border: 1px solid var(--sx-border);
    border-radius: 20px;
    padding: 24px 24px 22px;
    box-shadow: var(--sx-shadow-1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; }
  .usx-guardient .metric-top {
    display: flex;
    align-items: baseline;
    min-height: 84px; }
  .usx-guardient .metric-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff; }
  .usx-guardient .metric-value .num {
    font-weight: 900;
    font-size: clamp(48px, 8vw, 80px);
    /* big */
    line-height: 1; }
  .usx-guardient .metric-value .unit,
  .usx-guardient .metric-value .per,
  .usx-guardient .metric-value .currency {
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 28px);
    opacity: 0.95; }
  .usx-guardient .metric-rule {
    height: 2px;
    border: 0;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
    opacity: 0.85; }
  .usx-guardient .metric-desc {
    margin: 0;
    color: #eaf7f3;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    opacity: 0.92; }
  .usx-guardient .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-guardient .gx-modules {
    position: relative;
    padding: 96px 0 84px;
    background: radial-gradient(1200px 480px at 10% -15%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(1100px 460px at 90% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-block: 1px solid var(--sx-border);
    overflow: hidden; }
  .usx-guardient .gx-modules .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-guardient .gx-modules h2 {
    margin: 0 0 8px;
    color: #fff;
    font-weight: 800;
    font-size: clamp(28px, 4.6vw, 40px);
    letter-spacing: 0.2px; }
  .usx-guardient .gx-modules .sub {
    margin: 0 0 26px;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.08rem;
    line-height: 1.65; }
  .usx-guardient .module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 980px) {
    .usx-guardient .module-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    .usx-guardient .module-grid {
      grid-template-columns: 1fr; } }
  .usx-guardient .module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px 22px;
    min-height: 240px;
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    text-decoration: none; }
  .usx-guardient .module-card::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.9; }
  .usx-guardient .module-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #132029, #0f171e); }
  .usx-guardient .module-card h3 {
    margin: 4px 0 2px;
    color: #f3fbf8;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.15px; }
  .usx-guardient .module-card p {
    margin: 0;
    color: #d8eee9;
    font-size: 1.04rem;
    line-height: 1.68; }
  .usx-guardient .module-card .chip {
    margin-top: auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.84rem;
    letter-spacing: 0.2px;
    background: #0f161d;
    color: #eaf7f3;
    border: 1px solid var(--sx-border); }
  @media (max-width: 360px) {
    .usx-guardient .module-card {
      padding: 24px 18px 18px;
      min-height: 220px; } }
  .usx-guardient .gx-tiers-tabs {
    position: relative;
    padding: 96px 0 88px;
    background: radial-gradient(1100px 480px at 18% -15%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(1100px 480px at 82% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-block: 1px solid var(--sx-border);
    overflow: hidden;
    isolation: isolate; }
  .usx-guardient .gx-tiers-tabs .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-guardient .tiers-head {
    text-align: center;
    margin: 0 0 22px; }
  .usx-guardient .tiers-head h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(30px, 4.8vw, 44px);
    letter-spacing: 0.2px; }
  .usx-guardient .tiers-kicker {
    margin: 0 auto;
    max-width: 70ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 1.08rem;
    line-height: 1.65; }
  .usx-guardient .mini-compare {
    background: #0f151b;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    /* Enable horizontal scroll on small screens */
    overflow-x: auto; }
  .usx-guardient .mini-compare .row {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr;
    min-width: 720px;
    /* keeps columns readable before scroll */ }
  .usx-guardient .mini-compare .row > span {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #dcefed;
    line-height: 1.55; }
  .usx-guardient .mini-compare .row > span:nth-child(n + 2) {
    text-align: center;
    font-weight: 800; }
  .usx-guardient .mini-compare .row.head {
    background: linear-gradient(90deg, rgba(68, 215, 182, 0.18), rgba(106, 163, 255, 0.18));
    font-size: 1.08rem;
    letter-spacing: 0.2px; }
  .usx-guardient .mini-compare .row.head > span {
    color: #f6fffd;
    border-top: 0;
    font-weight: 900; }
  .usx-guardient .mini-compare .row:not(.head):hover {
    background: rgba(255, 255, 255, 0.02); }
  .usx-guardient .mini-compare.reco-x2 .row > span:nth-child(3),
  .usx-guardient .mini-compare.reco-x3 .row > span:nth-child(4) {
    background: rgba(68, 215, 182, 0.05); }
  .usx-guardient .mini-compare.reco-x2 .row.head > span:nth-child(3),
  .usx-guardient .mini-compare.reco-x3 .row.head > span:nth-child(4) {
    background: linear-gradient(90deg, rgba(68, 215, 182, 0.26), rgba(106, 163, 255, 0.26)); }
  .usx-guardient .tiers-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px; }
  .usx-guardient .tiers-cta .btn.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease; }
  .usx-guardient .tiers-cta .btn.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    filter: saturate(1.05); }
  .usx-guardient .tiers-subnote {
    margin: 0;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: 0.98rem;
    line-height: 1.55; }
  @media (max-width: 720px) {
    .usx-guardient .mini-compare {
      font-size: 1.04rem; }
    .usx-guardient .mini-compare .row > span {
      padding: 12px 14px; } }
  .usx-guardient .gx-faq {
    position: relative;
    padding: 88px 0 80px;
    background: radial-gradient(1100px 480px at 12% -15%, rgba(68, 215, 182, 0.12), transparent 60%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-top: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-bottom: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12)); }
  .usx-guardient .gx-faq .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-guardient .gx-faq h2 {
    margin: 0 0 16px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.2px;
    font-size: clamp(28px, 4.6vw, 40px); }
  .usx-guardient .faq-item {
    background: linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a));
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    padding: 0;
    margin: 10px 0;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    overflow: hidden; }
  .usx-guardient .faq-item > summary {
    list-style: none;
    /* remove default triangle bullet */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    color: #eaf7f3;
    font-weight: 800; }
  .usx-guardient .faq-item > summary::-webkit-details-marker {
    display: none; }
  .usx-guardient .faq-item > summary::after {
    content: "▸";
    /* simple caret; replace w/ SVG if you like */
    transition: transform 0.2s ease;
    font-size: 1.1rem;
    opacity: 0.9; }
  .usx-guardient .faq-item[open] > summary::after {
    transform: rotate(90deg); }
  .usx-guardient .faq-item > p {
    margin: 0;
    padding: 0 16px 16px 16px;
    color: #cfe5e0;
    line-height: 1.65;
    border-top: 1px solid rgba(255, 255, 255, 0.08); }
  @media (hover: hover) {
    .usx-guardient .faq-item > summary:hover {
      background: #0e141a; } }
  .usx-guardient .faq-item > summary:focus {
    outline: 2px solid rgba(68, 215, 182, 0.35);
    outline-offset: 2px; }

.usx-solutions {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   SOLUTION PACKAGES — Bold Cards Callout
========================= */
  /* Cards grid */
  /* Individual card */
  /* gradient accent ring */
  /* subtle glow backdrop */
  /* mini CTA row */
  /* Hover/active state */
  /* Make each card’s accent hue a bit different */
  /* Primary CTA */
  /* =========================
   COMPLIANCE ACCELERATOR (Revamped Premium Style)
========================= */
  /* Animated glow gradient overlay */
  /* === LEFT PANEL: Heading / Summary === */
  /* Floating badge */
  /* === RIGHT PANEL: Feature List === */
  /* === CTA Button === */
  /* =========================
   ADD-ON BLOCKS: Base + Theming via CSS vars
   Works for: #compliance-accelerator, #annual-pentest, #vciso, #visso
========================= */
  /* ---- Base tokens (fallbacks) ---- */
  /* ---- Section wrapper ---- */
  /* ---- Layout ---- */
  /* ---- Left panel (header) ---- */
  /* Floating badge (custom per section via --badge-text) */
  /* ---- Right panel (list) ---- */
  /* List label chip (override per section via --list-chip) */
  /* ---- CTA (optional) ---- */
  /* =========================
     Section-specific themes
  ========================= */
  /* Compliance Accelerator (as-is) */
  /* Annual Penetration Testing */
  /* vCISO Support */
  /* vISSO Support */
  /* =========================
   “Which Option Fits?” — premium decision cards
========================= */
  /* drifting backdrop orbs */
  /* Title with neon underline */
  /* Grid */
  /* Cards */
  /* conic halo per card */
  /* subtle gradient accent strip */
  /* Per-card accent color (nth-child) */
  /* left accent bar */
  /* Hover state */
  /* Headings & text */
  /* CTA area */
  /* Motion accessibility */ }
  .usx-solutions .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-solutions .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-solutions .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-solutions .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-solutions .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-solutions .hero .btn,
  .usx-solutions .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-solutions .solutions-callout {
    position: relative;
    padding: 84px 0 72px;
    background: radial-gradient(1100px 520px at 18% -12%, rgba(68, 215, 182, 0.22), transparent 60%), radial-gradient(1000px 520px at 84% 108%, rgba(106, 163, 255, 0.12), transparent 60%), linear-gradient(135deg, #0b141a 0%, #0c181f 52%, #0a1117 100%);
    border-bottom: 1px solid var(--sx-border, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    isolation: isolate; }
  .usx-solutions .solutions-callout .container {
    max-width: var(--sx-maxw, 1200px);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-solutions .callout-head {
    text-align: center;
    margin-bottom: 18px; }
  .usx-solutions #solutions-callout-title {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(32px, 5vw, 48px);
    text-wrap: balance; }
  .usx-solutions .callout-sub {
    margin: 0 auto;
    max-width: 70ch;
    color: var(--sx-text-dim, #cfe5e0);
    font-size: clamp(1.04rem, 1.4vw, 1.16rem);
    line-height: 1.65; }
  .usx-solutions .callout-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 26px 0 10px; }
  @media (max-width: 900px) {
    .usx-solutions .callout-cards {
      grid-template-columns: 1fr; } }
  .usx-solutions .callout-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 24px 22px 20px 26px;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) border-box, linear-gradient(180deg, var(--sx-panel, #11171d), var(--sx-panel-2, #0f141a)) padding-box;
    border: 1px solid transparent;
    border-radius: 20px;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35));
    transition: transform 0.18s ease, box-shadow 0.22s ease,
 border-color 0.22s ease, background 0.22s ease;
    color: inherit;
    overflow: hidden; }
  .usx-solutions .callout-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    opacity: 0.35; }
  .usx-solutions .callout-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: radial-gradient(600px 220px at 20% 0%, rgba(68, 215, 182, 0.1), transparent 70%), radial-gradient(600px 220px at 80% 100%, rgba(106, 163, 255, 0.08), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.7; }
  .usx-solutions .callout-card h3 {
    margin: 0;
    color: #f3fbf8;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.2vw, 22px); }
  .usx-solutions .callout-card p {
    margin: 0;
    color: #cfe5e0;
    line-height: 1.65;
    font-size: 1.06rem; }
  .usx-solutions .callout-card .cta {
    justify-self: start;
    margin-top: 6px;
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--sx-border, rgba(255, 255, 255, 0.14));
    color: #eaf7f3;
    background: #0f171e;
    transition: transform 0.18s ease, border-color 0.22s ease,
 background 0.22s ease; }
  .usx-solutions .callout-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    border-color: rgba(68, 215, 182, 0.45);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) border-box, linear-gradient(180deg, #14222b, #0f171e) padding-box; }
  .usx-solutions .callout-card:hover .cta {
    transform: translateY(-1px);
    border-color: rgba(68, 215, 182, 0.45);
    background: linear-gradient(180deg, #14222b, #0f171e); }
  .usx-solutions .callout-card:nth-child(2)::before {
    background: linear-gradient(135deg, var(--sx-accent-2, #6aa3ff), var(--sx-accent, #44d7b6)); }
  .usx-solutions .callout-card:nth-child(3)::before {
    background: linear-gradient(135deg, #ffb86b, var(--sx-accent, #44d7b6)); }
  .usx-solutions .callout-card:nth-child(4)::before {
    background: linear-gradient(135deg, #9a7bff, var(--sx-accent-2, #6aa3ff)); }
  .usx-solutions .solutions-callout .callout-cta {
    text-align: center;
    margin-top: 50px; }
  .usx-solutions .solutions-callout .btn.btn--primary {
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: var(--sx-shadow-1, 0 6px 24px rgba(0, 0, 0, 0.35)); }
  .usx-solutions .addon-block#compliance-accelerator {
    position: relative;
    padding: 120px 0 110px;
    background: linear-gradient(180deg, #081015 0%, #0b1218 60%, #060b10 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden; }
  .usx-solutions .addon-block#compliance-accelerator::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 600px at 10% -20%, rgba(68, 215, 182, 0.25), transparent 60%), radial-gradient(1000px 600px at 85% 120%, rgba(106, 163, 255, 0.15), transparent 70%);
    animation: gradientDrift 18s ease-in-out infinite alternate;
    z-index: 0; }

@keyframes gradientDrift {
  0% {
    transform: translateY(0px);
    opacity: 1; }
  100% {
    transform: translateY(20px);
    opacity: 0.9; } }
  .usx-solutions .addon-block#compliance-accelerator .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    gap: 40px; }
  @media (max-width: 900px) {
    .usx-solutions .addon-block#compliance-accelerator .container {
      grid-template-columns: 1fr;
      gap: 32px; } }
  .usx-solutions .addon-block#compliance-accelerator .addon-head {
    background: rgba(15, 25, 32, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 48px 40px;
    position: relative;
    transition: all 0.3s ease; }
  .usx-solutions .addon-block#compliance-accelerator .addon-head:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
  .usx-solutions .addon-block#compliance-accelerator .addon-head h2 {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 18px;
    background: linear-gradient(90deg, #44d7b6, #6aa3ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .usx-solutions .addon-block#compliance-accelerator .addon-summary {
    color: #cfe5e0;
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 62ch; }
  .usx-solutions .addon-block#compliance-accelerator .addon-head::after {
    content: "60-DAY ACCELERATOR";
    position: absolute;
    top: 18px;
    right: 20px;
    background: linear-gradient(90deg, #44d7b6, #6aa3ff);
    color: #062018;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.3px; }
  .usx-solutions .addon-block#compliance-accelerator .addon-points {
    background: rgba(18, 28, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.55);
    padding: 48px 36px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease; }
  .usx-solutions .addon-block#compliance-accelerator .addon-points:hover {
    border-color: rgba(68, 215, 182, 0.3);
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.65); }
  .usx-solutions .addon-block#compliance-accelerator .addon-points::before {
    content: "What You Get";
    position: absolute;
    top: 18px;
    left: 24px;
    background: linear-gradient(90deg, #44d7b6, #6aa3ff);
    color: #062018;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 999px; }
  .usx-solutions .addon-block#compliance-accelerator .addon-points li {
    position: relative;
    padding-left: 44px;
    color: #eaf8f3;
    font-size: 1.05rem;
    line-height: 1.7; }
  .usx-solutions .addon-block#compliance-accelerator .addon-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    background: linear-gradient(135deg, #44d7b6, #6aa3ff);
    color: #062018;
    font-weight: 900;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
  .usx-solutions .addon-block#compliance-accelerator .addon-cta {
    grid-column: 1 / -1;
    margin-top: 32px;
    text-align: center; }
  .usx-solutions .addon-block#compliance-accelerator .btn.btn--primary {
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 999px;
    background: linear-gradient(90deg, #44d7b6, #6aa3ff);
    color: #062018;
    font-size: 1rem;
    transition: all 0.25s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45); }
  .usx-solutions .addon-block#compliance-accelerator .btn.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
  .usx-solutions .addon-block {
    /* Per-section theme vars with sensible defaults */
    --accent-1: #44d7b6;
    --accent-2: #6aa3ff;
    --bg-top: #081015;
    --bg-mid: #0b1218;
    --bg-bot: #060b10;
    --card: rgba(15, 25, 32, 0.9);
    --panel: rgba(18, 28, 36, 0.85);
    --text: #ffffff;
    --muted: #cfe5e0;
    --chip-text: #062018;
    --badge-text: "FEATURED";
    --list-chip: "What You Get"; }
  .usx-solutions .addon-block {
    position: relative;
    padding: 120px 0 110px;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 60%, var(--bg-bot) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden; }
  .usx-solutions .addon-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 600px at 10% -20%, color-mix(in oklab, var(--accent-1), transparent 75%), transparent 60%), radial-gradient(1000px 600px at 85% 120%, color-mix(in oklab, var(--accent-2), transparent 85%), transparent 70%);
    animation: gradientDrift 18s ease-in-out infinite alternate;
    z-index: 0; }

@keyframes gradientDrift {
  0% {
    transform: translateY(0px);
    opacity: 1; }
  100% {
    transform: translateY(20px);
    opacity: 0.9; } }
  .usx-solutions .addon-block .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    gap: 40px; }
  @media (max-width: 900px) {
    .usx-solutions .addon-block .container {
      grid-template-columns: 1fr;
      gap: 32px; } }
  .usx-solutions .addon-block .addon-head {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 48px 40px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .usx-solutions .addon-block .addon-head:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
  .usx-solutions .addon-block .addon-head h2 {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    color: var(--text);
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .usx-solutions .addon-block .addon-summary {
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 62ch; }
  .usx-solutions .addon-block .addon-head::after {
    content: var(--badge-text);
    position: absolute;
    top: 18px;
    right: 20px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    color: var(--chip-text);
    font-weight: 800;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.3px; }
  .usx-solutions .addon-block .addon-points {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.55);
    padding: 48px 36px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  .usx-solutions .addon-block .addon-points:hover {
    border-color: color-mix(in oklab, var(--accent-1), transparent 70%);
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.65); }
  .usx-solutions .addon-block .addon-points::before {
    content: var(--list-chip);
    position: absolute;
    top: 18px;
    left: 24px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    color: var(--chip-text);
    font-weight: 800;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 999px; }
  .usx-solutions .addon-block .addon-points li {
    position: relative;
    padding-left: 44px;
    color: #eaf8f3;
    font-size: 1.05rem;
    line-height: 1.7; }
  .usx-solutions .addon-block .addon-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: var(--chip-text);
    font-weight: 900;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
  .usx-solutions .addon-block .addon-cta {
    grid-column: 1 / -1;
    margin-top: 32px;
    text-align: center; }
  .usx-solutions .addon-block .btn.btn--primary {
    padding: 16px 32px;
    font-weight: 800;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    color: var(--chip-text);
    font-size: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45); }
  .usx-solutions .addon-block .btn.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
  .usx-solutions #compliance-accelerator {
    --accent-1: #44d7b6;
    --accent-2: #6aa3ff;
    --badge-text: "60-DAY ACCELERATOR";
    --list-chip: "What You Get"; }
  .usx-solutions #annual-pentest {
    --accent-1: #ffb86b;
    --accent-2: #ff6a88;
    --badge-text: "ANNUAL REQUIRED";
    --list-chip: "Scope & Deliverables"; }
  .usx-solutions #vciso {
    --accent-1: #a3ff9b;
    --accent-2: #6ad6ff;
    --badge-text: "STRATEGIC LEADERSHIP";
    --list-chip: "Focus Areas"; }
  .usx-solutions #visso {
    --accent-1: #ffd36a;
    --accent-2: #7ef1c2;
    --badge-text: "HANDS-ON EXECUTION";
    --list-chip: "Core Activities"; }
  .usx-solutions .solutions-fit {
    --fit-bg-1: #070c12;
    --fit-bg-2: #0a1118;
    --fit-fg: #e8f3ff;
    --fit-muted: #a9bdcf;
    --ring: rgba(255, 255, 255, 0.08);
    /* accent sets per card (can tweak to your brand) */
    --x1-a: #44d7b6;
    --x1-b: #57e3d1;
    /* teal */
    --x2-a: #6aa3ff;
    --x2-b: #8cc0ff;
    /* blue */
    --x3-a: #ffd36a;
    --x3-b: #ffb86b;
    /* amber */
    position: relative;
    padding: 110px 0 100px;
    background: radial-gradient(1200px 600px at 10% -20%, rgba(68, 215, 182, 0.08), transparent 60%), radial-gradient(900px 600px at 85% 120%, rgba(106, 163, 255, 0.08), transparent 70%), linear-gradient(180deg, var(--fit-bg-1), var(--fit-bg-2));
    border-top: 1px solid var(--ring);
    border-bottom: 1px solid var(--ring);
    overflow: hidden; }
  .usx-solutions .solutions-fit::before,
  .usx-solutions .solutions-fit::after {
    content: "";
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.08;
    z-index: 0; }
  .usx-solutions .solutions-fit::before {
    left: -20vmax;
    top: -28vmax;
    background: conic-gradient(from 120deg, var(--x1-a), transparent 30%, var(--x2-a), transparent 60%, var(--x3-a));
    animation: floatA 22s ease-in-out infinite alternate; }
  .usx-solutions .solutions-fit::after {
    right: -18vmax;
    bottom: -30vmax;
    background: conic-gradient(from -30deg, var(--x2-b), transparent 35%, var(--x3-b), transparent 70%, var(--x1-b));
    animation: floatB 28s ease-in-out infinite alternate; }

@keyframes floatA {
  to {
    transform: translateY(18px) rotate(8deg); } }

@keyframes floatB {
  to {
    transform: translateY(-16px) rotate(-6deg); } }
  .usx-solutions .solutions-fit .container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px; }
  .usx-solutions #fit-title {
    margin: 0 0 28px;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--fit-fg);
    display: inline-block;
    background: linear-gradient(90deg, var(--x1-a), var(--x2-a), var(--x3-a));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative; }
  .usx-solutions #fit-title::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--x1-a), var(--x2-a), var(--x3-a));
    box-shadow: 0 0 24px rgba(106, 163, 255, 0.35); }
  .usx-solutions .fit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 32px; }
  @media (max-width: 960px) {
    .usx-solutions .fit-grid {
      grid-template-columns: 1fr; } }
  .usx-solutions .fit-card {
    position: relative;
    overflow: hidden;
    padding: 28px 26px 26px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--ring);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    transform-style: preserve-3d;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
 border-color 0.25s ease;
    isolation: isolate; }
  .usx-solutions .fit-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg, var(--x1-a), var(--x2-a), var(--x3-a), transparent 45%);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    border-radius: 18px;
    opacity: 0.25;
    z-index: 0;
    transition: opacity 0.25s ease; }
  .usx-solutions .fit-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.09), transparent 50%);
    z-index: 0; }
  .usx-solutions .fit-card:nth-child(1) {
    --accent-a: var(--x1-a);
    --accent-b: var(--x1-b); }
  .usx-solutions .fit-card:nth-child(2) {
    --accent-a: var(--x2-a);
    --accent-b: var(--x2-b); }
  .usx-solutions .fit-card:nth-child(3) {
    --accent-a: var(--x3-a);
    --accent-b: var(--x3-b); }
  .usx-solutions .fit-card {
    border-left: 2px solid color-mix(in oklab, var(--accent-a) 70%, transparent);
    box-shadow: inset 4px 0 0 color-mix(in oklab, var(--accent-a) 35%, transparent), 0 18px 40px rgba(0, 0, 0, 0.35); }
  .usx-solutions .fit-card:hover {
    transform: translateY(-6px) rotateX(1deg);
    border-color: color-mix(in oklab, var(--accent-a) 40%, white 0%);
    box-shadow: inset 4px 0 0 color-mix(in oklab, var(--accent-a) 55%, transparent), 0 30px 70px rgba(0, 0, 0, 0.45); }
  .usx-solutions .fit-card:hover::before {
    opacity: 0.48; }
  .usx-solutions .fit-card h3 {
    margin: 0 0 10px;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.25;
    color: var(--fit-fg);
    font-weight: 800; }
  .usx-solutions .fit-card p {
    margin: 0;
    color: var(--fit-muted);
    font-size: 1rem;
    line-height: 1.65; }
  .usx-solutions .fit-card p strong {
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900; }
  .usx-solutions .fit-cta {
    margin-top: 26px;
    text-align: center; }
  .usx-solutions .fit-cta .btn.btn--primary {
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(90deg, var(--x1-a), var(--x2-a), var(--x3-a));
    color: #06161a;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .usx-solutions .fit-cta .btn.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
  .usx-solutions .fit-note {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--fit-muted); }
  @media (prefers-reduced-motion: reduce) {
    .usx-solutions .solutions-fit::before,
    .usx-solutions .solutions-fit::after {
      animation: none; }
    .usx-solutions .fit-card,
    .usx-solutions .fit-cta .btn.btn--primary {
      transition: none; } }

.usx-soc2 {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   CMMC — Problem → Solution 
========================= */
  /* Headline + subhead */
  /* Grid */
  /* Cards */
  /* Accent bars (Problem vs Solution) = nth-child positioning in grid */
  /* Card headings */
  /* Lists */
  /* Bad (Problem) bullets = cross */
  /* Good (Solution) bullets = check */
  /* =========================
   CMMC — Key Outcomes (Metrics)
   Targets: .gx-metrics.cmmc-metrics and children
========================= */
  /* soft grid dots (subtle; no diagonals) */
  /* Headline: more air so it doesn’t feel bunched */
  /* Grid — 4 / 2 / 1 */
  /* Cards – match example chrome */
  /* thin embossed top accent like the example */
  /* hover polish */
  /* TOP ROW — force stack so labels never overflow */
  /* Special stacking for the TCO card: Up to / 40% / lower TCO */
  /* Rule & description */
  /* Motion preferences */
  /* =========================
   CMMC — How It Works (Policy → Proof)
   Targets: .how, .how-steps, .how-steps li
========================= */
  /* Heading */
  /* Steps Grid: 4-up on desktop, 2-up tablet, stacked on mobile */
  /* Step card */
  /* hover polish */
  /* Number badge */
  /* Thin top accent bar */
  /* Titles & body copy */
  /* Optional connectors (desktop only): subtle lines between cards to suggest flow */
  /* Reduce motion */
  /* =========================
   Learn band (Vanta-style cards, Guardient theme)
========================= */
  /* Headline like the example: large, friendly */
  /* Three equal cards */
  /* Card */
  /* Top media (clickable) */
  /* Title + blurb */
  /* Read more link with arrow */
  /* Optional: make each card’s image glow slightly on hover */
  /* =========================
   Customer Proof — Simple Split
========================= */
  /* Big headline (centered like example) */
  /* Split row */
  /* Image panel */
  /* Copy panel */
  /* One primary action (simple, bold) */ }
  .usx-soc2 .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-soc2 .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-soc2 .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-soc2 .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-soc2 .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-soc2 .hero .btn,
  .usx-soc2 .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-soc2 .cmmc-problem-solution {
    --cmmc-border: rgba(255, 255, 255, 0.12);
    --cmmc-text: #ffffff;
    --cmmc-text-dim: #cfe5e0;
    --cmmc-panel-1: #11171d;
    --cmmc-panel-2: #0f141a;
    --cmmc-accent-1: #44d7b6;
    /* teal */
    --cmmc-accent-2: #6aa3ff;
    /* blue */
    position: relative;
    padding: 120px 0 110px;
    background: radial-gradient(1200px 520px at 15% -10%, rgba(68, 215, 182, 0.18), transparent 60%), radial-gradient(1200px 520px at 85% 0%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(135deg, rgba(68, 215, 182, 0.08) 0%, rgba(106, 163, 255, 0.08) 48%, transparent 48%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-top: 1px solid var(--cmmc-border);
    border-bottom: 1px solid var(--cmmc-border);
    overflow: hidden; }
  .usx-soc2 .cmmc-problem-solution::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 360px at 50% 120%, rgba(106, 163, 255, 0.08), transparent 70%); }
  .usx-soc2 .cmmc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-soc2 .cmmc-problem-solution h2 {
    margin: 0 0 10px;
    color: var(--cmmc-text);
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-soc2 .cmmc-subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 70ch;
    color: var(--cmmc-text-dim);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-soc2 .cps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-soc2 .cps-grid {
      grid-template-columns: 1fr; } }
  .usx-soc2 .cps-card {
    position: relative;
    background: linear-gradient(180deg, var(--cmmc-panel-1), var(--cmmc-panel-2));
    border: 1px solid var(--cmmc-border);
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-soc2 .cps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-soc2 .cps-grid .cps-card:nth-child(1)::before,
  .usx-soc2 .cps-grid .cps-card:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-soc2 .cps-grid .cps-card:nth-child(1)::before {
    background: linear-gradient(90deg, #ff6a6a, #ff3b3b);
    /* Problem */ }
  .usx-soc2 .cps-grid .cps-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--cmmc-accent-1), var(--cmmc-accent-2));
    /* Solution */ }
  .usx-soc2 .cps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-soc2 .cps-list {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-soc2 .cps-list li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-soc2 .cps-list--bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #ff9a9a;
    background: rgba(255, 75, 75, 0.12);
    border: 1px solid rgba(255, 75, 75, 0.35);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-soc2 .cps-list--good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--cmmc-accent-1), var(--cmmc-accent-2));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-soc2 .gx-metrics.cmmc-metrics {
    /* palette */
    --accent-1: #44d7b6;
    /* teal */
    --accent-2: #6aa3ff;
    /* blue */
    --bg-top: #0b131a;
    --bg-bot: #0d1821;
    --panel: #0e151b;
    --text-hi: #fff;
    --text-lo: #cfe5e0;
    --border: rgba(255, 255, 255, 0.12);
    position: relative;
    padding: 120px 0 110px;
    color: var(--text-lo);
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.14), transparent 70%), radial-gradient(1000px 380px at 50% 110%, rgba(68, 215, 182, 0.12), transparent 70%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    overflow: hidden; }
  .usx-soc2 .gx-metrics.cmmc-metrics::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.2px);
    background-size: 48px 48px, 48px 48px, 22px 22px;
    mix-blend-mode: soft-light;
    opacity: 0.08; }
  .usx-soc2 .gx-metrics.cmmc-metrics .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metrics-head {
    text-align: center;
    margin: 0 0 26px; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metrics-head h2 {
    margin: 0 auto;
    max-width: 32ch;
    color: var(--text-hi);
    font-weight: 900;
    font-size: clamp(30px, 4.2vw, 42px);
    line-height: 1.28;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch; }
  @media (max-width: 1200px) {
    .usx-soc2 .gx-metrics.cmmc-metrics .metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .usx-soc2 .gx-metrics.cmmc-metrics .metrics-grid {
      grid-template-columns: 1fr; } }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card {
    background: linear-gradient(180deg, var(--panel), rgba(14, 21, 27, 0.92));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px 24px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* keep everything inside */
    min-width: 0;
    /* allow flex children to shrink */
    position: relative; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.85; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-top {
    display: flex;
    align-items: flex-end;
    min-height: 96px;
    /* consistent header band on desktop */ }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-value {
    display: flex;
    flex-wrap: wrap;
    /* critical: let unit wrap below number */
    align-items: flex-end;
    column-gap: 10px;
    row-gap: 4px;
    color: #fff;
    min-width: 0;
    /* prevent overflow push */ }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-value .num {
    font-weight: 900;
    font-size: clamp(46px, 7.2vw, 76px);
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    /* keep the number intact */ }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-value .unit {
    flex-basis: 100%;
    /* always drop to the next line */
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 26px);
    line-height: 1.2;
    opacity: 0.95; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card--tco .metric-value {
    align-items: flex-start; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .pre {
    flex-basis: 100%;
    font-weight: 800;
    font-size: clamp(16px, 1.9vw, 22px);
    opacity: 0.9;
    letter-spacing: 0.3px; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .num {
    font-size: clamp(52px, 8vw, 88px); }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .unit {
    margin-top: 2px; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-rule {
    height: 2px;
    border: 0;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.9; }
  .usx-soc2 .gx-metrics.cmmc-metrics .metric-desc {
    margin: 0;
    color: #eaf7f3;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    opacity: 0.92; }
  @media (prefers-reduced-motion: reduce) {
    .usx-soc2 .gx-metrics.cmmc-metrics .metric-card {
      transition: none; } }
  .usx-soc2 .how {
    /* palette (aligns with your teal/blue site colors) */
    --accent-1: #44d7b6;
    /* teal */
    --accent-2: #6aa3ff;
    /* blue */
    --bg-top: #0b131a;
    /* slate dusk */
    --bg-bot: #0d1821;
    --panel-1: #11171d;
    --panel-2: #0f141a;
    --text-hi: #ffffff;
    --text-lo: #cfe5e0;
    --border: rgba(255, 255, 255, 0.12);
    position: relative;
    padding: 110px 0 100px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.14), transparent 70%), radial-gradient(1000px 360px at 50% 110%, rgba(68, 215, 182, 0.12), transparent 70%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    overflow: hidden; }
  .usx-soc2 .how .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-soc2 #how-title {
    margin: 0 0 26px;
    font-weight: 900;
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: whitesmoke;
    text-align: center; }
  .usx-soc2 .how-steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 1080px) {
    .usx-soc2 .how-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) {
    .usx-soc2 .how-steps {
      grid-template-columns: 1fr; } }
  .usx-soc2 .how-steps > li {
    position: relative;
    background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px 18px 20px;
    color: var(--text-lo);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease;
    min-height: 170px; }
  .usx-soc2 .how-steps > li:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.54); }
  .usx-soc2 .how-steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -18px;
    left: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.05rem;
    color: #062018;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  .usx-soc2 .how-steps > li::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.85; }
  .usx-soc2 .how-steps h3 {
    margin: 8px 0 8px;
    font-weight: 850;
    font-size: clamp(18px, 2.1vw, 22px);
    color: var(--text-hi); }
  .usx-soc2 .how-steps p {
    margin: 0;
    line-height: 1.65;
    font-size: 1.02rem; }
  @media (min-width: 1081px) {
    .usx-soc2 {
      /* for safety if any */
      /* no effect, just guard */
      /* guard */ }
      .usx-soc2 .how-steps > li {
        /* ensure space for connector pseudo-el */
        overflow: visible; }
      .usx-soc2 .how-steps > li:not(:last-child)::marker {
        content: ""; }
      .usx-soc2 .how-steps > li:not(:last-child) .connector {
        display: none; }
      .usx-soc2 .how-steps > li:not(:last-child) {
        /* draw a faint connector from center-right to next card center-left */ }
      .usx-soc2 .how-steps > li:not(:last-child)::selection {
        background: transparent; }
      .usx-soc2 .how-steps > li:not(:last-child)::part(connector) {
        display: none; }
      .usx-soc2 .how-steps > li:not(:last-child)::before {
        /* keep number badge above connectors */
        z-index: 2; }
      .usx-soc2 .how-steps > li:not(:last-child)::after {
        /* keep accent bar above as well */
        z-index: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .usx-soc2 .how-steps > li {
      transition: none; } }
  .usx-soc2 .learn-band {
    --accent1: #44d7b6;
    /* teal */
    --accent2: #6aa3ff;
    /* blue */
    --ink: #ffffff;
    --muted: #cfe5e0;
    --panel: #0f141a;
    --bg1: #0b131a;
    --bg2: #0d1821;
    --border: rgba(255, 255, 255, 0.12);
    padding: 64px 0 72px;
    background: radial-gradient(900px 320px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--bg1), var(--bg2)); }
  .usx-soc2 .learn-container {
    max-width: 1120px;
    /* narrower so it doesn’t dominate */
    margin: 0 auto;
    padding: 0 20px; }
  .usx-soc2 #learn-title {
    margin: 0 0 22px;
    text-align: center;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15; }
  .usx-soc2 .learn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 980px) {
    .usx-soc2 .learn-grid {
      grid-template-columns: 1fr; } }
  .usx-soc2 .learn-card {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .usx-soc2 .learn-card .card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* consistent crop like the example */
    border-radius: 18px;
    background: radial-gradient(120% 70% at 50% 10%, rgba(255, 255, 255, 0.08), transparent 55%), var(--img) center/cover no-repeat;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .usx-soc2 .learn-card .card-media:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
  .usx-soc2 .card-title {
    margin: 2px 0 2px;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.2px; }
  .usx-soc2 .card-blurb {
    margin: 0 0 6px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-soc2 .card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative; }
  .usx-soc2 .card-link .arrow {
    width: 18px;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    transition: transform 0.18s ease; }
  .usx-soc2 .card-link:hover .arrow {
    transform: translateX(2px); }
  .usx-soc2 .learn-card:hover .card-media {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); }
  .usx-soc2 .proof-simple {
    --accent1: #44d7b6;
    --accent2: #6aa3ff;
    --ink: #ffffff;
    --text: #e8f3ff;
    --muted: #b8c9d6;
    padding: 80px 0 96px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(1000px 360px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, #0b131a 0%, #0d1821 100%); }
  .usx-soc2 .proof-simple .container {
    max-width: 1320px;
    /* wider than default so it doesn't feel small */
    margin: 0 auto;
    padding: 0 28px; }
  .usx-soc2 #proof-headline {
    margin: 0 0 28px;
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--ink); }
  .usx-soc2 .proof-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: center; }
  @media (max-width: 980px) {
    .usx-soc2 .proof-row {
      grid-template-columns: 1fr;
      gap: 22px; } }
  .usx-soc2 .proof-img {
    margin: 0;
    border-radius: 24px;
    overflow: hidden; }
  .usx-soc2 .proof-img img {
    display: block;
    width: 100%;
    height: clamp(260px, 36vw, 420px);
    object-fit: cover;
    filter: grayscale(100%); }
  .usx-soc2 .proof-copy {
    padding: clamp(6px, 1vw, 12px) 0; }
  .usx-soc2 .proof-quote {
    margin: 0 0 10px;
    color: whitesmoke;
    font-weight: 900;
    font-size: clamp(20px, 2.6vw, 32px);
    line-height: 1.25;
    quotes: "“" "”" "‘" "’"; }
  .usx-soc2 .proof-quote::before {
    content: open-quote; }
  .usx-soc2 .proof-quote::after {
    content: close-quote; }
  .usx-soc2 .proof-by {
    margin: 6px 0 20px;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 16px); }
  .usx-soc2 .proof-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 800; }
  .usx-soc2 .proof-actions .btn.btn--primary {
    padding: 14px 22px;
    color: #062018;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .usx-soc2 .proof-actions .btn.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2); }

.usx-partner {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================================================
   PARTNER PAGE — SECTIONS
   Uses site tokens when available; safe fallbacks provided.
========================================================= */
  /* ---------- Shared primitives ---------- */
  /* =========================================================
   HERO (compact) — Partner
========================================================= */
  /* =========================================================
   PATHS — Reseller vs Referral
========================================================= */
  /* =========================================================
   BENEFITS — 4 cards
========================================================= */
  /* =========================================================
   HOW IT WORKS — Split flows
========================================================= */
  /* =========================
   Customer Proof — Simple Split
========================= */
  /* Big headline (centered like example) */
  /* Split row */
  /* Image panel */
  /* Copy panel */
  /* One primary action (simple, bold) */
  /* =========================================================
   CTA — Apply to Partner
========================================================= */ }
  .usx-partner .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-partner .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-partner .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-partner .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-partner .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-partner .hero .btn,
  .usx-partner .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-partner .section-head {
    text-align: center;
    margin-bottom: 22px; }
  .usx-partner .section-head h2 {
    margin: 0 0 10px;
    font-weight: 900;
    color: #fff;
    font-size: clamp(30px, 4.8vw, 44px);
    line-height: 1.15;
    letter-spacing: 0.2px; }
  .usx-partner .section-head .subheading {
    margin: 0 auto;
    max-width: 70ch;
    color: var(--p-dim);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.7; }
  .usx-partner .container {
    max-width: var(--p-maxw);
    margin: 0 auto;
    padding: 0 20px; }
  .usx-partner .partner-hero {
    background: radial-gradient(900px 320px at 18% -8%, rgba(68, 215, 182, 0.1), transparent 60%), radial-gradient(720px 320px at 82% 0%, rgba(106, 163, 255, 0.08), transparent 60%), linear-gradient(180deg, var(--p-bg-1), var(--p-bg-2)); }
  .usx-partner .partner-hero .hero-container {
    max-width: var(--p-maxw); }
  .usx-partner .partner-hero .hero-content .hero-sub {
    color: var(--p-dim);
    max-width: 64ch; }
  .usx-partner .partner-hero .hero-visual {
    max-width: clamp(200px, 28vw, 420px); }
  @media (max-width: 1024px) {
    .usx-partner .partner-hero .hero-visual {
      max-width: clamp(180px, 56vw, 360px); } }
  .usx-partner .partner-paths {
    padding: 90px 0 80px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--p-bg-1), var(--p-bg-2));
    border-top: 1px solid var(--p-border);
    border-bottom: 1px solid var(--p-border); }
  .usx-partner .paths-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 980px) {
    .usx-partner .paths-grid {
      grid-template-columns: 1fr; } }
  .usx-partner .path-card {
    position: relative;
    background: linear-gradient(180deg, var(--p-panel-1), var(--p-panel-2));
    border: 1px solid var(--p-border);
    border-radius: 20px;
    padding: 22px 20px 18px;
    box-shadow: var(--p-shadow-1);
    color: var(--p-dim);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-partner .path-card::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--p-accent-1), var(--p-accent-2));
    opacity: 0.9; }
  .usx-partner .path-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: var(--p-shadow-2); }
  .usx-partner .path-head h3 {
    margin: 8px 0 4px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2vw, 22px); }
  .usx-partner .path-head .path-kicker {
    margin: 0 0 12px;
    color: var(--p-dim); }
  .usx-partner .path-points {
    margin: 0 0 14px;
    padding: 0 0 0 18px; }
  .usx-partner .path-points li {
    margin: 6px 0;
    line-height: 1.65; }
  .usx-partner .path-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; }
  .usx-partner .partner-benefits {
    padding: 88px 0 78px;
    background: radial-gradient(1000px 320px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, var(--p-bg-1), var(--p-bg-2)); }
  .usx-partner .benefits-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1180px) {
    .usx-partner .benefits-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .usx-partner .benefits-grid {
      grid-template-columns: 1fr; } }
  .usx-partner .benefit-card {
    background: linear-gradient(180deg, var(--p-panel-1), var(--p-panel-2));
    border: 1px solid var(--p-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--p-shadow-1);
    color: var(--p-dim);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-partner .benefit-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.28);
    box-shadow: var(--p-shadow-2); }
  .usx-partner .benefit-card img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12); }
  .usx-partner .benefit-card h3 {
    margin: 2px 0 6px;
    font-weight: 900;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.2px; }
  .usx-partner .benefit-card p {
    margin: 0;
    line-height: 1.65; }
  .usx-partner .partner-how {
    padding: 90px 0 80px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--p-bg-1), var(--p-bg-2)); }
  .usx-partner .partner-how .container > h2 {
    text-align: center;
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(28px, 4.6vw, 40px); }
  .usx-partner .how-split {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 980px) {
    .usx-partner .how-split {
      grid-template-columns: 1fr; } }
  .usx-partner .how-col {
    background: linear-gradient(180deg, var(--p-panel-1), var(--p-panel-2));
    border: 1px solid var(--p-border);
    border-radius: 20px;
    padding: 18px 18px 16px;
    box-shadow: var(--p-shadow-1);
    color: var(--p-dim); }
  .usx-partner .how-col > h3 {
    margin: 2px 0 10px;
    font-weight: 900;
    color: #fff;
    font-size: 1.05rem; }
  .usx-partner .how-steps {
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px; }
  .usx-partner .how-steps li {
    position: relative;
    padding-left: 56px;
    min-height: 44px; }
  .usx-partner .how-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #062018;
    background: linear-gradient(135deg, var(--p-accent-1), var(--p-accent-2));
    border: 1px solid rgba(255, 255, 255, 0.22); }
  .usx-partner .how-steps h4 {
    margin: 0 0 4px;
    font-weight: 800;
    color: #fff;
    font-size: 1rem; }
  .usx-partner .how-steps p {
    margin: 0;
    line-height: 1.65; }
  .usx-partner .proof-simple {
    --accent1: #44d7b6;
    --accent2: #6aa3ff;
    --ink: #ffffff;
    --text: #e8f3ff;
    --muted: #b8c9d6;
    padding: 80px 0 96px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(1000px 360px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, #0b131a 0%, #0d1821 100%); }
  .usx-partner .proof-simple .container {
    max-width: 1320px;
    /* wider than default so it doesn't feel small */
    margin: 0 auto;
    padding: 0 28px; }
  .usx-partner #proof-headline {
    margin: 0 0 28px;
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--ink); }
  .usx-partner .proof-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: center; }
  @media (max-width: 980px) {
    .usx-partner .proof-row {
      grid-template-columns: 1fr;
      gap: 22px; } }
  .usx-partner .proof-img {
    margin: 0;
    border-radius: 24px;
    overflow: hidden; }
  .usx-partner .proof-img img {
    display: block;
    width: 100%;
    height: clamp(260px, 36vw, 420px);
    object-fit: cover;
    filter: grayscale(100%); }
  .usx-partner .proof-copy {
    padding: clamp(6px, 1vw, 12px) 0; }
  .usx-partner .proof-quote {
    margin: 0 0 10px;
    color: whitesmoke;
    font-weight: 900;
    font-size: clamp(20px, 2.6vw, 32px);
    line-height: 1.25;
    quotes: "“" "”" "‘" "’"; }
  .usx-partner .proof-quote::before {
    content: open-quote; }
  .usx-partner .proof-quote::after {
    content: close-quote; }
  .usx-partner .proof-by {
    margin: 6px 0 20px;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 16px); }
  .usx-partner .proof-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 800; }
  .usx-partner .proof-actions .btn.btn--primary {
    padding: 14px 22px;
    color: #062018;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .usx-partner .proof-actions .btn.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2); }
  .usx-partner .partner-cta {
    padding: 90px 0 90px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--p-bg-1), var(--p-bg-2));
    border-top: 1px solid var(--p-border); }
  .usx-partner .demo-container {
    max-width: var(--p-maxw);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 22px;
    grid-template-columns: 1.1fr 0.9fr; }
  @media (max-width: 980px) {
    .usx-partner .demo-container {
      grid-template-columns: 1fr; } }
  .usx-partner .demo-text {
    background: linear-gradient(180deg, var(--p-panel-1), var(--p-panel-2));
    border: 1px solid var(--p-border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--p-shadow-1);
    color: var(--p-dim); }
  .usx-partner .demo-text h2 {
    margin: 0 0 8px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(24px, 3.8vw, 34px); }
  .usx-partner .demo-text p {
    margin: 0 0 10px; }
  .usx-partner .demo-text ul {
    margin: 0;
    padding-left: 18px; }
  .usx-partner .demo-form select {
    background: #0e151b;
    color: #eaf7f3;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 12px 12px;
    font-size: 1rem; }

.usx-ccmc {
  /* =========================
   HERO SECTION (size-adjusted)
========================= */
  /* =========================
   CMMC — Problem → Solution 
========================= */
  /* Headline + subhead */
  /* Grid */
  /* Cards */
  /* Accent bars (Problem vs Solution) = nth-child positioning in grid */
  /* Card headings */
  /* Lists */
  /* Bad (Problem) bullets = cross */
  /* Good (Solution) bullets = check */
  /* =========================
   CMMC — Key Outcomes (Metrics)
   Targets: .gx-metrics.cmmc-metrics and children
========================= */
  /* soft grid dots (subtle; no diagonals) */
  /* Headline: more air so it doesn’t feel bunched */
  /* Grid — 4 / 2 / 1 */
  /* Cards – match example chrome */
  /* thin embossed top accent like the example */
  /* hover polish */
  /* TOP ROW — force stack so labels never overflow */
  /* Special stacking for the TCO card: Up to / 40% / lower TCO */
  /* Rule & description */
  /* Motion preferences */
  /* =========================
   CMMC — How It Works (Policy → Proof)
   Targets: .how, .how-steps, .how-steps li
========================= */
  /* Heading */
  /* Steps Grid: 4-up on desktop, 2-up tablet, stacked on mobile */
  /* Step card */
  /* hover polish */
  /* Number badge */
  /* Thin top accent bar */
  /* Titles & body copy */
  /* Optional connectors (desktop only): subtle lines between cards to suggest flow */
  /* Reduce motion */
  /* =========================
   Learn band (Vanta-style cards, Guardient theme)
========================= */
  /* Headline like the example: large, friendly */
  /* Three equal cards */
  /* Card */
  /* Top media (clickable) */
  /* Title + blurb */
  /* Read more link with arrow */
  /* Optional: make each card’s image glow slightly on hover */
  /* =========================
   Customer Proof — Simple Split
========================= */
  /* Big headline (centered like example) */
  /* Split row */
  /* Image panel */
  /* Copy panel */
  /* One primary action (simple, bold) */ }
  .usx-ccmc .hero {
    position: relative;
    color: var(--sx-text);
    overflow: hidden;
    padding: 84px 0 64px;
    /* smaller overall height (was 140px 0 120px) */
    background: radial-gradient(1000px 420px at 15% -10%, rgba(68, 215, 182, 0.12), transparent 60%), radial-gradient(800px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(135deg, #0a1115 0%, #07121a 45%, #0b1a22 100%); }
  .usx-ccmc .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 70%); }
  .usx-ccmc .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: var(--sx-maxw);
    margin: 0 auto;
    padding: 0 20px;
    gap: 36px;
    /* tighter spacing (was 60px) */ }
  .usx-ccmc .hero-content h1 {
    font-size: 3rem;
    line-height: 0.75;
    font-weight: 800;
    color: var(--sx-text);
    margin-bottom: 5px; }
  .usx-ccmc .hero-content p {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sx-text-dim);
    max-width: 540px;
    margin-bottom: 24px;
    /* slightly tighter (was 36px) */ }
  .usx-ccmc .hero .btn,
  .usx-ccmc .hero .btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: 999px;
    padding: 12px 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
 color 0.2s ease, border-color 0.2s ease; }
  .usx-ccmc .hero .btn {
    background: linear-gradient(90deg, var(--sx-accent, #44d7b6), var(--sx-accent-2, #6aa3ff));
    color: #071115;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 24px; }
  .usx-ccmc .cmmc-problem-solution {
    --cmmc-border: rgba(255, 255, 255, 0.12);
    --cmmc-text: #ffffff;
    --cmmc-text-dim: #cfe5e0;
    --cmmc-panel-1: #11171d;
    --cmmc-panel-2: #0f141a;
    --cmmc-accent-1: #44d7b6;
    /* teal */
    --cmmc-accent-2: #6aa3ff;
    /* blue */
    position: relative;
    padding: 120px 0 110px;
    background: radial-gradient(1200px 520px at 15% -10%, rgba(68, 215, 182, 0.18), transparent 60%), radial-gradient(1200px 520px at 85% 0%, rgba(106, 163, 255, 0.16), transparent 60%), linear-gradient(135deg, rgba(68, 215, 182, 0.08) 0%, rgba(106, 163, 255, 0.08) 48%, transparent 48%), linear-gradient(180deg, #0e1720 0%, #0a1117 100%);
    border-top: 1px solid var(--cmmc-border);
    border-bottom: 1px solid var(--cmmc-border);
    overflow: hidden; }
  .usx-ccmc .cmmc-problem-solution::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 360px at 50% 120%, rgba(106, 163, 255, 0.08), transparent 70%); }
  .usx-ccmc .cmmc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-ccmc .cmmc-problem-solution h2 {
    margin: 0 0 10px;
    color: var(--cmmc-text);
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.15;
    font-size: clamp(28px, 4.8vw, 42px);
    text-align: center; }
  .usx-ccmc .cmmc-subheading {
    text-align: center;
    margin: 0 auto 26px;
    max-width: 70ch;
    color: var(--cmmc-text-dim);
    font-size: 1.06rem;
    line-height: 1.65; }
  .usx-ccmc .cps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px; }
  @media (max-width: 900px) {
    .usx-ccmc .cps-grid {
      grid-template-columns: 1fr; } }
  .usx-ccmc .cps-card {
    position: relative;
    background: linear-gradient(180deg, var(--cmmc-panel-1), var(--cmmc-panel-2));
    border: 1px solid var(--cmmc-border);
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-ccmc .cps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .usx-ccmc .cps-grid .cps-card:nth-child(1)::before,
  .usx-ccmc .cps-grid .cps-card:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 3px;
    border-radius: 999px; }
  .usx-ccmc .cps-grid .cps-card:nth-child(1)::before {
    background: linear-gradient(90deg, #ff6a6a, #ff3b3b);
    /* Problem */ }
  .usx-ccmc .cps-grid .cps-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--cmmc-accent-1), var(--cmmc-accent-2));
    /* Solution */ }
  .usx-ccmc .cps-card h3 {
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    font-size: clamp(18px, 2.1vw, 22px);
    color: #f3fbf8; }
  .usx-ccmc .cps-list {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 10px; }
  .usx-ccmc .cps-list li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #d8eee9;
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-ccmc .cps-list--bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #ff9a9a;
    background: rgba(255, 75, 75, 0.12);
    border: 1px solid rgba(255, 75, 75, 0.35);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-ccmc .cps-list--good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #062018;
    background: linear-gradient(135deg, var(--cmmc-accent-1), var(--cmmc-accent-2));
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 900; }
  .usx-ccmc .gx-metrics.cmmc-metrics {
    /* palette */
    --accent-1: #44d7b6;
    /* teal */
    --accent-2: #6aa3ff;
    /* blue */
    --bg-top: #0b131a;
    --bg-bot: #0d1821;
    --panel: #0e151b;
    --text-hi: #fff;
    --text-lo: #cfe5e0;
    --border: rgba(255, 255, 255, 0.12);
    position: relative;
    padding: 120px 0 110px;
    color: var(--text-lo);
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.14), transparent 70%), radial-gradient(1000px 380px at 50% 110%, rgba(68, 215, 182, 0.12), transparent 70%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    overflow: hidden; }
  .usx-ccmc .gx-metrics.cmmc-metrics::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.2px);
    background-size: 48px 48px, 48px 48px, 22px 22px;
    mix-blend-mode: soft-light;
    opacity: 0.08; }
  .usx-ccmc .gx-metrics.cmmc-metrics .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metrics-head {
    text-align: center;
    margin: 0 0 26px; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metrics-head h2 {
    margin: 0 auto;
    max-width: 32ch;
    color: var(--text-hi);
    font-weight: 900;
    font-size: clamp(30px, 4.2vw, 42px);
    line-height: 1.28;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch; }
  @media (max-width: 1200px) {
    .usx-ccmc .gx-metrics.cmmc-metrics .metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .usx-ccmc .gx-metrics.cmmc-metrics .metrics-grid {
      grid-template-columns: 1fr; } }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card {
    background: linear-gradient(180deg, var(--panel), rgba(14, 21, 27, 0.92));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px 24px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* keep everything inside */
    min-width: 0;
    /* allow flex children to shrink */
    position: relative; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.85; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-top {
    display: flex;
    align-items: flex-end;
    min-height: 96px;
    /* consistent header band on desktop */ }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-value {
    display: flex;
    flex-wrap: wrap;
    /* critical: let unit wrap below number */
    align-items: flex-end;
    column-gap: 10px;
    row-gap: 4px;
    color: #fff;
    min-width: 0;
    /* prevent overflow push */ }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-value .num {
    font-weight: 900;
    font-size: clamp(46px, 7.2vw, 76px);
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
    /* keep the number intact */ }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-value .unit {
    flex-basis: 100%;
    /* always drop to the next line */
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 26px);
    line-height: 1.2;
    opacity: 0.95; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card--tco .metric-value {
    align-items: flex-start; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .pre {
    flex-basis: 100%;
    font-weight: 800;
    font-size: clamp(16px, 1.9vw, 22px);
    opacity: 0.9;
    letter-spacing: 0.3px; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .num {
    font-size: clamp(52px, 8vw, 88px); }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-card--tco .metric-value .unit {
    margin-top: 2px; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-rule {
    height: 2px;
    border: 0;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.9; }
  .usx-ccmc .gx-metrics.cmmc-metrics .metric-desc {
    margin: 0;
    color: #eaf7f3;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    opacity: 0.92; }
  @media (prefers-reduced-motion: reduce) {
    .usx-ccmc .gx-metrics.cmmc-metrics .metric-card {
      transition: none; } }
  .usx-ccmc .how {
    /* palette (aligns with your teal/blue site colors) */
    --accent-1: #44d7b6;
    /* teal */
    --accent-2: #6aa3ff;
    /* blue */
    --bg-top: #0b131a;
    /* slate dusk */
    --bg-bot: #0d1821;
    --panel-1: #11171d;
    --panel-2: #0f141a;
    --text-hi: #ffffff;
    --text-lo: #cfe5e0;
    --border: rgba(255, 255, 255, 0.12);
    position: relative;
    padding: 110px 0 100px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.14), transparent 70%), radial-gradient(1000px 360px at 50% 110%, rgba(68, 215, 182, 0.12), transparent 70%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    overflow: hidden; }
  .usx-ccmc .how .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; }
  .usx-ccmc #how-title {
    margin: 0 0 26px;
    font-weight: 900;
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: whitesmoke;
    text-align: center; }
  .usx-ccmc .how-steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px; }
  @media (max-width: 1080px) {
    .usx-ccmc .how-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) {
    .usx-ccmc .how-steps {
      grid-template-columns: 1fr; } }
  .usx-ccmc .how-steps > li {
    position: relative;
    background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px 18px 20px;
    color: var(--text-lo);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, border-color 0.22s ease,
 box-shadow 0.22s ease;
    min-height: 170px; }
  .usx-ccmc .how-steps > li:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 215, 182, 0.32);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.54); }
  .usx-ccmc .how-steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -18px;
    left: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.05rem;
    color: #062018;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  .usx-ccmc .how-steps > li::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    opacity: 0.85; }
  .usx-ccmc .how-steps h3 {
    margin: 8px 0 8px;
    font-weight: 850;
    font-size: clamp(18px, 2.1vw, 22px);
    color: var(--text-hi); }
  .usx-ccmc .how-steps p {
    margin: 0;
    line-height: 1.65;
    font-size: 1.02rem; }
  @media (min-width: 1081px) {
    .usx-ccmc {
      /* for safety if any */
      /* no effect, just guard */
      /* guard */ }
      .usx-ccmc .how-steps > li {
        /* ensure space for connector pseudo-el */
        overflow: visible; }
      .usx-ccmc .how-steps > li:not(:last-child)::marker {
        content: ""; }
      .usx-ccmc .how-steps > li:not(:last-child) .connector {
        display: none; }
      .usx-ccmc .how-steps > li:not(:last-child) {
        /* draw a faint connector from center-right to next card center-left */ }
      .usx-ccmc .how-steps > li:not(:last-child)::selection {
        background: transparent; }
      .usx-ccmc .how-steps > li:not(:last-child)::part(connector) {
        display: none; }
      .usx-ccmc .how-steps > li:not(:last-child)::before {
        /* keep number badge above connectors */
        z-index: 2; }
      .usx-ccmc .how-steps > li:not(:last-child)::after {
        /* keep accent bar above as well */
        z-index: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .usx-ccmc .how-steps > li {
      transition: none; } }
  .usx-ccmc .learn-band {
    --accent1: #44d7b6;
    /* teal */
    --accent2: #6aa3ff;
    /* blue */
    --ink: #ffffff;
    --muted: #cfe5e0;
    --panel: #0f141a;
    --bg1: #0b131a;
    --bg2: #0d1821;
    --border: rgba(255, 255, 255, 0.12);
    padding: 64px 0 72px;
    background: radial-gradient(900px 320px at 50% -10%, rgba(106, 163, 255, 0.1), transparent 70%), linear-gradient(180deg, var(--bg1), var(--bg2)); }
  .usx-ccmc .learn-container {
    max-width: 1120px;
    /* narrower so it doesn’t dominate */
    margin: 0 auto;
    padding: 0 20px; }
  .usx-ccmc #learn-title {
    margin: 0 0 22px;
    text-align: center;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15; }
  .usx-ccmc .learn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  @media (max-width: 980px) {
    .usx-ccmc .learn-grid {
      grid-template-columns: 1fr; } }
  .usx-ccmc .learn-card {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .usx-ccmc .learn-card .card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* consistent crop like the example */
    border-radius: 18px;
    background: radial-gradient(120% 70% at 50% 10%, rgba(255, 255, 255, 0.08), transparent 55%), var(--img) center/cover no-repeat;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .usx-ccmc .learn-card .card-media:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
  .usx-ccmc .card-title {
    margin: 2px 0 2px;
    color: var(--ink);
    font-weight: 900;
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.2px; }
  .usx-ccmc .card-blurb {
    margin: 0 0 6px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 1.02rem; }
  .usx-ccmc .card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative; }
  .usx-ccmc .card-link .arrow {
    width: 18px;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    transition: transform 0.18s ease; }
  .usx-ccmc .card-link:hover .arrow {
    transform: translateX(2px); }
  .usx-ccmc .learn-card:hover .card-media {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); }
  .usx-ccmc .proof-simple {
    --accent1: #44d7b6;
    --accent2: #6aa3ff;
    --ink: #ffffff;
    --text: #e8f3ff;
    --muted: #b8c9d6;
    padding: 80px 0 96px;
    background: radial-gradient(1000px 340px at 50% -10%, rgba(106, 163, 255, 0.12), transparent 70%), radial-gradient(1000px 360px at 50% 110%, rgba(68, 215, 182, 0.1), transparent 70%), linear-gradient(180deg, #0b131a 0%, #0d1821 100%); }
  .usx-ccmc .proof-simple .container {
    max-width: 1320px;
    /* wider than default so it doesn't feel small */
    margin: 0 auto;
    padding: 0 28px; }
  .usx-ccmc #proof-headline {
    margin: 0 0 28px;
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.1;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--ink); }
  .usx-ccmc .proof-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: center; }
  @media (max-width: 980px) {
    .usx-ccmc .proof-row {
      grid-template-columns: 1fr;
      gap: 22px; } }
  .usx-ccmc .proof-img {
    margin: 0;
    border-radius: 24px;
    overflow: hidden; }
  .usx-ccmc .proof-img img {
    display: block;
    width: 100%;
    height: clamp(260px, 36vw, 420px);
    object-fit: cover;
    filter: grayscale(100%); }
  .usx-ccmc .proof-copy {
    padding: clamp(6px, 1vw, 12px) 0; }
  .usx-ccmc .proof-quote {
    margin: 0 0 10px;
    color: whitesmoke;
    font-weight: 900;
    font-size: clamp(20px, 2.6vw, 32px);
    line-height: 1.25;
    quotes: "“" "”" "‘" "’"; }
  .usx-ccmc .proof-quote::before {
    content: open-quote; }
  .usx-ccmc .proof-quote::after {
    content: close-quote; }
  .usx-ccmc .proof-by {
    margin: 6px 0 20px;
    color: var(--muted);
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 16px); }
  .usx-ccmc .proof-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 800; }
  .usx-ccmc .proof-actions .btn.btn--primary {
    padding: 14px 22px;
    color: #062018;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .usx-ccmc .proof-actions .btn.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2); }

/* =========================
   FOOTER
   ========================= */
footer {
  position: relative;
  background: radial-gradient(900px 380px at 15% -10%, rgba(68, 215, 182, 0.1), transparent 60%), radial-gradient(900px 380px at 85% 0%, rgba(106, 163, 255, 0.1), transparent 60%), linear-gradient(180deg, #0a0f14 0%, #0b1117 100%);
  border-top: 1px solid var(--sx-border);
  color: var(--sx-text);
  text-align: left; }

.footer-container {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  padding: 44px 20px;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.9fr;
  gap: 40px;
  align-items: start; }

.footer-logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0 0 14px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }

.footer-company p {
  margin: 6px 0;
  color: var(--sx-text-dim);
  line-height: 1.5; }

.footer-company .footer-links {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

.footer-company .footer-links a {
  font-weight: 700;
  color: #eaf7f3;
  text-decoration: none;
  transition: color 0.18s ease; }

.footer-company .footer-links a:hover {
  color: var(--sx-accent); }

/* =========================
     FOOTER LINK COLUMNS
     ========================= */
.footer-links-section {
  column-gap: 56px;
  /* was 48 */
  row-gap: 10px;
  /* was 6 */ }

.footer-column a {
  text-transform: capitalize !important;
  font-weight: 600; }

.footer-column h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #eef7f5;
  opacity: 0.9; }

footer .footer-column a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--sx-text-dim);
  text-decoration: none;
  transition: color 0.18s ease, text-decoration-color 0.18s ease; }

footer .footer-column a:hover {
  color: var(--sx-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; }

/* =========================
     AWARDS
     ========================= */
.footer-awards {
  display: grid;
  grid-auto-rows: min-content;
  gap: 14px;
  justify-items: end; }

.footer-awards img {
  height: 100px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35)); }

/* =========================
     BOTTOM BAR
     ========================= */
.footer-bottom {
  margin: 0;
  padding: 14px 20px 22px;
  text-align: left;
  color: #a9cfc6;
  border-top: 1px solid var(--sx-border);
  font-size: 0.95rem;
  text-align: center; }

/* =========================
     FOCUS STATES
     ========================= */
footer a:focus {
  outline: 2px solid var(--sx-accent);
  outline-offset: 2px;
  border-radius: 6px; }

/* =========================
     RESPONSIVE
     ========================= */
@media (max-width: 1200px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    row-gap: 26px; }
  .footer-awards {
    grid-column: 1 / -1;
    justify-items: start; } }

@media (max-width: 1100px) {
  .footer-links-section {
    grid-template-columns: repeat(3, minmax(200px, 1fr)); } }

@media (max-width: 820px) {
  .footer-links-section {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    column-gap: 32px; } }

@media (max-width: 760px) {
  .footer-container {
    grid-template-columns: 1fr; }
  .footer-links-section {
    grid-template-columns: 1fr;
    gap: 22px; }
  .footer-awards img {
    height: 56px; } }

@media (max-width: 1024px) {
  .footer-awards img {
    height: 64px; } }

@media (max-width: 768px) {
  footer {
    text-align: center; }
    footer .footer-awards {
      justify-items: center; }
    footer .footer-container {
      align-items: center; }
    footer .footer-logo {
      margin: 0 auto 14px; }
    footer .footer-company .footer-links {
      display: block; } }