/** Customer evidence pages — /v2/customers.html and /v2/customers/*.html.

    C0154 record spread · C0155 measurement field · C0156 story chapter ·
    C0157 closing mark. Every one of them is a composition of parts that already
    exist: inner-craft.css supplies the chassis draw [C0141], the margin-numeral
    idiom [C0142], the fact strip and the bare quote [C0146]; site-craft.css
    supplies the masked heading [C0139] and the drawn rule [C0140]; v2.css
    supplies the tokens, `.tlink`, `.t-mark` and `.blist`.

    WHAT CHANGED AND WHY (the page was typographically correct and completely
    inert). Three faults, all fixed here, none of them fixed by adding pictures:

      1. THE FACT STRIP HELD ONE CELL IN A THREE-COLUMN GRID. Two thirds of
         every rule ran past the last word, so the record read as a table that
         failed to load. It is now a record column, one cell wide by design.
      2. THE CUSTOMER'S OWN HEADLINE WAS THE SMALLEST TYPE ON THE BLOCK —
         13px tracked caps — while the section heading above it ran at 40px.
         The customer's verdict is the thing a proof page exists to show, so it
         is now the display moment and the quotation reads beneath it.
      3. THE QUOTATION HUNG OFF A BORDER BAR. That bar is gone. The vertical
         accent moved to the structural position it was imitating: the spine
         between the record column and the reading column, which ignites on
         arrival and completes on hover.

    LAWS OBSERVED. No copy is added, removed, re-ordered inside a sentence, or
    restyled into a different string — only blocks moved. No number, date,
    rating, logo or job title is introduced. No image, no CDN, no new font, no
    new colour: every value below is an existing v2 token or an existing step of
    the spacing scale. Entrances are 700ms expo-out on the shared reading-zone
    signal; interface responses stay at 200ms (`--t-base`). Lateral entrance
    travel is zero — everything either rises or scales from an edge, because
    12px of horizontal travel is what caused the documented overflow bugs.

    PROGRESSIVE ENHANCEMENT. Every hidden-then-revealed state is gated behind
    `html.cust-motion`, which page-customers.js adds only when it is running and
    motion is allowed. With JavaScript off, or under reduced motion, nothing is
    ever hidden: the stories and quotations render complete.

    SECOND PASS (blind review round 2). Five things changed and each is answered
    at the point it is written, not here:

      1. THE QUOTATION LOST DISPLAY STATUS BELOW 1180. Its clamp floored at 21px
         while `.h2` floors at 28px, so between 320 and 1099 the section heading
         out-scaled the customer's own sentence by 33-48%. Fixed from the
         quotation's side (`.story-quote`) because `.h2` is site-wide.
      2. THE TWO RECORDS ON /customers WERE ONE OBJECT TWICE. Each is now set to
         the length of the statement it carries (`[data-quote]`), and the record
         column sticks with the words instead of heading a 480px empty gutter.
      3. THE SOLO RECORD'S 232px COLUMN WAS 87-90% EMPTY. It gives up the column
         and becomes the attribution under the quotation (`.story--solo`).
      4. `#story-outcome` USED 61% OF ITS BAND. Recomposed on C0144 at C0147's
         7/5 proportion; nothing was added to fill it.
      5. C0155 REACHED INTO THE FROZEN KIT'S OWN LIST FORMS. Scope guard, which
         is what lets the story pages use `.peers` and `.stepped` at all.

    Copy is unchanged: the rendered text-node multiset on all three pages is
    identical to the previous build, and the only ordering change is the solo
    attribution, which now follows the sentence it attributes. */

/* ============================================================================
   C0154 — RECORD SPREAD
   Two tracks: a record column that says who, and a reading column that carries
   what they said. Constant direction on both stories. Alternating the spread
   left/right was considered and rejected: on a credibility page the reader must
   be able to find the attribution in the same place every time, and the display
   headline already gives each story a distinct silhouette.
   ========================================================================== */

/* v2.css rules the set; the ribbon cap is removed because the spread now uses
   the page grid instead of a 760px column floating in a 1240px shell. */
.testify{max-width:none}

/* `minmax(0,…)` on BOTH tracks, not just the reading one: a grid item's default
   `min-width:auto` refuses to shrink below its content, and the record column
   holds an unbreakable 52px numeral. Without this the spread can push the page
   wider than the viewport at narrow desktop widths. */
.story{
  --story-gutter:56px;
  display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  padding:56px 0;border-bottom:1px solid var(--line);
}

/* ---------- the record column -------------------------------------------- */
/* `data-chassis` [C0141] draws this column's head rule from the left as the
   story reaches the reading zone.
   The record STICKS. A record is 103-124px of content beside a 436-509px
   quotation, so top-aligning it left roughly 480px of empty gutter under every
   attribution and made the reader scroll the name out of sight while still
   reading that person's sentence. Sticky is the honest use of that column: the
   attribution stays level with the words it belongs to for as long as they are
   on screen. 148px clears the 64px nav and the 68px sub-nav under it. Only
   where the two-track spread exists; the solo record has no column to stick in
   and the stacked layout has no gutter. */
.story-head{padding-right:48px;min-width:0}
@media (min-width:1001px){
  .story:not(.story--solo) .story-head{position:sticky;top:148px;align-self:start}
}

.story-head .story-mark{display:block;margin-bottom:16px}
/* The folio was 46px and outranked every word in the block, including the
   customer's own sentence. A sequence mark is metadata: it is now the same
   13px the rest of this system uses for record numerals. The record's ink
   anchor is the PERSON, which is what a proof page is actually asserting. */
.story-n{
  display:block;
  font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.04em;
  color:var(--quiet);
  transition:color var(--t-base) var(--ease);
}
/* The solo variant (a story page carries no sequence) keeps C0033's own mark. */
.story-head>.t-mark{margin:0 0 22px}

/* C0146's fact strip was a three-up grid holding a single cell. One cell is all
   the approved copy has, so it is set as a record, not as a failed table. */
.story-facts{
  display:block;border-top:0;border-bottom:0;margin:0;min-width:0;
}
.story-fact{padding:0;border-left:0}
.story-fact b{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
.story-fact span{overflow-wrap:anywhere;
  font-family:var(--sans);font-size:14px;letter-spacing:0;line-height:1.45;
  color:var(--muted);margin-top:5px;
}
/* The classification on the file, and the one honest thing that tells the two
   records apart: story 01 is claims intake, story 02 is claims intake plus
   customer service. Both strings are already published on this page in the
   hero index; this is the same fact in the place it is actually needed. */
.story-work{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--blue);
  transition:color var(--t-base) var(--ease);
}

/* ---------- the reading column ------------------------------------------- */
.story-body{
  position:relative;padding-left:var(--story-gutter);border-left:1px solid var(--line);
}
/* The spine. This is the accent the quotation used to wear as a border bar,
   moved to the join it was standing in for. It draws downward on arrival and
   runs the full column on hover — the story's one signature moment. */
.story-body::before{
  content:"";position:absolute;left:-1px;top:0;width:2px;height:72px;
  background:var(--blue-line);transform-origin:top center;
  transition:transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) 120ms,
             height var(--t-slow) var(--ease),background var(--t-slow) var(--ease);
  pointer-events:none;
}
.story:hover .story-body::before,
.story:focus-within .story-body::before{height:100%;background:var(--blue)}
.story:hover .story-n,.story:focus-within .story-n{color:var(--blue)}

/* The customer's own published review headline. It is their title FOR the
   quotation, so it sits above the quotation and below it in scale: a strong
   label, not a second display moment competing with the sentence itself. */
.t-head{
  overflow-wrap:anywhere;
  font-size:18px;font-weight:600;line-height:1.4;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);
  max-width:34ch;text-wrap:balance;
}
.t-head__i{display:block}

/* THE DISPLAY MOMENT. The customer's sentence is the largest object in its own
   block and the largest body of type in the section — by mass, not by ornament.
   The first pass set it at 19px `--body`, which put it BELOW the section
   heading, below the customer's headline and below a 46px folio: the page's
   whole reason for existing was the smallest thing on it. Nothing is inserted
   inside the sentence; the block is styled, never marked up, because every
   character of it is a real statement by a named person. */
/* THE FLOOR WAS THE FAULT. `clamp(21px,2.1vw,30px)` reached its cap at 1440 and
   its FLOOR at about 1000, while `.h2` keeps climbing down to a 28px floor of
   its own. Measured on the previous build: at 1000 the quotation was 21px under
   a 31px heading (48% larger), and at 900 and below 21px/20px under 28px
   (33-40% larger). So the customer's sentence fell to reading size - 2px above
   the 19px record name, 3px above the 18px lede - exactly where a proof page
   needs it to be the display object.
   `.h2` is NOT forked: it is site-wide, and one heading breathing differently
   from every other section is a worse fault than this one. The fix is on the
   quotation's side and on the measure. A `px + vw` track holds the same 30px at
   1440 and raises everything below it; the floor is 23px, which is where the
   sentence still out-scales every other object in its own block: 22px against
   the 19px record name, the 18px lede and the 17px list row. */
.story-quote{
  overflow-wrap:anywhere;
  margin:22px 0 0;padding-left:0;
  font-size:clamp(22px,15px + 1.05vw,30px);line-height:1.44;letter-spacing:-.013em;
  color:var(--ink);max-width:48ch;
}
.story-quote::before{content:none}

/* ---------- each record is set to its own content ------------------------ */
/* THE TWO RECORDS ON /customers WERE ONE OBJECT PRINTED TWICE: identical
   tracks, padding, measures, sizes, colours and rail. Two differentiators were
   considered and refused before, and those refusals still stand: alternating
   the spread left/right (a reader of a credibility page must find the
   attribution in the same place every time) and tinting one record (that makes
   it a card, which this register forbids). A third is refused here -
   differentiating them by RANK, lead record larger and second record smaller -
   because nothing in the evidence ranks them. Both are equally sourced, equally
   verbatim, and neither carries a number.
   What does differ, and differs a lot, is the copy. Record 01's quotation is
   456 characters; record 02's is 617, a third longer again. Setting both to one
   size and one measure is what made them a template. So the type is set to the
   sentence it is setting: the shorter statement takes the larger size and the
   tighter measure, the longer one takes the reading measure it needs, and the
   two blocks come out at comparable MASS instead of comparable metrics. That is
   fitting, not ranking. It travels with the quotation, so the same sentence is
   set the same way on the story page where it appears alone. */
.story[data-quote="short"] .story-quote{
  font-size:clamp(24px,15px + 1.42vw,35px);max-width:38ch;
}

/* The foot files the record onward. The rule draws with the spread. */
.t-more{
  margin-top:30px;padding-top:22px;max-width:58ch;position:relative;
  border-top:1px solid var(--line);
}
.t-more::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--blue-line);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--ease);pointer-events:none;
}
.story:hover .t-more::after,.story:focus-within .t-more::after{transform:scaleX(1)}

/* ---------- entrance (rides the shared reading-zone signal) --------------- */
/* Motion rank must match content rank. The first pass had the section heading
   climbing out of an overflow mask while the customer's sentence merely faded
   in behind it - the same inversion as the type ladder, in the time dimension,
   and a fade is the treatment Mohamed's own ledger rejects ("a fade has no edge
   to travel past, so the eye reads it as already-there").
   So the two blocks of the customer's words now climb out from behind a hard
   edge at full opacity, at C0139's own 800ms expo-out, and they arrive LAST:
   the record settles first, then their headline, then their sentence. The mask
   is only ever applied while the entrance is armed, so nothing can clip when
   JavaScript is off. */
html.cust-motion .story-body::before{transform:scaleY(0)}
html.cust-motion .story[data-cust-in="true"] .story-body::before{transform:scaleY(1)}

html.cust-motion .story-head,
html.cust-motion .story .t-more{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--cust-d,0ms),
             transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--cust-d,0ms);
}
html.cust-motion .story .t-more{--cust-d:380ms}
html.cust-motion .story[data-cust-in="true"] .story-head,
html.cust-motion .story[data-cust-in="true"] .t-more{opacity:1;transform:none}

html.cust-motion .t-head,
html.cust-motion .story-quote{
  overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;
}
html.cust-motion .t-head__i,
html.cust-motion .story-quote p{
  display:block;transform:translateY(106%);
  transition:transform 800ms var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--cust-d,0ms);
}
html.cust-motion .t-head__i{--cust-d:140ms}
html.cust-motion .story-quote p{--cust-d:260ms}
html.cust-motion .story[data-cust-in="true"] .t-head__i,
html.cust-motion .story[data-cust-in="true"] .story-quote p{transform:none}

/* ============================================================================
   C0155 — MEASUREMENT FIELD
   The "what we measure" list, and every narrative list on a story page. The
   rows are deliberately NOT numbered: a field is not a sequence, which is the
   same reasoning already recorded against C0143. Craft comes from the rule
   assembling row by row and from each row answering the pointer.
   ========================================================================== */

/* SCOPE GUARD. C0155 dresses the plain hairline list. `.peers`, `.stepped`,
   `.field` and `.ledger` are the frozen kit's own list forms: they arrive with
   their own structure, their own markers and their own entrances. The kit sheet
   loads after this one so its BASE rules already win, but C0155's hover rules
   would not - on `.stepped` the `li:hover::before` would take hold of the
   ordinal and stretch it 1.9x. This guard is the fix, and it is what lets the
   story pages use the kit's honest list forms at all. */
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li{position:relative;transition:color var(--t-base) var(--ease)}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::before{
  transform-origin:left center;
  transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line-2);transform-origin:left center;pointer-events:none;
}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:hover{color:var(--ink)}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:hover::before{transform:translateY(-5px) scaleX(1.9)}
.sec-night .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after{background:rgba(255,255,255,.20)}
.sec-night .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:hover{color:var(--night-ink)}
/* The field's own drawn rule was re-inked for night; the rule that OPENS it was
   not. C0141 paints `[data-chassis]::before` from `--ic-rule`, which resolves to
   `--line-2` (#D8DDE5), a hairline calibrated against paper. Measured on navy
   it is not a hairline at all: 12.5:1 against the band's own ground, a hard white
   line opening eight row rules that sit at 1.9:1. The replacement is neither a new
   colour nor a judgement call: on the light ground the field's opening rule and
   its row rules are the SAME ink (`--line-2` for both), so on night they take the
   same ink too: the row value this file already sets two lines above.
   `--ic-rule` is the hook inner-craft.css publishes for exactly this, so nothing
   in the shared layer is overridden. */
.sec-night .blist[data-chassis]{--ic-rule:rgba(255,255,255,.20)}

/* The rule drew but the row did not: eight items sat at opacity 1 with no
   delay while their hairlines animated under them, so the section assembled
   its furniture and never delivered its content. The row now rises with its
   own rule, and the rule is the hard edge that makes the movement legible. */
html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after{
  transform:scaleX(0);
  transition:transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--row-d,0ms);
}
html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger)[data-chassis-in="true"] li::after{transform:scaleX(1)}
html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li{
  opacity:0;transform:translateY(12px);
  transition:opacity 520ms ease var(--row-d,0ms),
             transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--row-d,0ms),
             color var(--t-base) var(--ease);
}
html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger)[data-chassis-in="true"] li{opacity:1;transform:none}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(1){--row-d:0ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(2){--row-d:60ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(3){--row-d:120ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(4){--row-d:180ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(5){--row-d:240ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(6){--row-d:300ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(7){--row-d:360ms}
.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li:nth-child(8){--row-d:420ms}

/* ============================================================================
   C0156 — STORY CHAPTER
   The workflow pages read as a numbered arc, not as five unrelated sections.
   The numeral sits in the page margin, exactly as C0142 puts a step numeral
   there, and falls back to a static mark at or below 1280px where the gutter
   is narrower than the margin position needs.
   ========================================================================== */

.sec-head{position:relative}
.sec-n{
  position:absolute;left:-56px;top:4px;width:40px;text-align:right;
  font-size:13px;letter-spacing:.04em;color:var(--quiet);
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.sec-night .sec-n{color:var(--night-chip)}
@media (max-width:1280px){
  .sec-n{position:static;width:auto;text-align:left;display:block;margin-bottom:12px}
}

/* The related rail closes a story page: a rule that draws, then the links. */
.tags.links[data-chassis]{padding-top:26px}

/* ============================================================================
   C0157 — CLOSING MARK
   The band already carries the site's heading mask. What it lacked was an
   opening: a 28x2 accent mark, the same one `.t-mark` and the solution cards
   use, drawn from the centre as the band arrives, and a staggered rise on the
   three text blocks. The heading is deliberately excluded — it is already
   animated by the C0139 line mask and must not be animated twice.
   ========================================================================== */

.cta[id]{scroll-margin-top:150px}
.cta .shell::before{
  content:"";display:block;width:28px;height:2px;margin:0 auto 26px;
  background:var(--blue);transform-origin:center;
}
html.cust-motion .cta .shell::before{
  transform:scaleX(0);
  transition:transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1));
}
html.cust-motion .cta[data-cust-in="true"] .shell::before{transform:scaleX(1)}
html.cust-motion .cta .eyebrow-b,
html.cust-motion .cta>.shell>p,
html.cust-motion .cta .pill{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--cust-d,0ms),
             transform var(--ic-enter,700ms) var(--ic-ease,cubic-bezier(.19,1,.22,1)) var(--cust-d,0ms);
}
html.cust-motion .cta[data-cust-in="true"] .eyebrow-b,
html.cust-motion .cta[data-cust-in="true"]>.shell>p,
html.cust-motion .cta[data-cust-in="true"] .pill{opacity:1;transform:none}

/* ============================================================================
   RESPONSIVE — reviewed section by section at 1440 / 1080 / 900 / 640 / 390 /
   320, not assumed.
   ========================================================================== */

@media (max-width:1180px){
  .story{grid-template-columns:196px minmax(0,1fr);--story-gutter:40px}
  .story-head{padding-right:32px}
}

/* Stacked: the record sits above the reading column on one line, and the spine
   becomes the horizontal mark it always was in the other orientation. */
@media (max-width:1000px){
  .story{grid-template-columns:minmax(0,1fr);padding:44px 0;--story-gutter:0px}
  .story-head{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;
    padding-right:0;padding-bottom:26px;
  }
  .story-head .story-mark,.story-head>.t-mark{margin:0;flex:none}
  .story-head .story-facts{flex:1 1 auto;min-width:0}
  /* the classification is a line of the record, not a column beside the name:
     stacked, it takes the full width under the name with its rule spanning it */
  .story-head .story-work{flex:1 0 100%;margin-top:0;padding-top:14px}
  /* a 2px rule has no baseline to sit on, so the solo mark centres instead */
  .story--solo .story-head{align-items:center}
  .story-body{border-left:0;padding-top:26px}
  /* Stacked, the reading column is the whole page, so the measure widens with
     it: at 1000 the quotation used 581 of 920px and left 339px (37%) of the
     canvas unused to its right. */
  .story-quote{max-width:62ch}
  .story[data-quote="short"] .story-quote{max-width:52ch}
  .story-body::before{
    left:0;top:0;width:40px;height:2px;transform-origin:left center;
  }
  html.cust-motion .story-body::before{transform:scaleX(0)}
  html.cust-motion .story[data-cust-in="true"] .story-body::before{transform:scaleX(1)}
  .story:hover .story-body::before,
  .story:focus-within .story-body::before{height:2px;width:72px}
}

@media (max-width:640px){
  .story{padding:36px 0}
  .story-head{gap:14px}
  /* The quotation stays the display moment on a phone; it is the page. The size
     comes from the clamp floor now (22px, and 24px for the short record) rather
     than from a flat 20px override that sat 1px above the record name and 2px
     above the lede beside it. */
  .story-quote{line-height:1.45;max-width:none}
  .t-head{font-size:17px}
}

@media (max-width:760px){
  .cta[id]{scroll-margin-top:138px}
}

/* ============================================================================
   C0154 SOLO — one record, and therefore no gutter
   On a story page the spread carries a single testimony and the record column
   measured 232 x 393px (Headstart) and 232 x 504px (Camelback) around 51px of
   content: 87-90% empty, in the one place the page had nothing else to put.
   A gutter that holds nothing is not a margin, it is a missing column. So the
   solo record gives up the column and takes the position a single quotation has
   always been attributed in: underneath the words, on the same rule. The DOM
   moves with it - `<figcaption>` is valid as the FIRST or the LAST child of a
   `<figure>` - so reading order and visual order stay identical, and the
   entrance re-ranks to match: the attribution now arrives last, after the
   sentence, which is also the order a reader wants it in.
   ========================================================================== */

.story--solo{grid-template-columns:minmax(0,1fr)}
.story--solo .story-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  padding:26px 0 0 var(--story-gutter);
  border-left:1px solid var(--line);
}
.story--solo .story-head>.t-mark{margin:0;flex:none}
.story--solo .story-facts{flex:1 1 auto;min-width:0}
html.cust-motion .story--solo .story-head{--cust-d:380ms}
@media (max-width:1000px){
  .story--solo .story-head{border-left:0;padding-top:22px}
}

/* ============================================================================
   #story-outcome — the climax gets the canvas it is standing on
   `.sec-head` is capped at 760px because it is sized for prose, and the held
   line inside it is capped again at 24ch. Measured at 1440 on the previous
   build: a 760px head inside a 1240px shell, the customer's reported result set
   26px across 359px and breaking into five short ragged lines, with roughly
   560 x 590px of empty night field beside it.
   Nothing new is introduced to fill it. The band is re-composed on C0144, the
   held statement the rest of the site already uses, which is exactly the shape
   this section has: a statement, and a note recording what the source does not
   provide. The column becomes the measure, per C0144's own rule.
   ========================================================================== */

#story-outcome .sec-head{max-width:none}
/* An even split gave the statement a 514px column and it broke into four short
   lines beside a two-line note. C0147's 7/5 is the site's own answer to
   "a reading column and a margin column", and it is reused here rather than a
   new ratio being invented. */
/* C0144 collapses to one column at 1080 because the widest user of it carries
   dense legal copy that cannot take a 37-character line. This band carries two
   short sentences - 125 characters each - so it holds the pair 180px lower, and
   below 900 it stacks like every other band. Without this the section measured
   622px of content inside a 920px shell at 1000, which is the same
   under-used canvas the whole recomposition exists to close. */
@media (min-width:900px){
  #story-outcome .band-hold:has(>.band-hold__note){
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:48px;row-gap:48px;
  }
  #story-outcome .band-hold:has(>.band-hold__note)>:first-child{grid-column:1/2;grid-row:1}
  #story-outcome .band-hold:has(>.band-hold__note)>.band-hold__note{
    grid-column:2/3;grid-row:1;max-width:none;
    padding:0 0 0 28px;border-top:0;border-left:1px solid var(--ic-band-rule);
    align-self:stretch;
  }
  #story-outcome .hold-line{max-width:none}
}
#story-outcome .hold-line{max-width:none;margin-top:20px}
/* The statement rises from 26px to 30px so the claim reads as the object of the
   band. `.h2` is left alone for the same site-wide reason recorded above; the
   heading keeps the same 1.33 ratio over the customer's words that this family
   already uses everywhere else. */
#story-outcome .hold-line__lead{max-width:none;font-size:clamp(24px,2.1vw,30px)}
@media (max-width:899px){
  #story-outcome .hold-line{max-width:60ch}
}

/* ============================================================================
   REDUCED MOTION AND PRINT
   Reduced motion never reaches the gated states at all, because the class that
   enables them is never added. These blocks are the belt-and-braces path for a
   user who switches the preference on after the page has booted.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .story-n,.story-work,.story-body::before,.t-more::after,
  .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li,.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::before,.blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after,
  .cta .shell::before{transition:none}
  html.cust-motion .t-head,html.cust-motion .story-quote{
    overflow:visible;padding-bottom:0;margin-bottom:0;
  }
  html.cust-motion .t-head__i,html.cust-motion .story-quote p,
  html.cust-motion .story-head,
  html.cust-motion .story .t-more,
  html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li,
  html.cust-motion .cta .eyebrow-b,
  html.cust-motion .cta>.shell>p,
  html.cust-motion .cta .pill{opacity:1;transform:none;transition:none}
  html.cust-motion .story[data-cust-in] .story-body::before,
  html.cust-motion .story-body::before{transform:none}
  html.cust-motion .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after,
  html.cust-motion .cta .shell::before{transform:scaleX(1);transition:none}
}

@media print{
  .story{display:block}
  .t-head,.story-quote{overflow:visible}
  .t-head__i,.story-quote p{transform:none}
  .story-body{border-left:0;padding-left:0}
  .story-body::before,.t-more::after,
  .blist[data-chassis]:not(.peers,.stepped,.field,.ledger) li::after,.cta .shell::before{display:none}
  .sec-n{position:static;display:block;margin-bottom:8px}
}