/* The value chain follows content size instead of scaling SVG text coordinates. */
.v4-body .v4-prose .v4-value-chain { margin:2em 0; width:100%; min-width:0; container-type:inline-size; }
.v4-body .v4-prose .v4-value-chain__steps { --flow-gap:2.5em; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto; gap:1em var(--flow-gap); padding:0; margin:0; }
.v4-body .v4-prose .v4-value-chain__step { display:grid; grid-template-rows:subgrid; grid-row:span 2; min-width:0; margin:0; padding:0; }
.v4-body .v4-prose .v4-value-chain__box { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:8.5em; padding:1.25em .75em; border:1px solid transparent; border-radius:1em; background:#df0030; color:#fff; font:inherit; font-weight:600; line-height:1.65; text-align:center; overflow-wrap:anywhere; }
.v4-body .v4-prose .v4-value-chain__box--create { background:#f4bd40; color:#73511b; }
.v4-body .v4-prose .v4-value-chain__box--recipient { border-color:#f2ccd4; background:#fff4f5; color:#df0030; }
.v4-body .v4-prose .v4-value-chain__caption { align-self:start; color:#6b5f66; font:inherit; font-weight:600; line-height:1.65; text-align:center; overflow-wrap:anywhere; }
.v4-body .v4-prose .v4-value-chain__arrow { position:absolute; top:50%; left:calc(100% + .4em); width:calc(var(--flow-gap) - .8em); height:1em; color:#df0030; transform:translateY(-50%); overflow:visible; }
/* Fallback keeps the shared card and caption rows in browsers without subgrid. */
@supports not (grid-template-rows:subgrid) {
  .v4-body .v4-prose .v4-value-chain__step { display:contents; }
  .v4-value-chain__step:nth-child(1) { --flow-column:1; }
  .v4-value-chain__step:nth-child(2) { --flow-column:2; }
  .v4-value-chain__step:nth-child(3) { --flow-column:3; }
  .v4-value-chain__step:nth-child(4) { --flow-column:4; }
  .v4-body .v4-prose .v4-value-chain__box { grid-column:var(--flow-column); grid-row:1; }
  .v4-body .v4-prose .v4-value-chain__caption { grid-column:var(--flow-column); grid-row:2; }
}
/* em ties the breakpoint to the chosen text size as well as available width. */
@container (max-width:50em) {
  .v4-body .v4-prose .v4-value-chain__steps { grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:3em; max-width:32em; margin:0 auto; }
  .v4-body .v4-prose .v4-value-chain__step { display:grid; grid-template-rows:auto auto; grid-row:auto; gap:.65em; position:relative; }
  .v4-body .v4-prose .v4-value-chain__box { min-height:6.5em; padding:1.25em; grid-column:auto; grid-row:auto; position:static; }
  .v4-body .v4-prose .v4-value-chain__caption { grid-column:auto; grid-row:auto; }
  .v4-body .v4-prose .v4-value-chain__arrow { top:calc(100% + 1.5em); left:50%; width:2em; height:1em; transform:translate(-50%,-50%) rotate(90deg); }
}
/* Keep small-screen fallback readable when container queries are unavailable. */
@supports not (container-type:inline-size) {
  @media (max-width:800px) {
    .v4-body .v4-prose .v4-value-chain__steps { grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:3em; }
    .v4-body .v4-prose .v4-value-chain__step { display:grid; grid-template-rows:auto auto; grid-row:auto; gap:.65em; position:relative; }
    .v4-body .v4-prose .v4-value-chain__box { min-height:6.5em; grid-column:auto; grid-row:auto; position:static; }
    .v4-body .v4-prose .v4-value-chain__caption { grid-column:auto; grid-row:auto; }
    .v4-body .v4-prose .v4-value-chain__arrow { top:calc(100% + 1.5em); left:50%; width:2em; height:1em; transform:translate(-50%,-50%) rotate(90deg); }
  }
}