/* ═══════════════════════════════════════════════════════════════════════════
   lodgd.css — THE ONE STYLESHEET FOR EVERY PUBLIC PAGE

   The home page, the guides, the council pages, the housing pipeline, the
   legal pages, the register page and the 404 all take their look from this
   file. The app behind sign-in never loads it (these element rules would
   restyle every page there), but since 26 Sep 2026 it shares this look's ink,
   blue and two faces — declared again in src/app/globals.css — on a white
   ground of its own (27 Sep: the cream was "far too warm" for the tool).
   ⚠ Change the ink or the blue here, change it there — scripts/public_canary.py
   compares every colour both files name, every night, and fails on a difference.

   ⛔ ONE COPY. On 30 Aug two files carrying one look drifted apart (three
   different creams) and Charlie spotted it before anyone else did. A rule two
   public pages share lives here, once, and nowhere else. The nav and the
   footer are one copy too: src/lib/publicChrome.ts writes them for every page.

   The system, set on the home page 25 Sep 2026: a cream ground, a deeper cream
   for alternate sections, paper for plates; warm ink in three strengths;
   hairlines, not boxes; Lodgd blue and no other colour. Geist (600 headings,
   700 hero, 500 body) and IBM Plex Mono for eyebrows, nav, buttons and labels.
   Square buttons. Sections fill the screen; text and picture alternate sides.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Geist';src:url('/fonts/geist-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* ⚠ `html:root`, NOT `:root`, AND IT IS NOT A TYPO. The council pages and the
   ranking are React pages, so the app's globals.css loads there too, and it
   defines its own --cream (#f6f2ed). Two `:root` blocks are decided by which
   stylesheet happens to load last. `html:root` outranks `:root` whatever the
   order, so these tokens win on every public page, and any token the app
   adds later with a name used here cannot take over either. */
html:root{
  color-scheme:light;
  --dark:#1d1710; --dark2:#2a2318; --cream:#f7f1e7; --cream2:#efe7d9; --paper:#fffdfa;
  --ink:#1d1710; --ink2:#5a5346; --ink3:#857d6c;
  --hair:#e2d9c8; --on-dark:#f7f1e7; --on-dark2:#a89f8c;
  --blue:#1449b8; --blue-deep:#0e3486; --blue-lt:#8fb0f0;
  --r1:#e8e0d0; --r2:#bccbe8; --r3:#7f9fdc; --r4:#1449b8; --r5:#0a2a70;
  --f:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --pad:clamp(16px,4vw,72px); --max:1240px; --navh:62px;
  --hw:600; --hw1:700; --bw:500;   /* heading, hero and body weights: Semibold, chosen 25 Sep */
  /* the top section (nav + opening screen) and the footer that matches it: a warmer cream than
     the page ground, with the zoom behind the words. Charlie, 26 Sep: the top "looks quite light
     … slightly warmer than white". Warmer (more yellow) rather than darker, so it still sits
     above --cream2, the band under it. zoom.js reads it from the page, not a copy. */
  --top:#f5edde;
  --nav-bg:var(--top); --nav-ink:var(--ink); --nav-ink2:var(--ink2); --nav-line:var(--hair);
  --nav-mark:var(--blue); --nav-btn:rgba(29,23,16,.3);
  --hero-bg:var(--top); --hero-ink:var(--ink); --hero-ink2:var(--ink2); --hero-ink3:var(--ink3);
  --hero-line:rgba(29,23,16,.3); --hero-motif:var(--blue);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);scroll-padding-top:var(--navh)}
/* A link to a section of the same page scrolls there instead of jumping — Charlie,
   25 Sep: "when clicking something from the header i want it to scroll". Not for
   readers whose system asks for less motion. ⚠ On the React pages Next.js 16 would
   let this animate every page-to-page move too; data-scroll-behavior="smooth" on
   <html> (src/app/layout.tsx) keeps those instant. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{background:var(--cream);color:var(--ink);font:var(--bw) 17px/1.65 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tn{font-variant-numeric:tabular-nums}

/* ── nav ── */
.nav{background:var(--nav-bg);color:var(--nav-ink);height:var(--navh);padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;border-bottom:1px solid var(--nav-line)}
.wm{display:flex;align-items:center;gap:9px;font:500 21px/1 var(--f);letter-spacing:-.02em;text-decoration:none}
.wm i{width:15px;height:15px;border-radius:50%;border:3px solid var(--blue-lt);display:block}
.nav ul{display:flex;gap:28px;list-style:none;font:400 13.5px/1 var(--m)}
.nav .wm i{border-color:var(--nav-mark)}
.nav ul a{text-decoration:none;color:var(--nav-ink2)}
.nav ul a:hover{color:var(--nav-ink)}
.nav .reg{font:400 13px/1 var(--m);color:var(--nav-ink);text-decoration:none;border:1px solid var(--nav-btn);padding:10px 14px}
.nav .reg:hover{background:var(--nav-ink);color:var(--nav-bg)}
.nav .reg{white-space:nowrap}

/* ── every section fills the screen ── */
/* ⚠ The padding is only ever a floor: content is centred in a full screen, so a
   section that fits looks the same at any padding. It decides whether the TALL
   ones fit. At 7vw/110px the map screen ran 35px past one screen at 1440x900
   (671px of content + 2x101px, against 838px); at 5vw/80px it fits. */
.screen{min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,5vw,80px) var(--pad);position:relative}
.alt{background:var(--cream2)}
.inner{max-width:var(--max);margin:0 auto;width:100%}
.eyebrow{font:400 13px/1.4 var(--m);color:var(--blue);letter-spacing:.02em}
.open{text-align:center;max-width:62ch;margin:0 auto}
.open h2{margin-top:18px;font:var(--hw) clamp(28px,3.6vw,50px)/1.12 var(--f);letter-spacing:-.025em}
.open p{margin-top:20px;color:var(--ink2);font-size:17px;text-wrap:balance}
.open p.eyebrow{margin-top:0;color:var(--blue);font-size:13px}
h3.h{margin-top:16px;font:var(--hw) clamp(26px,3vw,42px)/1.14 var(--f);letter-spacing:-.025em;max-width:18ch}
.txt p.b{margin-top:20px;color:var(--ink2);font-size:16.5px;line-height:1.7;max-width:48ch}
.txt p.b+p.b{margin-top:14px}

/* ── the opening screen ── */
.hero{background:var(--hero-bg);color:var(--hero-ink);align-items:center;text-align:center;overflow:hidden}
.flock{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero>*:not(.flock){position:relative;z-index:1}
/* the zoom: state, region, council, suburb, site, drawn behind the words (script at the end) */
.hero .hero-zoom{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero h1{font:var(--hw1) clamp(40px,6.6vw,96px)/1.02 var(--f);letter-spacing:-.035em;max-width:16ch;margin:0 auto}
.hero p{margin:24px auto 0;color:var(--hero-ink2);font-size:clamp(18px,1.5vw,22px);max-width:40ch;line-height:1.45;text-wrap:balance}
.acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero .cue{position:absolute;bottom:78px;left:0;right:0;font:400 12px/1 var(--m);color:var(--hero-ink3);letter-spacing:.06em}
.hero .btn.line{color:var(--hero-ink);border-color:var(--hero-line);background:var(--hero-bg)}
.hero .btn.line:hover{background:var(--hero-ink);color:var(--hero-bg);border-color:var(--hero-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;
  background:var(--blue);color:#fff;text-decoration:none;font:400 13px/1 var(--m);letter-spacing:.04em;border:1px solid var(--blue)}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.line{background:transparent;color:var(--on-dark);border-color:rgba(247,241,231,.4)}
.btn.line:hover{background:var(--on-dark);color:var(--dark)}
.btn.ink{background:var(--dark);border-color:var(--dark)}
.btn.ink:hover{background:transparent;color:var(--dark)}
.btn.white{background:#fff;color:var(--blue);border-color:#fff}
.btn.white:hover{background:transparent;color:#fff}

/* ── three figures ── */
.figs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(24px,4vw,64px);
  max-width:var(--max);margin:clamp(48px,6vw,96px) auto 0;width:100%}
.figs b{display:block;font:var(--hw) clamp(34px,3.8vw,54px)/1 var(--f);letter-spacing:-.03em}
.figs span{display:block;margin-top:16px;font-size:15.5px;color:var(--ink2);line-height:1.55;max-width:32ch}

/* ── six stages ── */
.seq{display:grid;grid-template-columns:repeat(6,minmax(min-content,1fr));   /* a column may widen to fit its longest word, never spill */
  margin-top:clamp(44px,5vw,80px);
  border-top:1px solid var(--ink)}
.step{padding:22px clamp(12px,1.4vw,22px) 0 0;position:relative}
.step+.step{padding-left:clamp(12px,1.4vw,22px);border-left:1px solid var(--hair)}
.step .n{font:400 12.5px/1 var(--m);color:var(--ink3)}
.step .n em{font-style:normal;color:var(--blue);margin-right:8px}
.step .v{margin-top:26px;font:var(--hw) clamp(24px,2.4vw,34px)/1 var(--f);letter-spacing:-.025em}
.step .v.q{color:var(--ink3)}
.step .v.a{color:var(--blue)}
.step .d{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink2)}

/* ── two-column rows ── */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);
  align-items:center;max-width:var(--max);margin:0 auto;width:100%}
.row.rev .txt{order:2}
.plate{background:var(--paper);border:1px solid var(--hair);position:relative}

/* the place ladder, left-ruled, one rung open */
.ladder{margin-top:28px;border-left:2px solid var(--hair)}
.rung{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:14px 0 14px clamp(18px,2.4vw,30px);color:inherit;font:inherit;position:relative}
.rung+.rung{border-top:1px solid var(--hair)}
.rung b{font:500 18px/1.3 var(--f)}
.rung small{font:400 12px/1.6 var(--m);color:var(--ink3);align-self:center}
.rung p{grid-column:1/-1;display:none;color:var(--ink2);font-size:15px;line-height:1.6;max-width:44ch}
.rung[aria-pressed="true"] p{display:block}
.rung[aria-pressed="true"]::before{content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:2px;background:var(--blue)}
.rung:hover b{color:var(--blue)}
/* drawn by /home/ladder.js; the plate's paper shows until it has */
#zoom{display:block;width:100%;aspect-ratio:5/4;max-width:100%}

/* ── the map ── */
.mapgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);
  align-items:start;max-width:var(--max);margin:0 auto;width:100%}
.mapgrid.rev{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}
.mapgrid.rev .mapside{order:2}
.measures{margin-top:26px;border-left:2px solid var(--hair)}
.measure{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;color:inherit;font:inherit;
  padding:12px 0 12px clamp(16px,2vw,26px);position:relative}
.measure+.measure{border-top:1px solid var(--hair)}
.measure b{font:500 16.5px/1.3 var(--f)}
.measure p{display:none;margin-top:8px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.measure[aria-pressed="true"] p{display:block}
.measure[aria-pressed="true"]::before{content:"";position:absolute;left:-2px;top:10px;bottom:10px;width:2px;background:var(--blue)}
.measure:hover b{color:var(--blue)}
.find{margin-top:26px;position:relative}
.find label{font:400 12px/1 var(--m);color:var(--ink3);display:block;margin-bottom:10px}
.find input{width:100%;height:48px;border:1px solid var(--ink3);background:var(--paper);padding:0 14px;
  font:400 15px var(--f);color:var(--ink);outline:0;border-radius:0}
.find input:focus{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.res{position:absolute;left:0;right:0;top:100%;background:var(--paper);border:1px solid var(--ink3);border-top:0;
  z-index:10;display:none;max-height:320px;overflow:auto}
.res.on{display:block}
.res .gl{display:block;font:400 11px/1 var(--m);color:var(--ink3);padding:12px 14px 6px;letter-spacing:.06em;text-transform:uppercase}
.res a{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;text-decoration:none;font-size:14.5px}
.res a small{font:400 11.5px/1.6 var(--m);color:var(--ink3);white-space:nowrap}
.res a[aria-selected="true"],.res a:hover{background:var(--cream2)}
.res .none{padding:14px;font-size:14px;color:var(--ink2)}
.mapbox{background:var(--paper);border:1px solid var(--hair);padding:clamp(14px,2vw,26px)}
#mapsvg{display:block;width:100%;height:auto}
#mapsvg path.c{stroke:var(--paper);stroke-width:.7;cursor:pointer}
#mapsvg path.sel{fill:none;stroke:var(--dark);stroke-width:2.2;pointer-events:none}
#mapsvg .frame{fill:none;stroke:var(--ink3);stroke-width:1}
#mapsvg .lead{stroke:var(--ink3);stroke-width:.8;stroke-dasharray:3 3}
#mapsvg text{font:400 17px var(--m);fill:var(--ink3);letter-spacing:.08em}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font:400 11.5px/1.4 var(--m);color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:14px;height:10px;display:block;border:1px solid var(--hair)}
.readout{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.readout .nm{font:500 17px/1.25 var(--f)}
.readout .rg{font:400 11.5px/1.5 var(--m);color:var(--ink3);margin-top:4px}
.readout dt{font:400 11px/1.4 var(--m);color:var(--ink3)}
.readout dd{font:var(--hw) 20px/1.2 var(--f);letter-spacing:-.02em;margin-top:6px}
.readout .on dd{color:var(--blue)}

/* ── counting ── */
.split{background:var(--paper);border:1px solid var(--hair);padding:clamp(22px,3vw,40px)}
.split .tot{font:var(--hw) clamp(40px,4.4vw,64px)/1 var(--f);letter-spacing:-.035em}
.split .tl{margin-top:10px;font:400 12.5px/1.5 var(--m);color:var(--ink3)}
.bar{display:flex;height:56px;margin-top:34px}
.bar i{display:block;height:100%}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:22px}
.parts div{border-top:2px solid var(--ink);padding-top:14px}
.parts div.cdc{border-top-color:var(--blue)}
.parts b{font:var(--hw) clamp(24px,2.4vw,32px)/1 var(--f);letter-spacing:-.025em;display:block}
.parts span{display:block;margin-top:10px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.aside{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);display:flex;gap:18px;align-items:baseline}
.aside b{font:var(--hw) 28px/1 var(--f);letter-spacing:-.02em}
.aside span{font-size:14.5px;color:var(--ink2);line-height:1.5}

/* ── the housing pipeline: greenfield land against established suburbs ── */
.panel{max-width:var(--max);margin:0 auto;width:100%;background:var(--blue);color:#fff;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(34px,5vw,72px)}
.panel .eyebrow{color:#c7d6f6}
.panel h3.h{color:#fff;max-width:20ch}
.panel p.b{color:#dbe5fa!important}
.chart{position:relative;margin:0;background:var(--paper);color:var(--ink);padding:18px 20px 14px}
.chart .lg{display:flex;flex-wrap:wrap;gap:6px 18px;font:400 12px/1.4 var(--m);color:var(--ink2);margin-bottom:6px}
.chart .lg span{display:flex;align-items:center;gap:8px}
.chart .lg i{display:block;width:18px;height:0;border-top:2px solid}
.chart .lg .se{border-color:#1449b8}
.chart .lg .sg{border-color:#5b8fe8}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:#ece4d6;stroke-width:1}
.chart .yl{font:400 10.5px var(--m);fill:var(--ink3);text-anchor:end}
.chart .xl{font:400 10.5px var(--m);fill:var(--ink3);text-anchor:middle}
.chart .le{fill:none;stroke:#1449b8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .lg2{fill:none;stroke:#5b8fe8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .pe{fill:#1449b8;stroke:var(--paper);stroke-width:2}
.chart .pg{fill:#5b8fe8;stroke:var(--paper);stroke-width:2}
.chart .pk{font:500 11.5px var(--m);fill:var(--ink2);text-anchor:middle}
.chart .el{font:500 11.5px var(--m);fill:var(--ink2)}
.chart .cx{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .hov circle{stroke:var(--paper);stroke-width:2}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .tip{position:absolute;pointer-events:none;background:var(--dark);color:var(--on-dark);padding:8px 10px;
  font:400 11.5px/1.5 var(--m);white-space:nowrap;transform:translate(-50%,-100%);z-index:2}
.chart .tip b{font-weight:500}
.chart figcaption{margin-top:8px;font:400 11.5px/1.5 var(--m);color:var(--ink3)}
.figs-table{margin-top:8px;font:400 12px/1.4 var(--m);color:var(--ink2)}
.figs-table summary{cursor:pointer;color:var(--blue)}
.figs-table table{margin-top:8px;border-collapse:collapse;width:100%}
.figs-table th,.figs-table td{padding:3px 8px 3px 0;text-align:right;border-bottom:1px solid var(--hair)}
.figs-table th:first-child,.figs-table td:first-child{text-align:left}
/* a phone draws the chart at about half its width, and its words with it: the scale gives way, the labels grow */
@media (max-width:560px){ .panel{padding:28px 18px} .chart{padding:14px 12px 12px} .chart .yl{display:none} .chart .xl,.chart .pk,.chart .el{font-size:19px} }

/* ── guides: every guide, in a grid of different sizes that fit together ── */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);
  grid-template-areas:"a a c" "b d c" "b e f" "g h h";gap:clamp(14px,1.6vw,22px);
  max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;width:100%}
.gcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 26px 22px;text-decoration:none;color:var(--ink);overflow:hidden}
.gcard .kind{font:400 11.5px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.gcard b{font:var(--hw) clamp(19px,1.6vw,23px)/1.25 var(--f);letter-spacing:-.02em;max-width:24ch}
.gcard .line{font-size:14.5px;line-height:1.5;opacity:.8;max-width:40ch}
.gcard .go{margin-top:auto;padding-top:10px;font:400 12px/1 var(--m);opacity:.85}
.gcard:hover .go{opacity:1;text-decoration:underline}
.g-a{grid-area:a}.g-b{grid-area:b}.g-c{grid-area:c}.g-d{grid-area:d}.g-e{grid-area:e}.g-f{grid-area:f}.g-g{grid-area:g}.g-h{grid-area:h}
.gcard.dark{background:var(--dark);color:var(--on-dark)}
.gcard.blue{background:var(--blue);color:#fff}
.gcard.paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.notch-tr{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 48px,100% 100%,0 100%)}
.notch-br{clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 72px) 100%,0 100%)}
.g-a b{font-size:clamp(23px,2.2vw,31px);max-width:26ch}
.g-c b{font-size:clamp(22px,2vw,28px)}
.g-a .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:10px}
.g-a .stats>span{display:flex;flex-direction:column;gap:10px;border-bottom:1px solid rgba(247,241,231,.35);padding-bottom:12px}
.g-a .stats em{font:400 12px/1.3 var(--m);font-style:normal;opacity:.75}
.g-a .stats strong{font:var(--hw) clamp(24px,2.5vw,36px)/1 var(--f);letter-spacing:-.03em}
.g-a .note{font:400 11.5px/1.4 var(--m);opacity:.6}
.g-b .gmap{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;pointer-events:none}
.g-b .gmap path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.g-b>*:not(.gmap){position:relative;z-index:1}

/* ── the black band: the free demo and the price page, sized to what it holds ── */
.askband{background:var(--dark);color:var(--on-dark2);padding:clamp(64px,8vw,112px) var(--pad)}
.ask{position:relative;text-align:center;max-width:var(--max);margin:0 auto;width:100%}
.ask h2{font:var(--hw) clamp(28px,3.6vw,50px)/1.08 var(--f);letter-spacing:-.03em;color:var(--on-dark);max-width:20ch;margin:0 auto}
.ask p{margin:20px auto 0;max-width:50ch;font-size:17px}
.ask-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ── the footer: the nav's cream, hairline and ink ── */
footer{background:var(--nav-bg);color:var(--ink2);border-top:1px solid var(--nav-line);padding:clamp(44px,5vw,72px) var(--pad) 40px}
.fgrid{max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;width:100%;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,64px);padding-top:32px;border-top:1px solid var(--hair)}
footer h4{font:500 15px/1.3 var(--f);color:var(--ink);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px;font:400 13px/1.5 var(--m)}
footer a{text-decoration:none;color:var(--ink2)}
footer a:hover{color:var(--ink)}
footer .wm i{border-color:var(--blue)}
.fbase{max-width:var(--max);margin:30px auto 0;width:100%;font:400 12px/1.6 var(--m);color:var(--ink3)}
.fbase a{color:inherit}
/* the council directory sits above the grid on the home page only; without it the grid's own rule and gap would double the footer's */
footer>.fgrid:first-child{margin-top:0;padding-top:0;border-top:0}
.fclaim{margin-top:18px;font:400 13px/1.7 var(--m);max-width:34ch}
/* the page you are on, in the nav */
.nav ul a[aria-current]{color:var(--nav-ink)}

@media (max-width:980px){
  .row,.mapgrid,.mapgrid.rev,.panel,.fgrid{grid-template-columns:1fr}
  .row.rev .txt,.mapgrid.rev .mapside{order:0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "b d" "e f" "g h"}
  .seq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{padding:20px 14px 22px 0!important;border-left:0!important;border-bottom:1px solid var(--hair)}
  .step:nth-child(even){padding-left:14px!important;border-left:1px solid var(--hair)!important}
  .nav ul{display:none}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readout>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){ .nav .reg{padding:9px 10px;font-size:12px} .parts{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "c" "b" "d" "e" "f" "g" "h"} .g-b{min-height:320px} .g-a .stats{grid-template-columns:1fr} }

/* ── what the study did not need: the council directory and a real form ── */
.readout .go{grid-column:1/-1;font:400 12px/1 var(--m);color:var(--blue);text-decoration:none;margin-top:2px}
.readout .go:hover{text-decoration:underline}
/* the council directory, in the footer */
.dir{--dir-gap:clamp(18px,3vw,40px);--dir-bleed:12px;max-width:var(--max);margin:0 auto;width:100%}
.dir-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px;margin-bottom:14px}
.dir-head h4{font:500 15px/1.3 var(--f);color:var(--ink);margin:0}
.dir-head a{font:400 12.5px/1.4 var(--m);color:var(--blue);text-decoration:none}
.dir-head a:hover{text-decoration:underline}
/* An open region and its councils are one sheet of paper: the region is a tab, and its list (.dir-list, the
   <details>' neighbour) runs straight under the region's row, as wide as the grid, in the grid's own columns.
   Inside the region's cell the list stretched the whole row and left the regions beside it over empty space
   (25 Oct). "dense" lets the regions after the list finish the row above it, so no region moves when another
   opens. The sheet reaches --dir-bleed past the words on each side, so the words stay on the grid's edges. */
.dir-regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:0 var(--dir-gap)}
.dir details{border-bottom:1px solid var(--hair)}
.dir details[open]{background:var(--paper);border-bottom-color:transparent;margin:0 calc(-1 * var(--dir-bleed));padding:0 var(--dir-bleed)}
.dir summary{display:flex;justify-content:space-between;gap:12px;padding:11px 0;cursor:pointer;list-style:none;font:400 13px/1.4 var(--m);color:var(--ink2)}
.dir summary::-webkit-details-marker{display:none}
.dir summary b{font-weight:400;color:var(--ink3)}
.dir summary:hover,.dir details[open] summary{color:var(--ink)}
.dir-list{display:none;grid-column:1/-1;columns:3;column-gap:var(--dir-gap);margin:0 calc(-1 * var(--dir-bleed));padding:8px var(--dir-bleed) 18px;background:var(--paper)}
.dir details[open]+.dir-list{display:block}
.dir-list a{display:block;break-inside:avoid;padding:3px 0;font:400 13px/1.45 var(--f);color:var(--ink2);text-decoration:none}
.dir-list a:hover{color:var(--blue);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:980px){ .dir-regions{grid-template-columns:repeat(2,minmax(0,1fr))} .dir-list{columns:2} }
@media (max-width:560px){ .dir{--dir-bleed:10px} .dir-regions{grid-template-columns:1fr} .dir-list{columns:1} }

/* ── a document: the legal pages ── */
/* The title in its own band, then the text, with each numbered heading in a
   left column beside its first paragraph. The grid does the pairing, so the
   text needs no wrapper and stays exactly as written: a heading goes in column
   1, everything else in column 2, and the grid places items in order without
   back-filling (grid-auto-flow:row), so each heading starts a new row and its
   first paragraph joins it there. */
.doc-head{padding:clamp(56px,6vw,96px) var(--pad) clamp(40px,4.5vw,64px);border-bottom:1px solid var(--hair)}
.doc-head h1{margin-top:16px;font:var(--hw) clamp(36px,4.6vw,64px)/1.04 var(--f);letter-spacing:-.03em}
.doc-head .when{margin-top:20px;font:400 13px/1.5 var(--m);color:var(--ink3)}
.doc{padding:clamp(40px,4.5vw,64px) var(--pad) clamp(72px,8vw,120px)}
.doc-body{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,68ch);column-gap:clamp(32px,5vw,88px);align-items:baseline}
.doc-body>*{grid-column:2}
.doc-body>*+*{margin-top:12px}
.doc-body>h2{grid-column:1;font:var(--hw) 17px/1.4 var(--f);letter-spacing:-.01em;color:var(--ink);
  margin-bottom:-2em}   /* a heading that wraps hangs into the empty column below it, instead of
                          making its row taller and opening a gap under a one-line paragraph */
.doc-body>h2,.doc-body>h2+*{margin-top:44px}
.doc-body>h2:first-child,.doc-body>h2:first-child+*{margin-top:0}
.doc-body p,.doc-body li{font-size:15.5px;line-height:1.75;color:var(--ink2)}
.doc-body ul{padding-left:20px}
.doc-body li+li{margin-top:6px}
.doc-body a{color:var(--blue);text-underline-offset:2px}
.doc-body strong{color:var(--ink);font-weight:600}
@media (max-width:820px){
  .doc-body{grid-template-columns:minmax(0,1fr)}
  .doc-body>*,.doc-body>h2{grid-column:1}
  .doc-body>h2{margin-top:40px;margin-bottom:0}
  .doc-body>h2+*,.doc-body>h2:first-child+*{margin-top:8px}
  .doc-body>h2:first-child{margin-top:0}
}

/* ── one message on its own screen: unsubscribe, the 404, the sign-in steps ── */
.solo{align-items:center;text-align:center}
.solo-in{max-width:34rem;margin:0 auto;width:100%}
.solo h1{margin-top:16px;font:var(--hw) clamp(30px,3.4vw,46px)/1.1 var(--f);letter-spacing:-.025em}
.solo-in>div>p{margin-top:16px;color:var(--ink2);font-size:16.5px;line-height:1.65}
.solo .btn{margin-top:30px}
.solo .spin{width:28px;height:28px;margin:22px auto 0;border:2px solid var(--hair);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .solo .spin{animation-duration:2.4s} }

/* ── a guide: the document layout, and the pieces an explainer needs ── */
/* The guides use the legal pages' layout, each heading beside its text, and
   add their own pieces, all drawn in the home page's terms: blue for the one
   thing that matters, ink for the rest, hairlines rather than boxes, paper for
   tables. The old pages coded outcomes green, gold and red; here a good
   outcome is blue, a conditional one pale blue, and a bad one ink. */
.doc-head h1{max-width:22ch}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:30px;font:400 12px/1.5 var(--m);color:var(--ink3)}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink2)}
.guide>h2{font-size:clamp(18px,1.4vw,21px);line-height:1.3;letter-spacing:-.015em}
.guide>p:first-child{font-size:19px;line-height:1.6;color:var(--ink)}
.guide>h3,.guide .stage-block h3{font:var(--hw) 17px/1.35 var(--f);color:var(--ink);letter-spacing:-.01em}
.guide>h3{margin-top:32px}
.guide>h3+*{margin-top:8px}
.guide ol{padding-left:22px}
.guide>ul:not([class])>li+li,.guide>ol:not([class])>li+li{margin-top:8px}
.guide em{font-style:italic}
/* a single figure: a blue panel across the whole width, as on the home page */
.guide>.stat-lead{grid-column:1/-1;margin:36px 0 0;background:var(--blue);color:#fff;
  padding:clamp(26px,3.2vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px clamp(24px,3vw,56px);align-items:center}
.stat-lead .n{font:var(--hw) clamp(44px,5vw,72px)/1 var(--f);letter-spacing:-.035em;white-space:nowrap}
.stat-lead .l{font-size:16px;line-height:1.55;color:#dbe5fa;max-width:54ch}
.guide>.stat-lead+*{margin-top:28px}
/* a heading straight above the panel sits over it, instead of hanging into it */
.guide>h2:has(+.stat-lead){margin-bottom:16px}
.guide>h2+.stat-lead{margin-top:0}
/* tables: a paper plate, hairlines between rows, figures right-aligned */
.guide>.table-wrap,.guide>.zone-table{margin-top:24px;margin-bottom:6px}
.table-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--hair);padding:4px 22px 8px}
.data-table,.zone-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.zone-table{background:var(--paper);border:1px solid var(--hair)}
.data-table th,.zone-table th{padding:14px 14px 10px 0;text-align:left;vertical-align:bottom;
  font:400 11px/1.4 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--ink)}
.zone-table th:first-child,.zone-table td:first-child{padding-left:18px}
.data-table td,.zone-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);color:var(--ink2);vertical-align:top}
.data-table tr:last-child td,.zone-table tr:last-child td{border-bottom:0}
.data-table .num{text-align:right}
.data-table td.num{white-space:nowrap}
.data-table th:last-child,.data-table td:last-child{padding-right:0}
.data-table td.num{font-variant-numeric:tabular-nums;color:var(--ink)}
.data-table td:first-child{color:var(--ink)}
.data-table a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.data-table a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.zone-from,.zone-to{font:500 12px/1.4 var(--m);white-space:nowrap;color:var(--ink)}
.zone-to{color:var(--blue)}
.doc-body .source-note{font:400 12px/1.6 var(--m);color:var(--ink3)}   /* outranks .doc-body p */
.guide>.table-wrap+.source-note{margin-top:14px}
/* a point to hold on to: a blue rule down the side, not a box */
.highlight-box,.warning-box{background:var(--cream2);border-left:2px solid var(--blue);padding:18px 24px}
.warning-box{border-left-color:var(--ink)}
.guide>.highlight-box,.guide>.warning-box{margin-top:24px;margin-bottom:8px}
.highlight-box p+p,.warning-box p+p{margin-top:10px}
/* the proposal stages: a ruled sequence, like the home page's six */
.stage-block{border-left:2px solid var(--blue-lt);padding:4px 0 4px 22px}
.guide>.stage-block+.stage-block{margin-top:18px}
.stage-block.made{border-left-color:var(--blue)}
.stage-block.terminal{border-left-color:var(--ink)}
.stage-label{font:400 12px/1.4 var(--m);letter-spacing:.04em;color:var(--ink3);margin-bottom:6px}
.stage-label.accent{color:var(--blue)}
.stage-label.green{color:var(--blue-deep)}
.stage-label.red{color:var(--ink)}
.stage-block .stage-desc{margin-top:6px}
/* lists that carry their own marks */
.guide .criteria-list,.guide .doc-list,.guide .signal-list,.guide .success-factors{list-style:none;padding:0;border-top:1px solid var(--hair)}
.guide .criteria-list li,.guide .doc-list li,.guide .signal-list li,.guide .success-factors li{padding:13px 0;border-bottom:1px solid var(--hair);position:relative}
.guide .criteria-list li{padding-left:28px}
.criteria-list li::before{content:'\2192';position:absolute;left:0;color:var(--blue);font:500 14px/1.9 var(--m)}
.doc-name{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
.signal-list,.success-factors{counter-reset:item}
.guide .signal-list li,.guide .success-factors li{counter-increment:item;padding-left:44px}
.signal-list li::before,.success-factors li::before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:13px;
  font:500 13px/1.9 var(--m);color:var(--blue)}
/* side by side: two plates, or a grid of them */
.two-col,.feature-grid,.outcome-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide>.two-col,.guide>.feature-grid,.guide>.outcome-grid{margin-top:22px;margin-bottom:8px}
.check-box,.feature-card,.outcome-card{background:var(--paper);border:1px solid var(--hair);padding:20px 22px}
.check-box-title{font:400 11.5px/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.check-box-title.positive{color:var(--blue)}
.check-box-title.negative{color:var(--ink)}
.guide .check-list{list-style:none;padding:0}
.guide .check-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55}
.guide .check-list li+li{margin-top:6px}
.check-list li::before{position:absolute;left:0;font:500 13px/1.7 var(--m)}
.check-list.positive li::before{content:'\2713';color:var(--blue)}
.check-list.negative li::before{content:'\2717';color:var(--ink3)}
.feature-title,.outcome-title{font:var(--hw) 16px/1.35 var(--f);color:var(--ink);letter-spacing:-.01em}
.feature-desc,.outcome-desc{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.tod-badge{display:inline-block;margin-bottom:10px;padding:5px 8px;background:var(--blue);color:#fff;font:400 11px/1 var(--m);letter-spacing:.08em;text-transform:uppercase}
.outcome-card{border-top:2px solid var(--blue)}
.outcome-card.conditional{border-top-color:var(--blue-lt)}
.outcome-card.refused{border-top-color:var(--ink)}
/* the other guides, at the end */
.guide>.related{margin-top:56px;padding-top:22px;border-top:1px solid var(--ink)}
.related-label{font:400 12px/1.4 var(--m);color:var(--ink3);margin-bottom:10px}
.related-links{display:grid}
.doc-body .related-link{display:block;padding:13px 0;border-bottom:1px solid var(--hair);
  color:var(--ink);text-decoration:none;font:500 16px/1.4 var(--f)}   /* outranks .doc-body a */
.doc-body .related-link:hover{color:var(--blue)}
@media (max-width:820px){
  .guide>.stat-lead{grid-template-columns:1fr}
  .two-col,.feature-grid,.outcome-grid{grid-template-columns:1fr}
  .table-wrap{padding:2px 14px 6px}
}

/* ── the register page and the sign-in page ── */
/* /login is the page every call to action lands on: the claim sentence and two
   lines on one side, the form on a paper plate on the other, as the home page
   sets text beside a picture. /access, the sign-in, is the plate on its own. */
.gate .row{align-items:center}
.gate-h{font:var(--hw) clamp(32px,3.6vw,52px)/1.08 var(--f);letter-spacing:-.03em;max-width:18ch}
.gate .txt p.b{max-width:44ch}
.gate-form{padding:clamp(24px,3vw,40px);max-width:30rem;width:100%;justify-self:end}
.gate-solo{max-width:28rem;margin:0 auto;width:100%}
.gate-form h1,.gate-form h2{font:var(--hw) 24px/1.2 var(--f);letter-spacing:-.02em;margin-bottom:22px}
.gate-intro{margin:-10px 0 20px;color:var(--ink2);font-size:15px;line-height:1.6}
.gate-label{display:block;margin:0 0 8px;font:400 12px/1.4 var(--m);color:var(--ink3)}
.gate-input{display:block;width:100%;height:48px;margin-bottom:18px;padding:0 14px;border:1px solid var(--ink3);border-radius:0;
  background:var(--paper);color:var(--ink);font:400 16px var(--f);outline:0}
.gate-input::placeholder{color:var(--ink3)}
.gate-input:focus{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.gate-pw{position:relative;margin-bottom:18px}
.gate-pw .gate-input{margin-bottom:0;padding-right:44px}
.gate-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;padding:4px;cursor:pointer;color:var(--ink3);line-height:0}
.gate-btn{width:100%;cursor:pointer}
.gate-btn[disabled]{opacity:.6;cursor:default}
.gate-error{margin-top:12px;font-size:14px;line-height:1.5;color:#a3301b}
.gate-ok{margin-top:12px;font-size:14px;line-height:1.5;color:var(--blue)}
.gate-fine{margin-top:16px;font:400 12.5px/1.6 var(--m);color:var(--ink3)}
.gate-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--hair);font-size:14px;line-height:1.6;color:var(--ink2)}
.gate-link{background:none;border:0;padding:0;cursor:pointer;font:400 12.5px/1.4 var(--m);color:var(--ink3);text-decoration:none}
.gate-link:hover{color:var(--ink)}
.gate-meta{margin-top:18px}
.gate .txt a{color:var(--blue)}
.gate-done .row{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){ .gate-form{justify-self:stretch;max-width:none} }
/* the free demo's sign-up (/free-demo) — his pick, 23 Oct: one page in three groups, two questions to a row */
.fd{max-width:1040px;margin:0 auto;padding:clamp(40px,6vw,80px) 24px 96px;width:100%;justify-content:flex-start}
.fd-head{max-width:760px;margin:0 auto 32px;text-align:center}
.fd-eye{font:400 12px/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.fd-h{font:var(--hw) clamp(34px,4.2vw,56px)/1.06 var(--f);letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.fd-lead{font-size:18px;line-height:1.55;color:var(--ink2);margin:0 auto 10px;max-width:60ch;text-wrap:balance}
.fd-lead a{color:var(--blue)}
.fd-card{background:var(--paper);border:1px solid var(--hair);padding:clamp(22px,3vw,40px);max-width:880px;width:100%;margin:0 auto;position:relative}
.fd-group+.fd-group{margin-top:26px;padding-top:24px;border-top:1px solid var(--hair)}
.fd-gh{font:400 12px/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px}
.fd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.fd-wide{grid-column:1/-1}
.fd-q{position:relative;min-width:0}
.fd-q .gate-error.fd-err{margin:-12px 0 16px}
.fd-opt{color:var(--ink3)}
.fd-sel{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;padding:0 14px;border:1px solid var(--ink3);border-radius:0;background:var(--paper);color:var(--ink);font:400 16px var(--f);text-align:left;cursor:pointer;outline:0}
.fd-sel.is-empty{color:var(--ink3)}
.fd-sel:hover{border-color:var(--ink2)}
.fd-sel:focus-visible,.fd-sel[aria-expanded="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.fd-sel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-sel svg{flex:none;color:var(--ink2)}
.fd-sel-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--paper);border:1px solid var(--ink3);box-shadow:0 12px 32px rgba(29,23,16,.12);max-height:300px;overflow-y:auto}
.fd-sel-opt{padding:12px 14px;font:400 15px/1.35 var(--f);color:var(--ink);cursor:pointer;border-top:1px solid var(--hair)}
.fd-sel-opt:first-child{border-top:0}
.fd-sel-opt.is-active{background:var(--cream)}
.fd-sel-opt[aria-selected="true"]{color:var(--blue)}
.fd-tick{display:flex;gap:10px;align-items:flex-start;margin:2px 0 18px;font-size:14px;line-height:1.5;color:var(--ink2);cursor:pointer}
.fd-tick input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
.fd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.fd-foot .gate-btn{width:auto;padding:0 30px}
.fd-human{min-height:65px;min-width:300px}
.fd-fine{font:400 12.5px/1.6 var(--m);color:var(--ink3);margin:16px 0 0}
.fd-fine a,.gate-fine a{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fd-fine a:hover,.gate-fine a:hover{color:var(--ink)}
@media (max-width:760px){ .fd-grid{grid-template-columns:minmax(0,1fr)} .fd-head{text-align:left} .fd-lead{margin-left:0} .fd-human{min-width:0} }
/* the price page (/pricing, item 10): the two plans side by side on paper plates, one "are you human" check, the fine print */
.pr-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px;width:100%;margin:0 auto}
.pr-plan{background:var(--paper);border:1px solid var(--hair);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column}
.pr-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:400 12px/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.pr-tag{color:var(--blue)}
.pr-price{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.pr-price b{font:var(--hw) clamp(34px,3.6vw,44px)/1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.pr-price span{font-size:16px;color:var(--ink2)}
.pr-note{flex:1;font-size:15px;line-height:1.55;color:var(--ink2);margin:0 0 22px}
/* the introductory offer (item 58): the monthly price after the first month, right under the first month's, then the
   offer's conditions in the fine print's type; "Subscribe monthly" opens the email box in the plate */
.pr-then{font-size:16px;line-height:1.5;color:var(--ink2);margin:0 0 10px}
.pr-then b{color:var(--ink);font-weight:600}
.pr-note.pr-small{font:400 12.5px/1.6 var(--m);color:var(--ink3)}
.pr-email .gate-input{margin-bottom:12px}
.pr-email .pr-email-err{margin:-2px 0 12px}
.pr-before{font-size:14px;line-height:1.5;color:var(--ink2);margin:0 0 12px}
.pr-foot{max-width:760px;width:100%;margin:22px auto 0}
/* what the plan includes (28 Oct, his pick of three): one row per area — a grey name on the left, what it holds
   on the right, the numbers in ink, hairlines between; on a phone the name sits above */
.pr-incl{max-width:760px;width:100%;margin:28px auto 0}
.pr-incl-h{font:var(--hw) 26px/1.2 var(--f);letter-spacing:-.02em;margin:0 0 18px}
.pr-rows{border-top:1px solid var(--ink)}
.pr-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;padding:17px 0 16px;border-bottom:1px solid var(--hair)}
.pr-row-lab{font-size:15px;line-height:1.55;color:var(--ink3)}
.pr-row-val{font-size:15px;line-height:1.55;color:var(--ink2)}
.pr-row-val b{color:var(--ink);font-weight:600}
@media (max-width:760px){ .pr-row{grid-template-columns:minmax(0,1fr);gap:4px} }
.wl-card{max-width:620px}
@media (max-width:760px){ .pr-plans{grid-template-columns:minmax(0,1fr)} }

/* ⚠ On the React public pages the app's globals.css loads too, and below 768px
   it sets html,body{overflow-x:hidden}. On body that makes a scroll container
   that never scrolls, and a sticky nav inside it stops sticking. `clip` hides
   sideways overflow without making one. */
html:root,html:root body{overflow-x:clip}
.solo-lede{margin-top:16px;color:var(--ink2);font-size:16.5px;line-height:1.65}
/* the 404's ways on: a ruled list, the one thing the page is for */
.ways{margin-top:34px;border-top:1px solid var(--hair);text-align:left}
.ways a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.ways b{display:block;font:500 16.5px/1.35 var(--f);color:var(--ink)}
.ways a>span>span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--ink3)}
.ways i{font:400 14px/1 var(--m);font-style:normal;color:var(--blue)}
.ways a:hover b{color:var(--blue)}

/* ── the housing pipeline: what Lodgd shows for every council, drawn for one ── */
/* Text on one side; on the other, one council's pipeline — the sample of what is
   behind the login (.cp-bar, .cp-key and .cp-rows are the council pages' classes, below). */
.hp-row{align-items:center}
.hp-find{color:var(--blue);text-decoration:none;font:400 13px/1 var(--m);letter-spacing:.02em}
.hp-find:hover{text-decoration:underline}
.hp-ex{padding:clamp(22px,2.6vw,34px)}
.hp-ex-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.hp-ex-h b{font:500 17px/1.3 var(--f)}
.hp-ex-h span{font:400 12px/1.4 var(--m);color:var(--ink3);white-space:nowrap}
.hp-ex-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 22px}
.hp-ex-figs b{display:block;font:var(--hw) clamp(32px,3.2vw,46px)/1 var(--f);letter-spacing:-.03em}
.hp-ex-figs span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink2)}
.hp-ex .cp-bar{height:40px}
.hp-ex-sub+.cp-bar{margin-top:14px}
.hp-ex .cp-key{gap:10px;margin-top:16px}
.hp-ex .cp-key>span{font-size:14px}
.hp-ex-sub{margin-top:24px;padding-top:16px;border-top:1px solid var(--hair);font:400 12px/1.4 var(--m);color:var(--ink3)}
.hp-ex .cp-rows{margin-top:14px;gap:10px}
.hp-ex .cp-row{grid-template-columns:minmax(0,11rem) minmax(0,1fr) 4.5rem;font-size:14px}
@media (max-width:640px){ .hp-ex .cp-row{grid-template-columns:minmax(0,1fr) 4rem} .hp-ex .cp-row .t{grid-column:1/-1} }

/* ── the council pages (/nsw/<council>) — 128 of them, all of the search traffic ── */
/* The masthead: the council's name and what the page is on one side, its one
   comparable figure on the other, as the home page sets text beside a picture.
   Then the sections alternate cream and deeper cream, each a different shape:
   a split, a ranked list, a centred field, a blue panel, a ruled list. */
/* The top of every other page matches the nav above it — Charlie, 26 Sep, of the council pages'
   heading under the warmer nav: "warm them too". The heading band of a council page, a guide or a
   legal page, and the one screen of sign-up, sign-in, the 404 and unsubscribe. Below the top,
   everything stays on the page ground. */
.cp-head,.doc-head,.screen.solo,.screen.gate{background:var(--top)}
.cp-head{padding:clamp(52px,6vw,96px) var(--pad) clamp(44px,5vw,72px);border-bottom:1px solid var(--hair)}
.cp-head .row{align-items:end}
.cp-head .eyebrow a{color:inherit;text-decoration:none}
.cp-head .eyebrow a:hover{text-decoration:underline}
.cp-head h1{margin-top:16px;font:var(--hw) clamp(38px,5vw,72px)/1.02 var(--f);letter-spacing:-.035em;max-width:16ch}
.cp-orient{margin-top:22px;max-width:46ch;font-size:18px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.cp-statbox{border-top:1px solid var(--ink);padding-top:22px}
.cp-stat{font:var(--hw) clamp(21px,1.9vw,27px)/1.35 var(--f);letter-spacing:-.015em;color:var(--ink)}
.cp-stat b{font-weight:var(--hw);color:var(--blue);white-space:nowrap}
.cp-sub{margin-top:16px;font:400 12.5px/1.7 var(--m);color:var(--ink3)}
.cp-vint{opacity:.75}   /* the vintage of a figure: "(2024 projection)", "(2021 Census)" */
.cp-sec{padding:clamp(56px,6vw,96px) var(--pad)}
/* alternate by position, not by class: several sections are conditional, and fixed classes would put two of one shade together */
.cp-page>section:nth-of-type(odd){background:var(--cream2)}
.cp-sec h2{margin-top:14px;font:var(--hw) clamp(26px,2.8vw,40px)/1.14 var(--f);letter-spacing:-.025em;max-width:22ch}
.cp-cap{margin-top:18px;max-width:58ch;font-size:15.5px;line-height:1.65;color:var(--ink2)}
.cp-cap b{color:var(--ink);font-weight:600}
/* the pipeline: text beside the split of every application by where it stands */
.cp-split{align-items:start}
.cp-plate{padding:clamp(22px,2.6vw,34px)}
.cp-bar{display:flex;gap:2px;height:56px}
.cp-bar i{display:block;height:100%}
.cp-key{display:grid;gap:14px;margin-top:22px}
.cp-key>span{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:baseline;font-size:15px;line-height:1.5;color:var(--ink2)}
.cp-key em{width:12px;height:12px;display:block;transform:translateY(1px)}
.cp-key b{color:var(--ink);font-weight:600}
.cp-key small{display:block;margin-top:3px;font:400 11.5px/1.5 var(--m);color:var(--ink3)}
.cp-plate .cp-cap{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
/* the housing mix: a ranked list, the label beside its bar */
.cp-rows{display:grid;gap:12px;margin-top:32px;max-width:860px}
.cp-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 5.5rem;gap:18px;align-items:center;font-size:15px}
.cp-row .t{color:var(--ink2)}
.cp-row .b{height:10px;background:var(--cream2)}
.cp-page>section:nth-of-type(odd) .cp-row .b{background:var(--paper)}
.cp-row .b i{display:block;height:100%;background:var(--blue-lt)}
.cp-row .b.lead i{background:var(--blue)}
.cp-row .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
/* NSW's target, in the plate beside the homes determined: context, never a ratio */
.cp-target .cp-stat{margin-top:14px}
/* approved is not built: the one blue panel, the figure drawn as a hundred squares */
.cp-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.cp-panel h2{margin-top:14px;font:var(--hw) clamp(26px,2.8vw,40px)/1.14 var(--f);letter-spacing:-.025em;max-width:20ch;color:#fff}
.cp-panel h2 b{font-weight:var(--hw);color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.cp-panel p.b{margin-top:18px;max-width:50ch;font-size:16px;line-height:1.65;color:#dbe5fa}
.cp-panel .btn{margin-top:28px;height:auto;min-height:46px;padding:12px 24px;line-height:1.4;text-align:left}   /* names up to 37 characters: it may wrap */
.cp-panel .cp-note{margin-top:18px;max-width:52ch;font:400 12px/1.6 var(--m);color:#c7d6f6}
.cp-hundred{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:360px;margin-left:auto}
.cp-hundred i{display:block;aspect-ratio:1;background:rgba(255,255,255,.16)}
.cp-hundred i.on{background:#fff}
.cp-hundred i.part{position:relative;overflow:hidden}   /* the zoning page: part of a hundredth, filled from the foot */
.cp-hundred i.part b{position:absolute;left:0;right:0;bottom:0;background:#fff}
.cp-hundred-cap{margin:14px 0 0 auto;max-width:360px;font:400 12px/1.6 var(--m);color:#c7d6f6}
/* the latest activity: a ruled list, the record named on the left */
.cp-feed{list-style:none;margin-top:30px;border-top:1px solid var(--ink)}
.cp-feed li{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto 7rem;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px}
.cp-feed .k{font:400 11.5px/1.4 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cp-feed .k.pp{color:var(--ink3)}
.cp-feed .w{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-feed .s{font-size:13.5px;color:var(--ink3);white-space:nowrap}
.cp-feed .d{text-align:right;font:400 12.5px/1.4 var(--m);color:var(--ink3);white-space:nowrap}
/* the CDC page (item 48): the address, and under it what NSW lists the CDC for — each cut on its own line */
.cp-feed .w .a,.cp-feed .w small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-feed .w small{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink3)}
.cp-sec h2 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
/* a council's pages (item 48, 28 Oct): the row of links at the foot of its masthead — the page being read is
   marked, not linked, and its underline sits on the masthead's own rule */
.cp-head.has-tabs{padding-bottom:0}
.cp-tabs{max-width:var(--max);margin:clamp(36px,4vw,56px) auto 0;width:100%}
.cp-tabs-in{display:flex;flex-wrap:wrap;gap:4px 32px}
.cp-tabs a,.cp-tabs span{display:block;padding:0 0 14px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font:400 12.5px/1.4 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);text-decoration:none}
.cp-tabs a:hover{color:var(--blue)}
.cp-tabs [aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
/* the planning proposals page's blue panel: NSW's proposals under way, by stage — the heading's figure, drawn */
.cp-stages{display:grid;gap:14px;max-width:420px;margin-left:auto}
.cp-stages>div{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 3.5rem;gap:14px;align-items:center;font-size:14px;color:#dbe5fa}
.cp-stages i{display:block;height:10px;background:rgba(255,255,255,.16)}
.cp-stages i b{display:block;height:100%;background:#fff}
.cp-stages .v{text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-weight:500}
.cp-stages+.cp-hundred-cap{max-width:420px}
/* the zoning page (item 48, 29 Oct): NSW's map in a white frame, its key beside it — a ruled list, NSW's colour,
   the code and name, the land and its share — then the plans and NSW's latest changes side by side */
.cp-zoning{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:32px;align-items:start}
.cp-map{margin:0;background:#fff;border:1px solid var(--hair);padding:clamp(10px,1.6vw,20px)}
.cp-map a{display:block}
.cp-map img{display:block;width:100%;height:auto;max-height:860px;object-fit:contain}
.cp-map figcaption{margin-top:12px;font:400 12px/1.6 var(--m);color:var(--ink3)}
.cp-map figcaption a{display:inline;color:var(--blue)}
.cp-zones-h{font:400 12px/1.4 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.cp-fams{margin-top:14px;border-top:1px solid var(--ink)}
.cp-zones ul{list-style:none}
.cp-zones li,.cp-zones summary{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.45}
.cp-zones em{width:14px;height:14px;display:block;transform:translateY(2px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.cp-zones .n{color:var(--ink2)}
.cp-zones .n b{color:var(--ink);font-weight:600;margin-right:4px}
.cp-zones .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cp-zones .v small{display:block;font:400 11.5px/1.4 var(--m);color:var(--ink3)}
.cp-zones li.none .n{color:var(--ink3)}
/* each family folds (29 Oct, his ask: the key ran far past the map): one row — a chevron, the family, its zones'
   colours (while closed), its land and share — that opens to its zones. Residential starts open. */
.cp-zones summary{list-style:none;cursor:pointer;padding:12px 0}
.cp-zones summary::-webkit-details-marker{display:none}
.cp-zones summary>i{align-self:center;justify-self:center;width:7px;height:7px;border-right:1.5px solid var(--ink2);border-bottom:1.5px solid var(--ink2);transform:rotate(-45deg);transition:transform .15s}
.cp-zones details[open]>summary>i{transform:rotate(45deg)}
.cp-zones summary .n{font:400 12px/1.4 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cp-zones summary .sw{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.cp-zones summary .sw em{width:10px;height:10px;transform:none}
.cp-zones details[open]>summary .sw{display:none}
.cp-zones summary:hover .n{color:var(--blue)}
.cp-zones summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .cp-zones summary>i{transition:none} }
.cp-split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:32px;align-items:start}
.cp-plans{list-style:none;border-top:1px solid var(--ink)}
.cp-plans li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink)}
.cp-plans small{display:block;margin-top:3px;font-size:13px;color:var(--ink3)}
.cp-plans .v{font-variant-numeric:tabular-nums;font-weight:500}
.cp-split2 .cp-cap a{color:var(--blue)}
.cp-feed-plain{margin-top:14px}
.cp-feed-plain li{grid-template-columns:minmax(0,1fr) 7rem}
.cp-feed-plain .w{white-space:normal}
@media (max-width:980px){ .cp-zoning,.cp-split2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .cp-feed-plain li{grid-template-columns:minmax(0,1fr) auto} }
/* elsewhere: the six councils that follow this one, then the guides and the method */
.cp-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--hair)}
.cp-links a{display:block;padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:15.5px}
.cp-links a:hover{color:var(--blue)}
.cp-links a.all{color:var(--blue)}
.cp-guides{margin-top:32px;font-size:15px;line-height:1.8;color:var(--ink2)}
.cp-guides b,.cp-fine b{color:var(--ink);font-weight:600}
.cp-guides a{color:var(--blue)}
.cp-fine{margin-top:18px;max-width:78ch;font-size:14px;line-height:1.7;color:var(--ink3)}
.cp-fine a{color:var(--blue)}
@media (max-width:980px){
  .cp-panel{grid-template-columns:minmax(0,1fr)}
  .cp-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-hundred,.cp-hundred-cap,.cp-stages{margin-left:0}
}
@media (max-width:640px){
  .cp-row{grid-template-columns:minmax(0,1fr) 4.5rem;row-gap:6px}
  .cp-row .t{grid-column:1/-1}
  .cp-feed li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .cp-feed .k{grid-column:1/-1}
  .cp-feed .w{white-space:normal}
  .cp-feed .w .a,.cp-feed .w small{white-space:normal}
  .cp-feed-cdc .w{grid-column:1/-1}   /* the CDC rows carry two lines: the address and what it is for */
  .cp-feed .s{grid-column:1}
  .cp-links{grid-template-columns:minmax(0,1fr)}
}

/* ── motion (item 67) ── */
/* Charlie, Sun 1 Nov 2026: "animations as in when you scroll to the next panel or open the page theres an
   animation for the visual". Two kinds, and only these:
   - THE OPENING: what a page opens on rises into place as the page draws — the home page's words, a council
     page's masthead, a guide's title, the price page and the free demo. Stylesheet only, so it starts with the
     first paint: no page is drawn and then hidden so that it can arrive.
   - THE SCROLL: each picture further down plays the first time it is scrolled to. /reveal.js (one copy, every
     public page) sets data-rv="wait" on a picture still below the screen — held back by the rules below —
     then "in" when it is scrolled to — played by them — then "done", which nothing here names: the page as it
     always was, so the map's measures answer a click at once.
   Settles without bouncing (critically damped: the apple-design skill), and moves only opacity, position, a
   clip, a stroke's dash and a fill. The words of a guide never move. NOTHING for a reader whose system asks
   for less motion (all of it sits inside prefers-reduced-motion:no-preference, and reveal.js does nothing for
   them either), and nothing on paper. `backwards`, never `both`: once an opening has played it leaves no
   transform behind, which would make a stacking context and trap the free demo's dropdowns under the page. */
@keyframes rv-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes rv-fade{from{opacity:0}}
@media screen and (prefers-reduced-motion:no-preference){
  html:root{--rv-ease:cubic-bezier(.16,1,.3,1)}

  /* ── the opening ── */
  /* 1 the home page: the words, then the buttons, then the cue to scroll */
  .hero h1{animation:rv-rise .9s var(--rv-ease) backwards}
  .hero h1+p{animation:rv-rise .9s var(--rv-ease) .1s backwards}
  .hero .acts{animation:rv-rise .9s var(--rv-ease) .2s backwards}
  .hero .cue{animation:rv-fade .8s ease .8s backwards}
  /* 12 a council page's masthead: its name and line, the figure beside them, then the council's pages */
  .cp-head .txt>*{animation:rv-rise .8s var(--rv-ease) backwards}
  .cp-head .txt>:nth-child(2){animation-delay:.08s}
  .cp-head .txt>:nth-child(n+3){animation-delay:.16s}
  .cp-head .cp-statbox{animation:rv-rise .8s var(--rv-ease) .24s backwards}
  .cp-head .cp-tabs{animation:rv-fade .7s ease .4s backwards}
  /* … and the picture under it, when that is on the first screen too: NSW's housing target (the DA Tracker), NSW's
     zoning map (the zoning page). Further down, reveal.js holds them back for the scroll instead */
  .cp-target,.cp-zoning .cp-map{animation:rv-rise .9s var(--rv-ease) .42s backwards}
  /* 11 a guide's title (the legal pages share the band, and have no breadcrumb: they stay still) */
  .doc-head:has(.crumbs) .inner>*{animation:rv-rise .8s var(--rv-ease) backwards}
  .doc-head:has(.crumbs) .inner>:nth-child(2){animation-delay:.06s}
  .doc-head:has(.crumbs) .inner>:nth-child(3){animation-delay:.12s}
  .doc-head:has(.crumbs) .inner>:nth-child(n+4){animation-delay:.18s}
  /* 9 10 the price page and the free demo (marked .rv-open; the sign-in pages share .fd-head and stay still):
     the head, then the two plans, or the form */
  .rv-open .fd-head>*{animation:rv-rise .8s var(--rv-ease) backwards}
  .rv-open .fd-head>:nth-child(2){animation-delay:.07s}
  .rv-open .fd-head>:nth-child(3){animation-delay:.14s}
  .rv-open .fd-head>:nth-child(n+4){animation-delay:.2s}
  .rv-open .pr-plan{animation:rv-rise .9s var(--rv-ease) .26s backwards}
  .rv-open .pr-plan+.pr-plan{animation-delay:.34s}
  .rv-open .fd-card{animation:rv-rise .9s var(--rv-ease) .26s backwards}

  /* ── the scroll ── */
  /* 2 the six stages, one after another, left to right */
  #stages .seq[data-rv=wait] .step{opacity:0;transform:translateY(18px)}
  #stages .seq[data-rv=in] .step{transition:opacity .7s var(--rv-ease),transform .9s var(--rv-ease);transition-delay:calc(var(--i,0)*.09s)}
  /* 3 the place ladder: its five rungs step in from the rule, and its picture fades in */
  #places .ladder[data-rv=wait] .rung{opacity:0;transform:translateX(-12px)}
  #places .ladder[data-rv=in] .rung{transition:opacity .6s var(--rv-ease),transform .8s var(--rv-ease);transition-delay:calc(var(--i,0)*.07s)}
  #places .plate[data-rv=wait]{opacity:0}
  #places .plate[data-rv=in]{transition:opacity 1s ease .15s}
  /* 4 the map: every council colours in, spreading out from Sydney — each one's wait (--d) is set by home.js from
     its distance to Greater Sydney — then the key and the council's figures */
  #map .mapbox[data-rv=wait] #mapsvg path.c{fill:var(--paper)}
  #map .mapbox[data-rv=in] #mapsvg path.c{transition:fill .55s ease var(--d,0s)}
  #map .mapbox[data-rv=wait] :is(.legend,.readout,#mapsvg .selg){opacity:0}
  #map .mapbox[data-rv=in] :is(.legend,.readout,#mapsvg .selg){transition:opacity .6s ease .8s}
  /* 5 the housing pipeline's plate: the bar grows left to right, then the kinds of housing, longest first */
  #pipeline .hp-ex[data-rv=wait] .cp-bar{clip-path:inset(0 100% 0 0)}
  #pipeline .hp-ex[data-rv=in] .cp-bar{transition:clip-path 1.1s var(--rv-ease) .1s}
  #pipeline .hp-ex[data-rv=wait] :is(.hp-ex-figs,.cp-key){opacity:0}
  #pipeline .hp-ex[data-rv=in] :is(.hp-ex-figs,.cp-key){transition:opacity .7s ease .2s}
  #pipeline .hp-ex .cp-row .b i{transform-origin:left}
  #pipeline .hp-ex[data-rv=wait] .cp-row .b i{transform:scaleX(0)}
  #pipeline .hp-ex[data-rv=in] .cp-row .b i{transition:transform .9s var(--rv-ease);transition-delay:calc(.45s + var(--i,0)*.08s)}
  /* 6 the greenfield chart: the two lines draw from the first year to the last (pathLength="1" on both, from
     src/lib/homeSections.ts, makes one unit of dash the whole line), then the points and their figures */
  #landchart[data-rv=wait] :is(.le,.lg2){stroke-dasharray:1;stroke-dashoffset:1}
  #landchart[data-rv=in] :is(.le,.lg2){stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.3,1)}
  #landchart[data-rv=in] .lg2{transition-delay:.12s}
  #landchart[data-rv=wait] :is(.pe,.pg,.pk,.el){opacity:0}
  #landchart[data-rv=in] :is(.pe,.pg,.pk,.el){transition:opacity .5s ease 1.45s}
  /* 7 the guides, card by card; the Rezoning card's map of Sydney draws itself (pathLength="1": home.js) */
  #guides .bento[data-rv=wait] .gcard{opacity:0;transform:translateY(20px)}
  #guides .bento[data-rv=in] .gcard{transition:opacity .7s var(--rv-ease),transform .9s var(--rv-ease);transition-delay:calc(var(--i,0)*.07s)}
  #guides .bento[data-rv=wait] .gmap path{stroke-dasharray:1;stroke-dashoffset:1}
  #guides .bento[data-rv=in] .gmap path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.45,.05,.3,1) .35s}
  /* 8 the black band: its heading, its line, then its buttons */
  .askband .ask[data-rv=wait]>*{opacity:0;transform:translateY(16px)}
  .askband .ask[data-rv=in]>*{transition:opacity .7s var(--rv-ease),transform .9s var(--rv-ease);transition-delay:calc(var(--i,0)*.1s)}
  /* 11 a guide's figures and tables fade in; its words never move */
  .guide>[data-rv=wait]{opacity:0}
  .guide>[data-rv=in]{transition:opacity .8s ease}
  /* 13 NSW's housing target, in its plate beside the homes determined */
  .cp-target[data-rv=wait]{opacity:0;transform:translateY(18px)}
  .cp-target[data-rv=in]{transition:opacity .7s var(--rv-ease),transform .9s var(--rv-ease)}
  /* 13 15 16 the hundred squares light in order, the way they are read; the zoning page's part-square fills from its foot */
  .cp-hundred[data-rv=wait] i.on{background:rgba(255,255,255,.16)}
  .cp-hundred[data-rv=in] i.on{transition:background-color .35s ease;transition-delay:calc(.15s + var(--i,0)*.014s)}
  .cp-hundred i.part b{transform-origin:bottom}
  .cp-hundred[data-rv=wait] i.part b{transform:scaleY(0)}
  .cp-hundred[data-rv=in] i.part b{transition:transform .45s var(--rv-ease);transition-delay:calc(.15s + var(--i,0)*.014s)}
  /* 14 the planning proposals page: NSW's proposals by stage, each bar growing from the left */
  .cp-stages i b{transform-origin:left}
  .cp-stages[data-rv=wait] i b{transform:scaleX(0)}
  .cp-stages[data-rv=in] i b{transition:transform 1s var(--rv-ease);transition-delay:calc(.1s + var(--i,0)*.09s)}
  /* 13 14 15 the latest activity, row by row */
  .cp-feed[data-rv=wait] li{opacity:0;transform:translateY(10px)}
  .cp-feed[data-rv=in] li{transition:opacity .6s var(--rv-ease),transform .8s var(--rv-ease);transition-delay:calc(var(--i,0)*.05s)}
  /* 16 NSW's zoning map */
  .cp-map[data-rv=wait]{opacity:0;transform:translateY(18px)}
  .cp-map[data-rv=in]{transition:opacity .9s ease,transform 1s var(--rv-ease)}
  /* 9 the price page: what the plan includes, row by row */
  .pr-rows[data-rv=wait] .pr-row{opacity:0;transform:translateY(10px)}
  .pr-rows[data-rv=in] .pr-row{transition:opacity .6s var(--rv-ease),transform .8s var(--rv-ease);transition-delay:calc(var(--i,0)*.05s)}
}