/* ══ PLANS ═══════════════════════════════════════════════════  8 Oct 2026 (rp77) ══
   plans.html. Built on the company pages' sheet (hyyryn-company.css: tokens,
   the crumb, the kicker, the display heading and the lede on a navy ground)
   and the one button family (hyyryn-buttons.css). Nothing here declares a new
   colour: every value is a token from those sheets or the house rgba of one.

   THE LAYOUT, AND WHY. Four were drawn and compared on 8 Oct (a ledger on
   navy, cards on cream, two panels side by side, glass over the night
   photograph). The market reads plans as one row of cards with one plan
   marked and a table under it (Checkatrade, Tradify, Arthur, LandlordVision:
   mason/references/component-sweep-pricing-2026-10.md), so that is the
   structure. The ground is the homepage's night photograph under a navy fall,
   as About uses it. The glass is on the one plan each audience is pointed to
   and on the two controls, nowhere else (Sir: "a slight glass effect ... just
   to see if it works"); the other cards are paper, square, like every
   container since 29 Sep (sir-rules 46).

   rp92 (Sir, 11 Oct): every band on the homepage's margins, photographs
   under the bands that suit them, the numbers drawn, every control of one
   kind answering the hand the same way, and the reference plan card
   (hyyryn-plan-cards.css). See THE MARGINS and THE CONTROLS BY KIND below.

   GLASS THAT PASSES. The marked card is navy at 66% over a blur. Its text is
   cream, measured against the brightest lit window behind it (a lamp at about
   #E2AC68), composited: over 7:1. Where blur is not drawn the card is solid
   navy (@supports), so it never falls back to a pale veil (research rule 49). */

/* ══ THE CONTROLS BY KIND (rp92) ═════════════════════════════════════════
   Sir, 11 Oct: the buttons' interaction "should be uniform across the whole
   page depending on the type of button". Every control on this page is one of
   these kinds, and every kind answers the hand the same way wherever it is
   (Mason chapter 59.4). A control that fits none is a finding.
     ACTION      does the thing: the card buttons (hyyryn-plan-cards.css),
                 Continue to secure payment, the doors. Square, 48px, capitals,
                 an arrow. Hover: rises 1px, its shadow deepens, the arrow steps
                 forward; press: 98%.
     NOT YET     cannot be pressed yet (Expected January 2027): the action's box,
                 dashed, no hover, not focusable.
     TOGGLE      a value to show (a worked job): a square chip; hover: full edge
                 and 1px; chosen: navy.
     SWITCH      one of two (audience, billing): the pill that slides.
     WAY THERE   a link that goes somewhere (Your own jobs, the fee schedule,
                 the sources): capitals over a 1px line and an arrow; hover: the
                 line goes 2px and the arrow steps 4px. A tile with one is
                 pressable as a whole.
     DISCLOSURE  a question: the row tints and steps in, the ring fills, the
                 plus turns to a minus.
     PROSE LINK  inside a sentence: the underline goes from a third to full.
   Focus is a 2px ring on every kind: navy on paper and cream, gold on navy
   and on photographs (gold on cream is 2:1, research r18). Reduced motion
   keeps the colour changes and drops every rise, step and slide. */
.pl { background: var(--cream); }
.pl .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── THE STAGE: the night photograph, the heading, the controls, the cards ── */
.pl-stage { position: relative; isolation: isolate; overflow: hidden; color: var(--on-navy); background: #050B16;
  margin-top: calc(-1 * var(--bar)); padding: calc(var(--bar) + 40px) var(--gut-r) clamp(56px, 6vw, 96px) var(--gut-l); }
/* the letters stay whole and sit behind the heading; the city under them
   fades into the night the cards stand on */
/* the letters in the lights land behind the row of cards, so the glass card
   shows them through its blur and the heading sits on the dark sky above */
.pl-stage::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--bar) + 10vw); height: 67.4vw; z-index: -2;
  background: url('../bg-fork-night.jpg') 50% 0 / 100% 100% no-repeat;
  background-image: image-set(url('photos/bg-fork-night-1712.webp') type('image/webp'), url('../bg-fork-night.jpg') type('image/jpeg'));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 64%, transparent 100%); }
.pl-stage::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,11,22,.5) 0%, rgba(5,11,22,.45) 30%, rgba(5,11,22,.28) 52%, rgba(5,11,22,.82) 82%, #050B16 100%); }
/* THE MARGINS (rp92; Sir, 11 Oct: "every time from here onwards, you are
   building a page to use the margins like you did on the home page"). No band
   is a centred box any more: each runs to the homepage's gutters (left 2.4vw,
   right 3vw, --gut-l and --gut-r) and only its words keep a measure, in ch
   (research r45 to r48). The stage keeps its centred heading, which Sir asked
   for on 10 Oct; its cards now run gutter to gutter. */
.pl-stage-in { position: relative; max-width: none; margin: 0; }
.pl-h1 { max-width: 20ch; }
.pl-lede { max-width: 62ch; }

/* ── THE TWO CONTROLS, as glass on the photograph ──
   rp89: the controls and the cards themselves are one component shared with
   the homepage band, in hyyryn-plan-cards.css; this sheet places them. */
.pl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: clamp(30px, 3.4vw, 46px) 0 0; }
.pl-note { margin: 18px 0 0; font-family: var(--serif); font-size: 14px; color: var(--on-navy-3); }
.pl-note b { color: var(--cream); font-weight: 400; }

/* ── CENTRED (rp88; Sir, 10 Oct: "center it on the screen") ──
   The heading, the controls, the note and the cards stand on one axis, as
   every pricing page in the sweep sets them; the crumb stays with the bar. */
/* the site's gutters are uneven on purpose (left 2.4vw, right 3vw), which put
   the middle 4px left of the screen's (measured 11 Oct, test/plans-ui/motion.mjs):
   here both sides take the right gutter, and the crumb keeps its usual place */
.pl-stage { padding-left: var(--gut-r); }
.pl-stage .co-crumb { margin-left: calc(var(--gut-l) - var(--gut-r)); }
/* rp92: the cards run gutter to gutter but keep the stage's equal gutters, so they stay on the middle of the
   screen as Sir asked on 10 Oct (the one deliberate exception to the homepage's uneven margins: Mason 59.1, r49) */
.pl-stage .co-k { display: flex; justify-content: center; }
.pl-stage .co-k::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.pl-h1, .pl-lede, .pl-stage .pl-after { margin-left: auto; margin-right: auto; text-align: center; }
.pl-ctl { justify-content: center; }
.pl-note { text-align: center; }

.pl [hidden] { display: none !important; }   /* research p6: [hidden] loses to any author display rule */

/* ── THE CARDS (drawn by hyyryn-plan-cards.css; placed here) ── */
.pl-panel { margin-top: 26px; outline: none; }
.pl-panel + .pl-panel { margin-top: 56px; }              /* with no script, both audiences show, one after the other */
.js-plans .pl-panels { margin-top: 26px; }   /* the stacking itself is the shared sheet's (hyyryn-plan-cards.css) */
.pl-after { margin: 22px 0 0; max-width: 72ch; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--on-navy-3); }
.pl-after b { color: var(--cream); font-weight: 400; }

/* ── THE STEP BEFORE STRIPE ──  rp109, 12 Oct 2026 ──
   Sir, 12 Oct: "the description needs a revamp ... it looks very basic".
   The pinned, tilted sheet is now the legal family's plate (the double rule
   of Your plan, Help and the terms): the plan named large with its price,
   the money drawn as a line from today, the terms as a ruled ledger in two
   parts, and what is due today with the way on as a glass desk beside it
   that stays in view while the ledger is read. */
.pl-check { padding: clamp(56px, 6vw, 96px) var(--gut-r) clamp(56px, 6vw, 96px) var(--gut-l); background: var(--cream-2); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + var(--follow, 0px)); }
.pl-check-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pl-board { position: relative; }
.pl-sheet { position: relative; background: var(--paper); padding: 40px clamp(22px, 3.2vw, 44px) 32px; box-shadow: inset 0 0 0 1px var(--line-2), 0 34px 60px -44px rgba(10,22,40,.5); }
.pl-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
.pl-sk { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pl-ck-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pl-st { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(36px, 3.4vw, 48px); line-height: 1.02; color: var(--navy); outline: none; }
.pl-ck-for { margin: 8px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.pl-ck-price { margin: 0; text-align: right; }
.pl-ck-price b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: clamp(36px, 3.4vw, 48px); line-height: 1; color: var(--navy); font-variant-numeric: lining-nums; }
.pl-ck-price span { display: block; margin-top: 8px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink, #5B4318); }
/* the money, drawn: a dot for today, a dot for the first charge, a dashed run after */
.pl-line { margin: 26px 0 4px; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pl-line li { position: relative; padding: 28px 14px 0 0; }
.pl-line li::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; border-top: 1px solid var(--navy); }
.pl-line li:last-child::before { border-top: 1px dashed var(--line-2); }
.pl-line li::after { content: ''; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--navy); }
.pl-line li.is-now::after { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 4px var(--gold-tint); }
.pl-line .k { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-line b { display: block; margin-top: 6px; font-family: var(--serif-display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--navy); }
.pl-line .s { display: block; margin-top: 4px; font-family: var(--serif); font-size: 13px; line-height: 1.45; color: var(--muted-2); }
/* the ledger: two parts, ruled, and the total under both */
.pl-dl { margin: 0; }
.pl-dl-h { margin: 30px 0 0; display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink, #5B4318); }
.pl-dl-h::after { content: ''; flex: 1; border-top: 1px solid rgba(131,99,44,.42); }
.pl-dl dl { margin: 4px 0 0; }
.pl-dl dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pl-dl dl > div:last-child { border-bottom: 0; }
.pl-dl dt { padding-top: 4px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-dl dd { margin: 0; max-width: 62ch; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--navy); }
/* wide: the two parts side by side, each row a label over its line, as the band runs to the gutters */
@media (min-width: 1200px) {
  .pl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(32px, 3vw, 56px); }
  .pl-dl dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .pl-dl dt { padding-top: 0; }
}
.pl-terms { margin: 18px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }   /* rp78: the docket names the clause it summarises */
.pl-terms a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(10,22,40,.3); text-underline-offset: 3px; }
.pl-org { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pl-org label { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-org input, .pl-org select { min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--serif); font-size: 15px; color: var(--navy); }
.pl-org input:focus, .pl-org select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
/* the desk: what happens next, what is due, and the way on */
.pl-next { position: sticky; top: calc(var(--bar, 64px) + var(--follow, 0px) + 24px); padding: 28px 28px 22px; background: rgba(255,253,248,.62); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(10,22,40,.09), 0 22px 44px -30px rgba(10,22,40,.42); }
.pl-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.pl-steps li { position: relative; padding: 0 0 20px 46px; font-family: var(--serif); font-size: 14.5px; line-height: 1.58; color: var(--muted-2); counter-increment: s; }
.pl-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 30px; font-family: var(--serif-display); font-size: 20px; line-height: 1.2; color: var(--gold); font-variant-numeric: lining-nums; }
.pl-steps li::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: 8px; width: 1px; background: rgba(131,99,44,.42); }
.pl-steps li:last-child::after { display: none; }
.pl-steps b { display: block; margin-bottom: 2px; font-family: var(--serif-display); font-weight: 400; font-size: 18px; line-height: 1.25; color: var(--navy); }
.pl-cancelled { margin: 2px 0 16px; padding: 14px 18px; border-left: 2px solid var(--gold-soft); background: var(--gold-tint); font-family: var(--serif); font-size: 14.5px; color: var(--ink); }
.pl-cancelled b { font-weight: 700; }
.pl-due { position: relative; margin: 6px 0 16px; padding: 18px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pl-due::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--gold-soft); }
.pl-due span { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.pl-due b { font-family: var(--serif-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums; }
.pl-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
  background: var(--btn-solid, linear-gradient(180deg, #22324F 0%, #0E1B31 55%, #0A1628 100%));
  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); transition: transform .22s var(--ease-quick), background .22s ease, box-shadow .22s ease; }
.pl-go:hover { background: var(--btn-solid-hi, linear-gradient(180deg, #2B3D5E 0%, #14243F 55%, #0F1E36 100%)); transform: translateY(-1px); }
.pl-go:active { transform: scale(.98); }
.pl-go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pl-go[disabled] { opacity: .55; cursor: progress; transform: none; }
.pl-safe { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--muted-2); }
.pl-safe svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--gold-ink, #5B4318); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-err { margin: 14px 0 0; padding: 12px 16px; border-left: 2px solid var(--danger); background: var(--danger-soft); font-family: var(--serif); font-size: 14px; color: var(--danger); }
.pl-back { display: block; margin: 14px auto 0; padding: 6px 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); text-decoration: underline; text-decoration-color: rgba(10,22,40,.3); text-underline-offset: 5px; }

/* ══ BELOW THE CARDS ═════════════════════════════════════════  11 Oct 2026 (rp88) ══
   Sir, 10 Oct: the sections under the cards "just feel very similar ...
   visualize what the parts you can ... side by side ... pictures or slight
   animations ... slight different background colors". Six bands, each its
   own shape and ground, in the grammar About and Payment protection set:
     cream     what each plan adds, as a bento of drawn tiles (about's 12 columns)
     navy      what paying never changes, the one dark band
     cream-2   the table, line by line, on a paper sheet with the marked column
     cream     the questions, beside a sticky photograph
     paper     the dates, as a road (about's "where we actually are")
     cream-3   the sources, as tiles
     photos    the two doors (about's close)
   Motion (research-50-plans-motion p17, p23, p36, p37): a band builds once
   when a fifth of it is reached and only if it started below the fold; every
   drawing finishes inside two and a half seconds and never loops; nothing is
   hidden unless the script armed it; reduced motion sees the finished page. */
.pl-in { max-width: none; margin: 0; }
/* one split for every band's head, and for every band laid out side by side: 5 to 7 (r48) */
.pl-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.pl-head-r { display: grid; gap: 12px; }
.pl-h2 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; color: var(--navy); text-wrap: balance; }
.pl-sp { margin: 0; max-width: 62ch; padding-left: 20px; border-left: 1px solid var(--line-2); font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted-2); }
.pl-sp a { color: var(--navy); text-underline-offset: 3px; }
.pl-swap { margin: 0; padding-left: 21px; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.pl-swap-b { padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); text-decoration: underline; text-decoration-color: rgba(10,22,40,.3); text-underline-offset: 5px; transition: text-decoration-color 160ms; }
.pl-swap-b:hover { text-decoration-color: currentColor; }
.pl-swap-b:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* with no script both audiences are on the page, one after the other, so each
   set says whose it is; with the script the tabs say it */
.pl-tw > .pl-aud-k { margin: 12px 14px 0; }

/* ── 1. WHAT EACH PLAN ADDS: the bento ── */
.pl-adds { background: var(--cream); padding: clamp(64px, 7vw, 112px) var(--gut-r) clamp(64px, 7vw, 104px) var(--gut-l); scroll-margin-top: calc(var(--bar) + var(--follow, 0px)); }
.pl-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.pl-b { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: clamp(24px, 2.6vw, 38px); border-radius: 4px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--lift); transition: transform 260ms var(--ease-quick), box-shadow 260ms; }
/* rp92 (r39: hover is a promise): a tile answers the hand only when it leads
   somewhere, and then the whole tile is the way in (its link is stretched over
   it), so what lifts is exactly what can be pressed. A tile that only shows
   something stays still. */
.pl-b:has(.pl-rc) { cursor: pointer; }
.pl-b:has(.pl-rc):hover, .pl-b:has(.pl-rc:focus-visible) { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), var(--lift-hi); }
.pl-b-tx { display: grid; gap: 10px; max-width: 46ch; }
.pl-tag { justify-self: start; display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-ink);
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.pl-b h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(23px, 2vw, 29px); line-height: 1.14; color: var(--navy); text-wrap: balance; }
.pl-b p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: var(--muted-2); }
.pl-rc { margin-top: auto; align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--navy);
  box-shadow: inset 0 -1px 0 rgba(10,22,40,.32); transition: box-shadow 200ms, color 200ms; }
.pl-rc::after { content: ''; position: absolute; inset: 0; z-index: 3; }            /* the stretched link: the whole tile is the way in */
.pl-rc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms var(--ease-quick); }
.pl-b:hover .pl-rc, .pl-rc:focus-visible { box-shadow: inset 0 -2px 0 currentColor; }
.pl-b:hover .pl-rc svg, .pl-rc:focus-visible svg { transform: translateX(4px); }
.pl-rc:focus-visible { outline: none; }
.pl-b:has(.pl-rc:focus-visible) { outline: 2px solid var(--navy); outline-offset: 4px; }
.pl-rc.is-dark { color: var(--gold-hi); box-shadow: inset 0 -1px 0 rgba(221,182,90,.45); }
.pl-b.is-dark:has(.pl-rc:focus-visible) { outline-color: var(--gold-soft); }
/* three grounds besides white, so no two neighbours match */
.pl-b.is-dark { background: var(--navy); box-shadow: var(--lift-hi); }
.pl-b.is-dark::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 90% at 100% 0%, rgba(212,169,67,.16), transparent 62%); }
.pl-b.is-dark > * { position: relative; }
.pl-b.is-dark:has(.pl-rc):hover { box-shadow: var(--lift-hi), 0 0 0 1px rgba(212,169,67,.4); }
.pl-b.is-dark h3 { color: var(--cream); }
.pl-b.is-dark p { color: var(--on-navy-2); }
.pl-b.is-dark .pl-tag { background: rgba(212,169,67,.18); color: var(--gold-hi); }
.pl-b.is-cream { background: var(--cream-2); box-shadow: inset 0 0 0 1px var(--line); }
.pl-b.is-gold { background: linear-gradient(180deg, var(--gold-tint) 0%, var(--paper) 72%); box-shadow: inset 0 0 0 1px rgba(131,99,44,.22), var(--lift); }
/* the spans: trades 7+5 / 5+7; landlords 12 / 5+7 / 7+5 */
.pl-b-rec { grid-column: span 7; }
.pl-b-watch { grid-column: span 5; }
.pl-b-site { grid-column: span 5; }
.pl-b-qtr { grid-column: span 7; }
.pl-b-homes { grid-column: 1 / -1; }
.pl-b-pack { grid-column: span 7; }
.pl-b-roles { grid-column: span 7; }
.pl-b-spend { grid-column: span 5; }
.pl-b .cap, .pl-b .pl-w-k { margin: 0; font-family: var(--serif); font-size: 12.5px; font-style: italic; line-height: 1.3; color: var(--muted); }

/* records: three photographs dealt, and the seal pressed (about's 04, the same sizes) */
.pl-b-rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 3vw, 44px); row-gap: 20px; }
.pl-b-rec .pl-b-tx { grid-column: 1; grid-row: 1; }
.pl-b-rec .pl-rc { grid-column: 1; grid-row: 3; }
.pl-photos { grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; min-height: 270px; }
.pl-photos .ph { position: absolute; top: 8px; width: 46%; aspect-ratio: 4 / 5; background-size: cover; background-position: 50% 50%; background-color: var(--cream-3);
  border: 7px solid #fff; border-bottom-width: 26px; box-shadow: 0 1px 1px rgba(10,22,40,.18), 0 16px 26px -14px rgba(10,22,40,.5); rotate: var(--r); transition: rotate 380ms var(--ease-stone), translate 380ms var(--ease-stone); }
.pl-photos .p1 { --r: -4deg; --k: 0; left: 0; z-index: 1; background-image: url('../bg-bathroom-reno.jpg'); background-image: image-set(url('photos/bg-bathroom-reno-800.webp') type('image/webp'), url('../bg-bathroom-reno.jpg') type('image/jpeg')); }
.pl-photos .p2 { --r: 3deg; --k: 1; left: 27%; top: 0; z-index: 2; background-image: url('../bg-plumbing.jpg'); background-image: image-set(url('photos/bg-plumbing-800.webp') type('image/webp'), url('../bg-plumbing.jpg') type('image/jpeg')); }
.pl-photos .p3 { --r: -1deg; --k: 2; left: 54%; top: 14px; z-index: 3; background-image: url('../bg-kitchen-bath.jpg'); background-image: image-set(url('photos/bg-kitchen-bath-800.webp') type('image/webp'), url('../bg-kitchen-bath.jpg') type('image/jpeg')); }
.pl-photos .ph i { position: absolute; left: 4px; right: 0; bottom: -21px; font-family: var(--sans); font-size: 9.5px; font-weight: 500; font-style: normal; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.pl-b-rec:hover .ph { rotate: 0deg; }   /* the tile is a link (stretched), so its photographs may answer the hand */
.pl-b-rec:hover .p1 { translate: -6px 0; } .pl-b-rec:hover .p3 { translate: 6px 0; }
.pl-photos .seal { position: absolute; right: -2%; top: -18px; z-index: 4; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; gap: 2px; text-align: center;
  background: var(--green); color: var(--cream); rotate: -12deg; box-shadow: inset 0 0 0 4px var(--green), inset 0 0 0 5.5px rgba(250,248,243,.55), 0 10px 20px -8px rgba(15,90,79,.7); }
/* the words carry the seal's own ground, so a contrast reading that stops at
   an absolute box still finds it (the gate, 11 Oct) */
.pl-photos .seal b, .pl-photos .seal small { background: var(--green); }
.pl-photos .seal b { font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .22em; text-transform: uppercase; }
.pl-photos .seal small { font-family: var(--serif); font-size: 11px; font-style: italic; line-height: 1.2; }
.pl-bento.is-in .pl-photos .ph { animation: plDeal 600ms var(--ease-stone) both; animation-delay: calc(240ms + var(--k) * 120ms); }
.pl-bento.is-in .pl-photos .seal { animation: plPress 520ms cubic-bezier(.3, 1.5, .6, 1) 820ms both; }
@keyframes plDeal { from { opacity: 0; translate: 0 22px; rotate: 0deg; } }
@keyframes plPress { 0% { scale: 1.35; } 60% { scale: .96; } 100% { scale: 1; } }

/* the watch: one morning's register, one line that changed */
.pl-watch { display: grid; gap: 8px; padding: 16px; border-radius: 6px; background: rgba(250,248,243,.05); box-shadow: inset 0 0 0 1px rgba(250,248,243,.14); }
.pl-b.is-dark .pl-w-k { margin: 0 0 4px; font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-3); }
.pl-w-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 4px; background: rgba(250,248,243,.05); }
.pl-w-row:nth-of-type(1) { --k: 0; } .pl-w-row:nth-of-type(2) { --k: 1; } .pl-w-row:nth-of-type(3) { --k: 2; }
.pl-w-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); }
.pl-w-row b { min-width: 0; font-family: var(--serif); font-size: 14.5px; font-weight: 400; line-height: 1.3; color: var(--cream); }
.pl-w-row em { font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 500; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; text-align: right; color: var(--on-navy-3); }
.pl-w-row.is-flag { background: rgba(212,169,67,.12); box-shadow: inset 2px 0 0 var(--gold-soft); }
.pl-w-row.is-flag .dot { background: var(--gold-soft); }
.pl-w-row.is-flag em { color: var(--gold-hi); }
.pl-bento.is-in .pl-w-row { animation: plRow 500ms var(--ease-stone) both; animation-delay: calc(360ms + var(--k) * 140ms); }
.pl-bento.is-in .pl-w-row.is-flag .dot { animation: plPing 1400ms ease-out 1000ms 2; }
@keyframes plRow { from { opacity: 0; translate: -10px 0; } }
@keyframes plPing { 0% { box-shadow: 0 0 0 0 rgba(212,169,67,.6); } 100% { box-shadow: 0 0 0 10px rgba(212,169,67,0); } }

/* your checks on your website: a page, and the panel on it */
.pl-site { position: relative; margin-top: auto; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 30px -20px rgba(10,22,40,.45); }
.pl-site .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.pl-site .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pl-site .bar span { flex: 1; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.pl-site .body { display: grid; gap: 8px; padding: 18px 18px 34px; }
.pl-site .ln { height: 8px; border-radius: 4px; background: var(--cream-3); }
.pl-site .w1 { width: 58%; height: 12px; background: var(--line-2); } .pl-site .w2 { width: 90%; } .pl-site .w3 { width: 72%; }
.pl-badge { justify-self: start; margin-top: 10px; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; border-radius: 6px; background: var(--navy); box-shadow: inset 0 0 0 1px rgba(212,169,67,.45), 0 12px 20px -14px rgba(10,22,40,.7); }
.pl-badge .mk { flex: none; width: 30px; height: 28px; fill: var(--gold-soft); }
.pl-badge b { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.pl-badge ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.pl-badge li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 13px; line-height: 1.3; color: var(--cream); }
.pl-badge li::before { content: ''; width: 8px; height: 4px; margin-top: -3px; border-left: 1.6px solid var(--gold-soft); border-bottom: 1.6px solid var(--gold-soft); rotate: -45deg; }
.pl-badge li:nth-child(1) { --k: 0; } .pl-badge li:nth-child(2) { --k: 1; } .pl-badge li:nth-child(3) { --k: 2; }
.pl-site .cap { position: absolute; right: 14px; bottom: 10px; }
.pl-bento.is-in .pl-badge { animation: plRise 600ms var(--ease-stone) 500ms both; }
.pl-bento.is-in .pl-badge li { animation: plRow 400ms var(--ease-stone) both; animation-delay: calc(900ms + var(--k) * 150ms); }
@keyframes plRise { from { opacity: 0; translate: 0 12px; scale: .97; } }

/* earnings and fees by quarter: four bars, the fee as the gold cap, and the file */
.pl-qtr { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); grid-template-areas: "bars file" "key file"; gap: 14px clamp(20px, 3vw, 36px); align-items: end; }
.pl-qtr .bars { grid-area: bars; position: relative; height: 150px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; margin-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.pl-qtr .bars span { position: relative; height: calc(var(--e) * 100%); display: flex; }
.pl-qtr .bars span:nth-child(1) { --k: 0; } .pl-qtr .bars span:nth-child(2) { --k: 1; } .pl-qtr .bars span:nth-child(3) { --k: 2; } .pl-qtr .bars span:nth-child(4) { --k: 3; }
.pl-qtr .bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold-soft) 0 5%, var(--navy) 5% 100%);   /* rp92: the fee is 5% of a job, drawn at 5% (r28) */ transform-origin: 50% 100%; }
.pl-qtr .bars b { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .14em; color: var(--muted); }
.pl-qtr .key { grid-area: key; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--sans); font-size: 10.5px; line-height: 1.3; color: var(--muted-2); }
.pl-qtr .key span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border-radius: 2px; background: var(--navy); }
.pl-qtr .key .k-f::before { background: var(--gold-soft); }
.pl-qtr .file { grid-area: file; align-self: center; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), var(--lift); }
.pl-qtr .file svg { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 1.5; }
.pl-qtr .file > span { font-family: var(--serif); font-size: 14px; line-height: 1.3; color: var(--navy); }
.pl-qtr .file small { display: block; margin-top: 3px; font-family: var(--sans); font-size: 10px; line-height: 1.4; color: var(--muted); }
.pl-qtr .file em, .pl-spend .chips span { font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: .14em; padding: 6px 8px; border-radius: 3px; background: var(--green); color: var(--cream); }
.pl-bento.is-in .pl-qtr .bars i { animation: plGrowY 700ms var(--ease-stone) both; animation-delay: calc(300ms + var(--k) * 90ms); }
.pl-bento.is-in .pl-qtr .file { animation: plRise 600ms var(--ease-stone) 800ms both; }
@keyframes plGrowY { from { transform: scaleY(0); } }

/* the homes each plan holds: one house for each home (Enterprise in words) */
.pl-b-homes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
.pl-homes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pl-homes .col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 16px 16px; border-radius: 6px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); min-height: 170px; }
.pl-homes .col:nth-child(1) { --k: 0; } .pl-homes .col:nth-child(2) { --k: 1; } .pl-homes .col:nth-child(3) { --k: 2; } .pl-homes .col:nth-child(4) { --k: 3; }
.pl-homes .col.is-mark { background: var(--navy); box-shadow: inset 0 0 0 1px rgba(212,169,67,.55); }
.pl-homes .hm { --s: 16px; display: block; margin-bottom: 10px; width: min(100%, calc(var(--c) * var(--s))); aspect-ratio: var(--c) / var(--r); background-color: var(--navy);
  /* one tile per home: the mask is cut into exactly c by r squares, so a narrow column draws smaller houses, never fewer */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 7.4 8 2.6l5.4 4.8v6.2H9.6V10H6.4v3.6H2.6z'/%3E%3C/svg%3E") 0 0 / calc(100% / var(--c)) calc(100% / var(--r)) repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 7.4 8 2.6l5.4 4.8v6.2H9.6V10H6.4v3.6H2.6z'/%3E%3C/svg%3E") 0 0 / calc(100% / var(--c)) calc(100% / var(--r)) repeat; }
.pl-homes .is-mark .hm { background-color: var(--gold-soft); }
.pl-homes .hm.is-more { width: auto; height: auto; aspect-ratio: auto; background: none; -webkit-mask: none; mask: none; font-family: var(--serif-display); font-size: 44px; line-height: 1; color: var(--navy); }
.pl-homes b { font-family: var(--serif-display); font-size: 19px; font-weight: 400; line-height: 1.2; color: var(--navy); }
.pl-homes em { font-family: var(--serif); font-size: 13.5px; font-style: normal; line-height: 1.4; color: var(--muted-2); }
.pl-homes .is-mark b { color: var(--cream); }
.pl-homes .is-mark em { color: var(--on-navy-2); }
.pl-bento.is-in .pl-homes .hm:not(.is-more) { animation: plSweep 900ms var(--ease-stone) both; animation-delay: calc(300ms + var(--k) * 160ms); }
.pl-bento.is-in .pl-homes .hm.is-more { animation: plRise 600ms var(--ease-stone) 800ms both; }
@keyframes plSweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* an evidence pack: the index on the first sheet, the originals beside it */
.pl-b-pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: center; }
.pl-pack { position: relative; min-height: 350px; }
.pl-pack .sh { position: absolute; left: 6%; top: 6px; width: 70%; aspect-ratio: 210 / 297; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 24px -16px rgba(10,22,40,.5); }
.pl-pack .s3 { rotate: 8deg; translate: 18% 3%; background: var(--cream-2); }
.pl-pack .s2 { rotate: 3.5deg; translate: 9% 1%; background: var(--cream); }
.pl-pack .s1 { rotate: -2deg; padding: 18px 16px 14px; border-top: 3px solid var(--navy); display: flex; flex-direction: column; gap: 4px; }
.pl-pack .s1 .k { margin: 0; font-family: var(--sans); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pl-pack .s1 > b { font-family: var(--serif-display); font-size: 20px; font-weight: 400; line-height: 1.15; color: var(--navy); }
.pl-pack .s1 ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pl-pack .s1 li { display: flex; align-items: baseline; gap: 6px; font-family: var(--serif); font-size: 11.5px; line-height: 1.3; color: var(--ink); }
.pl-pack .s1 li::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted var(--line-2); }
.pl-pack .s1 li span { order: 2; font-family: var(--sans); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-pack .zip { position: absolute; right: 2%; bottom: 10%; z-index: 2; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; gap: 3px; text-align: center; rotate: 8deg;
  background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 5.5px rgba(212,169,67,.6), 0 12px 20px -10px rgba(10,22,40,.6); }
.pl-pack .zip b, .pl-pack .zip small { background: var(--navy); }
.pl-pack .s1 .k, .pl-pack .s1 > b, .pl-pack .s1 li { background: #fff; }
.pl-pack .zip b { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--gold-hi); }
.pl-pack .zip small { font-family: var(--serif); font-size: 10.5px; font-style: italic; line-height: 1.2; color: var(--on-navy-2); }
.pl-pack .cap { position: absolute; left: 0; bottom: 0; }
.pl-bento.is-in .pl-pack .s2, .pl-bento.is-in .pl-pack .s3 { animation: plFan 800ms var(--ease-stone) 360ms both; }
.pl-bento.is-in .pl-pack .zip { animation: plPress 520ms cubic-bezier(.3, 1.5, .6, 1) 900ms both; }
@keyframes plFan { from { rotate: -2deg; translate: 0 0; } }

/* your people, each with a role */
.pl-b-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: center; }
.pl-roles { display: grid; gap: 10px; }
.pl-roles .p { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 9px 18px 9px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--lift); }
.pl-roles .p:nth-child(1) { --k: 0; } .pl-roles .p:nth-child(2) { --k: 1; } .pl-roles .p:nth-child(3) { --k: 2; } .pl-roles .p:nth-child(4) { --k: 3; }
.pl-roles .av { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--cream); font-family: var(--serif-display); font-size: 16px; line-height: 1; }
.pl-roles b { font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.pl-roles em { font-family: var(--serif); font-size: 13.5px; font-style: normal; line-height: 1.35; color: var(--muted-2); }
.pl-roles .is-client { margin-left: 28px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pl-roles .is-client .av { background: var(--gold-soft); color: var(--navy); }
.pl-bento.is-in .pl-roles .p { animation: plRow 500ms var(--ease-stone) both; animation-delay: calc(320ms + var(--k) * 120ms); }

/* spend by home */
.pl-spend { margin-top: auto; display: grid; gap: 11px; }
.pl-spend .r { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px; }
.pl-spend .r:nth-child(1) { --k: 0; } .pl-spend .r:nth-child(2) { --k: 1; } .pl-spend .r:nth-child(3) { --k: 2; } .pl-spend .r:nth-child(4) { --k: 3; }
.pl-spend .r b { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--muted-2); }
.pl-spend .r i { display: block; height: 12px; width: calc(var(--w) * 100%); border-radius: 2px; background: var(--navy); transform-origin: 0 50%; }
.pl-spend .r:first-child i { background: var(--gold-soft); }
.pl-spend .chips { display: flex; gap: 8px; margin-top: 8px; }
.pl-bento.is-in .pl-spend .r i { animation: plGrowX 700ms var(--ease-stone) both; animation-delay: calc(300ms + var(--k) * 90ms); }
@keyframes plGrowX { from { transform: scaleX(0); } }

/* the bento builds when it is reached (about's own timings) */
.pl-bento.is-armed .pl-b { opacity: 0; transform: translateY(20px); }
.pl-bento.is-in .pl-b { transition: opacity 500ms, transform 650ms var(--ease-stone), box-shadow 260ms; transition-delay: calc(var(--i) * 80ms); }
.pl-bento.is-in .pl-b:hover, .pl-bento.is-in .pl-b:focus-within { transition-delay: 0s; }

/* ── 2. WHAT PAYING NEVER CHANGES: the town at night, under glass (rp92) ──
   The same for everyone, everywhere: the town from above at night under a
   navy fall (dark at the words, clearer to the right), and each promise on a
   pane of the trade dashboard's glass, with its number drawn small: one pound
   in twenty, the three things that cost nothing, three homes. */
.pl-same { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 8vw, 128px) var(--gut-r) clamp(72px, 8vw, 128px) var(--gut-l); background: var(--navy); color: var(--on-navy); }
.pl-same-ph { position: absolute; inset: 0; z-index: -2; background: url('photos/plans-same-night.jpg') 50% 50% / cover no-repeat;
  background-image: image-set(url('photos/plans-same-night.webp') type('image/webp'), url('photos/plans-same-night.jpg') type('image/jpeg')); }
.pl-same::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 80% at 100% 0%, rgba(212,169,67,.18), transparent 62%), linear-gradient(180deg, rgba(10,22,40,.9) 0%, rgba(10,22,40,.62) 45%, rgba(10,22,40,.5) 100%); }
.pl-same::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,169,67,.55), transparent); }
.pl-same-in { display: block; }
.pl-same-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(32px, 3.4vw, 52px); }
.pl-same-h .pl-sk, .pl-same-h .pl-h2 { grid-column: 1; }
.pl-same-h .pl-sk { color: var(--gold-soft); }
.pl-same-h .pl-h2 { color: var(--cream); }
.pl-same-h p:not(.pl-sk) { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; padding-left: 20px; border-left: 1px solid rgba(250,248,243,.22); max-width: 52ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--on-navy-2); }
.pl-same-l { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: clamp(12px, 1.4vw, 24px); row-gap: 0; }
.pl-same-l li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2vw, 30px);
  background: rgba(10,22,40,.42); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(250,248,243,.14), inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -32px rgba(0,0,0,.85); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pl-same-l li { background: rgba(10,22,40,.88); } }
@supports (grid-template-rows: subgrid) {
  .pl-same-l li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .pl-same-l li > .big { grid-row: 1; } .pl-same-l li > .pl-twenty, .pl-same-l li > .pl-zero, .pl-same-l li > .pl-houses { grid-row: 2; } .pl-same-l li > h3 { grid-row: 3; } .pl-same-l li > p { grid-row: 4; }
}
.pl-same-l .big { display: flex; align-items: flex-end; height: clamp(56px, 5vw, 76px); font-family: var(--serif-display); font-size: clamp(56px, 5vw, 76px); line-height: 1; color: var(--gold-hi); font-variant-numeric: lining-nums; }
.pl-same-l .big svg { width: 54px; height: 54px; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; }
.pl-same-l h3 { margin: 8px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; color: var(--cream); }
.pl-same-l p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--on-navy-2); }
/* the numbers, drawn small */
.pl-twenty { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 220px; margin-top: 6px; }
.pl-twenty i { height: 14px; background: rgba(250,248,243,.2); }
.pl-twenty i:first-child { background: var(--gold-soft); }
.pl-zero { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pl-zero i { padding: 4px 8px; font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(221,182,90,.4); }
.pl-houses { display: flex; gap: 6px; margin-top: 6px; }
.pl-houses i { width: 22px; height: 22px; background: var(--gold-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 7.4 8 2.6l5.4 4.8v6.2H9.6V10H6.4v3.6H2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 7.4 8 2.6l5.4 4.8v6.2H9.6V10H6.4v3.6H2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pl-same-l.is-armed li { opacity: 0; translate: 0 16px; }
.pl-same-l.is-in li { transition: opacity 500ms, translate 600ms var(--ease-stone); transition-delay: calc(var(--i) * 90ms); }
.pl-same-l.is-in .pl-twenty i { animation: plTick 360ms var(--ease-stone) both; animation-delay: calc(400ms + var(--n, 0) * 30ms); }
.pl-same-l.is-in .pl-twenty i:first-child { animation: plTick 360ms var(--ease-stone) both, plPingGold 1400ms ease-out 1100ms 2; }
.pl-same-l.is-in .pl-houses i { animation: plRise 500ms var(--ease-stone) both; }
.pl-same-l.is-in .pl-houses i:nth-child(2) { animation-delay: 120ms; } .pl-same-l.is-in .pl-houses i:nth-child(3) { animation-delay: 240ms; }
@keyframes plTick { from { opacity: 0; transform: scaleY(.2); } }
@keyframes plPingGold { 0% { box-shadow: 0 0 0 0 rgba(212,169,67,.7); } 100% { box-shadow: 0 0 0 8px rgba(212,169,67,0); } }

/* ── WORK IT OUT: the numbers, drawn and answerable (rp92) ──
   The controls on the left on paper, the answer on the right on a navy sheet
   (the homepage's ledger colours), drawn by hyyryn-plans.js. The figure is
   one hand-sized instrument: type, or pick a worked job, or point at the
   line, and the fee, what you keep, the dot and the bar all move at once. */
.pl-calc { padding: clamp(64px, 7vw, 112px) var(--gut-r) clamp(64px, 7vw, 112px) var(--gut-l); background: var(--paper); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + var(--follow, 0px)); }
.pl-js { display: none; }
.js-plans .pl-js { display: inline; }
.pl-calc-b { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.pl-calc-l { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pl-calc-in { display: none; align-items: baseline; gap: 10px; max-width: 440px; margin-top: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--navy); transition: border-color 200ms; }
.js-plans .pl-calc-in { display: flex; }
.pl-calc-in:hover { border-bottom-color: var(--gold); }
.pl-calc-in:focus-within { outline: 2px solid var(--navy); outline-offset: 8px; }
.pl-calc-in .u { font-family: var(--serif-display); font-size: clamp(34px, 3.2vw, 48px); line-height: 1; color: var(--muted); }
.pl-calc-in.is-homes .u { order: 1; font-family: var(--serif); font-size: 20px; color: var(--muted-2); }
.pl-calc-in input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; outline: none; font-family: var(--serif-display); font-size: clamp(46px, 4.4vw, 68px); line-height: 1.05; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.pl-calc-hint { display: none; margin: 16px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.js-plans .pl-calc-hint { display: block; }
.pl-calc-t { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.pl-calc-t thead th { padding: 0 10px 10px; text-align: right; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
@media (max-width: 760px) { .pl-calc-t thead th { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.pl-calc-t thead th:first-child { padding-left: 0; text-align: left; }
.pl-calc-t tbody th, .pl-calc-t td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink); transition: background-color 200ms; }
.pl-calc-t tbody th { padding-left: 0; text-align: left; }
.pl-calc-t td:last-child { font-family: var(--serif-display); font-size: 18px; color: var(--navy); }
.pl-calc-t td span { margin-left: 6px; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .pl-calc-t td span { font-size: 10.5px; } }  /* rp200 phone floor, was 9px */
.pl-calc-t tr.is-cap td:nth-child(2) { color: var(--gold); }
.pl-calc-t tr.is-on th, .pl-calc-t tr.is-on td { background: var(--gold-tint); }
.pl-calc-t tr.is-on th { box-shadow: inset 3px 0 0 var(--gold-soft); }
/* a worked job is a toggle: a hairline box, navy and filled when it is the one shown */
.pl-pick { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 0 8px; padding: 0 12px; border: 0; border-radius: 0; cursor: pointer; background: #fff;
  font-family: var(--serif); font-size: 15px; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; box-shadow: inset 0 0 0 1px rgba(10,22,40,.3);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--ease-quick); }
.pl-pick:hover { box-shadow: inset 0 0 0 1px var(--navy), 0 8px 16px -10px rgba(10,22,40,.45); transform: translateY(-1px); }
.pl-pick:active { transform: scale(.97); }
.pl-pick[aria-pressed="true"] { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px var(--navy); }
.pl-pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* the answer, on navy */
.pl-calc-fig { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(24px, 2.6vw, 40px); background: var(--navy); color: var(--on-navy); box-shadow: var(--lift-deep); }
.pl-calc-fig::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(212,169,67,.16), transparent 62%), radial-gradient(50% 60% at 0% 100%, rgba(31,122,92,.16), transparent 70%); }
.pl-calc-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--on-navy-line); }
.pl-calc-r { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-calc-r + .pl-calc-r { padding-left: 24px; border-left: 1px solid var(--on-navy-line); }
.pl-calc-r .k { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-navy-3); }
@media (max-width: 760px) { .pl-calc-r .k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
.pl-calc-r b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(40px, 4vw, 62px); line-height: 1; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pl-calc-r.is-fee b, .pl-calc-r.is-plan b { color: var(--gold-hi); }
.pl-calc-r.is-plan b { font-size: clamp(32px, 3vw, 46px); line-height: 1.1; white-space: normal; }
.pl-calc-r .s { font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--on-navy-2); }
.pl-chart { position: relative; margin-top: 22px; min-height: 120px; touch-action: pan-y; }
.pl-chart svg { display: block; width: 100%; height: auto; overflow: visible; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.pl-chart .ax { stroke: rgba(250,248,243,.22); stroke-width: 1; }
.pl-chart .gr { stroke: rgba(250,248,243,.08); stroke-width: 1; }
.pl-chart .tk { fill: rgba(250,248,243,.62); font-family: var(--sans); font-size: 11px; letter-spacing: .04em; }
.pl-chart .area { fill: url(#plFall); }
.pl-chart .line { fill: none; stroke: var(--gold-soft); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pl-chart .cap { stroke: var(--gold-hi); stroke-width: 1; stroke-dasharray: 5 5; }
.pl-chart .cap-t { fill: var(--gold-hi); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pl-chart .seg { fill: none; stroke-width: 3; stroke-linecap: round; }
.pl-chart .seg.solo { stroke: var(--green-2); } .pl-chart .seg.landlord { stroke: var(--gold-soft); } .pl-chart .seg.agent { stroke: var(--cream); }
.pl-chart .seg-t { transition: opacity 200ms; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pl-chart .seg-t.solo { fill: #7FC4A8; } .pl-chart .seg-t.landlord { fill: var(--gold-hi); } .pl-chart .seg-t.agent { fill: var(--cream); } .pl-chart .seg-t.ent { fill: rgba(250,248,243,.7); }
.pl-chart .ent { fill: url(#plHatch); stroke: rgba(250,248,243,.3); stroke-dasharray: 3 4; }
.pl-chart .jump { stroke: rgba(250,248,243,.3); stroke-dasharray: 2 4; }
.pl-chart .guide { stroke: rgba(250,248,243,.45); stroke-width: 1; stroke-dasharray: 3 4; }
.pl-chart .mk { transition: transform 420ms var(--ease-stone); }
.pl-chart .dot { fill: var(--cream); stroke: var(--navy); stroke-width: 3; }
.pl-chart .halo { fill: rgba(250,248,243,.16); }
.pl-chart .ghost { fill: none; stroke: rgba(250,248,243,.55); stroke-width: 1.5; opacity: 0; transition: opacity 160ms; }
.pl-chart.is-pointing .ghost { opacity: 1; }
.pl-chart .ghost-t { fill: rgba(250,248,243,.8); font-family: var(--sans); font-size: 11px; opacity: 0; transition: opacity 160ms; }
.pl-chart.is-pointing .ghost-t { opacity: 1; }
.pl-calc-b.is-armed .pl-chart .line, .pl-calc-b.is-armed .pl-chart .seg { stroke-dashoffset: 1; }
.pl-calc-b.is-in .pl-chart .line, .pl-calc-b.is-in .pl-chart .seg { transition: stroke-dashoffset 1300ms var(--ease-stone) 250ms; }
.pl-calc-b.is-armed .pl-calc-fig { opacity: 0; translate: 0 22px; }
.pl-calc-b.is-in .pl-calc-fig { transition: opacity 500ms, translate 650ms var(--ease-stone); }
.pl-split { display: flex; height: 14px; margin-top: 20px; background: rgba(250,248,243,.08); }
.pl-split .net { flex: 95 1 0; background: rgba(250,248,243,.86); transition: flex-grow 420ms var(--ease-stone); }
.pl-split .fee { flex: 5 1 0; min-width: 3px; background: var(--gold-soft); transition: flex-grow 420ms var(--ease-stone); }
.pl-split-k { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-3); }
.pl-split-k span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; background: rgba(250,248,243,.86); }
.pl-split-k .fee::before { background: var(--gold-soft); }
.pl-calc-note { margin: 22px 0 0; padding-left: 16px; border-left: 1px dashed rgba(131,99,44,.55); max-width: 56ch; font-family: var(--serif); font-size: 14.5px; line-height: 1.7; color: var(--muted-2); }
.pl-calc-note b { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
/* the arrow link: the page's one way to somewhere, wherever it stands (see THE CONTROLS BY KIND) */
.pl-calc-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 0; text-decoration: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); box-shadow: inset 0 -1px 0 rgba(10,22,40,.32); transition: box-shadow 200ms; }
.pl-calc-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms var(--ease-quick); }
.pl-calc-more:hover { box-shadow: inset 0 -2px 0 currentColor; }
.pl-calc-more:hover svg { transform: translateX(4px); }
.pl-calc-more:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pl-calc-cap { margin: 20px 0 0; padding-left: 14px; border-left: 1px dashed rgba(212,169,67,.55); max-width: 66ch; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--on-navy-2); }

/* ── 3. LINE BY LINE: a schedule you can narrow (rp94) ──
   Sir, 11 Oct: "it just looks a bit too plain". Its theme is what it is, a
   schedule read line by line (research-50-plans-bands t48): the heading held
   on the left with a tally that IS the rows (one square a line, filling as
   each line arrives, t4); on the right the sheet, its columns headed by each
   plan's name and price (t7), the suggested one said in words (t5); the lines
   in two groups, where the plans differ and what is the same (t3); one toggle
   that leaves only the differences (t2, t10), its label never changing and a
   status line saying what is shown; a visible tint under the line being read
   (t8, a reading aid, no lift); "not included" drawn as a border so it
   survives forced colours (t14). On a phone the four landlord plans are
   compared two at a time (t12). */
.pl-cmp { padding: clamp(64px, 7vw, 104px) var(--gut-r) clamp(64px, 7vw, 104px) var(--gut-l); background: var(--cream-2); border-bottom: 1px solid var(--line); }
/* rp95: the heading column becomes the table's RAIL (research-50-space s11, s13 to s26).
   Sir, 11 Oct: "too much space ... a massive empty space ... use up the real
   estate". Measured before: 171px of words in a 600px-tall void. The rail
   keeps the page's 5 to 7 line, because at that split its words and the
   table come out level (measured at 1280, 1440, 1536 and 1920: a third,
   s11, left the trades rail 109 to 204px taller than its table), and holds
   four parts in the order the reader asks: the heading, which plan is mine,
   how to read the table, and help. It does not stick: level with the table,
   a sticky rail would move a few pixels and could hide its foot on a short
   window (s7, s8). */
.pl-cmp .pl-in { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
.pl-rail { grid-column: 1; display: grid; row-gap: clamp(24px, 2vw, 30px); align-content: start; min-width: 0; }
.pl-cmp .pl-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin: 0; }
.pl-cmp .pl-tw { grid-column: 2; }
.pl-cmp .pl-swap { padding-left: 21px; margin-top: -2px; }
/* a rail's small heads: the page's kicker, in its ink rather than its gold, so the band keeps one gold kicker */
.pl-rk { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.pl-rk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
/* the price switch beside the prices it changes (s16): the stage's own control, small, on paper */
.pl-seg.is-mini { padding: 3px; }
.pl-seg.is-mini label { min-height: 30px; padding: 6px 12px; font-size: 9.5px; letter-spacing: .16em; }

/* which is yours: one line a plan, written from the card's own reason (s14) */
.pl-dec-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-di { position: relative; padding: 14px 16px 15px 20px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 300ms var(--ease-stone), box-shadow 220ms ease, background-color 220ms ease; }
.pl-di::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 4px 0 0 4px; background: var(--line-2); transition: background-color 220ms ease; }
.pl-di.is-mark::before { background: var(--gold-soft); }
.pl-di .dn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.pl-di .dn b { font-family: var(--serif-display); font-weight: 400; font-size: 20px; line-height: 1.15; color: var(--navy); }
.pl-di .dp { font-family: var(--sans); font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pl-di .pill { margin-left: auto; align-self: center; display: inline-flex; padding: 4px 9px; border-radius: 999px; background: rgba(10,22,40,.06); color: var(--muted-2); font-family: var(--sans); font-size: 9px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.pl-di .pill.is-on { background: var(--green-soft); color: var(--green); }
.pl-di .pill.is-next { background: var(--gold-tint); color: var(--gold-ink); }
.pl-di .dw { margin: 6px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--muted-2); text-wrap: pretty; }
/* the homes typed in the calculator above mark the plan they fit (s15) */
.pl-di .fit { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--navy); color: var(--cream); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pl-di .fit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
.pl-di.is-fit { box-shadow: inset 0 0 0 1.5px var(--navy); }
/* pointing at a plan lights its column (s23, s24): the item leans towards the table */
.pl-di:hover { transform: translateX(6px); background-color: #fff; box-shadow: inset 0 0 0 1px rgba(10,22,40,.5), 0 12px 24px -18px rgba(10,22,40,.55); }
.pl-di:hover::before { background: var(--navy); }
.pl-di.is-mark:hover::before { background: var(--gold); }
.pl-tbl td, .pl-tbl thead th { transition: background-color 220ms ease, box-shadow 220ms ease; }
.pl-cmp:has(.pl-di[data-col="1"]:hover) .pl-tbl tr > :nth-child(2):not([colspan]),
.pl-cmp:has(.pl-di[data-col="3"]:hover) .pl-tbl tr > :nth-child(4):not([colspan]),
.pl-cmp:has(.pl-di[data-col="4"]:hover) .pl-tbl tr > :nth-child(5):not([colspan]) { background-color: rgba(10,22,40,.05); }
.pl-cmp:has(.pl-di[data-col="2"]:hover) .pl-tbl tr > :nth-child(3):not([colspan]) { background-color: rgba(212,169,67,.16); }
.pl-cmp:has(.pl-di[data-col="1"]:hover) .pl-tbl thead th:nth-child(2),
.pl-cmp:has(.pl-di[data-col="2"]:hover) .pl-tbl thead th:nth-child(3),
.pl-cmp:has(.pl-di[data-col="3"]:hover) .pl-tbl thead th:nth-child(4),
.pl-cmp:has(.pl-di[data-col="4"]:hover) .pl-tbl thead th:nth-child(5) { box-shadow: inset 0 3px 0 var(--navy); }

/* reading the table: its two parts as an index (s18) and a key in words (s17) */
.pl-read .pl-rk { margin-bottom: 10px; }
.pl-idx { display: grid; gap: 2px; }
.pl-idx a { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 14px; border-radius: 4px; text-decoration: none; font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--muted-2); transition: background-color 200ms ease, color 200ms ease; }
.pl-idx a b { font-weight: 400; color: var(--navy); }
.pl-idx a::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: transparent; transition: background-color 200ms ease; }
.pl-idx a::after { content: ''; margin-left: auto; width: 12px; height: 12px; flex: none; opacity: .45; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cline x1='12' y1='4' x2='12' y2='19'/%3E%3Cpolyline points='6 13 12 19 18 13'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cline x1='12' y1='4' x2='12' y2='19'/%3E%3Cpolyline points='6 13 12 19 18 13'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  transition: transform 220ms var(--ease-quick), opacity 200ms ease; }
.pl-idx a:hover { background-color: rgba(10,22,40,.045); color: var(--navy); }
.pl-idx a:hover::after { opacity: 1; transform: translateY(2px); }
.pl-idx a[aria-current="true"] { background-color: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.pl-idx a[aria-current="true"]::before { background: var(--gold-soft); }
.pl-idx a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pl-idx .sq { flex: none; display: inline-grid; grid-auto-flow: column; gap: 3px; }
.pl-idx .sq i { width: 10px; height: 10px; box-sizing: border-box; border: 5px solid var(--gold-soft); transition: opacity 260ms, transform 300ms var(--ease-stone); }
.pl-idx .sq i.is-same { border-width: 1.5px; border-color: var(--muted); }   /* filled by its border, so forced colours keep the difference (t45) */
/* the index fills as its lines arrive, and the lines it no longer shows step back */
.pl-cmp:has(.pl-tw.is-armed:not([hidden])) .pl-idx .sq i { transform: scale(0); }
.pl-cmp:has(.pl-tw.is-in:not([hidden])) .pl-idx .sq i { transition-delay: calc(240ms + var(--r) * 45ms); }
.pl-cmp:has(.pl-tw:not([hidden]) .pl-only[aria-pressed="true"]) .pl-idx a.is-same { color: var(--muted); }
.pl-cmp:has(.pl-tw:not([hidden]) .pl-only[aria-pressed="true"]) .pl-idx .sq i.is-same { opacity: .3; transform: scale(.7); transition-delay: 0s; }
.pl-tbl tbody { scroll-margin-top: calc(var(--bar) + var(--follow, 0px) + 96px); }
.pl-key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 12px 0 0; padding: 14px 0 0 14px; border-top: 1px dashed var(--line-2); font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.pl-key li { display: inline-flex; align-items: center; gap: 8px; }
.pl-key svg { width: 14px; height: 14px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-key .k-no { width: 12px; border-top: 2px solid var(--muted); }
.pl-key .k-mark { width: 16px; height: 12px; box-sizing: border-box; background: var(--gold-tint); border-top: 3px solid var(--gold-soft); }

/* help, beside the doubt it answers (s19): the band's one dark note, of the page's own navy */
.pl-help { position: relative; overflow: hidden; padding: 22px 24px 20px; border-radius: 4px; background: var(--navy); color: var(--on-navy-2, rgba(246,240,222,.78)); box-shadow: var(--lift-hi); }
.pl-help h3 { position: relative; margin: 0 0 8px; font-family: var(--serif-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--cream); }
.pl-help p { position: relative; margin: 0; max-width: 46ch; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; }
.pl-help .go { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; }
.pl-help .go a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; text-decoration: none; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); box-shadow: inset 0 -1px 0 rgba(221,182,90,.45); transition: color 200ms ease, box-shadow 200ms ease; }
.pl-help .go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms var(--ease-quick); }
.pl-help .go a:hover { color: #E8C878; box-shadow: inset 0 -2px 0 currentColor; }
.pl-help .go a:first-child:hover svg { transform: translateY(3px); }
.pl-help .go a:last-child:hover svg { transform: translateX(4px); }
.pl-help .go a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
/* on a wide rail the links stand to the right of the words, so the card is not a wide box of short lines */
.pl-help { container-type: inline-size; }
@container (min-width: 600px) {
  .pl-help .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4cqi, 48px); align-items: center; }
  .pl-help .in > :not(.go) { grid-column: 1; }
  .pl-help .go { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding-left: clamp(20px, 3cqi, 32px); border-left: 1px solid rgba(250,248,243,.14); }
}

/* the rail arrives once, its parts in reading order, as the table's lines do (t15) */
.pl-rail.is-armed > * { opacity: 0; transform: translateY(10px); }
.pl-rail.is-in > * { transition: opacity 420ms ease, transform 520ms var(--ease-stone); }
.pl-rail.is-in > :nth-child(2) { transition-delay: 90ms; } .pl-rail.is-in > :nth-child(3) { transition-delay: 180ms; } .pl-rail.is-in > :nth-child(4) { transition-delay: 270ms; }
.pl-rail.is-armed .pl-di { opacity: 0; transform: translateX(-10px); }
.pl-rail.is-in .pl-di { transition: opacity 420ms ease calc(160ms + var(--i, 0) * 70ms), transform 520ms var(--ease-stone) calc(160ms + var(--i, 0) * 70ms), box-shadow 220ms ease, background-color 220ms ease; }
/* once in, the hover moves quickly again */
.pl-rail.is-done .pl-di { transition: transform 300ms var(--ease-stone), box-shadow 220ms ease, background-color 220ms ease; }
.pl-tw { position: relative; overflow: visible; padding: 4px clamp(12px, 2vw, 28px) 12px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--lift-hi); }   /* a scroll box would trap the sticky heads (measured 8 Oct: they slid 74px into the rows) */
.pl-tw + .pl-tw { margin-top: 40px; }
.js-plans .pl-tw + .pl-tw { margin-top: 0; }
.pl-tw > .pl-aud-k { margin: 12px 14px 0; }
/* the bar above the sheet: the one toggle, and what it is showing */
.pl-tw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 0 6px; border-bottom: 1px dashed var(--line-2); }
.pl-only { display: none; }
.js-plans .pl-only { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px 0 12px; border: 0; border-radius: 0; cursor: pointer; background: #fff;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(10,22,40,.3);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--ease-quick); }
.pl-only::before { content: ''; width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 50% / 0 0 no-repeat; transition: background-size .2s var(--ease-quick); }
.pl-only:hover { box-shadow: inset 0 0 0 1px var(--navy), 0 8px 16px -10px rgba(10,22,40,.45); transform: translateY(-1px); }
.pl-only:active { transform: scale(.97); }
.pl-only[aria-pressed="true"] { background: var(--navy); color: var(--cream); box-shadow: inset 0 0 0 1px var(--navy); }
.pl-only[aria-pressed="true"]::before { background-size: 6px 6px; }
.pl-only:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* the caption shows what is showing; the status line says it once to a screen reader (t10) */
.pl-tw-say { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pl-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-pair select { min-height: 38px; padding: 0 10px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px rgba(10,22,40,.3); font-family: var(--serif); font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--navy); }
.pl-pair select:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* the sheet: separate borders, so the heads' rule travels with them when they stick (t6) */
.pl-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--serif); font-size: 15px; }
.pl-tbl caption { caption-side: top; padding: 16px 0 8px; text-align: left; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-tbl caption span { color: var(--navy); }
.pl-tbl col.is-mark { background: var(--gold-tint); }
.pl-tbl thead th { position: sticky; top: calc(var(--bar) + var(--follow, 0px)); z-index: 2; padding: 16px 14px 14px; text-align: left; vertical-align: bottom; background: var(--paper); border-bottom: 1.5px solid var(--navy); }
.pl-tbl thead th b { display: block; font-family: var(--serif-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--navy); }
.pl-tbl thead th .pr { display: block; margin-top: 4px; font-family: var(--sans); font-size: 11.5px; line-height: 1.3; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.pl-tbl thead th .mk { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 9px; font-weight: 600; line-height: 1.35; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.pl-tbl thead th.is-mark { background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--paper); border-top: 3px solid var(--gold-soft); }
/* the two groups, each opened by its own line (t3) */
.pl-tbl .grp th { padding: 22px 14px 10px; text-align: left; border-bottom: 1px solid var(--line-2); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); background: none; }
.pl-tbl .grp th span { margin-left: 12px; font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--muted); }
.pl-tbl .is-same .grp th { color: var(--muted-2); }
.pl-tbl tbody th[scope="row"] { position: relative; width: 34%; padding: 14px 14px 14px 32px; text-align: left; font-weight: 400; color: var(--muted-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.pl-tbl.n4 tbody th[scope="row"] { width: 22%; }
.pl-tbl.n4 { font-size: 14.5px; }
.pl-tbl.n4 td, .pl-tbl.n4 thead th { padding-left: 11px; padding-right: 11px; }
.pl-tbl.n4 td.yes { padding-left: 32px; }
.pl-tbl.n4 .yes svg { left: 11px; }
.pl-tbl.n4 thead th b { font-size: 19px; }
/* each line carries its square of the tally (t4) */
.pl-tbl tbody th[scope="row"]::before { content: ''; position: absolute; left: 14px; top: 21px; width: 8px; height: 8px; box-sizing: border-box; border: 4px solid var(--gold-soft); }
.pl-tbl tbody tr.same th[scope="row"]::before { border-width: 1.5px; border-color: var(--muted); }
.pl-tbl td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--navy); vertical-align: top; }
.pl-tbl tbody:last-child tr:last-child > * { border-bottom: 0; }
/* the line being read, tinted (a reading aid, not a promise: no lift, no pointer, t8) */
.pl-tbl tbody tr:not(.grp):hover > * { background-image: linear-gradient(rgba(212,169,67,.13), rgba(212,169,67,.13)); }
.pl-tbl tbody tr:not(.grp):hover th[scope="row"] { color: var(--navy); }
/* the tick hangs beside its words, so it never parts from them */
.pl-tbl td.yes { position: relative; padding-left: 36px; }
.pl-tbl .yes svg { position: absolute; left: 14px; top: 17px; width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* "not included": a border, so forced colours keep it; the words are for a screen reader (t14) */
.pl-tbl .no .dash { display: inline-block; width: 14px; height: 0; vertical-align: middle; border-top: 2px solid var(--muted); }
.pl-tbl .no-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pl-tbl tr.same td { color: var(--muted-2); font-style: italic; }
/* the lines arrive once, in reading order (t15) */
.pl-tw.is-armed tbody tr { opacity: 0; translate: 0 8px; }
.pl-tw.is-in tbody tr { transition: opacity 420ms, translate 520ms var(--ease-stone); transition-delay: calc(var(--r, 0) * 45ms); }
.pl-tw.is-in tbody tr.grp { transition-delay: 0s; }
.pl-tbl tbody.is-gone { display: none; }
/* on a phone, two landlord plans at a time (t12): the script marks the others */
@media (max-width: 720px) {
  .pl-tbl .c-off { display: none; }
  .pl-tbl.is-pair col.is-mark { background: none; }
  .pl-tbl.is-pair td.is-markc { background-color: var(--gold-tint); }
}

/* ── 4. BEFORE YOU CHOOSE: the questions on the photograph (rp92) ──
   The homepage Records band's method, measured from index.html (faq-wide-
   desk): the photograph under the whole band; a copy blurred ahead of time,
   clipped to the questions' side, under a dark glaze, with a gold rule at the
   seam; the words in cream. The seam falls on the page's 5 to 7 line. The
   heading stands at the foot of the clear side, on its own shade, and rides
   up with the reader while the questions are long (sticky to the bottom). */
.pl-ask { --seam: calc(var(--gut-l) + (100% - var(--gut-l) - var(--gut-r) - clamp(32px, 5vw, 96px)) * 5 / 12 + clamp(32px, 5vw, 96px) / 2);
  position: relative; isolation: isolate; overflow: hidden; background: #0B111C; color: var(--on-navy); scroll-margin-top: calc(var(--bar) + var(--follow, 0px)); }
.pl-ask-ph { position: absolute; inset: 0; z-index: -1; }
.pl-ask-ph i { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.pl-ask-ph.is-trades .sharp { background-position: 30% 40%; background-image: url('photos/plans-ask-trade.jpg');
  background-image: image-set(url('photos/plans-ask-trade.webp') type('image/webp'), url('photos/plans-ask-trade.jpg') type('image/jpeg')); }
.pl-ask-ph.is-trades .soft { background-position: 30% 40%; background-image: url('photos/plans-ask-trade-blur.jpg');
  background-image: image-set(url('photos/plans-ask-trade-blur.webp') type('image/webp'), url('photos/plans-ask-trade-blur.jpg') type('image/jpeg')); }
.pl-ask-ph.is-landlords .sharp { background-position: 30% 60%; background-image: url('photos/plans-ask-landlord.jpg');
  background-image: image-set(url('photos/plans-ask-landlord.webp') type('image/webp'), url('photos/plans-ask-landlord.jpg') type('image/jpeg')); }
.pl-ask-ph.is-landlords .soft { background-position: 30% 60%; background-image: url('photos/plans-ask-landlord-blur.jpg');
  background-image: image-set(url('photos/plans-ask-landlord-blur.webp') type('image/webp'), url('photos/plans-ask-landlord-blur.jpg') type('image/jpeg')); }
.pl-ask-ph .sharp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,12,20,.86) 0%, rgba(8,12,20,.35) 42%, rgba(8,12,20,.1) 70%), linear-gradient(90deg, rgba(8,12,20,.25), rgba(8,12,20,0) 40%); }
.pl-ask-ph .soft { clip-path: inset(0 0 0 var(--seam)); }
.pl-ask-ph .soft::after { content: ''; position: absolute; inset: 0; background: rgba(10,14,22,.66); }
.pl-ask-ph .soft::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--seam); width: 1px; z-index: 1; background: linear-gradient(to bottom, rgba(212,169,67,0), rgba(212,169,67,.7), rgba(212,169,67,0)); }
.pl-ask-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); min-height: clamp(640px, 52vw, 860px); padding: 0 var(--gut-r) 0 var(--gut-l); }
.pl-ask-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(64px, 7vw, 112px) 0 clamp(56px, 6vw, 96px); }
.pl-ask-plate { position: sticky; bottom: clamp(40px, 5vw, 72px); max-width: 44ch; }
.pl-ask-side .pl-sk { color: var(--gold-soft); }
.pl-ask-side .pl-h2 { font-size: clamp(36px, 3.6vw, 56px); color: var(--cream); text-shadow: 0 4px 30px rgba(6,10,18,.55); }
.pl-ask-p { margin: 16px 0 0; max-width: 40ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.65; color: rgba(250,248,243,.86); text-shadow: 0 2px 16px rgba(6,10,18,.7); }
.pl-ask-p a { color: var(--cream); text-decoration: underline; text-decoration-color: rgba(250,248,243,.45); text-underline-offset: 3px; transition: text-decoration-color 200ms; }
.pl-ask-p a:hover { text-decoration-color: currentColor; }
.pl-ask-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 0; text-decoration: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi);
  box-shadow: inset 0 -1px 0 rgba(221,182,90,.45); transition: box-shadow 200ms, color 200ms; }
.pl-ask-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms var(--ease-quick); }
.pl-ask-more:hover { color: #E8C878; box-shadow: inset 0 -2px 0 currentColor; }
.pl-ask-more:hover svg { transform: translateX(4px); }
.pl-ask-more:focus-visible, .pl-ask-p a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
.pl-qs { align-self: start; padding: clamp(64px, 7vw, 112px) 0 clamp(56px, 6vw, 96px) clamp(0px, 1.4vw, 24px); }
.pl-qs::before { content: 'The questions'; display: block; margin-bottom: 18px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,248,243,.74); }   /* 4.4:1 at .62 over the brightest blurred pixel of the landlords photograph; 5.6:1 at .74 */
.pl-q { border-top: 1px solid rgba(212,169,67,.26); }
.pl-q:last-child { border-bottom: 1px solid rgba(212,169,67,.26); }
.pl-q summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "q pm" "a1 pm"; column-gap: 24px; row-gap: 4px; align-items: center; padding: 20px 14px 20px 0; cursor: pointer; list-style: none; transition: padding-left 220ms var(--ease-quick), background-color 220ms; }
.pl-q summary::-webkit-details-marker { display: none; }
.pl-q summary::after { content: ''; grid-area: pm; justify-self: end; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(212,169,67,.55);
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) 50% 50% / 11px 1.5px no-repeat, linear-gradient(var(--gold-hi), var(--gold-hi)) 50% 50% / 1.5px 11px no-repeat;
  transition: background-size 220ms var(--ease-quick), box-shadow 220ms, background-color 220ms, transform 260ms var(--ease-quick); }
.pl-q summary:hover { padding-left: 10px; background: rgba(250,248,243,.05); }
.pl-q summary:hover::after { box-shadow: inset 0 0 0 1px var(--gold-hi); background-color: rgba(212,169,67,.14); }
.pl-q[open] summary::after { background-size: 11px 1.5px, 1.5px 0; box-shadow: inset 0 0 0 1px var(--gold-hi); background-color: rgba(212,169,67,.18); transform: rotate(180deg); }
.pl-q summary:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.pl-q .q { grid-area: q; font-family: var(--serif-display); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.28; color: #F3EEE3; }
.pl-q .a1 { grid-area: a1; font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--gold-hi); }
.pl-q .a { display: grid; gap: 10px; box-sizing: border-box; padding: 0 56px 24px 0; }
.pl-q.is-moving .a { overflow: hidden; }
.pl-q .a p { margin: 0; max-width: 64ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.68; color: rgba(243,238,227,.8); }
/* rp78: each answer names the clause of the terms it summarises (research rule 31) */
.pl-q .a .pl-qt { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pl-q .a .pl-qt a { display: inline-block; padding: 6px 0; color: var(--gold-hi); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(221,182,90,.45); transition: box-shadow 200ms; }
.pl-q .a .pl-qt a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.pl-q .a .pl-qt a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ── 5. WHAT GOES ON SALE, AND WHEN: the road, to scale, on a navy board (rp94) ──
   research-50-plans-bands t16 to t30. October 2026 to the end of 2027, to
   scale (equal spacing would say equal time, t20); today marked with its date
   (t19); what is fixed is a solid line, a month is a band a month wide, a year
   not yet a date is a soft band across the year, and the key says so (t21,
   t22). Lines and bands are borders and fills, not shadows, so forced colours
   keep them (t23). Once, on arrival (t28, t29): the axis draws, today drops
   in, Free runs the length of the road, a marker travels from today to
   January and Plus lights, then the year's plans arrive in date order, all
   inside 2.5s; reduced motion, and a board already in view, show the end. */
.pl { --green-lit: #7FC4A8; }
.pl-when { padding: clamp(64px, 7vw, 104px) var(--gut-r) clamp(64px, 7vw, 104px) var(--gut-l); background: var(--paper); border-top: 1px solid var(--line); }
.pl-tl { --lab: clamp(150px, 15vw, 220px); --gap: clamp(16px, 2vw, 28px); position: relative; isolation: isolate; overflow: hidden; margin: 0 0 clamp(24px, 2.6vw, 36px);
  padding: 18px clamp(20px, 2.4vw, 40px) 20px; background: var(--navy); color: var(--on-navy); box-shadow: var(--lift-deep); }
.pl-tl::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 70% at 100% 100%, rgba(212,169,67,.12), transparent 62%), radial-gradient(45% 70% at 0% 100%, rgba(31,122,92,.18), transparent 70%); }
/* words inside a placed box carry the board's own ground, so a contrast reading that stops at the box finds it (51.330) */
.tl-tick b, .tl-band.is-soft span, .tl-tag, .tl-trail b { background-color: var(--navy); }
.tl-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
.tl-track { position: relative; height: 100%; grid-column: 2; }
/* the axis: a tick a month, a tall gold one where the year turns */
.tl-axis { height: 70px; align-items: stretch; }
.tl-axis .tl-track { border-bottom: 1px solid rgba(250,248,243,.32); }
.tl-tick { position: absolute; bottom: 0; }
.tl-tick i { display: block; width: 0; height: 6px; border-left: 1px solid rgba(250,248,243,.38); }
.tl-tick.is-year i { height: 16px; border-left: 2px solid var(--gold-soft); }
.tl-tick b { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.tl-tick.is-year b { bottom: 22px; color: var(--gold-hi); }
.tl-tick:first-child b { transform: none; }
.tl-axis-k { align-self: end; padding-bottom: 6px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-3); }
/* a lane a plan */
.tl-lane { height: 62px; border-bottom: 1px solid rgba(250,248,243,.08); transition: background-color 200ms; }
.tl-lane:last-of-type { border-bottom: 0; }
.tl-lane.is-hot { background: rgba(250,248,243,.05); }
.tl-lab { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-lab b { font-family: var(--serif-display); font-weight: 400; font-size: 18px; line-height: 1.15; color: var(--cream); }
.tl-lab em { font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-3); }
.is-free .tl-lab em { color: var(--green-lit); } .is-plus .tl-lab em { color: var(--gold-hi); }
.tl-away { display: none; font-family: var(--sans); font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.tl-bar { position: absolute; top: 50%; height: 0; border-top: 4px solid var(--green-lit); margin-top: -2px; transform-origin: 0 50%; }
.tl-bar::after { content: ''; position: absolute; right: -2px; top: -8px; border: 6px solid transparent; border-left: 9px solid var(--green-lit); border-right: 0; }
.tl-tag { position: absolute; top: calc(50% + 9px); white-space: nowrap; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.tl-tag.is-end { right: 14px; color: var(--green-lit); }
.tl-tag.is-on { margin-left: 10px; color: var(--gold-hi); }
.tl-band { position: absolute; top: 50%; height: 22px; margin-top: -11px; min-width: 6px; }
.tl-band.is-point { background: var(--gold-soft); border: 1px solid var(--gold-hi); transform-origin: 50% 50%; }
.tl-hope { position: absolute; top: 50%; height: 0; border-top: 2px dashed rgba(221,182,90,.6); margin-top: -1px; }
.tl-band.is-soft { display: flex; align-items: center; overflow: hidden; border: 1px dashed rgba(250,248,243,.5); background: repeating-linear-gradient(135deg, rgba(250,248,243,.16) 0 2px, transparent 2px 8px); transform-origin: 0 50%; }
.tl-band.is-soft span { margin-left: 6px; padding: 0 6px; white-space: nowrap; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); }
.is-agent .tl-band.is-soft { border-color: rgba(250,248,243,.32); background: repeating-linear-gradient(135deg, rgba(250,248,243,.09) 0 2px, transparent 2px 10px); }
.tl-lane.is-on .tl-band, .tl-lane.is-on .tl-hope { display: none; }
.tl-lane.is-on .tl-bar { border-top-color: var(--gold-soft); }
.tl-lane.is-on .tl-bar::after { border-left-color: var(--gold-soft); }
.tl-trail { position: absolute; top: 50%; height: 0; border-top: 2px dotted rgba(221,182,90,.7); transform-origin: 0 50%; }
.tl-trail b { position: absolute; left: 6px; bottom: 14px; white-space: nowrap; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.pl-tl.is-armed .tl-trail { transform: scaleX(0); }
.pl-tl.is-armed .tl-trail b { opacity: 0; }
.pl-tl.is-in .tl-trail { transition: transform 760ms var(--ease-stone) 880ms; }
.pl-tl.is-in .tl-trail b { transition: opacity 300ms 1500ms; }
.tl-cur { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 5px rgba(221,182,90,.22); opacity: 0; pointer-events: none; }
/* the year 2027, and today, laid over the lanes on the same columns */
.tl-over { position: absolute; left: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); top: 18px; bottom: 52px; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: var(--gap); pointer-events: none; }
.tl-over > div { position: relative; grid-column: 2; }
.tl-y27 { position: absolute; top: 70px; bottom: 0; right: 0; background: rgba(250,248,243,.025); }
.tl-y27::after { content: '2027'; position: absolute; right: 8px; bottom: 4px; font-family: var(--serif-display); font-weight: 400; font-size: clamp(48px, 5vw, 76px); line-height: 1; color: rgba(250,248,243,.06); }   /* a drawn mark, not words: the board says the year in its axis */
.tl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--cream); transform-origin: 50% 0; }
.tl-flag { position: absolute; top: 0; left: -1px; padding: 3px 8px; white-space: nowrap; background: var(--cream); color: var(--navy); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tl-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(250,248,243,.12); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.tl-key span::before { content: ''; display: inline-block; vertical-align: middle; margin: -2px 9px 0 0; }
.tl-key .k-fix::before { width: 18px; height: 0; border-top: 4px solid var(--green-lit); }
.tl-key .k-month::before { width: 10px; height: 12px; background: var(--gold-soft); border: 1px solid var(--gold-hi); }
.tl-key .k-wait::before { width: 18px; height: 0; border-top: 2px dotted rgba(221,182,90,.7); }
.tl-key .k-hope::before { width: 18px; height: 0; border-top: 2px dashed rgba(221,182,90,.6); }
.tl-key .k-year::before { width: 22px; height: 12px; border: 1px dashed rgba(250,248,243,.5); background: repeating-linear-gradient(135deg, rgba(250,248,243,.2) 0 2px, transparent 2px 6px); }
/* once, on arrival */
.pl-tl.is-armed .tl-axis .tl-track { clip-path: inset(0 100% 0 0); }
.pl-tl.is-in .tl-axis .tl-track { transition: clip-path 650ms var(--ease-stone); }
.pl-tl.is-armed .tl-lab { opacity: 0; translate: -8px 0; }
.pl-tl.is-in .tl-lab { transition: opacity 400ms, translate 500ms var(--ease-stone); transition-delay: calc(250ms + var(--k) * 90ms); }
.pl-tl.is-armed .tl-now { transform: scaleY(0); }
.pl-tl.is-in .tl-now { transition: transform 450ms var(--ease-stone) 450ms; }
.pl-tl.is-armed .tl-flag { opacity: 0; }
.pl-tl.is-in .tl-flag { transition: opacity 300ms 700ms; }
.pl-tl.is-armed .tl-bar { transform: scaleX(0); }
.pl-tl.is-in .tl-bar { transition: transform 750ms var(--ease-stone) 600ms; }
.pl-tl.is-armed .tl-tag, .pl-tl.is-armed .tl-hope, .pl-tl.is-armed .tl-band.is-point { opacity: 0; }
.pl-tl.is-in .tl-tag, .pl-tl.is-in .tl-hope { transition: opacity 400ms 1800ms; }
.pl-tl.is-armed .tl-band.is-point { transform: scale(.2); }
.pl-tl.is-in .tl-band.is-point { transition: opacity 250ms 1700ms, transform 450ms cubic-bezier(.3, 1.5, .6, 1) 1700ms; }
.pl-tl.is-in .tl-cur { animation: tlTravel 950ms var(--ease-stone) 800ms both; }
.pl-tl.is-armed .tl-band.is-soft { opacity: 0; transform: scaleX(.3); }
.pl-tl.is-in .tl-band.is-soft { transition: opacity 450ms, transform 650ms var(--ease-stone); transition-delay: calc(1650ms + var(--k) * 200ms); }
@keyframes tlTravel { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 80% { opacity: 1; transform: translateX(var(--travel, 0px)); } 100% { opacity: 0; transform: translateX(var(--travel, 0px)) scale(1.8); } }
/* the list the board is drawn from: a card a plan, its key colour down its edge */
.pl-road { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.pl-stop { --c: var(--muted); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 22px 24px; background: #fff; border-left: 4px solid var(--c); box-shadow: inset 0 0 0 1px var(--line), var(--lift); transition: box-shadow 200ms; }
.pl-stop.is-free { --c: var(--green); }
.pl-stop.is-next { --c: var(--gold-soft); }
.pl-stop.is-later { border-left-style: dashed; }
.pl-stop.is-hot { box-shadow: inset 0 0 0 1px var(--c), var(--lift-hi); }
.pl-stop .pill { align-self: flex-start; display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(10,22,40,.06); color: var(--muted-2); font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.pl-stop.is-free .pill { background: var(--green-soft); color: var(--green); }
.pl-stop.is-next .pill { background: var(--gold-tint); color: var(--gold-ink); }
.pl-stop h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; color: var(--navy); }
.pl-stop .when { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-stop.is-free .when { color: var(--green); } .pl-stop.is-next .when { color: var(--gold); }
.pl-stop p:not(.when) { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: var(--muted-2); }
.pl-when-note { margin: 32px 0 0; max-width: 74ch; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold-soft); font-family: var(--serif); font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.pl-when-note a, .pl-sp a { color: var(--navy); text-decoration-color: rgba(10,22,40,.35); text-underline-offset: 3px; transition: text-decoration-color 200ms; }
.pl-when-note a:hover, .pl-sp a:hover { text-decoration-color: currentColor; }
.pl-when-note a:focus-visible, .pl-sp a:focus-visible, .pl-terms a:focus-visible, .pl-back:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ── 6. WHERE EVERY FIGURE COMES FROM: a register of authorities (rp94) ──
   Sir, 11 Oct: "lean into the legal aesthetics a bit more", like Records.
   The legal look is the STRUCTURE first (research-50-plans-bands t31, t32):
   hanging numbers, a heading per entry, the statement, the authority cited the
   UK way with its status (t36, t37), the day checked (t38), a self-link (t41).
   Then the materials, from Records (t44): its cheque paper and security tint,
   a perforated counterfoil with the notches a torn stub leaves, ruled entries,
   a stamp pressed once on arrival, and the coded strip along the foot; in the
   plans page's navy and gold, never Records' own lettering or maroon ink, and
   no crest or official mark (t43). Every rule that carries meaning is a
   border, so forced colours keep the register (t45); links are underlined
   with text-decoration (t42); spaced capitals, never faked small caps (t35). */
.pl-src { padding: clamp(64px, 7vw, 104px) var(--gut-r) clamp(72px, 8vw, 120px) var(--gut-l); background: var(--cream-3); }
.pl-reg { --paper-c: #F6F0DE; --rule: rgba(131,99,44,.42); position: relative; display: grid; grid-template-columns: clamp(220px, 19vw, 280px) minmax(0, 1fr);
  background-color: var(--paper-c);
  background-image: repeating-linear-gradient(115deg, rgba(131,99,44,.045) 0 1px, transparent 1px 7px), repeating-linear-gradient(65deg, rgba(10,22,40,.03) 0 1px, transparent 1px 9px), radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.7), transparent 60%);
  border: 1px solid var(--rule); outline: 1px solid rgba(131,99,44,.28); outline-offset: -7px; box-shadow: var(--lift-hi); }
/* the counterfoil: the register's own particulars, behind a perforation */
.pl-reg-stub { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 2.6vw, 38px) 26px 30px; background: rgba(131,99,44,.05); border-right: 2px dashed var(--rule); }
.pl-reg-stub::before, .pl-reg-stub::after { content: ''; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream-3); }
.pl-reg-stub::before { top: -10px; } .pl-reg-stub::after { bottom: -10px; }
.pl-reg-stub .k { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.pl-reg-stub .t { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-family: var(--serif-display); font-size: 24px; line-height: 1.15; color: var(--navy); }
.pl-reg-stub dl { margin: 0; display: grid; gap: 8px; }
.pl-reg-stub dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px dotted var(--rule); }
.pl-reg-stub dt { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pl-reg-stub dd { margin: 0; font-family: var(--serif); font-size: 14.5px; font-style: italic; color: var(--navy); }
.pl-reg-stub .nb { margin: 4px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }
/* the stamp: pressed once, slightly turned, the register's own (never an official mark) */
.pl-stamp { align-self: flex-start; margin-top: auto; display: grid; place-content: center; justify-items: center; gap: 1px; width: 112px; height: 112px; border-radius: 50%; rotate: -9deg;
  color: var(--navy); border: 2px solid var(--navy); box-shadow: inset 0 0 0 4px var(--paper-c), inset 0 0 0 5.5px var(--navy); opacity: .82; }
.pl-stamp b { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pl-stamp small { font-family: var(--serif); font-size: 12px; font-style: italic; }
.pl-stamp i { font-family: var(--sans); font-size: 8.5px; font-style: normal; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
/* the entries */
.pl-reg-body { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 36px) 0; }
.pl-reg-cols, .pl-srcl li { display: grid; grid-template-columns: 46px minmax(0, 1.15fr) minmax(0, 1fr) 112px; column-gap: clamp(16px, 2vw, 28px); }
.pl-reg-cols { margin: 0; padding: 0 0 10px; border-bottom: 3px double var(--rule); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pl-srcl { position: relative; margin: 0; padding: 0; list-style: none; }
.pl-srcl::before { content: ''; position: absolute; top: 0; bottom: 0; left: 46px; width: 3px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); pointer-events: none; }
.pl-srcl li { position: relative; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--bar) + var(--follow, 0px) + 24px); }
.pl-srcl li:last-child { border-bottom: 0; }
.pl-srcl .n { font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1; color: var(--gold); transition: color 200ms; }
.pl-srcl .st { padding-left: 6px; }
.pl-srcl h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.pl-srcl .st p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); }
.pl-srcl .au { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }   /* an Act's title is cited upright (OSCOLA, t36) */
.pl-srcl .au a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(10,22,40,.35); text-underline-offset: 3px; transition: text-decoration-color 200ms; }
.pl-srcl .au a:hover { text-decoration-color: currentColor; }
.pl-srcl .au a:focus-visible, .pl-srcl .self:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pl-srcl .st-s { font-style: normal; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--gold-ink); }
.pl-srcl .ck { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; font-family: var(--serif); font-size: 13.5px; font-style: italic; line-height: 1.4; color: var(--muted-2); }
.pl-srcl .ck .ck-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pl-srcl .self { font-family: var(--serif); font-size: 16px; line-height: 1; text-decoration: none; color: var(--gold); opacity: .45; transition: opacity 200ms, color 200ms; }   /* faint at rest, never invisible: a link nobody can see is a link nobody finds */
/* the entry being read: its number inks in and its own link shows (a reading aid; no lift) */
.pl-srcl li:hover .n, .pl-srcl li:focus-within .n, .pl-srcl li:target .n { color: var(--navy); }
.pl-srcl li:hover .self, .pl-srcl li:focus-within .self, .pl-srcl li:target .self { opacity: 1; }
.pl-srcl li:target { background: linear-gradient(90deg, rgba(212,169,67,.16), transparent 70%); }
.pl-reg-strip { margin: 22px calc(-1 * clamp(18px, 2.4vw, 36px)) 0; padding: 11px clamp(18px, 2.4vw, 36px) 13px; border-top: 1px dashed var(--rule); background: rgba(131,99,44,.06);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .22em; color: #4A5160; white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* once, on arrival: the entries ink in, then the stamp is pressed */
.pl-reg.is-armed .pl-srcl li { opacity: 0; translate: 0 10px; }
.pl-reg.is-in .pl-srcl li { transition: opacity 450ms, translate 550ms var(--ease-stone); }
.pl-reg.is-in .pl-srcl li:nth-child(2) { transition-delay: 90ms; } .pl-reg.is-in .pl-srcl li:nth-child(3) { transition-delay: 180ms; } .pl-reg.is-in .pl-srcl li:nth-child(4) { transition-delay: 270ms; } .pl-reg.is-in .pl-srcl li:nth-child(5) { transition-delay: 360ms; }
.pl-reg.is-armed .pl-stamp { opacity: 0; }
.pl-reg.is-in .pl-stamp { animation: plStamp 560ms cubic-bezier(.3, 1.5, .6, 1) 700ms both; }
@keyframes plStamp { 0% { opacity: 0; scale: 1.6; } 60% { opacity: .9; scale: .94; } 100% { opacity: .82; scale: 1; } }

/* ── 7. THE TWO DOORS (about's close, the same measures) ── */
.pl-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-doors > .sr-only { margin: 0; }
.pl-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); }
.pl-half .ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 50%; transition: transform 900ms var(--ease-stone); }
.pl-half .ph.is-home { background-image: url('photos/bg-finished-home-960.webp'); }
.pl-half .ph.is-trade { background-image: url('../bg-carpentry.jpg'); background-image: image-set(url('photos/bg-carpentry-800.webp') type('image/webp'), url('../bg-carpentry.jpg') type('image/jpeg')); }
.pl-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%); }
.pl-half:hover .ph { transform: scale(1.05); }
.pl-half .in { display: flex; flex-direction: column; gap: 10px; max-width: 600px; padding: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 48px) clamp(28px, 4vw, 64px) var(--gut-l); }
.pl-half + .pl-half .in { padding-left: clamp(28px, 3.4vw, 56px); }
.pl-half .k { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.pl-half b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; }
.pl-half .go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 0 22px; border-radius: 0; background: var(--gold-soft); color: var(--navy);
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 12px 24px -14px rgba(0,0,0,.7);
  transition: background-color 220ms, transform 220ms var(--ease-quick), box-shadow 220ms; }
.pl-half .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms; }
.pl-half:hover .go { background: var(--gold-hi); transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(0,0,0,.8); }
.pl-half:active .go { transform: scale(.98); }
.pl-half:hover .go svg { transform: translateX(4px); }
.pl-half.is-trade .go { background: var(--cream); }
.pl-half.is-trade:hover .go { background: #fff; }
.pl-half:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: -6px; }
.pl-half + .pl-half { box-shadow: inset 1px 0 0 rgba(250,248,243,.12); }

/* ── NARROWER ── */
@media (max-width: 1180px) {
  .pl-b-rec, .pl-b-watch, .pl-b-site, .pl-b-qtr, .pl-b-pack, .pl-b-roles, .pl-b-spend { grid-column: 1 / -1; }
  .pl-b-homes { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}
@media (max-width: 1000px) {
  .pl-same-h { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pl-same-h p:not(.pl-sk) { grid-column: 1; grid-row: auto; }
  .pl-calc-b { grid-template-columns: minmax(0, 1fr); }
  /* the rail above the table, its plans side by side, and help after the table (s45) */
  .pl-cmp .pl-in { grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 4vw, 36px); }
  .pl-rail { display: contents; }
  .pl-rail.is-armed > *, .pl-rail.is-armed .pl-di { opacity: 1; transform: none; }
  .pl-cmp .pl-head, .pl-dec, .pl-read, .pl-help, .pl-cmp .pl-tw { grid-column: 1; }
  .pl-dec { order: 1; } .pl-read { order: 2; } .pl-cmp .pl-tw { order: 3; } .pl-help { order: 4; }
  .pl-dec-l { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
  .pl-dec-l.n4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .pl-idx { display: none; }
  .pl-key { margin: 0; padding: 0; border-top: 0; }
  .pl-read .pl-rk { display: none; }
  .pl-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-reg { grid-template-columns: minmax(0, 1fr); }
  .pl-reg-stub { border-right: 0; border-bottom: 2px dashed var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  .pl-reg-stub > :not(.pl-stamp) { grid-column: 1; }
  .pl-reg-stub .pl-stamp { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
  .pl-reg-stub::before, .pl-reg-stub::after { display: none; }
  .pl-reg-cols, .pl-srcl li { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
  .pl-reg-cols span:last-child { display: none; }
  .pl-srcl li > .ck { grid-column: 2 / -1; }
  .pl-srcl::before { left: 40px; }
}
@media (max-width: 900px) {
  .pl-check-in { grid-template-columns: minmax(0, 1fr); }
  .pl-next { position: relative; top: auto; }
  .pl-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pl-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the questions band on a phone: the photograph above, the questions on cream (as the Records band at 900) */
  .pl-ask { background: var(--cream); color: var(--ink); }
  .pl-ask-ph { bottom: auto; height: 420px; }
  .pl-ask-ph .soft { display: none; }
  .pl-ask-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pl-ask-side { min-height: 420px; padding: 56px 0 32px; }
  .pl-ask-plate { position: static; }
  .pl-qs { padding: 36px 0 64px; }
  .pl-qs::before { color: var(--muted); }
  .pl-q, .pl-q:last-child { border-color: var(--line); }
  .pl-q .q { color: var(--navy); }
  .pl-q .a1 { color: var(--gold); }
  .pl-q .a p { color: var(--muted-2); }
  .pl-q summary:hover { background: rgba(10,22,40,.03); }
  .pl-q summary::after { box-shadow: inset 0 0 0 1px var(--line-2); background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--navy), var(--navy)); }
  .pl-q summary:hover::after, .pl-q[open] summary::after { box-shadow: inset 0 0 0 1px var(--navy); background-color: rgba(10,22,40,.05); }
  .pl-q summary:focus-visible, .pl-q .a .pl-qt a:focus-visible { outline-color: var(--navy); }
  .pl-q .a .pl-qt a { color: var(--navy); box-shadow: inset 0 -1px 0 rgba(10,22,40,.3); }
  .pl-q .a { padding-right: 0; }
}
@media (max-width: 720px) {
  .pl-stage::before { top: calc(var(--bar) - 8vw); height: 100vw; background-size: auto 100%; background-position: 50% 0; }
  .pl-stage::before { background-image: image-set(url('photos/bg-fork-night-960.webp') type('image/webp'), url('../bg-fork-night.jpg') type('image/jpeg')); }   /* rp92: a phone draws the night at 960 wide */
  .pl-ctl { flex-direction: column; align-items: stretch; }
  .pl-dl dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pl-sheet { padding: 32px 20px 24px; }
  .pl-line li { padding-right: 8px; }
  .pl-line b { font-size: 22px; }
  .pl-next { padding: 24px 20px 20px; }
  .pl-b-rec, .pl-b-pack, .pl-b-roles { grid-template-columns: minmax(0, 1fr); }
  .pl-b-rec .pl-b-tx, .pl-b-rec .pl-rc, .pl-photos { grid-column: 1; grid-row: auto; }
  .pl-photos { min-height: 230px; margin: 10px 0 8px; }
  .pl-qtr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bars" "key" "file"; }
  .pl-pack { min-height: 340px; margin-top: 8px; }
  .pl-roles .is-client { margin-left: 16px; }
  .pl-homes .col { min-height: 0; }
  .pl-w-row { grid-template-columns: 8px minmax(0, 1fr); row-gap: 4px; }
  .pl-w-row em { grid-column: 2; text-align: left; }
  .pl-same-l { grid-template-columns: minmax(0, 1fr); }
  .pl-calc-read { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pl-calc-r + .pl-calc-r { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--on-navy-line); }
  .pl-pick { margin-left: 0; }
  .pl-tw { padding: 4px 10px 8px; }
  .pl-tbl { font-size: 14px; }
  .pl-tw[data-aud="landlords"] { overflow-x: auto; }
  .pl-tbl thead th { position: static; }
  .pl-tbl.n4:not(.is-pair) { min-width: 640px; }
  .pl-tbl.n4:not(.is-pair) tbody th[scope="row"] { position: sticky; left: 0; background: var(--paper); }
  .pl-tbl tbody th[scope="row"], .pl-tbl.n4 tbody th[scope="row"] { width: 38%; padding: 12px 8px 12px 20px; }
  .pl-tbl tbody th[scope="row"]::before { left: 4px; top: 19px; }
  .pl-road { grid-template-columns: minmax(0, 1fr); }
  /* the road's board on a phone: each plan's name above its own full-width track */
  .pl-tl { --lab: 0px; --gap: 0px; padding-left: 16px; padding-right: 16px; }
  .tl-over { left: 16px; right: 16px; }
  .tl-axis-k { display: none; }
  .tl-lane { grid-template-columns: 0px minmax(0, 1fr); grid-template-rows: auto 30px; height: auto; padding-top: 10px; }
  .tl-lane .tl-lab { grid-column: 1 / -1; grid-row: 1; }
  .tl-lane .tl-track { grid-row: 2; }
  .tl-lab { position: relative; z-index: 1; flex-direction: row; align-items: baseline; gap: 10px; padding-left: 14px; }
  .tl-lab b { font-size: 16px; }
  .tl-away { display: inline; margin-left: auto; padding-right: 2px; }
  .tl-trail b { display: none; }
  .tl-tick b { font-size: 9px; letter-spacing: .1em; }
  .pl-tbl td { padding: 12px 8px; }
  .pl-tbl td.yes { padding-left: 28px; }
  .pl-tbl .yes svg { left: 8px; top: 15px; }
  .pl-tbl thead th { padding: 12px 8px 10px; }
  .pl-tbl thead th b { font-size: 18px; }
  .pl-q summary { column-gap: 16px; }
  .pl-srcl::before { display: none; }
  .pl-reg-cols { display: none; }
  .pl-srcl li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
  .pl-srcl li > .st, .pl-srcl li > .au, .pl-srcl li > .ck { grid-column: 2; }
  .pl-srcl .st { padding-left: 0; }
  .pl-srcl .ck { justify-content: flex-start; gap: 14px; }
  .pl-srcl .self { opacity: 1; }
  .pl-reg-strip { font-size: 9.5px; letter-spacing: .12em; }
  .pl-doors { grid-template-columns: minmax(0, 1fr); }
  .pl-half { min-height: 320px; }
  .pl-half + .pl-half { box-shadow: inset 0 1px 0 rgba(250,248,243,.12); }
}
@media (forced-colors: active) {
  .tl-y27::after, .pl-reg-strip, .pl-stamp { display: none; }
  .pl-di::before, .pl-di.is-mark::before, .pl-idx a[aria-current="true"]::before, .pl-key .k-mark { forced-color-adjust: none; background: CanvasText; }
  .pl-di, .pl-help { border: 1px solid CanvasText; }
  .pl-di .pill { border: 1px solid CanvasText; }
  .pl-di .fit { border: 1px solid CanvasText; }   /* decoration only: in forced colours it would print at full strength */
}
@media (prefers-reduced-motion: reduce) {
  .pl-go, .pl-rc, .pl-rc svg, .pl-swap-b, .pl-b, .pl-photos .ph, .pl-srcl li, .pl-srcl a svg, .pl-half .ph, .pl-half .go, .pl-half .go svg, .pl-q summary, .pl-q summary::after, .pl-tbl tbody tr, .pl-pick, .pl-ask-more svg, .pl-chart .mk, .pl-split .net, .pl-split .fee { transition: none; }
  .pl-b:hover, .pl-b:has(.pl-rc):hover, .pl-half:hover .ph, .pl-half:hover .go, .pl-pick:hover, .pl-go:hover { transform: none; }
  .pl-q summary:hover { padding-left: 0; }
  .pl-q[open] summary::after { transform: none; }
  .pl-b-rec:hover .ph { rotate: var(--r); translate: none; }
  .pl-bento *, .pl-road, .pl-road *, .pl-tl *, .pl-same-l li, .pl-same-l *, .pl-srcl li, .pl-stamp { animation: none !important; }
  .pl-tl *, .pl-stop, .tl-lane { transition: none !important; }
  .pl-di, .pl-di::before, .pl-idx a, .pl-idx a::after, .pl-help .go svg, .pl-tbl td, .pl-tbl thead th { transition: none; }
  .pl-di:hover, .pl-idx a:hover::after, .pl-help .go a:hover svg { transform: none !important; }
}

/* ── THE SWITCH THAT FOLLOWS YOU (rp96) ──
   research-50-switch-band a1 to a20. One row under the top bar, of the top
   bar's own cream glass, holding the two choices that change what is below:
   whose plans, and how often you pay. It arrives once the stage's switch has
   gone under the top bar and leaves after the questions, sliding from under
   the bar (reduced motion: it fades). While it is out of sight it is hidden
   from the keyboard and from screen readers (visibility). Its height is
   --follow, added to every sticky top and scroll offset on the page. */
.pl-follow { display: none; }   /* with no script both audiences are on the page, and there is nothing to switch */
.js-plans .pl-follow { display: block; position: fixed; left: 0; right: 0; top: var(--bar); z-index: 130; visibility: hidden; opacity: 0; transform: translateY(-100%);
  background: rgba(250,248,243,.9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -20px rgba(10,22,40,.5);
  transition: transform 280ms var(--ease-stone), opacity 200ms ease, visibility 0s linear 280ms; }
.pl-follow.is-on { visibility: visible; opacity: 1; transform: none; transition: transform 320ms var(--ease-stone), opacity 200ms ease, visibility 0s; }
.pl-follow-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 48px; padding: 6px var(--gut-r) 6px var(--gut-l); }
.pl-follow-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pl-follow-k { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.pl-follow .pl-seg { flex: none; }
.pl-follow .sm { display: none; }
html.is-holding { overflow-anchor: none; scroll-behavior: auto !important; }

/* whose this band is: one small label on each band that changes with the switch (a23, a24) */
.pl-whose { display: none; }
.js-plans .pl-whose { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; padding: 4px 10px 4px 9px; border-radius: 999px; vertical-align: 1px;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.18); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 760px) { .js-plans .pl-whose { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
.js-plans .pl-whose::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
.pl-same .pl-whose, .pl-ask .pl-whose { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(250,248,243,.32); }
@media (max-width: 720px) {
  .pl-follow .lg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pl-follow .sm { display: inline; }
  .pl-follow-k { display: none; }
  .pl-follow-in { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .pl-follow .pl-seg.is-mini label { padding: 6px 10px; letter-spacing: .12em; }
  .js-plans .pl-whose { margin: 8px 0 0; display: flex; width: max-content; }
}
@media (max-height: 500px) { .js-plans .pl-follow { display: none; } }
@media (prefers-reduced-motion: reduce) { .pl-follow, .pl-follow.is-on { transform: none; } }
@media (forced-colors: active) { .pl-follow { border-bottom: 1px solid CanvasText; } .js-plans .pl-whose { border: 1px solid CanvasText; } }

/* rp155: while nothing is on sale (hyyryn-mvp.js) the stage says what Hyyryn costs, and points to it, in the stage's own
   light: one quiet outlined button on the night photograph */
.pl-closed .pl-stage-in { padding-bottom: clamp(40px, 6vw, 72px); }
.pl-closed .pl-closed-go { display: flex; justify-content: center; margin: 30px 0 0; }
.pl-closed .pl-btn { display: inline-flex; width: auto; min-width: 240px; color: var(--on-navy, #FAF8F3);
  background: rgba(250, 248, 243, .06); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .42); }
.pl-closed .pl-btn:hover { background: rgba(250, 248, 243, .14); box-shadow: inset 0 0 0 1px rgba(250, 248, 243, .7); }
.pl-closed .pl-btn:focus-visible { outline: 2px solid var(--gold-soft, #D4A943); outline-offset: 3px; }