/* styles/sections/workflow-steps.css
 * A workflow walkthrough page (scripts/lib/workflow-page.js): the split hero settings, the steps
 * (a step-label and a margin note beside the product artifact it describes), the closing band
 * with its before and after list. The artifacts are transcribed from frames of the workflow
 * video and wrapped in .artifact-window; .ticket-* classes style the rows inside them.
 * Geometry is the Creating Tickets frames (H78TYO 1440, bLhsb 390, DAu7Y 1920). Rows inside a card
 * switch from the mobile (stacked) to the desktop (columned) layout by the card's own width
 * (container "ticket", 600px), so a narrow D card between 900 and about 1100 stays stacked. */
@layer sections {
  /* ---------- Hero: workflow-hero recipe settings; deck beside the heading on W ----------
   * The frame's hero is not a master instance: the display-lg type role at weight 600 (88 on
   * D, 120 on W), deck 18, 21, 21, no actions. On M the frame (bLhsb) draws the headline at 44,
   * the display-md M size, with display-lg's line height and tracking. The recipe puts the
   * media (media-gap minus gap) below the deck, so media-gap is the total space above it. */
  .workflow-hero--split {
    --workflow-hero-pad: var(--space-56);
    --workflow-hero-gap: var(--space-20);
    --workflow-hero-media-gap: var(--space-32);
    --workflow-hero-heading-size: var(--t-display-md-size);
    /* Lines on whole pixels, as Pencil draws them (88 x 0.95 is 84, 21 x 1.45 is 30) */
    --workflow-hero-heading-lh: round(nearest, var(--t-display-lg-lh) * 1em, 1px);
    --workflow-hero-heading-ls: var(--t-display-lg-ls);
    --workflow-hero-heading-weight: 600;
    --workflow-hero-deck-size: var(--t-body-lg-size);
    --workflow-hero-deck-lh: round(nearest, 1.45em, 1px);
    --workflow-hero-deck-measure: 600px;
  }

  .workflow-hero--split .workflow-hero__deck { color: var(--white-90); }

  /* Player box heights as the frames draw them: the stage at a whole-pixel 16:9 (342 wide
     gives 192, not 192.4) and the CC chip laid out at the board's 28px (its centred 1.5px
     stroke still paints at 29.5). */
  .workflow-hero--split .workflow-hero__media { container-type: inline-size; }
  .workflow-hero--split .workflow-player__stage { height: round(down, 100cqw * 9 / 16, 1px); }
  .workflow-hero--split .workflow-player__button--text { margin-block: -0.75px; }

  @media (min-width: 900px) {
    .workflow-hero--split {
      --workflow-hero-pad: var(--space-80);
      --workflow-hero-gap: var(--space-28);
      --workflow-hero-media-gap: var(--space-48);
      --workflow-hero-heading-size: var(--t-display-lg-size);
      --workflow-hero-deck-size: 21px;
    }
  }

  @media (min-width: 1680px) {
    .workflow-hero--split {
      --workflow-hero-deck-measure: 520px;
      padding-block: var(--space-96) 86px;
    }

    .workflow-hero--split .workflow-hero__inner {
      grid-template-columns: minmax(0, 1fr) var(--workflow-hero-deck-measure);
      grid-template-areas: "heading deck" "media media";
      align-items: end;
      row-gap: var(--space-48);
    }

    .workflow-hero--split .workflow-hero__media { margin-top: 0; }
  }

  /* ---------- Hero: heading beside the deck and actions from D (workflow-hero--beside) ----------
   * The Code Review and Decision History frames (u6eJ8g, SC6Wj, DWV0p; yyx3A) override the master's
   * Top to a row: the heading at the start, a 608 Side column (22 down, deck, 32, actions) at the end,
   * 64 apart, 56 + 56 above the player. M stacks: heading, 40 + 22, deck, 24, the actions one per row
   * 24 apart, 40 + 32 above the player. Type is the master's (50, 104, 140; deck 18, 21, 21) on whole
   * pixel lines, as Pencil sets them. Between 900 and 1440 the Side column keeps the frame's 47.5%. */
  .workflow-hero--beside {
    --workflow-hero-gap: 0px;
    --workflow-hero-media-gap: 72px;
    --workflow-hero-heading-lh: round(nearest, 0.96em, 1px);
    --workflow-hero-deck-lh: round(nearest, 1.45em, 1px);
    --workflow-hero-deck-measure: none;
  }

  .workflow-hero--beside .workflow-hero__deck { margin-top: 62px; }

  .workflow-hero--beside .workflow-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
    gap: var(--space-24);
    margin-top: var(--space-24);
  }

  @media (min-width: 900px) {
    .workflow-hero--beside { --workflow-hero-media-gap: 112px; }

    .workflow-hero--beside .workflow-hero__inner {
      grid-template-columns: minmax(0, 1fr) min(608px, 47.5%);
      grid-template-areas:
        "heading deck"
        "heading actions"
        "media media";
      column-gap: var(--space-64);
      align-items: start;
    }

    .workflow-hero--beside .workflow-hero__deck { margin-top: 22px; }

    .workflow-hero--beside .workflow-hero__actions {
      flex-direction: row;
      align-items: center;
      align-self: start;
      margin-top: var(--space-32);
    }
  }

  /* Pencil wraps greedily; the foundation's p { text-wrap: pretty } would rewrap the frame's lines */
  .workflow-hero--beside p { text-wrap: wrap; }

  /* ---------- Walkthrough section: the steps, then Up next, between two dither edges ---------- */
  .workflow-walkthrough {
    padding-block: var(--section-xs);
  }

  /* Pencil wraps a line that measures a fraction over the column (783.1 in 783 at W); 2px
     less measure breaks the bodies where the frames do. */
  .workflow-walkthrough .up-next {
    --up-next-body-measure: calc(100% - 2px);
    --up-next-title-lh: 23px;
    --up-next-body-lh: 23px;
    padding-top: var(--space-48);
  }

  /* Up next lines on whole pixels, as the frame draws them: title and body 23, caption and
     index 17, so the cards are 148 and 171 tall at 390 */
  .workflow-walkthrough .up-next__label,
  .workflow-walkthrough .up-next__index { line-height: 17px; }

  @media (min-width: 900px) {
    .workflow-walkthrough .up-next { padding-top: var(--space-96); }
  }

  .workflow-steps {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .workflow-step {
    --note-gap: var(--space-40);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-40);
    anchor-scope: --wf-note, --wf-card;
  }

  .workflow-step > .step-label {
    --step-gap: var(--space-14);
    --step-measure: none;
    --step-title-size: var(--t-h4-size);
    /* Lines on whole pixels, as Pencil draws them: 23 x 1.05 is 24, 32 x 1.05 is 34 */
    --step-title-lh: round(nearest, 1.05em, 1px);
    --step-body-size: var(--t-body-size);
  }

  /* M: the index sits on the title's baseline (BRI-7805 J22). */
  .workflow-step .step-label__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
  }

  .workflow-step .step-label__head .index {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.5px;
  }

  .workflow-step .step-label__title { letter-spacing: -0.01em; }

  .workflow-step .step-label__body {
    line-height: round(nearest, 1.55em, 1px);
    color: var(--ink-muted);
  }

  /* Margin note: Piazzolla italic in ink (pending: orange ink), a hairline to the card on D */
  .workflow-step__note {
    --note-offset: 0px;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin: var(--space-14) 0 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    line-height: round(nearest, 1.4em, 1px);
    color: var(--ink);
  }

  .workflow-step__note--pending { color: var(--orange-ink); }

  .workflow-step__rule { display: none; }

  .workflow-step > .artifact-window {
    margin-top: var(--space-32);
    anchor-name: --wf-card;
  }

  .workflow-step [data-note-anchor] { anchor-name: --wf-note; }

  @media (min-width: 900px) {
    .workflow-step {
      grid-template-columns: minmax(0, 400fr) minmax(0, 840fr);
      column-gap: var(--note-gap);
      align-items: start;
      padding-block: var(--space-56);
    }

    .workflow-step > .step-label {
      --step-title-size: 32px;
      grid-area: 1 / 1;
    }
    .workflow-step > .artifact-window { grid-area: 1 / 2; margin-top: 0; }

    .workflow-step .step-label__head {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-6);
    }

    .workflow-step .step-label__title { letter-spacing: -0.015em; }

    .workflow-step__note {
      grid-area: 2 / 1;
      margin-top: var(--space-40);
      font-size: 19px;
    }

    .workflow-step__note > span:first-child { flex: 0 1 372px; }

    /* The hairline runs from the note to the card edge */
    .workflow-step__rule {
      display: block;
      flex: 1 1 0;
      min-width: var(--space-24);
      height: 1px;
      background: currentcolor;
    }

    /* Without anchor positioning the note stays beside the card: the card spans both rows,
       the note sits in the label column below the label, and the hairline crosses the gap. */
    @supports not ((anchor-name: --a) and (anchor-scope: all)) {
      .workflow-step { grid-template-rows: auto 1fr; }
      .workflow-step > .artifact-window { grid-row: 1 / span 2; }
      .workflow-step__note { margin-right: calc(-1 * var(--note-gap)); }
    }

    /* Level with the artifact row it annotates */
    @supports (anchor-name: --a) and (anchor-scope: all) {
      .workflow-step__note {
        position: absolute;
        left: 0;
        right: anchor(--wf-card left);
        top: anchor(--wf-note center);
        translate: 0 calc(-50% + var(--note-offset, 0px));
        margin: 0;
      }
    }
  }

  @media (min-width: 1680px) {
    .workflow-step { grid-template-columns: minmax(0, 1fr) 840px; }
    .workflow-step--wide-start { grid-template-columns: 400px 840px; }
  }

  /* Pencil wraps greedily; these wrap pretty instead, which keeps a greedy break unless it ends
     on one word (BRI-7805 J14) */
  .workflow-hero--split p,
  .workflow-walkthrough p,
  .closing-cta--outcome p {
    text-wrap: wrap;
    text-wrap-style: pretty;
  }

  /* ---------- Product artifacts: the rows inside the shells ---------- */
  /* The window border and where it sits come from the shared shell (artifacts.css) */
  .workflow-step .artifact-window {
    --artifact-bar-pad: var(--space-20);
    --artifact-bar-app-weight: 600;
    font-family: var(--font-body);
    container: ticket / inline-size;
  }

  /* Separators in the transcribed UI are two spaces either side of the dot, as in the frame */
  .workflow-step .artifact-bar > span,
  .ticket-ref { white-space: pre-wrap; }

  .ticket-bar--filed {
    --artifact-bar-pad: var(--space-16);
    --artifact-bar-app-weight: 700;
  }

  @container ticket (min-width: 600px) {
    .ticket-bar--filed { --artifact-bar-pad: var(--space-24); }
  }

  /* Box heights follow the frames: Pencil draws each text line at a whole-pixel height
     (19px type 23, 22px 26, 24px x 1.05 25, 16px 19, 13px 16, 14px 17, 12px 14), and every
     line height below is set to that value so each window matches its frame height. */
  .ticket-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 23px;
    color: var(--ink);
  }

  /* Jira fields: label over value on M, a 200px label column from D */
  .ticket-body > .ticket-title {
    padding: var(--space-24) var(--space-16);
    box-shadow: inset 0 -1px 0 var(--line-2);
  }

  .ticket-fields,
  .ticket-answers {
    margin: 0;
  }

  .ticket-fields > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: 18px var(--space-16);
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  /* Row rules are inset shadows: the frame's strokes sit inside the row, so they add no height */
  .ticket-fields > div + div,
  .ticket-answers > div + div { box-shadow: inset 0 1px 0 var(--line-2); }

  .ticket-fields dd,
  .ticket-answers dd { margin: 0; }

  .ticket-empty {
    font-style: italic;
    color: var(--ink-55);
  }

  /* Rails, as the frame's strokes leave them after the card clips their outer half. The 3px
     highlighted-row stroke reads the rail colour at about 62% then 50% beside the window's
     1px inset edge (artifacts.css); the 4px step 03 group and criteria stroke leaves one solid
     column of fern or orange at x+1. --rail-edge is declared on each railed row so it reads
     that row's --rail. */
  .ticket-fields > .is-focus,
  .ticket-answers > .is-focus {
    --rail: var(--fern);
    --rail-edge: linear-gradient(to right, transparent 1px, color-mix(in srgb, var(--rail) 62%, transparent) 1px 2px, color-mix(in srgb, var(--rail) 50%, transparent) 2px 3px, transparent 3px);
    background: var(--paper);
    box-shadow: inset 0 1px 0 var(--line-2);
    background-image: var(--rail-edge);
  }

  /* Brief feature record */
  .ticket-body--record { background: var(--brief-surface); }

  .ticket-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-28) var(--space-20);
    box-shadow: inset 0 -1px 0 var(--line-2);
  }

  .ticket-head .ticket-title {
    font-size: 20px;
    line-height: 21px;
    letter-spacing: -0.02em;
  }

  .ticket-lede {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  .ticket-answers > div {
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    font-size: 16px;
    line-height: 19px;
    color: var(--ink);
  }

  .ticket-answers > .is-focus { box-shadow: inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--fern); }
  .ticket-answers > .is-focus + div { box-shadow: none; }

  .ticket-answers dt {
    width: 200px;
    max-width: 100%;
    margin-bottom: var(--space-32);
    font-weight: 600;
  }

  .ticket-answers dt + dd { padding-top: var(--space-4); }
  .ticket-answers dd + dd { margin-top: var(--space-12); }

  .ticket-sub {
    display: block;
    margin-top: var(--space-6);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .ticket-quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding-left: var(--space-16);
    border-left: 2px solid var(--rule-edge);
  }

  .ticket-quote p {
    margin: 0;
    line-height: 23px;
  }

  .ticket-quote footer {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .ticket-decision {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-16);
  }

  .ticket-decision__id {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--fern);
  }

  @container ticket (min-width: 600px) {
    .ticket-body > .ticket-title {
      padding: var(--space-24) var(--space-28);
      font-size: 22px;
      line-height: 26px;
    }

    .ticket-fields > div {
      flex-direction: row;
      align-items: center;
      padding-inline: var(--space-28);
    }

    .ticket-fields dt { flex: none; width: 200px; }

    .ticket-head { padding: var(--space-28) var(--space-32); }

    .ticket-head .ticket-title { font-size: 24px; line-height: 25px; }

    .ticket-answers > div {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      column-gap: var(--space-40);
      padding: var(--space-20) var(--space-32);
    }

    .ticket-answers dt {
      grid-row: 1 / span 3;
      margin-bottom: 0;
    }

    .ticket-answers dd { grid-column: 2; }
  }

  /* Jira description: binding and pending groups with a continuous rail */
  .ticket-bar--status {
    --artifact-bar-row-gap: var(--space-6);
    flex-wrap: wrap;
    /* The bar's rule is a border in the shared shell (home's product shots are tuned to it);
       the frame draws it inside the bar's 70px, so this wrapping bar gives back that 1px */
    padding-block: var(--space-12) 11px;
    line-height: 16px;
  }

  .ticket-bar__context { order: 1; flex-basis: 100%; }

  .ticket-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    height: 24px;
    padding-inline: var(--space-10);
    border-radius: 12px;
    background: var(--orange-tint);
    color: var(--orange-ink);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .ticket-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--orange);
  }

  .ticket-groups,
  .ticket-group,
  .ticket-criteria {
    display: grid;
    gap: 1px;
    background: var(--line-2);
  }

  .ticket-criteria {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Step 03 group heads and criteria: the solid rail column described with the rails above */
  .ticket-group__head,
  .ticket-criteria > li {
    --rail: var(--fern);
    --rail-edge: linear-gradient(to right, var(--rail) 2px, transparent 2px);
    background: var(--rail-edge) var(--white);
  }

  .ticket-group--pending .ticket-group__head,
  .ticket-group--pending .ticket-criteria > li { --rail: var(--orange); }

  .ticket-group__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
    padding: var(--space-16) var(--space-20) var(--space-12) var(--space-16);
    font-size: 14px;
    line-height: 17px;
    color: var(--ink-muted);
  }

  .ticket-group__head > strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fern);
  }

  /* The groups meet without a gap: the frame draws the rule between them inside the pending
     group's head, so it adds no height */
  .ticket-groups { gap: 0; }

  .ticket-group--pending .ticket-group__head {
    background: var(--rail-edge) var(--orange-wash);
    box-shadow: inset 0 1px 0 var(--line-2);
  }
  .ticket-group--pending .ticket-group__head > strong { color: var(--orange-ink); }

  .ticket-criteria > li {
    display: flex;
    gap: var(--space-8);
    padding: 18px var(--space-16);
  }

  .ticket-criterion__num {
    flex: none;
    width: 28px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    color: var(--fern);
  }

  .ticket-criteria li > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
  }

  /* Line heights as Pencil rounds them: 17 x 1.45 draws 25px lines, the 13px refs 16px */
  .ticket-criteria p {
    margin: 0;
    max-width: 600px;
    font-size: 17px;
    line-height: 25px;
    color: var(--ink);
  }

  .ticket-criteria .ticket-ref {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    color: var(--fern);
  }

  .ticket-group--pending .ticket-ref { color: var(--orange-ink); }

  /* The status bar needs the most room: one row from a 720px card */
  @container ticket (min-width: 720px) {
    .ticket-bar--status { flex-wrap: nowrap; padding-block: 0; }
    .ticket-bar__context { order: 0; flex-basis: auto; }
  }

  @container ticket (min-width: 600px) {

    .ticket-group__head {
      flex-direction: row;
      align-items: center;
      padding: var(--space-16) var(--space-32) var(--space-12) 29px;
    }

    .ticket-criteria > li { padding: 18px var(--space-28) 18px var(--space-16); }
  }

  /* Slack message */
  .ticket-message {
    display: flex;
    gap: var(--space-14);
    padding: var(--space-24) var(--space-16) var(--space-28);
    font-size: 15px;
    line-height: 1.2;
    color: var(--ink);
  }

  .ticket-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--fern);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
  }

  .ticket-message__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
  }

  .ticket-message__body p { margin: 0; }

  .ticket-sender {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }

  .ticket-sender > strong { font-weight: 700; }

  .ticket-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-55);
  }

  .ticket-summary {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
  }

  .ticket-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ticket-bullets > li {
    display: flex;
    gap: var(--space-10);
    line-height: 23px;
  }

  .ticket-bullets > li::before {
    content: "\2022";
    color: var(--ink-55);
  }

  /* The frame centres the 2px rule on the box edge (1px outside, 1px inside) and counts the
     14px text inset from that edge */
  .ticket-callout {
    padding: 2px 0 2px var(--space-14);
    box-shadow: -1px 0 0 var(--fern), inset 1px 0 0 var(--fern);
    font-weight: 600;
  }

  .ticket-sent {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-4);
    font-size: 13px;
    color: var(--ink-55);
  }

  .ticket-sent > img { display: block; }

  /* The frame sets the Slack card 6px lower than the other cards */
  .workflow-step > .artifact-window:has(.ticket-message) { margin-top: 38px; }

  @container ticket (min-width: 600px) {
    .ticket-message { padding-inline: var(--space-28); }
  }

  @media (min-width: 900px) {
    .workflow-step > .artifact-window:has(.ticket-message) { margin-top: var(--space-6); }
  }

  /* ---------- Closing band with the before and after list beside the actions ---------- */
  /* The workflow frames draw the band on fern without the split recipe's hairline (#355) */
  .closing-cta--outcome {
    --closing-bg: var(--fern);
    --closing-actions-gap: 28px;
    --closing-gap: var(--space-48);
    --closing-heading-measure: none;
    --closing-heading-size: var(--t-h2-size);
    --closing-heading-lh: round(nearest, 1.05em, 1px);
    --closing-deck-measure: 540px;
    --closing-deck-size: var(--t-body-size);
    --closing-deck-lh: round(nearest, 1.4em, 1px);
    --closing-columns: minmax(0, 680fr) minmax(0, 520fr);
    --closing-heading-ls: -0.015em;
    border-bottom: 0;
  }

  .closing-cta--outcome .closing-cta__heading { text-wrap: wrap; }

  .closing-cta__lead {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  .closing-cta__lead .closing-cta__body {
    gap: var(--space-28);
    padding-block: 0;
    border-top: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stacked (closing.modifiers: ['stacked']): the default Closing CTA band (xpfyh, ecr7d,
     lzjNa) through the builder's lead wrapper: heading, the rule, then the deck beside the
     actions from D. The boards draw the rule inside the 32 pad, and the deck on whole-pixel
     lines (17 x 1.4 is 24, 20 x 1.4 is 28). */
  .closing-cta--stacked {
    --closing-deck-lh: round(nearest, 1.4em, 1px);
  }

  .closing-cta--stacked .closing-cta__lead {
    gap: var(--closing-gap);
  }

  .closing-cta--stacked .closing-cta__lead .closing-cta__body {
    gap: var(--closing-body-gap);
    padding-top: calc(var(--closing-body-pad) - 1px);
    border-top: 1px solid var(--closing-rule);
  }

  /* Without the lead wrapper (#381: a stacked band has none), the body is the inner's own child */
  .closing-cta--stacked > .closing-cta__inner > .closing-cta__body {
    padding-top: calc(var(--closing-body-pad) - 1px);
  }

  @media (min-width: 900px) {
    .closing-cta--stacked .closing-cta__lead .closing-cta__body {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .workflow-outcome {
    --outcome-columns: minmax(0, 1fr) 64px 64px;
    --outcome-gap: var(--space-8);
    box-shadow: inset 0 1px 0 var(--white-25);
  }

  .workflow-outcome__columns,
  .workflow-outcome__list > li {
    display: grid;
    grid-template-columns: var(--outcome-columns);
    column-gap: var(--outcome-gap);
    align-items: center;
    margin: 0;
    padding-block: var(--space-14);
    box-shadow: inset 0 -1px 0 var(--white-15);
  }

  .workflow-outcome__columns {
    min-height: 56px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white-60);
  }

  .workflow-outcome__columns > span:not(:first-child),
  .workflow-outcome__list > li > span:not(:first-child) { text-align: right; }

  .workflow-outcome__columns > span:last-child { color: var(--white); }

  .workflow-outcome__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .workflow-outcome__list > li {
    font-size: 15px;
    line-height: 1.2;
    color: var(--white-90);
  }

  .workflow-outcome__list > li > span:not(:first-child) {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .workflow-outcome__list > li > span:nth-child(2) { color: var(--white-60); }

  .workflow-outcome__list > li > span:last-child {
    font-weight: 600;
    color: var(--white);
  }

  @media (min-width: 900px) {
    /* The frame breaks the headline after "and" on D and W: the measure holds that break */
    .closing-cta--outcome {
      --closing-gap: var(--space-80);
      --closing-heading-size: var(--t-h1-size);
      --closing-heading-measure: 12.2em;
      --closing-heading-ls: -0.02em;
    }

    .closing-cta--outcome .closing-cta__heading { text-wrap: balance; }
    .closing-cta--outcome .closing-cta__inner { align-items: center; }

    .workflow-outcome { --outcome-columns: minmax(0, 300fr) minmax(0, 110fr) minmax(0, 110fr); --outcome-gap: 0; }
    .workflow-outcome__columns { min-height: 0; }
  }

  /* D: copy and ledger split 680:520 (the 1440 frame) and shrink together below it, so the
     headline keeps a usable measure from 900. W: the ledger holds the frame's 520px. */
  @media (min-width: 1680px) {
    .closing-cta--outcome {
      --closing-heading-ls: -0.025em;
      --closing-columns: minmax(0, 1fr) minmax(0, 520px);
    }
  }
}