body[data-portal="x_ou"] {
  --x-bg: #f6f7f9;
  --x-surface: #ffffff;
  --x-box: #fcfcfd;
  --x-ink: #101828;
  --x-text: #344054;
  --x-muted: #667085;
  --x-border: #d9dee7;
  --x-brand: #111827;
  --x-brand-soft: #eef4ff;
  --x-accent: #3538cd;
  background: var(--x-bg);
  color: var(--x-text);
}

body[data-portal="x_ou"] main {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 24px 16px 64px;
}

body[data-portal="x_ou"] :is(h1, h2, h3) {
  color: var(--x-ink);
  font-family: custom, Inter, system-ui, sans-serif;
  letter-spacing: 0;
}

body[data-portal="x_ou"] h4 {
  color: var(--x-ink);
  font-family: custom, Inter, system-ui, sans-serif;
  text-transform: uppercase;
}

body[data-portal="x_ou"] :is(p, label, td, th) {
  color: var(--x-text);
}

body[data-portal="x_ou"] :is(span, small) {
  color: var(--x-muted);
}

body[data-portal="x_ou"] :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #3538cd;
  outline-offset: 3px;
}

body[data-portal="x_ou"] :is(nav, section, article, aside, .panel, .card) {
  border-color: var(--x-border);
}

body[data-portal="x_ou"] :is(input, textarea, select) {
  border-color: var(--x-border);
  background: var(--x-surface);
  color: var(--x-text);
}

body[data-portal="x_ou"] .box {
  border: 1px solid var(--x-border);
  border-radius: 8px;
  color: var(--x-text);

  &._outer {
    background: var(--x-surface);
    box-shadow: 0 18px 50px rgba(16, 24, 40, .06);
  }

  &._inner {
    background: var(--x-box);
  }
}

body[data-portal="x_ou"] .button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;

  &._primary {
    background: var(--x-brand);
    color: #ffffff;
  }

  &._secondary {
    border-color: var(--x-border);
    background: var(--x-surface);
    color: var(--x-text);
  }

  &:is(._primary, ._secondary):hover {
    filter: brightness(.96);
  }

  &:is(._primary, ._secondary):active {
    transform: translateY(1px);
  }

  &:disabled {
    cursor: not-allowed;
    filter: none;
    opacity: .58;
  }
}

body[data-portal="x_ou"] a {
  color: var(--x-accent);
}

body[data-portal="x_ou"] .platform {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 184, 166, .12), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(15, 23, 42, .09), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 48%, #ffffff 100%);
  color: #0b1220;
}

body[data-portal="x_ou"] .platform *,
body[data-portal="x_ou"] .platform *::before,
body[data-portal="x_ou"] .platform *::after {
  box-sizing: border-box;
}

body[data-portal="x_ou"] .platform :is(h1, h2, h3, p) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-portal="x_ou"] .platform figure {
  margin: 0;
}

body[data-portal="x_ou"] .platform .button {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 760;
}

body[data-portal="x_ou"] .platform .button._primary {
  border-color: #020617;
  background: #020617;
  color: #fff;
  box-shadow: 0 18px 36px rgba(2, 6, 23, .22);
}

body[data-portal="x_ou"] .platform .button._secondary {
  border-color: rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .86);
  color: #0f172a;
}

body[data-portal="x_ou"] :is(.platform-hero, .story-panel, .module-showcase, .ownership-band, .workflow, .pricing-band, .closing-cta) {
  box-sizing: border-box;
  max-width: 100%;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding-inline: 18px;
}

body[data-portal="x_ou"] .platform-hero {
  min-height: min(820px, calc(100svh - 50px));
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(380px, 1.02fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
  padding-top: clamp(58px, 8vw, 96px);
  padding-bottom: clamp(46px, 7vw, 82px);
}

body[data-portal="x_ou"] .hero-copy {
  display: grid;
  gap: 24px;
  max-width: 720px;
}

body[data-portal="x_ou"] :is(.platform-hero .hero-copy > span, .section-heading > span, .closing-cta > span) {
  width: fit-content;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 999px;
  background: rgba(236, 253, 245, .82);
  color: #047857 !important;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body[data-portal="x_ou"] .platform-hero h1 {
  max-width: 680px;
  color: #020617 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(40px, 4vw, 50px) !important;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-transform: none !important;
}

body[data-portal="x_ou"] .platform-hero .hero-copy p {
  max-width: 650px;
  color: #475569 !important;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.62;
}

body[data-portal="x_ou"] .hero-image-frame {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .26), transparent 42%),
    linear-gradient(180deg, rgba(2, 6, 23, .18), rgba(2, 6, 23, .84)),
    var(--photo),
    #020617;
  background-position: center;
  background-size: cover;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .24);
}

body[data-portal="x_ou"] .hero-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 34%, rgba(2, 6, 23, .82)),
    radial-gradient(circle at 20% 18%, rgba(20, 184, 166, .28), transparent 24rem);
  pointer-events: none;
}

body[data-portal="x_ou"] .hero-image-frame figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: grid;
  gap: 8px;
}

body[data-portal="x_ou"] .hero-image-frame figcaption span {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 13px;
}

body[data-portal="x_ou"] .hero-image-frame figcaption b {
  max-width: 460px;
  color: #fff !important;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
}

body[data-portal="x_ou"] .hero-float {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: min(220px, 48%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  padding: 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px rgba(2, 6, 23, .24);
}

body[data-portal="x_ou"] .hero-float small {
  color: #0f766e !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-portal="x_ou"] .hero-float b {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
}

body[data-portal="x_ou"] .hero-float-main {
  top: 24px;
  left: 24px;
}

body[data-portal="x_ou"] .hero-float-side {
  top: 44%;
  right: 24px;
}

body[data-portal="x_ou"] :is(.module-list article, .difference-grid article, .pricing-list article, .step-list article) {
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

body[data-portal="x_ou"] .story-panel {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(48px, 8vw, 90px);
  padding-bottom: clamp(58px, 9vw, 110px);
}

body[data-portal="x_ou"] :is(.story-panel figure, .ownership-band figure, .operations-photo) {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .16), transparent 38%),
    linear-gradient(180deg, rgba(248, 250, 252, .06), rgba(15, 23, 42, .12)),
    var(--photo),
    #e2e8f0;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .14);
}

body[data-portal="x_ou"] .story-panel figure {
  min-height: 520px;
}

body[data-portal="x_ou"] .section-heading {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

body[data-portal="x_ou"] .section-heading.centered {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

body[data-portal="x_ou"] :is(.section-heading h2, .closing-cta h2) {
  color: #020617 !important;
  font-size: clamp(34px, 5vw, 40px);
  line-height: .98;
  letter-spacing: -.01em;
}

body[data-portal="x_ou"] :is(.section-heading p, .closing-cta p) {
  color: #475569 !important;
  font-size: 18px;
  line-height: 1.68;
}

body[data-portal="x_ou"] .story-points {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

body[data-portal="x_ou"] .story-points b {
  border-left: 3px solid #14b8a6;
  color: #0f172a;
  padding: 10px 0 10px 14px;
  font-size: 16px;
}

body[data-portal="x_ou"] .module-showcase {
  display: grid;
  gap: 28px;
  padding-top: clamp(52px, 8vw, 96px);
  padding-bottom: clamp(64px, 10vw, 126px);
}

body[data-portal="x_ou"] .module-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-portal="x_ou"] .module-list article {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body[data-portal="x_ou"] .module-list article::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .14), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .86));
  pointer-events: none;
}

body[data-portal="x_ou"] .module-list article > * {
  position: relative;
  z-index: 1;
}

body[data-portal="x_ou"] .module-list article:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 184, 166, .32);
  box-shadow: 0 28px 78px rgba(15, 23, 42, .12);
}

body[data-portal="x_ou"] .module-list small {
  width: fit-content;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e !important;
  padding: 6px 10px;
  font-weight: 780;
}

body[data-portal="x_ou"] .module-list h3 {
  color: #020617 !important;
  font-size: 22px;
}

body[data-portal="x_ou"] .module-list p {
  color: #475569 !important;
  line-height: 1.6;
}

body[data-portal="x_ou"] .module-list article > span {
  position: absolute;
  right: 10px;
  bottom: 0;
  font-weight: 900;
  line-height: 1;
  z-index: 0;
  font-size: 15em;
  opacity: .05;
}

body[data-portal="x_ou"] .module-note {
  border-color: rgba(20, 184, 166, .35) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .32), transparent 12rem),
    linear-gradient(145deg, #020617 0%, #0f172a 58%, #123d3a 100%) !important;
  box-shadow: 0 30px 88px rgba(2, 6, 23, .2) !important;
}

body[data-portal="x_ou"] .module-note small {
  background: rgba(255, 255, 255, .12);
  color: #a7f3d0 !important;
}

body[data-portal="x_ou"] .module-note h3 {
  color: #fff !important;
}

body[data-portal="x_ou"] .module-note p {
  color: rgba(248, 250, 252, .82) !important;
}

body[data-portal="x_ou"] .ownership-band {
  color-scheme: dark;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, .7fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 0%, rgba(20, 184, 166, .26), transparent 24rem),
    radial-gradient(circle at 100% 18%, rgba(59, 130, 246, .16), transparent 18rem),
    linear-gradient(135deg, #020617 0%, #0b1120 58%, #111827 100%);
  padding: clamp(34px, 6vw, 70px);
  box-shadow: 0 34px 100px rgba(2, 6, 23, .25);
}

body[data-portal="x_ou"] .ownership-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
  pointer-events: none;
}

body[data-portal="x_ou"] .ownership-band > * {
  position: relative;
  z-index: 1;
}

body[data-portal="x_ou"] .ownership-band .section-heading > span {
  border-color: rgba(167, 243, 208, .24);
  background: rgba(20, 184, 166, .14);
  color: #a7f3d0 !important;
}

body[data-portal="x_ou"] .ownership-band .section-heading h2,
body[data-portal="x_ou"] .ownership-band .section-heading p {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

body[data-portal="x_ou"] .ownership-band .section-heading p,
body[data-portal="x_ou"] .difference-grid p {
  color: #e6f0ff !important;
}

body[data-portal="x_ou"] .ownership-band figure {
  min-height: 380px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}

body[data-portal="x_ou"] .ownership-band .difference-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-portal="x_ou"] .difference-grid article {
  display: grid;
  gap: 10px;
  min-height: 176px;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  padding: 20px;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}

body[data-portal="x_ou"] .difference-grid b {
  color: #fff !important;
  font-size: 17px;
}

body[data-portal="x_ou"] .workflow {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(320px, .72fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(70px, 10vw, 132px);
  padding-bottom: clamp(66px, 10vw, 124px);
}

body[data-portal="x_ou"] .workflow .section-heading {
  grid-column: 1 / -1;
}

body[data-portal="x_ou"] .step-list {
  display: grid;
  gap: 12px;
}

body[data-portal="x_ou"] .step-list article {
  display: grid;
  gap: 10px;
  padding: 20px;
}

body[data-portal="x_ou"] .step-list small {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #020617;
  color: #fff !important;
  font-weight: 800;
}

body[data-portal="x_ou"] .step-list h3,
body[data-portal="x_ou"] .pricing-list b {
  color: #020617 !important;
  font-size: 20px;
}

body[data-portal="x_ou"] .step-list p,
body[data-portal="x_ou"] .pricing-list p {
  color: #475569 !important;
  line-height: 1.62;
}

body[data-portal="x_ou"] .operations-photo {
  min-height: 430px;
}

body[data-portal="x_ou"] .pricing-band {
  display: grid;
  gap: clamp(24px, 4vw, 42px);
  padding-top: clamp(56px, 8vw, 98px);
  padding-bottom: clamp(70px, 10vw, 124px);
}

body[data-portal="x_ou"] .pricing-layout {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: stretch;
}

body[data-portal="x_ou"] .pricing-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-portal="x_ou"] .pricing-list article,
body[data-portal="x_ou"] .price-card {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 30px);
}

body[data-portal="x_ou"] .price-card {
  position: relative;
  overflow: hidden;
  align-content: end;
  min-height: 420px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .16), rgba(2, 6, 23, .9)),
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .28), transparent 16rem),
    var(--photo),
    #020617;
  background-position: center;
  background-size: cover;
  box-shadow: 0 32px 90px rgba(15, 23, 42, .18);
}

body[data-portal="x_ou"] .price-card small {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #a7f3d0 !important;
  padding: 7px 11px;
  font-weight: 820;
  text-transform: uppercase;
}

body[data-portal="x_ou"] .price-card b {
  color: #fff !important;
  font-size: clamp(34px, 5vw, 40px);
  line-height: 1;
}

body[data-portal="x_ou"] .price-card p {
  color: rgba(248, 250, 252, .78) !important;
  font-size: 18px;
}

body[data-portal="x_ou"] .price-card ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

body[data-portal="x_ou"] .price-card li {
  position: relative;
  color: rgba(248, 250, 252, .88);
  line-height: 1.5;
  padding-left: 22px;
}

body[data-portal="x_ou"] .price-card li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .16);
}

body[data-portal="x_ou"] .pricing-list .subscription-card {
  border-color: rgba(20, 184, 166, .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .15), transparent 12rem),
    rgba(255, 255, 255, .94);
}

body[data-portal="x_ou"] .closing-cta {
  display: grid;
  gap: 18px;
  margin-bottom: 46px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .18), transparent 38%),
    #fff;
  padding: clamp(34px, 6vw, 70px);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .12);
}

body[data-portal="x_ou"] .closing-cta h2 {
  max-width: 860px;
}

body[data-portal="x_ou"] .closing-cta p {
  max-width: 700px;
}

@media (max-width: 1000px) {
  body[data-portal="x_ou"] :is(.platform-hero, .story-panel, .ownership-band, .workflow, .pricing-layout) {
    grid-template-columns: 1fr;
  }

  body[data-portal="x_ou"] .hero-image-frame {
    min-height: 520px;
  }

  body[data-portal="x_ou"] :is(.module-list, .ownership-band .difference-grid, .pricing-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body[data-portal="x_ou"] :is(.platform-hero, .story-panel, .module-showcase, .ownership-band, .workflow, .pricing-band, .closing-cta) {
    width: calc(100% - 28px);
    padding-inline: 0;
  }

  body[data-portal="x_ou"] .platform-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 44px;
  }

  body[data-portal="x_ou"] .platform-hero h1 {
    font-size: clamp(32px, 8.7vw, 38px) !important;
    line-height: 1.04;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  body[data-portal="x_ou"] .platform .actions,
  body[data-portal="x_ou"] .platform .actions > * {
    width: 100%;
  }

  body[data-portal="x_ou"] .hero-image-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 440px;
    border-radius: 18px;
  }

  body[data-portal="x_ou"] .hero-image-frame figcaption b {
    font-size: clamp(20px, 5.8vw, 24px);
    overflow-wrap: anywhere;
  }

  body[data-portal="x_ou"] .hero-float {
    width: calc(100% - 36px);
    left: 18px;
    right: auto;
  }

  body[data-portal="x_ou"] .hero-float-side {
    top: 92px;
  }

  body[data-portal="x_ou"] :is(.module-list, .ownership-band .difference-grid, .pricing-list) {
    grid-template-columns: 1fr;
  }

  body[data-portal="x_ou"] .module-list article {
    min-height: 220px;
  }

  body[data-portal="x_ou"] .module-list article > span {
    right: 14px;
    bottom: 10px;
    font-size: 44px;
    color: rgba(15, 23, 42, .16);
  }

  body[data-portal="x_ou"] .module-list .module-note > span {
    font-size: 58px;
    color: rgba(20, 184, 166, .38);
  }

  body[data-portal="x_ou"] .price-card {
    min-height: 360px;
    border-radius: 18px;
  }

  body[data-portal="x_ou"] :is(.story-panel figure, .ownership-band figure, .operations-photo) {
    min-height: 320px;
    border-radius: 18px;
  }

  body[data-portal="x_ou"] :is(.ownership-band, .closing-cta) {
    border-radius: 22px;
    padding: 28px 18px;
  }

  body[data-portal="x_ou"] :is(.section-heading h2, .closing-cta h2) {
    font-size: clamp(23px, 6.7vw, 26px);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}