/* styles/components.css
 * Section recipes (canvas board u71Z29): compositions that recur on 3+ pages, built on the
 * Layout Library, Surface Library and actions.css. They encode structure and slots, not values.
 * Every type size, gap and width a page may want to vary is a custom property on the recipe
 * root (--intro-heading-size, --hero-deck-size, ...); set it inline or in a concern file.
 * Defaults come from the viewport type roles and spacing tokens, so M, D and W follow
 * tokens.css and typography.css. Colors inherit from the surface the recipe sits on.
 * Workflow strip pieces (stage strip, Up next) live in sections/workflow-pieces.css. */
@layer components {
  /* Shared slot: display headings in every recipe */
  .section-intro__heading,
  .hero-copy__heading,
  .closing-cta__heading,
  .workflow-hero__heading,
  .payoff-statement__heading,
  .step-label__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    text-wrap: balance;
  }

  /* ---------- Section intro (stacked, split, kicker) ----------
   * <header class="section-intro section-intro--split">
   *   <div class="section-intro__head">
   *     <p class="section-intro__kicker">0:00  ·  REQUIREMENTS</p>   (kicker variant only: a timecode or index, never a category label)
   *     <h2 class="section-intro__heading">...</h2>
   *   </div>
   *   <p class="section-intro__lede">...</p>
   * </header>
   * Without a modifier the lede stays under the heading at every width. --split puts the lede
   * beside the heading from D, top aligned, pushed to the end edge. --kicker is the split
   * layout with a mono kicker over the heading and a muted lede that drops below the
   * heading's first line. Board: M heading h2, D and W heading h1. */
  .section-intro {
    --intro-gap: var(--space-16);
    --intro-head-gap: var(--space-20);
    --intro-kicker-color: var(--fern);
    --intro-kicker-size: 12px;
    --intro-heading-size: var(--t-h2-size);
    --intro-heading-lh: var(--t-h2-lh);
    --intro-heading-ls: var(--t-h2-ls);
    --intro-heading-measure: none;
    --intro-lede-measure: 420px;
    --intro-lede-pad: var(--space-6);
    --intro-lede-size: var(--t-body-size);
    --intro-lede-lh: 1.5;
    --intro-lede-color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: var(--intro-gap);
  }

  .section-intro--kicker {
    --intro-lede-measure: 480px;
    --intro-lede-pad: 36px;
    --intro-lede-size: 17px;
    --intro-lede-lh: 1.55;
    --intro-lede-color: var(--ink-muted);
  }

  .section-intro__head {
    display: flex;
    flex-direction: column;
    gap: var(--intro-head-gap);
    max-width: var(--intro-heading-measure);
  }

  .section-intro__kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--intro-kicker-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    white-space: pre-wrap;
    color: var(--intro-kicker-color);
  }

  .section-intro__heading {
    font-size: var(--intro-heading-size);
    line-height: var(--intro-heading-lh);
    letter-spacing: var(--intro-heading-ls);
  }

  .section-intro__lede {
    margin: 0;
    padding-top: var(--intro-lede-pad);
    font-size: var(--intro-lede-size);
    line-height: var(--intro-lede-lh);
    color: var(--intro-lede-color);
  }

  @media (min-width: 900px) {
    .section-intro {
      --intro-heading-size: var(--t-h1-size);
      --intro-heading-lh: var(--t-h1-lh);
      --intro-heading-ls: var(--t-h1-ls);
      --intro-heading-measure: 760px;
    }

    .section-intro--kicker {
      --intro-lede-pad: 50px;
    }

    .section-intro--split,
    .section-intro--kicker {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-48);
    }

    .section-intro--split .section-intro__lede,
    .section-intro--kicker .section-intro__lede {
      flex: none;
      width: min(100%, var(--intro-lede-measure));
    }
  }

  @media (min-width: 1680px) {
    .section-intro {
      --intro-heading-measure: 1120px;
    }
  }

  /* ---------- Hero copy ----------
   * <div class="hero-copy">
   *   <h1 class="hero-copy__heading">...</h1>
   *   <p class="hero-copy__deck">...</p>
   *   <div class="hero-copy__actions cta-pair cta-pair--fern" data-cta-location="hero">...</div>
   * </div>
   * Sits inside any hero layout (stacked, split, figure below). Color inherits.
   * Board: heading display-md on M, display-lg on D and W; deck 17, 20, 22. */
  .hero-copy {
    --hero-gap: 28px;
    --hero-pad-top: var(--space-16);
    --hero-measure: 100%;
    --hero-heading-size: var(--t-display-md-size);
    --hero-heading-lh: var(--t-display-md-lh);
    --hero-heading-ls: var(--t-display-md-ls);
    --hero-deck-measure: none;
    --hero-deck-size: 17px;
    --hero-deck-lh: 1.45;
    --hero-actions-gap: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hero-gap);
    max-width: var(--hero-measure);
    padding-top: var(--hero-pad-top);
  }

  @media (min-width: 900px) {
    .hero-copy {
      --hero-heading-size: var(--t-display-lg-size);
      --hero-heading-lh: var(--t-display-lg-lh);
      --hero-heading-ls: var(--t-display-lg-ls);
      --hero-deck-size: 20px;
    }
  }

  @media (min-width: 1680px) {
    .hero-copy {
      --hero-deck-size: 22px;
    }
  }

  .hero-copy__heading {
    font-size: var(--hero-heading-size);
    line-height: var(--hero-heading-lh);
    letter-spacing: var(--hero-heading-ls);
  }

  .hero-copy__deck {
    margin: 0;
    max-width: var(--hero-deck-measure);
    font-size: var(--hero-deck-size);
    line-height: var(--hero-deck-lh);
  }

  .hero-copy__actions {
    margin-top: var(--hero-actions-gap);
  }

  /* ---------- Closing CTA ----------
   * Shared closing band every page ends with, plus split, centered and inline variants.
   * <section class="closing-cta surface--inverse-textured" data-cta-location="closing">
   *   <div class="container closing-cta__inner">
   *     <h2 class="closing-cta__heading">...</h2>
   *     <div class="closing-cta__body">
   *       <p class="closing-cta__deck">...</p>
   *       <div class="closing-cta__actions cta-pair cta-pair--fern">...</div>
   *     </div>
   *   </div>
   * </section>
   * Default: big heading, hairline rule, then deck beside actions (stacked on M).
   * --split: heading left, deck + actions right, on the app fern with a hairline below.
   * --centered: everything centered. --inline: light surface, no band, ink rule above.
   * Set --closing-bg to change the band. */
  .closing-cta {
    --closing-pad-top: var(--section-md);
    --closing-pad-bottom: var(--section-sm);
    --closing-bg: var(--fern);
    --closing-gap: var(--space-32);
    --closing-heading-measure: none;
    --closing-heading-size: 41px;
    --closing-heading-lh: 1;
    --closing-heading-ls: -0.02em;
    --closing-body-gap: var(--space-24);
    --closing-body-pad: var(--space-32);
    --closing-rule: var(--white-25);
    --closing-deck-measure: 560px;
    --closing-deck-size: 17px;
    --closing-deck-lh: 1.4;
    --closing-deck-color: var(--white-90);
    --closing-actions-gap: var(--space-24);
    --closing-columns: minmax(0, 608px) minmax(0, 1fr);
    padding-block: var(--closing-pad-top) var(--closing-pad-bottom);
    background-color: var(--closing-bg);
  }

  .closing-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--closing-gap);
  }

  .closing-cta__heading {
    max-width: var(--closing-heading-measure);
    font-size: var(--closing-heading-size);
    line-height: var(--closing-heading-lh);
    letter-spacing: var(--closing-heading-ls);
  }

  .closing-cta__body {
    display: flex;
    flex-direction: column;
    gap: var(--closing-body-gap);
    padding-top: var(--closing-body-pad);
    border-top: 1px solid var(--closing-rule);
  }

  .closing-cta__deck {
    margin: 0;
    max-width: var(--closing-deck-measure);
    font-size: var(--closing-deck-size);
    line-height: var(--closing-deck-lh);
    color: var(--closing-deck-color);
  }

  .closing-cta__actions {
    align-items: center;
    gap: var(--space-16) var(--closing-actions-gap);
  }

  /* Trust Link slot (master xpfyh, ecr7d, lzjNa): a muted arrow link under the copy, 24 below it
     on M and 32 from D, where the heading and body sit 32 and 56 apart. */
  .closing-cta__trust {
    --closing-trust-gap: var(--space-24);
    margin: calc(var(--closing-trust-gap) - var(--closing-gap)) 0 0;
    font-size: 15px;
    line-height: 18px;
  }

  /* The link runs inline with its arrow, so a label that wraps (320) keeps the arrow after its
     last word */
  .closing-cta__trust > .arrow-link { display: inline; }

  .closing-cta__trust > .arrow-link::after {
    display: inline-block;
    margin-inline-start: 6px;
    vertical-align: -2px;
  }

  @media (min-width: 900px) {
    .closing-cta__trust { --closing-trust-gap: var(--space-32); }
  }

  @media (min-width: 900px) {
    .closing-cta {
      --closing-gap: var(--space-56);
      --closing-heading-size: 80px;
      --closing-body-gap: var(--space-32);
      --closing-deck-size: 20px;
    }

    .closing-cta__body {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  @media (min-width: 1680px) {
    .closing-cta {
      --closing-heading-size: 108px;
    }
  }

  /* Split: app fern band, hairline below, no rule above the body; heading and body share
     a row from D. Board: heading h2 on M, h1 on D, display-sm on W. */
  .closing-cta--split {
    --closing-pad-top: var(--section-xs);
    --closing-pad-bottom: var(--section-xs);
    --closing-bg: var(--fern-app);
    --closing-gap: 28px;
    --closing-heading-size: var(--t-h2-size);
    --closing-heading-lh: var(--t-h2-lh);
    --closing-heading-ls: var(--t-h2-ls);
    --closing-deck-measure: none;
    --closing-actions-gap: var(--space-20);
    border-bottom: 1px solid var(--white-15);
  }

  .closing-cta--split .closing-cta__body {
    padding-top: 0;
    padding-bottom: var(--space-8);
    border-top: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  @media (min-width: 900px) {
    .closing-cta--split {
      --closing-gap: var(--space-48);
      --closing-heading-size: var(--t-h1-size);
      --closing-heading-lh: var(--t-h1-lh);
      --closing-heading-ls: var(--t-h1-ls);
    }

    .closing-cta--split .closing-cta__inner {
      display: grid;
      grid-template-columns: var(--closing-columns);
      gap: var(--closing-gap);
      align-items: start;
    }
  }

  @media (min-width: 1680px) {
    .closing-cta--split {
      --closing-heading-size: var(--t-display-sm-size);
      --closing-heading-lh: var(--t-display-sm-lh);
      --closing-heading-ls: var(--t-display-sm-ls);
    }
  }

  /* Centered. Board: heading display-sm on M, display-md on D, 96px on W; actions stack
     full width on M. */
  .closing-cta--centered {
    --closing-pad-top: var(--section-xl);
    --closing-pad-bottom: var(--section-md);
    --closing-gap: var(--space-24);
    --closing-heading-measure: 900px;
    --closing-heading-size: var(--t-display-sm-size);
    --closing-heading-lh: var(--t-display-sm-lh);
    --closing-heading-ls: var(--t-display-sm-ls);
    --closing-body-gap: 28px;
    --closing-deck-lh: 1.6;
    --closing-actions-gap: var(--space-12);
  }

  .closing-cta--centered .closing-cta__inner {
    align-items: center;
    text-align: center;
  }

  .closing-cta--centered .closing-cta__heading {
    width: 100%;
  }

  .closing-cta--centered .closing-cta__body {
    align-self: stretch;
    align-items: center;
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
  }

  /* Actions stack full width on M by default; a page whose frame keeps them in a row sets
     --closing-actions-direction: row (the Essay frame BRqWQ). */
  .closing-cta--centered .closing-cta__actions {
    flex-direction: var(--closing-actions-direction, column);
    align-self: var(--closing-actions-align, stretch);
    align-items: var(--closing-actions-align, stretch);
    gap: var(--space-10) var(--closing-actions-gap);
  }

  /* M: the button fills the row; the CLI link sits centered under it (board C3VRr9 centers its
     content; the Home 390 frame draws it as a 44px row) */
  .closing-cta--centered .closing-cta__actions .cli-link {
    align-self: center;
    min-height: 44px;
    margin-block: 0;
  }

  @media (min-width: 900px) {
    .closing-cta--centered {
      --closing-gap: var(--space-32);
      --closing-heading-size: var(--t-display-md-size);
      --closing-heading-lh: var(--t-display-md-lh);
      --closing-heading-ls: var(--t-display-md-ls);
      --closing-body-gap: var(--space-40);
      --closing-deck-lh: 1.5;
    }

    .closing-cta--centered .closing-cta__heading {
      max-width: var(--closing-heading-measure);
    }

    .closing-cta--centered .closing-cta__actions {
      flex-direction: row;
      align-self: center;
      align-items: center;
      justify-content: center;
      gap: var(--space-16) var(--closing-actions-gap);
    }
  }

  @media (min-width: 1680px) {
    .closing-cta--centered {
      --closing-heading-measure: 1200px;
      --closing-heading-size: 96px;
      --closing-heading-lh: 0.98;
      --closing-heading-ls: -2px;
      --closing-deck-lh: 1.4;
    }
  }

  /* Inline: light surface, ink rule above; use btn--primary and arrow-link--dark members.
     Board: heading h4 on M, h3 on D, h2 on W. A frame that draws no rule, no gap above the
     actions or another row alignment sets --closing-inline-rule-width (0px for no rule; the top
     pad still measures from the inner's top), --closing-inline-body-pad and
     --closing-inline-align (D start, W end). */
  .closing-cta--inline {
    --closing-inline-rule-width: 1px;
    --closing-inline-body-pad: var(--space-4);
    --closing-inline-align: start;
    --closing-pad-top: 0px;
    --closing-bg: var(--white);
    --closing-inner-pad: var(--space-40);
    --closing-gap: var(--space-20);
    --closing-heading-size: var(--t-h4-size);
    --closing-heading-lh: var(--t-h4-lh);
    --closing-heading-ls: var(--t-h4-ls);
    --closing-deck-size: 17px;
    --closing-deck-lh: 1.6;
    --closing-deck-color: var(--ink-2);
    --closing-deck-measure: none;
    --closing-body-gap: 28px;
    --closing-actions-gap: 28px;
    --closing-columns: minmax(0, 550px) minmax(0, 550px);
    color: var(--ink);
  }

  /* The ink rule spans the content column, not the gutters, and sits inside the top pad, as the
     boards draw it (GSH8w, F3ck4O, QhJwV: 342, 1280, 1680 wide; 40, 56, 80 to the heading): the
     inner is sized to the content instead of padding the .container gutters. */
  .closing-cta--inline .closing-cta__inner {
    width: calc(100% - 2 * var(--page-gutter));
    max-width: var(--container-max);
    padding-inline: 0;
    padding-top: calc(var(--closing-inner-pad) - var(--closing-inline-rule-width));
    border-top: var(--closing-inline-rule-width) solid var(--ink);
  }

  .closing-cta--inline .closing-cta__body {
    padding-top: var(--closing-inline-body-pad);
    border-top: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  @media (min-width: 900px) {
    .closing-cta--inline {
      --closing-inner-pad: var(--space-56);
      --closing-gap: 0px;
      --closing-heading-size: var(--t-h3-size);
      --closing-heading-lh: var(--t-h3-lh);
      --closing-heading-ls: var(--t-h3-ls);
      --closing-deck-lh: 1.5;
    }

    .closing-cta--inline .closing-cta__inner {
      display: grid;
      grid-template-columns: var(--closing-columns);
      gap: var(--closing-gap);
      align-items: var(--closing-inline-align);
    }

    .closing-cta--inline .closing-cta__body {
      justify-content: flex-start;
    }
  }

  @media (min-width: 1680px) {
    .closing-cta--inline {
      --closing-inner-pad: var(--space-80);
      --closing-heading-size: var(--t-h2-size);
      --closing-heading-lh: var(--t-h2-lh);
      --closing-heading-ls: var(--t-h2-ls);
      --closing-heading-measure: 900px;
      --closing-columns: minmax(0, 1fr) 520px;
      --closing-inline-align: end;
    }
  }

  /* ---------- Workflow hero ----------
   * Display headline, deck and CTA pair, with the Workflow Video Player (artifacts.css) in the
   * media slot below.
   * <section class="workflow-hero surface--inverse-textured">
   *   <div class="container workflow-hero__inner">
   *     <h1 class="workflow-hero__heading">...</h1>
   *     <p class="workflow-hero__deck">...</p>
   *     <div class="workflow-hero__actions cta-pair cta-pair--fern" data-cta-location="hero">...</div>
   *     <div class="workflow-hero__media">player</div>
   *   </div>
   * </section>
   * M stacks in that order with the actions at the end edge. D and W: heading across the top,
   * then deck left and actions right on one row, media full width. Board: heading 50, 104,
   * 140 (bold); deck 18, 21, 21. */
  .workflow-hero {
    --workflow-hero-pad: var(--section-xs);
    --workflow-hero-bg: var(--fern);
    --workflow-hero-gap: var(--space-24);
    --workflow-hero-heading-size: 50px;
    --workflow-hero-heading-lh: 0.96;
    --workflow-hero-heading-ls: -0.0212em;
    --workflow-hero-heading-weight: 700;
    --workflow-hero-heading-wrap: balance;
    --workflow-hero-deck-lh: 1.45;
    --workflow-hero-deck-measure: 600px;
    --workflow-hero-deck-size: 18px;
    --workflow-hero-media-gap: var(--space-32);
    padding-block: var(--workflow-hero-pad);
    background-color: var(--workflow-hero-bg);
  }

  .workflow-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--workflow-hero-gap);
  }

  /* A page whose frames break the headline greedily sets --workflow-hero-heading-wrap: wrap */
  .workflow-hero__heading {
    text-wrap: var(--workflow-hero-heading-wrap);
    font-size: var(--workflow-hero-heading-size);
    font-weight: var(--workflow-hero-heading-weight);
    line-height: var(--workflow-hero-heading-lh);
    letter-spacing: var(--workflow-hero-heading-ls);
  }

  .workflow-hero__deck {
    margin: 0;
    max-width: var(--workflow-hero-deck-measure);
    font-size: var(--workflow-hero-deck-size);
    line-height: var(--workflow-hero-deck-lh);
  }

  .workflow-hero__actions {
    justify-self: end;
    margin-top: var(--space-4);
  }

  .workflow-hero__media {
    container-type: inline-size;
    margin-top: calc(var(--workflow-hero-media-gap) - var(--workflow-hero-gap));
    min-width: 0;
  }

  /* Player box heights as the Workflow Hero 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). The split hero sets the same in workflow-steps.css. */
  .workflow-hero__media .workflow-player__stage { height: round(down, 100cqw * 9 / 16, 1px); }
  .workflow-hero__media .workflow-player__button--text { margin-block: -0.75px; }

  @media (min-width: 900px) {
    .workflow-hero {
      --workflow-hero-gap: var(--space-32);
      --workflow-hero-heading-size: 104px;
      --workflow-hero-deck-size: 21px;
      --workflow-hero-media-gap: var(--space-56);
    }

    .workflow-hero__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "heading heading"
        "deck actions"
        "media media";
      column-gap: 28px;
      row-gap: var(--workflow-hero-gap);
    }

    .workflow-hero__heading { grid-area: heading; }
    .workflow-hero__deck { grid-area: deck; }
    .workflow-hero__actions { grid-area: actions; align-self: end; margin-top: 0; }
    .workflow-hero__media { grid-area: media; }
  }

  @media (min-width: 1680px) {
    .workflow-hero {
      --workflow-hero-heading-size: 140px;
    }
  }

  /* ---------- Logo row ----------
   * <div class="logo-row">
   *   <p class="logo-row__label">Trusted by</p>
   *   <ul class="logo-row__list"><li><img src alt="Name" width="150" height="150"></li>...</ul>
   * </div>
   * Label cell then logo cells; each logo keeps its optical offset through --logo-offset.
   * M: label over a two-column grid. D and W: a 200px label cell, then the logos in equal
   * cells on one row. Images carry alt text naming the company. */
  .logo-row {
    --logo-row-gap: var(--space-8);
    --logo-gap: 0px;
    --logo-label-cell: 200px;
    --logo-label-h: 72px;
    --logo-cell-h: 60px;
    --logo-offset: 0;
    --logo-size: 150px;
    --logo-label-size: 14px;
    --logo-label-color: var(--ink-muted);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--logo-row-gap);
    padding-bottom: var(--space-24);
    border-bottom: 1px solid var(--line-2);
  }

  .logo-row__label {
    display: flex;
    align-items: center;
    min-height: var(--logo-label-h);
    margin: 0;
    font-size: var(--logo-label-size);
    font-weight: 500;
    line-height: 1.4;
    color: var(--logo-label-color);
  }

  .logo-row__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--logo-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .logo-row__list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--logo-cell-h);
    overflow: hidden;
    transform: translateY(var(--logo-offset));
  }

  /* Wall logos are square art with padding; the cell crops it. --logo-size is the art box. */
  .logo-row__list img {
    display: block;
    flex: none;
    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: contain;
  }

  @media (min-width: 900px) {
    .logo-row {
      --logo-row-gap: 0px;
      --logo-cell-h: 72px;
      grid-template-columns: var(--logo-label-cell) minmax(0, 1fr);
      align-items: center;
    }

    .logo-row__list {
      grid-template-columns: none;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    }
  }

  /* ---------- Stat row ----------
   * <div class="stat-row">
   *   <div class="stat-row__item stat">
   *     <p class="stat__value t-display-md">95%</p>
   *     <p class="stat__caption t-ui-sm">of the team's decisions ...</p>
   *   </div>
   *   <p class="stat-row__source t-ui-sm">Source: <a class="text-link" href="...">...</a></p>
   * </div>
   * Cells hold the `.stat` primitive (primitives.css) under a hairline. M stacks the cells;
   * D and W set them side by side with vertical rules. The source line spans the row and
   * links the paper behind the numbers. The value role is an instance choice: pick the t-*
   * class on `stat__value` (board: display-sm on M, display-md on D, display-lg on W). */
  .stat-row {
    --stat-rule: var(--line);
    --stat-gap: var(--space-10);
    --stat-row-gap: 28px;
    --stat-source-gap: var(--space-16);
    --stat-count: 3;
    --stat-pad-top: 28px;
    --stat-pad-inline: var(--space-32);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stat-row-gap) 0;
    padding-top: var(--stat-pad-top);
    border-top: 1px solid var(--stat-rule);
  }

  .stat-row__source {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--stat-source-gap);
    color: var(--ink-2);
  }

  .stat-row__item {
    gap: var(--stat-gap);
  }

  @media (min-width: 900px) {
    .stat-row {
      --stat-pad-top: var(--space-40);
      --stat-row-gap: 0px;
      grid-template-columns: repeat(var(--stat-count), minmax(0, 1fr));
    }

    .stat-row__item {
      padding-inline: var(--stat-pad-inline);
      border-inline-start: 1px solid var(--stat-rule);
    }

    .stat-row__item:first-child {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

  /* ---------- Step label ----------
   * `.index` or `.timecode` primitive, h4 title, body. Sits beside an artifact.
   * <div class="step-label">
   *   <p class="index t-mono-sm">01</p>
   *   <h3 class="step-label__title">Feedback in Slack</h3>
   *   <p class="step-label__body">...</p>
   * </div>
   * Board: title 23 on M, 32 on D and W; body 17 at every width. */
  .step-label {
    --step-gap: 14px;
    --step-measure: 340px;
    --step-title-size: var(--t-h4-size);
    --step-title-lh: var(--t-h4-lh);
    --step-title-ls: var(--t-h4-ls);
    --step-body-size: 17px;
    --step-body-lh: 1.55;
    --step-body-color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: var(--step-gap);
    max-width: var(--step-measure);
  }

  @media (min-width: 1680px) {
    .step-label {
      --step-title-size: 32px;
      --step-title-ls: -0.015em;
    }
  }

  .step-label__title {
    font-size: var(--step-title-size);
    line-height: var(--step-title-lh);
    letter-spacing: var(--step-title-ls);
  }

  .step-label__body {
    margin: 0;
    font-size: var(--step-body-size);
    line-height: var(--step-body-lh);
    color: var(--step-body-color);
  }

  /* ---------- Payoff statement ----------
   * Mono timecode line over a display line, supporting sentence beside it at the bottom
   * (D, W) or below (M), under a hairline.
   * <div class="payoff-statement">
   *   <p class="payoff-statement__meta timecode t-mono">0:31  ·  An updated answer to build against</p>
   *   <h2 class="payoff-statement__heading">...</h2>
   *   <p class="payoff-statement__sub">...</p>
   * </div>
   * Board: heading 36, 64, 86 with 1.02 leading. */
  .payoff-statement {
    --payoff-pad-top: var(--space-40);
    --payoff-gap: var(--space-24);
    --payoff-sub-gap: var(--space-48);
    --payoff-column-gap: var(--space-80);
    --payoff-heading-size: 36px;
    --payoff-heading-lh: 1.02;
    --payoff-heading-ls: -0.0244em;
    --payoff-sub-measure: 440px;
    --payoff-sub-size: 17px;
    --payoff-sub-lh: 1.55;
    --payoff-sub-color: var(--ink-muted);
    --payoff-columns: minmax(0, 1fr) var(--payoff-sub-measure);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--payoff-gap);
    padding-top: var(--payoff-pad-top);
    border-top: 1px solid var(--line-2);
  }

  .payoff-statement__meta {
    margin: 0;
  }

  .payoff-statement__heading {
    font-size: var(--payoff-heading-size);
    line-height: var(--payoff-heading-lh);
    letter-spacing: var(--payoff-heading-ls);
  }

  .payoff-statement__sub {
    margin: calc(var(--payoff-sub-gap) - var(--payoff-gap)) 0 0;
    padding-bottom: var(--space-8);
    font-size: var(--payoff-sub-size);
    line-height: var(--payoff-sub-lh);
    color: var(--payoff-sub-color);
  }

  @media (min-width: 900px) {
    .payoff-statement {
      --payoff-pad-top: var(--space-56);
      --payoff-heading-size: var(--t-display-sm-size);
      --payoff-heading-ls: var(--t-display-sm-ls);
      grid-template-columns: var(--payoff-columns);
      column-gap: var(--payoff-column-gap);
    }

    .payoff-statement__meta { grid-column: 1; grid-row: 1; }
    .payoff-statement__heading { grid-column: 1; grid-row: 2; }

    .payoff-statement__sub {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: end;
      margin-top: 0;
    }
  }

  @media (min-width: 1680px) {
    .payoff-statement {
      --payoff-heading-size: 86px;
      --payoff-heading-ls: -0.022em;
    }
  }

  /* Payoff, stacked (BRI-7757; Decision History cL1Sb, RhelO, eNHFf): the sub under the heading at
     every width, one column, no pad under the sub. Type, gaps and measure stay the recipe's custom
     properties; --payoff-heading-wrap (default balance), --payoff-meta-lh and --payoff-meta-ls let a
     page follow its frame's line breaks and timecode line. */
  .payoff-statement--stacked {
    --payoff-heading-wrap: balance;
    --payoff-meta-lh: 1.5;
    --payoff-meta-ls: 0;
  }

  .payoff-statement--stacked .payoff-statement__meta {
    line-height: var(--payoff-meta-lh);
    letter-spacing: var(--payoff-meta-ls);
  }

  .payoff-statement--stacked .payoff-statement__heading { text-wrap: var(--payoff-heading-wrap); }

  .payoff-statement--stacked .payoff-statement__sub {
    max-width: var(--payoff-sub-measure);
    padding-bottom: 0;
  }

  @media (min-width: 900px) {
    .payoff-statement--stacked { grid-template-columns: minmax(0, 1fr); }

    .payoff-statement--stacked .payoff-statement__sub {
      grid-column: 1;
      grid-row: 3;
      align-self: auto;
      margin-top: calc(var(--payoff-sub-gap) - var(--payoff-gap));
    }
  }

  /* Closing, frame wrap (BRI-7757, closing.modifiers: ['frame-wrap']): the default band with its
     heading broken greedily, as Pencil draws it at 390, 1440 and 1920. A newline in the heading (a
     <br>; write it after a space) holds only where the band has the 1440 frame's 1280 content width;
     narrower, the line wraps on its own, and between 900 and that width it wraps pretty, so no word
     is left alone on a line. From D the deck and the actions wrap onto two rows where they do not
     fit side by side. */
  .closing-cta--frame-wrap .closing-cta__inner { container: closing-cta / inline-size; }
  .closing-cta--frame-wrap .closing-cta__heading { text-wrap: wrap; }

  @container closing-cta (width < 1280px) {
    .closing-cta--frame-wrap .closing-cta__heading br { display: none; }
  }

  @media (min-width: 900px) {
    @container closing-cta (width < 1280px) {
      .closing-cta--frame-wrap .closing-cta__heading { text-wrap: pretty; }
    }
  }

  @media (min-width: 900px) {
    .closing-cta--frame-wrap .closing-cta__body { flex-wrap: wrap; }
  }
}