/* A kinetic visual language for the chapters beyond the overview. */
.fx-phase-0 {
  --delay: 0s;
}
.fx-phase-1 {
  --delay: -1s;
}
.fx-phase-2 {
  --delay: -2s;
}
.fx-phase-3 {
  --delay: -3s;
}
.fx-phase-4 {
  --delay: -4s;
}
.fx-phase-5 {
  --delay: -5s;
}
.fx-phase-6 {
  --delay: -6s;
}
.fx-phase-7 {
  --delay: -7s;
}
.page-inner main {
  animation: none;
}
.inner-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 1050px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(#000 65%, transparent);
}
.atmosphere-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#adceff08 1px, transparent 1px),
    linear-gradient(90deg, #adceff08 1px, transparent 1px);
  background-size: 85px 85px;
  mask-image: radial-gradient(ellipse at 80% 28%, #000, transparent 65%);
  transform: perspective(750px) rotateX(28deg) rotateZ(-16deg) scale(1.3);
}
.inner-atmosphere > i {
  position: absolute;
  right: -5%;
  top: 8%;
  width: 600px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #41629b25, transparent 68%);
  animation: inner-drift 16s ease-in-out infinite alternate;
}
.inner-atmosphere > i:nth-of-type(2) {
  right: 35%;
  top: -15%;
  width: 460px;
  background: radial-gradient(ellipse, #a4906c16, transparent 65%);
  animation-delay: -7s;
}
.atmosphere-horizon {
  position: absolute;
  left: 15%;
  top: 710px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a4c6f438, transparent);
  transform: rotate(-20deg);
  box-shadow: 0 0 40px 2px #a4c6f40d;
  animation: horizon-breathe 9s ease-in-out infinite;
}
.page-inner .inner-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding-top: 30px;
  padding-bottom: 60px;
  min-height: 470px;
}
.inner-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.inner-hero-layout h1 {
  font-size: clamp(43px, 4.7vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.055em;
}
.inner-hero-layout .lead {
  font-size: 15px;
  max-width: 620px;
  line-height: 1.9;
}
.inner-hero-copy h1 em {
  color: #b2c6e2;
}
.inner-art {
  position: relative;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  perspective: 900px;
}
.inner-art:before {
  content: '';
  position: absolute;
  inset: 8% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #5077ac16, transparent 66%);
  pointer-events: none;
}
.inner-art > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotateX(var(--art-rx, 0deg)) rotateY(var(--art-ry, 0deg));
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 10px 40px #739dde0a);
}
.art-grid {
  position: absolute;
  inset: 10% 3%;
  background-image: radial-gradient(#b8ceef32 0.65px, transparent 0.8px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.art-top,
.art-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  font: 7px var(--mono);
  letter-spacing: 0.1em;
  color: #879ab5;
  margin-inline: 7%;
  gap: 10px;
}
.art-top {
  padding: 14px 0;
  border-bottom: 1px solid #a3c5ff1c;
}
.art-bottom {
  padding: 13px 0;
  border-top: 1px solid #a3c5ff1c;
  color: #627792;
  font-size: 6px;
}
.art-signal {
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: #c1d9f8;
  box-shadow: 0 0 10px #b9d6ff99;
  animation: node-breathe 4s ease-in-out infinite;
}
.art-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: #a4c6f44a;
  border-style: solid;
  z-index: 2;
}
.corner-a {
  left: 2%;
  top: 15%;
  border-width: 1px 0 0 1px;
}
.corner-b {
  right: 2%;
  bottom: 15%;
  border-width: 0 1px 1px 0;
}
.fx-wire {
  fill: none;
  stroke: #819ec23b;
  stroke-width: 1;
}
.fx-packet {
  fill: none;
  stroke: #c8e2ff;
  stroke-width: 1.5;
  stroke-dasharray: 3 97;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #a5caff);
  animation: packet-travel 6s linear infinite;
  animation-delay: var(--delay, 0s);
}
.fx-label {
  font: 8px var(--mono);
  letter-spacing: 1px;
  fill: #a6bad5;
  text-anchor: middle;
  stroke: none;
}
.fx-title {
  font-size: 13px;
  letter-spacing: 2px;
  fill: #d6e6ff;
}
.fx-subtle {
  fill: #6e85a4;
  font-size: 8px;
}
.fx-micro {
  font-size: 5.5px;
  letter-spacing: 0.7px;
  fill: #899db8;
}
.fx-plane {
  fill: #80a9e507;
  stroke: #85abe627;
  stroke-width: 1;
}
.fx-layer {
  fill: none;
  stroke: #9bbde42b;
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
.fx-glass {
  fill: #8fbaf215;
  stroke: #b5d6ff85;
  stroke-width: 1.1;
}
.fx-face {
  fill: #6a95d014;
  stroke: #a0c6fa59;
  stroke-width: 1;
}
.fx-face.alt {
  fill: #aacdff09;
}
.fx-bright {
  fill: none;
  stroke: #cfe4ff;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px #98bfff99);
}
.fx-node {
  fill: #0d1420;
  stroke: #7e9fc65c;
  stroke-width: 1;
  transition:
    fill 0.5s,
    stroke 0.5s;
}
.fx-star {
  fill: #c2d9f6;
  filter: drop-shadow(0 0 6px #b8d8ff);
}
.fx-dust {
  fill: #a8c8f1;
  opacity: 0.27;
  animation: dust-glimmer 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.fx-ring {
  stroke: #98bced39;
  stroke-width: 1;
  fill: none;
}
.ring-1 {
  stroke-dasharray: 1 6;
}
.ring-3 {
  stroke: #a9c8ef65;
}
.fx-core-disc {
  fill: #0b101b;
  stroke: #98baec80;
  stroke-width: 1;
}
.fx-dashed {
  stroke: #b6d4fc7a;
  stroke-dasharray: 3 12;
  stroke-width: 1;
}
.fx-tick {
  stroke: #92aed184;
  stroke-width: 1;
}
.fx-rotate {
  transform-origin: 300px 208px;
  animation: field-rotate 28s linear infinite;
}
.fx-rotate.reverse {
  animation-direction: reverse;
  animation-duration: 42s;
}
.fx-float {
  animation: field-float 7s ease-in-out infinite alternate;
}
.fx-halo {
  fill: #86b4f407;
  stroke: #aecfff4d;
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-expand 5s ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.fx-portal-ring {
  fill: #92bfff03;
  stroke: #b8d8ff55;
  stroke-width: 1;
  animation: portal-light 5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.fx-role.is-current .fx-node {
  fill: #213952;
  stroke: #cae3ff;
}
.fx-role.is-current .fx-label {
  fill: #e2f0ff;
}
.fx-role.is-current .fx-packet {
  stroke-width: 2.5;
}
/* Tactile surfaces: pointer lighting plus a fine, animated perimeter. */
.fx-surface {
  position: relative;
  isolation: isolate;
  --fx-x: 50%;
  --fx-y: 30%;
}
.fx-surface:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--fx-x) var(--fx-y), #a8ccff0c, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.workflow-stage,
.benchmark-panel,
.agent-console,
.demo-form-card {
  box-shadow:
    0 25px 80px -40px #6b8cb32e,
    inset 0 1px 0 #c4dfff15;
}
.fx-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
  border-radius: inherit;
}
.fx-edge rect {
  fill: none;
  stroke: #bad8ff85;
  stroke-width: 1;
  stroke-dasharray: 12 88;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: packet-travel 16s linear infinite;
}
.fx-scene.fx-offscreen,
.fx-scene.fx-offscreen *,
.fx-scene.fx-offscreen:before,
.fx-scene.fx-offscreen:after {
  animation-play-state: paused !important;
}
.fx-surface.fx-tilt {
  transform: perspective(1000px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s,
    box-shadow 0.4s;
}
.fx-surface.fx-tilt:hover {
  border-color: #b9d7ff63;
  box-shadow: 0 20px 50px -35px #99bfff66;
}
.person-art.fx-tilt:hover {
  transform: perspective(1000px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg))
    translateY(-4px);
}
.person-art .fx-edge {
  z-index: 3;
}
.person-art .fx-edge rect {
  stroke: #d4e5ff73;
  animation-duration: 22s;
}
.method-grid > article,
.feature-grid > .feature {
  position: relative;
  transition:
    background 0.4s,
    border-color 0.4s;
}
.method-grid > article:hover,
.feature-grid > .feature:hover {
  border-color: #b5d2ff77;
  background: linear-gradient(#a4c7ff08, transparent);
}
/* Workflow pulses follow the selected role in the scripted walkthrough. */
.workflow-circuit {
  margin: 23px 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  color: #738aa7;
  font: 6px var(--mono);
  letter-spacing: 0.07em;
}
.workflow-circuit > div {
  display: flex;
  width: 100%;
  height: 12px;
  gap: 0;
  order: 3;
}
.workflow-circuit i {
  flex: 1;
  position: relative;
  border-top: 1px solid #86aadb39;
}
.workflow-circuit i:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border: 1px solid #9ab8df70;
  border-radius: 50%;
  background: #121c2a;
}
.workflow-circuit i:last-child:after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  background: #9ebdde;
  border-radius: 50%;
}
.workflow-circuit b {
  position: absolute;
  left: 0;
  top: -1px;
  width: 27%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bedcff);
  box-shadow: 0 0 8px #afcfff77;
  animation: circuit-flow 3s linear infinite;
  animation-delay: calc(var(--step, 0) * -0.6s);
  opacity: 0.28;
}
.workflow-circuit i.is-current {
  border-color: #c2ddff;
}
.workflow-circuit i.is-current b {
  opacity: 1;
  height: 2px;
}
.workflow-circuit i.is-current:before {
  background: #d2e6ff;
  box-shadow: 0 0 10px #b5d7ff;
}
.workflow-steps button {
  transition:
    background 0.45s,
    border-color 0.45s,
    box-shadow 0.45s,
    translate 0.45s;
}
.workflow-steps button.active {
  translate: 0 -3px;
}
.fx-content-arrive {
  animation: content-arrive 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sample-files > span {
  animation: content-arrive 0.5s both;
}
.sample-files > span:nth-child(2) {
  animation-delay: 60ms;
}
.sample-files > span:nth-child(3) {
  animation-delay: 120ms;
}
/* Light passes over the real hardware, never replacing the photograph. */
.hardware-showroom .hardware-scan {
  position: absolute;
  inset: 14% 8% 20%;
  z-index: 2;
  pointer-events: none;
  border-inline: 1px solid #a8ceff10;
}
.hardware-scan > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: linear-gradient(90deg, transparent, #b7d7ff0b, transparent);
  border-right: 1px solid #cbe0ff6b;
  box-shadow: 15px 0 40px -20px #c8e1ffb0;
  animation: hardware-scan 9s ease-in-out infinite;
}
.hardware-scan > b {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8deff3b, transparent);
}
.hardware-scan > span {
  position: absolute;
  right: 0;
  bottom: -17px;
  font: 6px var(--mono);
  letter-spacing: 0.12em;
  color: #788da8;
}
.showroom-grid {
  animation: floor-flow 24s linear infinite;
}
.size-picker button {
  transition:
    border-color 0.4s,
    background 0.4s,
    translate 0.4s;
}
.size-picker button.selected {
  translate: 0 -4px;
}
.boundary-diagram .diagram-row > i {
  position: relative;
  overflow: hidden;
}
.boundary-diagram .diagram-row > i:after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: #d4e6ff;
  box-shadow: 0 0 8px #b1ceff;
  animation: circuit-flow 3s linear infinite;
}
/* A restrained portal behind the shared invitation. */
.cta-orbits {
  position: absolute;
  inset: -90% -15% -100% 40%;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-27deg);
}
.cta-orbits i {
  position: absolute;
  inset: 10%;
  border: 1px solid #b8d5ff22;
  border-radius: 50%;
  animation: portal-light 9s ease-in-out infinite;
}
.cta-orbits i:nth-child(2) {
  inset: 22%;
  animation-delay: -3s;
}
.cta-orbits i:nth-child(3) {
  inset: 34%;
  animation-delay: -6s;
}
.page-inner .cta-section > div:first-child {
  z-index: 1;
}
.cta-decoration {
  display: none;
}
.article-sidebar > a {
  transition:
    color 0.3s,
    padding-left 0.3s,
    border-color 0.3s;
  border-left: 1px solid transparent;
  padding-left: 10px;
}
.article-sidebar > a.is-reading {
  color: #d3e7ff;
  border-color: #c3ddff;
  padding-left: 15px;
}
.compare-table tbody tr {
  transition: background 0.3s;
}
.compare-table tbody tr:hover {
  background: #9fbded0a;
}
.compare-table tbody tr:hover th {
  color: #d0e0f8;
}
.demo-copy > .inner-art {
  max-width: 380px;
  margin: 28px 0;
}
.demo-copy .art-top {
  display: none;
}
.demo-copy .art-bottom {
  font-size: 5px;
}
.demo-copy .inner-art > svg {
  margin-block: -25px;
  max-height: 270px;
}
.demo-stamp {
  display: none;
}
.demo-form-card {
  align-self: start;
}
.demo-form-card:focus-within {
  border-color: #abcfff75;
  box-shadow: 0 0 65px -35px #90bdff80;
}
.page-inner .article-hero.inner-hero-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.article-hero.inner-hero-layout h1 {
  font-size: clamp(39px, 4.2vw, 59px);
}
.article-hero .art-bottom {
  font-size: 5px;
}
.article-hero .inner-art {
  opacity: 0.85;
}
body[data-page='privacy'] .inner-art {
  max-width: 360px;
  justify-self: end;
  opacity: 0.65;
}
@keyframes packet-travel {
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes inner-drift {
  to {
    transform: translate(-80px, 60px) scale(1.15);
  }
}
@keyframes horizon-breathe {
  50% {
    opacity: 0.3;
    translate: 0 -30px;
  }
}
@keyframes node-breathe {
  50% {
    opacity: 0.4;
    box-shadow: 0 0 3px #b9d6ff33;
  }
}
@keyframes dust-glimmer {
  50% {
    opacity: 0.08;
  }
}
@keyframes field-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes field-float {
  to {
    transform: translateY(-9px);
  }
}
@keyframes halo-expand {
  0% {
    scale: 0.8;
    opacity: 0.8;
  }
  80%,
  100% {
    scale: 1.45;
    opacity: 0;
  }
}
@keyframes portal-light {
  50% {
    stroke: #cee4ffbd;
    fill: #92bfff09;
    border-color: #c6e0ff55;
  }
}
@keyframes circuit-flow {
  to {
    left: 72%;
  }
}
@keyframes hardware-scan {
  0%,
  15% {
    left: 0;
    opacity: 0;
  }
  25%,
  70% {
    opacity: 1;
  }
  85%,
  100% {
    left: 80%;
    opacity: 0;
  }
}
@keyframes floor-flow {
  to {
    background-position: 0 60px;
  }
}
@keyframes content-arrive {
  from {
    opacity: 0.25;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 1500px) {
  .page-inner .inner-hero-layout {
    min-height: 550px;
  }
  .inner-art {
    max-width: 570px;
    justify-self: end;
  }
}
@media (max-width: 1000px) {
  .page-inner .inner-hero-layout {
    gap: 8px;
    grid-template-columns: 1.18fr 1fr;
  }
  .inner-hero-layout h1 {
    font-size: 49px;
  }
  .inner-hero-layout .lead {
    font-size: 13px;
  }
  .art-top {
    font-size: 5px;
  }
  .art-bottom {
    font-size: 5px;
  }
  .page-inner .article-hero.inner-hero-layout {
    grid-template-columns: 1.4fr 1fr;
  }
  .article-hero.inner-hero-layout h1 {
    font-size: 45px;
  }
}
@media (max-width: 800px) {
  .page-inner .inner-hero-layout,
  .page-inner .article-hero.inner-hero-layout {
    grid-template-columns: 1fr;
    gap: 15px;
    padding-top: 28px;
    padding-bottom: 38px;
    min-height: 0;
  }
  .inner-hero-layout h1 {
    font-size: 57px;
  }
  .inner-hero-layout .lead {
    font-size: 15px;
  }
  .inner-art {
    width: 100%;
    max-width: 460px;
    justify-self: center;
    margin: 0 auto;
  }
  .art-top {
    font-size: 7px;
  }
  .art-bottom {
    font-size: 6px;
  }
  .inner-art > svg {
    max-height: 310px;
  }
  .article-hero .inner-art {
    max-width: 380px;
  }
  .article-hero.inner-hero-layout h1 {
    font-size: 49px;
  }
  .demo-copy > .inner-art {
    display: none;
  }
  body[data-page='privacy'] .inner-art {
    max-width: 280px;
    justify-self: center;
  }
  .fx-edge rect {
    animation-duration: 22s;
  }
}
@media (max-width: 500px) {
  .page-inner .inner-hero-layout {
    padding-top: 25px;
    padding-bottom: 33px;
    gap: 10px;
  }
  .inner-hero-layout h1,
  .article-hero.inner-hero-layout h1 {
    font-size: 43px;
  }
  .inner-hero-layout .lead {
    font-size: 13px;
    line-height: 1.85;
  }
  .inner-art {
    max-width: 370px;
  }
  .inner-art > svg {
    max-height: 260px;
  }
  .art-top {
    font-size: 6px;
  }
  .art-bottom {
    font-size: 5px;
  }
  .hardware-scan > span {
    font-size: 4px;
  }
  .workflow-circuit {
    font-size: 5px;
  }
  .atmosphere-mesh {
    background-size: 60px 60px;
  }
  .inner-atmosphere > i {
    width: 420px;
  }
  .article-hero .inner-art {
    max-width: 320px;
  }
  .cta-orbits {
    inset: -20% -70% -40% 0;
  }
  .demo-copy > .inner-art {
    display: none;
  }
}
@media (max-width: 360px) {
  .inner-hero-layout h1,
  .article-hero.inner-hero-layout h1 {
    font-size: 38px;
  }
}
/* Pause also covers pseudo-elements and interaction-driven transitions. */
.motion-paused .page-inner *,
.motion-paused .page-inner *:before,
.motion-paused .page-inner *:after,
.page-hidden .page-inner *:before,
.page-hidden .page-inner *:after {
  animation-play-state: paused !important;
}
.motion-paused .fx-content-arrive {
  animation: none;
  opacity: 1;
  transform: none;
}
.motion-paused .fx-surface,
.motion-paused .inner-art > svg,
.motion-paused .workflow-steps button,
.motion-paused .size-picker button {
  transform: none !important;
  translate: none;
  transition: none;
}
.motion-paused .sample-files > span {
  animation: none;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fx-surface,
  .inner-art > svg,
  .workflow-steps button,
  .size-picker button {
    transform: none !important;
    translate: none !important;
  }
  .fx-content-arrive {
    opacity: 1;
    transform: none;
  }
  .inner-hero-copy h1 em {
    color: #a7b9d3;
    background: none;
  }
}