/* Built Logic: case study "The bin store nobody priced"
   (redesign round 2, approved by Kristian 12 Oct 2026). Used by case-study-bin-store.html,
   and since 12 Oct 2026 also by case-study-spec-check.html (story 04), which adds
   pages-case-spec-check.css on top. A change here changes both pages.

   Kristian on round 1: "still very boring, not much going on", "consultant
   blue is not a section colour", "missing something". The Fable and Astra
   design review agreed: the page repeated one layout and had no object to
   follow. Round 2 follows one object, the 12 bin store lines that fell off
   the bill, from the hero to the close.

   Grounds: Charcoal for the hero and the sum, a pale Light Blue field for
   the build, Soft Stone behind the mastic quotes, Off-White everywhere else.
   Consulting Blue is an accent only (design.md v1.5 §3: never a section
   background). No gradients. No side-stripe borders.

   Type: Fraunces 400 at 56px and above, 500 below; big figures 700 (data
   stamps). Plex Mono only for figures. Tracking no tighter than -0.025em.

   Motion is CSS only. Every drawing is complete in the markup; animation
   only adds a start state, runs once, and is off under reduced motion.
   Scroll-linked motion uses animation-timeline: view() where supported;
   other browsers show the finished drawing. */

.v3-page {
  --ink: #232A31; --paper: #FAFAF8; --blue: #1B3A5B; --sky: #AFC4DD;
  --steel: #586069; --stone: #E5E5E2;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --pad: clamp(20px, 4vw, 48px);
  --gap: clamp(20px, 2.6vw, 40px);
  --sec: clamp(80px, 9vw, 136px);
  background: var(--paper);
}
.v3-page main { overflow-x: clip; }
.v3-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.v3-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.v3-sec { padding: var(--sec) 0; }
.v3-sec:not(.v3-band) + .v3-sec:not(.v3-band) { padding-top: 0; }

/* ------------------------------------------------------------ type */
.v3-h2 { margin: 0 0 18px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.v3-h3 { margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.v3-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--steel); max-width: 36em; text-wrap: pretty; }
.v3-lead--ink { color: var(--ink); }
.v3-p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 62ch; text-wrap: pretty; }
.v3-p:last-child { margin-bottom: 0; }
.v3-p--strong { font-weight: 600; }
.v3-small { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--steel); max-width: 62ch; }
.v3-fig { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
.v3-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.v3-head--wide { max-width: 900px; }

/* Plain bullets: small filled squares, the same shape as a line mark. */
.v3-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.v3-list li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.v3-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--blue); }
.v3-list--tight { gap: 10px; }
.v3-list--tight li { font-size: 16px; }

/* Heading beside content, used only for the quieter sections. */
.v3-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px var(--gap); align-items: start; }
.v3-split > .v3-h2 { margin: 0; }
.v3-split--next { margin-top: clamp(64px, 7vw, 104px); }

.v3-pull { margin: 0; }
.v3-pull blockquote { margin: 0; }
.v3-pull blockquote p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.v3-pull figcaption { margin-top: 14px; font-size: 15px; color: var(--steel); }

/* The bin store slip: the object the page follows. */
.v3-slip { position: relative; display: inline-grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px 20px 14px 16px; background: var(--paper); color: var(--ink); border-radius: 6px; box-shadow: 0 18px 32px -18px rgba(35, 42, 49, .55); }
.v3-slip__marks { grid-row: 1 / span 2; width: 48px; height: 28px; display: block; }
.v3-slip__h { margin: 0; font: 600 17px/1.25 'Source Sans 3', system-ui, sans-serif; }
.v3-slip__b { margin: 2px 0 0; font-size: 14px; line-height: 1.35; color: var(--steel); }

/* ============================================================ hero */
.v3-hero { background: var(--ink); color: var(--paper); padding: clamp(128px, 12vw, 168px) 0 clamp(72px, 8vw, 112px); }
.v3-hero__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px var(--gap); align-items: end; }
.v3-hero__h1 { margin: 0 0 32px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(46px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.025em; color: var(--paper); text-wrap: balance; }
.v3-hero__lead { margin: 0 0 14px; font-size: 19px; line-height: 1.6; color: rgba(250, 250, 248, .84); max-width: 36em; }
.v3-hero__cta { margin-top: 30px; }
.v3-hero .fs-cta { background: var(--paper); color: var(--ink); box-shadow: none; }
 .v3-hero .fs-cta:focus-visible { background: var(--sky); color: var(--ink); }@media (hover: hover) and (pointer: fine){.v3-hero .fs-cta:hover{ background: var(--sky); color: var(--ink); }}
.v3-hero .fs-cta:focus-visible { outline-color: var(--sky); }
.v3-facts { margin: 0; border-top: 1px solid rgba(250, 250, 248, .18); }
.v3-facts > div { padding: 14px 0; border-bottom: 1px solid rgba(250, 250, 248, .18); }
.v3-facts dt { font: 600 14px/1.4 'Source Sans 3', system-ui, sans-serif; color: rgba(250, 250, 248, .64); }
.v3-facts dd { margin: 4px 0 0; font-size: 17px; line-height: 1.4; color: var(--paper); }
.v3-facts .v3-fig { color: var(--sky); }
.v3-facts a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.v3-facts a:hover{ color: var(--paper); }}
.v3-facts a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* The bill sorted: real lines on the left go into named packages on the
   right. The bin store fits none and lands in the review tray. */
.v3-ba { margin: clamp(56px, 7vw, 96px) auto 0; }
.v3-ba__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 15px; color: rgba(250, 250, 248, .78); }
.v3-ba__sw { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.v3-ba__sw--before { box-shadow: inset 0 0 0 1.5px rgba(250, 250, 248, .55); }
.v3-ba__sw--after { margin-left: 18px; background: var(--sky); }
.v3-ba__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.v3-ba__row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) 250px; column-gap: 28px; align-items: center; }
.v3-ba__lab { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--paper); }
.v3-ba__track { position: relative; height: 32px; }
.v3-ba__ghost, .v3-ba__fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; transform-origin: left center; }
.v3-ba__ghost { width: var(--b); box-shadow: inset 0 0 0 1.5px rgba(250, 250, 248, .45); }
.v3-ba__fill { width: var(--a); background: var(--sky); }
.v3-ba__track::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--b) - 2px); width: 2px; background: rgba(35, 42, 49, .55); }
.v3-ba__val { display: flex; align-items: baseline; gap: 10px; margin: 0; white-space: nowrap; color: rgba(250, 250, 248, .7); }
.v3-ba__was { font: 400 17px/1 'IBM Plex Mono', ui-monospace, monospace; }
.v3-ba__to { font-size: 18px; color: rgba(250, 250, 248, .5); }
.v3-ba__val b { font: 700 32px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--sky); }
.v3-ba__val small { font-size: 16px; color: var(--paper); }
.v3-ba__foot { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid rgba(250, 250, 248, .18); font-size: 15px; color: rgba(250, 250, 248, .72); }

/* =========================================================== month 7 */
.v3-month__h { margin: 0 0 clamp(48px, 6vw, 80px); max-width: 15ch; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(44px, 7vw, 96px); line-height: .98; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.v3-month__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.v3-month__story p { margin: 0 0 18px; font-size: 19px; line-height: 1.65; color: var(--ink); max-width: 60ch; }
.v3-month__story p:last-child { margin-bottom: 0; }
.v3-month__fig { padding: 36px 0 0; }
.v3-slip--month { box-shadow: 0 18px 32px -20px rgba(35, 42, 49, .45), 0 0 0 1px var(--stone); }
.v3-month__num { margin: 28px 0 10px; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(64px, 8.4vw, 128px); line-height: .9; letter-spacing: -0.025em; color: var(--blue); }
.v3-month__cap { margin: 0 0 40px; font-size: 16px; line-height: 1.5; color: var(--steel); max-width: 30em; }
.v3-month__quote { padding-top: 28px; border-top: 1px solid var(--stone); }
.v3-month__quote blockquote p { color: var(--blue); font-size: clamp(24px, 2.4vw, 32px); }

/* ======================================================== the cost */
.v3-cost__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; padding: clamp(36px, 4vw, 52px) 0; border-top: 1px solid var(--stone); }
.v3-cost__num { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(52px, 6vw, 84px); line-height: .9; letter-spacing: -0.025em; color: var(--blue); white-space: nowrap; }
.v3-cost__unit { font: 600 20px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; }
.v3-cost__label { margin: 14px 0 10px; font: 600 18px/1.4 'Source Sans 3', system-ui, sans-serif; color: var(--ink); }

/* Three fallen sections, as slips on one three-year rule. */
.v3-fallen { display: grid; gap: 22px; }
.v3-fallen__bar { display: flex; gap: 4px; height: 96px; }
.v3-fallen__bar i { flex: 0 0 calc(var(--w) - 3px); border-radius: 6px; transform-origin: left center; }
.v3-fallen__bar .is-a { background: var(--ink); }
.v3-fallen__bar .is-b { background: var(--stone); box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .35); }
.v3-fallen__bar .is-c { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .35); }
.v3-fallen__key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v3-fallen__key li { display: grid; gap: 4px; padding-left: 20px; position: relative; }
.v3-fallen__key li::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 3px; }
.v3-fallen__key .is-a::before { background: var(--ink); }
.v3-fallen__key .is-b::before { background: var(--stone); box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .35); }
.v3-fallen__key .is-c::before { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .5); }
.v3-fallen__key span { font-size: 14px; line-height: 1.25; color: var(--steel); }
.v3-fallen__key b { font: 700 22px/1 'Fraunces', Georgia, serif; color: var(--ink); }
.v3-fallen__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 15px; color: var(--steel); }
.v3-fallen__total b { font: 700 24px/1 'Fraunces', Georgia, serif; color: var(--blue); }

/* Unit charts: one cell a unit. */
.v3-units__grid { display: grid; gap: 5px; }
.v3-units--hours .v3-units__grid { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.v3-units--jobs .v3-units__grid { grid-template-columns: repeat(19, minmax(0, 1fr)); }
.v3-units i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--stone); }
.v3-units i.is-fill { background: var(--blue); }
.v3-units i.is-out { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue); }
.v3-units__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--steel); }
.v3-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--stone); margin-left: 6px; }
.v3-key:first-child { margin-left: 0; }
.v3-key--fill { background: var(--blue); }
.v3-key--out { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue); }

/* The tender calendar: 28 days, one cell a day. */
.v3-clock { padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--stone); }
.v3-clock__copy { max-width: 760px; margin-bottom: 40px; }
.v3-cal { margin: 0; --lab: 150px; --res: 170px; }
.v3-cal__cap { margin: 0 0 40px; font-weight: 600; font-size: 16px; color: var(--ink); }
.v3-cal__row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--res); column-gap: 20px; align-items: start; margin-bottom: 92px; }
.v3-cal__lab, .v3-cal__res { line-height: 40px; }
.v3-cal__lab { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.v3-cal__track { position: relative; }
.v3-cal__cells { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 3px; }
.v3-cal__cells i { display: block; height: 40px; border-radius: 3px; background: var(--stone); }
.v3-cal__cells i.is-sort { background: var(--steel); }
.v3-cal__row:nth-of-type(2) .v3-cal__cells i.is-sort { background: var(--ink); }
.v3-cal__cells i.is-price { background: var(--sky); }
.v3-cal__seg { position: absolute; top: calc(100% + 8px); left: calc((var(--from) + var(--to)) / 2 / 28 * 100%); margin: 0; transform: translateX(-50%); font-size: 14px; line-height: 1.2; color: var(--steel); white-space: nowrap; }
.v3-cal__seg--price { font-weight: 600; color: var(--ink); }
.v3-cal__out { position: absolute; bottom: calc(100% + 6px); left: calc(var(--d) / 28 * 100%); margin: 0; padding-left: 8px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--blue); white-space: nowrap; }
.v3-cal__out::before { content: ''; position: absolute; left: -1px; top: -4px; width: 2px; height: 62px; background: var(--blue); }
.v3-cal__chase { position: absolute; top: calc(100% + 32px); left: calc((var(--d) - .5) / 28 * 100%); margin: 0; font-size: 13px; color: var(--steel); white-space: nowrap; }
.v3-cal__chase::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--blue); vertical-align: 1px; }
.v3-cal__res { margin: 0; font-size: 15px; font-weight: 600; color: var(--steel); }
.v3-cal__res--good { color: var(--blue); font-size: 17px; }
.v3-cal__axis { position: relative; height: 22px; margin-left: calc(var(--lab) + 20px); margin-right: calc(var(--res) + 20px); border-top: 1px solid var(--steel); }
.v3-cal__axis span { position: absolute; top: 6px; left: calc(var(--d) / 28 * 100%); transform: translateX(-50%); font: 400 13px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--steel); white-space: nowrap; }
.v3-cal__axis span:first-child { transform: none; }
.v3-cal__axis span:last-child { transform: translateX(-100%); }

/* ===================================================== fixes tried */
.v3-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.v3-pair__item { padding-top: 18px; border-top: 2px solid var(--ink); }

/* ============================================================ bands */
.v3-band--tint { background: rgba(175, 196, 221, .22); }
.v3-band--stone { background: var(--stone); }
.v3-band--dark { background: var(--ink); color: var(--paper); }
.v3-band--dark .v3-h2 { color: var(--paper); }
.v3-band--dark .v3-lead { color: rgba(250, 250, 248, .76); }

/* =================================================== what got built */
/* Three lanes; the middle lane (AI) carries a pale Light Blue fill. */
.v3-flow { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; }
.v3-flow__lanes { display: grid; grid-template-rows: repeat(3, 1fr); }
.v3-flow__lane { grid-row: var(--r); display: flex; align-items: center; margin: 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.v3-flow__board { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(3, 132px); column-gap: 10px; padding: 0 4px; border-radius: 12px; background: var(--paper); }
.v3-flow__board::before { content: ''; position: absolute; left: 0; right: 0; top: 33.333%; height: 33.333%; background: rgba(175, 196, 221, .35); border-top: 1px solid rgba(27, 58, 91, .12); border-bottom: 1px solid rgba(27, 58, 91, .12); }
.v3-flow__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v3-flow__line path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.v3-step { position: relative; grid-column: var(--c); grid-row: var(--r); align-self: center; margin: 0; padding: 14px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.v3-step span { display: none; }
.v3-step--code { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--steel); }
.v3-step--ai { background: var(--blue); color: var(--paper); }
.v3-step--person { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.v3-build__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); margin-top: clamp(64px, 6vw, 88px); }

/* ============================================================ route */
/* A timeline: one rail, a stop for each step. */
.v3-route .v3-h2 { margin: 0 0 clamp(40px, 4.5vw, 64px); }
.v3-tl { --dot: 22px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--gap); }
.v3-tl::before { content: ''; position: absolute; top: calc(var(--dot) / 2 - 1px); left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left center; }
.v3-tl__stop { position: relative; padding-top: calc(var(--dot) + 26px); }
.v3-tl__dot { position: absolute; top: 0; left: 0; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--blue); }
.v3-tl__dot::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--blue); }
.v3-stage__when { margin: 0 0 6px; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; color: var(--blue); }
.v3-stage__h { margin: 0 0 12px; font: 600 17px/1.35 'Source Sans 3', system-ui, sans-serif; color: var(--ink); }

/* ======================================================= the mastic */
.v3-catch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px); align-items: center; }
.v3-h2--big { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; }
@media (min-width: 1280px) { .v3-h2--big { font-weight: 400; } }
.v3-catch .v3-p { font-size: 18px; }
.v3-quotes { margin: 0; }
.v3-quotes__cap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 22px; font-size: 15px; color: var(--steel); }
.v3-quotes__cap b { font-size: 16px; color: var(--ink); }
.v3-quotes__sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-sheet { position: relative; padding: 22px 22px 26px; background: var(--paper); border-radius: 4px; box-shadow: 0 22px 40px -24px rgba(35, 42, 49, .55), 0 0 0 1px rgba(35, 42, 49, .06); }
.v3-sheet__h { margin: 0 0 16px; font: 600 17px/1.2 'Source Sans 3', system-ui, sans-serif; color: var(--ink); }
.v3-sheet__line { display: block; width: var(--l); height: 7px; margin: 0 0 10px; border-radius: 2px; background: var(--stone); }
.v3-sheet__ex { margin: 14px -8px 16px; padding: 10px 8px; border-radius: 3px; background: rgba(175, 196, 221, .45); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--blue); }
.v3-quotes__flag { position: relative; margin: 56px 0 14px; padding: 18px 20px; border-radius: 10px; background: var(--ink); color: var(--paper); }
.v3-quotes__flag::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 34px; background: var(--ink); }
.v3-quotes__flag p { margin: 0; font-size: 15px; color: rgba(250, 250, 248, .78); }
.v3-quotes__flag .v3-quotes__flag-h { margin-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--paper); }
.v3-quotes__allow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.v3-quotes__allow p { margin: 0; font-size: 14px; color: var(--steel); }
.v3-quotes__allow .v3-quotes__allow-h { font-size: 16px; font-weight: 600; color: var(--ink); }
.v3-quotes__allow .v3-quotes__allow-num { font: 700 40px/1 'Fraunces', Georgia, serif; color: var(--blue); }

/* ========================================================= results */
.v3-results__quote { margin: clamp(56px, 6vw, 88px) 0 0; max-width: 900px; }
.v3-results__quote blockquote p { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; }
.v3-more { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--gap); }
.v3-more li { padding-top: 18px; border-top: 1px solid var(--stone); font-size: 17px; line-height: 1.55; color: var(--ink); }
.v3-more__num { display: block; margin-bottom: 10px; font: 700 clamp(40px, 4vw, 56px)/.9 'Fraunces', Georgia, serif; color: var(--blue); }

/* ========================================================= the sum */
.v3-sum__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.v3-ledger { margin: 0; border-top: 1px solid rgba(250, 250, 248, .18); }
.v3-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(250, 250, 248, .18); }
.v3-row dt { font-size: 16px; line-height: 1.5; color: rgba(250, 250, 248, .76); }
.v3-row dd { margin: 0; font: 500 18px/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--paper); text-align: right; white-space: nowrap; }
.v3-row--sub dt { color: var(--paper); font-weight: 600; }
.v3-row--total { padding: 26px 0; border-bottom: 2px solid var(--sky); }
.v3-row--total dt { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; color: var(--paper); }
.v3-row--total dd { font-size: clamp(28px, 3vw, 40px); color: var(--sky); }
.v3-row__about { font: 600 18px 'Source Sans 3', system-ui, sans-serif; color: var(--sky); }
.v3-fee { padding: 28px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .22); }
.v3-fee p { margin: 0; }
.v3-fee__label { font: 600 15px/1.4 'Source Sans 3', system-ui, sans-serif; color: rgba(250, 250, 248, .76); }
.v3-fifth { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 18px 0 20px; }
.v3-fifth span { height: 44px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .3); }
.v3-fifth .is-fee { background: var(--sky); box-shadow: none; }
.v3-fee__num { font: 400 clamp(56px, 5.6vw, 76px)/.9 'Fraunces', Georgia, serif; letter-spacing: -0.025em; color: var(--sky); }
.v3-fee .v3-fee__vat { margin-top: 10px; font-size: 15px; color: rgba(250, 250, 248, .7); }

/* ================================================ limits, FAQ, others */
.v3-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
.v3-rows li { padding: 16px 0; border-bottom: 1px solid var(--stone); font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 70ch; }
.v3-faq { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.v3-faq > div { padding-top: 16px; border-top: 1px solid var(--stone); }
.v3-faq dt { margin: 0 0 10px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.v3-faq dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.v3-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
.v3-others li { padding-top: 14px; border-top: 1px solid var(--stone); }
.v3-others__h { margin: 0 0 6px; font: 600 17px/1.3 'Source Sans 3', system-ui, sans-serif; color: var(--ink); }
.v3-others p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--steel); }

/* ============================================================ close */
.v3-close__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 5vw, 72px); }
.v3-close__grid::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 2px; background: var(--ink); }
.v3-close__h { margin: 0 0 22px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.v3-close .v3-lead { margin-bottom: 30px; }
.v3-close__bill { display: grid; gap: 7px; }
.v3-close__row { display: block; width: 100%; height: 14px; overflow: visible; }
.v3-close__row > rect:first-child { opacity: .4; }
.v3-close__mark { fill: var(--sky); }

/* design.md: Fraunces 400 only at 56px and above. */
@media (min-width: 900px) { .v3-hero__h1 { font-weight: 400; } }
@media (min-width: 840px) { .v3-month__h { font-weight: 400; } }
@media (min-width: 1180px) { .v3-close__h { font-weight: 400; } }

/* =========================================================== motion */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: each bill line slides in, its arrow draws, its package lights up.
     The bin store goes last and lands in the review tray. */
  .v3-ba__ghost { animation: v3-draw 700ms var(--ease) both; animation-delay: calc(300ms + var(--i) * 110ms); }
  .v3-ba__fill { animation: v3-ba 2000ms var(--ease) both; animation-delay: calc(300ms + var(--i) * 110ms); }
  .v3-ba__foot { animation: v3-in 500ms linear 2600ms both; }
  .v3-ba__was, .v3-ba__to { animation: v3-in 400ms ease-out both; animation-delay: calc(1150ms + var(--i) * 110ms); }
  .v3-ba__track::after { animation: v3-in 300ms linear both; animation-delay: calc(1200ms + var(--i) * 110ms); }

  /* Further down, each drawing builds as it scrolls into view. */
  @supports (animation-timeline: view()) {
    .v3-fallen__bar i, .v3-units i, .v3-cal__cells i, .v3-fifth span, .v3-step, .v3-sheet, .v3-close__found, .v3-slip--month, .v3-tl::before, .v3-tl__stop {
      animation-duration: 1ms; animation-timeline: view(); animation-range: entry 0% cover 30%; animation-fill-mode: forwards; }
    .v3-fallen__bar i { animation-name: v3-draw; animation-timing-function: var(--ease); }
    .v3-units i, .v3-cal__cells i, .v3-fifth span, .v3-close__found { animation-name: v3-in; }
    .v3-step { animation-name: v3-rise; animation-timing-function: var(--ease); }
    .v3-sheet--a { animation-name: v3-sheet-a; animation-timing-function: var(--ease); }
    .v3-sheet--b { animation-name: v3-sheet-b; animation-timing-function: var(--ease); }
    .v3-slip--month { animation-name: v3-fall; animation-timing-function: var(--ease); }
    .v3-tl::before { animation-name: v3-draw; animation-timing-function: var(--ease); }
    .v3-tl__stop { animation-name: v3-rise; animation-timing-function: var(--ease); }
  }
}
@keyframes v3-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes v3-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-drawy { from { transform: scaleY(0); } to { transform: none; } }
@keyframes v3-fall { from { transform: translateY(-48px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes v3-ba { 0% { transform: scaleX(0); background-color: rgba(250, 250, 248, .55); } 30%, 45% { transform: scaleX(var(--r)); background-color: rgba(250, 250, 248, .55); } 100% { transform: scaleX(1); background-color: var(--sky); } }
@keyframes v3-rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes v3-sheet-a { from { transform: translateX(-24px); opacity: 0; } to { transform: none; } }
@keyframes v3-sheet-b { from { transform: translateX(24px); opacity: 0; } to { transform: none; } }

/* =========================================================== layout */
@media (max-width: 1100px) {
  .v3-flow { grid-template-columns: minmax(0, 1fr); }
  .v3-flow__lanes, .v3-flow__line, .v3-flow__board::before { display: none; }
  .v3-flow__board { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; padding: 0 0 0 18px; border-radius: 0; background: none; border-left: 2px solid var(--blue); }
  .v3-step { grid-column: 1 !important; grid-row: auto !important; padding: 14px 16px; max-width: 560px; }
  .v3-step span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; opacity: .72; }
}
@media (max-width: 960px) {
  .v3-hero__top, .v3-month__grid, .v3-cost__item, .v3-catch__grid, .v3-sum__grid, .v3-close__grid, .v3-build__cols, .v3-split { grid-template-columns: minmax(0, 1fr); }
  .v3-split > .v3-h2 { margin-bottom: 4px; }
  .v3-pair, .v3-faq, .v3-others, .v3-more { grid-template-columns: minmax(0, 1fr); }
  .v3-tl { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-left: calc(var(--dot) + 22px); }
  .v3-tl::before { top: 0; bottom: 0; left: calc(var(--dot) / 2 - 1px); right: auto; width: 2px; height: auto; transform-origin: center top; animation-name: v3-drawy; }
  .v3-tl__stop { padding-top: 0; }
  .v3-tl__dot { left: calc(-1 * (var(--dot) + 22px)); }
  .v3-cal { --lab: 0px; --res: 0px; }
  .v3-cal__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; margin-bottom: 56px; }
  .v3-cal__row .v3-cal__track { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; margin-top: 26px; }
  .v3-cal__cells { flex: 0 0 100%; margin-bottom: 6px; }
  .v3-cal__seg, .v3-cal__chase { position: static; transform: none; white-space: normal; }
  .v3-cal__seg::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--sky); vertical-align: -1px; }
  .v3-cal__seg--sort::before { background: var(--steel); }
  .v3-cal__row:nth-of-type(2) .v3-cal__seg--sort::before { background: var(--ink); }
  .v3-cal__seg--cmp::before { background: var(--stone); }
  .v3-cal__lab, .v3-cal__res { line-height: 1.3; }
  .v3-cal__row:nth-of-type(2) { margin-bottom: 28px; }
  .v3-cal__axis { margin-left: 0; margin-right: 0; }
  .v3-close__bill { max-width: 440px; }
  .v3-quotes { max-width: 560px; }
}
@media (max-width: 720px) {
  .v3-ba__rows { gap: 22px; }
  .v3-ba__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; column-gap: 12px; }
  .v3-ba__lab { font-size: 16px; }
  .v3-ba__track { grid-column: 1 / -1; grid-row: 2; height: 24px; }
  .v3-ba__val { gap: 6px; }
  .v3-ba__was { font-size: 14px; }
  .v3-ba__to { font-size: 14px; }
  .v3-ba__val b { font-size: 22px; }
  .v3-ba__val small { font-size: 13px; }
  .v3-slip__h { font-size: 16px; }
  .v3-cal__cells { gap: 2px; }
  .v3-cal__cells i { height: 34px; border-radius: 2px; }
  .v3-cal__seg { font-size: 12px; }
  .v3-cal__axis span { font-size: 11px; }
  .v3-fallen__bar { height: 64px; }
  .v3-fallen__key { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .v3-fallen__key li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .v3-fallen__key b { font-size: 18px; }
  .v3-units--hours .v3-units__grid { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .v3-units--jobs .v3-units__grid { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .v3-sheet { padding: 16px 14px 18px; }
  .v3-sheet__ex { font-size: 14px; }
  .v3-quotes__allow .v3-quotes__allow-num { font-size: 32px; }
  .v3-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .v3-row dd { text-align: left; }
  .v3-row--total { grid-template-columns: auto auto; justify-content: space-between; }
  .v3-row--total dd { text-align: right; }
  .v3-row--total dt { font-size: 24px; }
}

/* 10-second readability (Kristian, 12 Oct 2026: every visual readable in 10
   seconds). Shared by both case study pages. */

/* Hero: a count row (more is better) sits under the time rows, with no bar. */
.v3-ba__row--count { padding-top: 22px; border-top: 1px solid rgba(250, 250, 248, .18); }
.v3-ba__row--count .v3-ba__track { display: none; }
.v3-ba__row--count .v3-ba__val { grid-column: 2 / -1; }

/* What one square stands for, above each square grid. Each key swatch stays beside its label. */
.v3-units__cap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 12px; font-size: 14px; color: var(--steel); }
.v3-units__cap b { font-size: 15px; color: var(--ink); }
.v3-keyitem { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }

/* The sum: time rows grouped, then cash, then the working for the total. */
.v3-row--group { padding: 24px 0 6px; border-bottom: 0; }
.v3-row--group dt { font-size: 15px; font-weight: 700; color: var(--sky); }
.v3-ledger .v3-row:not(.v3-row--group):not(.v3-row--subtotal):not(.v3-row--total):not(.v3-row--calc) dt { padding-left: 16px; }
.v3-row--subtotal { border-top: 1px solid rgba(250, 250, 248, .6); }
.v3-row--calc { padding: 18px 0 0; border-bottom: 0; }
.v3-row--calc dt { font: 500 14px/1.4 'IBM Plex Mono', ui-monospace, monospace; color: rgba(250, 250, 248, .76); }
@media (max-width: 720px) {
  .v3-ledger .v3-row:not(.v3-row--group):not(.v3-row--subtotal):not(.v3-row--total):not(.v3-row--calc) dt { padding-left: 12px; }
}