/* Reuse the site's rainbow and stars only below the protected preview. */
:is(#bridge, #workflow, #pricing, #faq) {
  --pc-accent-rainbow: var(--rainbow-grad, linear-gradient(90deg, #E5832F, #BF3641, #7B61FF, #4299C9, #67B678));
  --pc-accent-border: linear-gradient(110deg, #a77855, #926069, #786598, #567f97, #628774);
  --pc-accent-play-state: paused;
  position: relative;
  isolation: isolate;
}
:is(#bridge, #workflow, #pricing, #faq)[data-accent-motion="running"] {
  --pc-accent-play-state: running;
}
:is(#bridge, #workflow, #pricing, #faq)::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: min(calc(100% - 36px), 1240px);
  block-size: 3px;
  transform: translateX(-50%);
  background: var(--pc-accent-rainbow);
  opacity: .7;
  filter: saturate(.75);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

/* Existing 3D star tunnel: a static background also survives without JS. */
#workflow.pc-workflow > .hyperspace-scene.pc-workflow-hyperspace {
  z-index: 0;
  opacity: .48;
  transform: none;
  transition: none;
  filter: brightness(1.15) saturate(.85);
  will-change: auto;
  background: url("assets/stars.png") center / cover no-repeat;
  overflow: hidden;
  pointer-events: none;
}
#workflow.pc-workflow > .pc-details-shell {
  position: relative;
  z-index: 2;
}
#workflow.pc-workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 1;
  background: linear-gradient(180deg, #080c11c9 0%, #080c1173 35%, #080c1152 68%, #080c11eb 100%);
  mask-image: none;
  pointer-events: none;
}
#workflow.pc-workflow .pc-workflow-hyperspace .wrap {
  animation: move 22s linear infinite;
  animation-play-state: var(--pc-accent-play-state);
  will-change: auto;
}
#workflow.pc-workflow .pc-workflow-hyperspace .wrap:nth-child(2) {
  animation-delay: 11s;
}
#workflow.pc-workflow .pc-workflow-hyperspace .wall {
  animation: fade 22s linear infinite;
  animation-delay: 0s;
  animation-play-state: var(--pc-accent-play-state);
  opacity: 0;
}
#workflow.pc-workflow .pc-workflow-hyperspace .wrap:nth-child(2) .wall {
  animation-delay: 11s;
}
#workflow.pc-workflow[data-accent-motion="running"] .pc-workflow-hyperspace .wrap {
  will-change: transform;
}

/* The old glow-card motif, with quiet color and no overlay over video controls. */
#bridge .pc-bridge-media {
  border: 1px solid transparent;
  background: linear-gradient(#121b22, #121b22) padding-box, var(--pc-accent-border) border-box;
  box-shadow: 0 14px 42px #0007, 0 0 24px #6c6ca30d;
}
#bridge .pc-bridge-mode {
  margin-top: 0;
  padding: 22px 18px;
  border: 1px solid #7d7c8b70;
  border-radius: 10px;
  background: #302d37;
  box-shadow: 0 12px 32px #0004;
  transition: box-shadow 220ms ease, border-color 180ms ease, transform 180ms ease;
}
#bridge .pc-bridge-modes { gap: 20px; margin-top: 36px; border-top: 0; }
#bridge .pc-bridge-mode:nth-child(1) { background: linear-gradient(135deg, #473936, #312a30); }
#bridge .pc-bridge-mode:nth-child(2) { background: linear-gradient(135deg, #29474a, #222f38); }
#bridge .pc-bridge-mode:nth-child(3) { background: linear-gradient(135deg, #423650, #2b2d42); }
#bridge .pc-bridge-mode::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  width: auto;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--pc-accent-rainbow);
  opacity: .7;
  filter: saturate(.7);
  pointer-events: none;
}
#bridge .pc-bridge-mode-copy > span { color: #d1d9df; }
#bridge .pc-bridge-mode::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 2px;
  background: var(--pc-accent-rainbow);
  background-size: 400% 100%;
  animation: steam 24s linear infinite;
  animation-play-state: var(--pc-accent-play-state);
  opacity: .45;
  filter: saturate(.7);
  pointer-events: none;
  transition: opacity 220ms ease;
}
#bridge .pc-bridge-mode:is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: #b1c2c5a6;
  box-shadow: inset 0 1px 0 #ffffff12, 0 10px 30px #8b7ca51a;
}
#bridge .pc-bridge-mode:is(:hover, :focus-visible, [aria-pressed="true"])::after {
  opacity: .9;
}
#bridge .pc-bridge-mode-arrow { color: #c0c7d2; }
#workflow .pc-flow-bifrost {
  border: 1px solid transparent;
  background: linear-gradient(100deg, #211d23, #172326) padding-box, var(--pc-accent-border) border-box;
  box-shadow: 0 12px 42px #0003, 0 0 35px #7b619913;
}
#workflow .pc-flow-bifrost .pc-flow-step {
  box-shadow: inset 0 1px 0 #edc7bd12;
}
#workflow .pc-flow-bifrost .pc-flow-step:last-child {
  box-shadow: inset 0 1px 0 #a8daca16;
}
#pricing .pc-price-table-wrap {
  border-color: #a1bdb8;
  box-shadow: 0 14px 42px #3d6f6810, 0 0 28px #776f9409;
}
#faq .pc-faq-list details {
  position: relative;
  transition: background-color 180ms ease;
}
#faq .pc-faq-list details[open] {
  background: linear-gradient(110deg, #c68a5b09, #8872b70a, #679fab08);
  border-bottom-color: #59676e;
}
#faq .pc-faq-list details[open]::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -8px;
  width: 2px;
  background: linear-gradient(180deg, #a77855, #926069, #786598, #567f97, #628774);
  opacity: .7;
  border-radius: 2px;
  pointer-events: none;
}

@media (max-width: 760px) {
  #bridge .pc-bridge-modes { gap: 10px; }
  #bridge .pc-bridge-mode { padding: 18px 16px; }
  #workflow.pc-workflow > .hyperspace-scene.pc-workflow-hyperspace { opacity: .36; }
  #workflow.pc-workflow .pc-workflow-hyperspace .wrap,
  #workflow.pc-workflow .pc-workflow-hyperspace .wall { animation-duration: 28s; }
  #workflow.pc-workflow .pc-workflow-hyperspace .wrap:nth-child(2),
  #workflow.pc-workflow .pc-workflow-hyperspace .wrap:nth-child(2) .wall { animation-delay: 14s; }
}
@media (min-width: 761px) and (max-width: 980px) {
  #bridge .pc-bridge-modes { gap: 12px; }
  #bridge .pc-bridge-mode { padding: 18px 12px; gap: 9px; }
  #bridge .pc-bridge-mode-icon { width: 52px; height: 26px; }
  #bridge .pc-bridge-mode-copy > strong { font-size: .9rem; }
  #bridge .pc-bridge-mode-arrow { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#bridge, #workflow, #pricing, #faq)[data-accent-motion] { --pc-accent-play-state: paused; }
  #workflow.pc-workflow .pc-workflow-hyperspace .wrap,
  #workflow.pc-workflow .pc-workflow-hyperspace .wall,
  #bridge .pc-bridge-mode::after { animation: none; }
  #workflow.pc-workflow .pc-workflow-hyperspace .wall { opacity: 0; }
  #bridge .pc-bridge-mode,
  #bridge .pc-bridge-mode::after,
  #faq .pc-faq-list details { transition: none; }
}