/* Public site.
   The page is a surveyor's sheet: a blueprint ground with a fine grid, one estate plan drawn on it, and
   documents (the gate log, the price list, the questions) laid on top as paper. Tokens come from estates.css.
   The sheet stays dark in both themes; the theme switch changes the paper. */
.site { background-color: #0B2F3B; color: var(--band-ink);
  background-image: linear-gradient(rgba(234,241,239,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(234,241,239,.04) 1px, transparent 1px),
    linear-gradient(rgba(234,241,239,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(234,241,239,.065) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px; }
:root[data-theme="dark"] .site { background-color: #061318; }
.site::before { background: radial-gradient(52vmax 44vmax at 92% 2%, rgba(224,181,82,.13), transparent 60%), radial-gradient(60vmax 50vmax at -6% 70%, rgba(90,167,188,.16), transparent 62%); }
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; } .wrap.narrow { width: min(760px, 100% - 40px); }

/* Header: glass over the sheet */
.site-head { position: sticky; top: 0; z-index: 900; background: var(--glass-band); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--band-ink); border-bottom: 1px solid var(--glass-band-line); }
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.site-head .brand { padding: 0; } .site-nav { display: flex; gap: 22px; flex: 1; }
.site-nav a { color: var(--band-muted); text-decoration: none; font-weight: 600; font-size: 14.5px; } .site-nav a:hover { color: var(--band-ink); }
.site-head .head-btn { background: transparent; border-color: var(--band-line); color: var(--band-ink); } .site-head .head-btn:hover { background: var(--band-hover); }
.btn.brass { background: #E0B552; border-color: #E0B552; color: #0B2F3B; } .btn.brass:hover { background: #EBC670; border-color: #EBC670; }
.btn.lg { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.btn.onband { background: transparent; border-color: rgba(234,241,239,.28); color: var(--band-ink); } .btn.onband:hover { background: rgba(255,255,255,.08); }

/* Type on the sheet and on paper */
.sheet h2, .paper h2 { font-size: clamp(28px, 3.5vw, 46px); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; line-height: 1.04; max-width: 18ch; margin: 0 0 16px; }
.sheet h3 { font-size: 20px; font-stretch: 110%; margin: 26px 0 8px; color: var(--band-ink); }
.lede { font-size: 19px; line-height: 1.5; color: var(--band-muted); max-width: 46ch; margin: 0; }

/* Hero: the live gate */
.hero { padding: 54px 0 34px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 52px; align-items: start; }
.hero h1 { font-size: clamp(38px, 6.4vw, 84px); font-stretch: 122%; font-weight: 800; line-height: .98; letter-spacing: -.026em; margin: 0 auto 34px; }
.hero h1 span { display: block; } .hero .lede { margin: 0 0 26px; }
.gate-try { margin-top: 34px; padding: 18px 18px 14px; border-radius: 28px; background-color: rgba(255,255,255,.07); background-image: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 44%);
  border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 44px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.gate-try label { display: block; font-size: 15.5px; font-weight: 600; color: var(--band-ink); margin: 0 0 10px; }
.try-row { display: flex; gap: 8px; }
.gate-try input[type=text] { flex: 1; min-width: 0; min-height: 52px; background: #FFFFFF; color: #0E2A32; border: 2px solid #0E2A32; border-radius: 14px; text-align: center;
  font: 800 23px/1 var(--font); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; }
.gate-try input[type=text]::placeholder { color: #9AA6AA; }
.try-cars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.try-cars button { border: 1px solid rgba(234,241,239,.26); background: transparent; color: var(--band-ink); border-radius: 999px; padding: 8px 14px; font: 600 13.5px/1.2 var(--font); cursor: pointer;
  transition: background .2s, border-color .2s, transform .3s var(--spring); }
.try-cars button:hover { background: rgba(255,255,255,.08); } .try-cars button:active { transform: scale(.96); }
.try-cars button[aria-pressed="true"] { background: #E0B552; border-color: #E0B552; color: #0B2F3B; }
.try-help { font-size: 13px; color: var(--band-muted); margin: 12px 0 0; }
.facts { list-style: none; padding: 18px 0 0; margin: 44px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; border-top: 1px solid rgba(234,241,239,.16); color: var(--band-muted); font-size: 14.5px; }
.facts li { position: relative; padding-left: 20px; } .facts li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border: 2px solid #E0B552; }

/* The plan */
.plan-stage { position: relative; }
.plan { width: 100%; height: auto; display: block; overflow: visible; }
.plan .sheet-ground { fill: rgba(234,241,239,.035); stroke: rgba(234,241,239,.16); }
.plan .road { stroke: rgba(234,241,239,.12); stroke-width: 30; stroke-linecap: round; }
.plan .boundary { stroke: #E0B552; stroke-width: 2.5; stroke-dasharray: 9 7; stroke-linejoin: round; stroke-linecap: round; }
.plan .beacon { fill: #0B2F3B; stroke: #E0B552; stroke-width: 2; }
.plan .plot { fill: #7FA5B0; fill-opacity: .14; stroke: #7FA5B0; stroke-width: 1.4; transition: fill .45s ease, fill-opacity .45s ease, stroke .45s ease, stroke-width .3s ease; }
.plan .house { fill: #EAF1EF; fill-opacity: .2; } .plan .house.unbuilt { fill: none; stroke: rgba(234,241,239,.34); stroke-dasharray: 4 4; }
.plan .plot-no { fill: #EAF1EF; font: 800 15px var(--font); font-stretch: 82%; text-anchor: middle; opacity: .62; transition: opacity .4s; }
.plan .anno { fill: #9DB8BF; font: 600 11.5px var(--font); font-stretch: 88%; } .plan .anno.street { fill: rgba(234,241,239,.5); }
.plan .north path { fill: #E0B552; } .plan .scale path { stroke: #9DB8BF; stroke-width: 1.5; }
.plan .post { stroke: #E0B552; stroke-width: 6; stroke-linecap: round; }
.plan .arm { stroke: #F5F1E8; stroke-width: 5; stroke-linecap: round; transform-origin: 288px 408px; transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.plan .car { transform: translateY(470px); opacity: 0; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.plan .car rect { fill: #F5F1E8; } .plan .car .glass, .plan .van .glass { fill: #0B2F3B; fill-opacity: .7; }
.plan .van { transform: translateY(470px); opacity: 0; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .4s ease; } .plan .van rect { fill: #E0B552; }
.plan .call { stroke: #E0B552; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.plan .plot.lit { fill: #E0B552; fill-opacity: .34; stroke: #E0B552; stroke-width: 2.8; }
.plan .plot.asked { fill: #E0B552; stroke: #E0B552; stroke-width: 2.8; animation: ring .8s ease-in-out infinite alternate; }
@keyframes ring { from { fill-opacity: .08; } to { fill-opacity: .44; } }
.stage-open .arm, .story[data-step="gate"] .arm { transform: rotate(-78deg); }
.stage-gate .car { transform: translateY(414px); opacity: 1; } .stage-in .car { transform: translateY(244px); opacity: 0; }
.stage-reset .car { transition: none; }
.stage-calling .call, .story[data-step="residents"] .call { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }

/* What the gate phone says, over the plan */
.tally { position: absolute; left: 4%; top: -12px; padding: 8px 14px; border-radius: 16px; font-size: 13px; color: var(--band-ink);
  background-color: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px rgba(0,0,0,.3);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tally b { font-size: 19px; font-stretch: 88%; font-variant-numeric: tabular-nums; margin-right: 4px; }
.verdict-pane { position: absolute; right: -6px; bottom: -22px; width: min(256px, 64%); border-radius: 28px; padding: 16px 16px 14px; text-align: center; color: #FFFFFF;
  background-color: rgba(11,47,59,.5); background-image: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 46%); border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 50px rgba(0,0,0,.42); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: background-color .3s ease, border-color .3s ease, opacity .3s ease, transform .45s var(--spring); }
.verdict-pane.hidden { opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; }
.verdict-pane.paid { background-color: #157A45; background-image: none; border-color: #0C5A31; }
.verdict-pane.owing { background-color: #BF3A2B; background-image: none; border-color: #8E2A1F; }
.verdict-pane.visitor { background-color: #11485A; border-color: #E0B552; }
.v-plate { display: inline-block; background: #FFFFFF; color: #0E2A32; border: 2px solid #0E2A32; border-radius: 7px; padding: 2px 10px; font-weight: 800; font-stretch: 80%; letter-spacing: .06em; font-size: 17px; }
.v-word { font-size: 30px; font-weight: 800; font-stretch: 78%; line-height: 1; margin-top: 10px; letter-spacing: .01em; }
.v-line { font-size: 14px; font-weight: 700; margin-top: 8px; } .v-note { font-size: 12.5px; opacity: .92; margin-top: 3px; }
.v-act { margin-top: 12px; border: 0; border-radius: 999px; background: #E0B552; color: #0B2F3B; font: 700 13.5px/1.2 var(--font); padding: 10px 14px; cursor: pointer; width: 100%;
  transition: transform .3s var(--spring); } .v-act:active { transform: scale(.96); }

/* Paper: documents laid on the sheet */
.paper { width: min(1180px, 100% - 40px); margin: 30px auto; padding: clamp(26px, 4.6vw, 60px); border-radius: 34px; background: var(--paper); color: var(--ink);
  box-shadow: 0 34px 90px rgba(0,0,0,.3); }
:root[data-theme="dark"] .paper { background: #0F2830; }
.paper .intro { font-size: 18px; color: var(--muted); max-width: 62ch; margin: 0 0 30px; }
.ruled { width: 100%; border-collapse: collapse; font-size: 16px; }
.ruled th, .ruled td { text-align: left; vertical-align: top; padding: 15px 20px 15px 0; border-top: 1px solid var(--line-strong); }
.ruled thead th { border-top: 0; padding-top: 0; padding-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ruled tbody th { font-weight: 700; }
.swap tbody th { width: 21%; } .swap .before { color: var(--muted); width: 36%; } .swap .after { font-weight: 600; }
.log tbody th { width: 96px; } .log time { font-size: 21px; font-weight: 800; font-stretch: 86%; font-variant-numeric: tabular-nums; }
.log .where { width: 170px; color: var(--brass-text); font-weight: 700; }
.scroll-x { overflow-x: auto; } .matrix { min-width: 760px; } .matrix tbody th { width: 24%; }
.matrix td { color: var(--muted); } .matrix td.yes { color: var(--ink); font-weight: 700; } .matrix td.no { color: var(--muted); }
.matrix td.yes::before, .matrix td.no::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 2px solid var(--brass-text); }
.matrix td.yes::before { background: var(--brass-text); } .matrix td.no::before { border-color: var(--line-strong); }
.after-table { margin: 22px 0 0; color: var(--muted); max-width: 70ch; }

/* The pinned story */
.story { padding: 30px 0 10px; }
.story-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 60px; }
.chapter { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; }
.chapter > p { font-size: 18px; color: var(--band-muted); max-width: 46ch; margin: 0 0 6px; }
.points { margin: 20px 0 0; display: grid; gap: 14px; font-size: 16.5px; } .points dt { font-weight: 700; color: var(--band-ink); }
.points dd { margin: 3px 0 0; color: var(--band-muted); max-width: 46ch; }
.points.rules { grid-template-columns: 76px 1fr; gap: 10px 14px; align-items: baseline; } .points.rules dt { color: #E0B552; } .points.rules dd { margin: 0; }
.sequence { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 16px; max-width: 50ch; font-size: 16.5px; }
.sequence li { counter-increment: step; position: relative; padding-left: 44px; color: var(--band-muted); }
.sequence li b { color: var(--band-ink); }
.sequence li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid #E0B552; color: #E0B552; font-weight: 800; font-size: 14px; }
.trades-line { font-size: 14.5px; color: var(--band-muted); max-width: 48ch; margin: 18px 0 16px; }
.story-plan { position: sticky; top: 84px; align-self: start; height: calc(100vh - 104px); display: flex; align-items: center; }
.story-plan .plan-stage { width: 100%; }
.note { position: absolute; left: 0; top: calc(100% + 6px); max-width: 78%; padding: 14px 18px; border-radius: 22px; font-size: 13.5px; color: var(--band-ink); display: grid; gap: 3px;
  background-color: rgba(11,47,59,.52); background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 46%); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 18px 44px rgba(0,0,0,.4); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .35s ease, transform .5s var(--spring); pointer-events: none; }
.note b { font-size: 15px; } .note span { color: var(--band-muted); } .note .big { font-size: 20px; font-weight: 800; font-stretch: 88%; color: var(--band-ink); }
.note .pair, .handset .pair { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.note .pair i, .handset .pair i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 7px 11px; border-radius: 999px; background: #E0B552; color: #0B2F3B; }
.note .pair i.quiet, .handset .pair i.quiet { background: transparent; border: 1px solid rgba(234,241,239,.3); color: var(--band-ink); }
.n-residents { border-color: #E0B552; } .story-plan .plan-stage { margin-bottom: 96px; }
.story[data-step="gate"] .n-gate, .story[data-step="register"] .n-register, .story[data-step="dues"] .n-dues, .story[data-step="services"] .n-services,
.story[data-step="residents"] .n-residents { opacity: 1; transform: none; }
.story[data-step="gate"] .car { transform: translateY(414px); opacity: 1; }
.story[data-step="register"] .plot-no, .story[data-step="dues"] .plot-no { opacity: 1; }
.story[data-step="register"] .plot[data-plot="14"], .story[data-step="services"] .plot[data-plot="12"] { fill: #E0B552; fill-opacity: .36; stroke: #E0B552; stroke-width: 2.8; }
.story[data-step="dues"] .plot[data-due="paid"] { fill: #22A05B; fill-opacity: .62; stroke: #4CCB86; }
.story[data-step="dues"] .plot[data-due="owing"] { fill: #E04A38; fill-opacity: .66; stroke: #FF7A68; }
.story[data-step="services"] .van { transform: translateY(410px); opacity: 1; }
.story[data-step="residents"] .plot[data-plot="11"] { fill: #E0B552; stroke: #E0B552; stroke-width: 2.8; animation: ring .8s ease-in-out infinite alternate; }

/* One app, four doors */
.doors { padding: 76px 0; }
.doors-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; align-items: center; }
.door-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.door-tabs button { border: 1px solid rgba(234,241,239,.26); background: transparent; color: var(--band-ink); border-radius: 999px; padding: 10px 18px; font: 600 14.5px/1.2 var(--font);
  cursor: pointer; transition: background .2s, border-color .2s, transform .3s var(--spring); }
.door-tabs button:active { transform: scale(.96); } .door-tabs button[aria-selected="true"] { background: #E0B552; border-color: #E0B552; color: #0B2F3B; }
.door-text p { color: var(--band-muted); font-size: 17px; max-width: 50ch; margin: 0; } .door-text + .door-text { margin-top: 18px; }
.door-foot { margin: 26px 0 0; font-size: 14.5px; color: var(--band-muted); max-width: 50ch; }
.js .doors .door-text, .js .doors .screen { display: none; }
.js .doors[data-door="gate"] [data-for="gate"], .js .doors[data-door="resident"] [data-for="resident"], .js .doors[data-door="office"] [data-for="office"],
.js .doors[data-door="provider"] [data-for="provider"] { display: block; }
.handset { width: 310px; max-width: 100%; justify-self: center; border-radius: 46px; border: 9px solid #061318; padding: 16px 13px; min-height: 480px; display: grid; gap: 14px; align-content: start;
  background-color: rgba(255,255,255,.07); background-image: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 70px rgba(0,0,0,.45); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.screen { border-radius: 30px; padding: 18px 14px 16px; color: var(--band-ink); font-size: 13.5px; }
.s-gate { background: #157A45; color: #FFFFFF; text-align: center; min-height: 430px; }
.s-top { font-size: 11px; opacity: .88; margin-bottom: 46px; } .s-word { font-size: 48px; font-weight: 800; font-stretch: 78%; line-height: .95; }
.s-plate { display: inline-block; background: #FFFFFF; color: #0E2A32; border: 2px solid #0E2A32; border-radius: 7px; padding: 3px 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .06em; font-size: 18px; margin: 18px 0 12px; }
.s-house { font-weight: 700; font-size: 14.5px; } .s-name { opacity: .92; } .s-btn { margin-top: 70px; background: rgba(255,255,255,.95); color: #0E2A32; border-radius: 999px; padding: 12px; font-weight: 700; }
.s-title { font-size: 17px; font-weight: 800; font-stretch: 108%; margin-bottom: 12px; }
.s-knock { background: #0B2F3B; border: 2px solid #E0B552; border-radius: 22px; padding: 13px 14px; margin-bottom: 12px; }
.s-knock span { display: block; font-size: 12px; color: #E0B552; font-weight: 700; } .s-knock b { display: block; font-size: 19px; font-stretch: 88%; margin-top: 3px; }
.s-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid rgba(234,241,239,.14); }
.s-row b { color: #4CCB86; } .s-row b.owe { color: #FF7A68; } .s-row b.star { color: #E0B552; }
.s-code { margin-top: 12px; background: rgba(224,181,82,.16); border-radius: 18px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s-code b { font-size: 21px; font-stretch: 82%; letter-spacing: .08em; color: #E0B552; white-space: nowrap; }
.s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.s-stats div { background: rgba(255,255,255,.07); border-radius: 16px; padding: 10px 8px; } .s-stats b { display: block; font-size: 22px; font-stretch: 88%; } .s-stats span { font-size: 11px; color: var(--band-muted); }

/* Prices as one ruled sheet */
.price-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 26px; overflow: hidden; }
.price-col { padding: 28px 26px; border-left: 1px solid var(--line-strong); display: flex; flex-direction: column; } .price-col:first-child { border-left: 0; }
.price-col.best { background: var(--brass-soft); } .price-col h3 { font-size: 22px; font-stretch: 112%; margin: 0 0 4px; } .price-col .blurb { color: var(--muted); margin: 0; }
.price { font-size: 38px; font-weight: 800; font-stretch: 92%; font-variant-numeric: tabular-nums; margin-top: 16px; } .price-note { color: var(--muted); font-size: 13.5px; }
.ticks { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 9px; font-size: 14.5px; flex: 1; align-content: start; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 6px; border-left: 2.5px solid var(--brass-text); border-bottom: 2.5px solid var(--brass-text); transform: rotate(-45deg); }

/* Starting, and the questions */
.begin { padding: 70px 0 56px; } .begin-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: start; }
.sequence.onsheet { margin-top: 24px; } .already { margin: 18px 0 0; font-size: 14.5px; color: var(--band-muted); } .already a, .sheet a:not(.btn) { color: #E0B552; }
.enquiry { color: var(--ink); border-radius: 30px; padding: 26px; background: var(--paper); border-color: transparent; box-shadow: 0 26px 60px rgba(0,0,0,.34); }
:root[data-theme="dark"] .enquiry { background: #0F2830; }
.sheet .enquiry h3 { font-size: 20px; margin: 0; color: var(--ink); } .sheet .enquiry a:not(.btn) { color: var(--link); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.faqs { max-width: 820px; } .faq { border-top: 1px solid var(--line-strong); } .faq:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; padding: 17px 0; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--brass-text); font-size: 24px; line-height: 1; } .faq[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; } .faq p { color: var(--muted); margin: 0 0 18px; max-width: 68ch; font-size: 16px; }

/* Footer: the drawing's title block */
.site-foot { padding: 34px 0 30px; color: var(--band-muted); font-size: 14px; }
.title-block { width: min(1180px, 100% - 40px); margin: 0 auto; border: 1.5px solid rgba(234,241,239,.34); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1.5fr .8fr .9fr 1.3fr; }
.title-block > * { padding: 18px 20px; border-left: 1px solid rgba(234,241,239,.2); } .title-block > :first-child { border-left: 0; }
.tb-main .brand { padding: 0; margin-bottom: 8px; color: var(--band-ink); } .tb-main p { margin: 0; max-width: 46ch; }
.tb-label { display: block; font-size: 12.5px; color: #9DB8BF; } .tb-value { display: block; color: var(--band-ink); font-weight: 700; font-size: 15.5px; margin-top: 2px; }
.tb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-content: start; } .tb-links a { color: var(--band-ink); text-decoration: none; } .tb-links a:hover { color: #E0B552; }
.tb-foot { width: min(1180px, 100% - 40px); margin: 14px auto 0; font-size: 13px; opacity: .85; }

/* Plain pages (privacy, terms, download) and the two forms (set up an estate, offer a service) */
.doc { background: var(--surface); color: var(--ink); padding: 56px 0 72px; } .doc h1 { font-size: 34px; font-stretch: 110%; margin-bottom: 8px; } .doc h2 { margin: 28px 0 8px; }
.doc p, .doc li { color: var(--muted); max-width: 70ch; }
.start { padding: 44px 0 72px; color: var(--ink); } .start-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.start h1 { font-size: clamp(30px, 4vw, 42px); font-stretch: 114%; font-weight: 800; letter-spacing: -.015em; margin-bottom: 10px; }
.start .card { border-radius: 30px; padding: 28px; background-color: var(--glass-strong); background-image: var(--sheen); border-color: var(--glass-line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), 0 26px 60px rgba(0,0,0,.34); }
.start-side { display: grid; gap: 18px; color: var(--band-ink); padding-top: 12px; } .start-side .card { color: var(--ink); padding: 18px; border-radius: 24px; }
.start-step { display: flex; gap: 14px; align-items: flex-start; } .start-step b { display: block; } .start-step span { color: var(--band-muted); font-size: 14.5px; }
.tile-no, .tile-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; }
.tile-no { border: 1.5px solid #E0B552; color: #E0B552; } .tile-ic { background: var(--petrol-soft); color: var(--petrol); width: 46px; height: 46px; } .tile-ic svg.i { width: 23px; height: 23px; }
.pick { display: grid; gap: 10px; } .pick label { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: 18px; padding: 12px 14px; cursor: pointer; margin: 0; font-weight: 400; }
.pick label:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); } .pick input { margin-top: 3px; } .pick b { display: block; } .pick small { color: var(--muted); }

@media (max-width: 900px) {
  .site-nav { display: none; } .site-head .wrap { justify-content: space-between; }
  .hero { padding: 34px 0 26px; } .hero-grid, .begin-grid, .start-grid, .doors-grid { grid-template-columns: 1fr; gap: 34px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 46px; }
  .story-grid { grid-template-columns: 1fr; gap: 0; } .story-plan { order: -1; top: 64px; height: auto; z-index: 5; padding: 12px 0 30px; background: linear-gradient(#0B2F3B 86%, rgba(11,47,59,0)); }
  :root[data-theme="dark"] .story-plan { background: linear-gradient(#061318 86%, rgba(6,19,24,0)); }
  .chapter { min-height: 62vh; justify-content: flex-start; padding: 26px 0 40px; } .story-plan .plan-stage { margin-bottom: 0; }
  .note { top: auto; bottom: 4px; left: 4px; font-size: 12px; padding: 9px 12px; border-radius: 16px; max-width: 72%; } .note .big { font-size: 15px; }
  .price-cols { grid-template-columns: 1fr; } .price-col { border-left: 0; border-top: 1px solid var(--line-strong); } .price-col:first-child { border-top: 0; }
  .title-block { grid-template-columns: 1fr 1fr; } .title-block > * { border-left: 0; border-top: 1px solid rgba(234,241,239,.2); } .title-block > .tb-main, .title-block > .tb-links { grid-column: 1 / -1; }
  .title-block > :first-child { border-top: 0; } .title-block > .tb-cell + .tb-cell { border-left: 1px solid rgba(234,241,239,.2); }
  .handset { justify-self: start; } .note { display: none; }
}
@media (max-width: 640px) {
  .paper { border-radius: 26px; width: calc(100% - 20px); padding: 24px 18px; }
  .ruled.swap thead, .ruled.log thead { display: none; } .ruled.swap tr, .ruled.log tr { display: block; padding: 14px 0; border-top: 1px solid var(--line-strong); }
  .ruled.swap th, .ruled.swap td, .ruled.log th, .ruled.log td { display: block; width: auto; border: 0; padding: 2px 0; }
  .swap td::before { content: attr(data-label) ": "; font-size: 13px; font-weight: 600; color: var(--muted); } .swap .before { width: auto; }
  .log .where { width: auto; } .try-row { flex-direction: column; }
  .verdict-pane { position: static; width: auto; margin-top: 12px; } .verdict-pane.hidden { display: none; }
  .facts { grid-template-columns: 1fr; }
  /* the who-sees-what table becomes one block per row, each answer named */
  .scroll-x { overflow: visible; } .ruled.matrix { min-width: 0; } .ruled.matrix thead { display: none; }
  .ruled.matrix tr { display: block; padding: 14px 0; border-top: 1px solid var(--line-strong); }
  .ruled.matrix th, .ruled.matrix td { display: block; width: auto; border: 0; padding: 3px 0; }
  .ruled.matrix td::before, .ruled.matrix td.yes::before, .ruled.matrix td.no::before { display: inline; width: auto; height: auto; border: 0; background: none; margin: 0;
    font-size: 13px; font-weight: 600; color: var(--muted); }
  .ruled.matrix td:nth-of-type(1)::before { content: "Estate admin and exco: "; } .ruled.matrix td:nth-of-type(2)::before { content: "Gate phone: "; }
  .ruled.matrix td:nth-of-type(3)::before { content: "Resident: "; } .ruled.matrix td:nth-of-type(4)::before { content: "Service provider: "; }
}
@media (max-width: 420px) { .head-btn[data-theme-toggle] { display: none; } }
@media (prefers-reduced-motion: reduce) { .plan .plot.asked, .story[data-step="residents"] .plot[data-plot="11"] { animation: none; fill-opacity: .36; } }
@media (prefers-reduced-transparency: reduce) {
  .site-head { background: var(--band); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gate-try, .tally, .note, .handset, .verdict-pane { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #11485A; background-image: none; }
  .start .card { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--surface); background-image: none; }
}