:root {
  --page: #ffffff;
  --canvas: #f6faff;
  --story-canvas-background: #fff;
  --story-canvas-dot: rgb(111 133 154 / 32%);
  --surface: #ffffff;
  --text: #11161d;
  --muted: #647180;
  --hairline: #d8e2eb;
  --blue: rgb(35 124 207);
  --purple: #7757f6;
  --green: #56b870;
  --radius: 12px;
  --page-gutter: clamp(22px, 3.4vw, 58px);
  --shell-inline-gutter: clamp(22px, 5.1vw, 36px);
  --header-height: 72px;
  --card-shadow: 0 14px 34px rgb(38 58 78 / 12%);
  --panel-shadow: 0 28px 70px rgb(35 55 76 / 12%);
  color-scheme: light;
  font-family: "Lucida Grande", "Lucida Sans Unicode", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  background: var(--page);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  height: auto;
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  overflow: visible;
  overflow-x: clip;
  color: var(--text);
  background: var(--page);
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: #fff;
  background: var(--text);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.feature-site-header {
  position: fixed;
  z-index: 200;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--page-gutter);
  background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 94%) 58%, rgb(255 255 255 / 0%) 100%);
  pointer-events: none;
}

.feature-site-header .wordmark,
.feature-site-header .analog-mark {
  pointer-events: auto;
}

.feature-site-header .wordmark {
  justify-self: start;
  color: var(--text);
  font-family: "Courier New", monospace;
  font-size: 20px;
  letter-spacing: .18em;
  text-decoration: none;
}

.feature-site-header .site-nav-spacer {
  width: 1px;
  height: 1px;
  justify-self: center;
}

.feature-site-header .analog-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  justify-self: end;
  opacity: .68;
}

.continuity-story,
.feature-slide {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  height: 100dvh;
  min-height: 100dvh;
  z-index: 1;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.legacy-story[hidden] {
  display: none;
}

.continuity-stage {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--story-canvas-background);
  background-image: radial-gradient(circle, var(--story-canvas-dot) .75px, transparent .9px);
  background-size: 17px 17px;
  isolation: isolate;
}

.continuity-stage::before,
.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.continuity-stage::before {
  z-index: -2;
  background-color: var(--story-canvas-background);
  background-image: radial-gradient(circle, var(--story-canvas-dot) .75px, transparent .9px);
  background-size: 17px 17px;
}

.product-stage {
  --branch-composition-scale: 1;
  --branch-card-width: min(22vw, calc(16svh * 16 / 9), 270px);
  --branch-shell-top: clamp(112px, 22svh, 208px);
  --branch-shell-height: min(66svh, 590px, calc(100svh - var(--header-height) - var(--branch-shell-top) - 14px));
  --branch-row-one: calc(var(--branch-shell-top) + min(8svh, 64px));
  --branch-row-two: calc(var(--branch-shell-top) + min(25svh, 210px));
  --branch-row-three: calc(var(--branch-shell-top) + min(42svh, 356px));
  position: absolute;
  z-index: 4;
  inset: var(--header-height) 0 0;
  overflow: hidden;
  background-color: var(--story-canvas-background);
}

.product-stage::before {
  z-index: 0;
  opacity: 1;
  background-image: radial-gradient(circle, var(--story-canvas-dot) .75px, transparent .9px);
  background-size: 17px 17px;
}

.continuity-scrim {
  position: absolute;
  z-index: 35;
  inset: 0 0 auto;
  height: clamp(182px, 24vh, 228px);
  background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 98%) 60%, rgb(255 255 255 / 0%) 100%);
  pointer-events: none;
}

.act-copy-stack {
  position: absolute;
  z-index: 50;
  top: calc(var(--header-height) + 14px);
  left: var(--page-gutter);
  width: min(470px, calc(100vw - (2 * var(--page-gutter)) - 56px));
  pointer-events: none;
}

.act-copy {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}

.act-copy.is-current {
  opacity: 1;
  visibility: visible;
}

.act-copy h1,
.act-copy h2,
.static-act h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3.1vw, 48px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .96;
}

.act-copy p {
  max-width: 40ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
}

.feature-copy {
  position: absolute;
  z-index: 50;
  top: calc(var(--header-height) + 14px);
  left: var(--page-gutter);
  width: min(530px, calc(100vw - (2 * var(--page-gutter)) - 64px));
  pointer-events: none;
}

.feature-slide--branch .feature-copy {
  left: var(--shell-inline-gutter);
}

.feature-kicker {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.feature-copy h1,
.feature-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3.1vw, 48px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .96;
}

.workflow-overlay,
.branch-overlay,
.board-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.branch-composition {
  position: absolute;
  z-index: 5;
  inset: 0;
  transform-origin: 50% 61%;
  pointer-events: none;
}

.workflow-reveal-overlay {
  pointer-events: none;
}

.workflow-reveal-overlay.is-interactive .workflow-carousel-pagination {
  pointer-events: auto;
}

.workflow-reveal-overlay:not(.is-interactive) .workflow-carousel-pagination {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.workflow-reveal {
  --workflow-reveal-x: 50%;
  --workflow-reveal-y: 50%;
  --workflow-reveal-radius: 0px;
  --workflow-reveal-falloff: 0px;
  --workflow-reveal-target: 288px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  outline: none;
  background: #eef3f7;
  cursor: auto;
  pointer-events: none;
  touch-action: pan-y;
}

.workflow-reveal.is-interactive {
  cursor: none;
  pointer-events: auto;
}

.workflow-reveal-before,
.workflow-reveal-after,
.workflow-reveal-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.workflow-reveal-before,
.workflow-reveal-after img {
  object-fit: cover;
  object-position: center;
}

.workflow-reveal-after {
  z-index: 2;
  display: block;
  -webkit-mask-image: radial-gradient(
    circle at var(--workflow-reveal-x) var(--workflow-reveal-y),
    #000 0,
    #000 var(--workflow-reveal-radius),
    transparent calc(var(--workflow-reveal-radius) + var(--workflow-reveal-falloff))
  );
  mask-image: radial-gradient(
    circle at var(--workflow-reveal-x) var(--workflow-reveal-y),
    #000 0,
    #000 var(--workflow-reveal-radius),
    transparent calc(var(--workflow-reveal-radius) + var(--workflow-reveal-falloff))
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: -webkit-mask-image, mask-image;
}

.workflow-pointer-logo {
  position: absolute;
  z-index: 6;
  top: var(--workflow-reveal-y);
  left: var(--workflow-reveal-x);
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.86);
  filter: drop-shadow(0 2px 4px rgb(12 22 31 / 32%));
  transition: opacity 120ms ease, transform 160ms ease;
  will-change: top, left, opacity, transform;
}

.workflow-reveal.is-interactive.has-logo-pointer .workflow-pointer-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.workflow-reveal:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.workflow-carousel-pagination {
  position: absolute;
  z-index: 7;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgb(76 98 119 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 9px 24px rgb(29 50 70 / 10%);
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.workflow-carousel-pagination button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgb(45 64 83 / 28%);
  transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.workflow-carousel-pagination button[aria-current="true"] {
  width: 20px;
  background: var(--blue);
}

.workflow-carousel-pagination button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.relay-card,
.branch-source {
  position: relative;
  overflow: visible;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(115 137 157 / 24%);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.relay-card img,
.branch-source img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.note-handle {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(103 123 143 / 24%);
  border-radius: 50%;
  color: var(--blue);
  background: #fff;
  box-shadow: 0 7px 18px rgb(24 52 78 / 15%);
  font-size: 20px;
  line-height: 1;
}

.relay-card {
  position: absolute;
  z-index: 14;
  width: clamp(150px, 18vw, 260px);
  opacity: 0;
  visibility: hidden;
}

.branch-shell {
  --branch-card-height: calc(var(--branch-card-width) * .5625);
  --branch-row-gap: calc((100% - var(--branch-card-height) - var(--branch-card-height) - var(--branch-card-height)) / 4);
  --branch-row-one: var(--branch-row-gap);
  --branch-row-two: calc((var(--branch-row-gap) * 2) + var(--branch-card-height));
  --branch-row-three: calc((var(--branch-row-gap) * 3) + var(--branch-card-height) + var(--branch-card-height));
  position: absolute;
  top: var(--branch-shell-top);
  left: 50%;
  width: min(88vw, 1180px);
  height: var(--branch-shell-height);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(35 124 207 / 48%);
  border-radius: 22px;
  background: rgb(242 249 255 / 72%);
  box-shadow: var(--panel-shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(4px);
}

.branch-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: radial-gradient(circle, rgb(35 124 207 / 56%) .65px, transparent .8px);
  background-size: 12px 12px;
}

.branch-links {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.branch-composition.is-branch-ready .branch-links {
  opacity: 1;
}

.branch-links path {
  fill: none;
  stroke: #143e61;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.feature-slide--branch [data-branch-link-phase="source-target"] path {
  visibility: visible;
  opacity: 1;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.feature-slide--branch [data-branch-link-phase="source-pass"] path,
.feature-slide--branch [data-branch-link-phase="pass-target"] path {
  visibility: hidden;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.branch-source,
.relay-card--target,
.relay-card--pass-one,
.relay-card--pass-two,
.relay-card--pass-three {
  width: var(--branch-card-width);
}

.branch-source {
  position: absolute;
  z-index: 4;
  left: 5.5%;
  will-change: transform;
}

.branch-source--one,
.relay-card--pass-one { top: var(--branch-row-one); }

.branch-source--two,
.relay-card--pass-two,
.relay-card--target { top: var(--branch-row-two); }

.branch-source--three,
.relay-card--pass-three { top: var(--branch-row-three); }

.relay-card--target {
  z-index: 4;
  right: 5.5%;
  left: auto;
  opacity: 1;
  visibility: visible;
}

/* Board reads its relay positions from these cards, but the iteration column owns
   its own measured geometry and must not inherit the legacy relay placement. */
.feature-slide--branch [data-relay-role="branch-pass"]:not(.branch-iteration-card) {
  z-index: 4;
  left: 38%;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.branch-run {
  position: absolute;
  z-index: 7;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  display: inline-flex;
  min-width: 116px;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px 0 18px;
  border: 1px solid #10233b;
  border-radius: 10px;
  color: #fff;
  background: #10233b;
  box-shadow: 0 10px 26px rgb(16 35 59 / 18%);
  font: 700 12px/1 var(--interface-font, "Lucida Grande", sans-serif);
  letter-spacing: .01em;
  pointer-events: auto;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.feature-slide--branch .branch-run {
  cursor: pointer !important;
}

.branch-run:hover:not(:disabled) {
  color: #10233b;
  background: #fff;
  box-shadow: 0 13px 32px rgb(16 35 59 / 22%);
  transform: translateY(-1px);
}

.branch-run:focus-visible {
  outline: 3px solid rgb(35 124 207 / 30%);
  outline-offset: 3px;
}

.branch-run:disabled {
  cursor: wait !important;
  opacity: .68;
}

.branch-run-icon {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid currentColor;
}

.board-overlay {
  z-index: 16;
}

.board-connection {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.board-connection path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.board-note {
  position: absolute;
  z-index: 8;
  top: 64%;
  left: 41%;
  width: min(280px, 28vw, calc(100vw - 40px));
  min-height: clamp(112px, 18svh, 138px);
  padding: 20px 22px 46px;
  border: 1px solid rgb(119 87 246 / 52%);
  border-radius: 14px;
  color: #25334a;
  background: rgb(255 255 255 / 91%);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(14px);
}

.board-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.board-note strong {
  color: #45aad7;
}

.note-type-cursor {
  display: inline-block;
  width: .52em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: #243247;
  opacity: 0;
  animation: none;
}

.note-edit {
  position: absolute;
  bottom: 12px;
  left: 13px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #506273;
  background: #fff;
  box-shadow: 0 6px 16px rgb(39 56 75 / 13%);
}

.note-handle {
  top: 50%;
  right: -15px;
  color: var(--purple);
  transform: translateY(-50%);
}

.collaborator-cursor {
  --cursor-color: #9ed78f;
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  filter: drop-shadow(0 5px 7px rgb(22 42 61 / 16%));
}

.collaborator-cursor svg {
  width: 28px;
  height: 28px;
  color: var(--cursor-color);
  fill: var(--cursor-color);
  stroke: #fff;
  stroke-width: 1.5;
}

.collaborator-cursor span {
  margin: 20px 0 0 -2px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #14202c;
  background: var(--cursor-color);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cursor-noah { top: 29%; left: 24%; }
.cursor-jason { top: 45%; left: 50%; }
.cursor-maya { top: 35%; left: 73%; }
.cursor-lena { top: 70%; left: 58%; }
.cursor-arun { top: 56%; left: 82%; }

/* Each feature is a real viewport section. Branch and Collaboration own small
   viewport-entry loops rather than scroll-scrubbing. */
.feature-slide--workflow .workflow-reveal-overlay,
.feature-slide--workflow .workflow-reveal {
  pointer-events: auto;
}

.feature-slide--branch .branch-composition {
  pointer-events: auto;
  transform: none;
}

.feature-slide--branch .branch-overlay,
.feature-slide--collaboration .board-overlay {
  pointer-events: auto;
}

.branch-iteration-scene {
  --branch-card-w: 196px;
  --branch-card-h: 110.25px;
  --branch-row-gap: 25px;
  --branch-column-top: 168px;
  --branch-source-left: 36px;
  --branch-pass-left: 285px;
  --branch-target-w: 318px;
  --branch-target-complete-w: 196px;
  --branch-target-right: 64px;
  --branch-target-top: 50%;
  position: absolute;
  z-index: 18;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
}

.branch-iteration-column {
  position: absolute;
  top: var(--branch-column-top);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--branch-row-gap);
}

.branch-iteration-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--branch-card-h);
  outline: none;
  isolation: isolate;
}

.branch-iteration-card {
  position: absolute;
  top: 0;
  width: var(--branch-card-w);
  height: var(--branch-card-h);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(20 62 97 / 20%);
  border-radius: clamp(9px, 1vw, 14px);
  background: #fff;
  box-shadow: 0 11px 24px rgb(16 35 59 / 13%);
  transform-origin: center;
  transition: box-shadow 260ms ease;
  will-change: transform, opacity;
}

.branch-iteration-card--source {
  z-index: 1;
  left: var(--branch-source-left);
}

.branch-iteration-card--pass {
  z-index: 2;
  left: var(--branch-pass-left);
  opacity: 0;
  visibility: hidden;
}

.branch-iteration-card img,
.branch-iteration-target img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.branch-iteration-score {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 7px;
  min-width: 36px;
  padding: 4px 7px;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 7px;
  color: #fff;
  background: rgb(16 35 59 / 86%);
  box-shadow: 0 5px 14px rgb(16 35 59 / 20%);
  font: 700 10px/1 var(--interface-font, "Lucida Grande", sans-serif);
  text-align: center;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(7px);
}

.branch-iteration-links {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.branch-iteration-links path {
  fill: none;
  stroke: rgb(20 62 97 / 72%);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  visibility: hidden;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* These paths carry no pathLength, so the dash pattern stays in screen pixels and
   the travelling points keep the same size whatever the gap measures. A near-zero
   dash under a round cap renders each one as a dot the width of the stroke. */
.branch-iteration-links [data-branch-iteration-link-phase="source-pass-flow"] path {
  stroke: rgb(109 74 212 / 92%);
  stroke-width: 2.2;
  stroke-dasharray: 0.01 6.99;
  stroke-dashoffset: 35;
}

.branch-iteration-target {
  position: absolute;
  top: var(--branch-target-top);
  right: var(--branch-target-right);
  width: var(--branch-target-w);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(139 92 246 / 34%);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: #fff;
  box-shadow: 0 24px 60px rgb(43 31 86 / 18%);
  transform: translateY(-50%);
  transition: width 620ms cubic-bezier(.22, .9, .27, 1), border-radius 620ms cubic-bezier(.22, .9, .27, 1), box-shadow 620ms ease;
  will-change: transform, opacity;
}

.branch-iteration-scene[data-branch-state="iterating"] .branch-iteration-target,
.branch-iteration-scene[data-branch-state="complete"] .branch-iteration-target {
  width: var(--branch-target-complete-w);
  border-radius: clamp(10px, 1.1vw, 14px);
  box-shadow: 0 18px 42px rgb(43 31 86 / 15%);
}

.branch-iteration-run {
  position: absolute;
  z-index: 40;
  right: clamp(32px, 5vw, 72px);
  bottom: clamp(24px, 4svh, 44px);
  display: inline-flex;
  min-width: 128px;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px 0 18px;
  border: 1px solid #10233b;
  border-radius: 11px;
  color: #fff;
  background: #10233b;
  box-shadow: 0 12px 30px rgb(16 35 59 / 19%);
  font: 700 12px/1 var(--interface-font, "Lucida Grande", sans-serif);
  letter-spacing: .01em;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  will-change: transform, opacity;
}

.feature-slide--branch .branch-iteration-run {
  cursor: pointer !important;
}

.branch-iteration-run:hover:not(:disabled) {
  color: #10233b;
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgb(16 35 59 / 22%);
}

.branch-iteration-run:focus-visible {
  outline: 3px solid rgb(139 92 246 / 28%);
  outline-offset: 3px;
}

.branch-iteration-run:disabled {
  cursor: wait !important;
}

.branch-iteration-scene[data-branch-state="yawning"] .branch-iteration-run {
  border-color: #8b5cf6;
  color: #fff;
  background: #8b5cf6;
  box-shadow: 0 14px 34px rgb(139 92 246 / 28%);
}

.branch-iteration-scene[data-branch-state="iterating"] .branch-iteration-run {
  border-color: #6d4ad4;
  color: #fff;
  background: #6d4ad4;
}

.branch-iteration-run-icon {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid currentColor;
}

.feature-slide--branch,
.feature-slide--branch *,
.feature-slide--collaboration,
.feature-slide--collaboration * {
  cursor: auto !important;
}

.static-story {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .workflow-reveal.is-interactive {
    cursor: auto;
  }

  .workflow-pointer-logo {
    display: none;
  }
}

@media (min-width: 761px) {
  .board-overlay .relay-card--pass-one { top: 31%; left: 23%; }
  .board-overlay .relay-card--pass-two { top: 40%; left: 48%; }
  .board-overlay .relay-card--pass-three { top: 31%; left: 73%; }

  .feature-slide--collaboration .board-overlay .relay-card {
    width: clamp(210px, 23vw, 340px);
  }

  .feature-slide--collaboration .board-overlay .relay-card--pass-one { top: 30%; left: 13%; }
  .feature-slide--collaboration .board-overlay .relay-card--pass-two { top: 42%; left: 39%; }
  .feature-slide--collaboration .board-overlay .relay-card--pass-three { top: 30%; left: 66%; }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 20px;
  }

  .feature-site-header .wordmark {
    font-size: 18px;
  }

  .feature-site-header .analog-mark {
    width: 34px;
    height: 34px;
  }

  .continuity-scrim {
    height: 190px;
  }

  .act-copy-stack {
    top: calc(var(--header-height) + 10px);
    width: calc(100vw - 84px);
  }

  .feature-copy {
    top: calc(var(--header-height) + 10px);
    width: calc(100vw - 84px);
  }

  .act-copy h1,
  .act-copy h2,
  .feature-copy h1,
  .feature-copy h2,
  .static-act h2 {
    font-size: 28px;
    line-height: 1;
  }

  .act-copy p {
    display: none;
  }

  .note-handle {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }

  .workflow-carousel-pagination {
    bottom: 21px;
  }

  .branch-shell {
    width: calc(100vw - 24px);
    min-height: 0;
  }

  .product-stage {
    --branch-composition-scale: 1;
    --branch-card-width: min(26vw, 112px);
    --branch-shell-top: clamp(126px, 18svh, 154px);
    --branch-shell-height: calc(100svh - var(--header-height) - var(--branch-shell-top) - 14px);
  }

  .branch-iteration-target {
    border-radius: 11px;
  }

  .branch-iteration-score {
    right: 4px;
    bottom: 4px;
    min-width: 30px;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 8px;
  }

  .branch-iteration-run {
    right: 14px;
    bottom: max(20px, env(safe-area-inset-bottom));
    min-width: 104px;
    min-height: 40px;
    gap: 13px;
    padding-inline: 14px 12px;
    font-size: 11px;
  }

  .branch-source {
    left: 12px;
  }

  .relay-card--target {
    right: 12px;
    left: auto;
  }

  .relay-card--pass-one,
  .relay-card--pass-two,
  .relay-card--pass-three {
    left: 12px;
  }

  .branch-run {
    right: 12px;
    bottom: 12px;
    min-width: 92px;
    min-height: 38px;
    gap: 12px;
    padding-inline: 14px 12px;
    font-size: 11px;
  }

  .board-overlay .relay-card--pass-one,
  .board-overlay .relay-card--pass-two,
  .board-overlay .relay-card--pass-three {
    width: 27vw;
  }

  .board-overlay .relay-card--pass-one { top: 34%; left: 7%; }
  .board-overlay .relay-card--pass-two { top: 43%; left: 37%; }
  .board-overlay .relay-card--pass-three { top: 34%; left: 67%; }

  .feature-slide--collaboration .board-overlay .relay-card {
    width: min(31vw, 240px);
  }

  .feature-slide--collaboration .board-overlay .relay-card--pass-one { top: 32%; left: 3%; }
  .feature-slide--collaboration .board-overlay .relay-card--pass-two { top: 43%; left: 35%; }
  .feature-slide--collaboration .board-overlay .relay-card--pass-three { top: 32%; left: 66%; }

  .board-note {
    top: 63%;
    left: 25%;
    width: 50vw;
    min-height: clamp(112px, 16svh, 126px);
    padding: 17px 18px 42px;
  }

  .board-note p {
    font-size: 12px;
  }

  .cursor-noah { top: 30%; left: 11%; }
  .cursor-jason { top: 47%; left: 45%; }
  .cursor-maya { top: 34%; left: 73%; }
  .cursor-lena { top: 72%; left: 48%; }
  .cursor-arun { top: 58%; left: 78%; }

  .collaborator-cursor svg {
    width: 24px;
    height: 24px;
  }

  .collaborator-cursor span {
    margin-top: 17px;
    padding: 3px 7px;
    font-size: 10px;
  }

}

@media (max-width: 560px) {
  :root {
    --shell-inline-gutter: 22px;
  }
}

@media (max-width: 520px) {
  .product-stage {
    --branch-composition-scale: 1;
  }
}

@media (max-height: 520px) {
  .continuity-scrim {
    height: 158px;
  }

  .act-copy-stack {
    top: calc(var(--header-height) + 8px);
  }

  .feature-copy {
    top: calc(var(--header-height) + 8px);
  }

  .act-copy h1,
  .act-copy h2,
  .feature-copy h1,
  .feature-copy h2 {
    font-size: clamp(22px, 5.6svh, 28px);
  }

  .product-stage {
    --branch-composition-scale: .78;
    --branch-shell-top: 104px;
    --branch-shell-height: calc(100svh - var(--header-height) - var(--branch-shell-top) - 14px);
    --branch-card-width: min(20vw, calc(13svh * 16 / 9), 180px);
  }

  .branch-iteration-run {
    bottom: 12px;
    min-height: 38px;
  }

  .board-note {
    min-height: 112px;
    padding: 13px 16px 38px;
  }

  .board-note p {
    font-size: 11px;
  }

  .collaborator-cursor svg {
    width: 22px;
    height: 22px;
  }

  .collaborator-cursor span {
    margin-top: 15px;
    padding: 2px 6px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .continuity-story {
    display: none;
  }

  .static-story {
    display: grid;
    gap: 0;
    padding-top: var(--header-height);
  }

  .static-act {
    min-height: 100svh;
    padding: 38px var(--page-gutter);
    background:
      radial-gradient(circle, rgb(111 133 154 / 30%) .7px, transparent .85px) 0 0 / 17px 17px,
      var(--canvas);
  }

  .static-act h2 {
    margin-bottom: 32px;
  }

  .static-pair-grid,
  .static-branch-grid,
  .static-board-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(900px, 100%);
    margin: auto;
  }

  .static-act img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: var(--card-shadow);
  }

  .branch-links,
  .branch-iteration-links path,
  .branch-run,
  .branch-iteration-card,
  .branch-iteration-run {
    transition: none;
  }

  .static-board-grid p {
    padding: 24px;
    border: 1px solid rgb(119 87 246 / 52%);
    border-radius: var(--radius);
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .static-pair-grid,
  .static-branch-grid,
  .static-board-grid {
    grid-template-columns: 1fr;
  }
}