/* First screen: landscape wallpaper + frosted Mac sheet, like Supaste. */

html:has(body.v3),
body.v3 {
  background: #050816 !important;
}

body.v3 .v3-wallpaper {
  position: absolute;
  top: -96px;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
body.v3 .v3-wallpaper::before,
body.v3 .v3-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
}
body.v3 .v3-wallpaper::before {
  inset: -18%;
  background: url("passid-hero-bg.jpg") center top / cover no-repeat;
  transform: scale(var(--v3-zoom, 1));
  transform-origin: 50% 78%;
  filter: saturate(1.18) contrast(1.04);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.v3 .v3-wallpaper::before {
    transform: none !important;
  }
  #product-stage.lg-product {
    opacity: 1 !important;
  }
}
body.v3 .v3-wallpaper::after {
  /* Was fully transparent by 52% and white by 78% — the wallpaper's own
     natural tones took over right around the CTA/product-visual band,
     which is what read as "blue -> nearly white -> blue again". Keep the
     blue tint present much further down and delay the white fade-in until
     near the very bottom of the hero. */
  background: linear-gradient(180deg,
    rgba(18, 92, 210, 0.3) 0%,
    rgba(30, 120, 230, 0.16) 24%,
    rgba(40, 140, 240, 0.12) 45%,
    rgba(60, 150, 240, 0.08) 68%,
    rgba(255, 255, 255, 0.14) 90%,
    #ffffff 100%);
}
body.v3 .v3-sky-wash {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -80px;
  height: 96vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(12, 72, 196) 0%,
    rgb(22, 128, 236) 22%,
    rgb(70, 168, 248) 50%,
    rgb(140, 205, 253) 78%,
    rgba(180, 222, 255, 0) 100%);
  filter: blur(50px);
  opacity: 0.62;
}
body.v3 .ambient-bg,
body.v3 #orbFx,
body.v3 #particles-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.v3 #nav,
body.v3 .ticker,
body.v3 #hero,
body.v3 #product-stage,
body.v3 .section-jumpnav {
  position: relative;
  z-index: 2;
}
body.v3 #nav { z-index: 100; }
body.v3 .ticker { z-index: 99; }
body.v3 section:not(#hero) {
  position: relative;
  z-index: 2;
}

#hero.lg-hero {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: visible !important;
  padding-top: 140px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

#hero.lg-hero .hero-glow {
  display: none !important;
}

#hero.lg-hero .hero-inner.lg-hero-inner {
  position: relative;
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 1 auto;
  min-height: 0;
  width: 100% !important;
  max-width: 1240px !important;
  padding: 0 32px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: visible !important;
}

.lg-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  min-width: 0;
  width: 100%;
  max-width: 1240px;
  padding-bottom: 72px;
}
/* Legibility scrim behind the copy column, replacing per-line text-shadow
   filters — a soft darkened backdrop reads as premium; a drop-shadow on
   every paragraph reads as cheap. */
.lg-copy::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120%);
  height: calc(100% + 24px);
  background: radial-gradient(ellipse 60% 70% at 50% 30%,
    rgba(4, 14, 40, 0.32) 0%,
    rgba(4, 14, 40, 0.16) 45%,
    rgba(4, 14, 40, 0) 75%);
  pointer-events: none;
  z-index: -1;
}

#hero.lg-hero .lg-copy .hero-h,
#hero.lg-hero .lg-copy .hero-h-premium,
#hero.lg-hero .lg-copy .hero-p,
#hero.lg-hero .lg-copy .hero-positioning-p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: visible !important;
}

#hero.lg-hero .lg-copy .hero-h-premium {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: clamp(40px, 5.6vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 20px !important;
  max-width: 1100px !important;
  width: auto !important;
}
#hero.lg-hero .lg-copy .hero-line {
  display: block;
  white-space: nowrap;
}
#hero.lg-hero .hero-grad-span {
  display: block;
  margin-top: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  padding-right: 0.06em !important;
}
#hero.lg-hero .btn-hero-p-premium,
#hero.lg-hero .btn-hero-s {
  border-radius: 999px !important;
  height: 52px;
  padding: 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  text-decoration: none !important;
}
#hero.lg-hero .btn-hero-p-premium {
  background: #00c27a !important;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  box-shadow: 0 10px 28px rgba(8, 30, 70, 0.18) !important;
  border: none !important;
}
#hero.lg-hero .btn-hero-p-premium:hover {
  background: #00d488 !important;
  box-shadow: 0 10px 28px rgba(8, 30, 70, 0.22) !important;
  transform: none !important;
}
#hero.lg-hero .btn-hero-s {
  background: #ffffff !important;
  border: 0 !important;
  color: #0a1628 !important;
  -webkit-text-fill-color: #0a1628 !important;
  box-shadow: 0 10px 28px rgba(8, 30, 70, 0.16) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#hero.lg-hero .btn-hero-s:hover {
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(8, 30, 70, 0.22) !important;
}

#hero.lg-hero .lg-copy .hero-p.hero-positioning-p,
#hero.lg-hero .lg-copy .hero-positioning-p {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  letter-spacing: -0.2px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 20px !important;
  max-width: 600px !important;
  width: auto !important;
}

#hero.lg-hero .lg-copy .hero-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

/* Moved out of the primary hero copy stack (was competing with the
   headline/subhead/CTA for attention above the fold) — now a quiet caption
   under the credential-flow diagram, at the tail end of the hero. */
.hero-boundary-note {
  position: relative;
  z-index: 2;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 28px auto 0;
  max-width: 480px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  -webkit-font-smoothing: antialiased;
}

#product-stage.lg-product {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 8px;
  padding: 0 20px 120px;
  background: transparent !important;
}

.v3-hills {
  position: absolute;
  left: 0;
  right: 0;
  top: 76vh;
  bottom: 0;
  height: auto;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.55) 32%,
    #000 52%,
    #000 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.55) 32%,
    #000 52%,
    #000 100%);
}
.v3-hills::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: url("passid-hero-bg.jpg") center 78% / cover no-repeat;
  transform: scale(var(--v3-hills-zoom, 1));
  transform-origin: 50% 86%;
  filter: saturate(1.18) contrast(1.04);
  will-change: transform;
}
.v3-hills::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 48%, #fff 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .v3-hills::before {
    transform: none !important;
  }
}

.pid-mac {
  --pid-green: #14dea0;
  --accent: var(--pid-green);
  position: relative;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 900px;
  overflow: hidden;
  border-radius: 52px;
  /* Crisp, visible edge line (Supaste uses ~90%-opacity white borders on its
     glass surfaces) — the old border:0 relied purely on inset shadow, which
     washes out and disappears wherever the frame sits over a similarly
     light background (top-left corner, and the whole bottom edge where the
     hero fades to white). */
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.3);
  /* Outer drop-shadow gives the panel real lift/separation from whatever is
     behind it — an inset-only shadow reads as depth only when the backdrop
     is a different color; a real shadow reads as depth always. */
  box-shadow:
    0 50px 100px rgba(6, 20, 56, 0.35),
    0 14px 36px rgba(6, 20, 56, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.3),
    inset 0 -20px 20px rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.pid-mac::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.16) 0%,
    transparent 16%,
    transparent 84%,
    rgba(255, 255, 255, 0.16) 100%);
}
.pid-mac::after {
  content: none;
}

.pid-brand,
.pid-status {
  position: absolute;
  top: 28px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  letter-spacing: -0.04em;
  pointer-events: none;
  /* White text/icon needs to stay legible over the glass frame's lightest
     patch (top corners, where the frame is thinnest and closest to white)
     as well as the dark shelf — a shadow reads on both, unlike a flat color. */
  filter: drop-shadow(0 1px 2px rgba(4, 16, 48, 0.5)) drop-shadow(0 1px 6px rgba(4, 16, 48, 0.35));
}
.pid-brand {
  left: 30px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}
.pid-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: none;
}
.pid-status {
  right: 30px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  gap: 12px;
}
.pid-status svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  flex: 0 0 auto;
  display: block;
}

.pid-shelf {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 13.78%;
  right: 13.78%;
  height: auto;
  padding: 18px 22px 16px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #000 0%, #020304 72%, #05070a 100%);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.25), inset 0 -1px rgba(255,255,255,.04);
  overflow: visible;
}
.pid-shelf::before,
.pid-shelf::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.pid-shelf::before {
  left: -40px;
  background: radial-gradient(circle at 0 40px, transparent 39.5px, #000 40px);
}
.pid-shelf::after {
  right: -40px;
  background: radial-gradient(circle at 40px 40px, transparent 39.5px, #000 40px);
}
.pid-shelf-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pid-search {
  flex: 1;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  color: rgba(255, 255, 255, 0.72);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 15px;
  line-height: 1;
}
.pid-search svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: rgba(255,255,255,.72); }
.pid-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.pid-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.pid-ico svg { width: 16px; height: 16px; display: block; }

.pid-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}
.pid-tabs span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pid-tabs span:hover:not(.is-on):not(.pid-plus) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.pid-tabs span:focus-visible {
  outline: 2px solid #00c27a;
  outline-offset: 2px;
}
.pid-tabs span em {
  font-style: normal;
  opacity: 0.5;
  font-weight: 500;
}
.pid-tabs span.is-on {
  color: #141414;
  background: #f4f4f0;
  border-color: transparent;
  font-weight: 600;
}
.pid-tabs span.is-on em {
  opacity: 1;
  color: #2f62b8;
  background: #e4e8f0;
  padding: 1px 7px;
  border-radius: 999px;
}
.pid-plus {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  justify-content: center;
  font-size: 20px !important;
  font-weight: 300 !important;
}

.pid-panel {
  position: relative;
  z-index: 1;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  height: auto;
  margin-top: 6px;
  padding: 4px 0 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.pid-toolbar {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.pid-wordmark {
  display: flex;
  align-items: center;
  height: 38px;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f7f9fc;
}
.pid-endpoint {
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.045);
  font: 500 12px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.pid-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14dea0;
  box-shadow: 0 0 12px rgba(20, 222, 160, 0.5);
  animation: pidPulse 1.8s ease-in-out infinite;
}
@keyframes pidPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}
.pid-copy {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.055);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.pid-copy:hover { background: rgba(255, 255, 255, 0.14); }
.pid-rtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}
.pid-rtabs button {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pid-rtabs button.is-on {
  color: #101113;
  background: #f5f4f1;
}
.pid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
  gap: 10px;
  height: 142px;
}
.pid-metric {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "label icon"
    "value icon"
    ". ."
    "foot foot";
  column-gap: 8px;
  row-gap: 0;
  align-items: start;
  border-radius: 15px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, #10161d, #0c1117);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  text-align: left;
}
.pid-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%);
}
.pid-micon {
  grid-area: icon;
  position: relative;
  top: auto;
  right: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
  justify-self: end;
}
.pid-micon svg { width: 15px; height: 15px; display: block; }
.pid-mlabel {
  grid-area: label;
  position: relative;
  z-index: 1;
  min-width: 0;
  color: #a2a8b3;
  font: 500 9.5px/1.25 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
}
.pid-mvalue {
  grid-area: value;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: 6px;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
}
.pid-mfoot {
  grid-area: foot;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 8px;
  min-width: 0;
  font-size: 9.5px;
  line-height: 1;
}
.pid-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--accent);
  white-space: nowrap;
  font-style: normal;
  font-weight: 600;
}
.pid-state i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.2 4.7 8.5 9.6 3.4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 8px no-repeat;
}
.pid-state em { font-style: normal; line-height: 1; }
.pid-mfoot .meta {
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  min-width: 0;
  line-height: 1;
}
.pid-code {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  padding: 12px;
  background: #14161c;
  border: 1px solid rgba(255, 255, 255, 0.035);
  font: 600 10px/1.4 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color: #a9afbd;
  text-align: left;
}
.pid-code [data-code] {
  white-space: pre-wrap;
  word-break: break-word;
}
.pid-code-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #7f8795;
  line-height: 1;
}
.pid-code-h .pid-copy {
  height: 24px;
  padding: 0 10px;
  font-size: 10px;
}
.pid-code .code-status { color: #14dea0; }
.pid-code .code-key { color: #6bd3aa; }
.pid-code .code-string { color: #b8c8ff; }
.pid-code .code-muted { color: #7e8796; }
.pid-code .cursor {
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #14dea0;
  animation: pidBlink 0.9s steps(1) infinite;
}
@keyframes pidBlink { 50% { opacity: 0; } }
.pid-grid.is-fresh .pid-metric,
.pid-grid.is-fresh .pid-code {
  animation: pidFresh 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pidFresh {
  from { opacity: 0.4; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.pid-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px auto 0;
  width: min(1280px, calc(100% - 32px));
}
.pid-meta span {
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(25, 39, 73, 0.45);
  border: 1px solid rgba(130, 175, 255, 0.16);
  font: 700 10px/1 "JetBrains Mono", ui-monospace, Menlo, monospace;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pid-net {
  position: absolute;
  z-index: 5;
  left: 0;
  height: 230px;
  opacity: 1;
  pointer-events: none;
}
.pid-arc {
  position: absolute;
  height: 106px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.44));
}
.pid-arc.a { left: 6%; width: 36%; top: 61px; transform: rotate(2deg); }
.pid-arc.b { left: 39%; width: 35%; top: 70px; transform: rotate(-2deg); }
.pid-arc.c { left: 68%; width: 26%; top: 60px; }
.pid-node {
  position: absolute;
  width: 180px;
  transform: translateX(-50%);
  text-align: center;
}
.pid-n-cred { left: 14%; top: 0; }
.pid-n-you { left: 43%; top: 74px; }
.pid-n-inst { left: 67%; top: 8px; }
.pid-n-perm { left: 91%; top: 62px; }

.pid-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(220, 238, 255, 0.88), rgba(90, 150, 235, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    0 8px 22px rgba(18, 89, 220, 0.22),
    0 1px 2px rgba(4, 20, 50, 0.28);
  color: #fff;
  text-align: left;
}
.pid-call svg { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.pid-call strong {
  display: block;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: -0.02em;
}
.pid-call span {
  display: block;
  margin-top: 1px;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}
.pid-node i {
  display: block;
  width: 1px;
  height: 28px;
  margin: 0 auto;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.7);
  position: relative;
}
.pid-node i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 16px #fff;
}

@media (max-width: 1100px) {
  .pid-mac { min-height: 780px; border-radius: 44px; }
  .pid-shelf { left: 12.5%; right: 12.5%; }
  .pid-brand { font-size: 20px; left: 22px; }
  .pid-status { right: 22px; font-size: 15px; }
  .pid-mvalue { font-size: 14px; }
}

/* Phone / small window: keep the glass Mac, scale the whole device like Supaste.
   No nested scroll widget — that read as janky/unprofessional inside a
   vertically-scrolling page. Same exact desktop proportions, just smaller. */
@media (max-width: 900px) {
  #product-stage.lg-product {
    width: 100%;
    margin-top: 4px;
    padding: 0 0 12px !important;
    overflow: hidden;
    height: calc(560px * min(1, (100vw - 28px) / 1000px));
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .pid-mac {
    --pid-fit: min(1, (100vw - 28px) / 1000px);
    width: 1000px !important;
    min-width: 1000px;
    max-width: none !important;
    min-height: 560px !important;
    height: 560px;
    margin: 0 auto !important;
    border-radius: 52px;
    transform: scale(var(--pid-fit)) !important;
    transform-origin: top center !important;
  }
  .pid-brand {
    display: flex !important;
    left: 28px;
    top: 24px;
    font-size: 22px;
  }
  .pid-status {
    display: flex !important;
    right: 28px;
    top: 24px;
  }
  .pid-shelf {
    left: 13.78% !important;
    right: 13.78% !important;
    padding: 18px 22px 16px !important;
    border-radius: 0 0 28px 28px !important;
  }
  .pid-shelf::before,
  .pid-shelf::after { display: block !important; }
  .pid-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr !important;
    overflow: hidden !important;
    height: 142px !important;
  }
  .pid-metric,
  .pid-code { min-width: 0 !important; }
  .pid-net,
  .pid-meta { display: none !important; }
}

@media (max-width: 768px) {
  #hero.lg-hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
    justify-content: flex-start;
  }
  #hero.lg-hero .hero-inner.lg-hero-inner {
    gap: 0 !important;
    padding: 0 22px;
  }
  .lg-copy { max-width: none; }
  #hero.lg-hero .lg-copy .hero-line {
    white-space: normal;
  }
  #hero.lg-hero .lg-copy .hero-h-premium {
    font-size: clamp(52px, 13.5vw, 58px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.96 !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  #hero.lg-hero .hero-grad-span {
    font-size: clamp(50px, 13vw, 56px) !important;
  }
  #hero.lg-hero .lg-copy .hero-positioning-p {
    font-size: 20px !important;
    line-height: 1.45 !important;
    max-width: 330px !important;
    margin-bottom: 24px !important;
  }
  .hero-boundary-note {
    font-size: 12px !important;
    max-width: 30ch !important;
    margin-top: 20px !important;
  }
  #hero.lg-hero .lg-copy .hero-actions {
    flex-direction: row !important;
    width: auto !important;
  }
  #hero.lg-hero .btn-hero-p-premium,
  #hero.lg-hero .btn-hero-s {
    width: auto !important;
    min-width: 0 !important;
    height: 48px;
    padding: 0 20px !important;
  }
}

/* Hanging island, flush with the viewport top edge.
   2px overlap above y=0 so a sky hairline cannot appear on scroll. */
#nav {
  position: fixed !important;
  top: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
}

#nav .nav-inner,
#nav .nav-mobile-menu {
  pointer-events: auto;
}

#nav .nav-inner {
  width: max-content;
  max-width: calc(100% - 40px) !important;
  height: 54px !important;
  margin: 0 auto !important;
  padding: 2px 16px 0 !important;
  background: #070b14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  position: relative;
  top: 0;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  column-gap: 24px !important;
  align-items: center !important;
}
#nav .nav-logo {
  gap: 14px !important;
}
@media (min-width: 1400px) {
  #nav .nav-inner {
    min-width: 1253px !important;
  }
}
#nav .nav-inner::before,
#nav .nav-inner::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 0;
}
#nav .nav-inner::before {
  left: -28px;
  background: radial-gradient(circle at 0 28px, transparent 27.5px, #070b14 28px);
}
#nav .nav-inner::after {
  right: -28px;
  background: radial-gradient(circle at 28px 28px, transparent 27.5px, #070b14 28px);
}

#nav.scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#nav.scrolled .nav-inner {
  background: #070b14 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

body.v3 .ticker {
  display: block !important;
  position: sticky !important;
  top: 56px !important;
  left: 0;
  right: 0;
  z-index: 99;
  height: 40px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(7, 11, 20, 0.97) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.v3 .ticker-track {
  display: flex;
  align-items: center;
  height: 40px;
  animation: tick 28s linear infinite;
  white-space: nowrap;
}
body.v3 .ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  color: #e8edf2 !important;
  -webkit-text-fill-color: #e8edf2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
}
body.v3 .ticker-sep {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
  opacity: 1 !important;
  font-size: 8px;
}

/* Compact hanging island as soon as the full menu cannot fit. */
@media (max-width: 1280px) {
  body.v3 #nav {
    padding: 0 36px !important;
    max-width: none !important;
  }
  body.v3 #nav .nav-inner {
    width: max-content !important;
    max-width: calc(100vw - 72px) !important;
    height: 54px !important;
    margin: 0 auto !important;
    padding: 2px 12px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  body.v3 #nav .nav-links,
  body.v3 #nav .nav-right {
    display: none !important;
  }
  body.v3 #nav .nav-logo {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }
  body.v3 #nav .nav-hamburger,
  body.v3 #nav #navHamburger.nav-hamburger {
    display: flex !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: 2px !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
  }
  body.v3 #nav .nav-hamburger span,
  body.v3 #nav #navHamburger.nav-hamburger span {
    width: 18px !important;
  }
  body.v3 #nav {
    position: fixed !important;
    top: 0 !important;
    z-index: 4000 !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  body.v3 #nav,
  body.v3 #nav.scrolled {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 28px !important;
  }
  body.v3 #nav .nav-inner,
  body.v3 #nav.scrolled .nav-inner {
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 56px) !important;
    height: 52px !important;
    border-radius: 0 0 16px 16px !important;
    background: #070b14 !important;
  }
  body.v3 .ticker {
    display: none !important;
  }
  #hero.lg-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
  .v3-hills {
    top: 88vh;
  }
  #integration-models.idx-models {
    margin-top: 0;
  }
  #integration-models.idx-models::before {
    top: -10vh;
    height: 14vh;
  }
}

/* Page 2 — white sheet slides up over the hills, like Supaste. */
#integration-models.idx-models {
  --v3-sheet: 0;
  position: relative;
  z-index: 6;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-top: -18vh;
  background: #ffffff !important;
  border-top: 0 !important;
  padding: 108px 0 64px !important;
  overflow: visible;
}
#integration-models.idx-models::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24vh;
  height: 28vh;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 42%,
    #ffffff 100%);
  pointer-events: none;
  z-index: 0;
}
#integration-models .si {
  position: relative;
  z-index: 1;
  max-width: none !important;
  width: 100% !important;
  padding: 0 24px !important;
  transform: translate3d(0, calc((1 - var(--v3-sheet, 0)) * 36px), 0);
  opacity: calc(0.42 + var(--v3-sheet, 0) * 0.58);
  will-change: transform, opacity;
}
#integration-models .idx-models-head {
  max-width: 860px !important;
  margin: 0 auto 40px !important;
  text-align: center;
}
#integration-models .sec-h {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-size: clamp(40px, 5.2vw, 72px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}
#integration-models .v3-italic {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
#integration-models .sec-p {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
  max-width: 46ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}
#integration-models .sec-tag,
#integration-models .sec-tag-line {
  color: #00c27a !important;
}
#integration-models .idx-model-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: stretch !important;
}
#integration-models .idx-model-card {
  position: relative;
  min-height: 240px !important;
  padding: 24px 26px !important;
  background: #f5f5f7 !important;
  border: 0 !important;
  border-radius: 30px !important;
  color: inherit !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform 0.25s ease, background 0.25s ease;
}
#integration-models .idx-model-card:hover {
  transform: translateY(-3px);
  background: #efeff2 !important;
  border-color: transparent !important;
}
#integration-models .idx-model-card--soon {
  background: #ececf1 !important;
}
#integration-models .idx-model-kicker {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  width: auto !important;
  height: 26px;
  padding: 0 10px;
  margin-bottom: 16px !important;
  border-radius: 999px;
  background: #ececee !important;
  color: #111 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
#integration-models .idx-model-card--soon .idx-model-kicker {
  background: #111 !important;
  color: #fff !important;
}
#integration-models .idx-model-title {
  color: #111 !important;
  font-size: 22px !important;
}
#integration-models .idx-model-copy {
  color: #4b4b50 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
#integration-models .idx-model-output {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #5c5c62 !important;
}
#integration-models .idx-model-output strong {
  color: #111 !important;
}
#integration-models .idx-model-arrow {
  color: #111 !important;
  opacity: 0.45;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#integration-models .idx-model-card:hover .idx-model-arrow {
  transform: translate(3px, -3px);
  opacity: 1;
}
@media (max-width: 980px) {
  #integration-models .idx-model-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  #integration-models.idx-models {
    padding: 92px 0 40px !important;
    justify-content: flex-start;
  }
  #integration-models .si { padding: 0 16px !important; }
  #integration-models .idx-model-grid {
    grid-template-columns: 1fr !important;
  }
  #integration-models .idx-model-card {
    min-height: 0 !important;
  }
}

/* PassID Connect — full-bleed glass, live interactive demo. */
#passid-connect.pc-section {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 80px 0 64px !important;
}
#passid-connect .pc-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 24px !important;
}
#passid-connect .pc-wrap > div[style*="text-align:center"] {
  margin-bottom: 28px !important;
}
#passid-connect .pc-wrap > div[style*="text-align:center"] h2 {
  max-width: 920px !important;
}

.pc-demo {
  margin-bottom: 36px;
}
.pc-demo-shell {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 28px;
  padding: 12px 12px 0;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.26),
    0 2px 0 rgba(255, 255, 255, 0.55) inset;
}
.pc-demo-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #0b1020;
}
#passid-connect iframe,
#pid-showcase-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px !important;
  height: 900px !important;
  border: 0;
  transform-origin: top left;
  pointer-events: auto !important;
  max-width: none !important;
}
.pc-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 12px 4px;
}
.pc-demo-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #4b4b50;
}
.pc-demo-live span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.pc-demo-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.pc-demo-open:hover { opacity: 0.88; }

.pc-split {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(380px, 1.15fr) !important;
  gap: 28px 32px !important;
  align-items: start !important;
  margin-bottom: 28px !important;
}
.pc-stage > div {
  border-radius: 22px !important;
}
.pc-feats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.pc-feat {
  min-height: 180px;
  padding: 26px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 28px !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.55) inset !important;
}
.pc-feat > div:nth-of-type(2) {
  color: #111 !important;
}
.pc-feat > div:nth-of-type(3) {
  color: #4b4b50 !important;
}

@media (max-width: 980px) {
  .pc-split,
  .pc-feats {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  #passid-connect .pc-wrap { padding: 0 16px !important; }
  .pc-demo-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Rest of homepage: one dark canvas, glass to the edges ── */
body.v3 section.sec,
body.v3 .idx-sec-off,
body.v3 .idx-sec-none,
body.v3 .idx-sec-black,
body.v3 #tech,
body.v3 .trust-bar,
body.v3 .trusted-bar,
body.v3 footer {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.v3 section:not(#hero) .si,
body.v3 section .inner,
body.v3 .trust-inner,
body.v3 .story-wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.v3 .idx-hdr-sm,
body.v3 .idx-hdr-md,
body.v3 .idx-hdr-lx,
body.v3 .idx-test-hdr,
body.v3 .idx-cmp-grid,
body.v3 .clarity-grid {
  max-width: none !important;
}

body.v3 .four-col,
body.v3 .three-col,
body.v3 .corr-grid,
body.v3 .serve-grid,
body.v3 .idx-cmp-grid,
body.v3 .clarity-grid,
body.v3 .prob-grid,
body.v3 .idx-wf-4col {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  gap: 16px !important;
}

body.v3 .four-col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.v3 .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.v3 #testimonials .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.v3 .idx-cmp-grid { grid-template-columns: 1fr 1fr !important; }
body.v3 .clarity-grid { grid-template-columns: 1fr 1fr !important; }
body.v3 .serve-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.v3 .corr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
body.v3 .idx-wf-4col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

body.v3 .wf-step,
body.v3 .clarity-card,
body.v3 .metric-item,
body.v3 .prob-card,
body.v3 .serve-card,
body.v3 .corr-tile,
body.v3 .comp-card,
body.v3 .test-card,
body.v3 .tech-feat,
body.v3 .arch-node,
body.v3 .idx-cmp-bad,
body.v3 .idx-cmp-good,
body.v3 .trusted-logo-pill,
body.v3 .trust-bar span,
body.v3 .solutions-mini-chip,
body.v3 .pilot-step,
body.v3 .story-card,
body.v3 .story-ladder-item,
body.v3 .zk-card.idx-zk-left {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 28px !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.55) inset !important;
  color: #111 !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

body.v3 .wf-title,
body.v3 .clarity-head,
body.v3 .clarity-item,
body.v3 .metric-n,
body.v3 .metric-l,
body.v3 .metric-l strong,
body.v3 .prob-title,
body.v3 .serve-card-title,
body.v3 .serve-card-type,
body.v3 .comp-t,
body.v3 .test-q,
body.v3 .tft,
body.v3 .arch-n-name,
body.v3 .idx-cmp-title,
body.v3 .idx-feat-t,
body.v3 .trusted-name,
body.v3 .pilot-step-t,
body.v3 .story-card h3,
body.v3 .story-ladder-item strong,
body.v3 .zk-card.idx-zk-left h3 {
  color: #111 !important;
}

body.v3 .wf-body,
body.v3 .metric-l,
body.v3 .prob-body,
body.v3 .serve-card-copy,
body.v3 .comp-b,
body.v3 .comp-item,
body.v3 .test-card,
body.v3 .tfb,
body.v3 .arch-n-sub,
body.v3 .idx-cmp-txt,
body.v3 .idx-feat-b,
body.v3 .pilot-step-s,
body.v3 .story-card p,
body.v3 .story-ladder-item span,
body.v3 .zk-card.idx-zk-left p {
  color: #4b4b50 !important;
}

body.v3 .code-block,
body.v3 .graph-frame,
body.v3 .zk-visual,
body.v3 .pilot-card {
  border-radius: 28px !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden;
}
body.v3 .code-block,
body.v3 .code-block *,
body.v3 .code-body,
body.v3 .code-body * {
  text-align: left !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}
body.v3 .code-body {
  color: #d7e0ea !important;
  -webkit-text-fill-color: #d7e0ea !important;
  line-height: 1.8 !important;
  font-size: 12.5px !important;
}
body.v3 .c-k,
body.v3 .idx-code-arg { color: #7dd3c0 !important; -webkit-text-fill-color: #7dd3c0 !important; }
body.v3 .c-s { color: #00c27a !important; -webkit-text-fill-color: #00c27a !important; }
body.v3 .c-b,
body.v3 .idx-code-var { color: #7eb8ff !important; -webkit-text-fill-color: #7eb8ff !important; }
body.v3 .idx-code-dim1,
body.v3 .code-body [style*="color:#475569"],
body.v3 .code-body [style*="color:#64748b"] {
  color: #9aa8bc !important;
  -webkit-text-fill-color: #9aa8bc !important;
}

body.v3 .serve-card-btn-primary {
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px !important;
}
body.v3 .serve-card-btn-secondary {
  background: #ececee !important;
  color: #111 !important;
  border-radius: 999px !important;
}

body.v3 #dev > .si > div[style*="padding:28px"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
}
body.v3 #dev h3 { color: #111 !important; }
body.v3 #dev .dev-step-t { color: #111 !important; }
body.v3 #dev .dev-step-b { color: #4b4b50 !important; }

@media (max-width: 1100px) {
  body.v3 .four-col,
  body.v3 .idx-wf-4col,
  body.v3 .serve-grid { grid-template-columns: 1fr 1fr !important; }
  body.v3 .corr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  body.v3 section:not(#hero) .si,
  body.v3 section .inner,
  body.v3 .trust-inner { padding-left: 16px !important; padding-right: 16px !important; }
  body.v3 .four-col,
  body.v3 .three-col,
  body.v3 .idx-wf-4col,
  body.v3 .serve-grid,
  body.v3 .idx-cmp-grid,
  body.v3 .clarity-grid,
  body.v3 .corr-grid,
  body.v3 #testimonials .three-col { grid-template-columns: 1fr !important; }
}

/* Corridors — 5×2 glass tiles with room for flags and codes. */
#corridors .corr-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#corridors .corr-tile {
  min-height: 118px !important;
  padding: 20px 10px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
#corridors .corr-flags {
  font-size: 26px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
#corridors .corr-arr {
  display: inline-block;
  margin: 0 6px;
  color: #111 !important;
  font-size: 16px;
}
#corridors .corr-code {
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Technology — list on the left, pipeline on the right. Not jammed cards. */
#tech .two-col {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, 0.95fr) !important;
  align-items: start !important;
  gap: 36px 40px !important;
  overflow: visible !important;
}
#tech .rev-l,
#tech .rev-l .sec-h,
#tech .rev-l .sec-p,
#tech .tech-plaid-note,
#tech .tft,
#tech .tfb {
  text-align: left !important;
  margin-left: 0 !important;
  overflow: visible !important;
}
#tech .tech-feat {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
#tech .tech-feat:last-child { border-bottom: 0 !important; }
#tech .tf-num {
  color: #f8fafc !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
#tech .tft { color: #f8fafc !important; }
#tech .tfb { color: #94a3b8 !important; }
#tech .arch-stack { gap: 4px !important; }
#tech .arch-node {
  min-height: 72px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#tech .arch-n-name { color: #111 !important; }
#tech .arch-n-sub {
  color: #4b4b50 !important;
  white-space: normal !important;
  overflow: visible !important;
}
#tech .arch-badge {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
#tech .arch-conn-lbl { color: #94a3b8 !important; }

@media (max-width: 1100px) {
  #corridors .corr-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  #tech .two-col { grid-template-columns: 1fr !important; }
  #corridors .corr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Site-wide type + one green — Mercury/Wise, not rainbow AI. */
body.v3,
body.v3 .sec-p,
body.v3 .nav-link,
body.v3 .btn-hero-p,
body.v3 .btn-hero-s,
body.v3 .btn-ghost,
body.v3 .btn-black,
body.v3 .pilot-p {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
}
body.v3 .sec-h,
body.v3 .pilot-h,
body.v3 .sub-h,
body.v3 .nav-logo-text {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #f4f1ea !important;
}
body.v3 .idx-model-title,
body.v3 .wf-title,
body.v3 .serve-card-title,
body.v3 .clarity-head,
body.v3 .comp-t {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: #111 !important;
}
body.v3 .sec-tag,
body.v3 .glow-pill,
body.v3 .center-tag,
body.v3 .sec-tag-line {
  color: #00c27a !important;
  border-color: rgba(0, 194, 122, 0.28) !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
}
body.v3 .sec-tag-line {
  background: #00c27a !important;
}
body.v3 .btn-green,
body.v3 .nav-right .btn-black,
body.v3 .btn-signup {
  background: #00c27a !important;
  color: #04150e !important;
  box-shadow: none !important;
}
body.v3 .sjn-link.is-active {
  background: #00c27a !important;
  color: #04150e !important;
}
#passid-connect h2,
#passid-connect h3 {
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-weight: 600 !important;
  color: #f4f1ea !important;
}
#passid-connect code,
#passid-connect [style*="color:#60a5fa"],
#passid-connect [style*="color:#7dd3fc"] {
  color: #00c27a !important;
}
#passid-connect .pc-copy a[href="/institution"] {
  background: #00c27a !important;
  color: #04150e !important;
  box-shadow: none !important;
}
#positioning .clarity-card:first-child .clarity-head {
  color: #047857 !important;
}

/* Verifier walkthrough + market story — every listed word readable. */
#zk-animation.dark-immersive,
#global-story.dark-immersive {
  overflow: visible !important;
}

#zk-animation .sec-h,
#zk-animation .glow-pill,
#global-story .glow-pill {
  opacity: 1 !important;
  visibility: visible !important;
}
#zk-animation .sec-h { color: #f4f1ea !important; }
#zk-animation .sec-p { color: #c4c9ce !important; }

#zk-animation .zk-grid {
  align-items: stretch !important;
  overflow: visible !important;
}

#zk-animation .idx-zk-left,
#zk-animation .zk-card.idx-zk-left {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #111 !important;
  overflow: visible !important;
}
#zk-animation .idx-zk-left h3,
#zk-animation .zk-card.idx-zk-left h3 {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#zk-animation .idx-zk-left p,
#zk-animation .zk-card.idx-zk-left p {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}
#zk-animation .zk-actions {
  pointer-events: auto !important;
}
#zk-animation .btn-aurora,
#zk-animation #zkRunBtn {
  background: #00c27a !important;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
#zk-animation .btn-ghost-aurora,
#zk-animation #zkResetBtn {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  background: #fff !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
#zk-animation .zk-log {
  background: #f4f1ea !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
#zk-animation .zk-log-line {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
#zk-animation .zk-log-k {
  color: #52525b !important;
  -webkit-text-fill-color: #52525b !important;
  opacity: 1 !important;
}
#zk-animation .zk-log-v {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-align: right !important;
  white-space: normal !important;
  overflow: visible !important;
  opacity: 1 !important;
}

#zk-animation .zk-visual,
body.v3 .zk-visual {
  background: #0b1020 !important;
  overflow: visible !important;
  min-height: 560px !important;
  padding: 18px !important;
}
#zk-animation .zk-chip {
  z-index: 4 !important;
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  background: rgba(8, 12, 24, 0.94) !important;
  border: 1px solid rgba(244, 241, 234, 0.22) !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#zk-animation .zk-chip .dot { opacity: 1 !important; }
#zk-animation .zk-center {
  z-index: 3 !important;
}
#zk-animation .zk-label,
#zk-animation .zk-main-detail {
  color: #d4dadf !important;
  -webkit-text-fill-color: #d4dadf !important;
  opacity: 1 !important;
}
#zk-animation .zk-main-state {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  opacity: 1 !important;
}

#global-story .story-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
#global-story .story-panel,
#global-story .story-card .story-panel,
#global-story .story-card:not(.inview) .story-panel {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 28px !important;
  color: #111 !important;
}
#global-story .story-panel h3,
#global-story .story-card h3,
#global-story .story-metric strong,
#global-story .story-step {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#global-story .story-step {
  background: #ececee !important;
  border-color: transparent !important;
}
#global-story .story-panel p,
#global-story .story-metric span {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}
#global-story .story-metric {
  background: #f4f1ea !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#global-story .story-sticky h2 {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  opacity: 1 !important;
}
#global-story .story-sticky p {
  color: #c4c9ce !important;
  -webkit-text-fill-color: #c4c9ce !important;
  opacity: 1 !important;
}
#global-story .story-visual {
  background: rgba(8, 12, 24, 0.55) !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
}
#global-story .story-visual-top strong {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  opacity: 1 !important;
}
#global-story .story-visual-top span {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
  opacity: 1 !important;
}
#global-story .story-ladder-item {
  background: rgba(255, 255, 255, 0.98) !important;
  overflow: visible !important;
}
#global-story .story-ladder-item strong,
#global-story .story-ladder-num {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#global-story .story-ladder-item span {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
  display: block !important;
}

/* Verify flow + institutions + is/is not — same glass as the hero. */
#verify-flow.sec {
  padding-top: 72px !important;
  padding-bottom: 48px !important;
}
#verify-flow .two-col {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.92fr) minmax(400px, 1.18fr) !important;
  align-items: start !important;
  gap: 36px 40px !important;
}
#verify-flow .rev-l .sec-h {
  max-width: 16ch;
  text-align: left !important;
  margin-left: 0 !important;
}
#verify-flow .rev-l .sec-p,
#verify-flow .rev-l .sec-tag {
  text-align: left !important;
  margin-left: 0 !important;
}
#verify-flow .hero-actions {
  justify-content: flex-start !important;
  margin-bottom: 22px !important;
}
#verify-flow .check-item {
  color: #94a3b8 !important;
}
#verify-flow .code-block {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 28px !important;
  padding: 14px !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.26),
    0 2px 0 rgba(255, 255, 255, 0.55) inset !important;
}
#verify-flow .code-head,
#verify-flow .code-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 6px 10px !important;
}
#verify-flow .code-ttl {
  margin-left: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px;
  color: #4b4b50 !important;
}
#verify-flow .code-body,
#verify-flow .code-body * {
  text-align: left !important;
}
#verify-flow .code-body {
  background: #111 !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  min-height: 280px;
}
#verify-flow .dot-red,
#verify-flow .dot-yellow,
#verify-flow .dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
#verify-flow .dot-red { background: #ff5f57; }
#verify-flow .dot-yellow { background: #febc2e; }
#verify-flow .dot-green { background: #28c840; }

#institutions.sec {
  padding-top: 56px !important;
  padding-bottom: 48px !important;
}
#institutions .idx-hdr-sm {
  text-align: center;
  margin: 0 auto 32px !important;
  max-width: 760px !important;
}
#institutions .four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#institutions .metric-item {
  text-align: left !important;
  padding: 26px 24px !important;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
}
#institutions .metric-item > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#institutions .metric-n {
  display: block;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  margin-left: 0 !important;
  text-align: left !important;
  color: #111 !important;
}
#institutions .metric-l {
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #4b4b50 !important;
}

#positioning.sec {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
#positioning .idx-hdr-sm {
  text-align: center;
  margin: 0 auto 32px !important;
}
#positioning .clarity-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
#positioning .clarity-card {
  padding: 28px 28px 18px !important;
  text-align: left !important;
}
#positioning .clarity-head {
  font-size: 20px !important;
  margin-bottom: 8px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#positioning .clarity-item {
  color: #111 !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  padding: 12px 0 !important;
}
#positioning .clarity-card:first-child .clarity-head { color: #047857 !important; }
#positioning .clarity-card-not .clarity-head { color: #b91c1c !important; }
#positioning .clarity-card-not .clarity-item::before {
  content: "✕" !important;
  color: #ef4444 !important;
}

@media (max-width: 980px) {
  #verify-flow .two-col,
  #institutions .four-col,
  #positioning .clarity-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Pilot validation areas — roomy 2×3 glass cards, not jammed list rows. */
#pilot.sec {
  padding-top: 48px !important;
  padding-bottom: 56px !important;
}
#pilot .si {
  max-width: 1280px !important;
  width: 100% !important;
}
#pilot .pilot-card {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.92fr) minmax(420px, 1.18fr) !important;
  align-items: start !important;
  gap: 40px 48px !important;
  padding: 48px 48px 44px !important;
  overflow: visible !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#pilot .pilot-l,
#pilot .pilot-r {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
}
#pilot .pilot-h,
#pilot .pilot-p,
#pilot .idx-pilot-note {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#pilot .pilot-h {
  max-width: 16ch;
  color: #f4f1ea !important;
}
#pilot .pilot-p {
  color: #c4c9ce !important;
  max-width: 46ch;
}
#pilot .idx-pilot-lbl {
  color: #00c27a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
#pilot .pilot-steps {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
}
#pilot .pilot-step {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  justify-content: start !important;
  text-align: left !important;
  padding: 18px 18px 16px !important;
  min-height: 96px !important;
  border-radius: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
#pilot .pilot-step-n {
  grid-row: 1 / span 2 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #ececee !important;
  border: 0 !important;
  color: #111 !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
#pilot .pilot-step-t {
  grid-column: 2 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  margin: 0 !important;
}
#pilot .pilot-step-s {
  grid-column: 2 !important;
  margin-left: 0 !important;
  justify-self: start !important;
  color: #52525b !important;
  -webkit-text-fill-color: #52525b !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
@media (max-width: 980px) {
  #pilot .pilot-card {
    grid-template-columns: 1fr !important;
    padding: 32px 22px !important;
    gap: 28px !important;
  }
  #pilot .pilot-h { max-width: none; }
  #pilot .pilot-steps { grid-template-columns: 1fr !important; }
}

/* Developers → identity graph: every listed word readable. */
#dev.sec,
#compliance.sec,
#testimonials.sec {
  overflow: visible !important;
}

#dev .sec-h,
#compliance .sec-h,
#testimonials .sec-h,
#identity-graph .sec-h {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  opacity: 1 !important;
}
#dev .sec-p,
#compliance .sec-p,
#testimonials .sec-p,
#identity-graph .sec-p {
  color: #c4c9ce !important;
  -webkit-text-fill-color: #c4c9ce !important;
  opacity: 1 !important;
}

#dev .si > div[style*="grid-template-columns:1fr 1fr"] {
  width: 100% !important;
  max-width: none !important;
}
#dev .si div[style*="padding:28px"] {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
  color: #111 !important;
  overflow: visible !important;
}
#dev h3,
#dev .si div[style*="padding:28px"] h3 {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#dev .si div[style*="padding:28px"] p {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}
#dev .si div[style*="letter-spacing:.08em"] {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: transparent !important;
}
#dev .dev-step-n {
  background: #111 !important;
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
}
#dev .dev-step-t {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#dev .dev-step-b {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}
#dev .idx-dev-link {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  background: #ececee !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: none !important;
}
#dev .dev-tag {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(244, 241, 234, 0.18) !important;
  opacity: 1 !important;
}

#dev .code-block {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  padding: 12px !important;
}
#dev .code-hdr,
#dev .code-head {
  background: transparent !important;
  border: 0 !important;
}
#dev .code-ttl {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
}
#dev .code-body {
  background: #0b1020 !important;
  color: #d7e0ea !important;
  -webkit-text-fill-color: #d7e0ea !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
}
#dev .code-body,
#dev .code-body * {
  opacity: 1 !important;
  visibility: visible !important;
  text-align: left !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 12.5px !important;
  line-height: 1.8 !important;
}
#dev .idx-code-var { color: #7eb8ff !important; -webkit-text-fill-color: #7eb8ff !important; }
#dev .idx-code-arg { color: #7dd3c0 !important; -webkit-text-fill-color: #7dd3c0 !important; }
#dev .c-s { color: #00c27a !important; -webkit-text-fill-color: #00c27a !important; }
#dev .c-k { color: #7dd3c0 !important; -webkit-text-fill-color: #7dd3c0 !important; }
#dev .c-b { color: #7eb8ff !important; -webkit-text-fill-color: #7eb8ff !important; }
#dev .code-body [style*="color:#475569"],
#dev .code-body [style*="color:#64748b"] {
  color: #9aa8bc !important;
  -webkit-text-fill-color: #9aa8bc !important;
}
#dev .code-body [style*="color:#22c55e"] {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
}
#dev .code-body [style*="color:#a855f7"] {
  color: #7eb8ff !important;
  -webkit-text-fill-color: #7eb8ff !important;
}
#dev .code-body [style*="color:rgba(255,255,255,.3)"] {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

#compliance .comp-card {
  overflow: visible !important;
  padding: 28px 26px !important;
}
#compliance .comp-t {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#compliance .comp-b,
#compliance .comp-item {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}

#testimonials .three-col {
  max-width: none !important;
  width: 100% !important;
}
#testimonials .test-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  overflow: visible !important;
  color: #3f3f46 !important;
}
#testimonials .test-q,
#testimonials .test-q * {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
#testimonials .test-q code {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  background: #ecfdf5 !important;
}
#testimonials .test-card > div:not(.test-q) {
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  opacity: 1 !important;
}

#pilot .idx-pilot-note {
  color: #c4c9ce !important;
  -webkit-text-fill-color: #c4c9ce !important;
  opacity: 1 !important;
}
#pilot .idx-pilot-link {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
}

#identity-graph.dark-immersive { overflow: visible !important; }
#identity-graph .graph-frame { overflow: visible !important; }
#identity-graph .graph-title,
#identity-graph .graph-caption h4,
#identity-graph .graph-side h5 {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  opacity: 1 !important;
}
#identity-graph .graph-badge {
  color: #c8f5d4 !important;
  -webkit-text-fill-color: #c8f5d4 !important;
  border-color: rgba(0, 194, 122, 0.28) !important;
  background: rgba(0, 194, 122, 0.1) !important;
  opacity: 1 !important;
}
#identity-graph .graph-caption p,
#identity-graph .signal-name {
  color: #c4c9ce !important;
  -webkit-text-fill-color: #c4c9ce !important;
  opacity: 1 !important;
}
#identity-graph .signal-verified {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
}

@media (max-width: 900px) {
  #dev .si > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Modern fintech chrome — one type, one green, no template leftover. */
body.v3 {
  font-feature-settings: "ss01" on, "kern" on;
  -webkit-font-smoothing: antialiased;
}
body.v3 ::selection {
  background: rgba(0, 194, 122, 0.28);
  color: #f4f1ea;
}
body.v3 .scroll-text,
body.v3 #curDot,
body.v3 #curRing,
body.v3 .cur-dot,
body.v3 .cur-ring {
  display: none !important;
}
body.v3 .ambient-bg,
body.v3 #orbFx,
body.v3 #particles-bg,
body.v3 .hero-glow {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.v3 .scroll-progress {
  display: none !important;
}
body.v3 .progress,
body.v3 #progress {
  background: #00c27a !important;
  box-shadow: none !important;
}

body.v3 a:focus-visible,
body.v3 button:focus-visible,
body.v3 .btn-hero-p:focus-visible,
body.v3 .btn-hero-s:focus-visible,
body.v3 .btn-green:focus-visible,
body.v3 .nav-link:focus-visible,
body.v3 .idx-dev-link:focus-visible {
  outline: 2px solid #00c27a !important;
  outline-offset: 3px !important;
}

body.v3 .nav-link {
  transition: color 0.15s ease;
}
body.v3 .nav-link:hover {
  color: #f4f1ea !important;
}
body.v3 .btn-green,
body.v3 .nav-right .btn-black,
body.v3 .btn-signup,
body.v3 .btn-hero-p-premium {
  transition: background 0.15s ease !important;
  transform: none !important;
}
body.v3 .btn-green:hover,
body.v3 .nav-right .btn-black:hover,
body.v3 .btn-signup:hover {
  background: #00d488 !important;
  transform: none !important;
  box-shadow: none !important;
}
body.v3 .foot-col-link:hover,
body.v3 .idx-pilot-link:hover {
  color: #00c27a !important;
}

body.v3 .ticker:hover .ticker-track {
  animation-play-state: paused;
}
body.v3 .zk-log-v,
body.v3 .metric-n,
body.v3 .story-metric strong,
body.v3 .ticker-item {
  font-variant-numeric: tabular-nums;
}

body.v3 .sjn-link {
  background: rgba(7, 11, 20, 0.88) !important;
  color: #c4c9ce !important;
  border: 1px solid rgba(244, 241, 234, 0.12) !important;
}
body.v3 .sjn-link.is-active {
  background: #00c27a !important;
  color: #04150e !important;
  border-color: #00c27a !important;
}

@media (prefers-reduced-motion: reduce) {
  body.v3 .ticker-track {
    animation: none !important;
  }
}

/* Fintech finish — later canvas, pills, no bounce. */
body.v3 {
  background: #050816 !important;
}
body.v3 .nav-right .btn-black,
body.v3 .btn-signup,
body.v3 .btn-green {
  border-radius: 999px !important;
}
body.v3 footer {
  background: #050816 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.v3 .idx-model-card,
body.v3 .comp-card,
body.v3 .test-card,
body.v3 .prob-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.25s ease, background 0.25s ease;
}

/* After the landscape: white canvas like Supaste, not navy. */
body.v3 #integration-models,
body.v3 #integration-models ~ section,
body.v3 footer {
  background: #ffffff !important;
  border-color: rgba(17, 17, 17, 0.08) !important;
  color: #111111;
}

body.v3 #integration-models ~ section .sec-h,
body.v3 #integration-models ~ section .pilot-h,
body.v3 #integration-models ~ section .sub-h,
body.v3 #passid-connect h2,
body.v3 #passid-connect h3,
body.v3 #tech .rev-l .sec-h,
body.v3 #tech .tft,
body.v3 #tech .tf-num,
body.v3 #zk-animation .sec-h,
body.v3 #global-story .sec-h {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

body.v3 #integration-models ~ section .sec-p,
body.v3 #tech .tfb,
body.v3 #tech .arch-conn-lbl,
body.v3 #zk-animation .sec-p,
body.v3 #passid-connect .pc-wrap > div[style*="text-align:center"] p,
body.v3 footer .foot-desc,
body.v3 footer .foot-col-link,
body.v3 footer .idx-foot-tagline {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
}

body.v3 #tech .tech-feat {
  border-bottom-color: rgba(17, 17, 17, 0.08) !important;
}

body.v3 .wf-step,
body.v3 .clarity-card,
body.v3 .metric-item,
body.v3 .prob-card,
body.v3 .serve-card,
body.v3 .corr-tile,
body.v3 .comp-card,
body.v3 .test-card,
body.v3 .tech-feat,
body.v3 .idx-cmp-bad,
body.v3 .idx-cmp-good,
body.v3 .trusted-logo-pill,
body.v3 .solutions-mini-chip,
body.v3 .pilot-step,
body.v3 .story-card,
body.v3 .story-ladder-item,
body.v3 .zk-card.idx-zk-left,
body.v3 .pc-feat,
body.v3 .pc-demo-shell,
body.v3 #dev > .si > div[style*="padding:28px"] {
  background: #f5f5f7 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.v3 .code-block,
body.v3 .graph-frame,
body.v3 .zk-visual,
body.v3 .pilot-card,
body.v3 .pc-demo-frame {
  background: #0b1020 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
}

body.v3 footer {
  color: #111111 !important;
}
body.v3 footer .foot-col-t,
body.v3 footer .foot-logo-text {
  color: #111111 !important;
}

body.v3 .check-item {
  color: #3f3f46 !important;
}

body.v3 #integration-models ~ section .btn-hero-p {
  background: #00c27a !important;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.v3 #integration-models ~ section .btn-hero-s,
body.v3 #integration-models ~ section .btn-ghost {
  background: #f5f5f7 !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.v3 #integration-models ~ section .btn-hero-s:hover,
body.v3 #integration-models ~ section .btn-ghost:hover {
  background: #ececf1 !important;
}

body.v3 .idx-tag-blue,
body.v3 .idx-tag-purple,
body.v3 .idx-tag-green,
body.v3 .idx-tag-white,
body.v3 .wf-tag {
  background: #ececf1 !important;
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
  border-color: transparent !important;
}

#integration-models .idx-model-kicker {
  background: #ffffff !important;
}

#passid-connect .pc-wrap > div[style*="text-align:center"] > div {
  background: rgba(0, 194, 122, 0.1) !important;
  border-color: rgba(0, 194, 122, 0.28) !important;
  color: #047857 !important;
}

body.v3 section[id] {
  scroll-margin-top: 72px;
}

@keyframes v3Rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
body.v3 #hero .lg-copy > * {
  animation: v3Rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.v3 #hero .lg-copy > *:nth-child(1) { animation-delay: 0.05s; }
body.v3 #hero .lg-copy > *:nth-child(2) { animation-delay: 0.14s; }
body.v3 #hero .lg-copy > *:nth-child(3) { animation-delay: 0.24s; }
body.v3 #hero .lg-copy > *:nth-child(4) { animation-delay: 0.34s; }

body.v3 .pid-copy {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body.v3 #hero .btn-hero-p-premium svg,
body.v3 #integration-models ~ section .btn-hero-p svg {
  transition: transform 0.22s ease;
}
body.v3 #hero .btn-hero-p-premium:hover svg,
body.v3 #integration-models ~ section .btn-hero-p:hover svg {
  transform: translateX(3px);
}

body.v3 .serve-card,
body.v3 .corr-tile,
body.v3 .test-card,
body.v3 .clarity-card,
body.v3 .comp-card,
body.v3 .prob-card,
body.v3 .pilot-step,
body.v3 .pc-feat,
body.v3 .metric-item,
body.v3 .wf-step,
body.v3 .story-card {
  transition: transform 0.25s ease, background 0.25s ease !important;
}
body.v3 .serve-card:hover,
body.v3 .corr-tile:hover,
body.v3 .test-card:hover,
body.v3 .clarity-card:hover,
body.v3 .comp-card:hover,
body.v3 .prob-card:hover,
body.v3 .pilot-step:hover,
body.v3 .pc-feat:hover,
body.v3 .metric-item:hover,
body.v3 .wf-step:hover,
body.v3 .story-card:hover {
  transform: translateY(-4px);
  background: #efeff2 !important;
}

body.v3 #passid-connect .pc-copy a[href="/integration-guide"],
body.v3 #passid-connect .pc-copy a[href="/institution"]:not([style*="background:#00c27a"]):nth-of-type(n) {
  color: #111111 !important;
}
body.v3 #passid-connect .pc-copy a[href="/integration-guide"],
body.v3 #passid-connect .pc-copy a[style*="border:1px solid rgba(255,255,255"] {
  background: #f5f5f7 !important;
  border: 0 !important;
  color: #111111 !important;
}
body.v3 #passid-connect .pc-copy a[href="/institution"] {
  background: #00c27a !important;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* Sky-blue wash before the footer — sits in empty space, not over copy. */
body.v3 .v3-end-glow {
  position: relative;
  z-index: 5;
  height: 36vh;
  margin-top: 8px;
  margin-bottom: -48px;
  overflow: hidden;
  pointer-events: none;
  background: #ffffff;
  display: block;
}
body.v3 .v3-end-glow::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 0;
  bottom: -30%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(186, 224, 255) 42%,
    rgb(56, 156, 246) 78%,
    rgb(18, 92, 214) 100%);
  filter: blur(46px);
}

/* Later canvas stays white; footer inverts like Supaste. */
html:has(body.v3),
body.v3 {
  background: #ffffff !important;
}

body.v3 #integration-models ~ section .idx-head-w,
body.v3 #integration-models ~ section .sec-h {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

body.v3 footer {
  position: relative;
  z-index: 6;
  margin-top: 0 !important;
  padding: 88px 0 40px !important;
  background: #070b14 !important;
  color: #f4f1ea !important;
  border: 0 !important;
  border-radius: 48px 48px 0 0;
  overflow: visible !important;
}
body.v3 footer .foot-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}
body.v3 footer .foot-logo-text,
body.v3 footer .foot-col-t {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.v3 footer .foot-col-t {
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 16px !important;
}
body.v3 footer .foot-desc,
body.v3 footer .idx-foot-tagline,
body.v3 footer .foot-copy,
body.v3 footer .foot-legal a {
  color: rgba(244, 241, 234, 0.55) !important;
  -webkit-text-fill-color: rgba(244, 241, 234, 0.55) !important;
}
body.v3 footer .foot-col-link {
  color: rgba(244, 241, 234, 0.78) !important;
  -webkit-text-fill-color: rgba(244, 241, 234, 0.78) !important;
}
body.v3 footer .foot-col-link:hover,
body.v3 footer .foot-legal a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.v3 footer .foot-bottom {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  margin-top: 28px;
}
body.v3 footer .foot-s-link {
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: rgba(244, 241, 234, 0.7) !important;
}
body.v3 footer .foot-s-link:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
body.v3 .v3-foot-display {
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  max-width: 16ch;
  margin: 18px 0 12px;
}
body.v3 .v3-foot-display em {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
}
body.v3 .v3-foot-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  margin: 8px 0 18px;
  border-radius: 999px;
  background: #00c27a;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.v3 .v3-foot-cta:hover {
  background: #00d488;
}
body.v3 footer .idx-foot-tagline {
  text-align: left;
  padding: 8px 0 0;
}

@media (max-width: 768px) {
  body.v3 footer {
    border-radius: 28px 28px 0 0;
    padding: 56px 0 32px !important;
    margin-top: 40px;
  }
  body.v3 footer .foot-inner {
    padding: 0 22px !important;
  }
  body.v3 .v3-foot-display {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #integration-models.idx-models {
    --v3-sheet: 1 !important;
    margin-top: 0;
  }
  #integration-models .si {
    transform: none !important;
    opacity: 1 !important;
  }
  body.v3 #hero .lg-copy > *,
  .pid-grid.is-fresh .pid-metric,
  .pid-grid.is-fresh .pid-code {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* One color + container system for every page after the landscape. */
body.v3 #integration-models ~ section h2,
body.v3 #integration-models ~ section h3,
body.v3 #integration-models ~ section .sec-h,
body.v3 #integration-models ~ section .pilot-h,
body.v3 #global-story h2,
body.v3 #global-story h3,
body.v3 #tech .sec-p,
body.v3 #tech .tfb,
body.v3 #pilot .sec-p,
body.v3 #pilot .pilot-p {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
body.v3 #integration-models ~ section .sec-p,
body.v3 #integration-models ~ section p,
body.v3 #global-story .story-sticky > p,
body.v3 #global-story .story-card p,
body.v3 #tech .tfb,
body.v3 #pilot .pilot-p,
body.v3 #passid-connect .pc-copy p,
body.v3 #passid-connect .pc-copy span[style*="color:#94a3b8"],
body.v3 #verify-flow .check-item {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
}
body.v3 #tech .sec-p {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
}
body.v3 #passid-connect .pc-copy h3 {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
body.v3 #passid-connect .pc-copy code,
body.v3 #dev code {
  background: #f5f5f7 !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  border-radius: 6px !important;
}

body.v3 #integration-models ~ section .idx-model-card,
body.v3 #integration-models ~ section .wf-step,
body.v3 #integration-models ~ section .clarity-card,
body.v3 #integration-models ~ section .metric-item,
body.v3 #integration-models ~ section .prob-card,
body.v3 #integration-models ~ section .serve-card,
body.v3 #integration-models ~ section .corr-tile,
body.v3 #integration-models ~ section .comp-card,
body.v3 #integration-models ~ section .test-card,
body.v3 #integration-models ~ section .pc-feat,
body.v3 #integration-models ~ section .pilot-step,
body.v3 #integration-models ~ section .story-card,
body.v3 #global-story .story-ladder-item,
body.v3 #global-story .story-card {
  background: #f5f5f7 !important;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
}

body.v3 #verify-flow .code-block,
body.v3 #dev .code-block,
body.v3 #integration-models ~ section .graph-frame,
body.v3 #integration-models ~ section .zk-visual,
body.v3 #integration-models ~ section .pilot-card,
body.v3 #passid-connect .pc-demo-frame {
  background: #0b1020 !important;
  border-radius: 30px !important;
  color: #e8edf2 !important;
}

body.v3 #passid-connect .pc-copy span[style*="JetBrains"],
body.v3 .zkp-pill,
body.v3 .idx-tag-blue,
body.v3 .idx-tag-purple,
body.v3 .idx-tag-green,
body.v3 .idx-tag-white,
body.v3 .wf-tag,
body.v3 .arch-badge,
body.v3 .solutions-mini-chip {
  background: #ececf1 !important;
  border: 0 !important;
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
}

body.v3 #tech .tech-feat {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.v3 #pilot .pilot-card .pilot-h,
body.v3 #pilot .pilot-card h2,
body.v3 #pilot .pilot-card .sec-h {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.v3 #pilot .pilot-card .pilot-p,
body.v3 #pilot .pilot-card p,
body.v3 #pilot .pilot-card .sec-p {
  color: rgba(244, 241, 234, 0.72) !important;
  -webkit-text-fill-color: rgba(244, 241, 234, 0.72) !important;
}

body.v3 #navMobileMenu,
body.v3 .nav-mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: min(392px, 86vw) !important;
  max-width: min(392px, 86vw) !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 10020 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #070b14 !important;
  color: #f4f1ea !important;
  border: 0 !important;
  border-radius: 28px 0 0 28px !important;
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.42) !important;
  transform: translateX(110%) !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
  pointer-events: none !important;
  visibility: hidden;
}
body.v3 #navMobileMenu.open,
body.v3 .nav-mobile-menu.open {
  transform: translateX(0) !important;
  pointer-events: auto !important;
  visibility: visible;
}
body.v3 .nav-mobile-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10010 !important;
  background: rgba(7, 11, 20, 0.52) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.32s ease;
}
body.v3 .nav-mobile-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.v3 .nav-mobile-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 20px 16px 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  background: #070b14 !important;
  z-index: 2 !important;
}
body.v3 .nav-mobile-header .nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
body.v3 .nav-mobile-header .nav-logo-text {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}
body.v3 .nav-mobile-close {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f1ea !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
body.v3 .nav-mobile-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
body.v3 .nav-mobile-links {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 16px 32px !important;
  gap: 2px !important;
}
body.v3 .nav-mobile-label {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  letter-spacing: 0.16em !important;
  margin: 18px 8px 6px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: 0 !important;
}
body.v3 .nav-mobile-link {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  font-family: "IBM Plex Sans", Inter, sans-serif !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}
body.v3 .nav-mobile-link.is-active {
  color: #00c27a !important;
  -webkit-text-fill-color: #00c27a !important;
  background: rgba(0, 194, 122, 0.1) !important;
}
body.v3 .nav-mobile-link:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
body.v3 .nav-mobile-cta {
  background: #00c27a !important;
  color: #04150e !important;
  -webkit-text-fill-color: #04150e !important;
  border-radius: 999px !important;
  margin: 18px 4px 8px !important;
  padding: 15px 18px !important;
  font-weight: 700 !important;
}

/* '02 One financial history. Multiple proofs.' homepage section (2026-08-20 IA restructure) */
#financial-history .fh-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px}
#financial-history .fh-card{padding:24px 20px}
@media(max-width:980px){#financial-history .fh-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){#financial-history .fh-grid{grid-template-columns:repeat(2,1fr)}}

/* Fix: dark-text-on-light-section coverage for sections reordered before
   #integration-models in the 2026-08-20 IA restructure (the "everything after
   #integration-models" sibling-combinator light-theme rules above no longer
   reach these three now that they sit earlier in the DOM). */
body.v3 #financial-history .sec-h,
body.v3 #architecture .sec-h,
body.v3 #institutions .sec-h {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
body.v3 #financial-history .sec-p,
body.v3 #architecture .sec-p,
body.v3 #institutions .sec-p {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
}
body.v3 #financial-history,
body.v3 #architecture,
body.v3 #institutions {
  background: #ffffff !important;
  color: #111111;
}
body.v3 #financial-history .prod-signal-title {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
body.v3 #financial-history .prod-signal-copy {
  color: #5c5c62 !important;
  -webkit-text-fill-color: #5c5c62 !important;
}
body.v3 #institutions .four-col {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.v3 #institutions .metric-item {
  height: auto !important;
  min-height: 0 !important;
}
/* #integration-models used to sit directly after #hero and slid up -18vh
   with min-height:100vh + z-index:6 to create a "sheet slides over the
   hero" parallax overlap. Now that #financial-history / #architecture /
   #institutions sit between hero and integration-models, that overlap
   painted over them instead. Neutralize it (mobile already disabled the
   same effect via margin-top:0, so this just matches that everywhere). */
#integration-models.idx-models {
  margin-top: 0 !important;
  min-height: 0 !important;
  z-index: 2 !important;
}
#integration-models.idx-models::before {
  content: none !important;
}