/* WhiteSpace Automation, version 3 of the Home page.
   Built 30 September 2026 from the design review of 29 September
   (~/exe/output/whitespace-website-design-review-2026-09-29.md).
   Everything here is scoped to body.v3, so the other four pages are untouched
   until Liam LeBlanc has compared the two versions and chosen. */

/* =====================================================================
   3. THE CODE FONT HAS ONE JOB
   JetBrains Mono now means "the system is talking": RUNNING, FILED, TO REVIEW,
   the check log, the invoice. Everything a person says is in Public Sans.
   ===================================================================== */
.v3 .label,
.v3 .way__kicker, .v3 .way__meta,
.v3 .case__kicker,
.v3 .step__tag, .v3 .step__meta,
.v3 .quote-name,
.v3 .workedwith__label,
.v3 .pill, .v3 .chip,
.v3 .card__num,
.v3 .panel__key,
.v3 .foot__h, .v3 .foot__legal,
.v3 .caption,
.v3 .nav__tel,
.v3 .btn--ghost,
.v3 .cta a.plain,
.v3 .field label {
  font-family: var(--sans);
}
.v3 .label { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.v3 .way__kicker, .v3 .case__kicker { font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.v3 .way__meta { font-size: 14px; font-weight: 600; color: var(--brand-green); }
.v3 .step__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.v3 .step__meta { font-size: 14px; font-weight: 600; }
.v3 .quote-name { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.v3 .workedwith__label { font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.v3 .pill { font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.v3 .chip { font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.v3 .card__num { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.v3 .panel__key { font-size: 14px; font-weight: 700; }
.v3 .foot__h { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.v3 .foot__legal { font-size: 12px; letter-spacing: .06em; }
.v3 .caption { font-size: 12.5px; }
.v3 .nav__tel { font-size: 15px; font-weight: 600; }
.v3 .btn--ghost { font-size: 16px; font-weight: 600; }
.v3 .cta a.plain { font-size: 15px; font-weight: 600; }
.v3 .field label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* =====================================================================
   HERO
   ===================================================================== */
.v3 .hero { padding-block: 88px 112px; }
.v3 .hero__inner { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v3 .hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -1px; }
/* the signature under the buttons: his photo, his name, the line he stands behind */
.v3 .byline { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.v3 .byline__pic {
  position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: #9A9A90;
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--line), 0 14px 26px -12px rgba(27,28,26,.4);
}
/* the source photo is a wide head-and-shoulders shot; this crops in on the face */
.v3 .byline__pic img { position: absolute; max-width: none; width: 214%; height: auto; left: -59%; top: -2%; }
.v3 .byline__text { display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); line-height: 1.3; }
.v3 .byline b { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 16px; color: var(--ink); }
.v3 .dc__cap { margin-top: 14px; text-align: right; }

/* headline words rising into place */
.v3 .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .22em; margin: -.08em 0 -.22em; }
.v3 .words .w > span { display: inline-block; }
html.js .v3 .words .w > span { transform: translateY(115%); }
html.js .v3 .is-in .words .w > span {
  transform: none;
  transition: transform .95s cubic-bezier(.16,.8,.24,1) calc(var(--wi, 0) * 55ms + 120ms);
}

/* =====================================================================
   1. THE SIGNATURE: THE DOUBLE CHECK
   A 10 second loop. Every part uses the same duration with its own keyframe
   window, so the whole thing stays in step on every loop. The resting state
   (no animation, reduced motion, or no script) is the finished state: every
   line ticked, line 3 checked by a person, invoice filed.
   ===================================================================== */
.v3 .dc {
  margin: 0; position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 40px 80px -30px rgba(27,28,26,.28), 0 1px 0 rgba(27,28,26,.03);
  font-family: var(--mono); color: var(--ink);
  animation: wsFloat 7s ease-in-out infinite;
}
.v3 .dc::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 30%);
}
.v3 .dc__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .07em; color: var(--ink-mute);
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.v3 .dc__state { display: inline-grid; justify-items: end; }
.v3 .dc__s { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; }
.v3 .dc__s--read { color: var(--brand-green); }
.v3 .dc__s--flag, .v3 .dc__s--sent { color: var(--amber-ink); }
.v3 .dc__s--done { color: var(--brand-green); opacity: 1; }
.v3 .dc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.v3 .dc__dot--amber { background: var(--amber); }

.v3 .dc__doc { position: relative; padding: 10px 0 4px; }
.v3 .dc__row {
  display: grid; grid-template-columns: 1fr auto 62px 22px; gap: 14px; align-items: center;
  padding: 9px 10px; margin: 0 -10px; border-radius: 9px; font-size: 13px;
}
.v3 .dc__item { font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
.v3 .dc__qty { color: var(--ink-mute); }
.v3 .dc__amt { text-align: right; }
.v3 .dc__tick {
  width: 22px; height: 22px; border-radius: 50%; background: #D9EADC; color: var(--brand-green);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: var(--sans);
}
.v3 .dc__note { grid-column: 1 / -1; display: grid; font-size: 11.5px; margin-top: -2px; }
.v3 .dc__note-a, .v3 .dc__note-b { grid-area: 1 / 1; }
.v3 .dc__note-a { color: var(--amber-ink); opacity: 0; }
.v3 .dc__note-b { color: var(--brand-green); }
.v3 .dc__total {
  display: flex; justify-content: space-between; margin-top: 6px; padding: 12px 0 2px;
  border-top: 1px dashed #D9D6CA; font-size: 12px; letter-spacing: .06em; color: var(--ink-mute);
}
.v3 .dc__total span:last-child { color: var(--ink); font-size: 13.5px; letter-spacing: 0; }
.v3 .dc__scan { position: absolute; left: -12px; right: -12px; top: 0; height: 2px; opacity: 0; pointer-events: none; border-radius: 2px; }
.v3 .dc__scan--a { background: linear-gradient(90deg, transparent, var(--green) 20%, var(--green) 80%, transparent); box-shadow: 0 0 22px 6px rgba(58,122,79,.22); }
.v3 .dc__scan--b { background: linear-gradient(90deg, transparent, var(--charcoal) 20%, var(--charcoal) 80%, transparent); box-shadow: 0 0 22px 6px rgba(38,41,43,.16); }

.v3 .dc__reads { display: grid; gap: 10px; padding: 14px 0; margin-top: 8px; border-top: 1px solid var(--line-2); }
.v3 .dc__read { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 14px; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-mute); }
.v3 .dc__bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.v3 .dc__fill { display: block; height: 100%; width: 100%; border-radius: inherit; }
.v3 .dc__fill--a { background: var(--green); }
.v3 .dc__fill--b { background: var(--charcoal); }

.v3 .dc__person {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--sage-tint); border: 1px solid #C9D9C8;
}
.v3 .dc__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid #C9D9C8;
  color: var(--brand-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v3 .dc__who { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; font-family: var(--sans); }
.v3 .dc__who b { font-size: 14.5px; }
.v3 .dc__who small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.v3 .dc__ok {
  font-size: 10px; letter-spacing: .08em; color: var(--brand-green); background: var(--white);
  border: 1px solid #C9D9C8; border-radius: 999px; padding: 5px 10px; flex-shrink: 0;
}

/* the timeline, only while the card is on screen */
.v3 .dc.is-live .dc__scan--a  { animation: dcScanA 10s linear infinite; }
.v3 .dc.is-live .dc__scan--b  { animation: dcScanB 10s linear infinite; }
.v3 .dc.is-live .dc__fill--a  { animation: dcFillA 10s linear infinite; }
.v3 .dc.is-live .dc__fill--b  { animation: dcFillB 10s linear infinite; }
.v3 .dc.is-live .dc__row--1 .dc__tick { animation: dcTick1 10s ease-out infinite; }
.v3 .dc.is-live .dc__row--2 .dc__tick { animation: dcTick2 10s ease-out infinite; }
.v3 .dc.is-live .dc__row--3 .dc__tick { animation: dcTick3 10s ease-out infinite; }
.v3 .dc.is-live .dc__row--4 .dc__tick { animation: dcTick4 10s ease-out infinite; }
.v3 .dc.is-live .dc__row--3   { animation: dcRow3 10s ease-out infinite; }
.v3 .dc.is-live .dc__note-a   { animation: dcNoteA 10s linear infinite; }
.v3 .dc.is-live .dc__note-b   { animation: dcNoteB 10s linear infinite; }
.v3 .dc.is-live .dc__s--read  { animation: dcRead 10s linear infinite; }
.v3 .dc.is-live .dc__s--flag  { animation: dcFlag 10s linear infinite; }
.v3 .dc.is-live .dc__s--sent  { animation: dcSent 10s linear infinite; }
.v3 .dc.is-live .dc__s--done  { animation: dcDone 10s linear infinite; }
.v3 .dc.is-live .dc__person   { animation: dcPerson 10s ease-out infinite; }
.v3 .dc.is-live .dc__ok       { animation: dcOk 10s ease-out infinite; }

@keyframes dcScanA { 0%, 5% { top: 0; opacity: 0; } 6% { opacity: 1; } 22% { top: 100%; opacity: 1; } 23%, 100% { top: 100%; opacity: 0; } }
@keyframes dcScanB { 0%, 24% { top: 0; opacity: 0; } 25% { opacity: 1; } 41% { top: 100%; opacity: 1; } 42%, 100% { top: 100%; opacity: 0; } }
@keyframes dcFillA { 0%, 5% { width: 0; } 22%, 97% { width: 100%; } 100% { width: 0; } }
@keyframes dcFillB { 0%, 24% { width: 0; } 41%, 97% { width: 100%; } 100% { width: 0; } }
@keyframes dcTick1 { 0%, 28% { opacity: 0; transform: scale(.3); } 31%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dcTick2 { 0%, 31% { opacity: 0; transform: scale(.3); } 34%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dcTick4 { 0%, 37% { opacity: 0; transform: scale(.3); } 40%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dcTick3 { 0%, 67% { opacity: 0; transform: scale(.3); } 70%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes dcRow3 {
  0%, 34% { background: rgba(255,244,214,0); }
  36%, 66% { background: #FFF4D6; }
  70% { background: #EEF4ED; }
  88%, 100% { background: rgba(238,244,237,0); }
}
@keyframes dcNoteA { 0%, 35% { opacity: 0; } 37%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes dcNoteB { 0%, 67% { opacity: 0; } 70%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dcRead { 0%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes dcFlag { 0%, 35% { opacity: 0; } 37%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes dcSent { 0%, 55% { opacity: 0; } 57%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes dcDone { 0%, 68% { opacity: 0; } 70%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes dcPerson {
  0%, 54% { opacity: .4; background: var(--sage-tint); border-color: #C9D9C8; box-shadow: none; }
  57%, 67% { opacity: 1; background: #FFF8E6; border-color: #EBD9A6; box-shadow: 0 0 0 5px rgba(217,154,43,.16); }
  71%, 96% { opacity: 1; background: var(--sage-tint); border-color: #C9D9C8; box-shadow: none; }
  100% { opacity: .4; }
}
@keyframes dcOk { 0%, 68% { opacity: 0; transform: scale(.8); } 71%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* =====================================================================
   5. THREE WAYS: heading pinned on the left, rows on the right
   ===================================================================== */
.v3 .ways-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.v3 .ways-split__head { position: sticky; top: 128px; }
.v3 .ways-split .sec-head { margin-bottom: 0; }
.v3 .ways-split h2 { font-size: clamp(32px, 3.2vw, 46px); }
.v3 .way { padding: 28px 0; }
.v3 .way__title { font-size: clamp(28px, 2.5vw, 36px); }
.v3 .way__desc { font-size: 16px; }

/* =====================================================================
   RELIABILITY: the promise as a statement, the flow beneath it
   ===================================================================== */
.v3 .reliable .band { padding-block: 112px; }
.v3 .sec-head--centre { align-items: center; text-align: center; max-width: 880px; margin-inline: auto; }
.v3 .sec-head--centre .label { justify-content: center; }
.v3 .sec-head--centre .lede { color: #C9C7BC; max-width: 56ch; }
.v3 .words--big { font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -1.2px; }
.v3 .reliable em { color: var(--green-light); }

.v3 .flow2 {
  display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1.2fr; align-items: center;
  margin-top: 56px;
}
.v3 .flow2__node {
  background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .3s, box-shadow .3s;
}
.v3 .flow2__node b { font-family: var(--sans); font-weight: 600; font-size: 16px; color: #F3F1E9; }
.v3 .flow2__node small { font-family: var(--mono); font-size: 11px; color: #9A988D; }
.v3 .flow2__row { display: flex; align-items: center; gap: 9px; }
.v3 .flow2__reads, .v3 .flow2__out { display: grid; gap: 12px; }
.v3 .flow2__link { position: relative; height: 1px; background: var(--line-dark); }
.v3 .flow2__link i {
  position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-light); box-shadow: 0 0 14px 3px rgba(147,203,164,.55); opacity: 0;
}
.v3 .reliable__story {
  margin: 56px auto 0; max-width: 62ch; text-align: center; font-size: 16px; line-height: 1.65; color: #B6B4A9;
}

.v3 .flow2.is-live .flow2__link--1 i { animation: f2Link1 3s linear infinite; }
.v3 .flow2.is-live .flow2__link--2 i { animation: f2Link2 3s linear infinite; }
.v3 .flow2.is-live .flow2__link--3 i { animation: f2Link3 3s linear infinite; }
.v3 .flow2.is-live .flow2__node--read { animation: f2Reads 3s ease-out infinite; }
.v3 .flow2.is-live .flow2__node--cmp { animation: f2Cmp 3s ease-out infinite; }
.v3 .flow2.is-live .flow2__node--ok { animation: f2Ok 9s ease-out infinite; }
.v3 .flow2.is-live .flow2__node--flag { animation: f2Flag 9s ease-out infinite; }

@keyframes f2Link1 { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 30% { left: calc(100% - 7px); opacity: 1; } 33%, 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes f2Link2 { 0%, 33% { left: 0; opacity: 0; } 36% { opacity: 1; } 63% { left: calc(100% - 7px); opacity: 1; } 66%, 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes f2Link3 { 0%, 66% { left: 0; opacity: 0; } 69% { opacity: 1; } 96% { left: calc(100% - 7px); opacity: 1; } 99%, 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes f2Reads { 0%, 30% { border-color: var(--line-dark); box-shadow: none; } 34% { border-color: rgba(147,203,164,.7); box-shadow: 0 0 0 4px rgba(147,203,164,.12); } 50%, 100% { border-color: var(--line-dark); box-shadow: none; } }
@keyframes f2Cmp { 0%, 63% { border-color: var(--line-dark); box-shadow: none; } 67% { border-color: rgba(147,203,164,.7); box-shadow: 0 0 0 4px rgba(147,203,164,.12); } 83%, 100% { border-color: var(--line-dark); box-shadow: none; } }
@keyframes f2Ok {
  0%, 31% { border-color: var(--line-dark); box-shadow: none; }
  34% { border-color: rgba(147,203,164,.8); box-shadow: 0 0 0 5px rgba(147,203,164,.14); }
  44%, 64% { border-color: var(--line-dark); box-shadow: none; }
  67% { border-color: rgba(147,203,164,.8); box-shadow: 0 0 0 5px rgba(147,203,164,.14); }
  77%, 100% { border-color: var(--line-dark); box-shadow: none; }
}
@keyframes f2Flag {
  0%, 94% { border-color: var(--line-dark); box-shadow: none; }
  98%, 100% { border-color: rgba(230,184,99,.85); box-shadow: 0 0 0 5px rgba(217,154,43,.16); }
}

/* =====================================================================
   2. THE PROOF, BIG
   ===================================================================== */
.v3 .feature {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: start;
  background: var(--cream); border: 1px solid var(--line); border-radius: 26px;
  padding: 48px; margin-bottom: 24px;
}
.v3 .feature .case__head img { height: 40px; }
.v3 .bignum {
  font-family: var(--serif); font-weight: 500; font-size: clamp(104px, 11vw, 164px);
  line-height: .8; letter-spacing: -.04em; color: var(--brand-green); margin: 32px 0 12px;
}
.v3 .bignum__cap { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -.2px; }
.v3 .feature__stats {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.v3 .feature__stat { display: flex; flex-direction: column; gap: 4px; }
.v3 .feature__stat b { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.7vw, 38px); line-height: 1; color: var(--brand-green); }
.v3 .feature__stat > span { font-size: 15px; color: var(--ink-soft); }
.v3 .feature .quote-attrib img { display: none; }
.v3 .feature__story { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.v3 .feature__story h3 { font-size: clamp(24px, 2.1vw, 31px); line-height: 1.15; letter-spacing: -.3px; }
.v3 .feature__story > p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; }
.v3 .quote-dark--mark { font-size: 18.5px; line-height: 1.55; padding: 28px 28px 22px; }
.v3 .quote-dark--mark::before {
  content: '\201C'; display: block; font-family: var(--serif); font-size: 72px; line-height: .55;
  color: var(--green-light); margin-bottom: 10px;
}

.v3 .smallcase { padding: 28px; gap: 14px; }
.v3 .smallcase__head img { height: 34px; }
.v3 .smallcase__head img.is-square, .v3 .workedwith__logos img.is-square { width: 34px; object-fit: contain; }
.v3 .outcome { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 23px); line-height: 1.25; color: var(--brand-green); letter-spacing: -.1px; }
.v3 .quote-plain { font-size: 16.5px; }

/* =====================================================================
   8. DETAILS
   ===================================================================== */
.v3 .workedwith__logos img { filter: grayscale(1) contrast(1.05); opacity: .62; transition: filter .3s, opacity .3s; }
.v3 .workedwith__logos img:hover { filter: none; opacity: 1; }
.v3 .workedwith__logos span { color: var(--ink-mute); }

/* =====================================================================
   7. MOTION POLISH
   ===================================================================== */
/* cards in a row arrive one after another, not as a block */
html.js .v3 .is-in { transition-delay: calc(min(var(--i, 0), 6) * 90ms); }
html.js .v3 .is-done { transition-delay: 0s; }

/* a slight lift under the mouse, on desktop only */
@media (hover: hover) and (min-width: 901px) {
  .v3 .card.is-done, .v3 .smallcase.is-done {
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
  }
  .v3 .card.is-done:hover, .v3 .smallcase.is-done:hover {
    transform: translateY(-4px); border-color: #D6D3C6;
    box-shadow: 0 22px 44px -22px rgba(27,28,26,.28);
  }
  .v3 .way:hover .way__title { color: var(--brand-green); }
  .v3 .way__title { transition: color .25s; }
}

/* =====================================================================
   6. PHONE: swipe rows and a call button that stays in reach
   ===================================================================== */
.v3 .swipe-dots, .v3 .stickycta { display: none; }

@media (max-width: 900px) {
  .v3 .hero { padding-block: 22px 40px; }
  .v3 .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .v3 .hero h1 { letter-spacing: -1px; }
  .v3 .dc { padding: 18px 16px 14px; border-radius: 18px; animation: none; }
  .v3 .dc__row { grid-template-columns: 1fr 58px 22px; gap: 10px; }
  .v3 .dc__qty { display: none; }
  .v3 .dc__item { font-size: 14px; }
  .v3 .dc__head { font-size: 9.5px; }
  .v3 .dc__read { grid-template-columns: 1fr 64px; font-size: 9.5px; }
  .v3 .dc__who small { display: none; }
  .v3 .dc__cap { text-align: left; }

  .v3 .ways-split { grid-template-columns: 1fr; gap: 28px; }
  .v3 .ways-split__head { position: static; }

  .v3 .reliable .band { padding-block: 72px; }
  .v3 .flow2 { grid-template-columns: 1fr; margin-top: 36px; }
  .v3 .flow2__link { width: 1px; height: 30px; justify-self: center; }
  .v3 .flow2__link i { top: 0; left: -3px; }
  .v3 .flow2.is-live .flow2__link--1 i { animation-name: f2Link1v; }
  .v3 .flow2.is-live .flow2__link--2 i { animation-name: f2Link2v; }
  .v3 .flow2.is-live .flow2__link--3 i { animation-name: f2Link3v; }
  .v3 .flow2__reads { grid-template-columns: 1fr 1fr; }
  .v3 .flow2__node { padding: 14px 16px; }
  .v3 .reliable__story { margin-top: 36px; text-align: left; }
  .v3 .sec-head--centre .lede { text-align: center; }

  .v3 .feature { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; border-radius: 20px; }
  .v3 .bignum { margin: 26px 0 10px; }
  .v3 .quote-dark--mark { font-size: 17.5px; padding: 22px; }

  /* swipe rows */
  .v3 .swipe {
    display: flex; flex-direction: row; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
    scrollbar-width: none; position: relative;
  }
  .v3 .swipe::-webkit-scrollbar { display: none; }
  .v3 .swipe > * { flex: 0 0 84%; scroll-snap-align: start; }
  .v3 .swipe:focus-visible { outline-offset: -3px; }
  .v3 .ways.swipe { border-top: 0; }
  .v3 .ways.swipe .way {
    flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line);
    border-radius: 16px; background: var(--cream);
  }
  .v3 .ways.swipe .way__arrow { margin-top: auto; }
  .v3 .swipe-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .v3 .swipe-dots i { width: 7px; height: 7px; border-radius: 999px; background: #D6D3C6; transition: width .3s, background .3s; }
  .v3 .swipe-dots i.is-on { width: 22px; background: var(--green); }

  /* the call button that stays in reach */
  .v3 .stickycta {
    display: flex; position: fixed; left: 12px; right: 12px; z-index: 60;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 10px; align-items: center; padding: 8px;
    background: rgba(28,32,29,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 999px; box-shadow: 0 18px 40px rgba(0,0,0,.28);
    transform: translateY(160%); visibility: hidden;
    transition: transform .45s cubic-bezier(.2,.7,.3,1), visibility 0s linear .45s;
  }
  .v3 .stickycta.is-on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.7,.3,1), visibility 0s; }
  .v3 .stickycta .btn { flex: 1; min-height: 48px; }
  .v3 .stickycta__tel {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(147,203,164,.16); color: var(--green-light);
  }
}

@keyframes f2Link1v { 0% { top: 0; opacity: 0; } 3% { opacity: 1; } 30% { top: calc(100% - 7px); opacity: 1; } 33%, 100% { top: calc(100% - 7px); opacity: 0; } }
@keyframes f2Link2v { 0%, 33% { top: 0; opacity: 0; } 36% { opacity: 1; } 63% { top: calc(100% - 7px); opacity: 1; } 66%, 100% { top: calc(100% - 7px); opacity: 0; } }
@keyframes f2Link3v { 0%, 66% { top: 0; opacity: 0; } 69% { opacity: 1; } 96% { top: calc(100% - 7px); opacity: 1; } 99%, 100% { top: calc(100% - 7px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .v3 .words .w > span { transform: none !important; }
}

/* phone polish, 30 September */
.v3 .quote-dark--mark::before { font-size: 64px; line-height: 1; height: 34px; margin-bottom: 6px; overflow: hidden; }
@media (max-width: 900px) {
  .v3 .dc__sup { display: none; }
  .v3 .flow2__node { padding: 12px 14px; gap: 2px; }
  .v3 .flow2__out { gap: 8px; }
  .v3 .flow2__node b { font-size: 15.5px; }
}
.v3 .feature__story > a { min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }

@media (max-width: 900px) {
  .v3 .byline__pic { width: 64px; height: 64px; }
  .v3 .byline__text { font-size: 17px; }
}

/* The signature photo as a rounded rectangle, not a circle (Liam LeBlanc,
   30 September 2026: "my photo looks a little funny with the circle ... my face
   should be a bit more visible but in a rectangle/square of similar size").
   Portrait orientation, cropped to head and shoulders from the wide source photo. */
.v3 .byline { gap: 18px; margin-top: 14px; }
.v3 .byline__pic { width: 104px; height: 124px; border-radius: 14px; }
.v3 .byline__pic img { width: 219%; left: -61.5%; top: 0; }
@media (max-width: 900px) {
  .v3 .byline__pic { width: 88px; height: 104px; border-radius: 12px; }
}

/* =====================================================================
   THE OTHER FOUR PAGES (rolled out 30 September 2026)
   The code font keeps its one job on every page: labels a person would say
   move to Public Sans; statuses, logs, pipelines and plans stay in code.
   ===================================================================== */
.v3 .btn--outline,
.v3 .otherway__kicker,
.v3 .joblist__n,
.v3 .ba__tag,
.v3 .pathstep__n,
.v3 .rung__n,
.v3 .romans span,
.v3 .portrait__label,
.v3 .dodont__tag,
.v3 .verdict__tag,
.v3 .verdict__who,
.v3 .compare tbody th,
.v3 .compare-td-label,
.v3 .compare__start,
.v3 .quote-plain + .quote-name {
  font-family: var(--sans);
}
.v3 .btn--outline { font-size: 16px; font-weight: 600; }
.v3 .otherway__kicker, .v3 .ba__tag, .v3 .dodont__tag, .v3 .verdict__tag,
.v3 .compare tbody th, .v3 .compare-td-label, .v3 .compare__start, .v3 .portrait__label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.v3 .verdict__who { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.v3 .joblist__n, .v3 .pathstep__n, .v3 .rung__n, .v3 .romans span { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.v3 .quote-plain + .quote-name { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
/* a result a person reports reads like the Home page's outcomes, not like a log */
.v3 .smallcase__result { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; color: var(--brand-green); }
.v3 .hero--dark .caption { color: #9A988D; }

/* the dark hero gets the same slow background as the Home hero, in its own colours */
.v3 .hero--dark .hero__grid { background-image: radial-gradient(rgba(147,203,164,.2) 1.2px, transparent 1.3px); }
.v3 .hero--dark .hero__glow--a { background: radial-gradient(circle, rgba(58,122,79,.34), rgba(58,122,79,0) 64%); }
.v3 .hero--dark .hero__glow--b { background: radial-gradient(circle, rgba(74,222,128,.08), rgba(74,222,128,0) 64%); }
.v3 .hero--dark .hero__inner { align-items: center; }

/* ---------------------------------------------------------------------
   AUTOMATION: the pipeline, running
   A 12 second loop, two invoices. The first matches on both reads and is
   filed. The second does not match at the check, so it goes to a person.
   At rest (reduced motion, no script, off screen) every step shows done.
   --------------------------------------------------------------------- */
.v3 .pipe {
  margin: 0; position: relative; background: var(--charcoal-2); border: 1px solid var(--line-dark);
  border-radius: 22px; padding: 22px 22px 20px; font-family: var(--mono); color: #F3F1E9;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  animation: wsFloat 7s ease-in-out infinite;
}
.v3 .pipe__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .07em; color: #9A988D;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-dark);
}
.v3 .pipe__state { display: inline-grid; justify-items: end; }
.v3 .pipe__s { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; }
.v3 .pipe__s--run, .v3 .pipe__s--filed { color: var(--green-light); }
.v3 .pipe__s--person { color: #E6B863; }
.v3 .pipe__s--run { opacity: 1; }
.v3 .pipe__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-light); display: inline-block; }
.v3 .pipe__dot--amber { background: var(--amber); }

.v3 .pipe__steps { list-style: none; margin: 0; padding: 10px 0; }
.v3 .pipe__step {
  position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center;
  padding: 12px; margin: 0 -12px; border-radius: 14px;
}
/* the rail joining the step numbers, drawn in halves so it meets each circle
   whatever the height of the row */
.v3 .pipe__step::before, .v3 .pipe__step::after {
  content: ''; position: absolute; left: 27px; width: 2px; background: var(--line-dark);
}
.v3 .pipe__step::before { top: 0; bottom: calc(50% + 17px); }
.v3 .pipe__step::after { top: calc(50% + 17px); bottom: 0; }
.v3 .pipe__step--1::before, .v3 .pipe__step--4::after { display: none; }
.v3 .pipe__n {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: 1px solid rgba(147,203,164,.55); background: rgba(147,203,164,.12); color: var(--green-light);
}
.v3 .pipe__t { display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); }
.v3 .pipe__t b { font-size: 16px; font-weight: 600; color: #F3F1E9; }
.v3 .pipe__t small { font-size: 13.5px; color: #9A988D; }
.v3 .pipe__v { display: inline-grid; justify-items: end; font-size: 10.5px; letter-spacing: .07em; }
.v3 .pipe__ok, .v3 .pipe__no { grid-area: 1 / 1; white-space: nowrap; }
.v3 .pipe__ok { color: var(--green-light); }
.v3 .pipe__no { color: #E6B863; opacity: 0; }

.v3 .pipe__person {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(243,241,233,.04); border: 1px solid var(--line-dark);
}
.v3 .pipe__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(230,184,99,.12); color: #E6B863; border: 1px solid rgba(230,184,99,.35);
}
.v3 .pipe__who { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); }
.v3 .pipe__who b { font-size: 14.5px; font-weight: 600; color: #F3F1E9; }
.v3 .pipe__who small { font-size: 13px; color: #B6B4A9; line-height: 1.4; }
.v3 .pipe__cap { margin-top: 14px; text-align: right; }

.v3 .pipe.is-live .pipe__step--1 { animation: ppLi1 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--2 { animation: ppLi2 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--3 { animation: ppLi3 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--4 { animation: ppLi4 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--1 .pipe__n { animation: ppN1 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--2 .pipe__n { animation: ppN2 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--3 .pipe__n { animation: ppN3 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--4 .pipe__n { animation: ppN4 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--1 .pipe__ok { animation: ppOk1 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--2 .pipe__ok { animation: ppOk2 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--3 .pipe__ok { animation: ppOk3 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--3 .pipe__no { animation: ppNo3 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__step--4 .pipe__ok { animation: ppOk4 12s ease-out infinite; }
.v3 .pipe.is-live .pipe__s--run { animation: ppRun 12s linear infinite; }
.v3 .pipe.is-live .pipe__s--filed { animation: ppFiled 12s linear infinite; }
.v3 .pipe.is-live .pipe__s--person { animation: ppPerson 12s linear infinite; }
.v3 .pipe.is-live .pipe__person { animation: ppBox 12s ease-out infinite; }

/* a row: dim, then lit while the invoice is on it, then done */
@keyframes ppLi1 {
  0%, 1% { opacity: .5; background-color: rgba(147,203,164,0); }
  3%, 10% { opacity: 1; background-color: rgba(147,203,164,.09); }
  13%, 45% { opacity: 1; background-color: rgba(147,203,164,0); }
  48%, 50% { opacity: .5; }
  52%, 59% { opacity: 1; background-color: rgba(147,203,164,.09); }
  62%, 96% { opacity: 1; background-color: rgba(147,203,164,0); }
  99%, 100% { opacity: .5; background-color: rgba(147,203,164,0); }
}
@keyframes ppLi2 {
  0%, 9% { opacity: .5; background-color: rgba(147,203,164,0); }
  11%, 18% { opacity: 1; background-color: rgba(147,203,164,.09); }
  21%, 45% { opacity: 1; background-color: rgba(147,203,164,0); }
  48%, 58% { opacity: .5; }
  60%, 67% { opacity: 1; background-color: rgba(147,203,164,.09); }
  70%, 96% { opacity: 1; background-color: rgba(147,203,164,0); }
  99%, 100% { opacity: .5; background-color: rgba(147,203,164,0); }
}
@keyframes ppLi3 {
  0%, 17% { opacity: .5; background-color: rgba(147,203,164,0); }
  19%, 26% { opacity: 1; background-color: rgba(147,203,164,.09); }
  29%, 45% { opacity: 1; background-color: rgba(147,203,164,0); }
  48%, 66% { opacity: .5; background-color: rgba(147,203,164,0); }
  68%, 75% { opacity: 1; background-color: rgba(147,203,164,.09); }
  78%, 96% { opacity: 1; background-color: rgba(217,154,43,.09); }
  99%, 100% { opacity: .5; background-color: rgba(217,154,43,0); }
}
@keyframes ppLi4 {
  0%, 25% { opacity: .5; background-color: rgba(147,203,164,0); }
  27%, 34% { opacity: 1; background-color: rgba(147,203,164,.09); }
  37%, 45% { opacity: 1; background-color: rgba(147,203,164,0); }
  48%, 100% { opacity: .5; background-color: rgba(147,203,164,0); }
}

/* a step number: off, lit, done (and amber where the reads disagree) */
@keyframes ppN1 {
  0%, 1% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  3%, 10% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  13%, 45% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  48%, 50% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  52%, 59% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  62%, 96% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  99%, 100% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
}
@keyframes ppN2 {
  0%, 9% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  11%, 18% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  21%, 45% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  48%, 58% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  60%, 67% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  70%, 96% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  99%, 100% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
}
@keyframes ppN3 {
  0%, 17% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  19%, 26% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  29%, 45% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  48%, 66% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  68%, 75% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  78%, 96% { background: rgba(217,154,43,.16); border-color: rgba(230,184,99,.8); color: #E6B863; box-shadow: 0 0 0 6px rgba(217,154,43,.14); }
  99%, 100% { background: rgba(217,154,43,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
}
@keyframes ppN4 {
  0%, 25% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
  27%, 34% { background: var(--green-light); border-color: var(--green-light); color: #14261C; box-shadow: 0 0 0 6px rgba(147,203,164,.16); }
  37%, 45% { background: rgba(147,203,164,.12); border-color: rgba(147,203,164,.55); color: var(--green-light); box-shadow: none; }
  48%, 100% { background: rgba(147,203,164,0); border-color: var(--line-dark); color: #9A988D; box-shadow: none; }
}

/* the word at the end of each row, once that step is done */
@keyframes ppOk1 { 0%, 10% { opacity: 0; transform: translateX(-6px); } 13%, 45% { opacity: 1; transform: none; } 48%, 59% { opacity: 0; transform: translateX(-6px); } 62%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ppOk2 { 0%, 18% { opacity: 0; transform: translateX(-6px); } 21%, 45% { opacity: 1; transform: none; } 48%, 67% { opacity: 0; transform: translateX(-6px); } 70%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ppOk3 { 0%, 26% { opacity: 0; transform: translateX(-6px); } 29%, 45% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateX(-6px); } }
@keyframes ppNo3 { 0%, 75% { opacity: 0; transform: translateX(-6px); } 78%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ppOk4 { 0%, 34% { opacity: 0; transform: translateX(-6px); } 37%, 45% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateX(-6px); } }

/* the status in the corner, and the person the second invoice goes to */
/* one word fades out before the next fades in, so the two never overlap */
@keyframes ppRun { 0%, 33% { opacity: 1; } 34.5%, 47% { opacity: 0; } 48.5%, 75% { opacity: 1; } 76.5%, 98% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
@keyframes ppFiled { 0%, 35% { opacity: 0; } 36.5%, 45% { opacity: 1; } 46.5%, 100% { opacity: 0; } }
@keyframes ppPerson { 0%, 77% { opacity: 0; } 78.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes ppBox {
  0%, 75% { opacity: .5; background: rgba(243,241,233,.04); border-color: var(--line-dark); box-shadow: none; }
  78%, 94% { opacity: 1; background: rgba(217,154,43,.10); border-color: rgba(230,184,99,.6); box-shadow: 0 0 0 5px rgba(217,154,43,.12); }
  98%, 100% { opacity: .5; background: rgba(243,241,233,.04); border-color: var(--line-dark); box-shadow: none; }
}

/* ---------------------------------------------------------------------
   AUTOMATION: the numbers band under the hero
   --------------------------------------------------------------------- */
.v3 .numband { border-bottom: 1px solid var(--line); }
.v3 .numband__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.v3 .numband__stat { display: flex; flex-direction: column; gap: 10px; padding: 44px 36px 40px; border-left: 1px solid var(--line); }
.v3 .numband__stat:first-child { border-left: 0; padding-left: 0; }
.v3 .numband__n {
  font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 4.2vw, 60px);
  line-height: 1; letter-spacing: -.02em; color: var(--brand-green); white-space: nowrap;
}
.v3 .numband__n small { font-size: .4em; letter-spacing: 0; color: var(--ink-soft); margin-left: 6px; }
.v3 .numband__cap { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }

/* ---------------------------------------------------------------------
   AUTOMATION: before and after, one line at a time
   --------------------------------------------------------------------- */
html.js .v3 .ba__col li { opacity: 0; transform: translateY(8px); }
html.js .v3 .ba__col.is-in li {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms + .25s);
}
html.js .v3 .ba__col.is-in li:nth-child(2) { transition-delay: calc(min(var(--i, 0), 6) * 90ms + .45s); }
html.js .v3 .ba__col.is-in li:nth-child(3) { transition-delay: calc(min(var(--i, 0), 6) * 90ms + .65s); }

@media (max-width: 900px) {
  .v3 .hero--dark .hero__inner { gap: 30px; }
  .v3 .pipe { padding: 18px 16px 16px; border-radius: 18px; animation: none; }
  .v3 .pipe__head { font-size: 9.5px; }
  .v3 .pipe__step { gap: 12px; padding: 10px; margin: 0 -10px; }
  .v3 .pipe__step::before, .v3 .pipe__step::after { left: 25px; }
  .v3 .pipe__t b { font-size: 15.5px; }
  .v3 .pipe__t small { font-size: 13px; }
  .v3 .pipe__v { font-size: 9.5px; }
  .v3 .pipe__cap { text-align: left; }

  .v3 .numband__row { grid-template-columns: 1fr; }
  .v3 .numband__stat {
    display: grid; grid-template-columns: 138px 1fr; align-items: center; gap: 14px;
    padding: 20px 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .v3 .numband__stat:first-child { border-top: 0; padding-top: 26px; }
  .v3 .numband__stat:last-child { padding-bottom: 26px; }
  .v3 .numband__n { font-size: 38px; }
  .v3 .numband__cap { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .v3 .ba__col li { transition-delay: 0s !important; }
}

/* ---------------------------------------------------------------------
   CONSULTING: the plan writing itself
   A 12 second loop. Each line gets its heading, then its words type out,
   then its verdict lands; the status in the corner turns to DRAFT READY.
   At rest the plan is complete.
   --------------------------------------------------------------------- */
.v3 .verdict__who { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.v3 .hero--centred { padding-block: 88px 0; }
.v3 .plan { border-radius: 22px; padding: 28px 32px 24px; box-shadow: 0 40px 80px -34px rgba(27,28,26,.26), 0 1px 0 rgba(27,28,26,.03); }
.v3 .plan__state { display: inline-grid; justify-items: end; }
.v3 .plan__s { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; }
.v3 .plan__s--writing { color: var(--amber-ink); }
.v3 .plan__s--ready { color: var(--brand-green); opacity: 1; }
.v3 .plan__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.v3 .plan__s--writing .plan__dot { background: var(--amber); }
/* the words take only their own width, so they type at the pace of the text */
.v3 .plan__what { justify-self: start; }

.v3 .plan.is-live .plan__row--1 .plan__num { animation: plNum1 12s linear infinite; }
.v3 .plan.is-live .plan__row--2 .plan__num { animation: plNum2 12s linear infinite; }
.v3 .plan.is-live .plan__row--3 .plan__num { animation: plNum3 12s linear infinite; }
.v3 .plan.is-live .plan__row--1 .plan__what { animation: plWhat1 12s linear infinite; }
.v3 .plan.is-live .plan__row--2 .plan__what { animation: plWhat2 12s linear infinite; }
.v3 .plan.is-live .plan__row--3 .plan__what { animation: plWhat3 12s linear infinite; }
.v3 .plan.is-live .plan__row--1 .plan__verdict { animation: plChip1 12s ease-out infinite; }
.v3 .plan.is-live .plan__row--2 .plan__verdict { animation: plChip2 12s ease-out infinite; }
.v3 .plan.is-live .plan__row--3 .plan__verdict { animation: plChip3 12s ease-out infinite; }
.v3 .plan.is-live .plan__foot { animation: plFoot 12s linear infinite; }
.v3 .plan.is-live .plan__s--writing { animation: plWriting 12s linear infinite; }
.v3 .plan.is-live .plan__s--ready { animation: plReady 12s linear infinite; }

@keyframes plNum1 { 0%, 2% { opacity: 0; } 4%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes plNum2 { 0%, 19% { opacity: 0; } 21%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes plNum3 { 0%, 36% { opacity: 0; } 38%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes plWhat1 {
  0%, 5% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(34, end); }
  17%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  96% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes plWhat2 {
  0%, 22% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(28, end); }
  34%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  96% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes plWhat3 {
  0%, 39% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(28, end); }
  51%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  96% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes plChip1 { 0%, 18% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.12); } 22%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes plChip2 { 0%, 35% { opacity: 0; transform: scale(.6); } 37% { opacity: 1; transform: scale(1.12); } 39%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes plChip3 { 0%, 52% { opacity: 0; transform: scale(.6); } 54% { opacity: 1; transform: scale(1.12); } 56%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes plFoot { 0%, 57% { opacity: 0; } 60%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* one status fades out before the other fades in */
@keyframes plWriting { 0%, 57% { opacity: 1; } 58.5%, 95.5% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes plReady { 0%, 58.5% { opacity: 0; } 60%, 93% { opacity: 1; } 94.5%, 100% { opacity: 0; } }

@media (max-width: 900px) {
  .v3 .hero--centred { padding-block: 22px 0; }
  .v3 .plan { padding: 20px 18px 18px; border-radius: 18px; }
}
/* the three lines of the plan start at the same place */
@media (min-width: 901px) { .v3 .plan__row { grid-template-columns: 170px 1fr auto; } }
/* on a phone: the example cards match heights instead of leaving a gap under
   the shorter ones, and the plan's status stays on one line */
.v3 .plan__head > span:first-child { white-space: nowrap; }
@media (max-width: 900px) {
  .v3 .verdicts.swipe { align-items: stretch; }
  .v3 .plan__sup { display: none; }
}
/* the quote band: the same opening mark as the Home quote, at a calmer size */
.v3 .quote-band blockquote { font-size: clamp(20px, 1.9vw, 27px); max-width: 34ch; }
.v3 .quote-band__mark::before {
  content: '\201C'; display: block; font-family: var(--serif); font-size: 64px; line-height: 1;
  height: 34px; overflow: hidden; color: var(--green-light); margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   TRAINING: the practice task, running
   A 12 second loop. The AI draft writes itself out word by word, a person
   reads it, and only then does the "check the draft" tick land. At rest
   the draft is written and ticked.
   --------------------------------------------------------------------- */
.v3 .sessionbox {
  border-radius: 22px; padding: 26px 26px 22px;
  box-shadow: 0 40px 80px -34px rgba(27,28,26,.28), 0 1px 0 rgba(27,28,26,.03);
  animation: wsFloat 7s ease-in-out infinite;
}
.v3 .sessionbox__text {
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
  padding: 12px 14px; border-radius: 10px; background: var(--cream); border-left: 3px solid #C9D9C8;
}
.v3 .sessionbox__check { color: var(--ink); }
.v3 .sessionbox__check .check__box { background: var(--green); color: #FFFFFF; border-color: var(--green); }

.v3 .sessionbox.is-live .tk { animation: tkIn 12s linear calc(var(--k, 0) * 60ms) infinite both; }
.v3 .sessionbox.is-live .sessionbox__text { animation: sbRead 12s ease-out infinite; }
.v3 .sessionbox.is-live .sessionbox__check .check__box { animation: sbTick 12s ease-out infinite; }
.v3 .sessionbox.is-live .sessionbox__check { animation: sbLine 12s ease-out infinite; }

/* each word arrives a moment after the one before it */
@keyframes tkIn { 0%, 10% { opacity: 0; } 10.6%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
/* a person reads the finished draft */
@keyframes sbRead {
  0%, 26% { background-color: var(--cream); border-left-color: #C9D9C8; }
  28%, 34% { background-color: var(--sage-tint); border-left-color: var(--green); }
  38%, 100% { background-color: var(--cream); border-left-color: #C9D9C8; }
}
/* then the tick lands */
@keyframes sbTick {
  0%, 34% { background: var(--white); color: rgba(255,255,255,0); transform: none; }
  36% { background: var(--green); color: #FFFFFF; transform: scale(1.2); }
  38%, 88% { background: var(--green); color: #FFFFFF; transform: none; }
  91%, 100% { background: var(--white); color: rgba(255,255,255,0); transform: none; }
}
@keyframes sbLine { 0%, 34% { color: var(--ink-mute); } 37%, 88% { color: var(--ink); } 91%, 100% { color: var(--ink-mute); } }

@media (max-width: 900px) {
  .v3 .sessionbox { padding: 20px 18px 18px; border-radius: 18px; animation: none; }
  .v3 .sessionbox__text { font-size: 15px; }
}
/* the small pill in the Training session box keeps its small size */
.v3 .pill--sm { font-size: 10.5px; letter-spacing: .1em; padding: 5px 10px; }
.v3 .sessionbox__head > span:first-child { white-space: nowrap; }

/* ---------------------------------------------------------------------
   ABOUT: the evening update, writing itself
   A 12 second loop. Each line arrives, then its status lands; once all four
   are in, the update shows as SENT. At rest the update is complete and sent.
   The portrait hero keeps its own proportions.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  .v3 .hero__inner--about { grid-template-columns: .82fr 1.18fr; }
  .v3 .hero--about { padding-block: 88px 104px; }
}
.v3 .worklist__h { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; }

.v3 .logbox--evening { border-radius: 18px; }
.v3 .logbox--evening .logbox__head { align-items: center; }
.v3 .ev__state { display: inline-grid; justify-items: end; }
.v3 .ev__s { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; }
.v3 .ev__s--writing { color: #E6B863; }
.v3 .ev__s--sent { color: var(--green-light); opacity: 1; }
.v3 .ev__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-light); display: inline-block; }
.v3 .ev__dot--amber { background: var(--amber); }
.v3 .ev__tag { display: inline-block; }

/* this log runs its own loop, so the shared line-by-line fade steps aside */
html.js .v3 .logbox--evening .logline { opacity: 1; animation: none; }

html.js .v3 .logbox--evening.is-live .logline--1 .ev__t { animation: evT1 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--2 .ev__t { animation: evT2 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--3 .ev__t { animation: evT3 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--4 .ev__t { animation: evT4 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--1 .ev__tag { animation: evG1 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--2 .ev__tag { animation: evG2 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--3 .ev__tag { animation: evG3 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .logline--4 .ev__tag { animation: evG4 12s ease-out infinite; }
html.js .v3 .logbox--evening.is-live .ev__s--writing { animation: evWriting 12s linear infinite; }
html.js .v3 .logbox--evening.is-live .ev__s--sent { animation: evSent 12s linear infinite; }

@keyframes evT1 { 0%, 5% { opacity: 0; transform: translateX(-8px); } 8%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evT2 { 0%, 19% { opacity: 0; transform: translateX(-8px); } 22%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evT3 { 0%, 33% { opacity: 0; transform: translateX(-8px); } 36%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evT4 { 0%, 47% { opacity: 0; transform: translateX(-8px); } 50%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evG1 { 0%, 11% { opacity: 0; transform: scale(.6); } 13% { opacity: 1; transform: scale(1.15); } 15%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evG2 { 0%, 25% { opacity: 0; transform: scale(.6); } 27% { opacity: 1; transform: scale(1.15); } 29%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evG3 { 0%, 39% { opacity: 0; transform: scale(.6); } 41% { opacity: 1; transform: scale(1.15); } 43%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes evG4 { 0%, 53% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.15); } 57%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
/* one status fades out before the other fades in */
@keyframes evWriting { 0%, 60% { opacity: 1; } 61.5%, 95.5% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes evSent { 0%, 61.5% { opacity: 0; } 63%, 93% { opacity: 1; } 94.5%, 100% { opacity: 0; } }
/* one divider above the caption, not two */
.v3 .ev__cap { border-top: 1px solid var(--line-dark); padding-top: 14px; margin-top: 4px; color: #9A988D; }