/*! Process curved glow timeline + Packs outcomes panel */
:root { --signal: var(--accent, #5367ee); }

#process.process-desk {
  --signal: var(--accent, #5367ee);
  background: #F7F8FA;
  color: var(--ink);
  padding-block: clamp(72px, 6.5vw, 96px);
  overflow: visible;
}
#process.process-desk .pipeline-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.65fr);
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: 10px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  padding: 0; border: 0;
}
#process.process-desk .pipeline-heading .eyebrow { grid-column: 1 / -1; color: var(--signal); }
#process.process-desk .pipeline-heading h2 {
  max-width: 16ch; margin: 0; font-family: var(--display);
  font-size: var(--section-display-size); font-weight: var(--heading-weight, 400);
  letter-spacing: -0.045em; line-height: 0.94;
}
#process.process-desk .pipeline-heading h2 em { font-style: italic; }
#process.process-desk .pipeline-intro {
  align-self: end; max-width: 32ch; margin: 0; padding: 0 0 0.25em; color: var(--ink);
  font-family: var(--display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-style: italic; line-height: 1.22;
}

.process-rail {
  position: relative;
  min-height: clamp(360px, 44vw, 480px);
  margin: 0 0 clamp(8px, 1vw, 18px);
  padding: clamp(12px, 1.6vw, 22px) 0 clamp(52px, 5vw, 72px);
  overflow: visible;
}
.process-glow-svg {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: clamp(300px, 36vw, 400px);
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.process-glow-base {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 18%, transparent);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.process-glow-bloom {
  fill: none;
  stroke: var(--signal, var(--accent, #5367ee));
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Dash length set in JS from getTotalLength() — keep fully hidden until then. */
  stroke-dasharray: 1 10000;
  stroke-dashoffset: 1;
  opacity: 0.28;
  /* No SVG filter — filters clip dashed strokes mid-curve and fake a "break". */
}
.process-glow-line {
  fill: none;
  /* Solid signal — gradient on a dashed stroke can look like a mid-path break. */
  stroke: var(--signal, var(--accent, #5367ee));
  stroke-width: 2.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 10000;
  stroke-dashoffset: 1;
}
.process-glow-head {
  fill: var(--signal, var(--accent, #5367ee));
  stroke: color-mix(in srgb, var(--paper) 70%, #fff);
  stroke-width: 0.6;
  opacity: 0;
  pointer-events: none;
}
.process-glow-aura {
  opacity: 0;
  pointer-events: none;
}
.process-scatter-node { opacity: 0.28 !important; }

.process-scatter { pointer-events: none; }
.process-scatter-node { pointer-events: none; }
#process.is-process-live .process-scatter-node {
  animation: process-node-in 680ms cubic-bezier(.22, 1, .36, 1) both;
}
#process.is-process-live .process-scatter-node:nth-of-type(1) { animation-delay: 120ms; }
#process.is-process-live .process-scatter-node:nth-of-type(2) { animation-delay: 220ms; }
#process.is-process-live .process-scatter-node:nth-of-type(3) { animation-delay: 320ms; }
@keyframes process-node-in {
  from { opacity: 0; }
  to { opacity: .45; }
}
.process-orbit { opacity: 0.85; }
.process-spark { opacity: 0.9; }

.process-stages {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.process-stage {
  --sx: 50%;
  --sy: 50%;
  --node: clamp(58px, 5.8vw, 76px);
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: min(148px, 14vw);
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  transform: translate(-50%, calc(var(--node) * -0.5));
  transition: color 320ms cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
  opacity: 1;
}
/* Keep absolute placement even if legacy reveal classes are present */
html.js #process.process-desk .process-stage.reveal-item,
html.js #process.process-desk .process-stage.scan-reveal {
  position: absolute;
  opacity: 1;
  transform: translate(-50%, calc(var(--node) * -0.5));
}
html.js #process.process-desk .process-stage.scan-reveal::after { display: none; }
.process-stage-node {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 50%;
  background: linear-gradient(160deg, #fff 0%, #fff 42%, color-mix(in srgb, var(--paper) 70%, #fff) 100%);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent),
    inset 0 1px 0 rgba(255,255,255,.92);
  /* Shared navy for every ring icon (not near-black). */
  color: #1a2f55;
  transform: none;
  transition:
    transform 420ms cubic-bezier(.16,1,.3,1),
    border-color 320ms ease,
    color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}
.process-stage-svg { width: 62%; height: 62%; overflow: visible; }
.process-stage .ps-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.34;
  transition: opacity 320ms ease, stroke-dashoffset 620ms cubic-bezier(.16,1,.3,1);
}
.process-stage.is-lit .ps-draw,
.process-stage.is-active .ps-draw {
  stroke-dashoffset: 0;
  opacity: 1;
}
.process-stage .ps-pulse {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.process-stage.is-arriving .process-stage-node {
  animation: process-node-arrive 620ms cubic-bezier(.2, 1.4, .35, 1) both;
}
@keyframes process-node-arrive {
  0% { transform: scale(1); }
  42% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes process-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.18); }
}
.process-stage-num {
  font-family: var(--mono);
  font-size: var(--type-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.process-stage-label {
  color: inherit;
  font-family: var(--body);
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  font-weight: 650;
  letter-spacing: -.02em;
}
.process-stage p {
  margin: 0;
  max-width: 16ch;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-size: .76rem;
  line-height: 1.38;
}
.process-stage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
  background: color-mix(in srgb, var(--signal) 10%, #fff);
  color: var(--signal);
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
  white-space: nowrap;
}
.process-stage.is-lit,
.process-stage.is-active { color: var(--ink); }
.process-stage.is-lit .process-stage-node,
.process-stage.is-active .process-stage-node {
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
  color: #1a2f55;
  background:
    linear-gradient(160deg, #fff, color-mix(in srgb, var(--paper) 65%, #fff));
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--ink) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--signal) 28%, transparent);
  transform: scale(1);
}
.process-stage.is-active .process-stage-node {
  border-color: color-mix(in srgb, var(--signal) 78%, transparent);
  color: var(--signal);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--ink) 9%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--signal) 55%, transparent);
}
.process-stage.is-lit .ps-draw,
.process-stage.is-active .ps-draw { stroke-dashoffset: 0; }
.process-stage.is-active .ps-pulse { opacity: 0.45; }
.process-stage.is-arriving .ps-pulse { opacity: 1; animation: process-pulse 720ms cubic-bezier(.2, 1, .35, 1) both; }
.process-stage.is-active .process-stage-badge,
.process-stage--approve.is-lit .process-stage-badge { opacity: 1; transform: none; }
.process-stage--approve.is-active .process-stage-node,
.process-stage--approve.is-lit .process-stage-node {
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--ink) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--signal) 58%, transparent);
}
.process-stage--ship.is-lit .process-stage-node,
.process-stage--ship.is-active .process-stage-node {
  background: #fff;
  color: var(--signal);
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
}
.process-stage--ship.is-lit .process-stage-label,
.process-stage--ship.is-active .process-stage-label { color: var(--signal); }

.process-stage:not(.is-revealed) {
  opacity: 0.55;
  transform: translate(-50%, calc(var(--node) * -0.5 + 8px));
}
.process-stage.is-revealed {
  opacity: 1;
  filter: none;
  transform: translate(-50%, calc(var(--node) * -0.5));
  transition:
    opacity 560ms cubic-bezier(.22, 1, .36, 1),
    transform 560ms cubic-bezier(.22, 1, .36, 1),
    color 220ms ease;
}
@media (max-width: 980px) {
  .process-stage:not(.is-revealed),
  .process-stage.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
.process-stage--approve {
  --node: clamp(68px, 6.6vw, 88px);
}
.process-stage--approve .process-stage-node {
  width: var(--node);
  height: var(--node);
}
.process-stage--approve.is-focal .process-stage-node,
.process-stage--approve.is-hot .process-stage-node {
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
  color: var(--signal);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--ink) 10%, transparent),
    0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent);
}
.process-stage--approve.is-focal .process-stage-label {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}
.process-stage--approve.is-focal .process-stage-badge,
.process-stage--approve.is-lit .process-stage-badge {
  opacity: 1;
  transform: none;
}
.process-orbit {
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
}
#process.is-process-live .process-orbit[data-direction-ring] {
  transition-delay: 120ms;
}
.process-stage-rings { display: none; }
.is-process-hover .process-glow-base {
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: stroke 220ms ease;
}
.is-process-hover .process-stage.is-hot .process-stage-node {
  border-color: color-mix(in srgb, var(--signal) 62%, transparent);
  color: var(--signal);
}
.is-process-hover .process-stage.is-near .process-stage-node {
  border-color: color-mix(in srgb, var(--signal) 28%, transparent);
}
.is-process-hover .process-stage.is-hot p {
  transform: translateY(-3px);
  color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}
.process-stage p {
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), color 220ms ease;
}
.process-bar { display: none !important; }
.process-bar ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-bar li {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  font-size: 0.8rem;
  line-height: 1.4;
}
.process-bar strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.process-notes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 0 8px;
}
.process-note {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.process-note--human::before,
.process-note--pipe::before,
.process-note--out::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: middle;
  content: "";
}
.taste-process-thread {
  position: relative;
  z-index: 1;
  height: clamp(28px, 3vw, 48px);
  margin-top: -8px;
  background: var(--paper);
  pointer-events: none;
}
.taste-process-thread svg {
  display: block;
  width: 100%;
  height: 100%;
}
.taste-thread-line {
  stroke: color-mix(in srgb, var(--signal) 38%, transparent);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
}
.taste-thread-node {
  fill: var(--paper);
  stroke: var(--signal);
  stroke-width: 1.5;
}
#compare.compare-story.is-taste-live ~ .taste-process-thread .taste-thread-line,
.taste-process-thread.is-drawn .taste-thread-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}

@keyframes process-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}


html[data-skin="nocturne"] #process.process-desk {
  background: var(--paper);
}

@media (max-width: 980px) {
  #process.process-desk {
    padding-block: clamp(40px, 8vw, 56px);
  }
  #process.process-desk .pipeline-heading {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
  }
  #process.process-desk .pipeline-heading h2 {
    max-width: 16ch;
    font-size: 40px;
  }
  #process.process-desk .pipeline-intro {
    max-width: none;
    font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  }
  .process-rail {
    min-height: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 4px 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    touch-action: pan-x;
  }
  .process-glow-svg {
    display: none;
  }
  .process-stages {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    min-width: max(100%, 680px);
    margin: 0;
    padding: 6px 8px 8px;
    border: 0;
    pointer-events: auto;
  }
  .process-stages::before {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 30px;
    height: 1px;
    background: color-mix(in srgb, var(--signal) 34%, transparent);
    content: "";
    pointer-events: none;
  }
  .process-stage,
  .process-stage:nth-child(even) {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    min-width: 88px;
    flex: 1 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "node" "num" "label" "copy" "badge";
    justify-items: center;
    align-content: start;
    column-gap: 0;
    row-gap: 4px;
    margin: 0;
    padding: 0 6px 4px;
    text-align: center;
    transform: none !important;
    opacity: 1 !important;
  }
  .process-stage::before,
  .process-stage:nth-child(even)::before { display: none; }
  html.js #process.process-desk .process-stage.reveal-item,
  html.js #process.process-desk .process-stage.scan-reveal {
    position: relative;
    transform: none;
  }
  .process-stage-node { grid-area: node; width: 48px; height: 48px; transform: scale(1); }
  .process-stage--approve .process-stage-node { width: 54px; height: 54px; }
  .process-stage .ps-draw { stroke-dashoffset: 0; }
  .process-stage-num { grid-area: num; font-size: 0.5rem; }
  .process-stage-label { grid-area: label; font-size: 0.78rem; line-height: 1.15; }
  .process-stage p {
    grid-area: copy;
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .process-stage-badge {
    grid-area: badge;
    white-space: normal;
    max-width: 14ch;
    padding: 4px 7px;
    font-size: 0.42rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
  }
  .process-bar ul {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
  .process-notes {
    position: relative;
    margin-top: 8px;
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 560px) {
  .process-rail { scrollbar-width: none; }
  .process-rail::-webkit-scrollbar { display: none; }
  .process-stages { min-width: max(100%, 620px); padding-inline: 4px; }
  .process-stage,
  .process-stage:nth-child(even) { min-width: 80px; padding-inline: 4px; }
  .process-stage p { display: none; }
  .process-bar li { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .process-stage,
  .process-stage-node,
  .process-stage .ps-draw,
  .process-stage-badge { transition: none !important; }
  .process-stage .ps-draw { stroke-dashoffset: 0; }
  .process-stage.is-active .ps-pulse { animation: process-pulse 1.6s ease-in-out infinite; opacity: 1; }
  .process-glow-bloom,
  .process-glow-line { stroke-dashoffset: 0; }
  .process-glow-head,
  .process-glow-aura { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
  .process-stage:not(.is-revealed) { transform: translate(-50%, calc(var(--node) * -0.5)); }
}

#packs.packs-outcomes {
  --signal: var(--accent, #5367ee);
  background: radial-gradient(ellipse 55% 40% at 80% 0%, color-mix(in srgb, var(--signal) 6%, transparent), transparent 55%), var(--paper);
  color: var(--ink);
  padding-block: clamp(72px, 6.5vw, 96px);
  overflow: visible;
}
#packs.packs-outcomes > .container {
  width: min(100%, calc(var(--max, 1340px) + 2 * var(--gutter, 48px)));
  max-width: none;
}
#packs.packs-outcomes .packs-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.7fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  margin-bottom: clamp(6px, 0.9vw, 10px);
  padding: 0;
  border: 0;
}
#packs.packs-outcomes .packs-head .eyebrow { color: var(--signal); margin-bottom: 8px; font-size: var(--type-micro); }
#packs.packs-outcomes .packs-head h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--display);
  font-size: var(--section-display-size);
  font-weight: var(--heading-weight, 400);
  letter-spacing: -0.045em;
  line-height: 1.02;
}
#packs.packs-outcomes .packs-head-lede {
  display: none;
}
#packs .packs-head-led {
  position: relative;
  inset: auto;
  width: auto;
  max-width: 34ch;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
#packs .packs-head-led .taste-stage-led-kicker {
  margin: 0;
  font: 600 0.8rem var(--body);
  color: var(--ink);
}
#packs .packs-head-led .taste-stage-led-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.outcomes-strip,
.outcomes-scrubline,
.outcomes-hint { display: none !important; }

/* Navy block height is locked — hover must not stretch this panel. */
.outcomes-panel {
  --outcomes-panel-h: clamp(420px, 48vw, 560px);
  --frame-x: 18px;
  --frame-y: 12px;
  position: relative;
  margin-inline: clamp(-12px, -1.2vw, 0px);
  margin-top: 0;
  padding: clamp(28px, 3.2vw, 40px) clamp(28px, 3.4vw, 56px) clamp(28px, 3.2vw, 40px);
  height: var(--outcomes-panel-h);
  min-height: var(--outcomes-panel-h);
  max-height: var(--outcomes-panel-h);
  border-radius: clamp(24px, 3vw, 30px);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 4%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, #fff 3%, transparent), transparent 24%),
    #07152B;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  color: #f4f0e7;
  box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 22%, transparent);
  overflow: hidden;
}
.outcomes-panel.is-live {
  height: var(--outcomes-panel-h);
  min-height: var(--outcomes-panel-h);
  max-height: var(--outcomes-panel-h);
}
.outcomes-panel::before,
.outcomes-panel::after {
  position: absolute;
  left: var(--frame-x);
  right: var(--frame-x);
  height: 1px;
  background: color-mix(in srgb, #fff 16%, transparent);
  content: "";
  pointer-events: none;
}
.outcomes-panel::before { top: var(--frame-y); }
.outcomes-panel::after { bottom: var(--frame-y); }
.outcomes-mark,
.outcomes-cross {
  --frame-x: 18px;
  --frame-y: 12px;
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
  opacity: 0.55;
}
.outcomes-mark::before,
.outcomes-mark::after,
.outcomes-cross::before,
.outcomes-cross::after {
  position: absolute;
  left: 50%;
  top: 50%;
  background: color-mix(in srgb, #fff 70%, transparent);
  content: "";
  transform: translate(-50%, -50%);
}
.outcomes-mark::before,
.outcomes-cross::before { width: 11px; height: 1px; }
.outcomes-mark::after,
.outcomes-cross::after { width: 1px; height: 11px; }
.outcomes-mark--tl { top: var(--frame-y); left: var(--frame-x); transform: translate(-50%, -50%); }
.outcomes-mark--tr { top: var(--frame-y); right: var(--frame-x); transform: translate(50%, -50%); }
.outcomes-mark--bl { bottom: var(--frame-y); left: var(--frame-x); transform: translate(-50%, 50%); }
.outcomes-mark--br { bottom: var(--frame-y); right: var(--frame-x); transform: translate(50%, 50%); }
.outcomes-cross--l { top: 50%; left: var(--frame-x); transform: translate(-50%, -50%); }
.outcomes-cross--r { top: 50%; right: var(--frame-x); transform: translate(50%, -50%); }
.outcomes-watermark {
  position: absolute;
  left: 50%;
  top: clamp(26px, 2.6vw, 38px);
  margin: 0;
  transform: translateX(-50%);
  color: color-mix(in srgb, #fff 6%, transparent);
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Scrub / page chrome removed — hover cards carry the interaction */
.outcomes-scrub,
.outcomes-nav,
.outcomes-panel-meta,
.outcomes-panel-page,
.outcomes-panel-kicker { display: none !important; }

.outcomes-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(72px, 7vw, 96px) 2px 6px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  align-items: center;
  transition: padding-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#packs.packs-outcomes.is-pack-hovering .outcomes-rail {
  /* Keep panel composition stable — only a light tighten on hover */
  padding-top: clamp(48px, 5vw, 72px);
}

/* Strip across the top: what every pack carries */
.outcomes-strip {
  position: absolute;
  left: clamp(28px, 3.4vw, 56px);
  right: clamp(28px, 3.4vw, 56px);
  top: clamp(18px, 1.9vw, 26px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: color-mix(in srgb, #fff 62%, transparent);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.outcomes-strip::before,
.outcomes-strip::after {
  flex: 1 1 auto;
  height: 1px;
  max-width: 22%;
  background: color-mix(in srgb, #fff 18%, transparent);
  content: "";
}
.outcomes-strip i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 45%, transparent);
}
.outcomes-counter {
  position: absolute;
  right: clamp(28px, 3.4vw, 56px);
  top: clamp(14px, 1.6vw, 22px);
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #f4f0e7;
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.outcomes-counter small {
  color: color-mix(in srgb, #fff 42%, transparent);
  font-size: 0.7rem;
}

/* Scrub line under the rail: ticks, and a thumb that follows the active card */
.outcomes-scrubline {
  position: absolute;
  left: clamp(28px, 3.4vw, 56px);
  right: clamp(28px, 3.4vw, 56px);
  bottom: clamp(30px, 2.9vw, 40px);
  height: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, #fff 22%, transparent), color-mix(in srgb, #fff 22%, transparent)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, #fff 26%, transparent) 0 1px, transparent 1px 12.5%) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.outcomes-scrubline-thumb {
  --i: 0;
  --n: 4;
  position: absolute;
  top: 50%;
  left: calc(var(--i) / var(--n) * 100%);
  width: calc(100% / var(--n));
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--signal, #5367ee);
  box-shadow: 0 0 12px color-mix(in srgb, var(--signal, #5367ee) 70%, transparent);
  opacity: 0.45;
  transition: left 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}
.outcomes-panel.is-live .outcomes-scrubline-thumb { opacity: 1; }
.outcomes-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 0.9vw, 12px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  color: color-mix(in srgb, #fff 58%, transparent);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.outcomes-hint span { font-size: 0.9rem; line-height: 1; color: color-mix(in srgb, #fff 45%, transparent); }

.pack-rail-card {
  /* Cards stay cream on the navy panel in both kage + nocturne */
  --pack-card-bg: #f6f1e8;
  --pack-card-ink: #0b1734;
  --pack-card-muted: #5c6577;
  --pack-card-line: rgba(11, 23, 52, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: start;
  align-self: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 100%;
  flex: 1 1 0;
  padding: 18px 18px 18px;
  border-radius: 18px;
  background: var(--pack-card-bg);
  color: var(--pack-card-ink);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: none;
  transform-origin: 50% 50%;
  overflow: hidden;
  /* The expansion is a resize, so flex-grow and the px heights packs-rail.js
     writes are the things that interpolate. They are confined to the cards
     inside a panel whose own height is already locked, so nothing outside the
     rail reflows while this runs. Retuned from 420ms — long enough that the
     card was still arriving when the pointer had already moved on to the next
     one, which is what made the rail feel like it lagged the cursor. */
  transition:
    flex-grow var(--ik-expand, 250ms) var(--ik-ease, ease),
    height var(--ik-expand, 250ms) var(--ik-ease, ease),
    min-height var(--ik-expand, 250ms) var(--ik-ease, ease),
    max-height var(--ik-expand, 250ms) var(--ik-ease, ease),
    transform var(--ik-expand, 250ms) var(--ik-ease, ease),
    box-shadow var(--ik-expand, 250ms) var(--ik-ease, ease),
    opacity var(--ik-expand, 250ms) var(--ik-ease, ease);
  cursor: pointer;
  z-index: 1;
}
.pack-rail-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.pack-rail-card-num {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 100%;
  color: color-mix(in srgb, var(--pack-card-ink) 46%, transparent);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.pack-rail-card-num::after {
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--pack-card-ink) 22%, transparent);
  content: "";
}
.pack-rail-card h3 {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.75vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--pack-card-ink);
}
.pack-rail-card-price {
  margin: 0;
  margin-top: auto;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pack-card-ink);
}
.pack-rail-card-price em {
  display: inline-block;
  margin-right: 8px;
  color: color-mix(in srgb, var(--pack-card-ink) 55%, transparent);
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.35em;
}
.pack-rail-card-price small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--pack-card-ink) 48%, transparent);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pack-rail-card-blurb {
  margin: 0;
  color: var(--pack-card-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.pack-rail-card.is-expanded .pack-rail-card-blurb { display: none; }

.pack-rail-card-visual {
  position: relative;
  display: block;
  min-height: 118px;
  max-height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pack-card-ink) 4%, var(--pack-card-bg));
}
.pack-rail-card-visual img {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pack-rail-card-visual--social {
  display: grid;
  place-items: center;
  min-height: 160px;
  max-height: 200px;
  background: transparent;
  overflow: visible;
}
.outcome-frame {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  background: #111;
}
.outcome-frame img { aspect-ratio: 4 / 5; width: 84px; height: auto; }
.outcome-frame span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(10, 18, 32, 0.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}
.outcome-frame--a { left: 8%; top: 10%; transform: rotate(-8deg); z-index: 1; }
.outcome-frame--b { right: 10%; top: 6%; transform: rotate(7deg); z-index: 3; }
.outcome-frame--b img { width: 98px; }
.outcome-frame--c { left: 28%; bottom: 0; transform: rotate(-2deg); z-index: 2; }
.outcome-frame--c img { width: 90px; }
.pack-rail-card-visual--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  min-height: 160px;
  max-height: 200px;
}
.pack-rail-card-visual--grid img { aspect-ratio: 1; border-radius: 6px; }
.pack-rail-card-visual--film {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 16px 8px;
  min-height: 150px;
  max-height: 190px;
  border-radius: 8px;
  background: #0d1118;
}
/* Sprocket holes top and bottom: the frames read as a strip of film */
.pack-rail-card-visual--film::before,
.pack-rail-card-visual--film::after {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 5px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #3a404c 0 7px, transparent 7px 16px);
  content: "";
  pointer-events: none;
}
.pack-rail-card-visual--film::before { top: 5px; }
.pack-rail-card-visual--film::after { bottom: 5px; }
.pack-rail-card-visual--film img {
  aspect-ratio: 16 / 10;
  align-self: center;
  border-radius: 3px;
  filter: grayscale(0.35) contrast(1.05);
}
.pack-rail-card-visual--wire {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 160px;
  max-height: 200px;
  background: linear-gradient(180deg, #c7cacd 0%, #c3c6ca 55%, #c0c3c7 100%);
  color: color-mix(in srgb, var(--pack-card-ink) 55%, transparent);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--pack-card-ink) 3%, var(--pack-card-bg));
}
.pack-rail-card-visual--wire img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Same rule as the work tiles: the product is shown whole, never cropped to
     fit a landscape slot it was not shot for, and pushed in 15% so it is not
     swimming in backdrop at this size. */
  object-fit: contain;
  transform: scale(1.3);
  transform-origin: center;
  /* Held at .55 behind a wireframe when it was a texture rather than a picture.
     It is the work now, so it reads at full strength. */
  opacity: 1;
  filter: none;
}
.pack-rail-card-visual--wire svg {
  position: relative;
  z-index: 1;
  width: min(58%, 110px);
  height: auto;
  color: #f6f1e8;
  mix-blend-mode: difference;
}

/* Detail overlays the card face so hover never grows the navy panel. */
.pack-rail-card-detail {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  gap: 10px;
  align-content: end;
  margin: 0;
  padding: 18px;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, var(--pack-card-bg) 40%, transparent) 50%,
      var(--pack-card-bg) 58%
    );
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity var(--ik-expand, 250ms) var(--ik-ease, ease),
    transform var(--ik-expand, 250ms) var(--ik-ease, ease);
}
.pack-rail-card-detail[hidden] {
  display: grid !important;
  opacity: 0;
  pointer-events: none;
}
.pack-rail-card.is-expanded .pack-rail-card-detail {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.pack-rail-card-stats {
  list-style: none;
  margin: 0;
  padding: 10px 0 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--pack-card-line);
  border-bottom: 1px solid var(--pack-card-line);
}
.pack-rail-card-stats li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 2px 6px;
  text-align: center;
  color: var(--pack-card-ink);
}
.pack-rail-card-stats li + li { border-left: 1px solid var(--pack-card-line); }
.pack-rail-card-stats svg {
  width: 26px;
  height: 26px;
  color: color-mix(in srgb, var(--pack-card-ink) 70%, transparent);
}
.pack-rail-card-stats span {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pack-card-ink) 68%, transparent);
  white-space: nowrap;
}
.pack-rail-card-stats strong {
  font-weight: 600;
  color: var(--pack-card-ink);
}
.pack-rail-card-detail p,
.pack-rail-card-note {
  margin: 0;
  color: var(--pack-card-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}
.pack-rail-card-note {
  padding-top: 8px;
  border-top: 1px solid var(--pack-card-line);
  font-size: 0.7rem;
}
.pack-rail-card-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pack-rail-card-facts li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pack-card-ink) 4%, var(--pack-card-bg));
  color: var(--pack-card-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}
.pack-rail-card-facts strong {
  color: var(--pack-card-ink);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#packs.packs-outcomes .pack-controls { display: grid; gap: 10px; }
#packs.packs-outcomes .pack-slider {
  display: grid;
  gap: 6px;
  color: var(--pack-card-ink);
  font-size: 0.8rem;
}
#packs.packs-outcomes .pack-slider span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#packs.packs-outcomes .pack-slider strong {
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--pack-card-ink);
}
#packs.packs-outcomes .pack-slider input[type="range"] {
  width: 100%;
  accent-color: var(--pack-card-ink);
  cursor: pointer;
  touch-action: pan-y;
}
.pack-rail-card-cta {
  width: 100%;
  margin-top: 2px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}
/* Pack CTAs follow the same theme tokens as Discuss a project. */

/* Equal at rest; active card grows taller/wider while siblings shrink back.
   Dimmed height is set in px by packs-rail.js so the three short cards match
   (CSS % fails when the rail only has min-height). */
#packs.packs-outcomes.is-pack-hovering .pack-rail-card.is-dimmed {
  flex-grow: 0.72;
  align-self: flex-end;
  transform: none;
  opacity: 0.9;
  z-index: 1;
  overflow: hidden;
}
/* Expanded cards: slight lift only — must stay inside the fixed navy panel. */
#packs.packs-outcomes .pack-rail-card.is-expanded,
#packs.packs-outcomes .pack-rail-card:focus-within {
  flex-grow: 1.06;
  flex-basis: 0;
  align-self: center;
  height: auto;
  min-height: 0;
  max-height: 92%;
  /* Was scale(1.015). Scaling the card scales its type, its price and its
     slider labels with it, which is the one thing a resize of this kind must
     not do — 1.5% is enough to soften the text for the whole hover. The lift
     now comes from translate and shadow, so glyphs stay on their own pixels. */
  transform: translateY(-2px);
  transform-origin: center center;
  z-index: 4;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--signal) 18%, transparent);
}
/* Accent rule along the top-left of the active card */
.pack-rail-card::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 46%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--signal, #5367ee), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
  content: "";
  pointer-events: none;
}
.pack-rail-card.is-expanded::before { opacity: 1; }

/* Price rides up when the card opens */
.pack-rail-card.is-expanded .pack-rail-card-head { padding-right: 34%; }
.pack-rail-card.is-expanded .pack-rail-card-price {
  position: absolute;
  top: 18px;
  right: 18px;
  margin-top: 0;
  text-align: right;
}
.pack-rail-card.is-expanded .pack-rail-card-visual {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: 2px;
  overflow: visible;
}

/* Desktop expanded: detail in document flow under the visual (not overlay). */
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
  position: relative;
  inset: auto;
  z-index: 2;
  flex: 1 0 auto;
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
  padding: 0 18px 18px;
  background: var(--pack-card-bg);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] {
  display: none !important;
}

.outcomes-strip,
.outcomes-scrubline,
.outcomes-hint { display: none !important; }

#packs.packs-outcomes.is-coarse-pointer .pack-rail-card.is-expanded {
  flex: 1 1 100%;
  transform: none;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26);
}
#packs.packs-outcomes.is-coarse-pointer.is-pack-hovering .pack-rail-card.is-dimmed {
  display: none;
}
/* Open card on desktop: compact controls so the row does not balloon */
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-controls {
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-controls:has(label:only-child) {
  grid-template-columns: 1fr;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-note { display: none; }
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual {
  min-height: 96px;
  max-height: 112px;
  overflow: visible;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--social {
  min-height: 104px;
  max-height: 120px;
}
/* Open card is only slightly taller than rest — tighten internals so the
   stats, sliders and CTA all fit without clipping. */
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded {
  padding-top: 16px;
  padding-bottom: 14px;
  gap: 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
  gap: 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-stats {
  padding: 6px 0 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-stats li {
  gap: 4px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-cta {
  min-height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  flex-shrink: 0;
  min-height: 88px;
  max-height: 104px;
  gap: 3px;
  padding: 3px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 1;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--film,
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--wire {
  min-height: 120px;
  max-height: 140px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-facts {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Catalogue strip removed — volume path lives inside Interactive & 3D facts */
#packs.packs-outcomes .pack-policy,
#packs.packs-outcomes .catalogue-program { display: none !important; }

html[data-skin="nocturne"] #packs.packs-outcomes {
  background: var(--paper);
}
html[data-skin="nocturne"] #packs.packs-outcomes .outcomes-panel {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 5%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 24%),
    #0a1a33;
  border-color: color-mix(in srgb, #fff 14%, transparent);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

@media (max-width: 980px) {
  #packs.packs-outcomes .packs-head { grid-template-columns: 1fr; }
  #packs.packs-outcomes .packs-head-lede { max-width: none; }
  .outcomes-panel {
    margin-inline: 0;
    padding: 56px 12px 48px;
  }
  .outcomes-strip { left: 30px; right: 30px; top: 18px; font-size: 0.52rem; gap: 6px 10px; flex-wrap: wrap; letter-spacing: 0.12em; }
  .outcomes-strip::before, .outcomes-strip::after { display: none; }
  .outcomes-counter { right: 30px; top: auto; bottom: 8px; font-size: 0.78rem; }
  .outcomes-hint { left: 30px; transform: none; }
  .outcomes-scrubline { left: 12px; right: 12px; bottom: 26px; }
  .outcomes-rail { min-height: 0; }
  .outcomes-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 16px;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    perspective: none;
    overscroll-behavior-x: contain;
  }
  .pack-rail-card {
    flex: 0 0 min(82vw, 300px) !important;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .pack-rail-card.is-expanded {
    flex-basis: min(88vw, 340px) !important;
  }
  .pack-rail-card.is-expanded .pack-rail-card-price { position: static; text-align: left; margin-top: auto; }
  .pack-rail-card.is-expanded .pack-rail-card-head { padding-right: 0; }
  #packs.packs-outcomes.is-pack-hovering .pack-rail-card.is-dimmed {
    display: flex;
    opacity: 0.92;
    flex: 0 0 min(72vw, 260px) !important;
  }
  .outcomes-watermark { font-size: 80px; opacity: 0.9; }
  .process-notes { position: relative; margin-top: 12px; padding: 0; }
  .process-stage:not(.is-revealed) { opacity: 1; transform: none; }
  .taste-process-thread { display: none; }
}

@media (max-width: 640px) {
  .outcomes-panel { padding: 52px 8px 44px; border-radius: 22px; }
  .outcomes-watermark { top: 26px; }
  .outcomes-cross { display: none; }
  .pack-rail-card { padding: 12px; gap: 8px; }
  .pack-rail-card-cta { min-height: 44px; }
  #packs.packs-outcomes .pack-slider input[type="range"] { min-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-rail-card { transition: none !important; }
  .process-stage:not(.is-revealed) { opacity: 1; }
  .process-stage.is-active .ps-pulse { animation: process-pulse 1.6s ease-in-out infinite; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
  .process-stage:not(.is-revealed) { transform: translate(-50%, calc(var(--node) * -0.5)); }
}



/* Calm pipeline ground — strip decorative colour washes */
#process.process-desk {
  background: #F7F8FA !important;
}
html[data-skin="nocturne"] #process.process-desk {
  background: var(--paper) !important;
}

/* The stat row is a three-track grid, which is right for the packs that carry
   three. Interactive & 3D carries two, and the third track stayed open as a
   band of empty card to the right of them. The track count follows the items. */
#packs .pack-rail-card[data-pack="interactive"] .pack-rail-card-stats {
  grid-template-columns: repeat(2, 1fr);
}

/* -------------------------------------------------------------------------
   One resting height for the card images.

   .pack-rail-card-visual only ever had a min and a max, never a height, so the
   box stretched to whatever its card's copy left over and the four tops came
   out at 160, 200, 150 and 160 -- a ragged line across the rail. Pinning the
   resting height squares them off. It is scoped to the un-hovered, un-expanded
   state so the reveal keeps the room it needs: point at a card and the max
   above takes over again.
   ------------------------------------------------------------------------- */
#packs .pack-rail-card:not(:hover):not(:focus-within):not(.is-expanded) .pack-rail-card-visual {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
}

/* -------------------------------------------------------------------------
   Interactive & 3D carries two facts, not three.

   The expanded facts grid is 1fr 1fr 1fr, which suits the packs that have
   three. This card has 3D master and AR / config only, so the pair sat in two
   of three cells with an empty column beside them -- off-centre in the card,
   and ragged when one fact wrapped to three lines and its neighbour to two.
   Two columns share the row evenly, and centring each box's own content levels
   them whatever the copy does. It also matches the stat row above, which is
   already centred under its icons.
   ------------------------------------------------------------------------- */
#packs.packs-outcomes .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts,
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card[data-pack="interactive"].is-expanded .pack-rail-card-facts {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

#packs.packs-outcomes .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts li {
  align-content: center;
  justify-items: center;
  text-align: center;
}