/* Commercial Insights Group: the pieces the home page is built from, some shared with inner pages.
   The cover, the proof row and title block, the specimen lead, the lease clock, the dimension line, the call sheet,
   steps and rules, the coverage map, the area check, the request form, and plans (when shown). */

/* The cover: the claim on navy beside our own picture of a lit floor, ringed in brass as in our mark (28 Oct 2026) */
.cover { padding: clamp(36px, 5vw, 80px) 0 clamp(52px, 6.5vw, 104px); overflow: hidden; }
.cover-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(460px, 38%)); column-gap: clamp(40px, 6.5vw, 112px); row-gap: 48px; align-items: center; }
.cover-copy { container-type: inline-size; }
/* "before the tender." is 9.2 of its own font sizes wide: sized to its column, it stays on one line */
.cover .display { font-size: clamp(2.3rem, .9rem + 4.6vw, 4.6rem); font-size: min(4.6rem, 10.6cqi); color: #fff; }
@supports not (width: 1cqi) {  /* older browsers: the column's width worked out from the page's */
  .cover .display { font-size: min(3.6rem, calc((100vw - 2 * var(--gutter)) / 9.6)); }
  @media (min-width: 681px) {
    .cover .display { font-size: min(4.6rem, calc((min(100vw - 2 * var(--gutter), 1200px) * .62 - 6.5vw) / 9.6)); }
  }
}
.cover .lead { margin-top: 28px; max-width: 29em; color: var(--text-2); }
.cover .btn-row { margin-top: 36px; }
.cover-pic { margin: 0 4%; }  /* room for the ring, which runs past the picture's sides */

/* The pilot client, credited beneath the title block (docs/SPEC.md, section 8) */
.pilot-credit { display: flex; align-items: center; gap: 14px; max-width: 620px; margin-top: 18px; padding: 4px 0; color: var(--text-2); font-size: 14px; line-height: 1.45; text-decoration: none; }
.pilot-credit img { width: auto; height: 34px; flex: none; }
.pilot-credit b { display: block; color: var(--text); font-weight: 620; }
.pilot-credit:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Proof: the data today, and one lead as it arrives */
.proof { padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 120px); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: clamp(40px, 5.5vw, 88px); row-gap: 44px; align-items: center; }
/* Here the title block is the evidence, so its figures are set large */
.proof .tb-head { padding: 18px 20px; }
.proof .tb-head b { font-size: 1.55rem; }
.proof .titleblock dl > div { padding: 16px 20px 18px; }
.proof .titleblock dd { margin-top: 6px; font-size: 1.08rem; }
.proof .titleblock dd.num { font-size: clamp(2rem, 1.4rem + 1.5vw, 2.85rem); line-height: 1; letter-spacing: -.01em; }

/* Built with the credited firm: its own photograph beside the words, its rules beneath */
.built.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(44px, 5.5vw, 72px); }
.built.has-photo .section-head { margin-bottom: 0; }
.built-photo img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 62% 50%; }

/* Title block: who the sheet is for, what it shows and when it was issued */
.titleblock { border: 1.5px solid var(--ink); background: var(--surface); max-width: 620px; }
.tb-head { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.tb-head img { width: 40px; height: auto; flex: none; }
.tb-head span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tb-head b { display: block; margin-top: 1px; font-size: 1.32rem; line-height: 1.15; font-weight: 680; font-stretch: 110%; letter-spacing: -.008em; }
.titleblock dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.titleblock dl > div { padding: 11px 16px 12px; min-width: 0; }
.titleblock dl > div:nth-child(n + 3) { border-top: 1px solid var(--ink); }
.titleblock dl > div:nth-child(even) { border-left: 1px solid var(--ink); }
.titleblock dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.titleblock dt { font-size: 12.5px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.titleblock dd { margin: 3px 0 0; font-size: 1rem; line-height: 1.3; font-weight: 620; }
.titleblock dd.num { font-size: 1.55rem; line-height: 1.1; font-weight: 650; font-stretch: 87%; }

/* The specimen: one lead, the top sheet of a stack of eight */
.specimen { position: relative; }
.sp-sheet { position: relative; margin: 0 10px 10px 0; background: var(--surface); border: 1.5px solid var(--ink); padding: 20px 24px 18px;
  box-shadow: 10px 10px 0 -1px var(--tint), 10px 10px 0 0 var(--ink); }  /* the next sheet down */
.sp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sp-pos { font-size: 13px; color: var(--muted); padding-top: 4px; }
.sp-score { text-align: right; line-height: 1; }
.sp-score b { display: block; font-size: 2.7rem; font-weight: 680; font-stretch: 87%; letter-spacing: -.02em; }
.sp-score small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.redact { display: block; width: calc(var(--w, 62) * 1%); max-width: 230px; height: 15px; margin: 2px 0 10px; background: var(--ink); }
.sp-where { font-size: 14.5px; color: var(--text-2); }
.sp-what { margin-top: 2px; font-size: 14.5px; color: var(--text-2); }
.sp-block { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sp-k { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.sp-reason { font-size: 16px; font-weight: 560; line-height: 1.45; }
.sp-window { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; font-size: 14px; color: var(--accent-text); font-weight: 560; }
.sp-window i { width: 12px; height: 12px; margin-top: 4px; background: var(--brass); flex: none; }
.sp-window small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.sp-call { margin-top: 12px; padding: 8px 12px 9px; border-left: 2px solid var(--brass); background: var(--surface-2); }
.sp-call .sp-k { margin-bottom: 2px; }
.sp-call q { display: block; font-size: 14px; line-height: 1.45; color: var(--text); quotes: "\201C" "\201D"; }
.sp-call q + .sp-k { margin-top: 8px; }
.sp-bar { display: flex; gap: 2px; height: 10px; }
.sp-bar i { flex: var(--w) 1 0; min-width: 2px; }
.sp-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.sp-parts dt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sp-parts dt i { width: 9px; height: 9px; flex: none; }
.sp-parts dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 650; font-stretch: 87%; }
.sp-parts dd small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.p1 { background: var(--ink); } .p2 { background: #4a5571; } .p3 { background: #7f889e; } .p4 { background: #b3bacb; } .p0 { background: var(--rule); }
.sp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.specimen figcaption { position: relative; margin-top: 16px; font-size: 13.5px; color: var(--muted); max-width: 36em; }

/* Verdict chips, as on the call sheet */
.verdicts { display: inline-flex; border: 1px solid var(--text); border-radius: var(--radius); overflow: hidden; }
.verdicts span { padding: 5px 10px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.verdicts span + span { border-left: 1px solid var(--text); }
.verdicts span.on { background: var(--text); color: var(--bg); font-weight: 600; }

/* The lease clock, on the dark sheet */
.clock { position: relative; height: 470px; margin-top: 8px; }
.clock-plot { position: absolute; left: 96px; right: 6px; top: 64px; bottom: 54px; }
.clock-axis-y { position: absolute; left: 0; top: 18px; font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.zone { position: absolute; top: 0; bottom: 0; }
/* The window to call in: brass, edged in the dashed brass of our mark's ring */
.zone-window { left: 0; width: 33.333%; }  /* no fill: brass turns grey on navy, so the ring alone marks it */
.zone-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zone-ring rect { fill: none; stroke: var(--brass-hi); stroke-width: 2; stroke-dasharray: 10 7; }
.zone-short { left: 33.333%; width: 33.333%; }
.zone-tender { left: 66.667%; right: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 9px); }
.zone-label { position: absolute; top: -40px; left: 12px; font-size: 13.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.zone-label b { display: block; font-weight: 620; font-stretch: 108%; color: var(--text); }
.zone-window .zone-label b { color: var(--accent-text); }
.event-line { position: absolute; right: 0; top: -18px; bottom: 0; border-right: 1.5px solid var(--text); }
.event-line span { position: absolute; right: 8px; top: -6px; font-size: 12.5px; color: var(--text); white-space: nowrap; font-weight: 620; }
.yband { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, .14); }
.yband span { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(255, 255, 255, .07); }
.gx span { position: absolute; top: calc(100% + 10px); left: 0; transform: translateX(-50%); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-axis-x { position: absolute; right: 6px; bottom: 0; font-size: 12.5px; color: var(--muted); }
.m { position: absolute; left: calc(var(--x) * 1%); top: calc((100 - var(--y)) * 1%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; opacity: .55; }
.m.est { border: 1.5px solid var(--muted); }
.m.rec { background: var(--muted); }
.m.win { opacity: 1; --o: 1; }
.m.win.est { border-color: var(--brass); }
.m.win.rec { background: var(--brass); }
.m.hot { opacity: 1; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--text); }
.clock.armed .zone-window { clip-path: inset(-60px 100% -3px -3px); }  /* its label sits above it */
.clock.armed .m { opacity: 0; transform: scale(.2); }
.clock.armed.is-in .zone-window { clip-path: inset(-60px -240px -3px -3px); transition: clip-path 1s cubic-bezier(.2, .7, .2, 1); }  /* its label may run past it on a phone */
.clock.armed.is-in .m { animation: mark-in .55s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(250ms + var(--x) * 9ms); }
@keyframes mark-in { to { opacity: var(--o, .55); transform: none; } }
.clock-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 210px; max-width: 260px; background: var(--paper); color: var(--text-2); border: 1px solid var(--ink); padding: 11px 13px 12px; font-size: 13px; line-height: 1.45; opacity: 0; transition: opacity .12s; }
.dark .clock-tip { color: #39435c; }  /* the tip is paper, even on the dark band */
.clock-tip.on { opacity: 1; }
.clock-tip b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 620; margin-bottom: 2px; }
.clock-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px; }
.clock-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.legend .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 0; }
.legend .sw.est { border: 1.5px solid var(--brass); }
.legend .sw.rec { background: var(--brass); }

/* A move, drawn as a dimension line */
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.dim { position: relative; padding: 48px 28px 0 0; }
.dim::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; border-top: 1px solid var(--text); }
.dim::after { content: ""; position: absolute; top: 5px; left: 0; height: 21px; border-left: 1px solid var(--text); }
.dim .end { display: none; position: absolute; top: 5px; right: 0; height: 21px; border-left: 1px solid var(--text); }
.dim:last-child .end { display: block; }
.dim.window .end { border-color: var(--brass-line); }
.dim:last-child .end span { position: absolute; top: -26px; right: 0; white-space: nowrap; font-size: 13px; font-weight: 620; color: var(--text); }
.dim .len { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); padding: 0 12px; background: var(--bg); font-size: 13px; font-weight: 620; font-stretch: 100%; white-space: nowrap; color: var(--muted); }
.dim.window::before { border-top: 3px solid var(--brass); top: 14px; }
.dim.window::after { border-color: var(--brass-line); }
.dim.window .len { color: var(--accent-text); }
.dim h3 { margin-bottom: 8px; }
.dim p { color: var(--text-2); font-size: 15.5px; max-width: 28em; }

/* The call sheet, as printed */
.app-shot { background: var(--surface); border: 1.5px solid var(--ink); overflow: hidden; }
.app-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 15px 20px; border-bottom: 1px solid var(--ink); font-size: 13.5px; color: var(--muted); }
.app-bar b { color: var(--text); font-weight: 640; font-stretch: 108%; font-size: 15px; }
.shot-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.shot-table th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.shot-table td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.shot-table tr:last-child td { border-bottom: 0; }
.shot-table .idx { color: var(--muted); width: 36px; padding-left: 20px; }
.shot-table .redact { width: calc(var(--w) * 2.8px); max-width: 100%; height: 12px; margin: 4px 0 8px; background: var(--ink); }
.shot-table .meta { font-size: 12.5px; color: var(--muted); }
.shot-table .reason { color: var(--text); max-width: 34ch; }
.shot-table .score { font-weight: 650; font-size: 18px; font-stretch: 87%; text-align: right; }
.shot-table .score-h { text-align: right; }
.key { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 6px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.shot-caption { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 40px; counter-reset: note; list-style: none; }
.notes li { position: relative; padding-top: 38px; }
.notes li::before { counter-increment: note; content: counter(note); position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 700; }
.notes b { display: block; font-weight: 620; font-stretch: 106%; margin-bottom: 6px; }
.notes p { color: var(--text-2); font-size: 15px; }

/* Steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); list-style: none; counter-reset: step; }
.steps li { border-top: 1.5px solid var(--ink); padding-top: 22px; }
.steps li::before { counter-increment: step; content: counter(step); display: block; font-size: 3.2rem; line-height: 1; font-weight: 300; font-stretch: 125%; margin-bottom: 22px; font-variant-numeric: lining-nums; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--text-2); }

/* Rules set large: not a sequence, so not numbered */
.rules { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.rules li { border-top: 2px solid var(--ink); padding-top: 22px; }
.rules b { display: block; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; font-weight: 640; font-stretch: 110%; letter-spacing: -.012em; text-wrap: balance; }
.rules span { display: block; margin-top: 12px; color: var(--text-2); }

/* Coverage map: live councils in brass, next ones edged in dashed brass, the firm's offices pinned */
.atlas-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.atlas-map { position: relative; margin: 0; }
.atlas-map svg { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); background: #fbfbfa; }
.atlas-map svg { --s: 1; }  /* --s grows the map's words as the map shrinks; --k matches them to the view's width */
.north { transform: translate(calc(var(--vx) + 40px * var(--s) * var(--k)), calc(var(--vy) + 46px * var(--s) * var(--k))) scale(calc(var(--s) * var(--k))); }
.north path { fill: var(--ink); }
.north text { font-size: 15px; font-weight: 650; fill: var(--ink); text-anchor: middle; }
.scalebar { transform: translate(calc(var(--vx) + 28px * var(--s) * var(--k)), calc(var(--vb) - 28px * var(--s) * var(--k))); }
.scalebar .sb { transform: scale(1, calc(var(--s) * var(--k))); }  /* thicker as the map shrinks; its length is ten kilometres */
.scalebar text { font-size: calc(15px * var(--s) * var(--k)); font-weight: 500; fill: var(--ink); dominant-baseline: middle; transform: translate(calc(6px * var(--s) * var(--k)), calc(3px * var(--s) * var(--k))); }
.scalebar .sb1 { fill: var(--ink); }
.scalebar .sb2 { fill: var(--paper); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.a { fill: #e6e9ef; stroke: #c2c8d3; stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .15s; }
.a.ctx { fill: #eef1f5; stroke: #d6dce6; }
.a.sch { fill: #d3d8e1; stroke: #aab2c0; }
.a.l-live { fill: var(--brass); stroke: var(--brass-line); }
.a[data-name]:hover, .a.on { fill: #c0c7d3; }
.a.l-live:hover, .a.l-live.on { fill: var(--brass-hi); }
.next-lines path { fill: none; stroke: var(--brass-line); stroke-width: 3; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.labels text { font-size: calc(15px * var(--s) * var(--k)); font-weight: 500; fill: #4a4a4a; text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: calc(4px * var(--s) * var(--k)); stroke-linejoin: round; pointer-events: none; }
.labels text.live { fill: var(--ink); font-weight: 650; }
.pins path { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transform: scale(calc(var(--s) * var(--k))); }
.pins text { --off: calc(15px * var(--s) * var(--k)); font-size: calc(15px * var(--s) * var(--k)); font-weight: 680; fill: var(--ink); dominant-baseline: middle; paint-order: stroke; stroke: var(--paper); stroke-width: calc(5px * var(--s) * var(--k)); stroke-linejoin: round; }
.pins .right { text-anchor: start; transform: translateX(var(--off)); }
.pins .left { text-anchor: end; transform: translateX(calc(-1 * var(--off))); }
.pins .below { text-anchor: middle; transform: translateY(calc(var(--off) + .6em)); }
.atlas-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 250px; background: var(--paper); border: 1px solid var(--ink); padding: 10px 13px 11px; font-size: 13px; line-height: 1.5; color: var(--text-2); opacity: 0; transition: opacity .12s; }
.atlas-tip.on { opacity: 1; }
.atlas-tip b { display: block; color: var(--text); font-size: 13.5px; font-weight: 620; margin-bottom: 2px; }
.key-list { list-style: none; display: grid; gap: 18px; }
.key-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.key-list b { display: block; font-weight: 620; font-stretch: 106%; line-height: 1.35; }
.key-list span { display: block; margin-top: 3px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.sw { display: block; width: 24px; height: 17px; margin-top: 2px; }
.sw-live { background: var(--brass); border: 1px solid var(--brass-line); }
.sw-next { background: #e6e9ef; border: 2px dashed var(--brass-line); }
.sw-sch { background: #d3d8e1; border: 1px solid #aab2c0; }
.sw-ctx { background: #f2f2ef; border: 1px solid #c9c9c4; }
.sw-pin { width: 20px; height: 22px; margin: 0 2px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.key-note { margin-top: 24px; color: var(--text-2); font-size: 14.5px; }
.key-note.small { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Area check */
.check { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.check form { margin-top: 30px; }
.inline-field { display: flex; gap: 10px; max-width: 460px; }
.inline-field input { flex: 1; }
.result { border: 1.5px solid var(--ink); padding: 26px 28px 28px; min-height: 100%; background: var(--surface); }
.result h3 { margin-bottom: 6px; }
.result .cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--ink); }
.result .cells > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 13px 16px; border-bottom: 1px solid var(--ink); }
.result .cells > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.result .cells > div:nth-last-child(-n + 2) { border-bottom: 0; }
.tb-label { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tb-value { font-size: 1.5rem; line-height: 1.1; font-weight: 650; font-stretch: 87%; font-variant-numeric: tabular-nums; }
.result .empty { color: var(--text-2); }
.result .btn { margin-top: 20px; }
.result-kicker { font-size: 13px; color: var(--muted); font-weight: 560; margin-bottom: 4px; }
.result-extra { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }

/* Request form beside its pitch */
.cta { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cta .lead { margin-top: 18px; }
.cta .aside-note { margin-top: 28px; font-size: 15px; color: var(--text-2); }
.cta form { background: var(--surface); border: 1.5px solid var(--ink); padding: clamp(22px, 3vw, 36px); }

/* Plans and the return calculator: only while prices are shown */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.plan { padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--ink); background: var(--tint); }
.plan-name { font-size: 1.05rem; font-weight: 640; font-stretch: 108%; }
.plan-sub { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.price { margin-top: 26px; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; font-weight: 650; font-stretch: 100%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price small { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.ticks { list-style: none; margin: 28px 0 32px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plans-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.roi-inputs { display: grid; gap: 34px; }
.roi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.roi-head label { font-weight: 620; }
.roi-head output { font-variant-numeric: tabular-nums; font-weight: 650; }
.roi-out { border: 1.5px solid var(--ink); }
.roi-out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--ink); }
.roi-out > div:last-child { border-bottom: 0; background: var(--brass-tint); }
.roi-out span { color: var(--text-2); }
.roi-out b { font-size: 1.3rem; font-weight: 650; font-stretch: 87%; font-variant-numeric: tabular-nums; }

/* Responsive */
@media (max-width: 960px) {  /* the cover, the proof row and Built with stack, at one width */
  .proof-grid, .built.has-photo { grid-template-columns: minmax(0, 1fr); }
  .proof-tb, .proof-grid .specimen, .built-photo { width: 100%; max-width: 640px; }
}
@media (max-width: 1080px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .atlas-grid, .check, .cta, .roi { grid-template-columns: minmax(0, 1fr); }
  .atlas-grid .key-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-line span { display: none; }
  .shot-table thead { display: none; }
  .shot-table, .shot-table tbody { display: block; }
  .shot-table tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
  .shot-table tr:last-child { border-bottom: 0; }
  .shot-table td { display: block; padding: 0; border: 0; }
  .shot-table .idx { grid-row: 1 / span 4; width: auto; padding: 0; }
  .shot-table .reason { grid-column: 2 / 4; max-width: none; font-size: 14px; }
  .shot-table .gradecell, .shot-table .verdictcell { grid-column: 2 / 4; }
  .shot-table .verdicts { margin-top: 4px; }
  .shot-table .score { grid-column: 3; grid-row: 1; }
  .key { display: none; }
  .steps, .rules { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .notes li { padding-top: 0; }
  .notes li::before { display: none; }  /* the numbers point at keys in the table header, which phones don't show */
}
@media (max-width: 680px) {  /* phones: the cover stacks, the picture its closer crop, centred beneath the words */
  .cover-in { grid-template-columns: minmax(0, 1fr); }
  .cover .display { font-size: min(3.6rem, 10.6cqi); }
  .cover-pic { width: min(100% - 8%, 520px); margin: 0 auto; }
}
@media (max-width: 760px) {
  .titleblock dd.num { font-size: 1.35rem; }
  .clock { height: 380px; }
  .clock-plot { left: 74px; top: 58px; bottom: 50px; }
  .zone-label { left: 8px; font-size: 12px; }
  .zone-label span, .zone-short .zone-label { display: none; }
  .yband span { right: calc(100% + 8px); font-size: 11px; }
  .clock-axis-y, .event-line span { display: none; }
  .gx span { font-size: 11.5px; }
  .gx.minor span { display: none; }
  .dims { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .dim { padding-right: 0; }
  .dim .end { display: block; }  /* stacked, each stretch needs both its ends */
  .dim:last-child .end span { display: none; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--ink); }
  .inline-field { flex-direction: column; }
}
@media (max-width: 480px) {
  .titleblock dl { grid-template-columns: minmax(0, 1fr); }
  .titleblock dl > div:nth-child(even) { border-left: 0; }
  .titleblock dl > div + div { border-top: 1px solid var(--ink); }
  .titleblock dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .titleblock dd { margin: 0; text-align: right; }
  .titleblock dl > div:last-child { display: block; }  /* the council names need the row to themselves */
  .titleblock dl > div:last-child dd { margin-top: 3px; text-align: left; }
  .proof .titleblock dl > div { padding: 13px 16px 14px; }
  .proof .titleblock dd { margin-top: 0; }
  .proof .titleblock dd.num { font-size: 1.75rem; }
  .sp-sheet { padding: 18px 16px 16px; }
  .sp-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .verdicts span { padding: 5px 7px; font-size: 12px; }
}
@media (min-width: 561px) and (max-width: 1180px) {
  .atlas-map svg { --s: 1.3; }  /* the map is narrower here, so its words scale up */
}
@media (max-width: 560px) {
  .atlas-map svg { --s: 2.25; }
  .atlas-grid .key-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .clock.armed .m { opacity: var(--o, .55); transform: none; }
  .clock.armed .zone-window { clip-path: none; }
}
@media print {  /* a chart not yet scrolled to prints whole */
  .clock.armed .zone-window { clip-path: none; }
  .clock.armed .m { opacity: var(--o, .55); transform: none; animation: none; }
}