/* Experimental 3 (env test) — ported from design-hub page-content-x3.tsx.
   Tactical dossier: mono labels + coordinates, dark/bright rhythm, flowy
   gradient hovers, mouse-reactive aurora hero, pinned-hero curtain. */

.p-x3 {
  background: var(--color-x3-ink);
  color: #fff;
}

.p-x3 .x3-mono {
  font-family: var(--font-sans);
}

.p-x3 .x3-label {
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.p-x3 .x3-label--light {
  color: var(--color-grey-on-white);
}
/* keeps a phrase on one line so a wrap lands BEFORE it (hero kicker:
   "…Magic Quadrant™ / for Identity Verification") */
.p-x3 .x3-nobreak { white-space: nowrap; }

/* ---------- curtain: hero pins, sections slide over ---------- */
.p-x3 .x3-pin {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  overflow: hidden;
}
.p-x3 .x3-over {
  position: relative;
  z-index: 10;
}

/* ---------- hero ---------- */
.p-x3 .x3-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-x3-ink);
}
.p-x3 .x3-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: grayscale(1);
}
/* campaign hero still (e.g. /agentic-fraud/): the image IS the statement,
   so it keeps its color and reads stronger than the ambient video */
.p-x3 .x3-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  opacity: 0.62;
}
/* phones: the title sits over the image's brightest region, so the still
   steps back a notch to keep the display type crisp */
@media (max-width: 639px) {
  .p-x3 .x3-hero__img { opacity: 0.45; }
}
/* campaign body copy runs wider so the two-sentence message holds two lines
   (doubled class outranks the base .p-x3 .x3-hero__sub cap further down) */
.p-x3.p-x3--agentic .x3-hero__sub { max-width: 780px; }
.p-x3 .x3-hero__aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.p-x3 .x3-blob {
  position: absolute;
  will-change: transform;
}
.p-x3 .x3-blob > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  animation: x3-breathe 16s ease-in-out infinite;
}
.p-x3 .x3-blob--1 {
  left: -8%;
  top: -12%;
  width: 95vmin;
  height: 95vmin;
  opacity: 0.65;
}
.p-x3 .x3-blob--1 > span {
  filter: blur(80px);
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-x3-blue-deep) 80%, transparent) 0%,
    color-mix(in oklab, var(--color-x3-blue-deep) 25%, transparent) 45%,
    transparent 68%
  );
}
.p-x3 .x3-blob--2 {
  right: -8%;
  top: 2%;
  width: 85vmin;
  height: 85vmin;
  opacity: 0.55;
}
.p-x3 .x3-blob--2 > span {
  filter: blur(90px);
  animation-duration: 13s;
  animation-delay: 2s;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-x3-blue-bright) 65%, transparent) 0%,
    color-mix(in oklab, var(--color-blue) 20%, transparent) 48%,
    transparent 68%
  );
}
.p-x3 .x3-blob--3 {
  bottom: -20%;
  left: 18%;
  width: 95vmin;
  height: 95vmin;
  opacity: 0.55;
}
.p-x3 .x3-blob--3 > span {
  filter: blur(95px);
  animation-duration: 19s;
  animation-delay: 5s;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-x3-indigo) 75%, transparent) 0%,
    color-mix(in oklab, var(--color-x3-blue-deep) 30%, transparent) 45%,
    transparent 68%
  );
}
@keyframes x3-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* ---------- hero variant toggle (Normal / Campaign preview) ----------
   Two tiny mono words tucked into the hero's bottom-left corner, below the
   content block — no pill, no background, ~quarter opacity at rest so it
   reads as a stray coordinate label until hovered. x3.js swaps the
   [data-x3-hv] media + copy in place and mirrors the p-x3--agentic
   sub-width modifier. */
.p-x3 .x3-herovar {
  position: absolute;
  bottom: 14px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.28;
  transition: opacity 0.2s ease;
}
.p-x3 .x3-herovar:hover,
.p-x3 .x3-herovar:focus-within { opacity: 1; }
@media (min-width: 1024px) { .p-x3 .x3-herovar { left: 32px; } }
.p-x3 .x3-herovar__btn {
  /* sentence case per the site-wide no-caps rule; tracking keeps it "mono" */
  padding: 2px 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* touch: no hover to discover it with, and fingers need a bigger target */
@media (hover: none) {
  .p-x3 .x3-herovar { opacity: 1; }
  .p-x3 .x3-herovar__btn { padding: 8px 2px; }
}
.p-x3 .x3-herovar__btn:hover { color: #fff; }
.p-x3 .x3-herovar__btn.is-active {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* the base img/video display rules outrank the UA [hidden] default, so the
   variant swap pins it explicitly: whichever variant is off is gone */
.p-x3 [data-x3-hv][hidden] { display: none !important; }

.p-x3 .x3-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-x3-ink) 32%, transparent) 0%,
    transparent 32%,
    transparent 52%,
    color-mix(in oklab, var(--color-x3-ink) 62%, transparent) 100%
  );
}
.p-x3 .x3-hero__inner {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: 112px 20px 56px;
}
@media (min-width: 1024px) {
  .p-x3 .x3-hero__inner { padding-inline: 32px; }
}
.p-x3 .x3-hero__title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 11vw;
  line-height: 0.98;
}
@media (min-width: 640px) { .p-x3 .x3-hero__title { font-size: 8.5vw; } }
@media (min-width: 1024px) {
  .p-x3 .x3-hero__title { font-size: clamp(52px, 6.4vw, 92px); }
}
.p-x3 .x3-rotate {
  position: relative;
  display: block;
  height: 0.95em;
  color: rgba(255, 255, 255, 0.9);
}
.p-x3 .x3-rotate__line {
  position: absolute;
  inset-inline: 0;
  top: 0;
  opacity: 0;
  transform: translateY(40%);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}
.p-x3 .x3-rotate__line.is-active {
  opacity: 1;
  transform: none;
}
.p-x3 .x3-rotate__line.is-leaving {
  opacity: 0;
  transform: translateY(-40%);
}
.p-x3 .x3-hero__row {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 48px;
}
.p-x3 .x3-hero__row--rule {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 32px;
}
/* phones + tablets: no rotation (the two variants run 3 vs 2 lines, and
   the swap leaves a hole) — the title is static on its first line, flowing
   at its natural height, so the lockup is always exactly three tight lines */
@media (max-width: 1023px) {
  .p-x3 .x3-rotate { height: auto; }
  .p-x3 .x3-rotate__line {
    position: static;
    transition: none;
  }
  .p-x3 .x3-rotate__line:first-child { opacity: 1; transform: none; }
  .p-x3 .x3-rotate__line + .x3-rotate__line { display: none; }
}
/* phones: the desktop-scale gaps come in a notch */
@media (max-width: 639px) {
  .p-x3 .x3-hero__row { gap: 28px; margin-top: 32px; }
  .p-x3 .x3-hero__row--rule { padding-top: 24px; }
}
/* phones + tablets: bottom-anchoring reads as a void up top, so the copy
   block centers vertically in the screen (left-aligned as everywhere else).
   Desktop keeps the bottom-anchored layout. */
@media (max-width: 1023px) {
  .p-x3 .x3-hero__inner {
    margin-block: auto;
    padding-block: 96px 72px;
  }
}
@media (min-width: 1024px) {
  .p-x3 .x3-hero__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
  }
}
.p-x3 .x3-hero__sub {
  /* fits the two-line positioning statement at 1280 (layout rule: hero sub
     ≤2 lines); the single Get-started action leaves the row the room */
  max-width: 800px;
  font-size: 15px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 640px) { .p-x3 .x3-hero__sub { font-size: 16px; } }
.p-x3 .x3-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.p-x3 .x3-btn-white {
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-black);
}
.p-x3 .x3-btn-white:hover { background: rgba(255, 255, 255, 0.9); }
.p-x3 .x3-btn-ghost {
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
  border-color: rgba(255, 255, 255, 0.25);
}
.p-x3 .x3-btn-black {
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-black);
  color: #fff;
}
.p-x3 .x3-btn-black:hover { background: rgba(0, 0, 0, 0.85); }

/* ---------- shared section inner ---------- */
.p-x3 .x3-statement__inner,
.p-x3 .x3-expertise__inner,
.p-x3 .x3-quote__inner,
.p-x3 .x3-cta__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 1024px) {
  .p-x3 .x3-statement__inner,
  .p-x3 .x3-expertise__inner,
  .p-x3 .x3-quote__inner,
  .p-x3 .x3-cta__inner { padding-inline: 32px; }
}

/* ---------- statement (bright, full screen, scroll-filled text) ---------- */
.p-x3 .x3-statement {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
  color: var(--color-foreground);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* curtain edge: the statement is the first section riding over the pinned
     hero, so its top corners round off against the dark video behind it */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-x3 .x3-statement {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}

/* ---------- chapter seams (page-flow pass, 2026-07-21) ----------
   The statement's rounded curtain edge over the hero is the page-wide motif:
   every change of ground (bright ⇄ dark) opens on the same rounded edge,
   sliding over the closing chapter. Tone-adjacent neighbors (cases→expertise,
   products→certs, quote→cta) stay flush — they read as one chapter.
   Chapters: hero · statement+industries · trust stack · use cases+platform ·
   products+certs · quotes+cta. */
.p-x3 .x3-stackc,
.p-x3 .x3-cases,
.p-x3 .x3-products,
.p-x3 .x3-quote {
  position: relative;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-x3 .x3-stackc,
  .p-x3 .x3-cases,
  .p-x3 .x3-products,
  .p-x3 .x3-quote {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
/* the chapter being covered gives the overlap back as bottom padding, so
   its closing content keeps its intended breathing room */
.p-x3 .x3-statement,
.p-x3 .x3-stackc,
.p-x3 .x3-expertise,
.p-x3 .x3-certs { padding-bottom: 20px; }
@media (min-width: 768px) {
  .p-x3 .x3-statement,
  .p-x3 .x3-stackc,
  .p-x3 .x3-expertise,
  .p-x3 .x3-certs { padding-bottom: 32px; }
}
.p-x3 .x3-statement__inner {
  width: 100%;
  padding-block: 96px 48px;
  transform: scale(0.94);
  transform-origin: 50% 0;
  transition: transform 0.9s var(--ease-out-expo);
}
@media (min-width: 768px) { .p-x3 .x3-statement__inner { padding-block: 128px 64px; } }
.p-x3 .x3-statement__inner.is-settled { transform: none; }
.p-x3 .x3-statement__text {
  margin-top: 8px;
  /* sized so the statement breaks into 3 full lines — no widow word
     (re-measured 2026-07-21 for the "enterprise-grade," copy: 940px left
     "security." alone on a 4th line; 3 rows need ≥950px) */
  max-width: 980px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
  row-gap: 0.04em;
}
/* word-by-word scroll fill: dim words turn black in reading order */
.p-x3 .x3-w {
  color: var(--color-grey-200);
  transition: color 0.3s ease;
}
.p-x3 .x3-w.is-filled { color: var(--color-black); }
@media (min-width: 640px) { .p-x3 .x3-statement__text { font-size: 40px; } }
@media (min-width: 768px) { .p-x3 .x3-statement__text { font-size: 50px; } }

/* ---------- why incode / differentiators (bright, expanding card row) ---------- */
.p-x3 .x3-expertise {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-off-white);
  color: var(--color-foreground);
}
/* same vertical rhythm as the other content sections (was 48/56 — the one
   outlier on the page) */
.p-x3 .x3-expertise__inner { padding-block: 64px; }
@media (min-width: 768px) { .p-x3 .x3-expertise__inner { padding-block: 96px; } }
/* Expanding card row (developios-style): four tall white cards; the
   hovered card (first card when idle) grows and reveals its body and an
   aurora icon tile; a small mono .0N index sits in every card's top-right
   corner. */
.p-x3 .x3-ucs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 640px) { .p-x3 .x3-ucs { grid-template-columns: repeat(2, 1fr); } }
.p-x3 .x3-uc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  padding: 28px 24px 24px;
}
.p-x3 .x3-uc__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-black);
  max-width: 9em;
}
.p-x3 .x3-uc__reveal { margin-top: 12px; }
.p-x3 .x3-uc__line {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-grey-on-white);
  max-width: 46ch;
}
.p-x3 .x3-uc__media {
  width: 100%;
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
}
/* media slot as an aurora tile (same token blues as the hero blobs) with a
   big white glyph */
.p-x3 .x3-uc__media--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-x3-indigo) 65%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 86%, var(--color-x3-blue-deep));
}
.p-x3 .x3-uc__tile-icon {
  width: 64px;
  height: 64px;
  -webkit-mask-size: contain;
  mask-size: contain;
  color: #fff;
  opacity: 0.92;
}
/* media slot as a bright product-canvas zoom: PlatformScene.astro renders
   the scene (dot grid + white cards) absolutely inside; the slot only
   frames it. Same layout behavior as --tile (aspect on grid, flex-fill
   inside the desktop accordion). */
.p-x3 .x3-uc__media--canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-border-light);
  background: #fff;
}
.p-x3 .x3-uc__num {
  position: absolute;
  top: 30px;
  right: 24px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-grey-500);
}
/* Phones/tablets (and any no-hover input): the cards are a stack of CLOSED
   layers — each sheet overlaps the one above it, only num + title showing.
   Tapping a layer opens it (body + aurora tile ease in); tapping again
   closes the deck. x3.js toggles is-open. */
@media (max-width: 1023px), (hover: none) {
  .p-x3 .x3-ucs {
    display: block;
    margin-top: 40px;
  }
  .p-x3 .x3-uc {
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    /* soft top shadow sells the sheet sitting on the one before it */
    box-shadow: 0 -14px 28px -22px color-mix(in oklab, var(--color-x3-ink) 45%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .p-x3 .x3-uc + .x3-uc { margin-top: -12px; }
  /* + affordance, rotating to × when the layer is open */
  .p-x3 .x3-uc::after {
    content: "+";
    position: absolute;
    top: 24px;
    right: 22px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-grey-300);
    transition: transform 0.3s var(--ease-out-expo), color 0.2s ease;
  }
  .p-x3 .x3-uc.is-open::after {
    transform: rotate(45deg);
    color: var(--color-blue);
  }
  .p-x3 .x3-uc__num { right: 48px; }
  /* closed at rest: body + tile take no space, then ease open */
  .p-x3 .x3-uc__reveal {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.55s var(--ease-out-expo), opacity 0.3s ease, margin-top 0.55s var(--ease-out-expo);
  }
  .p-x3 .x3-uc.is-open .x3-uc__reveal {
    max-height: 160px;
    margin-top: 12px;
    opacity: 1;
  }
  .p-x3 .x3-uc__media {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transition: max-height 0.55s var(--ease-out-expo), opacity 0.35s ease 0.1s, margin-top 0.55s var(--ease-out-expo);
  }
  .p-x3 .x3-uc.is-open .x3-uc__media {
    max-height: 300px;
    margin-top: 20px;
    opacity: 1;
  }
}

/* Desktop with a real pointer: flex accordion. The open card is driven by
   JS (`is-open` from x3.js), not :hover — hover-only state collapses every
   card while the pointer crosses the gaps, which reads as a jitter. JS
   keeps the last-hovered card open across gaps and reverts to the first
   card when the pointer leaves the row. */
@media (min-width: 1024px) and (hover: hover) {
  .p-x3 .x3-ucs {
    display: flex;
    gap: 16px;
  }
  .p-x3 .x3-uc {
    flex: 1 1 0;
    height: clamp(380px, 54vh, 520px);
    padding: 24px 22px 22px;
    transition: flex-grow 0.7s var(--ease-out-expo);
  }
  .p-x3 .x3-uc.is-open { flex-grow: 2.4; }
  /* Constant wrap width + a reserved two-line slot: the title never
     re-wraps while the card animates, and the body below starts at the
     same y in every card. */
  .p-x3 .x3-uc__title {
    font-size: 24px;
    width: 155px;
    max-width: none;
    min-height: 2.3em;
  }
  /* Fixed width so the copy keeps its wrap while the card animates. */
  .p-x3 .x3-uc__reveal {
    width: 380px;
    max-width: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  /* In-flow, not absolute: fills whatever space is left below the tags,
     so the copy can never slide under the illustration. */
  .p-x3 .x3-uc__media {
    width: 100%;
    margin: 20px 0 0;
    flex: 1 1 0;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  /* the tile fills whatever height the flex column leaves it */
  .p-x3 .x3-uc__media--tile,
  .p-x3 .x3-uc__media--canvas { aspect-ratio: auto; }
  .p-x3 .x3-uc.is-open .x3-uc__reveal,
  .p-x3 .x3-uc.is-open .x3-uc__media {
    opacity: 1;
    transition: opacity 0.5s ease 0.25s;
  }
  /* index number moves out of the title zone (narrow closed cards can't
     hold a long title AND a top-right number) down to the bottom corner;
     it sits on the open card's bright canvas scene, so it eases to the
     product-chrome grey in sync with the scene's fade-in. */
  .p-x3 .x3-uc__num {
    top: auto;
    bottom: 38px;
    right: 38px;
    z-index: 1;
    transition: color 0.3s ease;
  }
  .p-x3 .x3-uc.is-open .x3-uc__num {
    color: var(--color-grey-400);
    transition: color 0.45s ease 0.25s;
  }
}

/* flowy gradient hover (dark + light variants) */
.p-x3 .x3-flow,
.p-x3 .x3-flow-light {
  position: relative;
  overflow: hidden;
}
.p-x3 .x3-flow > *,
.p-x3 .x3-flow-light > * {
  position: relative;
  z-index: 1;
}
.p-x3 .x3-flow::before,
.p-x3 .x3-flow-light::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: transform, opacity;
}
.p-x3 .x3-flow::before {
  background:
    radial-gradient(42% 60% at 18% 30%, color-mix(in oklab, var(--color-x3-blue-deep) 60%, transparent), transparent 62%),
    radial-gradient(36% 55% at 78% 18%, color-mix(in oklab, var(--color-blue) 45%, transparent), transparent 60%),
    radial-gradient(52% 72% at 62% 85%, color-mix(in oklab, var(--color-x3-indigo) 50%, transparent), transparent 65%),
    radial-gradient(28% 42% at 38% 68%, color-mix(in oklab, var(--color-blue-eyebrow) 16%, transparent), transparent 60%);
  filter: blur(28px) saturate(130%);
}
.p-x3 .x3-flow-light::before {
  background:
    radial-gradient(42% 60% at 18% 30%, color-mix(in oklab, var(--color-blue) 22%, transparent), transparent 62%),
    radial-gradient(36% 55% at 78% 18%, color-mix(in oklab, var(--color-blue-eyebrow) 50%, transparent), transparent 60%),
    radial-gradient(52% 72% at 62% 85%, color-mix(in oklab, var(--color-x3-blue-deep) 16%, transparent), transparent 65%),
    radial-gradient(28% 42% at 38% 68%, color-mix(in oklab, var(--color-blue-100) 60%, transparent), transparent 60%);
  filter: blur(24px) saturate(120%);
}
.p-x3 .x3-flow:hover::before,
.p-x3 .x3-flow-light:hover::before {
  opacity: 1;
  animation: x3-flow-drift 7s ease-in-out infinite;
}
@keyframes x3-flow-drift {
  0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  33% { transform: translate(6%, -5%) rotate(7deg) scale(1.1); }
  66% { transform: translate(-5%, 4%) rotate(-5deg) scale(1.05); }
}

/* ---------- quote (dark) ---------- */
.p-x3 .x3-quote {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-x3 .x3-quote__inner {
  padding-block: 80px;
  text-align: center;
}
@media (min-width: 768px) { .p-x3 .x3-quote__inner { padding-block: 112px; } }
/* testimonial wall (Sofia, 2026-07-23, wiz.io reference): two card rows
   drifting in opposite directions, shorter than the reference — quotes
   line-clamp so every card holds the same compact height. The tracks ride
   the base.css marquee (-50% over a duplicated group); pausing on hover
   lets a card be read; prefers-reduced-motion pauses via .animate-marquee. */
.p-x3 .x3-quote__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
.p-x3 .x3-quote__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.p-x3 .x3-quote__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation-duration: 70s;
}
.p-x3 .x3-quote__row--reverse .x3-quote__track {
  animation-direction: reverse;
  animation-duration: 78s; /* slightly slower so the rows never sync up */
}
.p-x3 .x3-quote__row:hover .x3-quote__track { animation-play-state: paused; }
.p-x3 .x3-quote__group { display: flex; }
.p-x3 .x3-qcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 320px;
  /* gap as margin (not flex gap) so the -50% loop point stays seamless */
  margin-right: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  background: #fff; /* pure white lifts the cards off the F9F9F9 section ground */
  padding: 24px;
  text-align: left;
}
@media (min-width: 768px) { .p-x3 .x3-qcard { width: 420px; padding: 26px 28px; } }
.p-x3 .x3-qcard__logo {
  height: var(--logo-h, 22px);
  width: auto;
  object-fit: contain;
}
/* anonymous clients: their descriptor sits where the logo would */
.p-x3 .x3-qcard__client {
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 22px;
  color: var(--color-grey-500);
}
.p-x3 .x3-qcard__text {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.p-x3 .x3-qcard__attr {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--color-grey-on-white);
}
.p-x3 .x3-quote__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
/* phones: the quote band and the CTA close ranks — desktop's air reads as
   a void at one column */
@media (max-width: 639px) {
  .p-x3 .x3-quote__inner { padding-block: 64px 40px; }
  .p-x3 .x3-cta__inner { padding-block: 32px 56px; }
}

/* ---------- cta (bright) ---------- */
.p-x3 .x3-cta {
  position: relative;
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-x3 .x3-cta__inner { padding-block: 64px; }
@media (min-width: 768px) { .p-x3 .x3-cta__inner { padding-block: 80px; } }
/* closing panel — same aurora recipe as the product tiles, so the hero's
   blues bookend the page; .x3-flow adds the flowy gradient on hover */
.p-x3 .x3-cta__card {
  /* keeps the card content above the absolutely-positioned .x3-cta__bg —
     this used to come from .x3-flow before the hover gradient was removed
     (Sofia: no tone-shifting hovers on gradients) */
  position: relative;
  z-index: 1;
  border-radius: 24px;
  padding: 64px 24px;
  text-align: center;
  color: #fff;
}
.p-x3 .x3-cta__card,
.p-x3 .x3-cta__bg {
  background:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-x3-indigo) 65%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 86%, var(--color-x3-blue-deep));
}
/* full-bleed → card entrance: hidden until x3.js arms it (is-ctafx), so
   no-JS and reduced-motion get the plain static card. --x3-ctap runs
   0 → 1 on scroll; the clip contracts from the section's edges to the
   card's measured rect (--x3-cta-t/r/b/l) while the corners round up. */
.p-x3 .x3-cta__bg {
  display: none;
  position: absolute;
  inset: 0;
}
.p-x3 .x3-cta.is-ctafx .x3-cta__bg {
  display: block;
  clip-path: inset(
    calc(var(--x3-ctap, 1) * var(--x3-cta-t, 0px))
    calc(var(--x3-ctap, 1) * var(--x3-cta-r, 0px))
    calc(var(--x3-ctap, 1) * var(--x3-cta-b, 0px))
    calc(var(--x3-ctap, 1) * var(--x3-cta-l, 0px))
    round calc(var(--x3-ctap, 1) * 24px)
  );
}
.p-x3 .x3-cta.is-ctafx .x3-cta__card { background: none; }
@media (min-width: 768px) { .p-x3 .x3-cta__card { padding: 96px 48px; } }
.p-x3 .x3-cta__title {
  margin: 16px auto 0;
  max-width: 768px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 32px;
  line-height: 1.05;
  text-wrap: balance;
  color: #fff;
}
@media (min-width: 640px) { .p-x3 .x3-cta__title { font-size: 40px; } }
@media (min-width: 768px) { .p-x3 .x3-cta__title { font-size: 48px; } }
.p-x3 .x3-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.p-x3 .x3-btn-outline {
  height: 44px;
  padding-inline: 24px;
  border-radius: var(--radius-lg);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-x3 .x3-blob > span,
  .p-x3 .x3-flow::before,
  .p-x3 .x3-flow-light::before {
    animation: none !important;
    transition: none !important;
  }
  .p-x3 .x3-flow::before,
  .p-x3 .x3-flow-light::before { opacity: 0 !important; }
  /* the gradient reveal never fires here, so the insights just show */
  .p-x3 .x3-stack-row__insight {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .p-x3 .x3-statement__inner { transform: none; }
  .p-x3 .x3-rotate__line { transition: none; }
  .p-x3 .x3-ind__seg.is-on {
    transition: none;
    background: var(--color-x3-blue-deep);
  }
}


/* ---------- industries stat carousel (inside the statement section) ---------- */
.p-x3 .x3-indcar {
  margin-top: 56px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 28px;
}
@media (min-width: 768px) { .p-x3 .x3-indcar { margin-top: 72px; } }
.p-x3 .x3-indcar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.p-x3 .x3-indcar__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: var(--color-white);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-grey-500);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* icon inherits the tab's text color (grey → black on hover, white when active);
   sized to the label's cap height so it reads as part of the word */
.p-x3 .x3-indcar__tab-icon {
  width: 13px;
  height: 13px;
}
.p-x3 .x3-indcar__tab:hover {
  border-color: var(--color-grey-300);
  color: var(--color-black);
}
.p-x3 .x3-indcar__tab.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}
.p-x3 .x3-indcar__panes {
  position: relative;
  margin-top: 28px;
}
/* inactive panes stack absolutely; the active one stays in flow so the
   container takes its natural height */
.p-x3 .x3-indcar__pane {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.p-x3 .x3-indcar__pane.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* fixed 50/50 split: the detail column starts at the same x on every tab,
   so switching industries never shifts the layout */
@media (min-width: 1024px) {
  .p-x3 .x3-indcar__pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 48px;
  }
}
.p-x3 .x3-ind__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 48px;
  line-height: 1;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-x3 .x3-ind__value { font-size: 56px; } }
.p-x3 .x3-ind__den {
  margin-left: 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-grey-500);
}
.p-x3 .x3-ind__meter {
  display: flex;
  gap: 3px;
  margin-top: 14px;
  max-width: 320px;
}
.p-x3 .x3-ind__seg {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border-light);
}
.p-x3 .x3-ind__seg.is-on {
  transition: background-color 0.45s ease;
  transition-delay: calc(0.35s + var(--seg) * 0.08s);
}
.p-x3 .x3-indcar__pane.is-active .x3-ind__seg.is-on {
  background: var(--color-x3-blue-deep);
}
.p-x3 .x3-indcar__claim {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-on-white);
}
/* right column: customer logos on top, description below.
   On desktop it hangs off a hairline; both are anchored to the bottom of
   the column — desc baselines with the claim under the meter, logos ride
   just above it. */
.p-x3 .x3-ind__detail { min-width: 0; }
@media (min-width: 1024px) {
  .p-x3 .x3-ind__detail {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border-light);
    padding-left: 48px;
    padding-top: 6px;
  }
  .p-x3 .x3-ind__detail .x3-indcar__logos { margin-top: auto; }
}
.p-x3 .x3-indcar__desc {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-on-white);
}
.p-x3 .x3-indcar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 44px;
}
/* --logo-h is the per-logo optical height set in the INDUSTRIES data:
   a uniform pixel height makes wide wordmarks (Revolut, FanDuel) read huge
   next to compact marks (Citi, Nu), so each logo carries its own height
   tuned to equalize perceived size across every industry row */
.p-x3 .x3-indcar__logos img {
  height: var(--logo-h, 22px);
  width: auto;
}

/* ---------- why incode: section title ---------- */
.p-x3 .x3-expertise__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-black);
  font-size: 26px;
  line-height: 1.05;
}
@media (min-width: 640px) { .p-x3 .x3-expertise__title { font-size: 32px; } }
@media (min-width: 768px) { .p-x3 .x3-expertise__title { font-size: 36px; } }
/* ---------- "Show all" title-row link (platform / products) ----------
   the action rides the section title's baseline as a quiet underlined
   mono link instead of a detached button row below the content */
.p-x3 .x3-titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.p-x3 .x3-showall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.p-x3 .x3-showall__label {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s ease;
}
.p-x3 .x3-showall:hover { color: #fff; }
.p-x3 .x3-showall:hover .x3-showall__label { text-decoration-color: currentColor; }
.p-x3 .x3-showall--light { color: var(--color-grey-on-white); }
.p-x3 .x3-showall--light:hover { color: var(--color-black); }

/* ---------- platform stack (dark pillar cards) ---------- */
.p-x3 .x3-stack {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-x3-ink);
  color: #fff;
}
.p-x3 .x3-stack__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-stack__inner { padding-block: 96px; } }
@media (min-width: 1024px) { .p-x3 .x3-stack__inner { padding-inline: 24px; } }
.p-x3 .x3-stack__title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  line-height: 1.05;
}
@media (min-width: 640px) { .p-x3 .x3-stack__title { font-size: 32px; } }
@media (min-width: 768px) { .p-x3 .x3-stack__title { font-size: 36px; } }
.p-x3 .x3-stack__intro {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.p-x3 .x3-stack__rows { margin-top: 32px; }
.p-x3 .x3-stack-row {
  display: grid;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 26px 20px;
  cursor: default;
}
.p-x3 .x3-stack-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 768px) {
  .p-x3 .x3-stack-row {
    grid-template-columns: 1fr auto 24px;
    gap: 32px;
    padding: 30px 28px;
  }
}
.p-x3 .x3-stack-row__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.p-x3 .x3-stack-row__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 1.15;
  color: #fff;
}
@media (min-width: 768px) { .p-x3 .x3-stack-row__name { font-size: 24px; } }
.p-x3 .x3-stack-row__line {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}
/* insight claim: hidden at rest, fades in with the row's flow gradient
   (same 0.45s ease as .x3-flow::before) so they read as one reveal */
.p-x3 .x3-stack-row__insight {
  max-width: 380px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 20px;
  line-height: 1.25;
  text-align: right;
  text-wrap: balance;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
@media (min-width: 768px) { .p-x3 .x3-stack-row__insight { font-size: 22px; } }
.p-x3 .x3-stack-row:hover .x3-stack-row__insight {
  opacity: 1;
  transform: none;
}
/* no pointer to hover with (touch): the insight is simply visible */
@media (hover: none) {
  .p-x3 .x3-stack-row__insight {
    opacity: 1;
    transform: none;
    text-align: left;
  }
}
.p-x3 .x3-stack-row__arrow {
  display: none;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
@media (min-width: 768px) { .p-x3 .x3-stack-row__arrow { display: block; } }
.p-x3 .x3-stack-row:hover .x3-stack-row__arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--color-blue-eyebrow);
}

/* ---------- trust stack, alternate (one question at a time) ----------
   Exploration 2026-07-21: question list left (mono index, meter sweep on
   the active row), single answer pane right. Same carousel contract as
   x3-indcar: auto-rotate 4s, click pins. Old three-row version keeps its
   styles above (still live on /agentic-fraud/). */
.p-x3 .x3-stackb {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-x3-ink);
  color: #fff;
}
.p-x3 .x3-stackb__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-stackb__inner { padding-block: 96px; } }
@media (min-width: 1024px) { .p-x3 .x3-stackb__inner { padding-inline: 24px; } }
/* one framed card ties questions and answer together (Sofia, 2026-07-21):
   shared border + faint wash, full-height division between the columns */
.p-x3 .x3-stackb__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 16%, transparent), transparent 65%),
    rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
@media (min-width: 900px) {
  .p-x3 .x3-stackb__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }
}
.p-x3 .x3-stackb__tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 28px;
}
/* the three questions own the column's full height (Sofia, 2026-07-21):
   rows grow evenly edge to edge, hairlines only BETWEEN rows — no dead
   band above the first question or below the last */
@media (min-width: 900px) {
  .p-x3 .x3-stackb__tabs { padding: 0 40px 0 36px; }
  .p-x3 .x3-stackb__tab {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 16px 0;
  }
  .p-x3 .x3-stackb__tabs .x3-stackb__tab:first-child { border-top: 0; }
  .p-x3 .x3-stackb__tabs .x3-stackb__tab:last-child { border-bottom: 0; }
}
/* question-only rows (Sofia, 2026-07-21): no number, no name, no meter —
   the pillar name lives as the answer's kicker instead, and rows respond
   to hover as well as click (x3.js) */
.p-x3 .x3-stackb__tab {
  position: relative;
  display: block;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  text-align: left;
  cursor: pointer;
}
.p-x3 .x3-stackb__tab:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.p-x3 .x3-stackb__tab-q {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
@media (min-width: 768px) { .p-x3 .x3-stackb__tab-q { font-size: 22px; } }
.p-x3 .x3-stackb__tab:hover .x3-stackb__tab-q { color: rgba(255, 255, 255, 0.75); }
.p-x3 .x3-stackb__tab.is-active .x3-stackb__tab-q { color: #fff; }
/* panes: overlay idiom shared with x3-indcar so switching never reflows */
/* grid-stack idiom: every pane occupies the same cell, so the TALLEST pane
   sets the card height for all three questions — the card never resizes on
   switch (Sofia, 2026-07-21) */
.p-x3 .x3-stackb__panes {
  position: relative;
  display: grid;
  align-content: center;
  padding: 28px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 900px) {
  .p-x3 .x3-stackb__panes {
    padding: 44px 48px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}
/* ---- the stack as layers: three glowing discs stacked vertically ----
   (Sofia's reference: translucent blue ellipses overlapping downward.)
   The stack lives behind the answer, bleeding off the card's right edge
   (the grid's overflow:hidden crops it). The active question lights its
   layer: pane 0 → top disc, 1 → middle, 2 → bottom. Pure CSS :has(). */
.p-x3 .x3-stackb__layers { display: none; }
@media (min-width: 1100px) {
  .p-x3 .x3-stackb__layers {
    display: block;
    position: absolute;
    top: 50%;
    right: -56px;
    width: 320px;
    height: 360px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  /* keep the answer copy clear of the stack zone */
  .p-x3 .x3-stackb__pane { padding-right: 240px; }
}
.p-x3 .x3-disc {
  opacity: 0.34;
  transition: opacity 0.55s ease;
  /* the container is pointer-events:none; each disc opts back in so its
     layer title can reveal on hover */
  pointer-events: auto;
}
.p-x3 .x3-disc:hover { opacity: 1; }
.p-x3 .x3-disc__label {
  font-size: 14px;
  letter-spacing: 0.08em;
  fill: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.p-x3 .x3-disc:hover .x3-disc__label { opacity: 1; }
.p-x3 .x3-disc .x3-disc__glow {
  opacity: 0.14;
  transition: opacity 0.55s ease;
}
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="0"].is-active) .x3-disc--1,
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="1"].is-active) .x3-disc--2,
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="2"].is-active) .x3-disc--3 {
  opacity: 1;
}
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="0"].is-active) .x3-disc--1 .x3-disc__glow,
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="1"].is-active) .x3-disc--2 .x3-disc__glow,
.p-x3 .x3-stackb__grid:has(.x3-stackb__pane[data-stackb-pane="2"].is-active) .x3-disc--3 .x3-disc__glow {
  opacity: 0.6;
}
.p-x3 .x3-stackb__pane {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  /* exit stays instant; only the ENTERING pane animates (rule below) */
  transition: none;
  pointer-events: none;
}
.p-x3 .x3-stackb__pane.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.p-x3 .x3-stackb__pane-name {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--color-blue-eyebrow);
}
.p-x3 .x3-stackb__pane-line {
  margin-top: 12px;
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  line-height: 1.15;
  color: #fff;
  text-wrap: pretty;
}
@media (min-width: 768px) { .p-x3 .x3-stackb__pane-line { font-size: 33px; } }
/* the problems each pillar solves, as a quiet bullet list under the solution */
.p-x3 .x3-stackb__pane-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  list-style: none;
  padding: 0;
}
.p-x3 .x3-stackb__pane-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.p-x3 .x3-stackb__pane-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-blue);
}

/* ---------- trust stack, blueprint plate (specia1ne.com reference) ----------
   Flat Incode-blue ground. A hairline spine runs down the center of the row
   list; numbered chips sit on it. Questions right-align to the spine; the
   active row turns white, grows a step, and reveals its problems bracket
   (left edge) + solution line (right of the spine) + arrow (far right).
   Carousel contract unchanged: 4s auto-rotate, manual click pins. */
.p-x3 .x3-stackc {
  /* ink ground with the hero's aurora hues bleeding in from the corners */
  background:
    radial-gradient(90% 70% at 12% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 38%, transparent), transparent 62%),
    radial-gradient(70% 55% at 95% 100%, color-mix(in oklab, var(--color-x3-indigo) 30%, transparent), transparent 65%),
    var(--color-x3-ink);
  color: #fff;
}
.p-x3 .x3-stackc__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-stackc__inner { padding-block: 96px; } }
@media (min-width: 1024px) { .p-x3 .x3-stackc__inner { padding-inline: 24px; } }
.p-x3 .x3-stackc__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .p-x3 .x3-stackc__head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: 64px;
  }
}
.p-x3 .x3-stackc__label {
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}
.p-x3 .x3-stackc__title {
  margin-top: 24px;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 30px;
  line-height: 1.02;
  color: #fff;
}
@media (min-width: 640px) { .p-x3 .x3-stackc__title { font-size: 40px; } }
@media (min-width: 1280px) { .p-x3 .x3-stackc__title { font-size: 50px; } }
.p-x3 .x3-stackc__head-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 900px) {
  .p-x3 .x3-stackc__head-right {
    align-items: flex-end;
    text-align: right;
    align-self: stretch;
    justify-content: space-between;
  }
}
.p-x3 .x3-stackc__intro {
  max-width: 380px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
/* column heads: mono labels over each side of the spine — desktop only,
   on mobile the answer sits right under its question so no cue is needed */
.p-x3 .x3-stackc__colhead { display: none; }
@media (min-width: 900px) {
  .p-x3 .x3-stackc__colhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
}
.p-x3 .x3-stackc__colhead-label {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
/* row list: hairlines + the center spine the chips ride on */
.p-x3 .x3-stackc__rows {
  position: relative;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
@media (min-width: 900px) {
  .p-x3 .x3-stackc__colhead + .x3-stackc__rows { margin-top: 14px; }
}
@media (min-width: 900px) {
  .p-x3 .x3-stackc__rows::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.32);
  }
}
.p-x3 .x3-stackc__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 900px) {
  .p-x3 .x3-stackc__row {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 34px 0;
  }
}
/* left cell: the question with its layer name as subtitle underneath */
.p-x3 .x3-stackc__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.p-x3 .x3-stackc__q {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  transition: color 0.45s ease, font-size 0.45s ease;
}
@media (min-width: 900px) { .p-x3 .x3-stackc__q { font-size: 22px; } }
@media (min-width: 1100px) { .p-x3 .x3-stackc__q { white-space: nowrap; } }
@media (min-width: 1280px) { .p-x3 .x3-stackc__q { font-size: 24px; } }
.p-x3 .x3-stackc__row:hover .x3-stackc__q { color: rgba(255, 255, 255, 0.8); }
.p-x3 .x3-stackc__row.is-active .x3-stackc__q { color: #fff; }
@media (min-width: 900px) {
  .p-x3 .x3-stackc__row.is-active .x3-stackc__q { font-size: 25px; }
}
@media (min-width: 1280px) {
  .p-x3 .x3-stackc__row.is-active .x3-stackc__q { font-size: 29px; }
}
/* phones (no spine, single column): the chip becomes the row's kicker and
   the hidden answer stops reserving space — inactive rows collapse to just
   chip + question + layer name instead of leaving a void */
@media (max-width: 899px) {
  .p-x3 .x3-stackc__chip { order: -1; }
  .p-x3 .x3-stackc__row .x3-stackc__right { display: none; }
  .p-x3 .x3-stackc__row.is-active .x3-stackc__right { display: flex; }
}
/* the numbered chip riding the spine */
.p-x3 .x3-stackc__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}
.p-x3 .x3-stackc__name {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.p-x3 .x3-stackc__row.is-active .x3-stackc__name { color: #fff; }
/* right cell: the answer line, revealed with the active row */
.p-x3 .x3-stackc__right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-right: 40px;
}
.p-x3 .x3-stackc__line {
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.p-x3 .x3-stackc__row.is-active .x3-stackc__line {
  opacity: 1;
  transform: none;
}
.p-x3 .x3-stackc__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: #fff;
  opacity: 0;
  transition: opacity 0.45s ease;
}
@media (min-width: 900px) { .p-x3 .x3-stackc__arrow { display: block; } }
.p-x3 .x3-stackc__row.is-active .x3-stackc__arrow { opacity: 1; }
/* ---------- use cases (bright four-column map: one column per pillar) ----------
   Flat replacement for the tabbed one-pillar carousel (Sofia, 2026-07-21):
   all four trust pillars visible at once, each a hairline-topped column.
   Uneven item counts just leave shorter columns — no frame to fill, so
   2-item pillars no longer read as empty. */
.p-x3 .x3-cases {
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-x3 .x3-cases__inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-cases__inner { padding-block: 96px; } }
@media (min-width: 1024px) { .p-x3 .x3-cases__inner { padding-inline: 24px; } }
.p-x3 .x3-cases__title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  line-height: 1.05;
  color: var(--color-black);
}
@media (min-width: 640px) { .p-x3 .x3-cases__title { font-size: 34px; } }
@media (min-width: 768px) { .p-x3 .x3-cases__title { font-size: 44px; } }
@media (min-width: 1280px) { .p-x3 .x3-cases__title { font-size: 52px; } }
.p-x3 .x3-cases__intro {
  margin-top: 18px;
  /* no width cap: the one-sentence intro holds a single line on desktop */
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey-on-white);
}
@media (min-width: 640px) { .p-x3 .x3-cases__intro { font-size: 16px; } }
/* the pillar columns: 1 → 2 → 4 across breakpoints */
.p-x3 .x3-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .p-x3 .x3-cases__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
}
@media (min-width: 1024px) {
  .p-x3 .x3-cases__grid { grid-template-columns: repeat(4, 1fr); gap: 48px; margin-top: 64px; }
}
.p-x3 .x3-case {
  border-top: 1px solid var(--color-grey-200);
  padding-top: 20px;
}
/* the head links to the pillar's own page — flat, no card: the name turns
   blue and a small arrow slides in on hover */
.p-x3 .x3-case__head { display: block; color: inherit; }
.p-x3 .x3-case__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 1.15;
  color: var(--color-black);
  transition: color 0.25s ease;
}
.p-x3 .x3-case__head:hover .x3-case__name { color: var(--color-blue); }
.p-x3 .x3-case__head-arrow {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: baseline;
  color: var(--color-blue);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.p-x3 .x3-case__head-arrow svg { width: 13px; height: 13px; }
.p-x3 .x3-case__head:hover .x3-case__head-arrow { opacity: 1; transform: none; }
.p-x3 .x3-case__line {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-on-white);
}
/* equal head block on the 4-up layout so the first item row lines up
   across columns (4.5em = 3 lines of the pillar line) */
@media (min-width: 1024px) { .p-x3 .x3-case__line { min-height: 4.5em; } }
.p-x3 .x3-case__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.p-x3 .x3-case__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--color-border-light);
  padding: 14px 0;
}
/* the mask-rendered glyph carries the only blue at rest */
.p-x3 .x3-case__item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-blue);
}
.p-x3 .x3-case__item-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.p-x3 .x3-case__item-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-black);
  transition: color 0.2s ease;
}
.p-x3 .x3-case__item:hover .x3-case__item-name { color: var(--color-blue); }

/* ---------- certifications (dark marquee band, from the original home design) ---------- */
.p-x3 .x3-certs {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-x3-ink);
  color: #fff;
}
.p-x3 .x3-certs__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-certs__inner { padding-block: 80px; } }
@media (min-width: 1024px) { .p-x3 .x3-certs__inner { padding-inline: 24px; } }
.p-x3 .x3-certs__label { text-align: center; }
.p-x3 .x3-certs__marquee {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
@media (min-width: 640px) { .p-x3 .x3-certs__marquee { margin-top: 40px; } }
.p-x3 .x3-certs__track {
  display: flex;
  align-items: center;
  gap: 24px;
  will-change: transform;
}
@media (min-width: 640px) { .p-x3 .x3-certs__track { gap: 40px; } }
@media (min-width: 768px) { .p-x3 .x3-certs__track { gap: 56px; } }
.p-x3 .x3-certs__track img {
  height: 40px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  opacity: 0.8;
  filter: brightness(0) invert(1);
}
@media (min-width: 640px) { .p-x3 .x3-certs__track img { height: 56px; } }
@media (min-width: 768px) { .p-x3 .x3-certs__track img { height: 80px; } }

/* summarized analyst recognitions (Gartner · Liminal · G2) — logo + one line
   + link, no quadrant/grid cards (those live on /why-incode/) */
.p-x3 .x3-certs__awards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .p-x3 .x3-certs__awards {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 64px;
    padding-top: 56px;
  }
}
.p-x3 .x3-certs__award {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
/* fixed-height slot, bottom-aligned — logos of different optical heights
   share a baseline so the claims below start on the same line */
.p-x3 .x3-certs__award-logobox {
  display: flex;
  align-items: flex-end;
  height: 28px;
}
.p-x3 .x3-certs__award-logo {
  height: var(--logo-h, 24px);
  width: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1);
  transition: opacity 0.25s ease;
}
.p-x3 .x3-certs__award:hover .x3-certs__award-logo { opacity: 1; }
.p-x3 .x3-certs__award-claim {
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.p-x3 .x3-certs__award-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease;
}
.p-x3 .x3-certs__award-cta svg { transition: transform 0.25s ease; }
.p-x3 .x3-certs__award:hover .x3-certs__award-cta { color: #fff; }
.p-x3 .x3-certs__award:hover .x3-certs__award-cta svg { transform: translate(2px, -2px); }

/* ---------- highlights ticker (slim, expandable — from the original design) ---------- */
/* The strip rides ABOVE the fixed nav, announcement-bar style: pinned to the
   very top of the viewport with .c-header pushed down by the bar height.
   Once the page scrolls (html.x3-scrolled, set by x3.js) the strip slides
   away and the nav docks back to the top. */
.p-x3 .x3-ticker {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--color-x3-blue-deep);
  transition: transform 0.35s var(--ease-out-expo);
}
html.x3-scrolled .p-x3 .x3-ticker { transform: translateY(-100%); }
/* this stylesheet loads only on this page, so restyling the shared header
   here stays page-scoped */
.c-header { top: 44px; transition: top 0.35s var(--ease-out-expo); }
@media (min-width: 768px) { .c-header { top: 54px; } }
html.x3-scrolled .c-header { top: 0; }
/* open panel pushes the nav below it; --x3-hl-shift is measured by x3.js
   (bar + panel height) so it tracks content and viewport size */
html.x3-hl-open .c-header { top: var(--x3-hl-shift, 54px); }
.p-x3 .x3-ticker__bar {
  margin-inline: auto;
  max-width: var(--container-large);
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  /* the whole bar toggles the panel (the chevron alone is a small target) */
  cursor: pointer;
}
@media (min-width: 768px) { .p-x3 .x3-ticker__bar { height: 54px; } }
@media (min-width: 1024px) { .p-x3 .x3-ticker__bar { padding-inline: 24px; } }
.p-x3 .x3-ticker__label {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.p-x3 .x3-ticker__divider {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
}
.p-x3 .x3-ticker__lines {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.p-x3 .x3-ticker__line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.p-x3 .x3-ticker__line.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.p-x3 .x3-ticker__line.is-leaving {
  opacity: 0;
  transform: translateY(-9px);
}
.p-x3 .x3-ticker__eyebrow {
  flex-shrink: 0;
  font-weight: 500;
  color: #fff;
}
.p-x3 .x3-ticker__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-x3 .x3-ticker__count {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}
.p-x3 .x3-ticker__toggle,
.p-x3 .x3-ticker__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.p-x3 .x3-ticker__toggle:hover,
.p-x3 .x3-ticker__arrow:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.p-x3 .x3-ticker__toggle svg { transition: transform 0.2s ease; }
.p-x3 .x3-ticker.is-open .x3-ticker__toggle svg { transform: rotate(180deg); }
.p-x3 .x3-ticker__scrim {
  position: absolute;
  inset: 100% 0 auto;
  height: 100vh;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: default;
}
.p-x3 .x3-ticker.is-open .x3-ticker__scrim { opacity: 1; pointer-events: auto; }
.p-x3 .x3-ticker__panel {
  position: absolute;
  inset: 100% 0 auto;
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 12px 20px 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
@media (min-width: 1024px) { .p-x3 .x3-ticker__panel { padding-inline: 24px; } }
.p-x3 .x3-ticker.is-open .x3-ticker__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.p-x3 .x3-ticker__cards {
  position: relative;
  display: grid;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 0;
  background: rgba(5, 8, 16, 0.92);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.p-x3 .x3-ticker__card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.p-x3 .x3-ticker__card.is-active { opacity: 1; }
/* only clickable while the panel is open — otherwise the invisible active
   card floats over the hero and swallows clicks meant for hero controls */
.p-x3 .x3-ticker.is-open .x3-ticker__card.is-active { pointer-events: auto; }
.p-x3 .x3-ticker__pill {
  align-self: flex-start;
  border: 1px solid rgba(204, 225, 255, 0.3);
  background: rgba(204, 225, 255, 0.15);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-blue-eyebrow);
}
.p-x3 .x3-ticker__card-title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}
.p-x3 .x3-ticker__card-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}
.p-x3 .x3-ticker__cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-blue-eyebrow);
}
.p-x3 .x3-ticker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 12px 12px;
  background: rgba(5, 8, 16, 0.92);
  padding: 10px 24px;
}
.p-x3 .x3-ticker__nav { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .p-x3 .x3-ticker__line, .p-x3 .x3-ticker__panel, .p-x3 .x3-ticker__scrim, .p-x3 .x3-ticker__card {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-x3 .x3-w { color: var(--color-black); transition: none; }
}




/* ---------- featured products (dark portfolio-style cards under #platform) ---------- */
.p-x3 .x3-products {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-x3-ink);
  color: #fff;
}
.p-x3 .x3-products__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-x3 .x3-products__inner { padding-block: 96px; } }
@media (min-width: 1024px) { .p-x3 .x3-products__inner { padding-inline: 24px; } }
.p-x3 .x3-products__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.p-x3 .x3-products__title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  line-height: 1.05;
}
@media (min-width: 640px) { .p-x3 .x3-products__title { font-size: 32px; } }
@media (min-width: 768px) { .p-x3 .x3-products__title { font-size: 36px; } }
.p-x3 .x3-products__grid {
  margin-top: 40px;
  display: grid;
  gap: 16px;
}
/* minmax(0, 1fr), not bare 1fr: a bare 1fr track can't shrink below its
   content's min width, and a long no-wrap line inside a card would push
   the whole row past the viewport */
@media (min-width: 768px) { .p-x3 .x3-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* one row of three on desktop — fixed-height tiles so every visual matches
   exactly regardless of copy length; descriptions wrap again */
@media (min-width: 1024px) {
  .p-x3 .x3-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-x3 .x3-prod__visual {
    aspect-ratio: auto;
    height: 300px;
  }
  .p-x3 .x3-prod__line {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
.p-x3 .x3-prod {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 10px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.5s var(--ease-out-expo);
}
.p-x3 .x3-prod:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}
.p-x3 .x3-prod__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 8.5;
  min-height: 216px;
  border-radius: 14px;
  overflow: hidden;
  padding: 16px;
}
/* per-product aurora tiles — same token blues as the hero blobs, permuted */
.p-x3 .x3-prod__visual--1 {
  background:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-x3-indigo) 65%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 86%, var(--color-x3-blue-deep));
}
.p-x3 .x3-prod__visual--2 {
  background:
    radial-gradient(120% 95% at 88% 0%, color-mix(in oklab, var(--color-x3-blue-bright) 70%, transparent), transparent 62%),
    radial-gradient(110% 100% at 8% 100%, color-mix(in oklab, var(--color-x3-blue-deep) 60%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 86%, var(--color-x3-blue-bright));
}
.p-x3 .x3-prod__visual--3 {
  background:
    radial-gradient(120% 95% at 15% 100%, color-mix(in oklab, var(--color-x3-indigo) 75%, transparent), transparent 62%),
    radial-gradient(110% 100% at 90% 5%, color-mix(in oklab, var(--color-blue) 45%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 86%, var(--color-x3-indigo));
}
.p-x3 .x3-prod__visual--4 {
  background:
    radial-gradient(120% 95% at 85% 100%, color-mix(in oklab, var(--color-x3-blue-deep) 70%, transparent), transparent 62%),
    radial-gradient(110% 100% at 10% 0%, color-mix(in oklab, var(--color-x3-blue-bright) 50%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-ink) 88%, var(--color-blue));
}
.p-x3 .x3-prod__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.p-x3 .x3-prod__pill {
  border: 1px solid rgba(204, 225, 255, 0.3);
  background: rgba(5, 5, 5, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-blue-eyebrow);
}
.p-x3 .x3-prod__num {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
/* big product glyph, floating in the tile like the reference's centerpiece */
.p-x3 .x3-prod__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-x3 .x3-prod__glyph-icon {
  width: 64px;
  height: 64px;
  -webkit-mask-size: contain;
  mask-size: contain;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.5s var(--ease-out-expo);
}
.p-x3 .x3-prod:hover .x3-prod__glyph-icon { transform: scale(1.08); }
.p-x3 .x3-prod__id {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-x3 .x3-prod__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
}
@media (min-width: 640px) { .p-x3 .x3-prod__name { font-size: 24px; } }
.p-x3 .x3-prod__line {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}
/* single-line description on desktop cards */
@media (min-width: 768px) {
  .p-x3 .x3-prod__line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* footer row: tags left, arrow right — the arrow lives with the tags now */
.p-x3 .x3-prod__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 8px;
  flex: 1;
}
.p-x3 .x3-prod__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-black);
  transition: transform 0.3s ease;
}
.p-x3 .x3-prod:hover .x3-prod__arrow { transform: translate(2px, -2px); }
.p-x3 .x3-prod__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-x3 .x3-prod__tag {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .p-x3 .x3-prod,
  .p-x3 .x3-prod__glyph-icon,
  .p-x3 .x3-prod__arrow { transition: none !important; }
}