.systems-visual {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  color: var(--paper);
}
.systems-visual[hidden] {
  display: none;
}
.workflow {
  position: absolute;
  inset: 0;
  transform-origin: 78% 62%;
}
.workflow-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.workflow-wires path {
  fill: none;
  stroke: #ab82da35;
  stroke-width: 1;
}
.workflow-wires .workflow-stream {
  stroke: #c9a5fb;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.workflow-step {
  position: absolute;
  top: 62%;
  width: 184px;
  text-align: center;
  text-wrap: pretty;
  transform: translateY(25px);
  margin-left: -92px;
  opacity: 0;
}
.workflow-step:nth-of-type(1) {
  left: 22%;
}
.workflow-step:nth-of-type(2) {
  left: 50%;
}
.workflow-step:nth-of-type(3) {
  left: 78%;
}
.node-orb {
  display: grid;
  place-items: center;
  margin: -44px auto 22px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid #ad8ac66b;
  background: radial-gradient(circle at 32% 23%, #745592, #21162f 65%);
  box-shadow: 0 18px 60px #08041070;
}
.node-orb svg {
  width: 29px;
  height: 29px;
  stroke: #b1a2c2;
  fill: none;
  stroke-width: 1.2;
}
.is-lit .node-orb {
  border-color: #d4b4f5;
}
.is-lit .node-orb svg {
  stroke: #f0e8f9;
}
.workflow-step strong {
  display: block;
  font:
    400 19px Space,
    Arial,
    sans-serif;
  letter-spacing: -0.03em;
}
.workflow-step small {
  display: block;
  margin-top: 7px;
  color: #b9abc9;
  font-size: 12px;
}
.workspace {
  position: absolute;
  left: 42%;
  top: 32%;
  width: 52%;
  height: 50%;
  max-height: 510px;
  min-height: 300px;
  border: 1px solid #b397d18c;
  background: linear-gradient(135deg, #251934, #12101d 65%);
  box-shadow: 0 35px 100px #06020b70;
  overflow: hidden;
  transform-origin: center;
  opacity: 0;
}
.workspace-content {
  height: 100%;
  padding: 24px 28px;
  opacity: 0;
}
.workspace-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #c0a4dc24;
  font: 11px Space;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d0c1dd;
}
.workspace-bar span:last-child {
  letter-spacing: 0.03em;
  text-transform: none;
  color: #a99cba;
}
.workspace h3 {
  font: 400 clamp(23px, 2.4vw, 34px) / 1.1 Space;
  letter-spacing: -0.04em;
  margin: 24px 0 8px;
}
.workspace-subtitle {
  font-size: 12px;
  color: #b4a4c6;
  margin: 0 0 22px;
}
.work-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top: 1px solid #a888cb26;
  padding: 16px 0;
  gap: 12px;
  font-size: 13px;
}
.work-row small {
  display: block;
  color: #a799b9;
  margin-top: 4px;
  font-size: 11px;
}
.work-status {
  color: #e5d1ff;
  font-size: 11px;
  white-space: nowrap;
}
.work-status:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8a0f3;
  margin-right: 8px;
}
.cinema-active .systems-copy {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 16vh;
  z-index: 2;
}
.cinema-active .systems-copy .copy {
  max-width: 780px;
}
.cinema-active .systems-copy .copy h2 {
  font-size: var(--type-display);
  margin-bottom: 22px;
}
.cinema-active .systems-copy::before {
  background: none;
}
.cinema-active .software-copy {
  align-items: center;
  z-index: 2;
}
.cinema-active .software-copy .copy {
  max-width: 34%;
}
.cinema-active .software-copy .copy h2 {
  font-size: var(--type-display);
}
.cinema-active .software-copy::before {
  background: none;
}
.flow-fallback {
  margin-top: 28px;
  padding-left: 20px;
  color: #d1bedf;
}
.cinema-active .flow-fallback {
  display: none;
}
/* Matches cinema.css: TOTAL (cinema.js KNOTS, 27.15) x 81.9svh + one viewport. */
.cinema-active main {
  height: 2324svh;
}
@media (max-width: 700px) {
  .cinema-active .systems-copy {
    padding-top: 15svh;
  }
  .cinema-active .systems-copy .copy h2 {
    font-size: var(--type-display);
  }
  .cinema-active .systems-copy .copy p:not(.eyebrow) {
    max-width: 310px;
    font-size: 13px;
  }
  .workflow-step {
    top: 64%;
    width: 100px;
    margin-left: -50px;
  }
  .workflow-step:nth-of-type(1) {
    left: 18%;
  }
  .workflow-step:nth-of-type(2) {
    left: 50%;
  }
  .workflow-step:nth-of-type(3) {
    left: 82%;
  }
  .node-orb {
    width: 60px;
    height: 60px;
    margin: -30px auto 18px;
  }
  .node-orb svg {
    width: 23px;
    height: 23px;
  }
  .workflow-step strong {
    font-size: 13px;
  }
  .workflow-step small {
    font-size: var(--type-note, 11px);
    line-height: 1.5;
  }
  .workspace {
    left: 7%;
    top: 47%;
    width: 86%;
    height: 40%;
    min-height: 245px;
  }
  .workspace-content {
    padding: 17px;
  }
  .workspace-bar {
    padding-bottom: 13px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .workspace-bar span:last-child {
    font-size: 11px;
  }
  .workspace h3 {
    font-size: 24px;
    margin-top: 18px;
  }
  .workspace-subtitle {
    font-size: 12px;
    margin-bottom: 15px;
  }
  /* Phones: row titles and statuses only, at a readable size. The descriptions would need 8-9px
     type to fit, so they are left out; the scene copy carries the detail. */
  .work-row {
    padding: 10px 0;
    font-size: 13px;
  }
  .work-row small {
    display: none;
  }
  .work-status {
    font-size: 12px;
  }
  .cinema-active .software-copy {
    align-items: flex-start;
    padding-top: 15svh;
  }
  .cinema-active .software-copy .copy {
    max-width: 100%;
  }
  .cinema-active .software-copy .copy h2 {
    font-size: var(--type-display);
    margin-bottom: 18px;
  }
  .cinema-active .software-copy .copy p:not(.eyebrow) {
    font-size: 13px;
    max-width: 300px;
  }
}
@media (max-width: 700px) and (max-height: 700px) {
  .workspace {
    top: 49%;
    height: 42%;
    min-height: 230px;
  }
  .workspace h3 {
    font-size: 20px;
    margin-top: 12px;
  }
  .workspace-subtitle {
    margin-bottom: 9px;
  }
  .workspace-bar {
    padding-bottom: 9px;
  }
  .work-row {
    padding: 8px 0;
  }
  .cinema-active .software-copy,
  .cinema-active .systems-copy {
    padding-top: 14svh;
  }
  .cinema-active .systems-copy .eyebrow,
  .cinema-active .software-copy .eyebrow {
    margin-bottom: 13px;
  }
}
html:not(.cinema-active) .systems-visual {
  display: none;
}
@media (max-width: 700px) {
  .work-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .workspace {
    min-height: 300px;
  }
}
@media (max-width: 700px) and (max-height: 700px) {
  .workspace {
    height: 46%;
    min-height: 285px;
  }
  .work-row {
    padding: 7px 0;
  }
}

.landing-ripple {
  position: absolute;
  left: 22%;
  top: 62%;
  width: 88px;
  height: 88px;
  border: 1px solid #d0b5ed;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  .landing-ripple {
    left: 18%;
    top: 64%;
    width: 60px;
    height: 60px;
  }
}

/* Phones: the workspace stands on a line above the "Ask our AI" button and is exactly as tall as its
   content, so no row is ever clipped. Short screens drop the mock subtitle so it stays clear of the
   scene copy above. The concept is labelled once, in the scene copy ("A bespoke workspace concept,
   not a live product."). */
@media (max-width: 700px) {
  .workspace {
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .workspace-content {
    height: auto;
  }
}
@media (max-width: 700px) and (max-height: 700px) {
  .workspace-content {
    padding: 14px 17px;
  }
  .workspace h3 {
    margin: 10px 0 10px;
  }
  .workspace-subtitle {
    display: none;
  }
  .work-row {
    padding: 6px 0;
  }
  /* The custom-software copy tightens so it ends above the workspace, even for the longer
     business headings. */
  .cinema-active .software-copy {
    padding-top: max(11svh, 70px);
  }
  .cinema-active .software-copy .copy h2 {
    font-size: clamp(30px, 8.4vw, 36px);
    margin-bottom: 12px;
  }
  .cinema-active .software-copy .copy p:not(.eyebrow) {
    line-height: 1.45;
  }
  .cinema-active .software-copy .copy small {
    margin-top: 8px;
  }
}
@media (max-width: 700px) and (max-height: 600px) {
  .workspace-bar {
    padding-bottom: 7px;
  }
  .workspace h3 {
    font-size: 18px;
    margin: 8px 0;
  }
}
/* The narrowest phones (320px) cannot hold both bar labels on one line at a readable size; the
   decorative "Shaped around your team" steps out. */
@media (max-width: 340px) {
  .workspace-bar span {
    white-space: nowrap;
  }
  .workspace-bar span:last-child {
    display: none;
  }
}