/* =========================================================
   WEBDOCS AI — GLOBAL PAGE ROOT
   Full-width public network canvas
   No max-width anywhere
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

  /* ---------- LIGHT PUBLIC SURFACES ---------- */
  --ai-page-bg: #f4f8ff;
  --ai-page-bg-soft: #eef5ff;
  --ai-page-bg-white: #ffffff;

  --ai-text: #071d3a;
  --ai-text-strong: #04172f;
  --ai-text-muted: #62758d;
  --ai-text-soft: #8293a8;

  --ai-line: rgba(16, 53, 95, 0.10);
  --ai-line-strong: rgba(16, 53, 95, 0.16);


  /* ---------- DARK INTELLIGENCE SURFACES ---------- */
  --ai-dark: #061426;
  --ai-dark-2: #081a30;
  --ai-dark-3: #0b2038;

  --ai-dark-text: #f3f7fc;
  --ai-dark-muted: #9db1c7;


  /* ---------- ACCENTS ---------- */
  --ai-blue: #246bfd;
  --ai-blue-2: #397cff;
  --ai-blue-soft: #74a4ff;

  --ai-cyan: #39d5ff;
  --ai-purple: #8957ff;

  --ai-green: #20c997;
  --ai-orange: #f59f00;
  --ai-red: #e5484d;


  /* ---------- SPACING ---------- */
  --ai-edge:
    clamp(22px, 3.2vw, 240px);

  --ai-edge-tight:
    clamp(18px, 2.4vw, 180px);

  --ai-section-y:
    clamp(72px, 7vw, 180px);

  --ai-section-y-small:
    clamp(48px, 5vw, 120px);


  /* ---------- SHAPE ---------- */
  --ai-radius-sm: 10px;
  --ai-radius-md: 16px;
  --ai-radius-lg: 24px;
  --ai-radius-xl: 34px;


  /* ---------- SHADOW ---------- */
  --ai-shadow-soft:
    0 18px 60px rgba(20, 54, 94, 0.08);

  --ai-shadow-card:
    0 20px 70px rgba(12, 42, 78, 0.11);


  /* ---------- HEADER HEIGHT ---------- */
  --ai-header-height: 76px;
}


/* =========================================================
   02. TRUE RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  width: 100%;

  margin: 0;
  padding: 0;

  scroll-behavior: smooth;

  background: var(--ai-page-bg);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;

  margin: 0;
  padding: 0;

  overflow-x: clip;

  background:
    linear-gradient(
      180deg,
      #f7faff 0%,
      #f3f8ff 46%,
      #ffffff 100%
    );

  color: var(--ai-text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   03. BASIC ELEMENT NORMALIZATION
========================================================= */

img,
svg,
video,
canvas {
  display: block;

  max-width: 100%;
}


img {
  height: auto;
}


button,
input,
textarea,
select {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


a {
  color: inherit;
}


p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}


figure,
blockquote {
  margin: 0;
}


ul,
ol {
  margin-top: 0;
}


/* =========================================================
   04. ACCESSIBILITY — SKIP LINK
   Fixes the visible "Skip to WebsDocs AI" in your screenshot
========================================================= */

.skip-link,
.wdai-skip-link {
  position: fixed;

  top: 10px;
  left: 12px;

  z-index: 99999;

  transform: translateY(-180%);

  padding: 10px 14px;

  border-radius: 8px;

  color: #ffffff;
  background: #246bfd;

  font-size: 13px;
  font-weight: 800;

  text-decoration: none;

  transition: transform 150ms ease;
}


.skip-link:focus,
.wdai-skip-link:focus {
  transform: translateY(0);
}


/* =========================================================
   05. PAGE ROOT
========================================================= */

#websdocsAiPage,
.wdai-page,
body {
  width: 100%;
  max-width: none;
}


main {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* =========================================================
   06. UNIVERSAL SECTION CANVAS

   Every direct section under main now becomes full width.
   This stabilizes the old pending HTML while we rebuild it.
========================================================= */

main > section {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  border: 0;
}


/* ---------------------------------------------------------
   Optional explicit class for every new section we build.
--------------------------------------------------------- */

.wdai-section {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    var(--ai-section-y)
    var(--ai-edge);
}


/* =========================================================
   07. SECTION SHELL

   Important:
   This is NOT a max-width container.

   It only gives us a predictable internal positioning layer.
========================================================= */

.wdai-section-shell {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  display: block;
}


/* =========================================================
   08. LIGHT SECTION VARIANTS
========================================================= */

.wdai-section-light {
  color: var(--ai-text);

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #f2f7ff 52%,
      #ffffff 100%
    );
}


.wdai-section-white {
  color: var(--ai-text);

  background: #ffffff;
}


.wdai-section-blue-soft {
  color: var(--ai-text);

  background:
    linear-gradient(
      135deg,
      #eef5ff,
      #f8fbff
    );
}


/* =========================================================
   09. DARK SECTION VARIANT
========================================================= */

.wdai-section-dark {
  color: var(--ai-dark-text);

  background:
    linear-gradient(
      135deg,
      #061426 0%,
      #081a30 48%,
      #0a1e36 100%
    );
}


.wdai-section-dark p {
  color: var(--ai-dark-muted);
}


/* =========================================================
   10. TYPOGRAPHY FOUNDATION
========================================================= */

.wdai-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 18px;

  color: var(--ai-blue);

  font-size:
    clamp(10px, 0.7vw, 14px);

  font-weight: 850;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.wdai-title {
  max-width: none;

  margin: 0;

  color: var(--ai-text-strong);

  font-size:
    clamp(42px, 5vw, 110px);

  line-height: 0.98;

  font-weight: 720;

  letter-spacing: -0.055em;
}


.wdai-section-dark .wdai-title {
  color: #ffffff;
}


.wdai-lead {
  max-width: 900px;

  margin:
    clamp(20px, 2vw, 34px)
    0
    0;

  color: var(--ai-text-muted);

  font-size:
    clamp(17px, 1.25vw, 26px);

  line-height: 1.58;
}


.wdai-section-dark .wdai-lead {
  color: #a8bdd3;
}


/* =========================================================
   11. COMMON FULL-WIDTH GRID
========================================================= */

.wdai-grid {
  width: 100%;
  max-width: none;

  display: grid;

  gap:
    clamp(20px, 2vw, 44px);
}


.wdai-grid-2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.wdai-grid-3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.wdai-grid-4 {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* =========================================================
   12. COMMON CARD FOUNDATION
========================================================= */

.wdai-card {
  position: relative;

  min-width: 0;

  padding:
    clamp(22px, 2vw, 42px);

  border:
    1px solid var(--ai-line);

  border-radius:
    var(--ai-radius-lg);

  background:
    rgba(255, 255, 255, 0.88);

  box-shadow:
    var(--ai-shadow-soft);
}


.wdai-section-dark .wdai-card {
  border-color:
    rgba(255, 255, 255, 0.09);

  background:
    rgba(255, 255, 255, 0.045);

  box-shadow: none;
}


/* =========================================================
   13. COMMON BUTTON FOUNDATION
========================================================= */

.wdai-btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0 18px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  text-decoration: none;

  font-size:
    13px;

  font-weight:
    800;

  cursor: pointer;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}


.wdai-btn:hover {
  transform: translateY(-2px);
}


.wdai-btn-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #246bfd,
      #397cff
    );

  box-shadow:
    0 10px 30px rgba(36, 107, 253, 0.25);
}


.wdai-btn-secondary {
  color: var(--ai-text);

  border-color:
    var(--ai-line-strong);

  background:
    rgba(255, 255, 255, 0.80);
}


/* =========================================================
   14. SECTION DIVIDERS
========================================================= */

.wdai-section + .wdai-section,
main > section + section {
  border-top:
    1px solid var(--ai-line);
}


.wdai-section-dark + .wdai-section-dark {
  border-top-color:
    rgba(255, 255, 255, 0.07);
}


/* =========================================================
   15. TEMPORARY OLD-CONTENT STABILIZER

   While we rewrite section-by-section, this stops old content
   from collapsing into browser-default text piles.
========================================================= */

main > section > h1,
main > section > h2,
main > section > h3 {
  color: var(--ai-text-strong);

  font-family: inherit;

  line-height: 1.05;
}


main > section > p {
  max-width: 920px;

  color: var(--ai-text-muted);

  font-family: inherit;

  line-height: 1.65;
}


main > section a {
  font-family: inherit;
}


/* Broken / placeholder image boxes should not inherit
   browser-style borders. */
main img {
  border: 0;
}


/* =========================================================
   16. 4K / 8K SCALING

   We increase spacing, never cap width.
========================================================= */

@media (min-width: 2200px) {

  :root {
    --ai-header-height: 88px;
  }

}


@media (min-width: 3200px) {

  :root {
    --ai-edge:
      clamp(120px, 3vw, 300px);

    --ai-section-y:
      clamp(130px, 6vw, 260px);
  }

}


@media (min-width: 5000px) {

  :root {
    --ai-edge:
      clamp(180px, 3.4vw, 360px);

    --ai-section-y:
      clamp(180px, 5vw, 340px);
  }

}


/* =========================================================
   17. TABLET
========================================================= */

@media (max-width: 1080px) {

  :root {
    --ai-edge:
      clamp(18px, 4vw, 42px);

    --ai-section-y:
      clamp(58px, 8vw, 100px);
  }


  .wdai-grid-4,
  .wdai-grid-3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 720px) {

  :root {
    --ai-edge: 18px;

    --ai-section-y: 58px;

    --ai-section-y-small: 40px;
  }


  main > section,
  .wdai-section {
    padding:
      var(--ai-section-y)
      var(--ai-edge);
  }


  .wdai-grid-2,
  .wdai-grid-3,
  .wdai-grid-4 {
    grid-template-columns: 1fr;
  }


  .wdai-title {
    font-size:
      clamp(38px, 13vw, 62px);
  }


  .wdai-lead {
    font-size: 17px;
  }

}


/* =========================================================
   19. WEBDOCS AI — PUBLIC ENTRY HERO
   Full width · ASG leading door · AIG intelligence
========================================================= */

.wdai-hero {
  position: relative;

  width: 100%;
  max-width: none;

  min-height:
    calc(100svh - var(--ai-header-height));

  margin: 0;

  padding:
    clamp(56px, 5vw, 130px)
    var(--ai-edge)
    0;

  overflow: hidden;

  color: var(--ai-text);

  background:
    radial-gradient(
      circle at 72% 16%,
      rgba(57, 124, 255, .09),
      transparent 28%
    ),
    radial-gradient(
      circle at 94% 72%,
      rgba(57, 213, 255, .09),
      transparent 25%
    ),
    linear-gradient(
      130deg,
      #f8fbff 0%,
      #f1f7ff 46%,
      #f7fbff 70%,
      #edf8ff 100%
    );

  border-bottom:
    1px solid var(--ai-line);
}


/* =========================================================
   BACKGROUND
========================================================= */

.wdai-hero-background {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.wdai-hero-grid {
  position: absolute;
  inset: 0;

  opacity: .28;

  background-image:
    linear-gradient(
      rgba(39, 92, 155, .075) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(39, 92, 155, .075) 1px,
      transparent 1px
    );

  background-size:
    clamp(54px, 4vw, 110px)
    clamp(54px, 4vw, 110px);

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.85),
      rgba(0,0,0,.1) 82%,
      transparent
    );
}


.wdai-hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(2px);

  opacity: .7;
}


.wdai-hero-glow-one {
  width: clamp(500px, 40vw, 1700px);
  height: clamp(500px, 40vw, 1700px);

  top: -24%;
  right: -7%;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.12),
      transparent 68%
    );
}


.wdai-hero-glow-two {
  width: clamp(380px, 32vw, 1300px);
  height: clamp(380px, 32vw, 1300px);

  left: -14%;
  bottom: -35%;

  background:
    radial-gradient(
      circle,
      rgba(57,213,255,.10),
      transparent 68%
    );
}


.wdai-hero-route {
  position: absolute;

  width: 38vw;
  height: 38vw;

  max-width: 1600px;
  max-height: 1600px;

  border:
    1px solid rgba(46, 111, 196, .08);

  border-radius:
    48% 52% 67% 33% / 52% 42% 58% 48%;

  transform: rotate(18deg);
}


.wdai-hero-route-one {
  top: -12%;
  left: 31%;
}


.wdai-hero-route-two {
  right: 5%;
  bottom: -34%;

  transform:
    rotate(-22deg)
    scale(.82);
}


/* =========================================================
   MAIN 2-COLUMN LAYOUT
========================================================= */

.wdai-hero-main {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: none;

  display: grid;

  grid-template-columns:
    minmax(0, 1.03fr)
    minmax(520px, .97fr);

  align-items: center;

  gap:
    clamp(46px, 5vw, 150px);

  padding-bottom:
    clamp(58px, 5vw, 130px);
}


/* =========================================================
   COPY
========================================================= */

.wdai-hero-copy {
  min-width: 0;

  padding-right:
    clamp(0px, 2vw, 60px);
}


.wdai-hero-eyebrow {
  width: max-content;
  max-width: 100%;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom:
    clamp(20px, 2vw, 34px);

  padding:
    8px
    12px;

  border:
    1px solid rgba(36, 107, 253, .13);

  border-radius:
    999px;

  color:
    #26548e;

  background:
    rgba(255,255,255,.68);

  box-shadow:
    0 7px 26px rgba(19,61,113,.05);

  font-size:
    clamp(10px, .68vw, 14px);

  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.wdai-hero-live-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--ai-green);

  box-shadow:
    0 0 0 4px rgba(32,201,151,.09),
    0 0 13px rgba(32,201,151,.38);
}


.wdai-hero h1 {
  max-width: none;

  margin: 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(58px, 5.4vw, 148px);

  line-height:
    .94;

  font-weight:
    690;

  letter-spacing:
    -.058em;
}


.wdai-hero h1 span {
  display: block;

  margin-top:
    .09em;

  color:
    var(--ai-blue);

  font-weight:
    650;
}


.wdai-hero-lead {
  max-width:
    clamp(650px, 44vw, 1300px);

  margin:
    clamp(26px, 2.5vw, 46px)
    0
    0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(17px, 1.2vw, 29px);

  line-height:
    1.55;

  letter-spacing:
    -.012em;
}


/* =========================================================
   ACTIONS
========================================================= */

.wdai-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    11px;

  margin-top:
    clamp(27px, 2.5vw, 44px);
}


.wdai-hero-btn {
  min-height:
    clamp(48px, 3.3vw, 66px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0
    clamp(18px, 1.6vw, 34px);

  border:
    1px solid transparent;

  border-radius:
    12px;

  text-decoration: none;

  font-size:
    clamp(12px, .86vw, 16px);

  font-weight:
    800;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}


.wdai-hero-btn svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.wdai-hero-btn:hover {
  transform:
    translateY(-2px);
}


.wdai-hero-btn-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #246bfd,
      #397cff
    );

  box-shadow:
    0 14px 34px rgba(36,107,253,.23);
}


.wdai-hero-btn-primary:hover {
  box-shadow:
    0 18px 44px rgba(36,107,253,.31);
}


.wdai-hero-btn-secondary {
  color:
    var(--ai-text);

  border-color:
    rgba(15,62,119,.14);

  background:
    rgba(255,255,255,.76);

  box-shadow:
    0 10px 30px rgba(17,53,94,.06);
}


.wdai-hero-btn-secondary:hover {
  background:
    #ffffff;

  border-color:
    rgba(36,107,253,.25);
}


/* =========================================================
   ASG COMMERCIAL BRIDGE
========================================================= */

.wdai-hero-asg-path {
  width: max-content;
  max-width: 100%;

  display: flex;
  align-items: center;

  gap: 14px;

  margin-top:
    clamp(24px, 2vw, 36px);

  padding:
    11px
    14px
    11px
    11px;

  border:
    1px solid rgba(31,76,132,.10);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.54);
}


.wdai-hero-asg-mini {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  padding: 6px;

  border:
    1px solid rgba(36,107,253,.10);

  border-radius:
    11px;

  background:
    linear-gradient(
      145deg,
      #f7fbff,
      #edf5ff
    );
}


.wdai-hero-asg-mini img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.wdai-hero-asg-path > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-hero-asg-path span {
  color:
    var(--ai-text-muted);

  font-size:
    clamp(10px, .7vw, 13px);
}


.wdai-hero-asg-path a {
  color:
    #174eac;

  text-decoration: none;

  font-size:
    clamp(11px, .78vw, 14px);

  font-weight:
    800;
}


.wdai-hero-asg-path a:hover {
  text-decoration: underline;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.wdai-hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    10px
    clamp(15px, 1.4vw, 28px);

  margin-top:
    clamp(28px, 2.6vw, 48px);

  padding-top:
    clamp(20px, 1.8vw, 28px);

  border-top:
    1px solid rgba(24,67,117,.09);
}


.wdai-hero-trust > span {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    #60758d;

  font-size:
    clamp(10px, .74vw, 14px);

  font-weight:
    700;
}


.wdai-trust-icon {
  position: relative;

  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  display: inline-block;

  border:
    1px solid rgba(36,107,253,.22);

  border-radius: 50%;

  background:
    rgba(36,107,253,.06);
}


.wdai-trust-icon::after {
  content: "";

  position: absolute;

  inset: 4px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-trust-approved {
  border-color:
    rgba(137,87,255,.24);

  background:
    rgba(137,87,255,.07);
}


.wdai-trust-approved::after {
  background:
    var(--ai-purple);
}


.wdai-trust-control {
  border-color:
    rgba(32,201,151,.24);

  background:
    rgba(32,201,151,.07);
}


.wdai-trust-control::after {
  background:
    var(--ai-green);
}


/* =========================================================
   DARK NETWORK PANEL
========================================================= */

.wdai-hero-network {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    clamp(20px, 1.7vw, 34px);

  color:
    #ffffff;

  background:
    radial-gradient(
      circle at 72% 12%,
      rgba(57,124,255,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 76%,
      rgba(137,87,255,.12),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #061426 0%,
      #081a30 58%,
      #07172b 100%
    );

  box-shadow:
    0 34px 100px rgba(17,45,82,.20);
}


.wdai-hero-network::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: .2;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(105,151,210,.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(105,151,210,.10) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;
}


/* =========================================================
   NETWORK HEAD
========================================================= */

.wdai-hero-network-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    clamp(20px, 1.7vw, 32px)
    clamp(22px, 2vw, 38px);

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


.wdai-hero-network-head > div:first-child {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.wdai-hero-network-head small,
.wdai-hero-network-head span {
  color:
    #7f9bb8;
}


.wdai-hero-network-head > div:first-child > span {
  font-size:
    clamp(8px, .58vw, 11px);

  font-weight: 850;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.wdai-hero-network-head strong {
  color: #fff;

  font-size:
    clamp(15px, 1.05vw, 20px);
}


.wdai-hero-network-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    7px
    10px;

  border:
    1px solid rgba(32,201,151,.15);

  border-radius:
    999px;

  background:
    rgba(32,201,151,.06);
}


.wdai-hero-network-state i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--ai-green);

  box-shadow:
    0 0 10px rgba(32,201,151,.65);
}


.wdai-hero-network-state span {
  color:
    #a9e6d4;

  font-size:
    clamp(8px, .6vw, 11px);

  font-weight: 800;
}


/* =========================================================
   NETWORK STAGE
========================================================= */

.wdai-hero-network-stage {
  position: relative;
  z-index: 2;

  padding:
    clamp(25px, 2.4vw, 48px)
    clamp(20px, 2.3vw, 44px)
    clamp(30px, 2.6vw, 52px);
}


/* SOURCES */

.wdai-network-sources {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 10px;
}


.wdai-network-source {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    11px
    12px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.035);
}


.wdai-network-source-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius:
    9px;

  color:
    #77b4ff;

  background:
    rgba(57,124,255,.10);
}


.wdai-network-source-icon svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.wdai-network-agent-icon {
  color:
    #bd87ff;

  background:
    rgba(137,87,255,.10);
}


.wdai-network-source > span:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-network-source small {
  color:
    #708ba7;

  font-size:
    clamp(7px, .48vw, 9px);

  font-weight:
    800;

  letter-spacing:
    .10em;
}


.wdai-network-source strong {
  color:
    #eaf4ff;

  font-size:
    clamp(11px, .76vw, 14px);
}


/* FLOW */

.wdai-network-flow-line {
  position: relative;

  width: 2px;
  height:
    clamp(30px, 2.6vw, 50px);

  margin:
    0
    auto;

  background:
    linear-gradient(
      to bottom,
      rgba(57,124,255,.15),
      rgba(57,124,255,.65)
    );
}


.wdai-network-flow-line span {
  position: absolute;

  width: 7px;
  height: 7px;

  left: 50%;
  top: 47%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background:
    #5d93ff;

  box-shadow:
    0 0 16px rgba(57,124,255,.75);
}


/* =========================================================
   ASG
========================================================= */

.wdai-network-asg {
  position: relative;

  padding:
    clamp(16px, 1.4vw, 25px);

  overflow: hidden;

  border:
    1px solid rgba(86,135,255,.24);

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      rgba(57,124,255,.12),
      rgba(137,87,255,.07)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}


.wdai-network-asg::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -95px;
  top: -100px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(137,87,255,.18),
      transparent 69%
    );
}


.wdai-network-asg-brand {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 15px;
}


.wdai-network-asg-brand img {
  width:
    clamp(92px, 8vw, 160px);

  height:
    clamp(45px, 4.5vw, 86px);

  object-fit: contain;
  object-position: left center;
}


.wdai-network-asg-brand > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-network-asg-brand span {
  color:
    #86aef3;

  font-size:
    clamp(7px, .48vw, 9px);

  font-weight:
    850;

  letter-spacing:
    .12em;
}


.wdai-network-asg-brand strong {
  color:
    #ffffff;

  font-size:
    clamp(17px, 1.3vw, 25px);
}


.wdai-network-asg-split {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 9px;

  margin-top:
    16px;
}


.wdai-network-asg-split a {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;

  padding:
    12px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    11px;

  color:
    #ffffff;

  text-decoration: none;

  background:
    rgba(2,13,29,.24);

  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}


.wdai-network-asg-split a:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(93,147,255,.28);

  background:
    rgba(57,124,255,.08);
}


.wdai-network-asg-split small {
  color:
    #7191b4;

  font-size:
    clamp(7px, .46vw, 9px);

  font-weight:
    850;

  letter-spacing:
    .11em;
}


.wdai-network-asg-split strong {
  font-size:
    clamp(11px, .76vw, 14px);
}


.wdai-network-asg-split span {
  color:
    #8ca4be;

  font-size:
    clamp(8px, .58vw, 11px);

  line-height:
    1.45;
}


/* =========================================================
   AIG BRIDGE
========================================================= */

.wdai-network-bridge {
  height:
    clamp(38px, 3.3vw, 64px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;
}


.wdai-network-bridge > span {
  width: 1px;
  height: 12px;

  background:
    rgba(126,165,221,.35);
}


.wdai-network-bridge > div {
  display: flex;

  gap: 4px;
}


.wdai-network-bridge i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-purple);
}


.wdai-network-bridge i:nth-child(2) {
  background:
    var(--ai-blue);
}


.wdai-network-bridge i:nth-child(3) {
  background:
    var(--ai-cyan);
}


/* =========================================================
   AIG
========================================================= */

.wdai-network-aig {
  padding:
    clamp(15px, 1.25vw, 23px);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.035);
}


.wdai-network-aig-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 16px;
}


.wdai-network-aig-top > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-network-aig-top span {
  color:
    #738ca8;

  font-size:
    clamp(7px, .48vw, 9px);

  font-weight:
    850;

  letter-spacing:
    .11em;
}


.wdai-network-aig-top strong {
  color:
    #ffffff;

  font-size:
    clamp(17px, 1.2vw, 23px);
}


.wdai-network-aig-top em {
  padding:
    5px
    8px;

  border:
    1px solid rgba(137,87,255,.18);

  border-radius:
    999px;

  color:
    #c8a8ff;

  background:
    rgba(137,87,255,.08);

  font-size:
    clamp(7px, .49vw, 9px);

  font-style: normal;
  font-weight: 800;
}


.wdai-network-aig-routes {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top:
    13px;
}


.wdai-network-aig-routes span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    6px
    8px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    7px;

  color:
    #9ab0c8;

  background:
    rgba(255,255,255,.025);

  font-size:
    clamp(7px, .5vw, 10px);

  font-weight:
    700;
}


.wdai-network-aig-routes i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    #6f9dff;
}


/* =========================================================
   CONNECTED SYSTEMS
========================================================= */

.wdai-network-output-line {
  width: 1px;
  height:
    clamp(28px, 2.4vw, 44px);

  margin:
    0
    auto;

  background:
    linear-gradient(
      to bottom,
      rgba(104,145,199,.45),
      rgba(104,145,199,.12)
    );
}


.wdai-network-systems {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    8px;
}


.wdai-network-systems a {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

  padding:
    clamp(10px, .9vw, 15px);

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    11px;

  text-decoration: none;

  background:
    rgba(255,255,255,.025);

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}


.wdai-network-systems a:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(79,139,255,.25);

  background:
    rgba(57,124,255,.06);
}


.wdai-network-systems small {
  color:
    #657f9c;

  font-size:
    clamp(6.5px, .42vw, 8px);

  font-weight:
    850;

  letter-spacing:
    .09em;
}


.wdai-network-systems strong {
  color:
    #ffffff;

  font-size:
    clamp(12px, .85vw, 16px);
}


.wdai-network-systems span {
  color:
    #8ba3bc;

  font-size:
    clamp(7px, .5vw, 10px);
}


/* =========================================================
   NETWORK FOOT
========================================================= */

.wdai-hero-network-foot {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    9px
    18px;

  padding:
    15px
    clamp(22px, 2vw, 38px);

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(0,0,0,.08);
}


.wdai-hero-network-foot span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color:
    #6f89a6;

  font-size:
    clamp(7px, .5vw, 10px);

  font-weight:
    700;
}


.wdai-hero-network-foot i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #5f91fa;
}


.wdai-hero-network-foot span:nth-child(2) i {
  background:
    var(--ai-purple);
}


.wdai-hero-network-foot span:nth-child(3) i {
  background:
    var(--ai-green);
}


/* =========================================================
   BOTTOM PRODUCT / NETWORK INDEX
========================================================= */

.wdai-hero-index {
  position: relative;
  z-index: 2;

  width:
    calc(100% + (var(--ai-edge) * 2));

  margin-left:
    calc(var(--ai-edge) * -1);

  display: grid;

  grid-template-columns:
    1.35fr
    repeat(4,1fr);

  border-top:
    1px solid rgba(17,57,104,.10);

  background:
    rgba(255,255,255,.55);

  backdrop-filter:
    blur(10px);
}


.wdai-hero-index > a {
  position: relative;

  min-width: 0;

  min-height:
    clamp(84px, 6.2vw, 120px);

  display: grid;

  grid-template-columns:
    auto
    minmax(0,1fr);

  align-content: center;

  column-gap:
    12px;

  padding:
    clamp(16px, 1.4vw, 27px)
    clamp(18px, 1.8vw, 38px);

  border-right:
    1px solid rgba(17,57,104,.08);

  color:
    var(--ai-text);

  text-decoration: none;

  transition:
    background 150ms ease;
}


.wdai-hero-index > a:last-child {
  border-right: 0;
}


.wdai-hero-index > a:hover {
  background:
    rgba(255,255,255,.78);
}


.wdai-hero-index > a > span {
  grid-row:
    1 / 3;

  color:
    #9aacbf;

  font-size:
    clamp(9px, .62vw, 12px);

  font-weight:
    800;
}


.wdai-hero-index > a > div {
  display: flex;
  align-items: baseline;

  gap: 7px;
}


.wdai-hero-index small {
  color:
    #6a84a2;

  font-size:
    clamp(7px, .44vw, 9px);

  font-weight:
    850;

  letter-spacing:
    .10em;
}


.wdai-hero-index strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(13px, .9vw, 18px);
}


.wdai-hero-index em {
  grid-column: 2;

  margin-top: 3px;

  color:
    #72859c;

  font-size:
    clamp(8px, .54vw, 11px);

  font-style: normal;
}


.wdai-hero-index b {
  position: absolute;

  right:
    clamp(15px,1.3vw,26px);

  top: 50%;

  transform:
    translateY(-50%);

  color:
    var(--ai-blue);

  font-size:
    clamp(16px,1.1vw,22px);
}


.wdai-hero-index-main {
  background:
    linear-gradient(
      120deg,
      rgba(36,107,253,.055),
      rgba(137,87,255,.025)
    );
}


/* =========================================================
   LARGE / 4K / 8K
========================================================= */

@media (min-width: 2200px) {

  .wdai-hero-main {
    grid-template-columns:
      minmax(0, 1.06fr)
      minmax(760px, .94fr);
  }

}


@media (min-width: 3600px) {

  .wdai-hero-main {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(1100px, .92fr);

    gap:
      clamp(120px, 5vw, 260px);
  }


  .wdai-hero-network-stage {
    padding:
      clamp(50px, 2vw, 110px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1240px) {

  .wdai-hero-main {
    grid-template-columns:
      minmax(0,1fr)
      minmax(430px,.9fr);

    gap:
      34px;
  }


  .wdai-hero h1 {
    font-size:
      clamp(52px, 5.4vw, 76px);
  }


  .wdai-hero-index {
    grid-template-columns:
      1.25fr
      repeat(2,1fr);
  }


  .wdai-hero-index > a:nth-child(4),
  .wdai-hero-index > a:nth-child(5) {
    border-top:
      1px solid rgba(17,57,104,.08);
  }

}


/* =========================================================
   MOBILE / TABLET STACK
========================================================= */

@media (max-width: 980px) {

  .wdai-hero {
    min-height: 0;

    padding:
      clamp(48px, 8vw, 78px)
      var(--ai-edge)
      0;
  }


  .wdai-hero-main {
    grid-template-columns:
      1fr;

    gap:
      clamp(42px, 7vw, 70px);
  }


  .wdai-hero-copy {
    padding-right: 0;
  }


  .wdai-hero h1 {
    max-width:
      900px;

    font-size:
      clamp(48px, 8vw, 82px);
  }


  .wdai-hero-lead {
    max-width:
      780px;
  }


  .wdai-hero-network {
    width: 100%;
  }


  .wdai-hero-index {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-hero-index-main {
    grid-column:
      1 / -1;
  }


  .wdai-hero-index > a {
    border-top:
      1px solid rgba(17,57,104,.08);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 620px) {

  .wdai-hero {
    padding:
      42px
      18px
      0;
  }


  .wdai-hero-eyebrow {
    white-space: normal;

    line-height: 1.35;
  }


  .wdai-hero h1 {
    font-size:
      clamp(43px, 13vw, 62px);

    line-height:
      .96;
  }


  .wdai-hero-lead {
    margin-top:
      22px;

    font-size:
      16px;

    line-height:
      1.58;
  }


  .wdai-hero-actions {
    display: grid;

    grid-template-columns:
      1fr;

    width: 100%;
  }


  .wdai-hero-btn {
    width: 100%;

    min-height:
      50px;
  }


  .wdai-hero-asg-path {
    width: 100%;

    align-items: flex-start;
  }


  .wdai-hero-asg-mini {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }


  .wdai-hero-trust {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-hero-network {
    border-radius:
      18px;
  }


  .wdai-hero-network-head {
    align-items: flex-start;

    padding:
      18px;
  }


  .wdai-network-sources {
    grid-template-columns:
      1fr;
  }


  .wdai-network-asg-split {
    grid-template-columns:
      1fr;
  }


  .wdai-network-systems {
    grid-template-columns:
      1fr;
  }


  .wdai-network-aig-top {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .wdai-hero-network-foot {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .wdai-hero-index {
    width:
      calc(100% + 36px);

    margin-left:
      -18px;

    grid-template-columns:
      1fr;
  }


  .wdai-hero-index-main {
    grid-column:
      auto;
  }


  .wdai-hero-index > a {
    min-height:
      78px;

    border-right:
      0;

    border-top:
      1px solid rgba(17,57,104,.08);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wdai-hero *,
  .wdai-hero *::before,
  .wdai-hero *::after {
    scroll-behavior: auto !important;

    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

}

/* =========================================================
   20. WEBDOCS AI NETWORK INTRO
========================================================= */

.wdai-intro {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    clamp(80px, 7vw, 180px)
    var(--ai-edge);

  overflow: hidden;

  background:
    #ffffff;

  border-bottom:
    1px solid var(--ai-line);
}


/* =========================================================
   TOP
========================================================= */

.wdai-intro-top {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(360px, .6fr);

  gap:
    clamp(40px, 6vw, 160px);

  align-items: end;
}


.wdai-intro-heading {
  min-width: 0;
}


.wdai-intro-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 20px;

  color: var(--ai-blue);

  font-size:
    clamp(10px, .65vw, 13px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-intro-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-blue);

  box-shadow:
    0 0 0 4px rgba(36,107,253,.08);
}


.wdai-intro-heading h2 {
  margin: 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(52px, 5.2vw, 132px);

  line-height: .95;

  font-weight: 680;

  letter-spacing: -.055em;
}


.wdai-intro-heading > p {
  max-width: 1050px;

  margin:
    clamp(24px, 2vw, 38px)
    0
    0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(17px, 1.12vw, 26px);

  line-height: 1.6;
}


/* =========================================================
   STATEMENT
========================================================= */

.wdai-intro-statement {
  padding:
    clamp(24px, 2vw, 38px);

  border:
    1px solid var(--ai-line);

  border-radius:
    var(--ai-radius-lg);

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #f1f6ff
    );
}


.wdai-intro-statement > span {
  color:
    #6d89aa;

  font-size:
    clamp(8px, .55vw, 11px);

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-intro-statement strong {
  display: block;

  margin-top: 12px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px, 1.55vw, 34px);

  line-height: 1.18;

  letter-spacing: -.03em;
}


.wdai-intro-statement p {
  margin:
    14px
    0
    0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(12px, .78vw, 15px);

  line-height: 1.65;
}


/* =========================================================
   FLOW
========================================================= */

.wdai-intro-flow {
  margin-top:
    clamp(65px, 6vw, 150px);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: stretch;

  gap:
    clamp(10px, 1vw, 22px);
}


.wdai-intro-step {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;

  padding:
    clamp(22px, 1.8vw, 36px);

  border:
    1px solid var(--ai-line);

  border-radius:
    var(--ai-radius-lg);

  background:
    linear-gradient(
      155deg,
      #ffffff,
      #f8fbff
    );

  box-shadow:
    0 16px 50px rgba(21,54,94,.05);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}


.wdai-intro-step:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(36,107,253,.20);

  box-shadow:
    0 24px 64px rgba(21,54,94,.09);
}


.wdai-intro-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}


.wdai-intro-step-number {
  color:
    #9aadbf;

  font-size:
    clamp(10px, .65vw, 13px);

  font-weight: 800;
}


.wdai-intro-step-head small {
  color:
    var(--ai-blue);

  font-size:
    clamp(8px, .54vw, 10px);

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-intro-step-body {
  margin-top:
    clamp(24px, 2vw, 36px);
}


.wdai-intro-step-body h3 {
  margin: 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px, 1.45vw, 31px);

  line-height: 1.14;

  letter-spacing: -.032em;
}


.wdai-intro-step-body p {
  margin:
    14px
    0
    0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(12px, .75vw, 15px);

  line-height: 1.67;
}


.wdai-intro-step-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top:
    auto;

  padding-top:
    clamp(24px, 2vw, 36px);
}


.wdai-intro-step-tags span {
  padding:
    6px
    8px;

  border:
    1px solid rgba(27,72,126,.09);

  border-radius:
    999px;

  color:
    #6d8198;

  background:
    #f5f8fc;

  font-size:
    clamp(8px, .53vw, 10px);

  font-weight: 700;
}


.wdai-intro-step > a {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  width: max-content;
  max-width: 100%;

  margin-top: 20px;

  color:
    #1e5ccb;

  text-decoration: none;

  font-size:
    clamp(10px, .68vw, 13px);

  font-weight: 800;
}


.wdai-intro-step > a:hover {
  text-decoration: underline;
}


/* =========================================================
   STEP ACCENTS
========================================================= */

.wdai-intro-step-discover {
  border-top:
    3px solid #397cff;
}


.wdai-intro-step-understand {
  border-top:
    3px solid #8957ff;
}


.wdai-intro-step-connect {
  border-top:
    3px solid #39bfe8;
}


.wdai-intro-step-operate {
  border-top:
    3px solid #20c997;
}


/* =========================================================
   FLOW ARROWS
========================================================= */

.wdai-intro-flow-arrow {
  width:
    clamp(20px, 2vw, 42px);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0;
}


.wdai-intro-flow-arrow span {
  width:
    clamp(6px, .7vw, 14px);

  height: 1px;

  background:
    rgba(64,102,148,.22);
}


.wdai-intro-flow-arrow i {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-top:
    1px solid rgba(64,102,148,.45);

  border-right:
    1px solid rgba(64,102,148,.45);

  transform:
    rotate(45deg);
}


/* =========================================================
   CONTROL SECTION
========================================================= */

.wdai-intro-control {
  margin-top:
    clamp(70px, 6vw, 150px);

  display: grid;

  grid-template-columns:
    minmax(360px, .72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(40px, 6vw, 150px);

  align-items: center;

  padding:
    clamp(34px, 3.4vw, 72px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    var(--ai-radius-xl);

  color: #ffffff;

  background:
    radial-gradient(
      circle at 82% 0%,
      rgba(57,124,255,.18),
      transparent 30%
    ),
    linear-gradient(
      140deg,
      #061426,
      #081a30
    );

  box-shadow:
    0 30px 90px rgba(7,30,57,.15);
}


.wdai-intro-control .wdai-intro-kicker {
  color:
    #74a4ff;
}


.wdai-intro-control .wdai-intro-kicker i {
  background:
    #74a4ff;
}


.wdai-intro-control-copy h3 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(31px, 2.7vw, 66px);

  line-height: 1.02;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-intro-control-copy p {
  max-width: 780px;

  margin:
    20px
    0
    0;

  color:
    #9fb4cb;

  font-size:
    clamp(13px, .9vw, 18px);

  line-height: 1.68;
}


/* =========================================================
   CONTROL GRID
========================================================= */

.wdai-intro-control-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:
    clamp(10px, 1.2vw, 22px);
}


.wdai-intro-control-grid article {
  min-width: 0;

  padding:
    clamp(18px, 1.6vw, 30px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.035);
}


.wdai-intro-control-icon {
  width: 32px;
  height: 32px;

  display: block;

  margin-bottom: 24px;

  border-radius:
    10px;

  background:
    rgba(57,124,255,.12);

  box-shadow:
    inset 0 0 0 1px rgba(57,124,255,.18);
}


.wdai-intro-control-icon.is-approved {
  background:
    rgba(137,87,255,.12);

  box-shadow:
    inset 0 0 0 1px rgba(137,87,255,.18);
}


.wdai-intro-control-icon.is-protected {
  background:
    rgba(32,201,151,.10);

  box-shadow:
    inset 0 0 0 1px rgba(32,201,151,.18);
}


.wdai-intro-control-grid small {
  color:
    #718ba7;

  font-size:
    clamp(8px, .5vw, 10px);

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-intro-control-grid strong {
  display: block;

  margin-top: 5px;

  color: #ffffff;

  font-size:
    clamp(15px, 1vw, 20px);
}


.wdai-intro-control-grid p {
  margin:
    10px
    0
    0;

  color:
    #8fa6bf;

  font-size:
    clamp(10px, .66vw, 13px);

  line-height: 1.6;
}


/* =========================================================
   BRAND BRIDGE
========================================================= */

.wdai-intro-brand-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  margin-top:
    clamp(48px, 4vw, 90px);

  padding-top:
    clamp(28px, 2.4vw, 48px);

  border-top:
    1px solid var(--ai-line);
}


.wdai-intro-brand-bridge > div {
  min-width: 0;
}


.wdai-intro-brand-bridge > div span {
  display: block;

  color:
    #7890aa;

  font-size:
    clamp(8px, .55vw, 11px);

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-intro-brand-bridge strong {
  display: block;

  margin-top: 8px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(18px, 1.45vw, 30px);

  line-height: 1.25;
}


.wdai-intro-brand-bridge > a {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding:
    12px
    16px;

  border:
    1px solid var(--ai-line-strong);

  border-radius:
    10px;

  color:
    #1b58be;

  background:
    #ffffff;

  text-decoration: none;

  font-size:
    clamp(10px, .7vw, 13px);

  font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-intro-top {
    grid-template-columns:
      1fr;
  }


  .wdai-intro-statement {
    max-width:
      720px;
  }


  .wdai-intro-flow {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .wdai-intro-flow-arrow {
    display: none;
  }


  .wdai-intro-control {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-intro {
    padding:
      64px
      18px;
  }


  .wdai-intro-heading h2 {
    font-size:
      clamp(46px, 13vw, 66px);
  }


  .wdai-intro-heading > p {
    font-size: 16px;
  }


  .wdai-intro-flow {
    margin-top: 50px;

    grid-template-columns:
      1fr;
  }


  .wdai-intro-step {
    padding: 22px;
  }


  .wdai-intro-control {
    margin-top: 58px;

    padding:
      28px
      20px;

    border-radius: 20px;
  }


  .wdai-intro-control-grid {
    grid-template-columns:
      1fr;
  }


  .wdai-intro-control-icon {
    margin-bottom: 16px;
  }


  .wdai-intro-brand-bridge {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-intro-brand-bridge > a {
    width: 100%;

    justify-content: center;
  }

}

/* =========================================================
   21. ASG — LEADING PUBLIC BUSINESS DOOR
========================================================= */

.wdai-asg {
  position: relative;
  width: 100%;
  max-width: none;
  padding: var(--ai-section-y) var(--ai-edge);
  overflow: hidden;
  background: #f5f9ff;
  border-bottom: 1px solid var(--ai-line);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-asg-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


.wdai-asg-grid {
  position: absolute;
  inset: 0;
  opacity: .22;

  background-image:
    linear-gradient(
      rgba(36,107,253,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(36,107,253,.055) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


.wdai-asg-glow {
  position: absolute;
  border-radius: 50%;
}


.wdai-asg-glow-one {
  width: 700px;
  height: 700px;
  top: -300px;
  left: -240px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.10),
      transparent 70%
    );
}


.wdai-asg-glow-two {
  width: 800px;
  height: 800px;
  right: -350px;
  bottom: -400px;

  background:
    radial-gradient(
      circle,
      rgba(137,87,255,.08),
      transparent 70%
    );
}


/* =========================================================
   HEAD
========================================================= */

.wdai-asg-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(360px, .75fr);

  gap: clamp(50px, 7vw, 180px);
  align-items: end;
}


.wdai-asg-brandline {
  display: flex;
  align-items: center;
  gap: 20px;

  margin-bottom: 28px;
}


.wdai-asg-brandline img {
  width: clamp(120px, 9vw, 220px);
  height: auto;
  object-fit: contain;
}


.wdai-asg-brandline > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.wdai-asg-brandline span {
  color: #6b83a0;
  font-size: clamp(8px, .55vw, 11px);
  font-weight: 850;
  letter-spacing: .14em;
}


.wdai-asg-brandline strong {
  color: var(--ai-text-strong);
  font-size: clamp(17px, 1.2vw, 24px);
}


.wdai-asg-heading h2 {
  max-width: 1400px;
  margin: 0;

  color: var(--ai-text-strong);
  font-size: clamp(52px, 5vw, 126px);
  line-height: .96;
  font-weight: 680;
  letter-spacing: -.055em;
}


.wdai-asg-heading h2 span {
  display: block;
  color: var(--ai-blue);
}


.wdai-asg-intro {
  padding-bottom: 8px;
}


.wdai-asg-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 18px;

  color: #58708c;
  font-size: 11px;
  font-weight: 800;
}


.wdai-asg-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: var(--ai-green);

  box-shadow:
    0 0 0 4px rgba(32,201,151,.08),
    0 0 12px rgba(32,201,151,.4);
}


.wdai-asg-intro p {
  margin: 0;

  color: var(--ai-text-muted);
  font-size: clamp(15px, 1vw, 21px);
  line-height: 1.66;
}


.wdai-asg-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 26px;
}


/* =========================================================
   BUTTONS
========================================================= */

.wdai-asg-btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 0 18px;

  border: 1px solid transparent;
  border-radius: 10px;

  text-decoration: none;

  font-size: 12px;
  font-weight: 800;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}


.wdai-asg-btn:hover {
  transform: translateY(-2px);
}


.wdai-asg-btn-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #246bfd,
      #397cff
    );

  box-shadow:
    0 12px 30px rgba(36,107,253,.22);
}


.wdai-asg-btn-secondary {
  color: #174b94;
  border-color: rgba(29,73,128,.14);
  background: rgba(255,255,255,.8);
}


/* =========================================================
   PRINCIPLES
========================================================= */

.wdai-asg-principles {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

  margin-top: clamp(70px, 6vw, 145px);

  overflow: hidden;

  border: 1px solid var(--ai-line);
  border-radius: 20px;

  background: var(--ai-line);
}


.wdai-asg-principles article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;

  padding: clamp(24px, 2vw, 38px);

  background: rgba(255,255,255,.94);
}


.wdai-asg-principles article > span {
  color: #9aacc0;
  font-size: 10px;
  font-weight: 850;
}


.wdai-asg-principles small {
  color: var(--ai-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}


.wdai-asg-principles strong {
  display: block;
  margin-top: 6px;

  color: var(--ai-text-strong);
  font-size: clamp(17px, 1.2vw, 23px);
}


.wdai-asg-principles p {
  margin: 9px 0 0;

  color: var(--ai-text-muted);
  font-size: clamp(10px, .68vw, 13px);
  line-height: 1.58;
}


/* =========================================================
   DOOR STAGE
========================================================= */

.wdai-asg-door-stage {
  position: relative;
  z-index: 2;

  margin-top: clamp(90px, 7vw, 180px);
}


.wdai-asg-door-heading {
  max-width: 1150px;
}


.wdai-asg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--ai-blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}


.wdai-asg-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--ai-blue);
}


.wdai-asg-door-heading h3 {
  margin: 18px 0 0;

  color: var(--ai-text-strong);
  font-size: clamp(38px, 3.6vw, 88px);
  line-height: 1;
  font-weight: 670;
  letter-spacing: -.05em;
}


.wdai-asg-door-heading p {
  max-width: 900px;

  margin: 22px 0 0;

  color: var(--ai-text-muted);
  font-size: clamp(15px, .95vw, 19px);
  line-height: 1.65;
}


/* =========================================================
   DOORS
========================================================= */

.wdai-asg-doors {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  gap: clamp(15px, 2vw, 36px);

  align-items: stretch;

  margin-top: clamp(50px, 4vw, 90px);
}


.wdai-asg-door {
  min-width: 0;

  padding: clamp(24px, 2.2vw, 44px);

  border: 1px solid var(--ai-line);
  border-radius: 24px;

  background: rgba(255,255,255,.92);

  box-shadow:
    0 22px 70px rgba(23,55,94,.07);
}


.wdai-asg-door header {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 15px;

  align-items: center;
}


.wdai-asg-door-number {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: var(--ai-blue);
  background: rgba(36,107,253,.07);

  font-size: 11px;
  font-weight: 850;
}


.wdai-asg-door-title small {
  color: #748aa4;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}


.wdai-asg-door-title h4 {
  margin: 4px 0 0;

  color: var(--ai-text-strong);
  font-size: clamp(22px, 1.65vw, 34px);
  line-height: 1.1;
}


.wdai-asg-door-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  border-radius: 999px;

  color: #247c62;
  background: rgba(32,201,151,.08);

  font-size: 9px;
  font-weight: 800;
}


.wdai-asg-door-state i {
  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: var(--ai-green);
}


.wdai-asg-door-state.is-gateway {
  color: #315fbb;
  background: rgba(57,124,255,.08);
}


.wdai-asg-door-state.is-gateway i {
  background: var(--ai-blue);
}


.wdai-asg-door-lead {
  margin: 25px 0 0;

  color: var(--ai-text-muted);
  font-size: clamp(13px, .86vw, 17px);
  line-height: 1.65;
}


/* =========================================================
   DIRECTORY VISUAL
========================================================= */

.wdai-asg-directory-visual {
  margin-top: 26px;

  padding: 16px;

  border: 1px solid var(--ai-line);
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #f0f6ff
    );
}


.wdai-asg-directory-search {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 13px;

  border: 1px solid rgba(24,64,111,.1);
  border-radius: 10px;

  background: #fff;
}


.wdai-asg-directory-search span {
  width: 13px;
  height: 13px;

  border: 2px solid #7891ad;
  border-radius: 50%;
}


.wdai-asg-directory-search strong {
  color: #8193a8;
  font-size: 10px;
  font-weight: 650;
}


.wdai-asg-directory-nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 8px;

  margin-top: 12px;
}


.wdai-asg-directory-nodes article {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 9px;
  align-items: center;

  padding: 10px;

  border: 1px solid rgba(25,66,115,.08);
  border-radius: 9px;

  background: rgba(255,255,255,.65);
}


.wdai-asg-directory-nodes i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--ai-blue);
}


.wdai-asg-directory-nodes small {
  display: block;

  color: #8395aa;
  font-size: 7px;
  font-weight: 850;
}


.wdai-asg-directory-nodes strong {
  display: block;

  margin-top: 2px;

  color: var(--ai-text);
  font-size: 10px;
}


.wdai-asg-directory-nodes b {
  color: #8aa0ba;
  font-size: 12px;
}


/* =========================================================
   GATEWAY VISUAL
========================================================= */

.wdai-asg-gateway-visual {
  margin-top: 26px;

  padding: 16px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #07172b,
      #0a1e36
    );
}


.wdai-asg-gateway-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-bottom: 14px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-asg-gateway-top > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.wdai-asg-gateway-top span {
  color: #6f8dab;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
}


.wdai-asg-gateway-top strong {
  color: #fff;
  font-size: 12px;
}


.wdai-asg-gateway-top em {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #9fdac9;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}


.wdai-asg-gateway-top em i {
  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: var(--ai-green);
}


.wdai-asg-gateway-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 7px;

  margin-top: 13px;
}


.wdai-asg-gateway-routes article {
  padding: 10px;

  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;

  background: rgba(255,255,255,.025);
}


.wdai-asg-gateway-routes small {
  color: #6986a3;
  font-size: 6.5px;
  font-weight: 850;
}


.wdai-asg-gateway-routes strong {
  display: block;

  margin-top: 3px;

  color: #fff;
  font-size: 10px;
}


.wdai-asg-gateway-routes span {
  display: block;

  margin-top: 4px;

  color: #829bb5;
  font-size: 8px;
  line-height: 1.4;
}


/* =========================================================
   DOOR FEATURE TAGS
========================================================= */

.wdai-asg-door-features {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 22px;
}


.wdai-asg-door-features span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 6px 8px;

  border: 1px solid rgba(26,68,118,.08);
  border-radius: 999px;

  color: #657d97;
  background: #f6f9fd;

  font-size: 9px;
  font-weight: 700;
}


.wdai-asg-door-features i {
  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--ai-blue);
}


.wdai-asg-door footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 24px;
  padding-top: 18px;

  border-top: 1px solid var(--ai-line);
}


.wdai-asg-door footer a {
  color: #1d5bc4;
  text-decoration: none;

  font-size: 11px;
  font-weight: 800;
}


.wdai-asg-door footer a:last-child {
  color: #687d95;
}


/* =========================================================
   DOOR CONNECTOR
========================================================= */

.wdai-asg-door-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}


.wdai-asg-door-connector > span {
  width: 18px;
  height: 1px;

  background: rgba(36,107,253,.22);
}


.wdai-asg-door-connector > div {
  display: flex;
  align-items: center;

  gap: 5px;

  padding: 7px 9px;

  border: 1px solid rgba(36,107,253,.12);
  border-radius: 999px;

  color: var(--ai-blue);
  background: #fff;
}


.wdai-asg-door-connector i {
  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--ai-blue);
}


.wdai-asg-door-connector small {
  font-size: 8px;
  font-weight: 850;
}


/* =========================================================
   AIG BRIDGE
========================================================= */

.wdai-asg-aig {
  position: relative;
  z-index: 2;

  margin-top: clamp(85px, 7vw, 170px);

  padding: clamp(34px, 3vw, 70px);

  border-radius: 28px;

  color: #fff;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(57,124,255,.18),
      transparent 30%
    ),
    linear-gradient(
      140deg,
      #061426,
      #081a30
    );
}


.wdai-asg-aig-copy {
  max-width: 1050px;
}


.wdai-asg-aig .wdai-asg-kicker {
  color: #7ba9ff;
}


.wdai-asg-aig .wdai-asg-kicker i {
  background: #7ba9ff;
}


.wdai-asg-aig-copy h3 {
  margin: 18px 0 0;

  color: #fff;
  font-size: clamp(34px, 3.3vw, 78px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -.05em;
}


.wdai-asg-aig-copy p {
  max-width: 850px;

  margin: 22px 0 0;

  color: #9db3ca;
  font-size: clamp(13px, .9vw, 18px);
  line-height: 1.65;
}


/* =========================================================
   AIG FLOW
========================================================= */

.wdai-asg-aig-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 10px;

  align-items: center;

  margin-top: clamp(42px, 4vw, 78px);
}


.wdai-asg-aig-flow article {
  min-width: 0;

  padding: 16px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;

  background: rgba(255,255,255,.035);
}


.wdai-asg-aig-flow article > span {
  color: #6381a0;
  font-size: 8px;
  font-weight: 850;
}


.wdai-asg-aig-flow small {
  display: block;

  margin-top: 10px;

  color: #7394b6;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
}


.wdai-asg-aig-flow strong {
  display: block;

  margin-top: 4px;

  color: #fff;
  font-size: clamp(11px, .8vw, 15px);
}


.wdai-asg-aig-flow > i {
  color: #537aa9;
  font-style: normal;
}


.wdai-asg-aig-protocols {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.wdai-asg-aig-protocols span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 6px 9px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;

  color: #93a9c0;
  background: rgba(255,255,255,.025);

  font-size: 9px;
  font-weight: 750;
}


.wdai-asg-aig-protocols i {
  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--ai-blue-soft);
}


/* =========================================================
   SELLER CONTROL
========================================================= */

.wdai-asg-control {
  position: relative;
  z-index: 2;

  margin-top: clamp(70px, 6vw, 140px);
}


.wdai-asg-control-heading {
  max-width: 1100px;
}


.wdai-asg-control-heading > span {
  color: #7089a5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
}


.wdai-asg-control-heading h3 {
  margin: 13px 0 0;

  color: var(--ai-text-strong);
  font-size: clamp(32px, 3vw, 72px);
  line-height: 1.04;
  font-weight: 660;
  letter-spacing: -.05em;
}


.wdai-asg-control-lanes {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr;

  gap: 18px;

  align-items: center;

  margin-top: 38px;
}


.wdai-asg-control-lanes article {
  padding: clamp(22px, 2vw, 36px);

  border: 1px solid var(--ai-line);
  border-radius: 17px;

  background: rgba(255,255,255,.82);
}


.wdai-asg-control-lanes small {
  color: var(--ai-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}


.wdai-asg-control-lanes strong {
  display: block;

  margin-top: 7px;

  color: var(--ai-text-strong);
  font-size: clamp(18px, 1.3vw, 27px);
}


.wdai-asg-control-lanes p {
  margin: 10px 0 0;

  color: var(--ai-text-muted);
  font-size: clamp(11px, .72vw, 14px);
  line-height: 1.6;
}


.wdai-asg-control-arrow {
  color: #7d98b6;
  font-size: 20px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.wdai-asg-final {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  margin-top: clamp(65px, 5vw, 120px);

  padding-top: clamp(30px, 2.5vw, 50px);

  border-top: 1px solid var(--ai-line);
}


.wdai-asg-final > div:first-child span {
  display: block;

  color: #748da8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}


.wdai-asg-final > div:first-child strong {
  display: block;

  margin-top: 8px;

  color: var(--ai-text-strong);
  font-size: clamp(20px, 1.6vw, 32px);
}


.wdai-asg-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  flex: 0 0 auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-asg-head {
    grid-template-columns: 1fr;
  }


  .wdai-asg-intro {
    max-width: 760px;
  }


  .wdai-asg-principles {
    grid-template-columns: repeat(2, 1fr);
  }


  .wdai-asg-doors {
    grid-template-columns: 1fr;
  }


  .wdai-asg-door-connector {
    height: 45px;
  }


  .wdai-asg-door-connector {
    flex-direction: column;
  }


  .wdai-asg-door-connector > span {
    width: 1px;
    height: 10px;
  }


  .wdai-asg-aig-flow {
    grid-template-columns: repeat(2, 1fr);
  }


  .wdai-asg-aig-flow > i {
    display: none;
  }


  .wdai-asg-control-lanes {
    grid-template-columns: 1fr;
  }


  .wdai-asg-control-arrow {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-asg {
    padding: 64px 18px;
  }


  .wdai-asg-brandline {
    align-items: flex-start;
    flex-direction: column;
  }


  .wdai-asg-brandline img {
    width: 145px;
  }


  .wdai-asg-heading h2 {
    font-size: clamp(46px, 13vw, 66px);
  }


  .wdai-asg-head-actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
  }


  .wdai-asg-btn {
    width: 100%;
  }


  .wdai-asg-principles {
    grid-template-columns: 1fr;
  }


  .wdai-asg-door {
    padding: 20px;
  }


  .wdai-asg-door header {
    grid-template-columns: auto 1fr;
  }


  .wdai-asg-door-state {
    grid-column: 1 / -1;
    width: max-content;
  }


  .wdai-asg-directory-nodes {
    grid-template-columns: 1fr;
  }


  .wdai-asg-gateway-routes {
    grid-template-columns: 1fr;
  }


  .wdai-asg-aig {
    padding: 28px 20px;
    border-radius: 20px;
  }


  .wdai-asg-aig-flow {
    grid-template-columns: 1fr;
  }


  .wdai-asg-final {
    align-items: flex-start;
    flex-direction: column;
  }


  .wdai-asg-final-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   22. ASG DIRECTORY
========================================================= */

.wdai-directory {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  background:
    #fff;

  border-bottom:
    1px solid var(--ai-line);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-directory-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-directory-grid {
  position: absolute;
  inset: 0;

  opacity: .18;

  background-image:
    linear-gradient(
      rgba(34,91,157,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(34,91,157,.055) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;
}


.wdai-directory-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-directory-glow-one {
  width: 760px;
  height: 760px;

  top: -360px;
  right: -280px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.09),
      transparent 70%
    );
}


.wdai-directory-glow-two {
  width: 620px;
  height: 620px;

  left: -300px;
  top: 40%;

  background:
    radial-gradient(
      circle,
      rgba(57,213,255,.07),
      transparent 70%
    );
}


/* =========================================================
   HEADER
========================================================= */

.wdai-directory-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 50px;

  align-items: end;
}


.wdai-directory-heading {
  max-width: 1500px;
}


.wdai-directory-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    var(--ai-blue);

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-directory-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-directory-heading h2 {
  margin:
    20px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(52px,5vw,128px);

  line-height: .96;

  font-weight: 680;

  letter-spacing: -.055em;
}


.wdai-directory-heading h2 span {
  display: block;

  color:
    var(--ai-blue);
}


.wdai-directory-heading p {
  max-width: 1050px;

  margin:
    26px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(16px,1.05vw,22px);

  line-height: 1.62;
}


.wdai-directory-head-actions {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-width: 210px;
}


/* =========================================================
   BUTTONS
========================================================= */

.wdai-directory-btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 18px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;
}


.wdai-directory-btn-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #246bfd,
      #397cff
    );

  box-shadow:
    0 12px 30px
    rgba(36,107,253,.2);
}


.wdai-directory-btn-secondary {
  color:
    #174f9c;

  border-color:
    var(--ai-line-strong);

  background:
    #fff;
}


/* =========================================================
   LIVE COCKPIT
========================================================= */

.wdai-directory-live {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr);

  gap:
    clamp(18px,2vw,36px);

  margin-top:
    clamp(65px,5vw,120px);
}


/* =========================================================
   LIVE DATA
========================================================= */

.wdai-directory-live-data {
  overflow: hidden;

  border:
    1px solid var(--ai-line);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #eef5ff
    );

  box-shadow:
    var(--ai-shadow-soft);
}


.wdai-directory-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    clamp(20px,1.8vw,34px);

  border-bottom:
    1px solid var(--ai-line);
}


.wdai-directory-live-head > div:first-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-directory-live-head span {
  color: #7590ae;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-directory-live-head strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(17px,1.2vw,24px);
}


.wdai-directory-live-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    7px 10px;

  border-radius: 999px;

  color: #277a63;

  background:
    rgba(32,201,151,.08);
}


.wdai-directory-live-state i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-directory-live-state span {
  color: inherit;

  letter-spacing: 0;

  text-transform: none;
}


/* =========================================================
   METRICS
========================================================= */

.wdai-directory-metrics {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 1px;

  background:
    var(--ai-line);
}


.wdai-directory-metrics article {
  min-width: 0;

  padding:
    clamp(22px,2vw,40px);

  background:
    rgba(255,255,255,.88);
}


.wdai-directory-metrics span {
  display: block;

  color: #7188a2;

  font-size:
    clamp(9px,.58vw,11px);

  font-weight: 800;
}


.wdai-directory-metrics strong {
  display: block;

  margin-top: 8px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(32px,3vw,68px);

  line-height: 1;

  letter-spacing: -.05em;
}


.wdai-directory-metrics small {
  display: block;

  margin-top: 8px;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(8px,.53vw,11px);
}


.wdai-directory-metric-main {
  grid-column:
    1 / -1;
}


.wdai-directory-metric-main strong {
  color:
    var(--ai-blue);

  font-size:
    clamp(44px,4vw,92px);
}


.wdai-directory-data-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    14px
    clamp(20px,1.8vw,34px);

  border-top:
    1px solid var(--ai-line);
}


.wdai-directory-data-foot span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #7389a2;

  font-size: 9px;

  font-weight: 750;
}


.wdai-directory-data-foot i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-directory-data-foot time {
  color: #8ba0b6;

  font-size: 9px;
}


/* =========================================================
   DISCOVERY
========================================================= */

.wdai-directory-discovery {
  padding:
    clamp(24px,2.4vw,48px);

  border:
    1px solid var(--ai-line);

  border-radius:
    24px;

  background:
    #fff;

  box-shadow:
    var(--ai-shadow-soft);
}


.wdai-directory-discovery-top {
  display: flex;
  justify-content: space-between;

  gap: 25px;
}


.wdai-directory-discovery-top > div {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.wdai-directory-discovery-top span {
  color: #7891ac;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-directory-discovery-top strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(18px,1.35vw,28px);

  line-height: 1.2;
}


.wdai-directory-public-badge {
  height: max-content;

  padding:
    6px 9px;

  border-radius: 999px;

  color:
    #2361c8 !important;

  background:
    rgba(36,107,253,.07);
}


/* =========================================================
   SEARCH
========================================================= */

.wdai-directory-search {
  min-height: 58px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 12px;

  align-items: center;

  margin-top: 28px;

  padding:
    0 15px;

  border:
    1px solid rgba(29,71,120,.14);

  border-radius: 12px;

  color:
    var(--ai-text);

  background:
    #f8fbff;

  text-decoration: none;
}


.wdai-directory-search-icon {
  position: relative;

  width: 16px;
  height: 16px;

  border:
    2px solid #7390ae;

  border-radius: 50%;
}


.wdai-directory-search-icon::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 2px;

  right: -5px;
  bottom: -2px;

  background: #7390ae;

  transform:
    rotate(45deg);
}


.wdai-directory-search strong {
  color: #8496ab;

  font-size:
    clamp(10px,.68vw,13px);

  font-weight: 600;
}


.wdai-directory-search em {
  color:
    var(--ai-blue);

  font-size: 10px;

  font-style: normal;

  font-weight: 800;
}


/* =========================================================
   DISCOVERY PATHS
========================================================= */

.wdai-directory-discovery-paths {
  display: grid;

  gap: 8px;

  margin-top: 17px;
}


.wdai-directory-discovery-paths a {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 13px;

  align-items: center;

  padding:
    15px;

  border:
    1px solid var(--ai-line);

  border-radius: 12px;

  color:
    var(--ai-text);

  background:
    #fff;

  text-decoration: none;

  transition:
    transform 150ms ease,
    border-color 150ms ease;
}


.wdai-directory-discovery-paths a:hover {
  transform:
    translateX(3px);

  border-color:
    rgba(36,107,253,.22);
}


.wdai-directory-discovery-paths > a > span {
  color: #9aadc2;

  font-size: 9px;

  font-weight: 850;
}


.wdai-directory-discovery-paths small {
  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-directory-discovery-paths strong {
  display: block;

  margin-top: 2px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(13px,.9vw,17px);
}


.wdai-directory-discovery-paths p {
  margin:
    4px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.58vw,11px);

  line-height: 1.45;
}


.wdai-directory-discovery-paths b {
  color: #8aa2bd;

  font-size: 15px;
}


/* =========================================================
   TRUST
========================================================= */

.wdai-directory-trust {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 1px;

  margin-top:
    clamp(45px,4vw,85px);

  overflow: hidden;

  border:
    1px solid var(--ai-line);

  border-radius: 18px;

  background:
    var(--ai-line);
}


.wdai-directory-trust article {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 13px;

  padding:
    clamp(20px,1.7vw,32px);

  background: #fff;
}


.wdai-directory-trust-icon {
  position: relative;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  background:
    rgba(36,107,253,.08);
}


.wdai-directory-trust-icon::after {
  content: "";

  position: absolute;

  inset: 11px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-directory-trust-icon.is-verified {
  background:
    rgba(32,201,151,.08);
}


.wdai-directory-trust-icon.is-verified::after {
  background:
    var(--ai-green);
}


.wdai-directory-trust-icon.is-agent {
  background:
    rgba(137,87,255,.08);
}


.wdai-directory-trust-icon.is-agent::after {
  background:
    var(--ai-purple);
}


.wdai-directory-trust-icon.is-data {
  background:
    rgba(57,213,255,.08);
}


.wdai-directory-trust-icon.is-data::after {
  background:
    var(--ai-cyan);
}


.wdai-directory-trust small {
  color: #7891ac;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-directory-trust strong {
  display: block;

  margin-top: 4px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(13px,.9vw,18px);
}


.wdai-directory-trust p {
  margin:
    7px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.58vw,11px);

  line-height: 1.5;
}


/* =========================================================
   LIFECYCLE
========================================================= */

.wdai-directory-lifecycle {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(90px,7vw,180px);
}


.wdai-directory-lifecycle-copy {
  max-width: 1200px;
}


.wdai-directory-lifecycle-copy h3 {
  margin:
    18px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(38px,3.6vw,86px);

  line-height: 1;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-directory-lifecycle-copy p {
  max-width: 900px;

  margin:
    22px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(14px,.9vw,18px);

  line-height: 1.65;
}


/* =========================================================
   LIFECYCLE FLOW
========================================================= */

.wdai-directory-lifecycle-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 10px;

  align-items: center;

  margin-top:
    clamp(45px,4vw,80px);
}


.wdai-directory-lifecycle-flow article {
  min-width: 0;

  min-height: 245px;

  padding:
    clamp(18px,1.6vw,30px);

  border:
    1px solid var(--ai-line);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8fbff
    );
}


.wdai-directory-lifecycle-flow article > span {
  color: #98abc0;

  font-size: 9px;

  font-weight: 850;
}


.wdai-directory-life-icon {
  width: 38px;
  height: 38px;

  margin-top: 28px;

  border-radius: 11px;

  background:
    rgba(36,107,253,.09);
}


.wdai-directory-life-icon.is-normalize {
  background:
    rgba(137,87,255,.09);
}


.wdai-directory-life-icon.is-publish {
  background:
    rgba(32,201,151,.09);
}


.wdai-directory-life-icon.is-expose {
  background:
    rgba(57,213,255,.09);
}


.wdai-directory-life-icon.is-connect {
  background:
    rgba(57,124,255,.12);
}


.wdai-directory-lifecycle-flow small {
  display: block;

  margin-top: 22px;

  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-directory-lifecycle-flow strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(13px,.9vw,18px);
}


.wdai-directory-lifecycle-flow p {
  margin:
    9px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.57vw,11px);

  line-height: 1.55;
}


.wdai-directory-lifecycle-flow > i {
  color: #86a1c0;

  font-size: 15px;

  font-style: normal;
}


/* =========================================================
   AGENTIC LAYER
========================================================= */

.wdai-directory-agentic {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.75fr)
    minmax(0,1.25fr);

  gap:
    clamp(50px,6vw,150px);

  align-items: center;

  margin-top:
    clamp(100px,8vw,200px);

  padding:
    clamp(40px,4vw,90px);

  border-radius: 30px;

  color: #fff;

  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(137,87,255,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 30% 90%,
      rgba(57,124,255,.12),
      transparent 30%
    ),
    linear-gradient(
      140deg,
      #061426,
      #081a30
    );
}


.wdai-directory-agentic-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    #89acff;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-directory-agentic-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-purple);
}


.wdai-directory-agentic-copy h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(36px,3.3vw,78px);

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-directory-agentic-copy p {
  margin:
    22px 0 0;

  color:
    #9cb2c9;

  font-size:
    clamp(13px,.86vw,17px);

  line-height: 1.67;
}


.wdai-directory-agentic-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 28px;
}


.wdai-directory-agentic-actions a {
  color:
    #8db6ff;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;
}


.wdai-directory-agentic-actions a:last-child {
  color:
    #9fb3c9;
}


/* =========================================================
   AGENTIC PANEL
========================================================= */

.wdai-directory-agentic-panel {
  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 20px;

  background:
    rgba(255,255,255,.035);
}


.wdai-directory-agentic-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    20px 22px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-directory-agentic-panel > header > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-directory-agentic-panel header span {
  color: #718daa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-directory-agentic-panel header strong {
  color: #fff;

  font-size:
    clamp(14px,1vw,20px);
}


.wdai-directory-agentic-panel header em {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #9edccb;

  font-size: 9px;

  font-style: normal;

  font-weight: 800;
}


.wdai-directory-agentic-panel header em i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   AGENTIC METRICS
========================================================= */

.wdai-directory-agentic-metrics {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 1px;

  background:
    rgba(255,255,255,.07);
}


.wdai-directory-agentic-metrics article {
  padding:
    clamp(15px,1.4vw,24px);

  background:
    rgba(4,19,36,.82);
}


.wdai-directory-agentic-metrics span {
  color: #7891aa;

  font-size: 8px;
}


.wdai-directory-agentic-metrics strong {
  display: block;

  margin-top: 6px;

  color: #fff;

  font-size:
    clamp(24px,2vw,40px);
}


.wdai-directory-agentic-metrics small {
  display: block;

  margin-top: 5px;

  color: #7f96ae;

  font-size: 8px;
}


/* =========================================================
   AGENTIC FEATURES
========================================================= */

.wdai-directory-agentic-features {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 8px;

  padding: 14px;
}


.wdai-directory-agentic-features article {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 11px;

  padding: 13px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}


.wdai-directory-agentic-icon {
  width: 26px;
  height: 26px;

  border-radius: 8px;

  background:
    rgba(57,124,255,.12);
}


.wdai-directory-agentic-icon.is-capability {
  background:
    rgba(137,87,255,.14);
}


.wdai-directory-agentic-icon.is-trust {
  background:
    rgba(32,201,151,.12);
}


.wdai-directory-agentic-icon.is-route {
  background:
    rgba(57,213,255,.12);
}


.wdai-directory-agentic-features small {
  color: #718ba7;

  font-size: 6px;

  font-weight: 850;
}


.wdai-directory-agentic-features strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 10px;
}


.wdai-directory-agentic-features p {
  margin:
    5px 0 0;

  color: #8198b1;

  font-size: 8px;

  line-height: 1.45;
}


/* =========================================================
   DISCOVERY DOORS
========================================================= */

.wdai-directory-doors {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(95px,7vw,180px);
}


.wdai-directory-doors-head {
  max-width: 1100px;
}


.wdai-directory-doors-head span {
  color: #7890aa;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-directory-doors-head h3 {
  margin:
    15px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(34px,3vw,70px);

  line-height: 1.04;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-directory-door-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 12px;

  margin-top: 38px;
}


.wdai-directory-door-grid article {
  padding:
    clamp(22px,2vw,36px);

  border:
    1px solid var(--ai-line);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8fbff
    );
}


.wdai-directory-door-grid article > span {
  color: #9aadc0;

  font-size: 9px;

  font-weight: 850;
}


.wdai-directory-door-grid small {
  display: block;

  margin-top: 28px;

  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-directory-door-grid strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(15px,1vw,21px);
}


.wdai-directory-door-grid p {
  margin:
    9px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.59vw,12px);

  line-height: 1.55;
}


/* =========================================================
   MACHINE DISCOVERY
========================================================= */

.wdai-directory-machine {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(320px,.7fr)
    minmax(0,1.3fr);

  gap:
    clamp(45px,6vw,140px);

  align-items: center;

  margin-top:
    clamp(90px,7vw,170px);

  padding:
    clamp(35px,3.5vw,72px);

  border:
    1px solid var(--ai-line);

  border-radius: 26px;

  background:
    #f5f9ff;
}


.wdai-directory-machine-copy h3 {
  margin:
    18px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(32px,2.8vw,66px);

  line-height: 1.03;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-directory-machine-copy p {
  margin:
    20px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(12px,.8vw,16px);

  line-height: 1.65;
}


.wdai-directory-machine-routes {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 9px;
}


.wdai-directory-machine-routes a {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 12px;

  align-items: center;

  padding: 15px;

  border:
    1px solid var(--ai-line);

  border-radius: 11px;

  color:
    var(--ai-text);

  background: #fff;

  text-decoration: none;
}


.wdai-directory-machine-routes > a > span {
  min-width: 36px;

  padding:
    6px;

  border-radius: 7px;

  color:
    var(--ai-blue);

  background:
    rgba(36,107,253,.07);

  text-align: center;

  font-size: 8px;

  font-weight: 850;
}


.wdai-directory-machine-routes small {
  color: #7c91aa;

  font-size: 6px;

  font-weight: 850;
}


.wdai-directory-machine-routes strong {
  display: block;

  margin-top: 2px;

  color:
    var(--ai-text-strong);

  font-size: 11px;
}


.wdai-directory-machine-routes p {
  margin:
    3px 0 0;

  color:
    var(--ai-text-muted);

  font-size: 8px;
}


.wdai-directory-machine-routes b {
  color: #8ba1ba;

  font-size: 12px;
}


/* =========================================================
   OWNER CTA
========================================================= */

.wdai-directory-owner {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 60px;

  margin-top:
    clamp(75px,6vw,140px);

  padding-top:
    clamp(35px,3vw,55px);

  border-top:
    1px solid var(--ai-line);
}


.wdai-directory-owner-copy {
  max-width: 1000px;
}


.wdai-directory-owner-copy > span {
  color: #7891ac;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-directory-owner-copy h3 {
  margin:
    10px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(28px,2.5vw,58px);

  line-height: 1.05;

  font-weight: 660;

  letter-spacing: -.045em;
}


.wdai-directory-owner-copy p {
  max-width: 850px;

  margin:
    17px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(12px,.8vw,16px);

  line-height: 1.6;
}


.wdai-directory-owner-actions {
  min-width: 220px;

  display: grid;

  gap: 7px;
}


.wdai-directory-owner-actions a {
  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    0 14px;

  border:
    1px solid var(--ai-line);

  border-radius: 9px;

  color:
    #476582;

  background: #fff;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


.wdai-directory-owner-actions
.wdai-directory-owner-primary {
  color: #fff;

  border-color:
    transparent;

  background:
    var(--ai-blue);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-directory-head {
    grid-template-columns: 1fr;
  }


  .wdai-directory-head-actions {
    width: max-content;

    flex-direction: row;
  }


  .wdai-directory-live {
    grid-template-columns: 1fr;
  }


  .wdai-directory-trust {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-directory-lifecycle-flow {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-directory-lifecycle-flow > i {
    display: none;
  }


  .wdai-directory-agentic {
    grid-template-columns: 1fr;
  }


  .wdai-directory-door-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-directory-machine {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-directory {
    padding:
      64px 18px;
  }


  .wdai-directory-heading h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-directory-head-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;
  }


  .wdai-directory-btn {
    width: 100%;
  }


  .wdai-directory-metrics {
    grid-template-columns: 1fr;
  }


  .wdai-directory-metric-main {
    grid-column: auto;
  }


  .wdai-directory-data-foot {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-directory-discovery {
    padding: 20px;
  }


  .wdai-directory-discovery-top {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-directory-search {
    grid-template-columns:
      auto 1fr;
  }


  .wdai-directory-search em {
    display: none;
  }


  .wdai-directory-trust {
    grid-template-columns: 1fr;
  }


  .wdai-directory-lifecycle-flow {
    grid-template-columns: 1fr;
  }


  .wdai-directory-lifecycle-flow article {
    min-height: 0;
  }


  .wdai-directory-agentic {
    padding:
      28px 20px;

    border-radius: 20px;
  }


  .wdai-directory-agentic-panel > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-directory-agentic-metrics {
    grid-template-columns: 1fr;
  }


  .wdai-directory-agentic-features {
    grid-template-columns: 1fr;
  }


  .wdai-directory-door-grid {
    grid-template-columns: 1fr;
  }


  .wdai-directory-machine {
    padding:
      28px 20px;
  }


  .wdai-directory-machine-routes {
    grid-template-columns: 1fr;
  }


  .wdai-directory-owner {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-directory-owner-actions {
    width: 100%;
  }

}

/* =========================================================
   23. AIG RUNTIME
========================================================= */

.wdai-aig {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #051221,
      #07182c 48%,
      #081c33
    );

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-aig-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-aig-grid {
  position: absolute;
  inset: 0;

  opacity: .23;

  background-image:
    linear-gradient(
      rgba(108,149,199,.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(108,149,199,.07) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.wdai-aig-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-aig-glow-one {
  width: 850px;
  height: 850px;

  top: -400px;
  right: -280px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.16),
      transparent 70%
    );
}


.wdai-aig-glow-two {
  width: 720px;
  height: 720px;

  left: -350px;
  top: 42%;

  background:
    radial-gradient(
      circle,
      rgba(137,87,255,.12),
      transparent 70%
    );
}


.wdai-aig-line {
  position: absolute;

  width: 42vw;
  height: 42vw;

  border:
    1px solid rgba(87,134,190,.05);

  border-radius: 50%;
}


.wdai-aig-line-one {
  top: 10%;
  left: 42%;
}


.wdai-aig-line-two {
  right: -10%;
  bottom: 5%;
}


/* =========================================================
   HEADER
========================================================= */

.wdai-aig-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(340px,.7fr);

  gap:
    clamp(50px,7vw,170px);

  align-items: end;
}


.wdai-aig-heading {
  max-width: 1500px;
}


.wdai-aig-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #83acff;

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-aig-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-purple);

  box-shadow:
    0 0 14px
    rgba(137,87,255,.6);
}


.wdai-aig-heading h2 {
  margin:
    20px 0 0;

  color: #fff;

  font-size:
    clamp(52px,5vw,128px);

  line-height: .96;

  font-weight: 660;

  letter-spacing: -.055em;
}


.wdai-aig-heading h2 span {
  display: block;

  color: #7fa8ff;
}


.wdai-aig-heading p {
  max-width: 1050px;

  margin:
    27px 0 0;

  color: #a2b7cd;

  font-size:
    clamp(15px,1vw,21px);

  line-height: 1.65;
}


/* =========================================================
   HEAD NOTE
========================================================= */

.wdai-aig-head-note {
  padding:
    clamp(24px,2vw,38px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 20px;

  background:
    rgba(255,255,255,.035);
}


.wdai-aig-head-note > span {
  color: #768fa9;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-aig-head-note strong {
  display: block;

  margin-top: 11px;

  color: #fff;

  font-size:
    clamp(20px,1.5vw,32px);

  line-height: 1.15;
}


.wdai-aig-head-note p {
  margin:
    14px 0 0;

  color: #8ea5bc;

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.65;
}


/* =========================================================
   LIVE RUNTIME
========================================================= */

.wdai-aig-runtime {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(70px,6vw,140px);

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 25px;

  background:
    rgba(255,255,255,.025);

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.18);
}


.wdai-aig-runtime-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding:
    clamp(20px,1.8vw,34px);

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-aig-runtime-head > div:first-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-aig-runtime-head span {
  color: #708ca8;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-runtime-head strong {
  color: #fff;

  font-size:
    clamp(17px,1.2vw,24px);
}


.wdai-aig-runtime-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    7px 11px;

  border:
    1px solid rgba(32,201,151,.12);

  border-radius: 999px;

  color: #a4dfcf;

  background:
    rgba(32,201,151,.06);
}


.wdai-aig-runtime-state i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-aig-runtime-state span {
  color: inherit;

  letter-spacing: 0;
}


/* =========================================================
   RUNTIME BODY
========================================================= */

.wdai-aig-runtime-body {
  display: grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

  gap: 1px;

  background:
    rgba(255,255,255,.07);
}


/* =========================================================
   METRICS
========================================================= */

.wdai-aig-metrics {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 1px;

  background:
    rgba(255,255,255,.07);
}


.wdai-aig-metrics article {
  padding:
    clamp(23px,2vw,40px);

  background:
    #07182c;
}


.wdai-aig-metrics span {
  color: #758da7;

  font-size: 9px;

  font-weight: 750;
}


.wdai-aig-metrics strong {
  display: block;

  margin-top: 9px;

  color: #fff;

  font-size:
    clamp(32px,3vw,68px);

  line-height: 1;

  letter-spacing: -.05em;
}


.wdai-aig-metrics small {
  display: block;

  margin-top: 9px;

  color: #70869e;

  font-size:
    clamp(8px,.52vw,10px);
}


/* =========================================================
   STATUS PANEL
========================================================= */

.wdai-aig-status-panel {
  padding:
    clamp(20px,1.8vw,34px);

  background:
    #081a30;
}


.wdai-aig-status-panel > header {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 17px;
}


.wdai-aig-status-panel header div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-aig-status-panel header span {
  color: #6f89a6;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-status-panel header strong {
  color: #fff;

  font-size:
    clamp(14px,1vw,19px);
}


.wdai-aig-status-panel header em {
  color: #758da7;

  font-size: 8px;

  font-style: normal;
}


/* =========================================================
   STATUS LIST
========================================================= */

.wdai-aig-status-list {
  display: grid;

  gap: 7px;
}


.wdai-aig-status-list article {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 11px;

  align-items: center;

  padding:
    11px 12px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-status-list article > i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #59718b;
}


.wdai-aig-status-list div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-aig-status-list small {
  color: #657f9b;

  font-size: 6px;

  font-weight: 850;

  letter-spacing: .1em;
}


.wdai-aig-status-list strong {
  color: #eaf4ff;

  font-size: 10px;
}


.wdai-aig-status-list span {
  color: #748aa2;

  font-size: 8px;
}


.wdai-aig-status-list b {
  color: #7890a8;

  font-size: 8px;

  font-weight: 750;
}


/* =========================================================
   LIVE STATE
========================================================= */

[data-live-protocol][data-state="ready"]
> i,
[data-live-protocol][data-state="ready"]
header i {
  background:
    var(--ai-green);

  box-shadow:
    0 0 10px
    rgba(32,201,151,.45);
}


[data-live-protocol][data-state="ready"]
> b {
  color: #9fddcc;
}


[data-live-protocol][data-state="unavailable"]
> i,
[data-live-protocol][data-state="unavailable"]
header i {
  background:
    #6b7b8c;
}


[data-live-network-state][data-state="offline"] i {
  background:
    #8290a0;

  box-shadow: none;
}


/* =========================================================
   RUNTIME FOOT
========================================================= */

.wdai-aig-runtime-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    10px 20px;

  padding:
    14px
    clamp(20px,1.8vw,34px);

  border-top:
    1px solid rgba(255,255,255,.07);
}


.wdai-aig-runtime-foot span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #7088a0;

  font-size: 8px;
}


.wdai-aig-runtime-foot i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-blue-soft);
}


.wdai-aig-runtime-foot time {
  margin-left: auto;

  color: #667f9a;

  font-size: 8px;
}


/* =========================================================
   DECISION PIPELINE
========================================================= */

.wdai-aig-decision {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(100px,8vw,200px);
}


.wdai-aig-decision-copy {
  max-width: 1200px;
}


.wdai-aig-decision-copy h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(38px,3.6vw,86px);

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-aig-decision-copy p {
  max-width: 900px;

  margin:
    22px 0 0;

  color: #98aec5;

  font-size:
    clamp(13px,.86vw,17px);

  line-height: 1.65;
}


/* =========================================================
   DECISION FLOW
========================================================= */

.wdai-aig-decision-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 10px;

  align-items: center;

  margin-top:
    clamp(45px,4vw,80px);
}


.wdai-aig-decision-flow article {
  min-width: 0;

  min-height: 245px;

  padding:
    clamp(18px,1.5vw,28px);

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 15px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-decision-flow article > span {
  color: #607d9c;

  font-size: 8px;

  font-weight: 850;
}


.wdai-aig-decision-icon {
  width: 38px;
  height: 38px;

  margin-top: 28px;

  border-radius: 11px;

  background:
    rgba(57,124,255,.12);
}


.wdai-aig-decision-icon.is-classify {
  background:
    rgba(57,213,255,.11);
}


.wdai-aig-decision-icon.is-policy {
  background:
    rgba(137,87,255,.13);
}


.wdai-aig-decision-icon.is-knowledge {
  background:
    rgba(32,201,151,.11);
}


.wdai-aig-decision-icon.is-route {
  background:
    rgba(90,140,255,.15);
}


.wdai-aig-decision-flow small {
  display: block;

  margin-top: 22px;

  color: #7da4ef;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-aig-decision-flow strong {
  display: block;

  margin-top: 5px;

  color: #fff;

  font-size:
    clamp(13px,.88vw,17px);
}


.wdai-aig-decision-flow p {
  margin:
    9px 0 0;

  color: #7e96ae;

  font-size:
    clamp(9px,.56vw,11px);

  line-height: 1.55;
}


.wdai-aig-decision-flow > i {
  color: #53769c;

  font-size: 14px;

  font-style: normal;
}


/* =========================================================
   CORE RESPONSIBILITIES
========================================================= */

.wdai-aig-core {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    clamp(12px,1.5vw,28px);

  margin-top:
    clamp(100px,8vw,190px);
}


.wdai-aig-core-card {
  min-width: 0;

  padding:
    clamp(26px,2.5vw,48px);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 22px;

  background:
    rgba(255,255,255,.03);
}


.wdai-aig-core-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wdai-aig-core-card header span {
  color: #627c98;

  font-size: 9px;

  font-weight: 850;
}


.wdai-aig-core-card header small {
  color: #7899c5;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-core-card > h3 {
  margin:
    30px 0 0;

  color: #fff;

  font-size:
    clamp(25px,2vw,42px);

  line-height: 1.05;

  letter-spacing: -.04em;
}


.wdai-aig-core-card > p {
  margin:
    17px 0 0;

  color: #90a6bd;

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.65;
}


/* =========================================================
   POLICY
========================================================= */

.wdai-aig-policy-list {
  display: grid;

  gap: 8px;

  margin-top: 28px;
}


.wdai-aig-policy-list span {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #9cb2c8;

  font-size: 10px;
}


.wdai-aig-policy-list i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-aig-deny-list {
  margin-top: 24px;

  padding:
    14px;

  border:
    1px solid rgba(229,72,77,.12);

  border-radius: 11px;

  background:
    rgba(229,72,77,.035);
}


.wdai-aig-deny-list > span {
  color: #df8e91;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-deny-list div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 9px;
}


.wdai-aig-deny-list small {
  padding:
    5px 7px;

  border-radius: 6px;

  color: #b88f92;

  background:
    rgba(229,72,77,.05);

  font-size: 8px;
}


/* =========================================================
   KNOWLEDGE STACK
========================================================= */

.wdai-aig-knowledge-stack {
  display: grid;

  gap: 7px;

  margin-top: 26px;
}


.wdai-aig-knowledge-stack article {
  padding:
    12px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-knowledge-stack small {
  color: #718eaa;

  font-size: 7px;

  font-weight: 850;
}


.wdai-aig-knowledge-stack strong {
  display: block;

  margin-top: 4px;

  color: #fff;

  font-size: 10px;
}


.wdai-aig-knowledge-stack span {
  display: block;

  margin-top: 4px;

  color: #7e96ae;

  font-size: 8px;
}


/* =========================================================
   PROTOCOL GRID
========================================================= */

.wdai-aig-protocol-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 7px;

  margin-top: 26px;
}


.wdai-aig-protocol-grid > div {
  padding:
    12px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-protocol-grid span {
  color: #81a9ff;

  font-size: 8px;

  font-weight: 850;
}


.wdai-aig-protocol-grid strong {
  display: block;

  margin-top: 5px;

  color: #fff;

  font-size: 10px;
}


.wdai-aig-protocol-grid small {
  display: block;

  margin-top: 3px;

  color: #71889f;

  font-size: 7px;
}


/* =========================================================
   KNOWLEDGE SECTION
========================================================= */

.wdai-aig-knowledge {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.72fr)
    minmax(0,1.28fr);

  gap:
    clamp(55px,7vw,170px);

  align-items: center;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-aig-knowledge-copy h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(34px,3.1vw,72px);

  line-height: 1.02;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-aig-knowledge-copy p {
  margin:
    22px 0 0;

  color: #97adc4;

  font-size:
    clamp(13px,.84vw,17px);

  line-height: 1.67;
}


/* =========================================================
   KNOWLEDGE CONSOLE
========================================================= */

.wdai-aig-knowledge-console {
  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 20px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-knowledge-console > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    18px 20px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-aig-knowledge-console header div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-aig-knowledge-console header span {
  color: #6886a5;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-aig-knowledge-console header strong {
  color: #fff;

  font-size: 13px;
}


.wdai-aig-knowledge-console header em {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #9bdac8;

  font-size: 8px;

  font-style: normal;

  font-weight: 800;
}


.wdai-aig-knowledge-console header em i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   QUERY
========================================================= */

.wdai-aig-query {
  padding:
    20px;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.wdai-aig-query span {
  display: block;

  color: #6d87a2;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-query strong {
  display: block;

  margin-top: 8px;

  color: #dfeeff;

  font-size:
    clamp(14px,1vw,19px);
}


/* =========================================================
   RETRIEVAL
========================================================= */

.wdai-aig-retrieval-row {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 1px;

  background:
    rgba(255,255,255,.06);
}


.wdai-aig-retrieval-row article {
  padding:
    18px;

  background:
    #07182c;
}


.wdai-aig-retrieval-row span {
  color: #6c88a5;

  font-size: 7px;

  font-weight: 850;
}


.wdai-aig-retrieval-row strong {
  display: block;

  margin-top: 5px;

  color: #fff;

  font-size: 11px;
}


.wdai-aig-retrieval-row small {
  display: block;

  margin-top: 4px;

  color: #72889f;

  font-size: 8px;
}


.wdai-aig-context-arrow {
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;
}


.wdai-aig-context-arrow span {
  width: 30px;
  height: 1px;

  background:
    rgba(100,143,192,.2);
}


.wdai-aig-context-arrow i {
  color: #7297c3;

  font-style: normal;
}


/* =========================================================
   ANSWER
========================================================= */

.wdai-aig-answer {
  margin:
    0 16px 16px;

  padding:
    18px;

  border:
    1px solid rgba(32,201,151,.12);

  border-radius: 12px;

  background:
    rgba(32,201,151,.035);
}


.wdai-aig-answer > span {
  color: #72bfa9;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-aig-answer > strong {
  display: block;

  margin-top: 7px;

  color: #fff;

  font-size:
    clamp(13px,.9vw,17px);
}


.wdai-aig-answer > div {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 14px;
}


.wdai-aig-answer small {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color: #86aa9f;

  font-size: 8px;
}


.wdai-aig-answer small i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   BOUNDARY
========================================================= */

.wdai-aig-boundary {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(105px,8vw,200px);
}


.wdai-aig-boundary-head {
  max-width: 1100px;
}


.wdai-aig-boundary-head > span {
  color: #718eaa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-aig-boundary-head h3 {
  margin:
    14px 0 0;

  color: #fff;

  font-size:
    clamp(34px,3vw,70px);

  line-height: 1.03;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-aig-boundary-head p {
  margin:
    18px 0 0;

  color: #8fa6bd;

  font-size:
    clamp(12px,.78vw,15px);
}


/* =========================================================
   BOUNDARY GRID
========================================================= */

.wdai-aig-boundary-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 12px;

  margin-top: 38px;
}


.wdai-aig-boundary-grid article {
  padding:
    clamp(24px,2vw,38px);

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 18px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-boundary-grid article > span {
  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-aig-boundary-grid .is-public > span {
  color: #76a3ff;
}


.wdai-aig-boundary-grid .is-approved > span {
  color: #b28cff;
}


.wdai-aig-boundary-grid .is-protected > span {
  color: #82cdb8;
}


.wdai-aig-boundary-grid strong {
  display: block;

  margin-top: 8px;

  color: #fff;

  font-size:
    clamp(20px,1.5vw,30px);
}


.wdai-aig-boundary-grid p {
  margin:
    13px 0 0;

  color: #8ca3ba;

  font-size:
    clamp(10px,.68vw,13px);

  line-height: 1.6;
}


.wdai-aig-boundary-grid small {
  display: block;

  margin-top: 22px;

  color: #667f99;

  font-size: 8px;

  font-weight: 750;
}


/* =========================================================
   MACHINE LAYER
========================================================= */

.wdai-aig-machine {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-aig-machine-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.55fr);

  gap:
    clamp(40px,6vw,140px);

  align-items: end;
}


.wdai-aig-machine-head h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(36px,3.4vw,82px);

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-aig-machine-head > p {
  margin: 0;

  color: #8fa6bd;

  font-size:
    clamp(12px,.8vw,16px);

  line-height: 1.65;
}


.wdai-aig-machine-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 10px;

  margin-top: 42px;
}


.wdai-aig-machine-grid article {
  min-width: 0;

  padding:
    clamp(22px,1.8vw,34px);

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 17px;

  background:
    rgba(255,255,255,.025);
}


.wdai-aig-machine-grid header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wdai-aig-machine-grid header span {
  color: #83aaff;

  font-size: 12px;

  font-weight: 850;
}


.wdai-aig-machine-grid header i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #627b96;
}


.wdai-aig-machine-grid > article > strong {
  display: block;

  margin-top: 30px;

  color: #fff;

  font-size:
    clamp(16px,1.2vw,23px);
}


.wdai-aig-machine-grid > article > p {
  margin:
    12px 0 0;

  color: #879fb7;

  font-size:
    clamp(9px,.6vw,12px);

  line-height: 1.6;
}


.wdai-aig-machine-grid footer {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 24px;
}


.wdai-aig-machine-grid footer small {
  padding:
    5px 7px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 6px;

  color: #728aa3;

  font-size: 6px;

  font-weight: 850;
}


/* =========================================================
   SYSTEM BRIDGE
========================================================= */

.wdai-aig-systems-bridge {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

  gap:
    clamp(50px,7vw,160px);

  align-items: center;

  margin-top:
    clamp(100px,8vw,190px);

  padding-top:
    clamp(40px,3vw,60px);

  border-top:
    1px solid rgba(255,255,255,.08);
}


.wdai-aig-systems-bridge > div:first-child span {
  color: #718ca7;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-aig-systems-bridge > div:first-child strong {
  display: block;

  margin-top: 10px;

  color: #fff;

  font-size:
    clamp(22px,1.8vw,36px);

  line-height: 1.2;
}


.wdai-aig-system-links {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;
}


.wdai-aig-system-links a {
  min-width: 0;

  padding:
    16px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 11px;

  color: #fff;

  background:
    rgba(255,255,255,.025);

  text-decoration: none;
}


.wdai-aig-system-links small {
  color: #6f89a5;

  font-size: 7px;

  font-weight: 850;
}


.wdai-aig-system-links strong {
  display: block;

  margin-top: 6px;

  color: #fff;

  font-size: 15px;
}


.wdai-aig-system-links span {
  display: block;

  margin-top: 10px;

  color: #80a8f7;

  font-size: 9px;

  font-weight: 750;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-aig-head {
    grid-template-columns: 1fr;
  }


  .wdai-aig-head-note {
    max-width: 720px;
  }


  .wdai-aig-runtime-body {
    grid-template-columns: 1fr;
  }


  .wdai-aig-decision-flow {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-aig-decision-flow > i {
    display: none;
  }


  .wdai-aig-core {
    grid-template-columns: 1fr;
  }


  .wdai-aig-knowledge {
    grid-template-columns: 1fr;
  }


  .wdai-aig-boundary-grid {
    grid-template-columns: 1fr;
  }


  .wdai-aig-machine-head {
    grid-template-columns: 1fr;
  }


  .wdai-aig-machine-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-aig-systems-bridge {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-aig {
    padding:
      64px 18px;
  }


  .wdai-aig-heading h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-aig-runtime-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-aig-metrics {
    grid-template-columns: 1fr;
  }


  .wdai-aig-status-panel > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-aig-runtime-foot {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-aig-runtime-foot time {
    margin-left: 0;
  }


  .wdai-aig-decision-flow {
    grid-template-columns: 1fr;
  }


  .wdai-aig-decision-flow article {
    min-height: 0;
  }


  .wdai-aig-protocol-grid {
    grid-template-columns: 1fr;
  }


  .wdai-aig-knowledge-console > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-aig-retrieval-row {
    grid-template-columns: 1fr;
  }


  .wdai-aig-machine-grid {
    grid-template-columns: 1fr;
  }


  .wdai-aig-system-links {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   24. WEBDOCS BUSINESS SYSTEMS
========================================================= */

.wdai-systems {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  color:
    var(--ai-text);

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #fff 48%,
      #f3f8ff
    );

  border-bottom:
    1px solid var(--ai-line);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-systems-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-systems-grid-bg {
  position: absolute;
  inset: 0;

  opacity: .16;

  background-image:
    linear-gradient(
      rgba(30,77,133,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(30,77,133,.055) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;
}


.wdai-systems-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-systems-glow-one {
  width: 760px;
  height: 760px;

  top: -350px;
  left: -300px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.08),
      transparent 70%
    );
}


.wdai-systems-glow-two {
  width: 800px;
  height: 800px;

  right: -350px;
  top: 44%;

  background:
    radial-gradient(
      circle,
      rgba(137,87,255,.06),
      transparent 70%
    );
}


/* =========================================================
   SECTION HEAD
========================================================= */

.wdai-systems-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.55fr);

  gap:
    clamp(50px,7vw,170px);

  align-items: end;
}


.wdai-systems-heading {
  max-width: 1450px;
}


.wdai-systems-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    var(--ai-blue);

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-systems-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-systems-heading h2 {
  margin:
    20px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(52px,5vw,126px);

  line-height: .96;

  font-weight: 670;

  letter-spacing: -.055em;
}


.wdai-systems-heading h2 span {
  display: block;

  color:
    var(--ai-blue);
}


.wdai-systems-heading p {
  max-width: 1050px;

  margin:
    27px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(15px,1vw,21px);

  line-height: 1.65;
}


/* =========================================================
   SELECTOR
========================================================= */

.wdai-systems-selector {
  display: grid;

  gap: 7px;
}


.wdai-systems-selector a {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 13px;

  align-items: center;

  min-height: 66px;

  padding:
    10px 14px;

  border:
    1px solid var(--ai-line);

  border-radius: 11px;

  color:
    var(--ai-text);

  background:
    rgba(255,255,255,.75);

  text-decoration: none;

  transition:
    transform 150ms ease,
    border-color 150ms ease;
}


.wdai-systems-selector a:hover {
  transform:
    translateX(3px);

  border-color:
    rgba(36,107,253,.2);
}


.wdai-systems-selector > a > span {
  color: #97aabe;

  font-size: 9px;

  font-weight: 850;
}


.wdai-systems-selector div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-systems-selector small {
  color: #7890aa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-systems-selector strong {
  color:
    var(--ai-text-strong);

  font-size: 16px;
}


/* =========================================================
   SYSTEM LAYOUT
========================================================= */

.wdai-system {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.76fr)
    minmax(0,1.24fr);

  gap:
    clamp(55px,7vw,180px);

  align-items: center;

  margin-top:
    clamp(100px,8vw,210px);

  scroll-margin-top:
    calc(var(--ai-header-height) + 35px);
}


.wdai-system-rtd {
  grid-template-columns:
    minmax(0,1.24fr)
    minmax(0,.76fr);
}


/* =========================================================
   SYSTEM COPY
========================================================= */

.wdai-system-copy {
  min-width: 0;
}


.wdai-system-label {
  display: flex;
  align-items: center;

  gap: 14px;
}


.wdai-system-label > span {
  color: #9aacbf;

  font-size: 10px;

  font-weight: 850;
}


.wdai-system-label > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-system-label small {
  color:
    var(--ai-blue);

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-system-label strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(18px,1.3vw,26px);
}


.wdai-system-copy h3 {
  margin:
    28px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(36px,3.4vw,78px);

  line-height: 1.01;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-system-copy > p {
  margin:
    24px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(14px,.9vw,18px);

  line-height: 1.7;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.wdai-system-capabilities {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 26px;
}


.wdai-system-capabilities span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    7px 9px;

  border:
    1px solid var(--ai-line);

  border-radius: 999px;

  color: #617890;

  background:
    rgba(255,255,255,.8);

  font-size:
    clamp(8px,.54vw,10px);

  font-weight: 700;
}


.wdai-system-capabilities i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-system-rtd
.wdai-system-capabilities i {
  background:
    var(--ai-purple);
}


.wdai-system-industry
.wdai-system-capabilities i {
  background:
    var(--ai-green);
}


/* =========================================================
   ACTIONS
========================================================= */

.wdai-system-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 30px;
}


.wdai-system-btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 18px;

  border-radius: 10px;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;
}


.wdai-system-btn-primary {
  color: #fff;

  background:
    var(--ai-blue);

  box-shadow:
    0 12px 28px
    rgba(36,107,253,.2);
}


.wdai-system-text-link {
  color: #527093;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;
}


/* =========================================================
   COMMON SCENE
========================================================= */

.wdai-system-scene {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    clamp(20px,1.8vw,30px);

  color: #fff;

  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(57,124,255,.17),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #061426,
      #081a30
    );

  box-shadow:
    0 30px 90px
    rgba(15,47,85,.16);
}


.wdai-scene-bar {
  min-height: 54px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 16px;

  align-items: center;

  padding:
    0 18px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-scene-bar > div {
  display: flex;

  gap: 5px;
}


.wdai-scene-bar > div i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #536d88;
}


.wdai-scene-bar > div i:nth-child(2) {
  background: #6d7f94;
}


.wdai-scene-bar > div i:nth-child(3) {
  background: #63856f;
}


.wdai-scene-bar > span {
  color: #7890a8;

  font-size: 8px;
}


.wdai-scene-bar > em {
  color: #91aff1;

  font-size: 8px;

  font-style: normal;

  font-weight: 800;
}


.wdai-scene-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    10px 20px;

  padding:
    14px 18px;

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(0,0,0,.08);
}


.wdai-scene-foot span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #718ba5;

  font-size: 8px;
}


.wdai-scene-foot i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   RTC SCENE
========================================================= */

.wdai-rtc-browser {
  position: relative;

  min-height:
    clamp(430px,31vw,620px);

  padding:
    clamp(28px,3vw,60px);

  background:
    linear-gradient(
      135deg,
      #f7faff,
      #edf4fd
    );
}


.wdai-rtc-site {
  width: 58%;

  padding:
    clamp(22px,2vw,36px);

  color:
    var(--ai-text);

  border:
    1px solid rgba(25,66,115,.09);

  border-radius: 15px;

  background: #fff;
}


.wdai-rtc-site > span {
  color: #7890aa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-rtc-site h4 {
  max-width: 430px;

  margin:
    13px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px,1.7vw,34px);

  line-height: 1.05;

  letter-spacing: -.04em;
}


.wdai-rtc-site p {
  max-width: 400px;

  margin:
    12px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.6vw,12px);

  line-height: 1.55;
}


.wdai-rtc-site-lines {
  display: grid;

  gap: 8px;

  margin-top: 30px;
}


.wdai-rtc-site-lines i {
  height: 7px;

  border-radius: 99px;

  background:
    #e7edf5;
}


.wdai-rtc-site-lines i:nth-child(1) {
  width: 84%;
}


.wdai-rtc-site-lines i:nth-child(2) {
  width: 66%;
}


.wdai-rtc-site-lines i:nth-child(3) {
  width: 48%;
}


/* =========================================================
   RTC CHAT
========================================================= */

.wdai-rtc-chat {
  position: absolute;

  width: 48%;

  right:
    clamp(20px,2vw,38px);

  bottom:
    clamp(22px,2vw,40px);

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius: 17px;

  background:
    #07182c;

  box-shadow:
    0 24px 60px
    rgba(6,20,38,.25);
}


.wdai-rtc-chat > header {
  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    13px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.wdai-rtc-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: #fff;

  background:
    var(--ai-blue);

  font-size: 9px;

  font-weight: 850;
}


.wdai-rtc-chat header > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-rtc-chat header strong {
  color: #fff;

  font-size: 10px;
}


.wdai-rtc-chat header span {
  display: flex;
  align-items: center;

  gap: 5px;

  color: #7793ae;

  font-size: 7px;
}


.wdai-rtc-chat header i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-rtc-conversation {
  display: grid;

  gap: 9px;

  padding: 14px;
}


.wdai-rtc-conversation p {
  width: 85%;

  margin: 0;

  padding:
    9px 10px;

  border-radius: 10px;

  font-size:
    clamp(7.5px,.5vw,10px);

  line-height: 1.45;
}


.wdai-rtc-conversation .is-agent {
  color: #aabfd4;

  background:
    rgba(255,255,255,.05);
}


.wdai-rtc-conversation .is-visitor {
  margin-left: auto;

  color: #dbe9ff;

  background:
    rgba(57,124,255,.15);
}


.wdai-rtc-chat footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    10px 13px;

  border-top:
    1px solid rgba(255,255,255,.06);
}


.wdai-rtc-chat footer span {
  color: #6f89a3;

  font-size: 7px;
}


.wdai-rtc-chat footer strong {
  color: #8eb3ff;

  font-size: 8px;
}


/* =========================================================
   RTC HANDOFF
========================================================= */

.wdai-rtc-handoff {
  padding:
    18px;

  border-top:
    1px solid rgba(255,255,255,.07);
}


.wdai-rtc-handoff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.wdai-rtc-handoff-head span {
  color: #718aa4;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-rtc-handoff-head strong {
  color: #dce9f6;

  font-size: 9px;
}


.wdai-rtc-handoff-flow {
  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  gap: 8px;

  align-items: center;

  margin-top: 13px;
}


.wdai-rtc-handoff-flow > div {
  padding: 10px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 8px;

  background:
    rgba(255,255,255,.025);
}


.wdai-rtc-handoff-flow
.is-handoff {
  border-color:
    rgba(57,124,255,.16);

  background:
    rgba(57,124,255,.07);
}


.wdai-rtc-handoff-flow span {
  display: block;

  color: #6e88a2;

  font-size: 6px;
}


.wdai-rtc-handoff-flow strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 8px;
}


.wdai-rtc-handoff-flow > i {
  color: #6684a4;

  font-size: 11px;

  font-style: normal;
}


/* =========================================================
   RTD
========================================================= */

.wdai-rtd-scene {
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(137,87,255,.16),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #061426,
      #09182e
    );
}


.wdai-rtd-session {
  padding:
    clamp(24px,2.5vw,48px);
}


.wdai-rtd-session > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.wdai-rtd-agent {
  display: flex;
  align-items: center;

  gap: 12px;
}


.wdai-rtd-agent-mark {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(137,87,255,.25);

  border-radius: 13px;

  color: #d2b9ff;

  background:
    rgba(137,87,255,.1);

  font-size: 11px;

  font-weight: 850;
}


.wdai-rtd-agent div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-rtd-agent small {
  color: #748ca6;

  font-size: 7px;

  font-weight: 850;
}


.wdai-rtd-agent strong {
  color: #fff;

  font-size:
    clamp(13px,.9vw,18px);
}


.wdai-rtd-session-state {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    7px 10px;

  border-radius: 999px;

  color: #a6e0cf;

  background:
    rgba(32,201,151,.07);

  font-size: 8px;

  font-weight: 800;
}


.wdai-rtd-session-state i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   RTD VOICE
========================================================= */

.wdai-rtd-voice {
  margin-top: 34px;

  padding:
    clamp(20px,2vw,34px);

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 15px;

  background:
    rgba(255,255,255,.025);
}


.wdai-rtd-wave {
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(3px,.35vw,7px);
}


.wdai-rtd-wave i {
  width:
    clamp(3px,.25vw,5px);

  min-height: 10px;

  border-radius: 999px;

  background:
    linear-gradient(
      to top,
      #6b57ff,
      #42c7ff
    );
}


.wdai-rtd-voice-copy {
  margin-top: 19px;

  text-align: center;
}


.wdai-rtd-voice-copy span {
  color: #718ca8;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-rtd-voice-copy strong {
  display: block;

  max-width: 600px;

  margin:
    8px auto 0;

  color: #e8f2ff;

  font-size:
    clamp(12px,.88vw,17px);

  line-height: 1.4;
}


/* =========================================================
   RTD PROCESS
========================================================= */

.wdai-rtd-processing {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr;

  gap: 8px;

  align-items: center;

  margin-top: 14px;
}


.wdai-rtd-processing article {
  padding: 12px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 9px;

  background:
    rgba(255,255,255,.02);
}


.wdai-rtd-processing article > span {
  color: #647f9d;

  font-size: 7px;

  font-weight: 850;
}


.wdai-rtd-processing small {
  display: block;

  margin-top: 8px;

  color: #8d72db;

  font-size: 6px;

  font-weight: 850;
}


.wdai-rtd-processing strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 9px;
}


.wdai-rtd-processing > i {
  color: #607d9e;

  font-size: 10px;

  font-style: normal;
}


/* =========================================================
   RTD ANSWER
========================================================= */

.wdai-rtd-answer {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 11px;

  align-items: start;

  margin-top: 14px;

  padding: 14px;

  border:
    1px solid rgba(137,87,255,.12);

  border-radius: 10px;

  background:
    rgba(137,87,255,.04);
}


.wdai-rtd-answer > span {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  color: #d3bcff;

  background:
    rgba(137,87,255,.11);

  font-size: 7px;

  font-weight: 850;
}


.wdai-rtd-answer p {
  margin: 0;

  color: #a9bbcf;

  font-size:
    clamp(8px,.55vw,11px);

  line-height: 1.55;
}


/* =========================================================
   RTD CHANNELS
========================================================= */

.wdai-rtd-channels {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 7px;

  margin-top: 15px;
}


.wdai-rtd-channels article {
  padding: 10px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 8px;

  background:
    rgba(255,255,255,.02);
}


.wdai-rtd-channels
.is-active {
  border-color:
    rgba(32,201,151,.13);

  background:
    rgba(32,201,151,.04);
}


.wdai-rtd-channels span {
  color: #7088a2;

  font-size: 6px;

  font-weight: 850;
}


.wdai-rtd-channels strong {
  display: block;

  margin-top: 4px;

  color: #dce9f6;

  font-size: 8px;
}


/* =========================================================
   INDUSTRY SCENE
========================================================= */

.wdai-industry-scene {
  background:
    radial-gradient(
      circle at 82% 0%,
      rgba(32,201,151,.12),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #061426,
      #081a30
    );
}


.wdai-industry-console {
  padding:
    clamp(24px,2.5vw,48px);
}


.wdai-industry-console > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.wdai-industry-console
> header > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-industry-console
header span {
  color: #708ba6;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .1em;
}


.wdai-industry-console
header strong {
  color: #fff;

  font-size:
    clamp(13px,.9vw,18px);
}


.wdai-industry-console
header em {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #a1ddcc;

  font-size: 8px;

  font-style: normal;

  font-weight: 800;
}


.wdai-industry-console
header em i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   INDUSTRY REQUEST
========================================================= */

.wdai-industry-request {
  margin-top: 28px;

  padding:
    18px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);
}


.wdai-industry-request > span {
  color: #708ba6;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-industry-request > strong {
  display: block;

  max-width: 700px;

  margin-top: 9px;

  color: #e6f1fd;

  font-size:
    clamp(13px,.95vw,18px);

  line-height: 1.45;
}


.wdai-industry-request > div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;
}


.wdai-industry-request small {
  padding:
    5px 7px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 6px;

  color: #7f99b2;

  background:
    rgba(255,255,255,.02);

  font-size: 7px;
}


/* =========================================================
   INDUSTRY WORKFLOW
========================================================= */

.wdai-industry-workflow {
  display: grid;

  gap: 0;

  margin-top: 18px;
}


.wdai-industry-workflow article {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 12px;

  align-items: center;

  padding: 13px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 9px;

  background:
    rgba(255,255,255,.02);
}


.wdai-industry-workflow
article > span {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  color: #7992ab;

  background:
    rgba(255,255,255,.04);

  font-size: 7px;

  font-weight: 850;
}


.wdai-industry-workflow
article > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-industry-workflow small {
  color: #66839f;

  font-size: 6px;

  font-weight: 850;
}


.wdai-industry-workflow strong {
  color: #fff;

  font-size: 9px;
}


.wdai-industry-workflow p {
  margin: 0;

  color: #778ea6;

  font-size: 7px;
}


.wdai-industry-workflow em {
  color: #748ba3;

  font-size: 7px;

  font-style: normal;
}


.wdai-industry-workflow
.is-complete {
  border-color:
    rgba(32,201,151,.09);
}


.wdai-industry-workflow
.is-complete em {
  color: #76bda9;
}


.wdai-industry-workflow
.is-active {
  border-color:
    rgba(57,124,255,.16);

  background:
    rgba(57,124,255,.05);
}


.wdai-industry-workflow
.is-active em {
  color: #88adfb;
}


.wdai-industry-workflow
> i {
  width: 1px;
  height: 9px;

  margin-left: 26px;

  background:
    rgba(100,137,177,.25);
}


/* =========================================================
   INDUSTRY DASHBOARD
========================================================= */

.wdai-industry-dashboard {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 7px;

  margin-top: 17px;
}


.wdai-industry-dashboard article {
  padding: 10px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 8px;

  background:
    rgba(255,255,255,.02);
}


.wdai-industry-dashboard small {
  color: #6e88a3;

  font-size: 6px;

  font-weight: 850;
}


.wdai-industry-dashboard strong {
  display: block;

  margin-top: 4px;

  color: #fff;

  font-size: 8px;
}


/* =========================================================
   COMPARISON
========================================================= */

.wdai-systems-compare {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-systems-compare-head {
  max-width: 1100px;
}


.wdai-systems-compare-head > span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-systems-compare-head h3 {
  margin:
    14px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(34px,3vw,70px);

  line-height: 1.03;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-systems-compare-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 12px;

  margin-top: 38px;
}


.wdai-systems-compare-grid article {
  padding:
    clamp(24px,2vw,40px);

  border:
    1px solid var(--ai-line);

  border-radius: 18px;

  background:
    rgba(255,255,255,.86);

  box-shadow:
    0 16px 50px
    rgba(20,54,94,.05);
}


.wdai-systems-compare-grid
article > span {
  color:
    var(--ai-blue);

  font-size: 11px;

  font-weight: 850;
}


.wdai-systems-compare-grid small {
  display: block;

  margin-top: 28px;

  color: #7890aa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-systems-compare-grid strong {
  display: block;

  margin-top: 6px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(18px,1.35vw,27px);
}


.wdai-systems-compare-grid p {
  margin:
    12px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(10px,.65vw,13px);

  line-height: 1.6;
}


.wdai-systems-compare-grid a {
  display: inline-block;

  margin-top: 24px;

  color: #225ec2;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


/* =========================================================
   NETWORK BRIDGE
========================================================= */

.wdai-systems-network {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(320px,.6fr)
    minmax(0,1.4fr);

  gap:
    clamp(45px,6vw,140px);

  align-items: center;

  margin-top:
    clamp(85px,7vw,170px);

  padding:
    clamp(32px,3vw,62px);

  border:
    1px solid var(--ai-line);

  border-radius: 24px;

  background:
    #f3f8ff;
}


.wdai-systems-network-copy > span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-systems-network-copy strong {
  display: block;

  margin-top: 10px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px,1.6vw,32px);

  line-height: 1.25;
}


.wdai-systems-network-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    repeat(3,1fr);

  gap: 8px;

  align-items: center;
}


.wdai-systems-network-flow article {
  min-width: 0;

  padding: 12px;

  border:
    1px solid var(--ai-line);

  border-radius: 9px;

  background: #fff;
}


.wdai-systems-network-flow small {
  color: #8296ad;

  font-size: 6px;

  font-weight: 850;
}


.wdai-systems-network-flow strong {
  display: block;

  margin-top: 4px;

  color:
    var(--ai-text-strong);

  font-size: 10px;
}


.wdai-systems-network-flow > i {
  color: #829bb6;

  font-size: 11px;

  font-style: normal;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-systems-head {
    grid-template-columns: 1fr;
  }


  .wdai-systems-selector {
    max-width: 650px;

    grid-template-columns:
      repeat(3,1fr);
  }


  .wdai-system,
  .wdai-system-rtd {
    grid-template-columns: 1fr;
  }


  .wdai-system-rtd
  .wdai-system-scene {
    order: 2;
  }


  .wdai-system-rtd
  .wdai-system-copy {
    order: 1;
  }


  .wdai-systems-network {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-systems {
    padding:
      64px 18px;
  }


  .wdai-systems-heading h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-systems-selector {
    grid-template-columns: 1fr;
  }


  .wdai-system {
    margin-top: 80px;
  }


  .wdai-rtc-browser {
    min-height: 560px;

    padding: 18px;
  }


  .wdai-rtc-site {
    width: 100%;
  }


  .wdai-rtc-chat {
    width:
      calc(100% - 36px);

    right: 18px;
    bottom: 18px;
  }


  .wdai-rtc-handoff-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-rtc-handoff-flow {
    grid-template-columns: 1fr;
  }


  .wdai-rtc-handoff-flow > i {
    display: none;
  }


  .wdai-rtd-session {
    padding: 20px;
  }


  .wdai-rtd-session > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-rtd-processing {
    grid-template-columns: 1fr;
  }


  .wdai-rtd-processing > i {
    display: none;
  }


  .wdai-rtd-channels {
    grid-template-columns: 1fr;
  }


  .wdai-industry-console {
    padding: 20px;
  }


  .wdai-industry-console > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-industry-workflow article {
    grid-template-columns:
      auto 1fr;
  }


  .wdai-industry-workflow em {
    grid-column:
      2;
  }


  .wdai-industry-dashboard {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-systems-compare-grid {
    grid-template-columns: 1fr;
  }


  .wdai-systems-network-flow {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-systems-network-flow > i {
    display: none;
  }

}

/* =========================================================
   25. AI COMMERCE
========================================================= */

.wdai-commerce {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #051221,
      #07182c 52%,
      #081b31
    );

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-commerce-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-commerce-grid {
  position: absolute;
  inset: 0;

  opacity: .2;

  background-image:
    linear-gradient(
      rgba(97,139,190,.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(97,139,190,.07) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;
}


.wdai-commerce-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-commerce-glow-one {
  width: 850px;
  height: 850px;

  top: -410px;
  left: -280px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.15),
      transparent 70%
    );
}


.wdai-commerce-glow-two {
  width: 760px;
  height: 760px;

  right: -320px;
  top: 38%;

  background:
    radial-gradient(
      circle,
      rgba(137,87,255,.12),
      transparent 70%
    );
}


.wdai-commerce-ring {
  position: absolute;

  border:
    1px solid
    rgba(105,148,201,.05);

  border-radius: 50%;
}


.wdai-commerce-ring-one {
  width: 42vw;
  height: 42vw;

  top: 8%;
  left: 44%;
}


.wdai-commerce-ring-two {
  width: 35vw;
  height: 35vw;

  right: -10%;
  bottom: 6%;
}


/* =========================================================
   HEAD
========================================================= */

.wdai-commerce-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(340px,.75fr);

  gap:
    clamp(50px,7vw,170px);

  align-items: end;
}


.wdai-commerce-heading {
  max-width: 1450px;
}


.wdai-commerce-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #82aaff;

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-commerce-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-purple);

  box-shadow:
    0 0 14px
    rgba(137,87,255,.55);
}


.wdai-commerce-heading h2 {
  margin:
    20px 0 0;

  color: #fff;

  font-size:
    clamp(52px,5vw,126px);

  line-height: .96;

  font-weight: 660;

  letter-spacing: -.055em;
}


.wdai-commerce-heading h2 span {
  display: block;

  color: #80a9ff;
}


.wdai-commerce-heading p {
  max-width: 1050px;

  margin:
    27px 0 0;

  color: #9db3ca;

  font-size:
    clamp(15px,1vw,21px);

  line-height: 1.65;
}


/* =========================================================
   HEAD STATUS
========================================================= */

.wdai-commerce-head-status {
  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 20px;

  background:
    rgba(255,255,255,.03);
}


.wdai-commerce-status-main {
  padding:
    clamp(22px,2vw,38px);

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.wdai-commerce-status-main span {
  color: #708ba7;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-commerce-status-main strong {
  display: block;

  margin-top: 10px;

  color: #fff;

  font-size:
    clamp(38px,3vw,68px);

  line-height: 1;

  letter-spacing: -.05em;
}


.wdai-commerce-status-main small {
  display: block;

  margin-top: 9px;

  color: #7f97af;

  font-size: 9px;
}


.wdai-commerce-status-ucp {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 12px;

  align-items: center;

  padding:
    17px 20px;
}


.wdai-commerce-status-ucp > i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #637b96;
}


.wdai-commerce-status-ucp > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.wdai-commerce-status-ucp small {
  color: #6d87a2;

  font-size: 6px;

  font-weight: 850;
}


.wdai-commerce-status-ucp strong {
  color: #fff;

  font-size: 13px;
}


.wdai-commerce-status-ucp span {
  color: #7a91a9;

  font-size: 8px;
}


.wdai-commerce-status-ucp b {
  color: #7890a9;

  font-size: 8px;
}


/* =========================================================
   COMMERCE FLOW
========================================================= */

.wdai-commerce-flow {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(90px,7vw,180px);
}


.wdai-commerce-flow-head span {
  color: #718da9;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-commerce-flow-head strong {
  display: block;

  margin-top: 9px;

  color: #fff;

  font-size:
    clamp(25px,2vw,42px);

  line-height: 1.2;
}


.wdai-commerce-flow-track {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 9px;

  align-items: center;

  margin-top: 42px;
}


.wdai-commerce-flow-step {
  min-width: 0;

  min-height: 270px;

  padding:
    clamp(18px,1.5vw,28px);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 15px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-flow-number {
  color: #627e9b;

  font-size: 8px;

  font-weight: 850;
}


.wdai-commerce-flow-icon {
  width: 38px;
  height: 38px;

  margin-top: 28px;

  border-radius: 11px;

  background:
    rgba(57,124,255,.12);
}


.is-intent
.wdai-commerce-flow-icon {
  background:
    rgba(57,213,255,.11);
}


.is-policy
.wdai-commerce-flow-icon {
  background:
    rgba(137,87,255,.13);
}


.is-offer
.wdai-commerce-flow-icon {
  background:
    rgba(89,139,255,.13);
}


.is-checkout
.wdai-commerce-flow-icon {
  background:
    rgba(32,201,151,.11);
}


.is-activation
.wdai-commerce-flow-icon {
  background:
    rgba(76,201,173,.13);
}


.wdai-commerce-flow-step > small {
  display: block;

  margin-top: 22px;

  color: #80a7ef;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-commerce-flow-step > strong {
  display: block;

  margin-top: 5px;

  color: #fff;

  font-size:
    clamp(13px,.88vw,17px);
}


.wdai-commerce-flow-step > p {
  margin:
    9px 0 0;

  color: #7e96ae;

  font-size:
    clamp(9px,.56vw,11px);

  line-height: 1.55;
}


.wdai-commerce-flow-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 17px;
}


.wdai-commerce-flow-tags span {
  padding:
    4px 6px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius: 5px;

  color: #6f88a2;

  font-size: 6px;
}


.wdai-commerce-flow-arrow {
  color: #55799f;

  font-size: 13px;

  font-style: normal;
}


/* =========================================================
   PRODUCTS
========================================================= */

.wdai-commerce-products {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-commerce-products-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.55fr);

  gap:
    clamp(45px,6vw,140px);

  align-items: end;
}


.wdai-commerce-products-head h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(38px,3.6vw,84px);

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-commerce-products-head > p {
  margin: 0;

  color: #8fa6bd;

  font-size:
    clamp(12px,.8vw,16px);

  line-height: 1.65;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.wdai-commerce-product-grid {
  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 12px;

  margin-top: 45px;
}


.wdai-commerce-product {
  min-width: 0;

  padding:
    clamp(25px,2.2vw,42px);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 20px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-product-asg {
  border-top:
    2px solid
    #397cff;
}


.wdai-commerce-product-rtc {
  border-top:
    2px solid
    #39c5ef;
}


.wdai-commerce-product-rtd {
  border-top:
    2px solid
    #8957ff;
}


.wdai-commerce-product-industry {
  border-top:
    2px solid
    #20c997;
}


.wdai-commerce-product > header {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 13px;

  align-items: center;
}


.wdai-commerce-product
header > span {
  color: #627c98;

  font-size: 9px;

  font-weight: 850;
}


.wdai-commerce-product
header > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-commerce-product
header small {
  color: #6f8ca8;

  font-size: 7px;

  font-weight: 850;
}


.wdai-commerce-product
header strong {
  color: #fff;

  font-size:
    clamp(15px,1vw,20px);
}


.wdai-commerce-product
header em {
  color: #738ba3;

  font-size: 8px;

  font-style: normal;
}


.wdai-commerce-product h4 {
  max-width: 620px;

  margin:
    34px 0 0;

  color: #fff;

  font-size:
    clamp(23px,1.8vw,36px);

  line-height: 1.08;

  letter-spacing: -.04em;
}


.wdai-commerce-product > p {
  max-width: 700px;

  margin:
    16px 0 0;

  color: #8ca3ba;

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.65;
}


/* =========================================================
   PRODUCT FLOW
========================================================= */

.wdai-commerce-product-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 27px;
}


.wdai-commerce-product-flow span {
  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 7px;

  color: #8ca3ba;

  background:
    rgba(255,255,255,.02);

  font-size: 8px;

  font-weight: 750;
}


.wdai-commerce-product-flow i {
  color: #597998;

  font-size: 9px;

  font-style: normal;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.wdai-commerce-product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 28px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.06);
}


.wdai-commerce-product-actions a {
  color: #83abfa;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


.wdai-commerce-product-actions
a:last-child {
  color: #7e95ad;
}


/* =========================================================
   AUTHORITY
========================================================= */

.wdai-commerce-authority {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.7fr)
    minmax(0,1.3fr);

  gap:
    clamp(55px,7vw,170px);

  align-items: center;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-commerce-authority-copy h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(35px,3.2vw,75px);

  line-height: 1.01;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-commerce-authority-copy p {
  margin:
    23px 0 0;

  color: #96acc3;

  font-size:
    clamp(13px,.84vw,17px);

  line-height: 1.67;
}


/* =========================================================
   AUTHORITY STACK
========================================================= */

.wdai-commerce-authority-stack {
  display: grid;
}


.wdai-commerce-authority-stack
article {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 13px;

  align-items: center;

  padding:
    14px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-authority-stack
article > span {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  color: #8199b2;

  background:
    rgba(255,255,255,.04);

  font-size: 7px;

  font-weight: 850;
}


.wdai-commerce-authority-stack
article > div {
  min-width: 0;
}


.wdai-commerce-authority-stack
small {
  color: #6985a0;

  font-size: 6px;

  font-weight: 850;
}


.wdai-commerce-authority-stack
strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 10px;
}


.wdai-commerce-authority-stack
p {
  margin:
    3px 0 0;

  color: #768da5;

  font-size: 8px;
}


.wdai-commerce-authority-stack
em {
  color: #80a9f5;

  font-size: 8px;

  font-style: normal;

  font-weight: 750;
}


.wdai-commerce-authority-line {
  width: 1px;
  height: 10px;

  margin-left: 27px;

  background:
    rgba(102,143,187,.25);
}


/* =========================================================
   COMMERCE BOUNDARY
========================================================= */

.wdai-commerce-boundary {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(110px,9vw,220px);

  padding:
    clamp(35px,3.5vw,72px);

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 26px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-boundary-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.55fr);

  gap:
    clamp(40px,6vw,130px);

  align-items: end;
}


.wdai-commerce-boundary-head span {
  color: #708aa5;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-commerce-boundary-head h3 {
  margin:
    13px 0 0;

  color: #fff;

  font-size:
    clamp(32px,2.9vw,68px);

  line-height: 1.03;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-commerce-boundary-head > p {
  margin: 0;

  color: #8ca3ba;

  font-size:
    clamp(12px,.78vw,15px);

  line-height: 1.65;
}


/* =========================================================
   BOUNDARY GRID
========================================================= */

.wdai-commerce-boundary-grid {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap:
    clamp(20px,3vw,55px);

  align-items: stretch;

  margin-top: 44px;
}


.wdai-commerce-boundary-grid
> article {
  padding:
    clamp(22px,2vw,38px);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 18px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-boundary-grid
.is-public {
  border-color:
    rgba(57,124,255,.14);
}


.wdai-commerce-boundary-grid
.is-protected {
  border-color:
    rgba(32,201,151,.12);
}


.wdai-commerce-boundary-grid
article header span {
  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-commerce-boundary-grid
.is-public header span {
  color: #7da7ff;
}


.wdai-commerce-boundary-grid
.is-protected header span {
  color: #7bcbb4;
}


.wdai-commerce-boundary-grid
article header strong {
  display: block;

  margin-top: 7px;

  color: #fff;

  font-size:
    clamp(20px,1.5vw,30px);
}


.wdai-commerce-boundary-list {
  display: grid;

  gap: 9px;

  margin-top: 26px;
}


.wdai-commerce-boundary-list span {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #91a8bf;

  font-size: 10px;
}


.wdai-commerce-boundary-list i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.is-protected
.wdai-commerce-boundary-list i {
  background:
    var(--ai-green);
}


.wdai-commerce-boundary-grid
article footer {
  margin-top: 28px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  color: #6e879f;

  font-size: 8px;

  font-weight: 750;
}


/* =========================================================
   BOUNDARY DIVIDER
========================================================= */

.wdai-commerce-boundary-divider {
  min-width: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
}


.wdai-commerce-boundary-divider
> span {
  width: 1px;
  height: 40%;

  background:
    rgba(100,142,187,.2);
}


.wdai-commerce-boundary-divider
> div {
  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 999px;

  color: #8ba1b8;

  background:
    #07182c;
}


.wdai-commerce-boundary-divider i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-commerce-boundary-divider
strong {
  font-size: 7px;
}


/* =========================================================
   UCP
========================================================= */

.wdai-commerce-ucp {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.7fr)
    minmax(0,1.3fr);

  gap:
    clamp(55px,7vw,170px);

  align-items: center;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-commerce-ucp-copy h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(35px,3.1vw,73px);

  line-height: 1.02;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-commerce-ucp-copy p {
  margin:
    23px 0 0;

  color: #96acc3;

  font-size:
    clamp(13px,.84vw,17px);

  line-height: 1.67;
}


/* =========================================================
   UCP CONSOLE
========================================================= */

.wdai-commerce-ucp-console {
  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 20px;

  background:
    rgba(255,255,255,.025);
}


.wdai-commerce-ucp-console
> header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    18px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.wdai-commerce-ucp-console
header > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-commerce-ucp-console
header span {
  color: #6b86a1;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-commerce-ucp-console
header strong {
  color: #fff;

  font-size: 13px;
}


.wdai-commerce-ucp-console
header em {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #9edac9;

  font-size: 8px;

  font-style: normal;

  font-weight: 800;
}


.wdai-commerce-ucp-console
header em i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


/* =========================================================
   UCP REQUEST
========================================================= */

.wdai-commerce-ucp-request {
  padding:
    21px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


.wdai-commerce-ucp-request span {
  display: block;

  color: #6e87a1;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-commerce-ucp-request strong {
  display: block;

  margin-top: 8px;

  color: #e7f1fd;

  font-size:
    clamp(14px,1vw,19px);
}


/* =========================================================
   UCP FLOW
========================================================= */

.wdai-commerce-ucp-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 8px;

  align-items: center;

  padding:
    20px;
}


.wdai-commerce-ucp-flow article {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 9px;

  background:
    rgba(255,255,255,.02);
}


.wdai-commerce-ucp-flow small {
  color: #657f9b;

  font-size: 6px;

  font-weight: 850;
}


.wdai-commerce-ucp-flow strong {
  display: block;

  margin-top: 6px;

  color: #fff;

  font-size: 9px;
}


.wdai-commerce-ucp-flow span {
  display: block;

  margin-top: 3px;

  color: #728aa2;

  font-size: 7px;
}


.wdai-commerce-ucp-flow > i {
  color: #597a9c;

  font-size: 10px;

  font-style: normal;
}


/* =========================================================
   UCP RESULT
========================================================= */

.wdai-commerce-ucp-result {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 12px;

  align-items: center;

  margin:
    0 20px 20px;

  padding: 14px;

  border:
    1px solid
    rgba(32,201,151,.12);

  border-radius: 10px;

  background:
    rgba(32,201,151,.035);
}


.wdai-commerce-ucp-result
> span {
  color: #75bea9;

  font-size: 7px;

  font-weight: 850;
}


.wdai-commerce-ucp-result div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-commerce-ucp-result
strong {
  color: #fff;

  font-size: 10px;
}


.wdai-commerce-ucp-result
small {
  color: #789d92;

  font-size: 8px;
}


.wdai-commerce-ucp-result b {
  color: #78baa7;

  font-size: 14px;
}


/* =========================================================
   FINAL
========================================================= */

.wdai-commerce-final {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 45px;

  margin-top:
    clamp(95px,7vw,170px);

  padding-top:
    clamp(38px,3vw,58px);

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


.wdai-commerce-final
> div:first-child {
  max-width: 1100px;
}


.wdai-commerce-final
> div:first-child span {
  color: #718ba6;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-commerce-final
> div:first-child strong {
  display: block;

  margin-top: 10px;

  color: #fff;

  font-size:
    clamp(20px,1.6vw,33px);

  line-height: 1.25;
}


.wdai-commerce-final-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  flex: 0 0 auto;
}


.wdai-commerce-final-actions a {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 16px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 9px;

  color: #a1b4c8;

  background:
    rgba(255,255,255,.03);

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


.wdai-commerce-final-actions
.is-primary {
  color: #fff;

  border-color: transparent;

  background:
    var(--ai-blue);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-commerce-head {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-head-status {
    max-width: 700px;
  }


  .wdai-commerce-flow-track {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-commerce-flow-arrow {
    display: none;
  }


  .wdai-commerce-products-head {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-authority {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-boundary-head {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-ucp {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-commerce {
    padding:
      64px 18px;
  }


  .wdai-commerce-heading h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-commerce-flow-track {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-flow-step {
    min-height: 0;
  }


  .wdai-commerce-product-grid {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-product
  > header {
    grid-template-columns:
      auto 1fr;
  }


  .wdai-commerce-product
  header em {
    grid-column:
      2;
  }


  .wdai-commerce-boundary {
    padding:
      28px 20px;
  }


  .wdai-commerce-boundary-grid {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-boundary-divider {
    height: 60px;

    flex-direction: row;
  }


  .wdai-commerce-boundary-divider
  > span {
    width: 35%;
    height: 1px;
  }


  .wdai-commerce-ucp-console
  > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-commerce-ucp-flow {
    grid-template-columns: 1fr;
  }


  .wdai-commerce-ucp-flow
  > i {
    display: none;
  }


  .wdai-commerce-final {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-commerce-final-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;
  }

}

/* =========================================================
   26. MACHINE DISCOVERY
========================================================= */

.wdai-machine {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #fff 48%,
      #f2f7ff
    );

  border-bottom:
    1px solid var(--ai-line);
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-machine-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-machine-grid-bg {
  position: absolute;
  inset: 0;

  opacity: .16;

  background-image:
    linear-gradient(
      rgba(31,77,132,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(31,77,132,.055) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;
}


.wdai-machine-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-machine-glow-one {
  width: 760px;
  height: 760px;

  top: -370px;
  right: -270px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.09),
      transparent 70%
    );
}


.wdai-machine-glow-two {
  width: 680px;
  height: 680px;

  left: -320px;
  top: 52%;

  background:
    radial-gradient(
      circle,
      rgba(57,213,255,.07),
      transparent 70%
    );
}


/* =========================================================
   HEAD
========================================================= */

.wdai-machine-head {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(340px,.75fr);

  gap:
    clamp(50px,7vw,170px);

  align-items: end;
}


.wdai-machine-heading {
  max-width: 1450px;
}


.wdai-machine-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    var(--ai-blue);

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-machine-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-machine-heading h2 {
  margin:
    20px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(52px,5vw,126px);

  line-height: .96;

  font-weight: 670;

  letter-spacing: -.055em;
}


.wdai-machine-heading h2 span {
  display: block;

  color:
    var(--ai-blue);
}


.wdai-machine-heading p {
  max-width: 1050px;

  margin:
    27px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(15px,1vw,21px);

  line-height: 1.65;
}


/* =========================================================
   HEAD NOTE
========================================================= */

.wdai-machine-head-note {
  padding:
    clamp(24px,2vw,38px);

  border:
    1px solid var(--ai-line);

  border-radius: 20px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    var(--ai-shadow-soft);
}


.wdai-machine-head-note > span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-machine-head-note strong {
  display: block;

  margin-top: 11px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(19px,1.45vw,30px);

  line-height: 1.17;
}


.wdai-machine-head-note p {
  margin:
    14px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.65;
}


/* =========================================================
   MACHINE STACK
========================================================= */

.wdai-machine-stack {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(70px,6vw,140px);

  overflow: hidden;

  border:
    1px solid var(--ai-line);

  border-radius: 25px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 24px 80px
    rgba(19,52,91,.07);
}


.wdai-machine-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  padding:
    clamp(20px,1.8vw,34px);

  border-bottom:
    1px solid var(--ai-line);
}


.wdai-machine-stack-head
> div:first-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.wdai-machine-stack-head span {
  color: #7891ad;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-machine-stack-head strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(17px,1.2vw,24px);
}


.wdai-machine-stack-status {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    7px 10px;

  border-radius: 999px;

  color: #267c63;

  background:
    rgba(32,201,151,.08);
}


.wdai-machine-stack-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-machine-stack-status span {
  color: inherit;

  letter-spacing: 0;
}


/* =========================================================
   ROUTE GRID
========================================================= */

.wdai-machine-stack-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 1px;

  background:
    var(--ai-line);
}


.wdai-machine-route {
  min-width: 0;

  min-height: 270px;

  display: flex;
  flex-direction: column;

  padding:
    clamp(20px,1.8vw,34px);

  color:
    var(--ai-text);

  background: #fff;

  text-decoration: none;

  transition:
    background 150ms ease,
    transform 150ms ease;
}


.wdai-machine-route:hover {
  position: relative;
  z-index: 2;

  transform:
    translateY(-2px);

  background:
    #f8fbff;
}


.wdai-machine-route.is-primary {
  background:
    linear-gradient(
      145deg,
      #f0f6ff,
      #fff
    );
}


.wdai-machine-route header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wdai-machine-route
header span {
  color: #9aadc1;

  font-size: 9px;

  font-weight: 850;
}


.wdai-machine-route
header em {
  padding:
    5px 7px;

  border-radius: 6px;

  color:
    var(--ai-blue);

  background:
    rgba(36,107,253,.07);

  font-size: 7px;

  font-style: normal;

  font-weight: 850;
}


.wdai-machine-route
> div {
  margin-top: 34px;
}


.wdai-machine-route small {
  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-machine-route
> div strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(18px,1.35vw,27px);
}


.wdai-machine-route p {
  margin:
    11px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.6vw,12px);

  line-height: 1.6;
}


.wdai-machine-route footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: auto;

  padding-top: 25px;
}


.wdai-machine-route code {
  min-width: 0;

  overflow: hidden;

  color: #617891;

  font-size:
    clamp(7px,.5vw,10px);

  text-overflow: ellipsis;

  white-space: nowrap;
}


.wdai-machine-route b {
  color:
    var(--ai-blue);

  font-size: 13px;
}


/* =========================================================
   DISCOVERY PATH
========================================================= */

.wdai-machine-path {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(100px,8vw,195px);
}


.wdai-machine-path-copy {
  max-width: 1150px;
}


.wdai-machine-path-copy h3 {
  margin:
    18px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(38px,3.6vw,84px);

  line-height: 1;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-machine-path-copy p {
  max-width: 900px;

  margin:
    22px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(13px,.86vw,17px);

  line-height: 1.65;
}


/* =========================================================
   PATH FLOW
========================================================= */

.wdai-machine-path-flow {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 10px;

  align-items: center;

  margin-top:
    clamp(44px,4vw,78px);
}


.wdai-machine-path-flow article {
  min-width: 0;

  padding:
    clamp(19px,1.6vw,30px);

  border:
    1px solid var(--ai-line);

  border-radius: 15px;

  background:
    rgba(255,255,255,.85);
}


.wdai-machine-path-flow
article > span {
  color: #9aadc1;

  font-size: 8px;

  font-weight: 850;
}


.wdai-machine-path-flow small {
  display: block;

  margin-top: 28px;

  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-machine-path-flow strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(14px,.95vw,19px);
}


.wdai-machine-path-flow p {
  margin:
    8px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(9px,.57vw,11px);

  line-height: 1.5;
}


.wdai-machine-path-flow
> i {
  color: #809bb9;

  font-size: 13px;

  font-style: normal;
}


/* =========================================================
   PROTOCOLS
========================================================= */

.wdai-machine-protocols {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(105px,8vw,205px);

  padding:
    clamp(38px,4vw,85px);

  border-radius: 28px;

  color: #fff;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(137,87,255,.16),
      transparent 28%
    ),
    linear-gradient(
      140deg,
      #061426,
      #081a30
    );

  box-shadow:
    0 28px 90px
    rgba(9,34,65,.14);
}


.wdai-machine-protocols-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(300px,.55fr);

  gap:
    clamp(45px,6vw,140px);

  align-items: end;
}


.wdai-machine-protocols
.wdai-machine-kicker {
  color: #86acff;
}


.wdai-machine-protocols
.wdai-machine-kicker i {
  background:
    var(--ai-purple);
}


.wdai-machine-protocols-head h3 {
  margin:
    18px 0 0;

  color: #fff;

  font-size:
    clamp(36px,3.3vw,78px);

  line-height: 1;

  font-weight: 650;

  letter-spacing: -.05em;
}


.wdai-machine-protocols-head > p {
  margin: 0;

  color: #91a8bf;

  font-size:
    clamp(12px,.8vw,16px);

  line-height: 1.65;
}


/* =========================================================
   PROTOCOL GRID
========================================================= */

.wdai-machine-protocol-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 10px;

  margin-top: 44px;
}


.wdai-machine-protocol {
  min-width: 0;

  padding:
    clamp(22px,1.9vw,36px);

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 17px;

  background:
    rgba(255,255,255,.025);
}


.wdai-machine-protocol header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wdai-machine-protocol
header span {
  color: #88adff;

  font-size: 12px;

  font-weight: 850;
}


.wdai-machine-protocol
header i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #667e98;
}


.wdai-machine-protocol
> small {
  display: block;

  margin-top: 31px;

  color: #6c87a2;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-machine-protocol
> strong {
  display: block;

  margin-top: 6px;

  color: #fff;

  font-size:
    clamp(17px,1.2vw,23px);
}


.wdai-machine-protocol p {
  margin:
    12px 0 0;

  color: #879fb7;

  font-size:
    clamp(9px,.6vw,12px);

  line-height: 1.6;
}


.wdai-machine-protocol a {
  display: inline-flex;

  gap: 7px;

  margin-top: 25px;

  color: #86adfa;

  text-decoration: none;

  font-size: 9px;

  font-weight: 800;
}


/* =========================================================
   DIRECTORY SURFACE
========================================================= */

.wdai-machine-directory {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,.7fr)
    minmax(0,1.3fr);

  gap:
    clamp(55px,7vw,170px);

  align-items: center;

  margin-top:
    clamp(110px,9vw,220px);
}


.wdai-machine-directory-copy h3 {
  margin:
    18px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(35px,3.1vw,72px);

  line-height: 1.02;

  font-weight: 660;

  letter-spacing: -.05em;
}


.wdai-machine-directory-copy p {
  margin:
    22px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(13px,.84vw,17px);

  line-height: 1.67;
}


.wdai-machine-directory-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 28px;
}


.wdai-machine-directory-actions a {
  color:
    var(--ai-blue);

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


.wdai-machine-directory-actions
a:last-child {
  color: #657d97;
}


/* =========================================================
   API CONSOLE
========================================================= */

.wdai-machine-api-console {
  overflow: hidden;

  border:
    1px solid var(--ai-line);

  border-radius: 20px;

  background: #fff;

  box-shadow:
    var(--ai-shadow-soft);
}


.wdai-machine-api-console
> header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    19px 20px;

  border-bottom:
    1px solid var(--ai-line);
}


.wdai-machine-api-console
header > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-machine-api-console
header span {
  color: #7890aa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .11em;
}


.wdai-machine-api-console
header strong {
  color:
    var(--ai-text-strong);

  font-size: 13px;
}


.wdai-machine-api-console
header em {
  color: #247c62;

  font-size: 7px;

  font-style: normal;

  font-weight: 850;
}


/* =========================================================
   API LIST
========================================================= */

.wdai-machine-api-list {
  display: grid;
}


.wdai-machine-api-list
> a,
.wdai-machine-api-list
> div {
  display: grid;

  grid-template-columns:
    auto minmax(0,.8fr)
    minmax(0,1fr) auto;

  gap: 12px;

  align-items: center;

  min-height: 58px;

  padding:
    10px 15px;

  border-bottom:
    1px solid var(--ai-line);

  color:
    var(--ai-text);

  text-decoration: none;
}


.wdai-machine-api-list
> *:last-child {
  border-bottom: 0;
}


.wdai-machine-api-list
> a > span,
.wdai-machine-api-list
> div > span {
  padding:
    5px 6px;

  border-radius: 5px;

  color: #247c62;

  background:
    rgba(32,201,151,.07);

  font-size: 7px;

  font-weight: 850;
}


.wdai-machine-api-list code {
  min-width: 0;

  overflow: hidden;

  color: #355d89;

  font-size:
    clamp(8px,.55vw,11px);

  text-overflow: ellipsis;

  white-space: nowrap;
}


.wdai-machine-api-list small {
  color:
    var(--ai-text-muted);

  font-size:
    clamp(8px,.53vw,10px);
}


.wdai-machine-api-list b {
  color: #7891ab;

  font-size: 10px;
}


/* =========================================================
   TWO GRAPHS
========================================================= */

.wdai-machine-graphs {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(105px,8vw,205px);
}


.wdai-machine-graphs-head {
  max-width: 1100px;
}


.wdai-machine-graphs-head > span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-machine-graphs-head h3 {
  margin:
    14px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(34px,3vw,70px);

  line-height: 1.03;

  font-weight: 660;

  letter-spacing: -.05em;
}


/* =========================================================
   GRAPH GRID
========================================================= */

.wdai-machine-graphs-grid {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap:
    clamp(20px,3vw,55px);

  align-items: stretch;

  margin-top: 40px;
}


.wdai-machine-graph {
  padding:
    clamp(26px,2.4vw,46px);

  border:
    1px solid var(--ai-line);

  border-radius: 20px;

  background:
    rgba(255,255,255,.85);
}


.wdai-machine-graph
header span {
  color:
    var(--ai-blue);

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-machine-graph
header strong {
  display: block;

  margin-top: 7px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(22px,1.7vw,34px);
}


.wdai-machine-graph > p {
  margin:
    15px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.62;
}


.wdai-machine-graph-items {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 27px;
}


.wdai-machine-graph-items span {
  padding:
    6px 8px;

  border:
    1px solid var(--ai-line);

  border-radius: 999px;

  color: #667e97;

  background: #f7faff;

  font-size: 8px;

  font-weight: 700;
}


.wdai-machine-graph footer {
  margin-top: 30px;

  padding-top: 20px;

  border-top:
    1px solid var(--ai-line);
}


.wdai-machine-graph footer small {
  color: #8095ac;

  font-size: 7px;

  font-weight: 850;
}


.wdai-machine-graph footer strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(10px,.68vw,13px);
}


/* =========================================================
   GRAPH CONNECTOR
========================================================= */

.wdai-machine-graph-link {
  min-width: 75px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
}


.wdai-machine-graph-link
> span {
  width: 1px;
  height: 40%;

  background:
    rgba(43,91,145,.16);
}


.wdai-machine-graph-link
> div {
  display: flex;
  align-items: center;

  gap: 5px;

  padding:
    7px 9px;

  border:
    1px solid var(--ai-line);

  border-radius: 999px;

  color: #6e87a1;

  background: #fff;
}


.wdai-machine-graph-link i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-machine-graph-link strong {
  font-size: 7px;
}


/* =========================================================
   ACCESS BOUNDARY
========================================================= */

.wdai-machine-boundary {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(300px,.55fr)
    minmax(0,1.45fr);

  gap:
    clamp(45px,6vw,140px);

  align-items: center;

  margin-top:
    clamp(90px,7vw,170px);

  padding:
    clamp(30px,3vw,58px);

  border:
    1px solid var(--ai-line);

  border-radius: 22px;

  background:
    #f3f8ff;
}


.wdai-machine-boundary
> div:first-child span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-machine-boundary
> div:first-child strong {
  display: block;

  margin-top: 9px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px,1.55vw,31px);

  line-height: 1.25;
}


.wdai-machine-boundary-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;
}


.wdai-machine-boundary-items span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(36,107,253,.1);

  border-radius: 999px;

  color: #557293;

  background: #fff;

  font-size: 8px;

  font-weight: 750;
}


.wdai-machine-boundary-items
span i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-machine-boundary-items
.is-protected {
  color: #477867;

  border-color:
    rgba(32,201,151,.12);
}


.wdai-machine-boundary-items
.is-protected i {
  background:
    var(--ai-green);
}


.wdai-machine-boundary-items
> b {
  width: 1px;
  height: 28px;

  margin:
    0 5px;

  background:
    var(--ai-line-strong);
}


/* =========================================================
   FINAL
========================================================= */

.wdai-machine-final {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 45px;

  margin-top:
    clamp(85px,7vw,165px);

  padding-top:
    clamp(36px,3vw,56px);

  border-top:
    1px solid var(--ai-line);
}


.wdai-machine-final
> div:first-child {
  max-width: 1100px;
}


.wdai-machine-final
> div:first-child span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-machine-final
> div:first-child strong {
  display: block;

  margin-top: 9px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px,1.6vw,32px);

  line-height: 1.25;
}


.wdai-machine-final-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  flex: 0 0 auto;
}


.wdai-machine-final-actions a {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 16px;

  border:
    1px solid var(--ai-line-strong);

  border-radius: 9px;

  color: #527093;

  background: #fff;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


.wdai-machine-final-actions
.is-primary {
  color: #fff;

  border-color: transparent;

  background:
    var(--ai-blue);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-machine-head {
    grid-template-columns: 1fr;
  }


  .wdai-machine-head-note {
    max-width: 720px;
  }


  .wdai-machine-stack-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-machine-path-flow {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-machine-path-flow
  > i {
    display: none;
  }


  .wdai-machine-protocols-head {
    grid-template-columns: 1fr;
  }


  .wdai-machine-protocol-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .wdai-machine-directory {
    grid-template-columns: 1fr;
  }


  .wdai-machine-boundary {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-machine {
    padding:
      64px 18px;
  }


  .wdai-machine-heading h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-machine-stack-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-machine-stack-grid {
    grid-template-columns: 1fr;
  }


  .wdai-machine-route {
    min-height: 240px;
  }


  .wdai-machine-path-flow {
    grid-template-columns: 1fr;
  }


  .wdai-machine-protocols {
    padding:
      28px 20px;

    border-radius: 20px;
  }


  .wdai-machine-protocol-grid {
    grid-template-columns: 1fr;
  }


  .wdai-machine-api-console
  > header {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-machine-api-list
  > a,
  .wdai-machine-api-list
  > div {
    grid-template-columns:
      auto 1fr auto;
  }


  .wdai-machine-api-list small {
    grid-column:
      2 / -1;
  }


  .wdai-machine-graphs-grid {
    grid-template-columns: 1fr;
  }


  .wdai-machine-graph-link {
    height: 60px;

    flex-direction: row;
  }


  .wdai-machine-graph-link
  > span {
    width: 35%;
    height: 1px;
  }


  .wdai-machine-boundary-items
  > b {
    width: 100%;
    height: 1px;

    margin:
      6px 0;
  }


  .wdai-machine-final {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-machine-final-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;
  }

}

/* =========================================================
   27. FINAL CONVERSION
========================================================= */

.wdai-close {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    var(--ai-section-y)
    var(--ai-edge);

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f5f9ff,
      #fff 48%,
      #edf6ff
    );
}


/* =========================================================
   AMBIENT
========================================================= */

.wdai-close-ambient {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.wdai-close-grid {
  position: absolute;
  inset: 0;

  opacity: .18;

  background-image:
    linear-gradient(
      rgba(34,82,138,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(34,82,138,.055) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;
}


.wdai-close-glow {
  position: absolute;

  border-radius: 50%;
}


.wdai-close-glow-one {
  width: 800px;
  height: 800px;

  top: -410px;
  right: -280px;

  background:
    radial-gradient(
      circle,
      rgba(57,124,255,.11),
      transparent 70%
    );
}


.wdai-close-glow-two {
  width: 620px;
  height: 620px;

  left: -290px;
  bottom: -310px;

  background:
    radial-gradient(
      circle,
      rgba(57,213,255,.08),
      transparent 70%
    );
}


/* =========================================================
   TOP
========================================================= */

.wdai-close-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  padding-bottom:
    clamp(35px,3vw,58px);

  border-bottom:
    1px solid var(--ai-line);
}


.wdai-close-brand {
  display: flex;
  align-items: center;

  gap: 16px;
}


.wdai-close-brand img {
  width:
    clamp(62px,4.5vw,92px);

  height:
    clamp(62px,4.5vw,92px);

  object-fit: contain;

  padding: 8px;

  border-radius: 17px;

  background:
    #07182c;
}


.wdai-close-brand div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.wdai-close-brand span {
  color:
    var(--ai-blue);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .13em;
}


.wdai-close-brand strong {
  color:
    var(--ai-text-strong);

  font-size:
    clamp(15px,1vw,20px);
}


.wdai-close-network {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding:
    8px 11px;

  border:
    1px solid var(--ai-line);

  border-radius: 999px;

  background:
    rgba(255,255,255,.75);
}


.wdai-close-network i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-close-network span {
  color: #7088a2;

  font-size: 8px;
}


.wdai-close-network strong {
  color: #277b63;

  font-size: 8px;
}


/* =========================================================
   MAIN
========================================================= */

.wdai-close-main {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(380px,.85fr);

  gap:
    clamp(55px,7vw,180px);

  align-items: end;

  margin-top:
    clamp(75px,6vw,145px);
}


.wdai-close-copy {
  max-width: 1500px;
}


.wdai-close-kicker {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    var(--ai-blue);

  font-size:
    clamp(9px,.6vw,12px);

  font-weight: 850;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.wdai-close-kicker i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ai-blue);
}


.wdai-close-copy h2 {
  margin:
    20px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(52px,5vw,126px);

  line-height: .96;

  font-weight: 670;

  letter-spacing: -.055em;
}


.wdai-close-copy h2 span {
  display: block;

  color:
    var(--ai-blue);
}


.wdai-close-copy > p {
  max-width: 1000px;

  margin:
    26px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(15px,1vw,21px);

  line-height: 1.65;
}


/* =========================================================
   SUMMARY
========================================================= */

.wdai-close-summary {
  display: grid;

  gap: 7px;
}


.wdai-close-summary article {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 13px;

  padding:
    16px;

  border:
    1px solid var(--ai-line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.78);
}


.wdai-close-summary
article > span {
  color: #98abc0;

  font-size: 9px;

  font-weight: 850;
}


.wdai-close-summary small {
  color:
    var(--ai-blue);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .1em;
}


.wdai-close-summary strong {
  display: block;

  margin-top: 3px;

  color:
    var(--ai-text-strong);

  font-size: 13px;
}


.wdai-close-summary p {
  margin:
    5px 0 0;

  color:
    var(--ai-text-muted);

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================================
   THREE DOORS
========================================================= */

.wdai-close-doors {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 12px;

  margin-top:
    clamp(75px,6vw,145px);
}


.wdai-close-door {
  min-width: 0;

  min-height:
    clamp(390px,28vw,580px);

  display: flex;
  flex-direction: column;

  padding:
    clamp(25px,2.2vw,44px);

  overflow: hidden;

  border:
    1px solid var(--ai-line);

  border-radius: 23px;

  color:
    var(--ai-text);

  background:
    rgba(255,255,255,.88);

  text-decoration: none;

  box-shadow:
    0 22px 70px
    rgba(20,54,94,.06);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}


.wdai-close-door:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(36,107,253,.2);

  box-shadow:
    0 30px 90px
    rgba(20,54,94,.1);
}


.wdai-close-door.is-asg {
  background:
    linear-gradient(
      145deg,
      #f0f6ff,
      #fff
    );

  border-color:
    rgba(36,107,253,.15);
}


.wdai-close-door-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wdai-close-door-top span {
  color: #9aadc1;

  font-size: 9px;

  font-weight: 850;
}


.wdai-close-door-top em {
  padding:
    5px 7px;

  border-radius: 6px;

  color:
    var(--ai-blue);

  background:
    rgba(36,107,253,.07);

  font-size: 7px;

  font-style: normal;

  font-weight: 850;
}


/* =========================================================
   DOOR ICONS
========================================================= */

.wdai-close-door-icon {
  position: relative;

  width: 62px;
  height: 62px;

  margin-top: 50px;

  border-radius: 18px;

  background:
    rgba(36,107,253,.08);
}


.wdai-close-door-icon span {
  position: absolute;

  width: 25px;
  height: 25px;

  top: 17px;
  left: 17px;

  border:
    2px solid
    var(--ai-blue);

  border-radius: 50%;
}


.wdai-close-door-icon
span::after {
  content: "";

  position: absolute;

  width: 10px;
  height: 2px;

  right: -8px;
  bottom: -4px;

  background:
    var(--ai-blue);

  transform:
    rotate(45deg);
}


.wdai-close-asg-logo {
  width: 150px;
  height: 72px;

  display: flex;
  align-items: center;

  margin-top: 40px;
}


.wdai-close-asg-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: left center;
}


.wdai-close-system-icons {
  display: flex;

  gap: 7px;

  margin-top: 48px;
}


.wdai-close-system-icons span {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px solid var(--ai-line);

  border-radius: 12px;

  color:
    var(--ai-blue);

  background:
    #f5f9ff;

  font-size: 9px;

  font-weight: 850;
}


.wdai-close-system-icons
span:nth-child(2) {
  color:
    var(--ai-purple);
}


.wdai-close-system-icons
span:nth-child(3) {
  color: #23856a;
}


/* =========================================================
   DOOR CONTENT
========================================================= */

.wdai-close-door > small {
  display: block;

  margin-top: 32px;

  color: #7890aa;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-close-door h3 {
  margin:
    8px 0 0;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(27px,2.2vw,46px);

  line-height: 1.03;

  letter-spacing: -.045em;
}


.wdai-close-door > p {
  margin:
    16px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.62;
}


.wdai-close-door footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: auto;

  padding-top: 28px;

  border-top:
    1px solid var(--ai-line);
}


.wdai-close-door footer strong {
  color:
    var(--ai-blue);

  font-size: 11px;
}


.wdai-close-door footer span {
  color:
    var(--ai-blue);

  font-size: 17px;
}


/* =========================================================
   SUPPORT STRIP
========================================================= */

.wdai-close-support {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 55px;

  margin-top:
    clamp(75px,6vw,140px);

  padding:
    clamp(30px,3vw,58px);

  border:
    1px solid var(--ai-line);

  border-radius: 22px;

  background:
    #f1f7ff;
}


.wdai-close-support
> div:first-child {
  max-width: 1050px;
}


.wdai-close-support
> div:first-child span {
  color: #7890aa;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-close-support
> div:first-child strong {
  display: block;

  margin-top: 8px;

  color:
    var(--ai-text-strong);

  font-size:
    clamp(20px,1.6vw,32px);
}


.wdai-close-support p {
  margin:
    11px 0 0;

  color:
    var(--ai-text-muted);

  font-size:
    clamp(10px,.65vw,13px);

  line-height: 1.6;
}


.wdai-close-support-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  flex: 0 0 auto;
}


.wdai-close-support-actions a {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0 16px;

  border:
    1px solid var(--ai-line-strong);

  border-radius: 9px;

  color: #315b8d;

  background: #fff;

  text-decoration: none;

  font-size: 10px;

  font-weight: 800;
}


/* =========================================================
   28. PUBLIC FOOTER
========================================================= */

.wdai-footer {
  position: relative;

  width: 100%;
  max-width: none;

  padding:
    clamp(65px,5vw,120px)
    var(--ai-edge)
    0;

  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #05111f,
      #061426 50%,
      #07172b
    );

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


/* =========================================================
   FOOTER TOP
========================================================= */

.wdai-footer-top {
  display: grid;

  grid-template-columns:
    minmax(300px,.6fr)
    minmax(0,1.4fr);

  gap:
    clamp(60px,7vw,180px);
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.wdai-footer-brand {
  max-width: 520px;
}


.wdai-footer-logo {
  display: inline-flex;

  width: 76px;
  height: 76px;
}


.wdai-footer-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.wdai-footer-brand-name {
  display: block;

  margin-top: 20px;

  color: #fff;

  font-size:
    clamp(24px,1.8vw,36px);

  font-weight: 700;
}


.wdai-footer-brand > strong {
  display: block;

  margin-top: 4px;

  color: #94abc2;

  font-size:
    clamp(11px,.72vw,14px);

  font-weight: 700;
}


.wdai-footer-brand > p {
  margin:
    20px 0 0;

  color: #8299b0;

  font-size:
    clamp(11px,.72vw,14px);

  line-height: 1.7;
}


/* =========================================================
   FOOTER ACTIONS
========================================================= */

.wdai-footer-brand-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 27px;
}


.wdai-footer-brand-actions a {
  min-height: 43px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0 14px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 8px;

  color: #9eb3c8;

  background:
    rgba(255,255,255,.03);

  text-decoration: none;

  font-size: 9px;

  font-weight: 800;
}


.wdai-footer-brand-actions
.is-primary {
  color: #fff;

  border-color: transparent;

  background:
    var(--ai-blue);
}


/* =========================================================
   FOOTER NETWORK
========================================================= */

.wdai-footer-network {
  width: max-content;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  margin-top: 24px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 999px;
}


.wdai-footer-network i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--ai-green);
}


.wdai-footer-network span {
  color: #718ba4;

  font-size: 8px;
}


.wdai-footer-network strong {
  color: #9ed5c6;

  font-size: 8px;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.wdai-footer-links {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:
    clamp(25px,3vw,65px);
}


.wdai-footer-links nav {
  min-width: 0;
}


.wdai-footer-links h3 {
  margin:
    0 0 22px;

  color: #fff;

  font-size:
    clamp(11px,.75vw,15px);
}


.wdai-footer-links a {
  display: block;

  width: max-content;
  max-width: 100%;

  margin-top: 11px;

  color: #7f97ae;

  text-decoration: none;

  font-size:
    clamp(9px,.6vw,12px);

  line-height: 1.4;

  transition:
    color 150ms ease;
}


.wdai-footer-links a:hover {
  color: #fff;
}


/* =========================================================
   MACHINE STRIP
========================================================= */

.wdai-footer-machine {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-top:
    clamp(55px,5vw,100px);

  padding:
    18px 0;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.wdai-footer-machine > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 15px;
}


.wdai-footer-machine
> div > span {
  color: #627d98;

  font-size: 7px;

  font-weight: 850;

  letter-spacing: .12em;
}


.wdai-footer-machine a {
  color: #8099b2;

  text-decoration: none;

  font-size: 8px;

  font-weight: 750;
}


.wdai-footer-machine
> span {
  color: #667f98;

  font-size: 8px;
}


/* =========================================================
   BOTTOM
========================================================= */

.wdai-footer-bottom {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;
}


.wdai-footer-bottom > span {
  color: #627991;

  font-size: 9px;
}


.wdai-footer-bottom > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;
}


.wdai-footer-bottom a {
  color: #6f879e;

  text-decoration: none;

  font-size: 9px;
}


.wdai-footer-bottom a:hover {
  color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .wdai-close-main {
    grid-template-columns: 1fr;
  }


  .wdai-close-summary {
    max-width: 760px;
  }


  .wdai-close-doors {
    grid-template-columns: 1fr;
  }


  .wdai-close-door {
    min-height: 350px;
  }


  .wdai-footer-top {
    grid-template-columns: 1fr;
  }


  .wdai-footer-brand {
    max-width: 700px;
  }


  .wdai-footer-links {
    grid-template-columns:
      repeat(3,1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .wdai-close {
    padding:
      64px 18px;
  }


  .wdai-close-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-close-copy h2 {
    font-size:
      clamp(46px,13vw,66px);
  }


  .wdai-close-support {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-close-support-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;
  }


  .wdai-footer {
    padding:
      55px 18px 0;
  }


  .wdai-footer-links {
    grid-template-columns:
      repeat(2,1fr);

    gap:
      38px 24px;
  }


  .wdai-footer-machine {
    align-items: flex-start;

    flex-direction: column;
  }


  .wdai-footer-bottom {
    align-items: flex-start;

    flex-direction: column;

    padding:
      22px 0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .wdai-footer-links {
    grid-template-columns: 1fr;
  }


  .wdai-close-door {
    padding: 22px;
  }

}

/* =========================================================
   FONT AWESOME ICON ALIGNMENT
========================================================= */

.wdai-intro-control-icon,
.wdai-directory-search-icon,
.wdai-directory-trust-icon,
.wdai-directory-life-icon,
.wdai-directory-agentic-icon,
.wdai-aig-decision-icon,
.wdai-commerce-flow-icon,
.wdai-close-door-icon {
  display: inline-grid;
  place-items: center;
}

.wdai-intro-control-icon > i,
.wdai-directory-search-icon > i,
.wdai-directory-trust-icon > i,
.wdai-directory-life-icon > i,
.wdai-directory-agentic-icon > i,
.wdai-aig-decision-icon > i,
.wdai-commerce-flow-icon > i,
.wdai-close-door-icon > i {
  display: block;
  font-size: 17px;
  line-height: 1;
  color: currentColor;
}

/* Intro control */
.wdai-intro-control-icon.is-public { color: #246bfd; }
.wdai-intro-control-icon.is-approved { color: #8957ff; }
.wdai-intro-control-icon.is-protected { color: #20a77a; }

/* Directory search */
.wdai-directory-search-icon { color: #246bfd; }

/* Directory trust */
.wdai-directory-trust-icon.is-search { color: #246bfd; }
.wdai-directory-trust-icon.is-verified { color: #20a77a; }
.wdai-directory-trust-icon.is-agent { color: #8957ff; }
.wdai-directory-trust-icon.is-data { color: #159bc5; }

/* Directory lifecycle */
.wdai-directory-life-icon.is-discover { color: #246bfd; }
.wdai-directory-life-icon.is-normalize { color: #8957ff; }
.wdai-directory-life-icon.is-publish { color: #168f72; }
.wdai-directory-life-icon.is-expose { color: #087fa8; }
.wdai-directory-life-icon.is-connect { color: #246bfd; }

/* Directory agentic */
.wdai-directory-agentic-icon { color: #246bfd; }
.wdai-directory-agentic-icon.is-capability { color: #8957ff; }
.wdai-directory-agentic-icon.is-trust { color: #168f72; }
.wdai-directory-agentic-icon.is-route { color: #087fa8; }

/* AIG decision pipeline */
.wdai-aig-decision-icon.is-request { color: #246bfd; }
.wdai-aig-decision-icon.is-classify { color: #8957ff; }
.wdai-aig-decision-icon.is-policy { color: #168f72; }
.wdai-aig-decision-icon.is-knowledge { color: #159bc5; }
.wdai-aig-decision-icon.is-route { color: #246bfd; }

/* Commerce flow */
.wdai-commerce-flow-step.is-discovery .wdai-commerce-flow-icon { color: #246bfd; }
.wdai-commerce-flow-step.is-intent .wdai-commerce-flow-icon { color: #8957ff; }
.wdai-commerce-flow-step.is-policy .wdai-commerce-flow-icon { color: #168f72; }
.wdai-commerce-flow-step.is-offer .wdai-commerce-flow-icon { color: #159bc5; }
.wdai-commerce-flow-step.is-checkout .wdai-commerce-flow-icon { color: #246bfd; }
.wdai-commerce-flow-step.is-activation .wdai-commerce-flow-icon { color: #168f72; }

/* Final Directory door */
.wdai-close-door-icon { color: #246bfd; }