/* zDirect case study: page-specific styles on top of case-study-v2.css.
   No zDirect Figma design; laid out on the Nebula case study system, see docs/facelift-audit.md section 16. */

:root { --cs-stat-num: 110px; } /* fits "80%" */

.cs-hero__logo { height: 32px; }

.cs-stepper__num--active { color: var(--color-primary); border-color: var(--color-primary); }

/* As-is flow: boxes sit on Figma coordinates (node 1469:162, shifted 192px left and 72px up), lines in the SVG layer.
   Lane labels stick to the left edge while the flow scrolls sideways. */
.cs-flow { margin-block: var(--space-24); } /* plus the section's 24px gap: 48px above and below the flow */
.cs-flow__scroll { display: flex; overflow-x: auto; overscroll-behavior-x: contain; }
.cs-flow__scroll { scrollbar-width: none; user-select: none; -webkit-user-select: none; } /* replaced by .cs-flow__track below */
.cs-flow__scroll::-webkit-scrollbar { display: none; }
.cs-flow.is-scrollable .cs-flow__scroll { cursor: grab; }
.cs-flow.is-panning .cs-flow__scroll { cursor: grabbing; }
.cs-flow__scroll:focus-visible { outline: 1px solid var(--color-secondary); outline-offset: 4px; }
.cs-flow__lanes { position: sticky; left: 0; z-index: 1; flex: none; width: 128px; background: var(--color-page); }
.cs-flow__lanes::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--space-24); background: linear-gradient(to right, var(--color-page), transparent); }
.cs-flow__lanes span { position: absolute; top: var(--y); left: 0; width: 88px; transform: translateY(-50%); font: var(--text-label); color: var(--color-secondary); }
.cs-flow__canvas { position: relative; flex: none; width: 2277px; height: 483px; }
.cs-flow__lines { position: absolute; inset: 0; fill: none; stroke: var(--color-tertiary); stroke-width: var(--stroke-illustration); pointer-events: none; }
.cs-flow__line { marker-end: url(#cs-flow-arrow); transition: stroke 0.15s; }
.cs-flow__hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; } /* wider hover target than the 1px line */
.cs-flow__box, .cs-flow__circle, .cs-flow__decision, .cs-flow__tag { position: absolute; left: var(--x); top: var(--y); font: var(--text-card-small-body); }
.cs-flow__box { display: flex; align-items: center; width: 180px; height: 72px; padding: 0 16px; color: var(--color-secondary); border: var(--stroke-illustration) solid var(--color-tertiary); border-radius: 6px; }
.cs-flow__box--wide { width: 187px; }
.cs-flow__circle { display: grid; place-items: center; width: 78px; height: 78px; color: var(--color-secondary); border: var(--stroke-illustration) solid var(--color-tertiary); border-radius: 50%; }
.cs-flow__decision { display: grid; place-items: center; width: 104px; height: 104px; color: var(--color-secondary); }
.cs-flow__decision::before { content: ""; position: absolute; inset: 15px; border: var(--stroke-illustration) solid var(--color-tertiary); border-radius: 6px; transform: rotate(45deg); }
.cs-flow__tag { padding: 4px 6px; color: var(--color-primary); background: var(--color-page); transform: translate(-50%, -50%); pointer-events: none; }
/* Custom scrollbar: the track's stroke sits outside its 16px (outline, like Figma's outside stroke); the 8px handle is inset 4px so its corners sit concentric with the track's */
.cs-flow__track { position: relative; height: 16px; margin-top: var(--space-24); outline: var(--stroke-illustration) solid var(--color-border); border-radius: 16px; cursor: pointer; touch-action: none; }
.cs-flow__thumb { position: absolute; top: 4px; left: 4px; height: 8px; border-radius: 8px; background: var(--color-border); cursor: grab; touch-action: none; transition: background-color 0.15s; }
.cs-flow__thumb:hover, .cs-flow.is-dragging .cs-flow__thumb, .cs-flow.is-panning .cs-flow__thumb { background: var(--color-primary); }
.cs-flow.is-dragging .cs-flow__thumb { cursor: grabbing; }
.cs-flow .cs-caption { margin-top: var(--space-16); }
.cs-flow:not(.is-scrollable) .cs-flow__track, .cs-flow:not(.is-scrollable) .cs-caption { display: none; }
.cs-flow__box, .cs-flow__circle, .cs-flow__decision, .cs-flow__decision::before { transition: color 0.15s, border-color 0.15s; }
@media (hover: hover) {
  .cs-flow__box:hover, .cs-flow__circle:hover, .cs-flow__decision:hover, .cs-flow__decision:hover::before,
  .cs-flow__box.is-hot, .cs-flow__circle.is-hot, .cs-flow__decision.is-hot, .cs-flow__decision.is-hot::before { color: var(--color-primary); border-color: var(--color-primary); }
  .cs-flow__arrow:hover .cs-flow__line, .cs-flow__arrow.is-hot .cs-flow__line { stroke: var(--color-primary); }
}

@media (max-width: 767px) {
  :root { --cs-stat-num: 72px; }
  .cs-grid--shots { grid-template-columns: 1fr; } /* partner dialogs readable at phone width */
  .cs-flow__lanes { width: 96px; }
  .cs-flow__lanes span { width: 72px; }
}