/* One living device: scroll selects the chapter, time plays the conversation. */
.demos {
  overflow: clip;
  background: var(--paper-deep);
}

.demos .section-head {
  padding-bottom: 8px;
}

.demo-stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.74fr) minmax(570px, 1.26fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
  padding: 8px 0 96px;
}

.demo-section {
  grid-column: 1;
  height: 185vh;
  min-height: 185vh;
  opacity: 0.22;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The last result needs time to land even when the wheel never pauses. This
   extends only Mood's completed-state runway; JS subtracts the same distance
   from narrative progress, so the conversation stages do not become slower. */
.demo-section[data-vignette="w4"] {
  --demo-mood-hold-distance: clamp(780px, 120svh, 1080px);
  height: calc(185vh + var(--demo-mood-hold-distance));
  min-height: calc(185vh + var(--demo-mood-hold-distance));
}

.demo-section.is-active {
  opacity: 1;
}

.demo-section .demo-grid {
  position: static;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.demo-copy {
  position: sticky;
  top: clamp(132px, 19vh, 190px);
  max-width: 470px;
  align-self: auto;
  padding-left: 22px;
  border-left: 1px solid rgba(28, 35, 43, 0.14);
}

.demo-copy::before {
  position: absolute;
  top: 4px;
  left: -5px;
  box-sizing: border-box; /* the global reset's `*` does not reach pseudo-elements */
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper-deep);
  border-radius: 50%;
  background: #8b949c;
  box-shadow: 0 0 0 1px rgba(28, 35, 43, 0.18);
  content: "";
  transition: background-color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-section.is-active .demo-copy::before {
  background: var(--focus);
  transform: scale(1.18);
}

.demo-copy h3 {
  max-width: 12ch;
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(2.05rem, 3.15vw, 3.05rem);
  font-weight: var(--display-weight);
  line-height: 1.01;
  letter-spacing: -0.032em;
}

.demo-copy p {
  max-width: 43ch;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.58;
}

.demo-progress-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(28, 35, 43, 0.12);
  color: var(--muted);
  font-size: 0.76rem;
  font-family: var(--ks-font-evidence);
  font-weight: var(--ks-typography-weight-label);
  letter-spacing: var(--ks-typography-tracking-system);
}

.demo-progress-readout [data-demo-phase-label] {
  color: var(--focus);
}

.demo-steps {
  --demo-progress: 0;
  position: relative;
  counter-reset: demo-step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 6px 0 6px 32px;
  list-style: none;
}

.demo-steps::before,
.demo-steps::after {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  content: "";
  transform-origin: top;
}

.demo-steps::before {
  background: rgba(28, 35, 43, 0.11);
}

.demo-steps::after {
  background: var(--focus);
  transform: scaleY(var(--demo-progress));
  transition: transform 90ms linear;
}

.demo-steps li {
  position: relative;
  counter-increment: demo-step;
  min-height: 62px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(28, 35, 43, 0.09);
  color: #5a6570;
  font-size: 0.9rem;
  line-height: 1.48;
  opacity: 0.32;
  transform: translateX(0);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-steps li::before {
  position: absolute;
  top: 19px;
  left: -32px;
  z-index: 2;
  box-sizing: border-box; /* the global reset's `*` does not reach pseudo-elements */
  width: 12px;
  height: 12px;
  border: 3px solid var(--paper-deep);
  border-radius: 50%;
  background: rgba(28, 35, 43, 0.2);
  box-shadow: 0 0 0 1px rgba(28, 35, 43, 0.12);
  content: "";
  transition: background-color 180ms ease, transform 180ms ease;
}

.demo-steps li.is-past {
  opacity: 0.68;
}

.demo-steps li.is-past::before,
.demo-steps li.active::before {
  background: var(--focus);
}

.demo-steps li.active {
  opacity: 1;
  transform: translateX(6px);
}

.demo-steps li.active::before {
  /* cancel the li's translateX(6px) so the dot stays on the rail */
  transform: translateX(-6px) scale(1.15);
}

.demo-steps li b {
  color: var(--ink);
  font-weight: var(--ks-typography-weight-strong);
}

/* The right column is one sticky coordinate for all three stories. */
.demo-device-stage {
  --demo-device-scale: 0.84;
  --demo-visual-center: clamp(331px, 35vh, 362px);
  --demo-mesh-a: rgba(78, 174, 202, 0.2);
  --demo-mesh-b: rgba(126, 200, 190, 0.16);
  --demo-mesh-c: rgba(165, 190, 226, 0.16);
  --demo-mesh-d: rgba(218, 188, 125, 0.1);
  position: sticky;
  top: 80px;
  grid-row: 1 / span 3;
  grid-column: 2;
  width: auto;
  min-width: 0;
  justify-self: stretch;
  align-self: start;
  height: calc(100vh - 80px);
  min-height: 650px;
  overflow: visible;
  isolation: isolate;
}

.demo-device-stage::before {
  position: absolute;
  inset: 2% -10% 6% 16%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 58% 42% at 76% 22%, var(--demo-mesh-a), transparent 72%),
    radial-gradient(ellipse 52% 54% at 45% 48%, var(--demo-mesh-b), transparent 74%),
    radial-gradient(ellipse 48% 44% at 79% 76%, var(--demo-mesh-c), transparent 72%),
    radial-gradient(ellipse 38% 34% at 28% 78%, var(--demo-mesh-d), transparent 74%);
  content: "";
  filter: blur(18px) saturate(112%);
  opacity: 0.9;
  pointer-events: none;
  transform: translateZ(0);
  transition: filter 480ms ease, opacity 480ms ease;
}

.demo-device-stage[data-demo-story="w3"]::before {
  --demo-mesh-a: rgba(106, 171, 142, 0.2);
  --demo-mesh-b: rgba(126, 194, 188, 0.16);
  --demo-mesh-c: rgba(181, 196, 158, 0.15);
  --demo-mesh-d: rgba(211, 170, 111, 0.1);
}

.demo-device-stage[data-demo-story="w4"]::before {
  --demo-mesh-a: rgba(104, 122, 194, 0.2);
  --demo-mesh-b: rgba(112, 179, 198, 0.15);
  --demo-mesh-c: rgba(172, 158, 218, 0.15);
  --demo-mesh-d: rgba(218, 175, 148, 0.09);
}

.demo-device-stage.cairn-demos .iphone-device {
  position: absolute;
  z-index: 8;
  top: var(--demo-visual-center);
  right: clamp(0px, 1.5vw, 22px);
  margin: 0;
  transform: translateY(-50%) scale(var(--demo-device-scale));
  transform-origin: center right;
}

.demo-device-stage .iphone-device::after {
  position: absolute;
  z-index: 2;
  inset: var(--ks-website-device-bezel-width);
  border-radius: var(--ks-website-device-screen-radius);
  background: rgba(246, 245, 239, 0.46);
  content: "";
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: opacity 340ms ease;
}

.demo-device-stage[data-demo-phase="2"] .iphone-device::after,
.demo-device-stage[data-demo-phase="3"] .iphone-device::after {
  opacity: 0.38;
}

.demo-device-stage[data-demo-story="w4"][data-demo-phase="1"] .iphone-device::after {
  opacity: 0.34;
}

.demo-device-stage .iphone-device > .demo-device-screen {
  position: absolute;
  inset:
    var(--ks-website-device-bezel-width) auto auto
    var(--ks-website-device-bezel-width);
  z-index: 1;
  width: var(--ks-phone-width, 390px);
  height: var(--ks-phone-height, 844px);
  overflow: hidden;
  border-radius: var(--ks-website-device-screen-radius);
  background: var(--ks-color-background-canvas);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.992);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 260ms ease;
}

.demo-device-stage .iphone-device > .demo-device-screen.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.demo-showcase-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.demo-mood-handoff-anchor {
  position: absolute;
  z-index: 3;
  top: var(--demo-mood-origin-y, 22%);
  left: var(--demo-mood-origin-x, 78%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.demo-device-stage .iphone-device > .demo-device-screen.is-entering,
.demo-device-stage .iphone-device > .demo-device-screen.is-leaving {
  transition: none;
  will-change: opacity, transform, filter;
}

.demo-device-stage .iphone-device > .demo-device-screen.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.demo-device-stage .iphone-device > .demo-device-screen:not(.is-active):not(.is-leaving) {
  visibility: hidden;
  transition: none;
}

.demo-device-stage[data-demo-switch-direction="forward"] .demo-device-screen.is-entering {
  animation: demo-screen-enter-forward 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.demo-device-stage[data-demo-switch-direction="forward"] .demo-device-screen.is-leaving {
  animation: demo-screen-leave-forward 310ms cubic-bezier(0.4, 0, 1, 1) both;
}

.demo-device-stage[data-demo-switch-direction="backward"] .demo-device-screen.is-entering {
  animation: demo-screen-enter-backward 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.demo-device-stage[data-demo-switch-direction="backward"] .demo-device-screen.is-leaving {
  animation: demo-screen-leave-backward 310ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes demo-screen-enter-forward {
  from { opacity: 0; filter: blur(2.5px); transform: translateY(18px) scale(0.988); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes demo-screen-leave-forward {
  from { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  to { opacity: 0; filter: blur(2px); transform: translateY(-12px) scale(0.988); }
}

@keyframes demo-screen-enter-backward {
  from { opacity: 0; filter: blur(2.5px); transform: translateY(-18px) scale(0.988); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes demo-screen-leave-backward {
  from { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  to { opacity: 0; filter: blur(2px); transform: translateY(12px) scale(0.988); }
}

/* One visual object continues from the approved phone record into the orbit.
   Both endpoints are measured at runtime, so the same motion works across
   desktop, portrait, and compact-height layouts without a second satellite. */
.demo-mood-transfer-path {
  position: absolute;
  z-index: 22;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.demo-mood-transfer-path path {
  fill: none;
  stroke: rgba(166, 125, 61, 0.62);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 0.055 0.075;
  stroke-dashoffset: 1;
}

.demo-mood-transfer {
  position: absolute;
  z-index: 24;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-80px, -80px, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

.demo-mood-transfer-orb {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(166, 125, 61, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 250, 231, 0.96) 0 12%, transparent 13%),
    linear-gradient(150deg, #f1dfb5 3%, #d4ad68 58%, #ad7543 100%);
  box-shadow:
    0 0 0 8px rgba(216, 182, 108, 0.11),
    0 8px 18px rgba(125, 91, 49, 0.2);
}

.demo-mood-transfer-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  padding: 4px 8px;
  border: 1px solid rgba(166, 125, 61, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px rgba(125, 91, 49, 0.12);
  color: #57472f;
  font-size: 0.68rem;
  font-weight: var(--ks-typography-weight-strong);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(3px);
}

/* Spotlight Chapters: details originate at coordinates inside the real phone
   UI, become readable in the whitespace, then dock into the Highlight. */
.demo-source-cloud {
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.demo-source-kicker,
.demo-source-verdict {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.demo-source-kicker {
  top: 13%;
  left: 7%;
  color: var(--focus);
  font-size: 0.78rem;
  font-family: var(--ks-font-evidence);
  font-weight: var(--ks-typography-weight-label);
  letter-spacing: var(--ks-typography-tracking-system);
  opacity: var(--demo-source-caption-opacity, 0);
}

.demo-source-verdict {
  right: 44%;
  bottom: 12%;
  width: 190px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
  opacity: var(--demo-source-verdict-opacity, 0);
  text-align: right;
}

.demo-source-verdict b {
  color: var(--ink);
  font-weight: var(--ks-typography-weight-strong);
}

.demo-source-cloud > span {
  position: absolute;
  width: 164px;
  min-height: 56px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(28, 35, 43, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 28px rgba(20, 35, 65, 0.09);
  opacity: var(--demo-signal-opacity, 0);
  filter: blur(var(--demo-signal-blur, 0px));
  transform: translate3d(var(--demo-signal-x, 0px), var(--demo-signal-y, 0px), 0) scale(var(--demo-signal-scale, 0.96));
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.demo-source-cloud > span small {
  color: var(--muted);
  font-family: var(--ks-font-narrative);
  font-size: 0.69rem;
  font-weight: var(--ks-typography-weight-label);
}

.demo-source-cloud > span b {
  color: var(--ink);
  font-family: var(--ks-font-narrative);
  font-size: 0.88rem;
  font-weight: var(--ks-typography-weight-strong);
  line-height: 1.22;
}

.demo-source-number {
  font-family: var(--ks-font-evidence);
  font-weight: var(--ks-typography-weight-data);
  font-variant-numeric: tabular-nums;
}

.demo-source-cloud > span::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--focus) 52%, transparent), transparent);
  content: "";
  opacity: var(--demo-signal-opacity, 0);
}

.demo-source-cloud > span::before {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--focus);
  box-shadow: 0 3px 9px rgba(20, 35, 65, 0.18);
  color: white;
  content: attr(data-demo-link);
  font-size: 0.6rem;
  font-weight: var(--ks-typography-weight-action);
}

[data-demo-sources="w2"] > span:nth-of-type(1),
[data-demo-sources="w3"] > span:nth-of-type(1) { right: 326px; top: 23%; }
[data-demo-sources="w2"] > span:nth-of-type(2),
[data-demo-sources="w3"] > span:nth-of-type(2) { right: 430px; top: 39%; }
[data-demo-sources="w2"] > span:nth-of-type(3),
[data-demo-sources="w3"] > span:nth-of-type(3) { right: 292px; top: 62%; }
[data-demo-sources="w2"] > span:nth-of-type(4),
[data-demo-sources="w3"] > span:nth-of-type(4) { right: 448px; top: 70%; }

[data-demo-sources="w4"] {
  opacity: 0;
  visibility: hidden;
}

/* The Highlight is already in its destination. Evidence becomes its header,
   then the rest of the result unfolds downward; nothing is pulled from the
   result position inside the phone. */
.demo-focus-card {
  position: absolute;
  z-index: 18;
  top: var(--demo-visual-center);
  right: clamp(4px, 2vw, 28px);
  width: 300px;
  padding: 18px;
  border: 1px solid rgba(28, 35, 43, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 22px 56px rgba(20, 35, 65, 0.14), 0 4px 12px rgba(20, 35, 65, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 var(--demo-card-clip, 96%) 0 round 16px);
  transform: translateY(-50%) translate3d(var(--demo-spot-x, 0px), var(--demo-spot-y, 0px), 0) scale(var(--demo-spot-scale, 0.965));
  transform-origin: center;
  will-change: transform, opacity, clip-path;
}

.demo-device-stage[data-demo-story="w2"] [data-demo-focus="w2"],
.demo-device-stage[data-demo-story="w3"] [data-demo-focus="w3"],
.demo-device-stage[data-demo-story="w4"] [data-demo-focus="w4"] {
  opacity: var(--demo-card-opacity, 0);
  visibility: visible;
}

.demo-focus-origin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: var(--focus);
  font-size: 0.7rem;
  font-weight: var(--ks-typography-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-focus-origin::before,
.demo-focus-origin::after {
  height: 1px;
  background: color-mix(in srgb, var(--focus) 28%, transparent);
  content: "";
}

.demo-focus-origin::before {
  width: 22px;
}

.demo-focus-origin::after {
  flex: 1;
}

.demo-focus-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.demo-focus-head img {
  width: 78px;
  height: 78px;
  border: 1px solid rgba(28, 35, 43, 0.1);
  border-radius: 12px;
  object-fit: cover;
}

.demo-focus-head p,
.demo-focus-kicker {
  margin: 0 0 4px;
  color: var(--ochre-text);
  font-size: 0.7rem;
  font-weight: var(--ks-typography-weight-strong);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-focus-card h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.72rem;
  line-height: 1.05;
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
}

.demo-focus-head div > span,
.demo-focus-summary {
  display: block;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.demo-focus-facts {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid rgba(28, 35, 43, 0.09);
}

.demo-focus-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -3px 0 12px;
  opacity: 1;
  transform: none;
}

.demo-focus-context span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--focus) 22%, rgba(28, 35, 43, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--focus) 7%, white);
  color: #3c4852;
  font-size: 0.69rem;
  font-weight: var(--ks-typography-weight-strong);
  opacity: var(--demo-context-dock, 0);
  transform: translateY(var(--demo-context-dock-y, 9px));
  transition: opacity 140ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-focus-context span[data-demo-link]::before {
  width: 15px;
  height: 15px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--focus);
  color: white;
  content: attr(data-demo-link);
  font-size: 0.54rem;
  font-weight: var(--ks-typography-weight-action);
}

.demo-focus-facts > span,
.demo-mood-context > span {
  min-height: 44px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(28, 35, 43, 0.09);
}

.demo-focus-facts small,
.demo-mood-context small {
  color: var(--muted);
  font-size: 0.7rem;
}

.demo-focus-facts b,
.demo-mood-context b {
  color: #313b44;
  font-size: 0.83rem;
  font-weight: var(--ks-typography-weight-label);
}

.demo-focus-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.demo-focus-actions span,
.demo-focus-actions strong {
  min-height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(28, 35, 43, 0.12);
  border-radius: 8px;
  color: #46515b;
  background: var(--paper-soft);
  font-size: 0.8rem;
  font-weight: var(--ks-typography-weight-action);
}

.demo-focus-actions strong {
  border-color: var(--focus);
  color: var(--cream);
  background: var(--focus);
}

.demo-focus-afterbeat {
  max-height: 0;
  margin: 0;
  padding: 0 0 0 10px;
  overflow: hidden;
  border-left: 2px solid var(--focus);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(5px);
  transition: max-height 320ms ease, margin 320ms ease, opacity 260ms ease, transform 320ms ease;
}

.demo-device-stage[data-demo-phase="3"] .demo-focus-card .demo-focus-afterbeat {
  max-height: 90px;
  margin-top: 13px;
  opacity: 1;
  transform: translateY(0);
}

.demo-focus-afterbeat b {
  color: var(--ink);
  font-weight: var(--ks-typography-weight-strong);
}

.demo-focus-card--recovery {
  border-color: color-mix(in srgb, var(--sage) 30%, transparent);
}

.demo-focus-card--mood {
  width: 328px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.demo-focus-card--mood blockquote {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2vw, 1.86rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* The care card establishes the destination first; its central thought then
   continues out of the chat in reading order instead of arriving as a poster. */
.demo-mood-stream-quote {
  display: block;
}

.demo-mood-stream-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  will-change: opacity, transform;
}

.demo-device-stage[data-demo-story="w4"].is-mood-quote-streaming
  .demo-mood-stream-word {
  animation: demo-mood-word-stream 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(170ms + var(--demo-stream-index) * 62ms);
}

.demo-mood-care {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(94, 110, 174, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 22px 56px rgba(20, 35, 65, 0.14), 0 4px 12px rgba(20, 35, 65, 0.07);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 260ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-mood-context {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 340ms ease, margin 340ms ease, opacity 260ms ease;
}

.demo-mood-context > small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.demo-mood-context .demo-focus-context {
  margin: 8px 0 0;
}

.demo-device-stage[data-demo-story="w4"][data-demo-phase="2"] .demo-mood-context,
.demo-device-stage[data-demo-story="w4"][data-demo-phase="3"] .demo-mood-context {
  max-height: 120px;
  margin-top: 15px;
  opacity: 1;
}

.demo-mood-outcome {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.97);
  transition:
    opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 220ms linear;
}

.demo-mood-outcome > .demo-focus-origin {
  margin: 0 2px 1px;
}

.demo-mood-outcome > .demo-focus-origin span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.demo-mood-orbit-stage {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid rgba(94, 110, 174, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 40%, rgba(216, 182, 108, 0.25), transparent 38%),
    radial-gradient(circle at 14% 24%, rgba(94, 110, 174, 0.3) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 13%, rgba(94, 110, 174, 0.2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 21%, rgba(177, 135, 71, 0.4) 0 1px, transparent 1.7px),
    linear-gradient(154deg, #fbfaf6 0%, #f2f1f6 54%, #e7eaf3 100%);
  background-size: auto, 94px 82px, 126px 112px, 138px 124px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -22px 48px rgba(94, 110, 174, 0.06),
    0 18px 38px rgba(57, 67, 101, 0.12);
  color: var(--ink);
}

.demo-mood-planet {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
}

.demo-mood-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(94, 110, 174, 0.34);
}

.demo-mood-orbit--wide {
  inset: -14px;
  transform: rotate(-18deg) scaleY(0.62);
}

.demo-mood-orbit--near {
  inset: 7px;
  transform: rotate(28deg) scaleY(0.72);
  border-color: rgba(166, 125, 61, 0.48);
}

.demo-mood-planet-core {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(94, 110, 174, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 27%, rgba(255, 255, 255, 0.72) 0 7%, transparent 8%),
    radial-gradient(circle at 66% 69%, rgba(58, 67, 105, 0.18) 0 10%, transparent 11%),
    linear-gradient(148deg, #c9cfe2 4%, #8e99c0 48%, #6572a3 100%);
  box-shadow:
    inset 9px 8px 17px rgba(255, 255, 255, 0.38),
    inset -10px -9px 20px rgba(55, 64, 103, 0.22),
    0 14px 28px rgba(64, 73, 111, 0.22);
}

.demo-mood-settled-node {
  position: absolute;
  top: 22px;
  right: 14px;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #d8b66c;
  box-shadow: 0 0 0 0 rgba(216, 182, 108, 0.18);
  opacity: 0;
  transform: scale(0.45);
  transition:
    opacity 140ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

.demo-mood-settled-node > span {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  padding: 3px 6px;
  border: 1px solid rgba(94, 110, 174, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(64, 73, 111, 0.12);
  color: #4f587b;
  font-size: 0.58rem;
  font-weight: var(--ks-typography-weight-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.demo-mood-orbit-copy {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 150px;
}

.demo-mood-orbit-copy .demo-focus-kicker {
  color: #8c6a34;
}

.demo-mood-orbit-copy h4 {
  color: #30384c;
  font-size: 1.8rem;
}

.demo-mood-orbit-copy > span {
  display: block;
  margin-top: 8px;
  color: #687085;
  font-size: 0.82rem;
  line-height: 1.42;
}

.demo-mood-pattern {
  margin-top: 0;
  padding: 15px;
  border: 1px solid rgba(94, 110, 174, 0.16);
  border-radius: 13px;
  background: rgba(248, 249, 253, 0.94);
  box-shadow: 0 12px 30px rgba(57, 67, 101, 0.08);
  opacity: 0;
  transform: translateY(8px);
}

.demo-mood-pattern p {
  margin: 0;
  color: #5e6eae;
  font-size: 0.76rem;
  font-weight: var(--ks-typography-weight-strong);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-mood-pattern strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: var(--display-weight);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.demo-mood-pattern small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.demo-pattern-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  margin-top: 13px;
}

.demo-pattern-chain::before {
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(94, 110, 174, 0.26);
  content: "";
}

.demo-pattern-chain::after {
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #7e8bc1;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

.demo-pattern-chain > span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  justify-items: center;
  color: #69739e;
  font-size: 0.61rem;
  line-height: 1.15;
  text-align: center;
}

.demo-pattern-chain b {
  font-weight: var(--ks-typography-weight-strong);
}

.demo-pattern-chain i {
  width: 9px;
  height: 9px;
  border: 2px solid #f3f4fa;
  border-radius: 50%;
  background: #7e8bc1;
  box-shadow: 0 0 0 1px rgba(94, 110, 174, 0.2);
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-care {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(2px);
  transform: translateY(-12px);
  pointer-events: none;
  transition-delay: 0ms;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-outcome {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0ms;
}

.demo-device-stage.is-mood-transfer-complete .demo-mood-settled-node {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 7px rgba(216, 182, 108, 0.12);
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-planet-core {
  animation: demo-mood-planet-receive 680ms cubic-bezier(0.22, 1, 0.36, 1) 1160ms both;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] :is(.demo-mood-orbit--wide, .demo-mood-orbit--near) {
  animation: demo-mood-orbit-turn 12s linear 70ms infinite;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-pattern {
  animation: demo-mood-pattern-in 440ms cubic-bezier(0.22, 1, 0.36, 1) 1180ms both;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain::after {
  animation: demo-mood-pattern-line 560ms cubic-bezier(0.22, 1, 0.36, 1) 1320ms both;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain i {
  animation: demo-mood-pattern-node 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain > span:nth-child(1) i { animation-delay: 1290ms; }
.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain > span:nth-child(2) i { animation-delay: 1440ms; }
.demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain > span:nth-child(3) i { animation-delay: 1590ms; }

@keyframes demo-mood-orbit-turn {
  to { rotate: 1turn; }
}

@keyframes demo-mood-word-stream {
  from {
    opacity: 0;
    transform: translateY(0.32em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes demo-mood-planet-receive {
  0%, 100% {
    box-shadow:
      inset 9px 8px 17px rgba(255, 255, 255, 0.38),
      inset -10px -9px 20px rgba(55, 64, 103, 0.22),
      0 14px 28px rgba(64, 73, 111, 0.22);
  }
  54% {
    box-shadow:
      inset 9px 8px 17px rgba(255, 255, 255, 0.46),
      inset -10px -9px 20px rgba(55, 64, 103, 0.18),
      0 0 0 14px rgba(216, 182, 108, 0.12),
      0 16px 34px rgba(125, 91, 49, 0.2);
  }
}

@keyframes demo-mood-pattern-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes demo-mood-pattern-line {
  to { transform: scaleX(1); }
}

@keyframes demo-mood-pattern-node {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@media (min-width: 921px) and (max-height: 920px) {
  .demo-device-stage {
    --demo-device-scale: 0.78;
    --demo-visual-center: 41%;
    min-height: 590px;
  }

  .demo-focus-card {
    transform-origin: center;
  }
}

@media (min-width: 921px) and (max-height: 860px) {
  .demo-mood-orbit-stage {
    min-height: 214px;
  }

  .demo-mood-pattern {
    margin-top: 0;
    padding: 11px 13px;
  }

  .demo-mood-pattern small {
    margin-top: 6px;
    font-size: 0.74rem;
    line-height: 1.36;
  }

  .demo-pattern-chain {
    margin-top: 10px;
  }
}

@media (min-width: 921px) and (max-height: 790px) {
  .demo-device-stage {
    --demo-device-scale: 0.64;
    --demo-visual-center: 51%;
    min-height: 540px;
  }

  .demo-focus-card {
    padding: 14px;
  }

  .demo-focus-facts > span {
    min-height: 37px;
  }

  .demo-copy {
    top: 96px;
  }

  .demo-copy h3 {
    max-width: 13ch;
    margin-top: 8px;
    font-size: 2.2rem;
    line-height: 1.02;
  }

  .demo-copy p {
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .demo-progress-readout {
    margin-top: 16px;
    padding-bottom: 6px;
  }

  .demo-steps {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .demo-steps li {
    min-height: 45px;
    padding: 10px 0;
    font-size: 0.82rem;
  }

  .demo-steps li::before {
    top: 13px;
  }
}

@media (max-width: 1120px) and (min-width: 921px) {
  .demo-stack {
    grid-template-columns: minmax(292px, 0.8fr) minmax(490px, 1.2fr);
    gap: 30px;
  }

  .demo-copy h3 {
    font-size: clamp(2rem, 3.6vw, 2.55rem);
  }

  .demo-focus-card {
    right: 8px;
    width: 286px;
  }

  .demo-source-cloud {
    right: 0;
    width: auto;
  }

  .demo-source-cloud > span {
    width: 154px;
  }

  [data-demo-sources="w2"] > span:nth-of-type(1),
  [data-demo-sources="w3"] > span:nth-of-type(1) { right: 274px; }
  [data-demo-sources="w2"] > span:nth-of-type(2),
  [data-demo-sources="w3"] > span:nth-of-type(2) { right: 356px; }
  [data-demo-sources="w2"] > span:nth-of-type(3),
  [data-demo-sources="w3"] > span:nth-of-type(3) { right: 242px; }
  [data-demo-sources="w2"] > span:nth-of-type(4),
  [data-demo-sources="w3"] > span:nth-of-type(4) { right: 372px; }

  .demo-focus-card--mood {
    width: 312px;
  }
}

@media (max-width: 920px) {
  .demos .section-head {
    padding-bottom: 22px;
  }

  .demo-stack {
    --demo-mobile-stage-height: clamp(500px, 62svh, 580px);
    --demo-mobile-phone-column: clamp(176px, 54vw, 246px);
    display: block;
    padding-bottom: 52px;
  }

  .demo-device-stage {
    --demo-device-scale: 0.66;
    position: sticky;
    top: 64px;
    z-index: 8;
    width: 100%;
    height: var(--demo-mobile-stage-height);
    min-height: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--paper-deep) 94%, transparent);
    backdrop-filter: blur(10px);
  }

  .demo-device-stage::before {
    inset: 4% calc(var(--demo-mobile-phone-column) * -0.08) 7% 8%;
    filter: blur(14px) saturate(108%);
    transform: translateZ(0);
  }

  .demo-device-stage.cairn-demos .iphone-device {
    top: 50%;
    right: -6px;
    left: auto;
    transform: translateY(-50%) scale(var(--demo-device-scale));
    transform-origin: center right;
  }

  .demo-section {
    height: 165svh;
    min-height: 165svh;
    opacity: 0.18;
  }

  .demo-section[data-vignette="w4"] {
    height: calc(165svh + var(--demo-mood-hold-distance));
    min-height: calc(165svh + var(--demo-mood-hold-distance));
  }

  .demo-section.is-active {
    opacity: 1;
  }

  .demo-copy {
    top: calc(64px + var(--demo-mobile-stage-height) - 1px);
    max-width: none;
    max-height: calc(100svh - 64px - var(--demo-mobile-stage-height));
    margin: 0 6px;
    padding: 15px 17px 18px;
    overflow: hidden;
    border: 1px solid rgba(28, 35, 43, 0.1);
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper-deep) 94%, transparent);
    box-shadow: 0 12px 34px rgba(20, 35, 65, 0.07);
    backdrop-filter: blur(14px);
  }

  .demo-copy::before {
    display: none;
  }

  .demo-copy h3 {
    max-width: 15ch;
    margin-top: 8px;
    font-size: clamp(1.65rem, 5.4vw, 2.15rem);
    line-height: 1.02;
  }

  .demo-copy p {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    font-size: 0.94rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .demo-progress-readout {
    margin-top: 13px;
    padding-bottom: 6px;
    font-size: 0.73rem;
  }

  /* Responsive exposure contract: wide layouts preserve the visible beat
     trail; once phone and copy stack, only the synchronized beat is exposed. */
  .demo-steps {
    min-height: 72px;
    margin-top: 8px;
    padding: 16px 0 0;
  }

  .demo-steps::before,
  .demo-steps::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  .demo-steps::after {
    transform: scaleX(var(--demo-progress));
  }

  .demo-steps li {
    display: none;
    min-height: 0;
    padding: 10px 0 0;
    border-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.46;
    opacity: 0;
  }

  .demo-steps li::before {
    display: none;
  }

  .demo-steps li.active {
    display: block;
    opacity: 1;
    transform: none;
  }

  .demo-source-cloud {
    inset: 0;
    width: auto;
  }

  .demo-source-cloud > span {
    width: 128px;
    min-height: 49px;
    padding: 8px 9px 9px;
    background: rgba(255, 255, 255, 0.96);
  }

  .demo-source-kicker,
  .demo-source-verdict {
    display: none;
  }

  [data-demo-sources="w2"] > span:nth-of-type(1),
  [data-demo-sources="w3"] > span:nth-of-type(1) { right: 108px; top: 27%; }
  [data-demo-sources="w2"] > span:nth-of-type(2),
  [data-demo-sources="w3"] > span:nth-of-type(2) { right: 174px; top: 43%; }
  [data-demo-sources="w2"] > span:nth-of-type(3),
  [data-demo-sources="w3"] > span:nth-of-type(3) { right: 78px; top: 60%; }
  [data-demo-sources="w2"] > span:nth-of-type(4),
  [data-demo-sources="w3"] > span:nth-of-type(4) { right: 184px; top: 73%; }

  .demo-source-cloud > span small {
    font-size: 0.62rem;
  }

  .demo-source-cloud > span b {
    font-size: 0.72rem;
  }

  .demo-focus-card {
    top: 52%;
    right: 0;
    left: auto;
    width: 252px;
    max-height: calc(100% - 10px);
    padding: 14px;
    overflow: hidden;
    transform-origin: center;
  }

  .demo-focus-card--mood {
    top: 50%;
    right: 0;
    width: 276px;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .demo-mood-planet {
    top: 80px;
    right: 13px;
    width: 96px;
    height: 96px;
  }

  .demo-mood-planet-core {
    width: 64px;
    height: 64px;
  }

  .demo-mood-settled-node {
    top: 18px;
    right: 10px;
  }

  .demo-mood-orbit-copy {
    top: 14px;
    left: 14px;
    width: calc(100% - 28px);
  }

  .demo-mood-orbit-copy h4 {
    font-size: 1.55rem;
  }

  .demo-mood-orbit-copy > span {
    width: 126px;
  }

  .demo-mood-care {
    padding: 14px;
  }

  .demo-mood-orbit-stage {
    min-height: 210px;
  }

  .demo-focus-origin {
    margin-bottom: 10px;
    font-size: 0.7rem;
  }

  .demo-focus-context {
    gap: 4px;
    margin-bottom: 10px;
  }

  .demo-focus-context span {
    padding: 5px 7px;
    font-size: 0.69rem;
  }

  .demo-focus-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
  }

  .demo-focus-head img {
    width: 58px;
    height: 58px;
  }

  .demo-focus-card h4 {
    font-size: 1.36rem;
  }

  .demo-focus-head div > span,
  .demo-focus-summary {
    font-size: 0.8rem;
  }

  .demo-focus-facts {
    margin-top: 10px;
  }

  .demo-focus-facts > span,
  .demo-mood-context > span {
    min-height: 38px;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 7px;
  }

  .demo-focus-facts small,
  .demo-mood-context small {
    font-size: 0.7rem;
  }

  .demo-focus-facts b,
  .demo-mood-context b {
    font-size: 0.8rem;
  }

  .demo-focus-actions {
    gap: 5px;
    margin-top: 10px;
  }

  .demo-focus-actions span,
  .demo-focus-actions strong {
    min-height: 36px;
    font-size: 0.76rem;
  }

  .demo-focus-afterbeat {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .demo-device-stage[data-demo-phase="3"] .demo-focus-card .demo-focus-afterbeat {
    margin-top: 8px;
  }

}

@media (max-width: 560px) {
  .demo-stack {
    --demo-mobile-stage-height: clamp(530px, 62svh, 560px);
    --demo-mobile-phone-column: clamp(172px, 53vw, 218px);
  }

  .demo-device-stage {
    --demo-device-scale: 0.615;
  }

  .demo-copy {
    margin-inline: 4px;
    padding: 14px 14px 16px;
  }

  .demo-copy .section-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .demo-copy h3 {
    font-size: clamp(1.45rem, 6.4vw, 1.8rem);
  }

  .demo-copy p {
    font-size: 0.88rem;
  }

  .demo-steps li {
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .demo-focus-card {
    right: 0;
    width: 246px;
    padding: 13px;
  }

  .demo-focus-card--mood {
    right: 0;
    width: 266px;
  }

  .demo-focus-head {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .demo-focus-head img {
    width: 58px;
    height: 58px;
  }

  .demo-focus-card h4 {
    font-size: 1.3rem;
  }

  .demo-focus-card--mood blockquote {
    font-size: 1.42rem;
  }

  .demo-source-cloud > span {
    width: 122px;
    min-height: 47px;
    padding: 7px 8px 8px;
  }

  .demo-source-cloud > span small {
    font-size: 0.59rem;
  }

  .demo-source-cloud > span b {
    font-size: 0.68rem;
  }

  .demo-mood-pattern {
    margin-top: 0;
    padding: 11px;
  }

  .demo-mood-pattern strong {
    font-size: 0.82rem;
  }

  .demo-mood-pattern small {
    font-size: 0.68rem;
  }
}

@media (max-width: 920px) and (max-height: 680px) {
  .demo-stack {
    --demo-mobile-stage-height: clamp(280px, 48svh, 320px);
  }

  .demo-device-stage {
    --demo-device-scale: 0.37;
  }

  .demo-focus-card--mood {
    min-height: 0;
  }

  .demo-mood-orbit-stage {
    min-height: 142px;
  }

  .demo-mood-planet {
    top: 16px;
    right: 10px;
    width: 90px;
    height: 90px;
  }

  .demo-mood-planet-core {
    width: 60px;
    height: 60px;
  }

  .demo-mood-settled-node {
    top: 16px;
    right: 9px;
  }

  .demo-mood-orbit-copy {
    top: 12px;
    left: 12px;
    width: 116px;
  }

  .demo-mood-orbit-copy h4 {
    font-size: 1.3rem;
  }

  .demo-mood-orbit-copy > span {
    font-size: 0.66rem;
  }

  .demo-mood-pattern {
    margin-top: 0;
    padding: 8px;
  }

  .demo-mood-pattern strong {
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .demo-mood-pattern small {
    display: none;
  }

  .demo-pattern-chain {
    margin-top: 9px;
  }

  .demo-pattern-chain > span {
    font-size: 0.52rem;
  }

  .demo-copy p {
    -webkit-line-clamp: 2;
  }
}

/* A short landscape viewport is still a wide reading surface. Keep the phone
   and copy side by side, and restore the four-beat trail instead of applying
   the portrait-only current-beat treatment merely because width is <= 920px. */
@media (max-width: 920px) and (orientation: landscape) {
  .demos .section-head {
    padding-bottom: 8px;
  }

  .demo-stack {
    --demo-mobile-stage-height: calc(100svh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
    padding: 4px 0 40px;
  }

  .demo-section,
  .demo-section[data-vignette="w4"] {
    grid-column: 1;
    height: 165svh;
    min-height: 165svh;
  }

  .demo-section[data-vignette="w4"] {
    height: calc(165svh + var(--demo-mood-hold-distance));
    min-height: calc(165svh + var(--demo-mood-hold-distance));
  }

  .demo-device-stage {
    --demo-device-scale: 0.54;
    position: sticky;
    top: 64px;
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
    height: var(--demo-mobile-stage-height);
    min-height: 0;
  }

  .demo-device-stage::before {
    inset: 3% -18px 6% 6%;
  }

  .demo-device-stage.cairn-demos .iphone-device {
    top: 50%;
    right: -6px;
  }

  .demo-copy {
    top: 72px;
    max-width: none;
    max-height: calc(100svh - 80px);
    margin: 0;
    padding: 12px 14px 13px;
  }

  .demo-copy .section-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 0.66rem;
  }

  .demo-copy h3 {
    max-width: 14ch;
    margin-top: 6px;
    font-size: clamp(1.25rem, 3.2vw, 1.7rem);
    line-height: 1.04;
  }

  .demo-copy p {
    margin-top: 7px;
    font-size: clamp(0.72rem, 1.55vw, 0.84rem);
    line-height: 1.38;
    -webkit-line-clamp: 2;
  }

  .demo-progress-readout {
    margin-top: 9px;
    padding-bottom: 5px;
    font-size: 0.66rem;
  }

  .demo-steps {
    min-height: 0;
    margin-top: 0;
    padding: 4px 0 4px 24px;
  }

  .demo-steps::before,
  .demo-steps::after {
    display: block;
    top: 10px;
    right: auto;
    bottom: 10px;
    left: 4px;
    width: 2px;
    height: auto;
    transform-origin: top;
  }

  .demo-steps::after {
    transform: scaleY(var(--demo-progress));
  }

  .demo-steps li,
  .demo-steps li.active {
    display: block;
    min-height: 31px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(28, 35, 43, 0.09);
    font-size: clamp(0.66rem, 1.35vw, 0.76rem);
    line-height: 1.32;
    opacity: 0.32;
    transform: none;
  }

  .demo-steps li.is-past {
    opacity: 0.68;
  }

  .demo-steps li.active {
    opacity: 1;
  }

  .demo-steps li::before {
    display: block;
    top: 9px;
    left: -24px;
    width: 10px;
    height: 10px;
    border-width: 3px;
  }

  .demo-steps li.active::before {
    transform: scale(1.15);
  }

  .demo-focus-card {
    width: min(236px, 58%);
  }

  .demo-focus-card--mood {
    width: min(250px, 61%);
    max-height: calc(100% - 8px);
    overflow: hidden;
  }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 680px) {
  .demo-device-stage {
    --demo-device-scale: 0.48;
  }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 480px) {
  .demo-device-stage {
    --demo-device-scale: 0.44;
  }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 420px) {
  .demo-device-stage {
    --demo-device-scale: 0.37;
  }
}

@media (max-width: 920px) and (orientation: landscape) and (max-height: 350px) {
  .demo-device-stage {
    --demo-device-scale: 0.28;
  }

  .demo-copy .section-label,
  .demo-copy > p {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .demo-copy h3 {
    margin-top: 0;
    font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  }

  .demo-progress-readout {
    margin-top: 7px;
  }

  .demo-steps li,
  .demo-steps li.active {
    min-height: 26px;
    padding-block: 4px;
    font-size: 0.64rem;
  }

  .demo-focus-card,
  .demo-focus-card--mood {
    width: min(188px, 64%);
  }
}

@media (min-width: 921px) and (max-height: 790px) {
  .demo-mood-orbit-stage {
    min-height: 200px;
  }

  .demo-mood-pattern {
    margin-top: 0;
    padding: 11px;
  }

  .demo-mood-pattern strong {
    font-size: 0.9rem;
  }

  .demo-mood-pattern small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-section,
  .demo-copy::before,
  .demo-steps::after,
  .demo-steps li,
  .demo-steps li::before,
  .demo-device-stage::before,
  .demo-device-stage .iphone-device::before,
  .demo-device-stage .iphone-device::after,
  .demo-device-stage .iphone-device > .demo-device-screen,
  .demo-source-cloud,
  .demo-source-cloud span,
  .demo-source-cloud span::after,
  .demo-focus-card,
  .demo-focus-afterbeat,
  .demo-mood-context,
  .demo-mood-care,
  .demo-mood-outcome,
  .demo-mood-transfer-path,
  .demo-mood-transfer,
  .demo-mood-transfer-label,
  .demo-mood-stream-word,
  .demo-mood-settled-node,
  .demo-mood-planet-core,
  .demo-mood-orbit,
  .demo-mood-pattern,
  .demo-pattern-chain::after,
  .demo-pattern-chain i {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .demo-mood-stream-word {
    opacity: 1;
    transform: none;
  }

  .demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-settled-node,
  .demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-mood-pattern {
    opacity: 1;
    transform: none;
  }

  .demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain::after {
    transform: scaleX(1);
  }

  .demo-device-stage[data-demo-story="w4"][data-demo-playback="5"] .demo-pattern-chain i {
    opacity: 1;
    transform: none;
  }

  .demo-steps li.active {
    transform: none;
  }

  .demo-steps li.active::before {
    /* the li no longer slides, so drop the rail compensation too */
    transform: scale(1.15);
  }
}