.call-workflow {
  --cw-line: var(--l-ink-3);
  --cw-paper: var(--l-bg);
  --cw-subtle: #c3b9c9;
  padding: clamp(48px, 6.25vw, 110px) var(--spread-gutter);
  scroll-margin-top: 72px;
  background: var(--bg);
}
.cw-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px 5%;
  align-items: center;
  margin-bottom: clamp(24px, 4vw, 68px);
}
.cw-intro .eyebrow { color: var(--brand-accent); }
.cw-intro h2 {
  margin: 15px 0 0;
  font-size: clamp(43px, 5.6vw, 100px);
  line-height: .96;
  letter-spacing: var(--tr-display);
}
.cw-story-copy > p:not(.eyebrow) {
  max-width: 40ch;
  margin: clamp(18px, 2vw, 32px) 0 17px;
  font-size: clamp(16px, 1.4vw, 24px);
  color: var(--cw-subtle);
  line-height: 1.45;
}
.cw-story-links { display: flex; flex-wrap: wrap; gap: 5px 22px; }
.cw-conversation {
  position: relative;
  isolation: isolate;
  margin: 0;
  aspect-ratio: 1.7;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 83%, #372b3d, transparent 68%);
  border-bottom: 1px solid var(--cw-line);
}
.cw-portraits {
  position: absolute;
  inset: 0 0 12%;
  mask-image: linear-gradient(black 64%, transparent 100%);
}
.cw-portraits .cw-person {
  position: absolute;
  bottom: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
}
.cw-client { left: -7%; }
.cw-advisor { right: -7%; }
.cw-call-object {
  position: absolute;
  inset: 42% 31% 5%;
}
.cw-call-object img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cw-call-object .cw-draft { opacity: 0; }
.call-workflow:is([data-walkthrough="autofill"],[data-walkthrough="review"]) .cw-draft { opacity: 1; }
.call-workflow:is([data-walkthrough="autofill"],[data-walkthrough="review"]) .cw-phone { opacity: 0; }
.cw-audio-tracks {
  position: absolute;
  inset: auto 4% 21%;
  display: flex;
  justify-content: space-between;
}
.cw-audio-tracks .cw-wave { width: 33%; height: 24px; gap: 2px; }
.cw-audio-tracks .cw-wave i { height: calc(var(--level) * 1px); opacity: .85; }
.cw-conversation figcaption {
  position: absolute;
  inset: auto 4% 4%;
  display: flex;
  justify-content: space-between;
  color: var(--cw-subtle);
  font: clamp(11px, .85vw, 14px)/1.4 var(--mono);
}
.cw-conversation figcaption b {
  display: none;
  margin-right: 5px;
  padding: 1px 4px;
  border: 1px solid currentColor;
  color: var(--brand-accent);
}
.cw-conversation figcaption span + span b { color: var(--lavender); }
.call-workflow[data-walkthrough="speakers"] .cw-conversation figcaption b { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .cw-call-object img { transition: opacity .4s ease; }
  .cw-conversation.art-in-view .cw-portraits { animation: cw-listen .75s ease-out both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cw-person { transition: transform .4s ease-out; }
  .cw-conversation:hover .cw-client { transform: translateX(4px); }
  .cw-conversation:hover .cw-advisor { transform: translateX(-4px); }
}
@keyframes cw-listen {
  from { opacity: .55; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cw-surface { border-block: 1px solid var(--cw-line); }
.cw-sequence {
  padding: 5px clamp(12px, 1.6vw, 30px) 0;
  background: #211c24;
  border-bottom: 1px solid var(--cw-line);
}
.cw-sequence ol {
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-sequence li { flex: 1; }
.cw-sequence button {
  min-height: 48px;
  width: 100%;
  white-space: nowrap;
  color: var(--cw-subtle);
  background: transparent;
  font-size: clamp(14px, 1.2vw, 20px);
}
.cw-sequence li button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: clamp(14px, 1.5vw, 24px) 12px;
}
.cw-track, .cw-track::after {
  display: block;
  height: 5px;
  border-radius: var(--r-xs);
}
.cw-track { position: absolute; inset: auto 0 0; background: #544957; overflow: hidden; }
.cw-track::after {
  content: '';
  background: var(--brand-accent);
  transform: scaleX(var(--elapsed, 0));
  transform-origin: left;
}
.cw-sequence [data-complete] .cw-track::after { transform: scaleX(1); background: var(--lavender); }
.cw-clock { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cw-clock > span { color: var(--l-bg); font: var(--fs-xs)/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.cw-sequence li button span,
.call-workflow small,
.cw-match div > span {
  font: var(--fs-xs)/1.45 var(--mono);
}
.cw-sequence li button span { color: var(--cw-subtle); }
.cw-sequence li button[aria-current] {
  color: #fff6ec;
}
.cw-sequence li button[aria-current] span { color: var(--brand-accent); }
.cw-sequence button:hover { background: var(--card); color: #fff; }
.cw-sequence button:focus-visible { outline-offset: -3px; }
.cw-sequence .cw-playback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 8px;
  font: var(--fs-xs) var(--mono);
}
.cw-playback span {
  display: inline-block;
  width: 8px;
  height: 10px;
  border-inline: 2px solid currentColor;
}
.cw-playback:is([data-action="play"],[data-action="replay"]) span {
  width: 0;
  border: solid transparent;
  border-width: 5px 0 5px 8px;
  border-left-color: currentColor;
}
.cw-stage {
  padding: clamp(23px, 3vw, 52px) 0;
}
.cw-stage + .cw-stage { border-top: 1px solid var(--cw-line); }
.cw-surface:has(.cw-sequence:not([hidden])) .cw-stage {
  min-height: clamp(370px, 32vw, 520px);
  border: 0;
}
.cw-stage h3 {
  margin: 0 0 clamp(18px, 2.3vw, 42px);
  font-size: clamp(25px, 2.7vw, 46px);
  line-height: 1.08;
  letter-spacing: var(--tr-title);
}
.cw-voice-0 { --cw-voice: var(--lavender); }
.cw-voice-1 { --cw-voice: var(--brand-accent); }
.cw-voice-tag {
  width: fit-content;
  padding: 5px 9px;
  color: var(--cw-voice);
  font: var(--fs-xs)/1 var(--mono);
  border: 1px solid currentColor;
  border-radius: 4px;
  white-space: nowrap;
}
.cw-wave {
  display: flex;
  align-items: center;
  gap: clamp(2px,.32vw,6px);
  width: min(48%, 220px);
  height: 36px;
  color: var(--cw-voice);
}
.cw-wave i {
  height: calc(var(--level) * 2px);
  flex: 1;
  background: currentColor;
}
.cw-call, .cw-review {
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr);
  gap: 7%;
}
.cw-call-names {
  border-left: 2px solid var(--cw-line);
  padding-left: clamp(14px, 2vw, 36px);
}
.cw-call-names small, .cw-call-names span,
.cw-utterance small, .cw-lane small, .cw-source small,
.cw-review-note small { display: block; color: var(--cw-subtle); }
.cw-call-names strong {
  display: block;
  margin-top: 15px;
  font-size: clamp(22px, 2.15vw, 40px);
  line-height: 1.05;
}
.cw-call-names span { margin-top: 4px; }
.cw-call-tape { border-bottom: 1px solid var(--cw-line); }
.cw-utterance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, .55fr);
  column-gap: clamp(14px, 1.8vw, 30px);
  padding: 14px clamp(10px, 1.4vw, 26px) 17px;
  border-top: 1px solid var(--cw-line);
}
.cw-utterance[data-speaking] {
  box-shadow: inset 2px 0 var(--cw-voice);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cw-voice) 10%, transparent), transparent);
}
.cw-turn-meta, .cw-lane > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cw-turn-meta { grid-column: 1 / -1; flex-wrap: wrap; row-gap: 2px; }
.cw-utterance .cw-turn-label { display: none; color: var(--cw-voice); }
.cw-utterance[data-speaking] .cw-turn-label { display: flex; align-items: center; gap: 6px; }
.cw-turn-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cw-utterance .cw-wave {
  align-self: center;
  width: 100%;
  height: 48px;
  gap: 2px;
}
.cw-utterance .cw-wave i { height: calc(var(--level) * 2.7px); border-radius: 1px; }
.call-workflow[data-voice] .cw-utterance:not([data-speaking]) .cw-wave i,
.call-workflow[data-voice="0"] .cw-audio-tracks .cw-voice-1 i,
.call-workflow[data-voice="1"] .cw-audio-tracks .cw-voice-0 i { transform: scaleY(.23); opacity: .55; }
.cw-utterance p, .cw-lane blockquote {
  margin: 6px 0 0;
  line-height: 1.36;
  font-size: clamp(17px, 1.55vw, 29px);
}
.cw-lanes { display: grid; grid-template-columns: 1fr 1fr; }
.cw-lane {
  padding: clamp(17px, 2.3vw, 44px);
  border-top: 2px solid var(--cw-voice);
  background: var(--plum-950);
}
.cw-lane + .cw-lane { background: #252019; }
.cw-lane small { margin: 19px 0 9px; }
.cw-lane blockquote { max-width: 40ch; }
.cw-note {
  max-width: 91ch;
  margin: 16px 0 0;
  color: var(--cw-subtle);
  font-size: var(--fs-ui);
  line-height: 1.45;
}
.cw-transfer {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(44px,.24fr) minmax(0,1fr);
  align-items: center;
}
.cw-source small { margin: 16px 0 8px; }
.cw-source blockquote {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(22px, 2.45vw, 44px);
  line-height: 1.18;
  letter-spacing: var(--tr-title);
}
.cw-source mark { background: transparent; color: var(--accent-highlight); }
.cw-connector {
  position: relative;
  margin: 0 20%;
  height: 1px;
  background: var(--brand-accent);
}
.cw-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--brand-accent);
  border-right: 1px solid var(--brand-accent);
  transform: rotate(45deg);
}
.cw-connector i {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--accent-highlight);
}
.cw-paper {
  color-scheme: light;
  padding: clamp(18px, 2.7vw, 48px);
  border-top: 3px solid var(--lavender);
  background: var(--cw-paper);
  color: #271d2d;
}
.cw-paper small, .cw-match div span { color: #5b4c62; }
.cw-paper h4 {
  margin: 4px 0 14px;
  font-size: clamp(21px, 2.1vw, 39px);
  letter-spacing: var(--tr-title);
}
.cw-match div { border-top: 1px solid #b9acbf; padding-top: 14px; }
.cw-match div span, .cw-match div strong { display: block; }
.cw-match div strong {
  margin-top: 5px;
  padding: 9px 12px;
  border-left: 3px solid #965e2f;
  background: var(--accent-highlight);
  font-size: clamp(19px, 1.8vw, 34px);
  line-height: 1.16;
}
.cw-review-note > strong {
  display: block;
  margin: 7px 0;
  color: var(--brand-accent);
  font: clamp(46px, 5vw, 84px)/1 var(--font-pixel);
}
.cw-review-note > strong span { color: var(--cw-subtle); }
.cw-review-note p { margin: 12px 0 0; max-width: 30ch; color: var(--cw-subtle); }
.cw-review-form { padding-block: clamp(14px, 1.8vw, 30px); }
.cw-field { border-top: 1px solid #b9acbf; }
.cw-field summary {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 12px;
  padding: 11px 20px 11px 0;
  list-style: none;
  font-size: var(--fs-ui);
  line-height: 1.3;
  cursor: pointer;
}
.cw-field summary::-webkit-details-marker { display: none; }
.cw-field summary::after { content: '+'; position: absolute; right: 0; }
.cw-field[open] summary::after { content: '−'; }
.cw-field p { margin: 5px 0 14px; font-size: var(--fs-m); line-height: 1.36; }
.cw-field summary:focus-visible { outline: 2px solid var(--lavender-700); outline-offset: 2px; }
@keyframes cw-speaking {
  0%, 100% { transform: scaleY(.34); }
  23% { transform: scaleY(1.09); }
  47% { transform: scaleY(.48); }
  72% { transform: scaleY(.87); }
}
@keyframes cw-transfer {
  0% { right: 100%; opacity: 0; }
  20%, 78% { opacity: 1; }
  100% { right: 0; opacity: 0; }
}
@keyframes cw-fill {
  from { opacity: .2; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cw-identify {
  from { opacity: .45; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .cw-utterance[data-speaking] .cw-wave i,
  .call-workflow[data-voice="0"] .cw-audio-tracks .cw-voice-0 i,
  .call-workflow[data-voice="1"] .cw-audio-tracks .cw-voice-1 i,
  .cw-surface[data-running="true"] .cw-lane .cw-wave i {
    animation: cw-speaking .84s ease-in-out infinite;
    animation-delay: calc(0ms - var(--phase));
  }
  .cw-surface[data-running="false"] .cw-utterance .cw-wave i,
  .call-workflow:has(.cw-surface[data-running="false"]) .cw-audio-tracks .cw-wave i {
    animation-play-state: paused;
  }
  .cw-surface[data-running="true"] .cw-lane {
    animation: cw-identify .65s ease both;
  }
  .cw-surface[data-running="true"] .cw-lane + .cw-lane { animation-delay: .65s; }
  .cw-surface[data-running="true"] .cw-connector i { animation: cw-transfer 1.2s ease-out both; }
  .cw-surface[data-running="true"] .cw-match div strong { animation: cw-fill .7s .75s ease both; }
}
@media (max-width: 740px) {
  .cw-intro { grid-template-columns: 1fr; }
  .cw-call, .cw-review { gap: 22px; grid-template-columns: 1fr; }
  .cw-call-names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    border: 0;
  }
  .cw-call-names small { grid-column: 1 / -1; }
  .cw-call-names strong { grid-row: 2; margin-top: 12px; }
  .cw-call-names span { grid-row: 3; }
  .cw-sequence .cw-playback { min-width: 44px; align-self: stretch; }
  .cw-sequence li button { gap: 5px; justify-content: center; padding-inline: 3px; }
  .cw-sequence li button span { display: none; }
  .cw-review-note p { max-width: 48ch; }
}
@media (max-width: 580px) {
  .cw-utterance { grid-template-columns: 1fr; gap: 2px; padding: 11px 13px 9px; }
  .cw-utterance .cw-wave { width: min(100%, 270px); height: 36px; }
  .cw-utterance .cw-wave i { height: calc(var(--level) * 1.95px); }
  .cw-lanes { grid-template-columns: 1fr; }
  .cw-lane small { margin: 10px 0 5px; }
  .cw-lane blockquote { margin-top: 0; }
  .cw-wave { height: 26px; }
  .cw-wave i { height: calc(var(--level) * 1.5px); }
  .cw-transfer { grid-template-columns: 1fr; gap: 9px; }
  .cw-connector { width: 28px; margin: 15px 0 15px 1px; transform: rotate(90deg); }
  .cw-surface:has(.cw-sequence:not([hidden])) .cw-stage { min-height: 400px; }
  .cw-field summary { grid-template-columns: .85fr 1.15fr; }
}

/* Tiles share the shape scale: panels --r-l, inner tiles --r-m, strips --r-s. */
.cw-sequence,
.cw-utterance {
  border-radius: var(--r-m);
}

/* Two chapters, each at least one screen: the story on the page colour, then
   the walkthrough on a plum band (the same rhythm as the advisor recap). */
.call-workflow {
  padding: 0;
}
.cw-intro,
.cw-band {
  min-height: 100svh;
  align-content: center;
  padding: clamp(56px, 7vw, 116px) var(--spread-gutter);
}
.cw-intro {
  margin-bottom: 0;
}
.cw-band {
  padding-top: calc(var(--seam-height) + clamp(40px, 5vw, 90px));
}
.cw-band {
  display: grid;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 22% 40%, color-mix(in oklab, var(--lavender) 14%, transparent), transparent),
    linear-gradient(180deg, var(--plum-950), color-mix(in oklab, var(--plum-950), var(--lavender) 8%));
}