/* ══ PAYMENT PROTECTION ═════════════════════════════════════════════ 13 Oct 2026 (rp116), v4 ══
   Sir, 13 Oct: the polishing pass, in tab order, each page to 9.8 with Mason and the effects
   library, each page themed to its topic and still plainly Hyyryn.

   The page now stands on About's frame (hyyryn-company.css gives the tokens, the bar and the
   footer; hyyryn-buttons.css the three button weights) and no longer carries the 250 KB homeowner
   kit inline. v3 of this sheet (the kit's page) is retired with it.

   THE THEME IS SECURITY PRINT (Mason effects A36, new with this page): a page about money held
   wears what money wears: a guilloche rosette drawn under the statement, fine engraved lines on
   its paper, a microtext rule, a serial, an ink stamp. Navy ink, gold print, green for money that
   has gone where it should, claret only for "no". Paper for every record; navy once, for the band
   about things going wrong.

   EFFECTS, by their library entries: A36 security print (the rosette and the statement's paper),
   A25 the statement's title block, T32 the regulator line, T25 marks to the sources and back,
   M9 the pinned drawing and T31 the money's path (the one expressive moment), A16 the junction
   drawn once, A17 callouts on the photographs, A3 the ruled tables, A6 folios, G23 paper.

   THE GRID is the bar page's: one gutter (--gut-l, --gut-r), no centred boxes, words in ch, and
   one split for every band's head (5 to 7), so one line runs down the page (Mason 59.1). */
:root {
  --pp-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
  --pp-print: rgba(131, 99, 44, .26);
  --pp-print-2: rgba(10, 22, 40, .10);
  --pp-paper-edge: rgba(10, 22, 40, .10);
  --pp-held: #D4A943;
  --pp-held-ink: #6E5222;
  --pp-go: #0F5A4F;
  --pp-go-hi: #2E8B6F;
  --pp-back: #1F6A58;
  --pp-no: #8E2A2A;
  --pp-no-soft: rgba(142, 42, 42, .08);
  --pp-frost: rgba(214, 226, 240, .55);
  --pp-navy-glass: rgba(10, 22, 40, .72);
  --pp-scrim: linear-gradient(0deg, rgba(10, 22, 40, .94) 0%, rgba(10, 22, 40, .72) 38%, rgba(10, 22, 40, .12) 78%, rgba(10, 22, 40, 0) 100%);
  --pp-split: minmax(0, 5fr) minmax(0, 7fr);
  --pp-band: clamp(64px, 7.5vw, 112px);
  --pp-t-quick: 180ms; --pp-t-mid: 420ms; --pp-t-slow: 900ms; --pp-t-draw: 1600ms;
}

html { scroll-padding-top: 96px; }
.pp { overflow: clip; }
:where(.pp) a { color: var(--navy); text-underline-offset: 3px; }

/* ── type ── */
.pp-k, .pp-sk { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pp-k::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.pp-sk.is-light { color: var(--gold-hi); }
.pp-fo { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.pp-fo::before { content: attr(data-fo) / ""; font-family: var(--serif-display); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--gold); }
.pp-fo::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.pp-fo.is-light::before { color: var(--gold-hi); }
.pp-h1 { margin: 14px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(40px, 5vw, 70px); line-height: 1.02; letter-spacing: -.012em; color: var(--navy); text-wrap: balance; max-width: 15ch; }
.pp-h2 { margin: 12px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.07; letter-spacing: -.006em; color: var(--navy); text-wrap: balance; max-width: 20ch; }
.pp-h2.is-light { color: var(--cream); }
.pp-h3 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--navy); }
.pp-p { margin: 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.65; color: var(--muted-2); max-width: 58ch; }
.pp-head { display: grid; grid-template-columns: var(--pp-split); column-gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: clamp(30px, 3.4vw, 52px); }
.pp-head > .pp-sk, .pp-head > .pp-h2 { grid-column: 1; }
.pp-head > .pp-p { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-left: 22px; border-left: 2px solid var(--gold-soft); }

/* ── T25: marks to the sources, and the arrow back ── */
.pp-fn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin: 0 1px 0 4px; padding: 0 4px;
  border-radius: 999px; vertical-align: .55em; font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: 0;
  color: var(--gold-ink); background: var(--gold-tint); box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .32); text-decoration: none;
  transition: background-color var(--pp-t-quick), color var(--pp-t-quick); }
@media (max-width: 760px) { .pp-fn { font-size: 12px; } }  /* rp200 phone floor, was 9.5px */
.pp-fn::after { content: ''; position: absolute; inset: -6px; }
.pp-fn:hover, .pp-fn:focus-visible { background: var(--gold-ink); color: var(--cream); }
.pp-fn.is-light { color: var(--navy); background: var(--gold-hi); box-shadow: none; }
.pp-fn.is-light:hover, .pp-fn.is-light:focus-visible { background: var(--cream); }
:target { scroll-margin-top: 110px; }

/* ── buttons: the site's three weights (hyyryn-buttons.css), squared off as the family's are ── */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background var(--pp-t-quick) ease, color var(--pp-t-quick) ease, box-shadow var(--pp-t-quick) ease, transform 220ms cubic-bezier(.4, 0, .2, 1); }
.pp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-quick); }
.pp-btn { position: relative; isolation: isolate; }
.pp-btn.is-solid::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-solid, var(--navy)); transition: opacity var(--pp-t-quick); }
.pp-btn.is-solid:hover::before { background: var(--btn-solid-hi, var(--navy-2)); }
.pp-btn.is-solid { background-color: var(--navy); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(10, 22, 40, .18), 0 12px 24px -12px rgba(10, 22, 40, .5); }
.pp-btn.is-solid:hover { transform: translateY(-1px); }
.pp-btn.is-solid:hover svg { transform: translateY(2px); }
.pp-btn.is-glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 58%, #F4F1E8 100%); transition: opacity var(--pp-t-quick); }
.pp-btn.is-glass:hover::before { opacity: 0; }
.pp-btn.is-glass { color: var(--navy); background-color: #FCFBF8;
  box-shadow: inset 0 0 0 1px var(--navy), inset 0 1px 0 rgba(255, 255, 255, .92), 0 1px 2px rgba(10, 22, 40, .14), 0 12px 24px -12px rgba(10, 22, 40, .38); }
.pp-btn.is-glass:hover { background-color: var(--navy); color: var(--cream); transform: translateY(-1px); }
.pp-btn.is-quiet { color: var(--navy); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--btn-ring-quiet, rgba(10, 22, 40, .34)); }
.pp-btn.is-quiet:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--navy), 0 10px 20px -14px rgba(10, 22, 40, .4); transform: translateY(-1px); }
.pp-btn.is-sm { min-height: 40px; padding: 0 18px; }
.pp-btn:active { transform: scale(.98); }
.pp-btn:focus-visible, .pp a:focus-visible, .pp [tabindex]:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ══ 1 · THE STATEMENT ══ */
.pp-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 88px);
  padding: clamp(28px, 3vw, 44px) var(--gut-r) 0 var(--gut-l); align-items: start; }
.pp-hero-ground { position: absolute; z-index: -1; top: 80px; right: max(0px, calc(46vw - 440px)); width: min(56vw, 880px); aspect-ratio: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); }
.pp-rosette { width: 100%; height: 100%; overflow: hidden; }
.pp-rosette path { fill: none; stroke: var(--pp-print); stroke-width: .6; }
.pp-rosette path:nth-child(2n) { stroke: var(--pp-print-2); }
/* drawn once: the dash exists only while it draws, so the finished line is whole in every engine */
html.pp-rise .pp-rosette:not(.is-in) path { stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1); }
html.pp-rise .pp-rosette.is-in path { animation: pp-draw 3.2s cubic-bezier(.45, 0, .2, 1) backwards; }
html.pp-rise .pp-rosette.is-in path:nth-child(2) { animation-delay: .25s; }
html.pp-rise .pp-rosette.is-in path:nth-child(3) { animation-delay: .5s; }
html.pp-rise .pp-rosette.is-in path:nth-child(4) { animation-delay: .75s; }
/* --len is each path's own length, measured by the script; a path drawn in the markup with pathLength="1"
   falls back to 1, which pathLength scales to the whole path */
@keyframes pp-draw { from { stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1); } to { stroke-dasharray: var(--len, 1); stroke-dashoffset: 0; } }

.pp-hero-tx { grid-column: 1; padding-top: clamp(4px, 1vw, 14px); }
.pp-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(22px, 3vw, 40px); font-size: 12px; color: var(--muted); }
.pp-crumb a { color: var(--muted-2); text-decoration: none; }
.pp-crumb a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.pp-crumb [aria-current] { color: var(--navy); }
.pp-lede { margin: 22px 0 0; font-family: var(--serif); font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.62; color: var(--ink); max-width: 54ch; }
.pp-short { list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); max-width: 680px; }
.pp-short li { display: grid; gap: 4px; padding: 16px 18px 16px 0; }
.pp-short li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.pp-short .k { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .pp-short .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-short b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.1; color: var(--navy); }
.pp-short small { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }
.pp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.pp-for { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.pp-for a { color: var(--navy); text-underline-offset: 3px; }

/* the statement: paper, a title block, engraved lines, a perforated head */
.pp-stmt { grid-column: 2; grid-row: 1 / span 2; margin: 6px 0 0; position: relative; width: 100%; max-width: 760px; justify-self: end; }
.pp-stmt-paper { position: relative; background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 9 C 15 1, 15 17, 30 9 S 45 1, 60 9 S 75 17, 90 9 S 105 1, 120 9' fill='none' stroke='rgba(131,99,44,0.10)' stroke-width='.7'/%3E%3C/svg%3E");
  background-size: 120px 18px;
  padding: 34px clamp(22px, 2.6vw, 38px) 26px; box-shadow: 0 0 0 1px var(--pp-paper-edge), var(--lift-deep);
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
          mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 18px 100% repeat-x; }
.pp-stmt-paper::before { content: ''; position: absolute; left: clamp(22px, 2.6vw, 38px); right: clamp(22px, 2.6vw, 38px); top: 14px; height: 2px; background: var(--navy); }
.pp-stmt-tag { position: absolute; top: 18px; right: clamp(22px, 2.6vw, 38px); margin: 0; padding: 6px 10px; background: var(--pp-held); color: var(--navy); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-stmt-tag { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-stmt-head { padding-top: 14px; }
.pp-stmt-who { margin: 0; display: grid; gap: 4px; padding-right: 140px; }
.pp-stmt-who b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); color: var(--navy); line-height: 1.1; }
.pp-stmt-who span { font-size: 12.5px; color: var(--muted-2); }
.pp-stmt-block { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); }
.pp-stmt-block div { padding: 8px 12px; }
.pp-stmt-block div + div { border-left: 1px solid var(--line-2); }
.pp-stmt-block dt { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .pp-stmt-block dt { font-size: 10.5px; } }  /* rp200 phone floor, was 9px */
.pp-stmt-block dd { margin: 3px 0 0; font-family: var(--serif); font-size: 15px; color: var(--navy); }
.pp-stmt-block .mono, .pp-stmt-rows time { font-family: var(--pp-mono); font-size: 12px; letter-spacing: .02em; }
.pp-stmt-rows { list-style: none; margin: 16px 0 0; padding: 0; }
.pp-stmt-rows li { display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.pp-stmt-rows time { color: var(--muted-2); }
.pp-stmt-rows span { font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--ink); }
.pp-stmt-rows b { font-family: var(--serif-display); font-weight: 400; font-size: 18px; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-stmt-rows b.in { color: var(--pp-held-ink); }
.pp-stmt-rows b.out { color: var(--pp-go); }
.pp-stmt-rows em { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-held-ink); padding: 4px 8px; background: var(--gold-tint); }
@media (max-width: 760px) { .pp-stmt-rows em { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-stmt-rows em.go { color: var(--pp-go); background: var(--green-soft); }
/* every arrival animates FROM its waiting state to the element's own style (fill backwards), so a
   finished animation leaves nothing behind for a capture or a print to trip on */
html.pp-rise .pp-stmt-rows:not(.is-in) li { opacity: 0; }
html.pp-rise .pp-stmt-rows.is-in li { animation: pp-row var(--pp-t-mid) var(--ease-stone) backwards; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
@keyframes pp-row { from { opacity: 0; transform: translateY(6px); } }
.pp-stmt-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding-top: 18px; }
.pp-stmt-foot .k { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 760px) { .pp-stmt-foot .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-stmt-foot .sum { font-family: var(--serif-display); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); color: var(--navy); }
.pp-stamp { justify-self: center; padding: 7px 14px; border: 2px solid var(--pp-go); outline: 1px solid var(--pp-go); outline-offset: 3px; color: var(--pp-go);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transform: rotate(-5deg); mix-blend-mode: multiply; opacity: .9; }
html.pp-rise .pp-stmt-rows:not(.is-in) ~ .pp-stmt-foot .pp-stamp { opacity: 0; }
html.pp-rise .pp-stmt-rows.is-in ~ .pp-stmt-foot .pp-stamp { animation: pp-stamp 380ms cubic-bezier(.3, 1.4, .5, 1) 1.5s backwards; }
@keyframes pp-stamp { from { opacity: 0; transform: rotate(-5deg) scale(1.18); } }
.pp-micro { margin: 16px 0 0; height: 9px; overflow: hidden; white-space: nowrap; }
.pp-micro::before { content: 'PAYMENT PROTECTION \00B7 HELD AT STRIPE \00B7 JOB 1042 \00B7 PAYMENT PROTECTION \00B7 HELD AT STRIPE \00B7 JOB 1042 \00B7 PAYMENT PROTECTION \00B7 HELD AT STRIPE \00B7 JOB 1042 \00B7 PAYMENT PROTECTION \00B7 HELD AT STRIPE \00B7 JOB 1042 \00B7 PAYMENT PROTECTION \00B7 HELD AT STRIPE \00B7 JOB 1042 \00B7 ' / "";
  font-family: var(--sans); font-size: 6px; font-weight: 600; letter-spacing: .32em; color: rgba(131, 99, 44, .55); }
.pp-stmt-cap { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-2); max-width: 60ch; }

/* T32: the regulator line, under the hero, the width of the page */
.pp-reg { grid-column: 1 / -1; margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line-2); }
.pp-reg-i { margin: 0; padding: 18px 26px 20px 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink); }
.pp-reg-i + .pp-reg-i { padding-left: 26px; border-left: 1px solid var(--line); }
.pp-reg-i .k { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .pp-reg-i .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-reg-a { display: inline-block; margin-top: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pp-reg-a:hover { color: var(--gold-ink); }

/* ══ 2 · IS, AND IS NOT ══ */
.pp-isnot { margin-top: var(--pp-band); display: grid; grid-template-columns: var(--pp-split); min-height: clamp(460px, 40vw, 600px); background: var(--cream-2); }
.pp-isnot-ph { position: relative; isolation: isolate; display: flex; align-items: flex-end; background-color: var(--navy); }
.pp-isnot-ph::after { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../bg-locksmith.jpg') 42% 50% / cover no-repeat; background-image: image-set(url('photos/bg-locksmith-800.webp') type('image/webp'), url('../bg-locksmith.jpg') type('image/jpeg')); }
.pp-isnot-ph::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pp-scrim); }
.pp-isnot-cap { position: relative; padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 44px) var(--gut-l); }
.pp-isnot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding: clamp(36px, 4vw, 64px) var(--gut-r) clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); align-content: center; }
.pp-list-h { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-family: var(--serif-display); font-size: 26px; color: var(--pp-go); }
.pp-list-h svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-list-h.is-not { color: var(--pp-no); }
.pp-is ul, .pp-isn ul { list-style: none; margin: 0; padding: 0; }
.pp-is li, .pp-isn li { padding: 14px 0 14px 18px; border-top: 1px solid var(--line-2); font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--muted-2); position: relative; }
.pp-is li::before, .pp-isn li::before { content: ''; position: absolute; left: 0; top: 23px; width: 7px; height: 7px; background: var(--pp-go); }
.pp-isn li::before { background: none; border: 1.5px solid var(--pp-no); width: 6px; height: 6px; }
.pp-is li b, .pp-isn li b { display: block; font-weight: 400; color: var(--navy); font-size: 16.5px; margin-bottom: 2px; }
.pp-isn li a { color: var(--navy); text-underline-offset: 3px; }

/* ══ 3 · WHERE THE MONEY IS: a drawing pinned while the steps pass (M9, T31) ══ */
.pp-where { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-scrolly { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4.5vw, 80px); }
.pp-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0 0 12vh; counter-reset: none; }
.pp-map-wrap { grid-column: 2; grid-row: 1; }
.pp-step { position: relative; min-height: 34vh; padding: 26px 0 26px 64px; border-top: 1px solid var(--line-2); outline: none; }
.pp-step:first-child { min-height: 30vh; }
.pp-step .n { position: absolute; left: 0; top: 24px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--paper);
  font-family: var(--serif-display); font-size: 19px; color: var(--muted); transition: background var(--pp-t-mid), color var(--pp-t-mid), border-color var(--pp-t-mid); }
.pp-step.is-alt .n { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-step.is-alt .n { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-step h3 { margin: 6px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; color: var(--muted-2); transition: color var(--pp-t-mid); }
.pp-step p { margin: 12px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.62; color: var(--muted-2); max-width: 52ch; }
.pp-step p a { color: var(--navy); text-underline-offset: 3px; }
.pp-twin { font-family: var(--sans) !important; font-size: 12.5px !important; line-height: 1.55 !important; padding: 10px 12px; background: var(--cream-2); border-left: 2px solid var(--line-2); }
.pp-twin b { font-weight: 600; color: var(--navy); }
.pp-step.is-on .n { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.pp-step.is-on h3 { color: var(--navy); }
.pp-step.is-on .pp-twin { border-left-color: var(--pp-held); }
.pp-step.is-alt.is-on .n { background: var(--pp-no); border-color: var(--pp-no); }

.pp-map { position: sticky; top: calc(var(--bar) + 6vh); margin: 0; padding: clamp(26px, 2.6vw, 40px); background: var(--navy); color: var(--cream);
  display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.35fr) 46px minmax(0, 1fr); align-items: center; row-gap: 22px;
  box-shadow: var(--lift-deep); }
.pp-map::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(250, 248, 243, .08) 1px, transparent 1.2px); background-size: 16px 16px; }
.pp-acc { position: relative; display: grid; gap: 6px; padding: 18px 16px; min-height: 150px; align-content: start; border: 1px solid var(--on-navy-line); background-color: var(--navy-2);
  transition: border-color var(--pp-t-mid), background-color var(--pp-t-mid), box-shadow var(--pp-t-mid); }
.pp-acc .k { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-3); }
.pp-acc b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.15; color: var(--cream); }
.pp-acc small { font-size: 12px; color: var(--on-navy-3); line-height: 1.45; }
.pp-acc.is-held { min-height: 200px; padding: 20px; border-color: rgba(212, 169, 67, .5); background-color: var(--navy-2); isolation: isolate; }
.pp-acc.is-held::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(212, 169, 67, .12), rgba(212, 169, 67, .02)); transition: opacity var(--pp-t-mid); }
.pp-map[data-step="6"] .pp-acc.is-held::before { background: repeating-linear-gradient(135deg, rgba(214, 226, 240, .10) 0 6px, rgba(214, 226, 240, .02) 6px 12px); }
.pp-coin { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; padding: 8px 14px; background: var(--pp-held); color: var(--navy);
  font-family: var(--serif-display); font-size: 24px; box-shadow: 0 10px 24px -10px rgba(212, 169, 67, .7); transition: transform var(--pp-t-slow) var(--ease-stone), opacity var(--pp-t-mid); }
.pp-state { justify-self: start; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 5px 9px; border: 1px solid rgba(212, 169, 67, .55); color: var(--gold-hi); transition: color var(--pp-t-mid), border-color var(--pp-t-mid); }
.pp-held-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pp-held-row .pp-coin { margin-top: 0; }
.pp-ring { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity var(--pp-t-mid), transform var(--pp-t-mid) var(--ease-stone); }
.pp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pp-ring circle { fill: none; stroke: rgba(250, 248, 243, .14); stroke-width: 3; }
.pp-ring circle.v { stroke: var(--pp-held); stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s linear; }
.pp-ring em { background-color: var(--navy-2); padding: 1px 2px; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--cream); text-align: center; line-height: 1.1; max-width: 44px; }
.pp-pipe { position: relative; height: 2px; background: rgba(250, 248, 243, .14); }
.pp-pipe i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 30%, var(--pp-held) 30% 70%, transparent 70%) 0 0 / 22px 2px repeat-x; opacity: 0; transition: opacity var(--pp-t-mid); }
.pp-pipe::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(250, 248, 243, .3); border-right: 0; }
.pp-fee { justify-self: start; font-size: 11.5px; line-height: 1.4; color: var(--gold-hi); max-height: 0; opacity: 0; overflow: hidden; transition: opacity var(--pp-t-mid), max-height var(--pp-t-mid); }
.pp-map-can { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 14px 16px; background: rgba(250, 248, 243, .05); border-left: 2px solid var(--pp-held); }
.pp-map-can .k { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.pp-map-can b { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--cream); }
.pp-map[data-step="6"] .pp-map-can { border-left-color: #DCE6F2; }
.pp-map[data-step="5"] .pp-map-can { border-left-color: var(--pp-go-hi); }
.pp-map-rec { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--on-navy-line); font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--on-navy-2); }
.pp-map-rec span { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); margin-right: 8px; }

/* the states: each step sets the drawing */
.pp-map[data-step="1"] .is-card, .pp-map[data-step="2"] .is-card { border-color: rgba(250, 248, 243, .5); }
.pp-map[data-step="1"] .is-in i { opacity: 1; animation: pp-flow 1.1s linear 3; }
.pp-map[data-step="2"] .is-in i { opacity: .7; animation: pp-flow 1.1s linear 3 reverse; }
.pp-map[data-step="2"] .is-in::after { border-left-color: rgba(212, 169, 67, .4); }
.pp-map[data-step="4"] .pp-ring { opacity: 1; transform: none; }
.pp-map[data-step="4"] .pp-ring circle.v { stroke-dashoffset: .42; }
.pp-map[data-step="5"] .is-out i { opacity: 1; animation: pp-flow 1.1s linear 3; background-image: linear-gradient(90deg, transparent 0 30%, var(--pp-go-hi) 30% 70%, transparent 70%); }
.pp-map[data-step="5"] .pp-fee { opacity: 1; max-height: 40px; }
.pp-map[data-step="5"] .is-trade { border-color: rgba(46, 139, 111, .8); background-color: #10303A; }
.pp-map[data-step="5"] .pp-coin { background: transparent; color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(212, 169, 67, .6); }
.pp-map[data-step="5"] .pp-state { color: #8FD3B8; border-color: rgba(143, 211, 184, .6); }
.pp-map[data-step="6"] .is-held { border-color: rgba(214, 226, 240, .7); }
.pp-map[data-step="6"] .pp-state { color: #DCE6F2; border-color: rgba(220, 230, 242, .7); }
.pp-map[data-step="6"] .pp-pipe { opacity: .4; }
/* three passes, then still: nothing on the page moves for more than five seconds unasked (WCAG 2.2.2) */
@keyframes pp-flow { to { background-position: 22px 0; } }

/* ══ 4 · EVERY WAY OUT: a junction, drawn once (A16) ══ */
.pp-ways { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-junc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(180px, 3fr) minmax(0, 4fr); align-items: stretch; }
.pp-junc-col { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 12px; }
.pp-junc-col li { display: grid; gap: 4px; align-content: center; padding: 16px 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); cursor: default; outline: none;
  transition: box-shadow var(--pp-t-quick), transform var(--pp-t-quick) var(--ease-quick), background-color var(--pp-t-quick); }
.pp-junc-col .k { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-junc-col .k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-junc-col b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; color: var(--navy); }
.pp-junc-col small { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.pp-junc-col.is-back .k { color: var(--pp-back); }
.pp-junc-col.is-to .k { color: var(--gold); }
.pp-junc-col.is-back li { border-left: 3px solid var(--pp-back); }
.pp-junc-col.is-to li { border-right: 3px solid var(--pp-held); text-align: right; }
.pp-junc-col li.is-on { box-shadow: 0 0 0 1px var(--navy), var(--lift); transform: translateY(-1px); background: #FFFFFF; }
.pp-junc-mid { position: relative; display: grid; place-items: center; min-height: 100%; }
.pp-junc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp-junc-svg path { fill: none; stroke-width: 1.6; transition: stroke-width var(--pp-t-quick), opacity var(--pp-t-quick); }
.pp-junc-svg path[data-line^="b"] { stroke: var(--pp-back); }
.pp-junc-svg path[data-line^="t"] { stroke: var(--pp-held); }
html.pp-rise .pp-junc:not(.is-in) .pp-junc-svg path { stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1); }
html.pp-rise .pp-junc.is-in .pp-junc-svg path { animation: pp-draw var(--pp-t-draw) var(--ease-stone) backwards; }
.pp-junc.has-on .pp-junc-svg path { opacity: .25; }
.pp-junc.has-on .pp-junc-svg path.is-on { opacity: 1; stroke-width: 3; }
.pp-junc-held { position: relative; z-index: 1; display: grid; gap: 4px; text-align: center; padding: 18px 16px; background: var(--navy); color: var(--cream); box-shadow: var(--lift-deep); max-width: 180px; }
.pp-junc-held .k { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
@media (max-width: 760px) { .pp-junc-held .k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-junc-held b { font-family: var(--serif-display); font-weight: 400; font-size: 22px; }
.pp-junc-held small { font-size: 11.5px; line-height: 1.4; color: var(--on-navy-2); }
@media (max-width: 760px) { .pp-junc-held small { font-size: 12px; } }  /* rp200 phone floor, was 11.5px */
.pp-ways-foot { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding-top: 22px; border-top: 1px solid var(--line-2); }
.pp-ways-foot p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--muted-2); max-width: 62ch; }
.pp-ways-foot b { font-weight: 400; color: var(--navy); }

/* ══ 5 · THE PHOTOGRAPHS (A17) AND THE FINGERPRINT ══ */
.pp-photos { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: start; }
.pp-shot { margin: 0; }
.pp-shot-img { position: relative; aspect-ratio: 3 / 2; background: var(--navy) url('../bg-kitchen-bath.jpg') 50% 50% / cover no-repeat; background-image: image-set(url('photos/bg-kitchen-bath-800.webp') type('image/webp'), url('../bg-kitchen-bath.jpg') type('image/jpeg')); box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--line-2), var(--lift-hi); }
/* rp128, Sir 14 Oct 2026: the start is its own photograph now, the same kitchen before the work (made for
   this page with AI from the finish, same camera and framing), where it used to be the finish greyed out */
.pp-shot.is-start .pp-shot-img { background-image: url('photos/pp-start-kitchen-1200.webp');
  background-image: image-set(url('photos/pp-start-kitchen-800.webp') 1x, url('photos/pp-start-kitchen-1200.webp') 2x); }
.pp-shot-lab { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--paper); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 760px) { .pp-shot-lab { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-shot-ex { position: absolute; right: 10px; top: 10px; padding: 5px 9px; background-color: var(--navy); color: var(--cream); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-shot-ex { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
/* rp128 (Sir, 14 Oct 2026): the before is the whole kitchen in need of the work, not two parts of it. Six parts
   cannot carry six labels on a phone, so each photograph carries numbered marks at the same parts of the room and
   the words sit under the pair, part by part (.pp-work). Dashed gold is still to be done; solid green is done. */
.pp-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; font: 600 12px/1 var(--sans); color: var(--navy);
  background: rgba(250, 248, 243, .95); border: 2px dashed var(--pp-held-ink);
  box-shadow: 0 0 0 4px rgba(212, 169, 67, .3), 0 2px 8px rgba(10, 22, 40, .28); }
.is-finish .pp-pin { color: var(--pp-go); border: 2px solid var(--pp-go); box-shadow: 0 0 0 4px rgba(46, 139, 111, .32), 0 2px 8px rgba(10, 22, 40, .28); }
html.pp-rise .pp-pair:not(.is-in) .pp-pin { opacity: 0; }
html.pp-rise .pp-pair.is-in .pp-pin { animation: pp-call var(--pp-t-mid) var(--ease-stone) backwards; animation-delay: calc(700ms + var(--i, 0) * 90ms); }
@keyframes pp-call { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
html.pp-rise .pp-pair.is-in .is-finish .pp-pin { animation-delay: calc(1250ms + var(--i, 0) * 90ms); }
/* the parts, as the two sets fix them */
.pp-work { width: 100%; margin: 34px 0 0; border-collapse: collapse; }
.pp-work caption { caption-side: top; text-align: left; padding: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 760px) { .pp-work caption { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-work th, .pp-work td { padding: 12px 16px 12px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--line-2); }
.pp-work thead th { padding-top: 0; padding-bottom: 10px; border-top: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pp-work tbody th { font-family: var(--serif-display); font-weight: 400; font-size: 18px; color: var(--navy); white-space: nowrap; }
.pp-work td { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.pp-work td.go { color: var(--pp-go); }
.pp-work td.n { width: 40px; }
.pp-work td.n span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--pp-held-ink);
  font: 600 11px/1 var(--sans); color: var(--navy); vertical-align: middle; }
.pp-shot figcaption { padding: 22px 4px 0; }
.pp-shot figcaption .t { margin: 0; font-family: var(--serif-display); font-size: 22px; color: var(--navy); }
.pp-shot figcaption p { margin: 8px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted-2); max-width: 54ch; }
.pp-shot-fp { display: flex; align-items: center; gap: 10px; }
.pp-shot-fp .k, .pp-try-row .k { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .pp-shot-fp .k, .pp-try-row .k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-shot-fp code, .pp-try-row code { font-family: var(--pp-mono); font-size: 12.5px; color: var(--navy); padding: 4px 8px; background: var(--cream-2); }
.pp-pair-mid { align-self: center; margin-top: -60px; position: relative; height: 1px; background: var(--line-2); }
.pp-pair-mid span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 10px; background: var(--cream); border: 1px solid var(--line-2); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.pp-pair-note { margin: 22px 0 0; font-size: 12.5px; color: var(--muted-2); }
.pp-contest { margin-top: 30px; display: grid; grid-template-columns: var(--pp-split); column-gap: clamp(28px, 4vw, 72px); padding: 24px 26px; background: var(--pp-no-soft); border-left: 3px solid var(--pp-no); }
.pp-contest-k { margin: 0; font-family: var(--serif-display); font-size: 24px; color: var(--pp-no); }
.pp-contest p:last-child { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 64ch; }

.pp-print { margin-top: clamp(48px, 5vw, 76px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 72px); align-items: start; }
.pp-print-tx p:not(.pp-sk) { margin: 14px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.65; color: var(--muted-2); max-width: 62ch; }
.pp-try { padding: 22px 24px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2), var(--lift); display: grid; gap: 10px; }
.pp-try-k { margin: 0; justify-self: start; padding: 5px 10px; background: var(--pp-held); color: var(--navy); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-try-k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-try-l { font-size: 12px; color: var(--muted-2); }
.pp-try-in { width: 100%; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #FFFFFF; font-family: var(--serif); font-size: 15px; color: var(--navy); }
.pp-try-in:focus { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.pp-try-row { margin: 0; display: grid; gap: 4px; }
.pp-try-row code { word-break: break-all; line-height: 1.6; font-size: 12px; }
.pp-try-row code .x { color: var(--pp-no); background: rgba(142, 42, 42, .12); }
.pp-try-say { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--pp-go); background: var(--green-soft); border-left: 3px solid var(--pp-go); }
.pp-try-say.is-no { color: var(--pp-no); background: var(--pp-no-soft); border-left-color: var(--pp-no); }
.pp-try [data-reset] { justify-self: start; }

/* ══ 6 · EVERY CLOCK: a scale drawn to time, and a ruled table (A3) ══ */
.pp-clocks { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-scale { position: relative; height: 120px; margin: 0 8px 18px; }
.pp-scale-axis { position: absolute; left: 0; right: 0; top: 60px; height: 2px; background: var(--navy); }
.pp-scale-axis i { position: absolute; left: calc(var(--t) * 100%); top: 10px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pp-scale-axis i::before { content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 8px; background: var(--navy); }
.pp-tick { position: absolute; left: calc(var(--t) * 100%); top: 6px; transform: translateX(-50%); padding: 5px 9px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--navy);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); white-space: nowrap; transition: background var(--pp-t-quick), color var(--pp-t-quick), box-shadow var(--pp-t-quick); }
.pp-tick::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 26px; background: var(--line-2); }
.pp-tick.is-lo { top: 86px; }
.pp-tick.is-end { transform: translateX(-88%); }
html.pp-rise .pp-scale.is-in .pp-tick.is-end { animation-name: pp-tick-end; }
@keyframes pp-tick-end { from { opacity: 0; transform: translate(-88%, 6px); } }
.pp-tick.is-end::after { left: 88%; }
.pp-scale-range { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); top: -3px; height: 8px; background: var(--pp-held); }
.pp-tick.is-lo::after { top: auto; bottom: 100%; height: 22px; }
.pp-tick.is-on { background: var(--navy); color: var(--cream); box-shadow: 0 0 0 1px var(--navy); }
.pp-tick.is-on::after { background: var(--navy); }
html.pp-rise .pp-scale:not(.is-in) .pp-tick { opacity: 0; transform: translate(-50%, 6px); }
html.pp-rise .pp-scale.is-in .pp-tick { animation: pp-tick var(--pp-t-mid) var(--ease-stone) backwards; animation-delay: calc(var(--t) * 900ms + 100ms); }
@keyframes pp-tick { from { opacity: 0; transform: translate(-50%, 6px); } }
html.pp-rise .pp-scale:not(.is-in) .pp-scale-axis { transform: scaleX(0); }
.pp-scale-axis { transform-origin: 0 50%; transition: transform var(--pp-t-draw) var(--ease-stone); }
.pp-table-wrap { background: var(--paper); box-shadow: 0 0 0 1px var(--line-2), var(--lift); }
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th, .pp-table td { text-align: left; vertical-align: top; padding: 16px 20px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.pp-table thead th { border-top: 0; border-bottom: 2px solid var(--navy); padding-top: 18px; padding-bottom: 12px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.pp-table tbody th { width: 24%; font-weight: 400; }
.pp-table tbody th b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: 22px; color: var(--navy); line-height: 1.1; margin-bottom: 2px; }
.pp-table tbody tr { outline: none; transition: background-color var(--pp-t-quick); }
.pp-table tbody tr:hover, .pp-table tbody tr.is-on, .pp-table tbody tr:focus-visible { background: var(--gold-tint); }
.pp-table td:last-child { color: var(--navy); }
.pp-table-note { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted-2); }

/* ══ 7 · IF IT GOES WRONG: the one navy band, a case docket ══ */
.pp-wrong { margin-top: var(--pp-band); background: var(--navy); color: var(--cream); position: relative; isolation: isolate; }
.pp-wrong::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(250, 248, 243, .06) 1px, transparent 1.2px); background-size: 18px 18px; }
.pp-wrong-in { padding: var(--pp-band) var(--gut-r) var(--pp-band) var(--gut-l); }
.pp-fears { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 14px; }
.pp-fear { padding: 24px 26px; background-color: var(--navy-2); border: 1px solid var(--on-navy-line); }
.pp-fear { position: relative; isolation: isolate; }
.pp-fear.is-first::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(212, 169, 67, .12), rgba(212, 169, 67, .02)); }
.pp-fear.is-first { border-color: rgba(212, 169, 67, .5); background-color: var(--navy-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 26px; }
.pp-fear.is-first > *:not(.pp-refund) { grid-column: 1; }
.pp-fear .k { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
@media (max-width: 760px) { .pp-fear .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-fear h3 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.18; color: var(--cream); }
.pp-fear p:not(.k):not(.pp-refund) { margin: 12px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--on-navy-2); }
.pp-refund { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 18px 20px 16px; background: var(--paper); color: var(--navy); display: grid; gap: 4px; min-width: 190px;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; transform: rotate(1.5deg); }
.pp-refund .k { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-back); }
@media (max-width: 760px) { .pp-refund .k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pp-refund b { font-family: var(--serif-display); font-weight: 400; font-size: 32px; color: var(--pp-back); }
.pp-refund small { font-size: 11px; color: var(--muted); padding-bottom: 6px; }
@media (max-width: 760px) { .pp-refund small { font-size: 12px; } }  /* rp200 phone floor, was 11px */

.pp-docket { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: var(--pp-split); column-gap: clamp(28px, 4vw, 72px); }
.pp-docket-h { grid-column: 1 / -1; margin: 0 0 18px; font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); color: var(--cream); }
.pp-docket-l { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.pp-docket-l::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: linear-gradient(90deg, var(--pp-no) 0 4%, var(--gold-soft) 4% 100%); transform-origin: 0 50%; transition: transform var(--pp-t-draw) var(--ease-stone); }
html.pp-rise .pp-docket:not(.is-in) .pp-docket-l::before { transform: scaleX(0); }
.pp-docket-l li { position: relative; padding: 0 22px 0 0; }
.pp-docket-l .d { display: inline-block; position: relative; z-index: 1; padding: 6px 10px; background: var(--navy); border: 1px solid var(--gold-soft); color: var(--gold-hi); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 760px) { .pp-docket-l .d { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-docket-l li:first-child .d { border-color: var(--pp-no); color: #F2C4C4; }
.pp-docket-l b { display: block; margin-top: 16px; font-family: var(--serif-display); font-weight: 400; font-size: 21px; color: var(--cream); }
.pp-docket-l p { margin: 8px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--on-navy-2); }
.pp-outs { grid-column: 1 / -1; margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-outs p { margin: 0; padding: 16px 18px; border: 1px dashed rgba(250, 248, 243, .28); font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--on-navy-2); }
.pp-out-s { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.pp-outs p:nth-child(1) .pp-out-s { color: var(--gold-hi); }
.pp-outs p:nth-child(2) .pp-out-s { color: #8FD3B8; }
.pp-who { margin-top: clamp(40px, 4vw, 64px); padding-top: 30px; border-top: 1px solid var(--on-navy-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.pp-who .k { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
@media (max-width: 760px) { .pp-who .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-who h3 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--cream); }
.pp-who p, .pp-who li { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--on-navy-2); }
.pp-who p { margin: 10px 0 0; }
.pp-who ul { margin: 12px 0 0; padding: 0; list-style: none; }
.pp-who li { padding: 7px 0 7px 18px; position: relative; border-bottom: 1px solid var(--on-navy-line); }
.pp-who li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--gold-soft); }
.pp-who a { color: var(--cream); text-underline-offset: 3px; text-decoration-color: rgba(212, 169, 67, .7); }

/* ══ 8 · WHAT IT COSTS, AND HOW A TRADESPERSON IS PAID ══ */
.pp-cost { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-cost-grid { display: grid; grid-template-columns: var(--pp-split); column-gap: clamp(28px, 4vw, 72px); align-items: stretch; }
.pp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; box-shadow: 0 0 0 1px var(--line-2); background: var(--paper); }
.pp-side { padding: 24px 24px 26px; }
.pp-side + .pp-side { border-left: 1px solid var(--line-2); }
.pp-side .k { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .pp-side .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-big { margin: 8px 0 0; font-family: var(--serif-display); font-size: clamp(56px, 6vw, 88px); line-height: 1; color: var(--navy); }
.pp-side.is-trade .pp-big { color: var(--pp-held-ink); }
.pp-side p:last-child { margin: 12px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted-2); }
.pp-rcpt { padding: 24px 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2), var(--lift); display: grid; align-content: start; gap: 6px; }
.pp-rcpt-h { margin: 0 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
@media (max-width: 760px) { .pp-rcpt-h { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-rcpt ul { list-style: none; margin: 0; padding: 0; }
.pp-rcpt li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.pp-rcpt li span { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.pp-rcpt li b { justify-self: end; font-family: var(--serif-display); font-weight: 400; font-size: 20px; color: var(--navy); white-space: nowrap; }
.pp-rcpt li.is-cap b { color: var(--pp-held-ink); font-size: 17px; }
.pp-rcpt .bar { height: 8px; background: var(--cream-2); position: relative; overflow: hidden; }
.pp-rcpt .bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--pp-held); transform-origin: 0 50%; transition: transform var(--pp-t-slow) var(--ease-stone); }
.pp-rcpt li.is-cap .bar::after { content: ''; position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: var(--navy); }
html.pp-rise .pp-cost-grid:not(.is-in) .pp-rcpt .bar::before { transform: scaleX(0); }
.pp-more { margin-top: 12px; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.pp-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--pp-t-quick); }
.pp-more:hover svg { transform: translateX(3px); }
.pp-paid { margin-top: clamp(40px, 4vw, 60px); display: grid; grid-template-columns: var(--pp-split); column-gap: clamp(28px, 4vw, 72px); row-gap: 18px; padding: 28px 0 0; border-top: 2px solid var(--navy); align-items: start; }
.pp-paid .pp-h3 { margin: 0; grid-column: 1; }
.pp-paid-l { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; counter-reset: paid; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pp-paid-l li { counter-increment: paid; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted-2); padding-top: 12px; border-top: 1px solid var(--line-2); }
.pp-paid-l li::before { content: counter(paid, decimal-leading-zero) / ""; display: block; font-family: var(--serif-display); font-size: 15px; color: var(--gold); margin-bottom: 6px; }
.pp-paid-l b { display: block; font-weight: 400; color: var(--navy); font-size: 16.5px; margin-bottom: 4px; }
.pp-paid .pp-btn { grid-column: 1; justify-self: start; }

/* ══ 9 · WHAT THE LAW AND YOUR CARD GIVE YOU: statute slips ══ */
.pp-law { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-acts-law { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pp-act { position: relative; display: flex; flex-direction: column; padding: 26px 26px 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); border-top: 3px solid var(--navy);
  transition: transform var(--pp-t-quick) var(--ease-quick), box-shadow var(--pp-t-quick); }
.pp-act::before { content: '\00A7' / ""; position: absolute; right: 22px; top: 12px; font-family: var(--serif-display); font-size: 44px; line-height: 1; color: var(--line-2); }
.pp-act:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2), var(--lift-hi); }
.pp-act-cite { margin: 0; padding-right: 40px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .pp-act-cite { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-act h3 { margin: 12px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--navy); }
.pp-act p:not(.pp-act-cite) { margin: 12px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted-2); flex: 1; }
.pp-act-a { margin-top: 18px; align-self: flex-start; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.pp-act-a:hover { color: var(--gold-ink); }

/* ══ 10 · WHERE EVERY FIGURE COMES FROM: a register on paper (T25's other end) ══ */
.pp-src { padding: var(--pp-band) var(--gut-r) 0 var(--gut-l); }
.pp-src-l { list-style: none; margin: 0; padding: 8px 0; background: var(--paper); box-shadow: 0 0 0 1px var(--line-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
.pp-src-l li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; column-gap: 12px; align-items: start; padding: 14px 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; transition: background-color var(--pp-t-mid); }
.pp-src-l li:nth-child(odd) { border-right: 1px solid var(--line); }
.pp-src-l li:target { background: var(--gold-tint); }
.pp-src-l .n { grid-row: 1 / span 2; font-family: var(--serif-display); font-size: 20px; color: var(--gold); line-height: 1.2; }
.pp-src-l p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.pp-src-l p.s { margin-top: 6px; font-family: var(--sans); font-size: 12px; color: var(--muted-2); }
.pp-src-l p.s a { color: var(--navy); text-underline-offset: 3px; }
.pp-src-l .back { grid-column: 3; grid-row: 1 / span 2; justify-self: end; display: grid; place-items: center; width: 28px; height: 28px; color: var(--gold-ink); text-decoration: none; border: 1px solid var(--line-2); font-size: 14px; }
.pp-src-l li.pp-src-stamp { grid-template-columns: minmax(0, 1fr); align-content: center; background: var(--cream-2); }
.pp-src-seal { display: inline-block; margin-right: 12px; padding: 4px 10px; border: 1.5px solid var(--pp-go); color: var(--pp-go); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transform: rotate(-3deg); }
@media (max-width: 760px) { .pp-src-seal { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pp-src-l .back:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.pp-wrongline { margin: clamp(40px, 4vw, 56px) var(--gut-r) 0 var(--gut-l); font-family: var(--serif); font-size: 15.5px; color: var(--muted-2); text-align: center; }
.pp-wrongline a { color: var(--navy); text-underline-offset: 3px; }

/* the close: About's two photographic doors */
.pp-doors { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-half { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(360px, 34vw, 520px); text-decoration: none; color: var(--cream); background: var(--navy); }
.pp-half .ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 50%; transition: transform 900ms var(--ease-stone); }
.pp-half::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 22, 40, .96) 0%, rgba(10, 22, 40, .84) 46%, rgba(10, 22, 40, .2) 82%); }
.pp-half:hover .ph { transform: scale(1.05); }
.pp-half .in { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 48px) clamp(28px, 4vw, 56px) var(--gut-l); max-width: 600px; }
.pp-half.is-trade .in { padding-left: clamp(28px, 4vw, 64px); }
.pp-half .k { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.pp-half b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; }
.pp-half .go { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--pp-held); color: var(--navy);
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background var(--pp-t-quick), transform var(--pp-t-quick); }
.pp-half.is-trade .go { background: var(--cream); }
.pp-half .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--pp-t-quick); }
.pp-half:hover .go { transform: translateY(-1px); }
.pp-half:hover .go svg { transform: translateX(3px); }
.pp-half + .pp-half { border-left: 1px solid rgba(212, 169, 67, .45); }
html:has(.pp-doors) footer.footer { margin-top: 0; border-top: 0; }

/* ── arrivals: each part rises once (the head sets the waiting state; Mason 59.26 item 4) ── */
html.pp-rise .pp-arrive { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-stone), transform 700ms var(--ease-stone); }
html.pp-rise .pp-arrive.is-in { opacity: 1; transform: none; }

/* ══ widths ══ */
@media (max-width: 1180px) {
  .pp-hero { grid-template-columns: minmax(0, 1fr); }
  .pp-stmt { grid-column: 1; grid-row: auto; order: 3; margin-top: 40px; max-width: 720px; }
  .pp-reg { order: 2; margin-top: 32px; }
  .pp-hero-ground { width: 100%; right: 0; top: 30%; }
  .pp-map { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1.3fr) 30px minmax(0, 1fr); padding: 22px; }
  .pp-acc { padding: 14px 12px; }
  .pp-fears { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-fear.is-first { grid-column: 1 / -1; }
  .pp-paid-l { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pp-head, .pp-contest, .pp-print, .pp-cost-grid, .pp-paid, .pp-docket { grid-template-columns: minmax(0, 1fr); }
  .pp-head > .pp-p { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .pp-paid-l { grid-column: 1; grid-row: auto; }
  .pp-reg { grid-template-columns: minmax(0, 1fr); }
  .pp-reg-i + .pp-reg-i { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pp-isnot { grid-template-columns: minmax(0, 1fr); }
  .pp-isnot-ph { min-height: 300px; }
  .pp-isnot-cap { padding-right: var(--gut-r); }
  .pp-isnot-cols { grid-template-columns: minmax(0, 1fr); padding-left: var(--gut-l); }
  /* the drawing becomes a strip pinned above the steps, top to bottom (research p49) */
  .pp-scrolly { grid-template-columns: minmax(0, 1fr); }
  .pp-map-wrap { grid-column: 1; grid-row: 1; position: sticky; top: 63px; z-index: 5; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); }
  .pp-steps { grid-row: 2; padding-top: 10px; }
  .pp-map { position: static; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.2fr) 16px minmax(0, 1fr); padding: 12px var(--gut-r) 12px var(--gut-l); row-gap: 0; }
  .pp-acc { min-height: 0 !important; padding: 10px 8px; gap: 3px; }
  .pp-acc b { font-size: 13.5px; }
  .pp-acc small, .pp-map-rec, .pp-ring, .pp-fee, .pp-map-can .k { display: none; }
  .pp-map-can { margin-top: 10px; padding: 6px 10px; }
  .pp-map-can b { font-size: 13px; }
  .pp-coin { font-size: 15px; padding: 4px 8px; margin-top: 2px; }
  .pp-state { font-size: 8.5px; letter-spacing: .12em; padding: 3px 6px; }
  .pp-step, .pp-step:first-child { min-height: 0; padding: 24px 0 26px 52px; }
  .pp-step .n { width: 36px; height: 36px; font-size: 16px; }
  .pp-junc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pp-junc-mid { order: -1; min-height: 0; }
  .pp-junc-svg { display: none; }
  .pp-junc-held { max-width: none; width: 100%; }
  .pp-junc-col { display: block; }
  .pp-junc-col li { margin-top: 10px; }
  .pp-junc-col::before { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }
  .pp-junc-col.is-back::before { content: 'Back to you'; color: var(--pp-back); }
  .pp-junc-col.is-to::before { content: 'To the tradesperson'; color: var(--gold); }
  .pp-junc-col.is-to li { text-align: left; border-right: 0; border-left: 3px solid var(--pp-held); }
  .pp-ways-foot { grid-template-columns: minmax(0, 1fr); }
  .pp-pair { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .pp-pair-mid { display: none; }
  .pp-scale { display: none; }
  .pp-table thead { display: none; }
  .pp-table, .pp-table tbody, .pp-table tr, .pp-table th, .pp-table td { display: block; width: auto !important; }
  .pp-table tbody tr { padding: 14px 18px; border-top: 1px solid var(--line); }
  .pp-table tbody th, .pp-table td { padding: 4px 0; border: 0; }
  .pp-table td::before { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .pp-table td:nth-child(2)::before { content: 'Starts when'; }
  .pp-table td:nth-child(3)::before { content: 'To stop it'; }
  .pp-table td:nth-child(4)::before { content: 'If nobody acts'; }
  .pp-fears, .pp-docket-l, .pp-outs, .pp-who, .pp-acts-law, .pp-src-l, .pp-sides, .pp-doors { grid-template-columns: minmax(0, 1fr); }
  .pp-fear.is-first { grid-template-columns: minmax(0, 1fr); }
  .pp-refund { grid-column: 1; grid-row: auto; margin-top: 18px; justify-self: start; }
  .pp-docket-l { row-gap: 22px; padding-left: 20px; }
  .pp-docket-l::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: var(--gold-soft); transform-origin: 50% 0; }
  .pp-side + .pp-side { border-left: 0; border-top: 1px solid var(--line-2); }
  .pp-src-l li:nth-child(odd) { border-right: 0; }
  .pp-half + .pp-half { border-left: 0; border-top: 1px solid rgba(212, 169, 67, .45); }
  .pp-half .in, .pp-half.is-trade .in { padding-left: var(--gut-l); }
}
@media (max-width: 560px) {
  .pp-short { grid-template-columns: minmax(0, 1fr); }
  .pp-short li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pp-stmt-paper { padding-left: 16px; padding-right: 16px; }
  .pp-stmt-who { padding-right: 0; padding-top: 30px; }
  .pp-stmt-tag { right: 16px; }
  .pp-stmt-paper::before { left: 16px; right: 16px; }
  .pp-stmt-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-stmt-block div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-2); }
  .pp-stmt-rows li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .pp-stmt-rows time { grid-column: 1 / -1; }
  .pp-stmt-foot { grid-template-columns: auto 1fr; }
  .pp-stamp { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 10px 0 0 10px; }
  .pp-rcpt li { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; }
  .pp-pin { width: 22px; height: 22px; font-size: 11px; }
  /* the list stacks on a phone: the mark and the part, then the start and the finish under it */
  .pp-work thead { display: none; }
  .pp-work caption { display: block; width: 100%; }
  .pp-work, .pp-work tbody, .pp-work tr, .pp-work td, .pp-work th { display: block; }
  .pp-work tr { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-2); }
  .pp-work th, .pp-work td { border-top: 0; padding: 0; }
  .pp-work td.n { grid-row: span 3; width: auto; }
  .pp-work td[data-k] { margin-top: 4px; font-size: 14.5px; }
  .pp-work td[data-k]::before { content: attr(data-k) ": "; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pp-work td.go[data-k]::before { color: var(--pp-go); }
  .pp-map { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1.25fr) 10px minmax(0, 1fr); }
  .pp-acc .k { font-size: 8px; letter-spacing: .1em; }
}

/* ── motion, transparency, colours, print ── */
@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after { animation: none !important; transition: none !important; }
  .pp-pipe i { opacity: 0 !important; }
  .pp-map[data-step="1"] .is-in, .pp-map[data-step="5"] .is-out { background: var(--pp-held); }
}
@media (forced-colors: active) {
  .pp-stmt-paper, .pp-map, .pp-acc, .pp-junc-col li, .pp-junc-held, .pp-table-wrap, .pp-fear, .pp-act, .pp-src-l, .pp-try, .pp-sides, .pp-rcpt { border: 1px solid CanvasText; }
  .pp-step.is-on .n, .pp-junc-col li.is-on, .pp-tick.is-on { outline: 2px solid Highlight; }
  .pp-coin, .pp-state, .pp-stamp, .pp-fn { border: 1px solid CanvasText; }
  .pp-rosette, .pp-micro { display: none; }
}
@media print {
  .pp-hero-ground, .pp-acts, .pp-doors, .pp-try, .pp-wrongline { display: none !important; }
  .pp-wrong { background: none; color: #000; }
  .pp-map { position: static; }
  html.pp-rise .pp-arrive, html.pp-rise .pp-stmt-rows li, html.pp-rise .pp-stamp { opacity: 1 !important; transform: none !important; }
}