/* Enhance existing ThinkCodec markup with the site's own colours. */
[data-mk] {
  --mk-paper: var(--bg);
  --mk-ink: var(--ink);
  --mk-muted: var(--muted);
  --mk-line: var(--line);
  --mk-accent: var(--teal);
  --mk-accent-2: var(--teal-dark);
  --mk-slat-color: var(--bg);
  --mk-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* A compact marker box keeps its ring clear of the existing copy. */
[data-mk="step-flow"] .step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  margin-block: 20px 28px;
}
@media (prefers-reduced-motion: reduce) {
  [data-mk], [data-mk] * { animation: none !important; transition: none !important; }
}

/* The drawing follows the handoff described directly above it. */
.handoff { margin: 36px 0 0; }
.handoff svg { display: block; width: 100%; height: auto; overflow: visible; }
.handoff .handoff-phone { display: none; }
.handoff text { fill: var(--ink); font: 16px Inter, sans-serif; }
.handoff .outline { fill: none; stroke: var(--line); stroke-width: 1.5; }
.handoff .detail { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.handoff .connector { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.handoff .manual { stroke: var(--muted); stroke-dasharray: 5 7; }
.tc-endcard { padding-block: clamp(32px, 6vw, 72px); }
.tc-endcard .mk-stage { max-width: 600px; margin-inline: auto; border: 0; border-radius: 0; background: #080e10; box-shadow: none; --mk-paper: #080e10; --mk-ink: #f0f6f4; --mk-accent: #5eead4; }
@media (max-width: 680px) {
  .handoff .handoff-wide { display: none; }
  .handoff .handoff-phone { display: block; max-width: 400px; margin-inline: auto; }
}