/* Home: workflow
   Workflow shift (Figma 377:7302): before/after comparison + 3 stats.
   Section-scoped values below come from Figma; promote to tokens.css in the design system pass. */
.s-workflow {
  --wf-tray: #edeae8;
  --wf-after-bg: rgb(94 233 181 / 0.2); /* emerald-300 @ 20% */
  --wf-divider: #e4e4e7;
  --wf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--base-high);
  padding-block: var(--space-16) var(--space-10);
}

/* Heading */
.s-workflow__head { margin-bottom: 0; }
.s-workflow__tag { height: 32px; padding-inline: 17px; border-color: rgb(0 0 0 / 0.04); background: var(--black-5); }
.s-workflow__title { max-width: 798px; }

/* Comparison */
.s-workflow__compare { position: relative; max-width: 866px; margin: var(--space-10) auto 0; }
.s-workflow__labels { display: none; }
.s-workflow__label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--h5-size); line-height: 1.2; letter-spacing: var(--h5-ls); font-weight: var(--fw-regular); color: #000;
}
.s-workflow__label--before { opacity: 0.7; }
.s-workflow__brand { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong); font-weight: var(--fw-medium); }

.s-workflow__card {
  position: relative; z-index: 1;
  display: grid; gap: var(--space-10);
  padding: var(--space-6) var(--space-4) var(--space-10);
  background: var(--base-high);
  border: 1px solid var(--black-5); border-radius: var(--radius-sm);
  box-shadow: 0 12px 10px -4px rgb(0 0 0 / 0.06);
}
.s-workflow__col { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.s-workflow__col-label {
  font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-ls);
}

.s-workflow__visual { display: flex; height: 224px; border-radius: var(--radius-lg); overflow: hidden; }
.s-workflow__visual--before { align-items: center; justify-content: center; padding-inline: 25px; background: var(--base-medium); }
.s-workflow__visual--after { align-items: flex-end; padding: 25px; background: var(--wf-after-bg); }

/* Before: email gate mock */
.s-workflow__gate {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8);
  background: var(--base-high); border: 1px solid var(--black-10); border-radius: var(--radius-xl);
}
.s-workflow__gate-input, .s-workflow__gate-btn {
  display: flex; align-items: center; gap: 9px; width: 233px; max-width: 100%; height: 40px; font-size: 12px; white-space: nowrap;
}
.s-workflow__gate-input { padding-inline: var(--space-4); border-radius: 4px; background: rgb(0 0 0 / 0.03); color: #4a1e06; }
.s-workflow__gate-input svg { flex: none; }
.s-workflow__gate-input span { color: #000; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; }
.s-workflow__gate-btn { justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); background: var(--amber-600); color: #fff; font-weight: var(--fw-semibold); }

/* After: miniature agent chat, cropped to its bottom-left like the design */
.s-workflow__chat {
  flex: none; width: 442px; padding: 11px; border-radius: 11px; background: var(--base-high);
  font-size: 8.9px; line-height: 1.4; color: rgb(0 0 0 / 0.9);
}
.s-workflow__chat-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 11px; }
.s-workflow__chat-user { align-self: flex-end; margin-bottom: 9px; padding: 4px 8px; border-radius: 19px; background: var(--stone-100); font-weight: var(--fw-medium); }
.s-workflow__chat-step { display: flex; align-items: center; gap: 5px; }
.s-workflow__chat-step span { width: 10px; font-size: 7px; opacity: 0.5; text-align: center; }
.s-workflow__chat-code {
  margin-left: 16px; padding: 9.5px; border: 0.7px solid var(--black-10); border-radius: 3px; background: var(--black-5);
  font-family: var(--wf-mono); font-size: 7.5px; line-height: 1.25; color: #000; white-space: pre; overflow: hidden;
}
.s-workflow__chat-status { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.s-workflow__chat-status i { width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--green-600); }
.s-workflow__chat-status span { opacity: 0.5; }
.s-workflow__chat-composer {
  display: flex; flex-direction: column; gap: 5px; margin-inline: 5px; padding: 5px;
  border: 0.7px solid var(--black-10); border-radius: 15px; background: rgb(0 0 0 / 0.02);
}
.s-workflow__chat-placeholder { height: 36px; padding: 4px; opacity: 0.5; }
.s-workflow__chat-tools { display: flex; align-items: center; gap: 5px; font-size: 7.5px; }
.s-workflow__chat-plus { display: grid; place-items: center; width: 16px; height: 16px; border: 0.7px solid var(--black-10); border-radius: 50%; background: var(--black-5); }
.s-workflow__chat-model { flex: 1; }
.s-workflow__chat-mic { width: 16px; height: 16px; border-radius: 50%; background: #000; }
.s-workflow__chat-footer { display: flex; justify-content: space-between; align-items: center; height: 27px; padding-inline: 21px; font-size: 8.2px; color: rgb(0 0 0 / 0.85); }

/* Lists */
.s-workflow__list { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; list-style: none; }
.s-workflow__list li { display: flex; align-items: center; min-height: 40px; padding-inline: var(--space-6); color: var(--text-strong); font-weight: var(--fw-medium); line-height: 1.2; }
.s-workflow__list--before li { gap: var(--space-4); font-size: var(--body-md-size); letter-spacing: var(--body-md-ls); }
.s-workflow__list--before li::before { content: ""; flex: none; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--text-low); }
.s-workflow__list--after li { gap: var(--space-3); font-size: var(--body-lg-size); letter-spacing: var(--body-lg-ls); }
.s-workflow__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: #000; }

/* Stats */
.s-workflow__stats { display: grid; margin-top: var(--space-10); padding-block: var(--space-6); text-align: center; }
.s-workflow__stat { display: flex; flex-direction: column-reverse; gap: var(--space-5); padding: var(--space-6) var(--space-8); }
.s-workflow__stat + .s-workflow__stat { border-top: 1px solid var(--wf-divider); }
.s-workflow__stat dd {
  margin: 0; color: var(--text-strong); font-family: var(--font-heading);
  font-size: var(--h3-size); font-weight: var(--fw-regular); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.s-workflow__stat dt { color: var(--text-medium); font-size: var(--body-sm-size); font-weight: var(--fw-medium); line-height: var(--body-sm-lh); letter-spacing: var(--body-sm-ls); }

/* Small phones: tighter gate mock */
@media (max-width: 379px) {
  .s-workflow__gate { padding: var(--space-5); }
  .s-workflow__list li { padding-inline: var(--space-2); }
}

@media (min-width: 640px) {
  .s-workflow__stats { grid-template-columns: repeat(3, 1fr); }
  .s-workflow__stat { padding-block: 0; }
  .s-workflow__stat + .s-workflow__stat { border-top: 0; border-left: 1px solid var(--wf-divider); }
}

/* Tablet up: side-by-side columns, shared label row, tray behind the card */
@media (min-width: 768px) {
  .s-workflow { padding-block: var(--space-20) var(--space-12); }
  .s-workflow__compare { padding: 0 24px 24px; }
  .s-workflow__compare::before {
    content: ""; position: absolute; inset: 38px 0 0; z-index: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: linear-gradient(to bottom, rgb(237 234 232 / 0) 30%, var(--wf-tray));
  }
  .s-workflow__compare::after {
    content: ""; position: absolute; inset: 38px 19px 19px; z-index: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--base-high);
  }
  .s-workflow__labels { position: relative; z-index: 1; display: flex; align-items: flex-end; padding: var(--space-2) 56px; }
  .s-workflow__col-label { display: none; }
  .s-workflow__card {
    grid-template-columns: 1fr 1fr; gap: 28px;
    padding: var(--space-6) 25px 57px;
    border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}

@media (min-width: 1024px) {
  .s-workflow { padding-block: 120px 60px; }
}
@media (min-width: 1024px) {
  .s-workflow__stats { padding-block: var(--space-10); }
}
/* Figma QC: labels sit 8px lower, stats row is 998 wide */
@media (min-width: 1024px) {
  .s-workflow__labels { padding-top: var(--space-4); }
  .s-workflow__stats { max-width: 998px; margin: var(--space-4) auto 0; }
}

/* ---------- Interactions (convention: plan/motion-convention.md) ----------
   The heading uses the shared data-reveal entrance. The comparison and stats have their own choreography,
   which runs only while workflow.js has put .wf-anim on .s-workflow__compare / .s-workflow__stats
   (JS on, motion allowed). Transitions sit on the .is-in state only, so adding .wf-anim hides instantly
   and dropping it afterwards changes nothing visible; resting state and hovers match the no-JS page.
   Order: card rises, Before gate appears and gets refused, pain points list in,
   After chat opens at its first message and auto-scrolls as steps stream in, benefits pop in. */
.s-workflow { --wf-rise: var(--reveal-distance, 24px); }

.wf-anim .s-workflow__labels,
.wf-anim .s-workflow__card { opacity: 0; transform: translateY(var(--wf-rise)); }
.wf-anim.is-in .s-workflow__labels,
.wf-anim.is-in .s-workflow__card {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.wf-anim.is-in .s-workflow__card { transition-delay: 80ms; }

/* Before: the gate drops in, then shakes "no" once */
.wf-anim .s-workflow__gate { opacity: 0; transform: scale(0.96); }
.wf-anim.is-in .s-workflow__gate {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out) 300ms, transform 600ms var(--ease-out) 300ms;
}
.wf-anim.is-in .s-workflow__gate-btn { animation: wf-deny 480ms var(--ease) 1100ms both; }

/* Lists: rows slide in one after another (--i is set by workflow.js) */
.wf-anim .s-workflow__list li { opacity: 0; transform: translateX(-12px); }
.wf-anim.is-in .s-workflow__list li {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(500ms + var(--i, 0) * var(--reveal-stagger, 80ms));
}
.wf-anim .s-workflow__list--after .s-workflow__icon { transform: scale(0.6) rotate(-12deg); }
.wf-anim.is-in .s-workflow__list--after .s-workflow__icon {
  transform: none;
  transition: transform 500ms var(--ease-spring) calc(600ms + var(--i, 0) * var(--reveal-stagger, 80ms));
}

/* After: chat opens scrolled to its first message (--wf-scroll, measured by workflow.js), then glides down
   to its cropped resting spot while each step streams in like a live agent run */
.wf-anim .s-workflow__chat { opacity: 0; transform: translateY(var(--wf-scroll, 32px)); }
.wf-anim.is-in .s-workflow__chat {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) 250ms, transform 1600ms var(--ease-in-out) 900ms;
}
.wf-anim .s-workflow__chat-body > * { opacity: 0; transform: translateY(6px); }
.wf-anim .s-workflow__chat-body > .s-workflow__chat-code { transform: none; clip-path: inset(0 0 100% 0); }
.wf-anim.is-in .s-workflow__chat-body > * {
  opacity: 1; transform: none;
  transition: opacity 350ms var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(600ms + var(--i, 0) * 150ms);
}
.wf-anim.is-in .s-workflow__chat-body > .s-workflow__chat-code {
  clip-path: inset(0);
  transition: opacity var(--dur-fast) linear, clip-path 600ms steps(13, end);
  transition-delay: calc(600ms + var(--i, 0) * 150ms);
}
/* Status line lands once the code has finished printing; workflow.js starts the timer then (2000ms) */
.wf-anim.is-in .s-workflow__chat-body > .s-workflow__chat-status { transition-delay: 2000ms; }

/* Hidden state snaps in place: keep the hover transitions below from animating the hide */
.wf-anim:not(.is-in) .s-workflow__chat,
.wf-anim:not(.is-in) .s-workflow__icon { transition: none; }

/* Live dot pings while the "Working for Ns" timer runs */
.s-workflow__chat-status i { position: relative; }
.s-workflow__chat-status.is-live i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: wf-ping 1.2s var(--ease) infinite;
}
.s-workflow__chat-status em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 1; }

/* Stats rise in a row, then count up */
.wf-anim .s-workflow__stat { opacity: 0; transform: translateY(var(--wf-rise)); }
.wf-anim.is-in .s-workflow__stat {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* Hover (pointer devices only; the mock UI is decorative, so hovers explain rather than invite clicks) */
@media (hover: hover) {
  .s-workflow__chat { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
  .s-workflow__visual--after:hover .s-workflow__chat { transform: translateY(-6px); box-shadow: var(--shadow-md); }

  /* Before: hovering the gate replays the refusal, so the friction reads */
  .s-workflow__gate-btn { transition: background-color var(--dur) var(--ease); }
  .s-workflow__visual--before:hover .s-workflow__gate-btn { background: #c45f00; animation: wf-deny 480ms var(--ease); }

  .s-workflow__list li { border-radius: var(--radius-md); transition: background-color var(--dur) var(--ease); }
  .s-workflow__list--before li::before { transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .s-workflow__list--before li:hover { background: var(--black-5); }
  .s-workflow__list--before li:hover::before { background: var(--red-500); transform: scale(1.4); }
  .s-workflow__list--after li:hover { background: var(--wf-after-bg); }
  .s-workflow__icon { transition: transform 300ms var(--ease-spring); }
  .s-workflow__list--after li:hover .s-workflow__icon { transform: scale(1.08) rotate(-6deg); }

  .s-workflow__stat dd { transition: color var(--dur) var(--ease); }
  .s-workflow__stat:hover dd { color: var(--text-brand); }
}

@keyframes wf-deny {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes wf-ping {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s-workflow *, .s-workflow *::before, .s-workflow *::after { animation: none !important; transition: none !important; }
  .s-workflow__visual--after:hover .s-workflow__chat,
  .s-workflow__list--after li:hover .s-workflow__icon { transform: none; }
}