/* The product illustrations share the portrait material while their compositions
   follow the records, conversations and handoffs they depict. */
.workflow-figure {
  --wf-ink: #f3eff7;
  --wf-muted: #b2aab8;
  --wf-lav: var(--lavender-300);
  --wf-citron: var(--accent-highlight);
  --wf-rule: #ffffff24;
  --wf-paper: var(--mist);
  --wf-dark: var(--card);
  --wf-gap: clamp(14px, 4cqw, 30px);
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--wf-ink);
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(14px, 3cqw, 24px);
  background: var(--bg);
  container: workflow / inline-size;
  text-align: left;
}
.workflow-figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px var(--wf-gap) 15px;
  background: var(--l-ink-1);
  color: var(--wf-ink);
  line-height: 1.25;
}
.workflow-figure figcaption strong {
  font-size: clamp(14px, 3.2cqw, 21px);
  letter-spacing: var(--tr-title);
  font-weight: 550;
}
.workflow-figure figcaption span,
.wf-label,
.workflow-figure cite,
.workflow-figure time {
  font-family: var(--mono, monospace);
  font-size: clamp(11px, 1.85cqw, 12px);
  line-height: 1.4;
  letter-spacing: 0.033em;
}
.workflow-figure figcaption span {
  color: var(--wf-muted);
  text-align: right;
}
.wf-label {
  display: block;
  color: var(--wf-lav);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.workflow-figure cite {
  display: block;
  font-style: normal;
  color: var(--wf-muted);
}
.wf-scene {
  background: var(--bg);
  position: relative;
  isolation: isolate;
  font-size: clamp(14px, 2.9cqw, 20px);
  line-height: 1.38;
  letter-spacing: var(--tr-snug);
}
.workflow-figure p,
.workflow-figure blockquote,
.workflow-figure dl,
.workflow-figure dd,
.workflow-figure ul,
.workflow-figure ol,
.workflow-figure pre {
  margin: 0;
}
.workflow-figure blockquote {
  color: inherit;
  font: inherit;
}
.workflow-figure em {
  font-style: normal;
  color: var(--wf-citron);
}
.workflow-figure strong {
  font-weight: 550;
}
.workflow-figure mark {
  padding: 0.01em 0.12em;
  background: var(--wf-citron);
  color: #202212;
}
.wf-art {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
}
.wf-fields > div {
  display: grid;
  grid-template-columns: minmax(74px, 0.64fr) 1.5fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--wf-rule);
}
.wf-fields > div:last-child {
  border-bottom: 0;
}
.wf-fields dt {
  color: var(--wf-muted);
  font-size: 0.84em;
}
.wf-fields dd {
  font-weight: 500;
}

/* A voice waveform sits above two timestamped turns in the recording. */
.wf--capture .wf-scene {
  background: #070708;
}
.wf-portrait-window {
  height: clamp(145px, 44cqw, 285px);
  overflow: hidden;
}
.wf-portrait-window img {
  object-fit: contain;
  object-position: center bottom;
}
.wf-transcript {
  padding: 0 var(--wf-gap) 13px;
  background: linear-gradient(#070708, var(--bg));
}
.wf-transcript > div {
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--wf-rule);
}
.wf-transcript time {
  color: var(--wf-citron);
}
.wf-transcript .wf-label {
  margin-bottom: 3px;
}

/* The large duration and floating calendar meet at a full-width agenda. */
.wf--calendar .wf-scene {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
}
.wf-duration {
  padding-left: var(--wf-gap);
}
.wf-duration strong {
  display: block;
  font: 400 clamp(64px, 19cqw, 150px)/0.92 var(--font-pixel, monospace);
  color: var(--wf-citron);
}
.wf-duration strong span {
  font-size: 0.23em;
  margin-left: 3px;
}
.wf--calendar .wf-art {
  aspect-ratio: 1.3;
  object-fit: contain;
}
.wf-agenda {
  grid-column: 1 / -1;
  padding: 16px var(--wf-gap) var(--wf-gap);
  border-top: 1px solid var(--wf-rule);
}
.wf-agenda strong {
  font-size: 1.25em;
}
.wf-agenda ol {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding-left: 21px;
  font-size: 0.88em;
  color: var(--wf-muted);
}
.wf-agenda li::marker {
  color: var(--wf-lav);
}

/* A letter with actual address and subject lines overlaps its envelope. */
.wf--letter .wf-scene {
  padding: clamp(75px, 22cqw, 160px) var(--wf-gap) var(--wf-gap);
}
.wf--letter .wf-art {
  position: absolute;
  z-index: -1;
  top: -9%;
  right: 0;
  height: 59%;
  width: 61%;
  object-fit: contain;
}
.wf-mail-sheet {
  position: relative;
  width: 90%;
  padding: var(--wf-gap);
  color: var(--wf-dark);
  border-radius: 4px var(--r-m) var(--r-m) 4px;
  background: var(--wf-paper);
}
.wf-mail-sheet .wf-fields {
  font-size: 0.82em;
  margin-bottom: 14px;
}
.wf-mail-sheet .wf-fields > div {
  grid-template-columns: 42px 1fr;
  border-bottom-color: #28202f25;
  padding: 4px 0;
}
.wf-mail-sheet .wf-fields dt {
  color: #5b5065;
}
.wf-mail-sheet p + p {
  margin-top: 0.65em;
}
.wf-signature {
  font-weight: 600;
}

/* The document illustration pairs a physical page with a readable caption file. */
.wf--document .wf-scene {
  display: grid;
  align-items: end;
  grid-template-columns: 0.65fr 1.35fr;
  padding: var(--wf-gap);
}
.wf--document .wf-art {
  align-self: start;
  width: 165%;
  height: clamp(130px, 34cqw, 240px);
  margin: 0 0 20px -18%;
}
.wf-caption-file {
  padding: var(--wf-gap);
  background: var(--card);
  border-radius: var(--r-xs) var(--r-m) var(--r-xs) var(--r-xs);
  position: relative;
}
.wf-filetype {
  display: inline-block;
  font: 400 1.5em/1 var(--font-pixel, monospace);
  color: var(--wf-citron);
  margin-bottom: clamp(16px, 5cqw, 36px);
}
.wf-caption-file code {
  display: block;
  font-family: var(--mono);
  color: var(--wf-muted);
  font-size: 0.77em;
  margin: 14px 0 3px;
}
.wf-caption-file cite {
  margin-top: 9px;
}

/* Intake information is laid out as completed fields beside the original form. */
.wf--form .wf-scene {
  display: grid;
  grid-template-columns: 31% 1fr;
}
.wf-intake-art {
  overflow: hidden;
  background: #09090a;
}
.wf-intake-art img {
  width: 165%;
  max-width: none;
  margin-left: -30%;
  object-fit: contain;
}
.wf-intake {
  padding: var(--wf-gap);
}
.wf-intake .wf-fields > div {
  display: block;
  padding: 12px 0;
}
.wf-intake .wf-fields dt {
  margin-bottom: 4px;
}
.wf-intake .wf-fields dd {
  font-size: 1.08em;
}

/* A source match highlights the same words as the search phrase. */
.wf--search .wf-scene {
  padding: var(--wf-gap);
}
.wf-query {
  display: flex;
  align-items: center;
  gap: 15px;
}
.wf-query img {
  width: 25%;
  height: auto;
  aspect-ratio: 1.2;
  object-fit: contain;
}
.wf-query strong {
  font-size: clamp(22px, 5.2cqw, 36px);
  letter-spacing: var(--tr-display);
  overflow-wrap: anywhere;
}
.wf-match {
  margin: 17px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--wf-rule);
}
.wf-match > strong {
  font-size: 1.2em;
}
.wf-match > p {
  color: var(--wf-muted);
  font-size: 0.79em;
}
.wf-match blockquote {
  margin: 0.8em 0;
}

/* The service note separates the client's inquiry from the outstanding checks. */
.wf--intake .wf-scene {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  padding: var(--wf-gap);
  gap: 12px;
}
.wf-intent {
  grid-column: 1 / -1;
}
.wf-intent blockquote {
  font-size: 1.18em;
  max-width: 30ch;
}
.wf--intake .wf-art {
  align-self: center;
  height: auto;
  object-fit: contain;
}
.wf-checklist {
  align-self: center;
  background: var(--card);
  padding: 14px;
  border-radius: var(--r-s);
}
.wf-checklist ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 0.86em;
}
.wf-checklist li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.wf-checklist li::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid var(--wf-lav);
}

/* A question and its source sit on opposite sides of the speaking portrait. */
.wf--inquiry .wf-scene {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  padding: var(--wf-gap);
  gap: 10px;
  align-items: start;
}
.wf-question strong {
  font-size: 1.35em;
  line-height: 1.14;
  display: block;
}
.wf--inquiry .wf-art {
  width: 132%;
  max-width: none;
  height: 31cqw;
  margin-left: -18%;
  object-position: center 26%;
}
.wf-answer {
  grid-column: 1 / -1;
  width: 88%;
  margin-left: auto;
  padding: 15px 17px;
  background: var(--l-ink-2);
  border-radius: var(--r-s) 2px var(--r-s) var(--r-s);
}

/* A timestamp aligns with a single marked section of a waveform. */
.wf--signal .wf-signal-trace {
  position: relative;
  height: clamp(105px, 25cqw, 185px);
  overflow: hidden;
}
.wf-signal-trace img {
  object-position: center 48%;
  object-fit: cover;
}
.wf-marker {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 57%;
  border-left: 1px solid var(--wf-citron);
}
.wf-marker time {
  background: var(--wf-citron);
  color: var(--wf-dark);
  padding: 3px 5px;
}
.wf-signal-note {
  padding: 12px var(--wf-gap) var(--wf-gap);
}
.wf-signal-note blockquote {
  font-size: clamp(22px, 5.5cqw, 42px);
  max-width: 23ch;
  letter-spacing: var(--tr-title);
  line-height: 1.12;
}

/* The household name shares the portrait strip with the profile silhouette. */
.wf-identity {
  height: clamp(140px, 40cqw, 260px);
  position: relative;
}
.wf-identity img {
  position: absolute;
  width: 67%;
  right: 0;
  object-fit: contain;
  object-position: center bottom;
}
.wf-identity > div {
  position: absolute;
  left: var(--wf-gap);
  bottom: 11%;
}
.wf-identity strong {
  font-size: clamp(34px, 9cqw, 66px);
  letter-spacing: var(--tr-display);
  line-height: 0.95;
}
.wf--household .wf-fields {
  padding: 8px var(--wf-gap) 14px;
}

/* A compact, narrow meeting record preserves the reading order of mobile notes. */
.wf--mobile .wf-scene {
  display: grid;
  grid-template-columns: 0.8fr 1.05fr;
  padding: var(--wf-gap);
  align-items: center;
  gap: 8px;
}
.wf--mobile .wf-art {
  object-fit: contain;
  width: 125%;
  max-width: none;
  margin-left: -16%;
}
.wf-pocket-record {
  background: var(--l-ink-2);
  border: 4px solid var(--l-ink-3);
  padding: clamp(16px, 4cqw, 28px) 13px;
  border-radius: var(--r-l);
}
.wf-pocket-record strong {
  display: block;
  font-size: 1.24em;
  line-height: 1.05;
}
.wf-pocket-record p {
  font-size: 0.79em;
  color: var(--ink-2);
  margin: 11px 0 16px;
}
.wf-pocket-task {
  border-top: 1px solid var(--wf-rule);
  padding-top: 12px;
  font-size: 0.8em;
}
.wf-pocket-task .wf-label {
  color: var(--wf-citron);
}

/* A handoff connects advisor, reviewer and the resulting file. */
.wf--relay .wf-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: var(--wf-gap);
}
.wf-relay-source,
.wf-relay-review {
  position: relative;
  padding: 12px 13px;
  border-left: 2px solid var(--wf-lav);
  background: var(--card);
  align-self: start;
}
.wf-relay-review {
  margin-top: 29px;
  background: var(--l-ink-2);
  border-left-color: var(--wf-citron);
}
.wf-relay-source p,
.wf-relay-review p {
  font-size: 0.83em;
  color: var(--wf-muted);
  margin-top: 5px;
}
.wf-relay-end {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
}
.wf-relay-end .wf-art {
  width: 37%;
  aspect-ratio: 2;
  object-fit: cover;
}
.wf-relay-end strong {
  font-size: 1.2em;
}

/* A reviewer's annotation is attached directly to the quoted request. */
.wf--check .wf-scene {
  padding: var(--wf-gap);
}
.wf-evidence {
  display: grid;
  grid-template-columns: 31% 1fr;
  align-items: center;
  gap: 14px;
}
.wf-evidence .wf-art {
  aspect-ratio: 0.87;
  object-position: center 29%;
}
.wf-evidence blockquote {
  font-size: 1.2em;
  letter-spacing: var(--tr-title);
}
.wf-readback {
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 10px 0 0 16%;
  padding: 14px;
  background: var(--wf-paper);
  color: var(--wf-dark);
  border-radius: 2px var(--r-s) var(--r-s) var(--r-s);
}
.wf-readback .wf-label {
  color: var(--l-ink-2);
}
.wf-readback > span {
  font-size: 1.4em;
  line-height: 1;
}

/* Storage locations form a ledger beside the point-cloud shield. */
.wf--vault .wf-scene {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  align-items: stretch;
}
.wf-vault-art {
  background: #080809;
  overflow: hidden;
}
.wf-vault-art img {
  width: 145%;
  max-width: none;
  margin-left: -23%;
  object-fit: contain;
}
.wf-boundaries {
  padding: var(--wf-gap) 12px var(--wf-gap) var(--wf-gap);
}
.wf-boundaries > div {
  position: relative;
  padding: 3px 0 19px 15px;
  border-left: 1px solid var(--wf-rule);
}
.wf-boundaries > div::before {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  top: 8px;
  left: -3px;
  background: var(--wf-citron);
}
.wf-boundaries > div:last-child {
  padding-bottom: 3px;
}
.wf-boundaries dt {
  font-size: 1.06em;
  font-weight: 500;
}
.wf-boundaries dd {
  font-size: 0.84em;
  color: var(--wf-muted);
  margin-top: 3px;
}

/* The two speaking turns follow the facing profiles across the composition. */
.wf--dialogue .wf-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 var(--wf-gap) var(--wf-gap);
}
.wf--dialogue .wf-art {
  grid-column: 1/-1;
  height: clamp(145px, 47cqw, 280px);
  object-fit: contain;
  object-position: center bottom;
}
.wf-dialogue-source,
.wf-dialogue-answer {
  padding: 12px 0 0;
  border-top: 1px solid var(--wf-lav);
}
.wf-dialogue-answer {
  margin-top: 12px;
  border-top-color: var(--wf-citron);
}
.wf-dialogue-answer .wf-label {
  color: var(--wf-citron);
}
.wf--dialogue blockquote {
  font-size: 0.94em;
}

/* Source and interpretation occupy two adjoining planes around the cropped face. */
.wf--insight .wf-scene {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
}
.wf-insight-image {
  grid-row: span 2;
  overflow: hidden;
}
.wf-insight-image img {
  width: 160%;
  max-width: none;
  margin-left: -25%;
  object-fit: cover;
  object-position: center 30%;
}
.wf-source-bit {
  padding: var(--wf-gap) var(--wf-gap) 13px 0;
}
.wf-source-bit blockquote {
  font-size: 1.12em;
}
.wf-insight-result {
  background: var(--wf-paper);
  color: var(--wf-dark);
  padding: 15px var(--wf-gap);
  margin-left: -13%;
  position: relative;
}
.wf-insight-result .wf-label {
  color: var(--l-ink-2);
}
.wf-insight-result p {
  margin-top: 5px;
  font-size: 0.82em;
}

/* The JSON excerpt and the physical connector show where the file handoff ends. */
.wf--schema .wf-scene {
  padding: var(--wf-gap);
}
.wf-code-file {
  background: #08080a;
  border-radius: var(--r-s);
  padding: clamp(12px, 3.1cqw, 21px);
}
.wf-code-file pre {
  font: 0.83em/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e6e0d2;
}
.wf-code-file code span {
  color: var(--wf-lav);
}
.wf-file-handoff {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}
.wf-file-handoff img {
  width: 34%;
  aspect-ratio: 1.65;
  object-fit: cover;
}
.wf-file-handoff p {
  color: var(--wf-muted);
  font-size: 0.82em;
}

/* Two retirement ages share one baseline so the alternatives read together. */
.wf--dates .wf-scene {
  padding: clamp(108px, 27cqw, 190px) var(--wf-gap) var(--wf-gap);
}
.wf--dates .wf-art {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 74%;
  height: 89%;
  object-position: center 20%;
  mask-image: linear-gradient(180deg, #000 27%, transparent 100%);
}
.wf-date-pair {
  display: flex;
  align-items: end;
  gap: 12px;
}
.wf-date-pair strong {
  font: 400 clamp(50px, 14cqw, 98px)/0.86 var(--font-pixel, monospace);
  color: var(--wf-lav);
}
.wf-date-pair > span {
  font: 400 clamp(30px, 8cqw, 58px)/1 var(--font-pixel, monospace);
  color: #817987;
}
.wf-date-pair > div:last-child strong {
  color: var(--wf-citron);
}
/* Matches the specificity of .workflow-figure p, which resets paragraph margins. */
.workflow-figure .wf-date-owner {
  margin-top: 20px;
  max-width: 34ch;
  font-size: 0.91em;
  color: var(--ink-2);
}

/* A case folder carries the life event above a pair of document requests. */
.wf--coverage .wf-case-file {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--wf-gap);
}
.wf-case-file img {
  width: 52%;
  height: clamp(88px, 26cqw, 190px);
  object-fit: contain;
}
.wf-case-file strong {
  font-size: 1.4em;
  letter-spacing: var(--tr-title);
}
.wf-coverage-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 16px var(--wf-gap) var(--wf-gap);
  border-top: 1px solid var(--wf-rule);
}
.wf-coverage-notes > div {
  font-size: 0.92em;
}

/* The distribution brief flows from a client request to a named deliverable. */
.wf--briefing .wf-scene {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr;
  padding: var(--wf-gap);
}
.wf-brief-request {
  align-self: center;
}
.wf-brief-request blockquote {
  font-size: 1.18em;
  line-height: 1.25;
}
.wf-brief-folder {
  overflow: hidden;
}
.wf-brief-folder img {
  width: 145%;
  margin-left: -12%;
  max-width: none;
  object-fit: contain;
}
.wf-brief-footer {
  grid-column: 1/-1;
  margin-top: 17px;
  border-top: 1px solid var(--wf-rule);
}
.wf-brief-footer .wf-fields {
  font-size: 0.88em;
}

@container workflow (max-width: 360px) {
  .workflow-figure figcaption {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .wf-mail-sheet {
    width: 100%;
  }
  .wf--document .wf-scene {
    grid-template-columns: 0.45fr 1.55fr;
  }
  .wf--form .wf-scene {
    grid-template-columns: 26% 1fr;
  }
  .wf-readback {
    margin-left: 0;
  }
  .wf--mobile .wf-scene {
    grid-template-columns: 0.5fr 1fr;
  }
  .wf-coverage-notes {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wf--briefing .wf-scene {
    grid-template-columns: 1.5fr 0.5fr;
  }
}

/* Tiles share the shape scale: panels --r-l, inner tiles --r-m, strips --r-s. */
.wf-relay-source,
.wf-relay-review,
.wf-insight-result,
.wf-mail-sheet,
.wf-intake-art {
  border-radius: var(--r-m);
}
.wf-readback {
  border-radius: var(--r-s);
}
.wf-vault-art,
.wf-scene {
  border-radius: var(--r-l);
}
.workflow-figure pre,
.wf-code-file pre {
  border-radius: var(--r-m);
}