/* Instant Estimate + Parcel pre-check modals.
   Extracted verbatim from index.html so more than one page can use them.
   index.html still carries its own inline copy; if you dedupe, point it here. */

/* INSTANT ESTIMATE CHAT — Landev palette: ink #081A2C, blue #0F2A45, cream #F4F3EF */
.ie-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8,26,44,0.62); backdrop-filter: blur(6px); animation: ie-fade .22s ease; }
.ie-overlay.open { display: flex; }
@keyframes ie-fade { from { opacity: 0 } to { opacity: 1 } }

.ie-panel { background: #fff; border-radius: 3px; width: 100%; max-width: 580px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 90px rgba(8,26,44,0.45); animation: ie-rise .28s cubic-bezier(.2,.7,.3,1); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
@keyframes ie-rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }

.ie-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #DEDCD4; background: #F4F3EF; }
.ie-title { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #0F2A45; }
.ie-rule { width: 28px; height: 1px; background: currentColor; display: inline-block; }
.ie-close { width: 30px; height: 30px; border: 1px solid #DEDCD4; background: #fff; border-radius: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #4A5560; transition: background .2s ease, color .2s ease; }
.ie-close:hover { background: #081A2C; color: #fff; border-color: #081A2C; }

.ie-msgs { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; min-height: 220px; }
.ie-msg { display: flex; gap: 11px; align-items: flex-start; animation: ie-in .28s ease both; }
@keyframes ie-in { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
.ie-msg.user { flex-direction: row-reverse; }
.ie-av { width: 28px; height: 28px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.ie-msg.bot .ie-av { background: #081A2C; color: #fff; }
.ie-msg.user .ie-av { background: #E4E2DA; color: #4A5560; }

.ie-bbl { max-width: 82%; padding: 12px 15px; border-radius: 2px; font-size: 15px; line-height: 1.55; color: #081A2C; }
.ie-msg.bot .ie-bbl { background: #F4F3EF; box-shadow: 0 0 0 1px #DEDCD4; }
.ie-msg.user .ie-bbl { background: #0F2A45; color: #fff; }
.ie-bbl p { margin: 0 0 9px; }
.ie-bbl p:last-child { margin-bottom: 0; }
.ie-bbl strong { font-weight: 600; }
.ie-bbl ol, .ie-bbl ul { margin: 8px 0; padding-left: 20px; }
.ie-bbl li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.5; }
.ie-bbl li:last-child { margin-bottom: 0; }
.ie-msg.bot .ie-bbl a { color: #0F2A45; text-underline-offset: 2px; word-break: break-word; }
.ie-msg.user .ie-bbl a { color: #fff; }

.ie-dots { display: flex; gap: 4px; padding: 4px 2px; }
.ie-dots span { width: 6px; height: 6px; border-radius: 50%; background: #B6B3A9; animation: ie-bounce 1.4s infinite; }
.ie-dots span:nth-child(2) { animation-delay: .16s }
.ie-dots span:nth-child(3) { animation-delay: .32s }
@keyframes ie-bounce { 0%,60%,100% { transform: none } 30% { transform: translateY(-5px) } }

.ie-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid #DEDCD4; }
.ie-input input { flex: 1; min-width: 0; border: 1px solid #DEDCD4; border-radius: 2px; padding: 12px 14px; font: inherit; font-size: 15px; color: #081A2C; background: #fff; outline: none; transition: border-color .2s ease; }
.ie-input input:focus { border-color: #0F2A45; }
.ie-input input::placeholder { color: #7C8794; }
.ie-send { display: inline-flex; align-items: center; gap: 8px; background: #0F2A45; color: #fff; border: 0; border-radius: 2px; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 20px; cursor: pointer; transition: filter .2s ease; }
.ie-send:hover { filter: brightness(1.1); }
.ie-send:disabled { opacity: .45; cursor: not-allowed; }

.ie-foot { padding: 0 22px 16px; font-size: 11.5px; line-height: 1.45; color: #4A5560; }

@media (max-width: 620px) {
  .ie-overlay { padding: 0; align-items: flex-end; }
  .ie-panel { max-width: none; max-height: 92vh; border-radius: 0; }
  .ie-bbl { max-width: 88%; font-size: 14.5px; }
  .ie-send span { display: none; }
}
/* PARCEL PRE-CHECK */
.pc-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(8,26,44,0.62); backdrop-filter: blur(6px); animation: ie-fade .22s ease; }
.pc-overlay.open { display: flex; }
.pc-panel { background: #fff; border-radius: 3px; width: 100%; max-width: 900px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 90px rgba(8,26,44,0.45); animation: ie-rise .28s cubic-bezier(.2,.7,.3,1); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.pc-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid #DEDCD4; background: #F4F3EF; }
.pc-body { display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); gap: 34px; padding: 30px 26px; overflow-y: auto; }

.pc-h2 { font-size: clamp(22px,2.4vw,28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 20px; color: #081A2C; }
.pc-form { display: flex; flex-direction: column; gap: 12px; }
.pc-form input { width: 100%; border: 1px solid #DEDCD4; border-radius: 2px; padding: 13px 14px; font: inherit; font-size: 15px; color: #081A2C; outline: none; transition: border-color .2s ease; }
.pc-form input:focus { border-color: #0F2A45; }
.pc-form input::placeholder { color: #7C8794; }
.pc-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #0F2A45; color: #fff; border: 0; border-radius: 2px; font: inherit; font-size: 15px; font-weight: 600; padding: 13px 24px; cursor: pointer; transition: filter .2s ease; }
.pc-go:hover { filter: brightness(1.1); }
.pc-go:disabled { opacity: .5; cursor: not-allowed; }

.pc-eg-label { margin: 26px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5560; }
.pc-egs { display: flex; flex-wrap: wrap; gap: 8px; }
/* Coverage is the first question a visitor outside the service area would
   otherwise only discover after searching, so it sits on the ask screen. */
.pc-coverage { margin-top: 26px; border-top: 1px solid #DEDCD4; padding-top: 14px; font-size: 12px; line-height: 1.6; color: #4A5560; }
.pc-coverage strong { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5560; }
.pc-coverage p { margin: 0 0 6px; }
.pc-coverage p:last-child { margin-bottom: 0; }
.pc-coverage b { font-weight: 600; color: #2E3A46; }
.pc-eg { background: #F4F3EF; border: 1px solid #DEDCD4; border-radius: 2px; padding: 8px 12px; font: inherit; font-size: 13px; color: #4A5560; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.pc-eg:hover { border-color: #081A2C; color: #081A2C; }

.pc-result { display: flex; flex-direction: column; min-width: 0; }

/* Once there's a result the search column has done its job — drop it and give
   the parcel the full width, centred. */
/* 760px is the width the card was designed at. At 620 the new type scale had
   to wrap figures that belong on one line ("Meets 690 m² min.", "across 4
   units") while ~140px of panel sat empty on either side. */
.pc-body.found { grid-template-columns: minmax(0, 760px); justify-content: center; }
.pc-body.found .pc-ask { display: none; }
/* display:flex would otherwise win over the [hidden] attribute, leaving an
   empty "Check another parcel" bar on the ask screen. */
.pc-bar[hidden] { display: none; }
.pc-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #DEDCD4; }
.pc-bar span { font-size: 15px; font-weight: 600; color: #081A2C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-bar button { flex-shrink: 0; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: #0F2A45; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pc-bar button:hover { color: #081A2C; }
.pc-body.found .pc-tag { display: none; }
.pc-body.found .pc-pulse { display: none; }
.pc-tag { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5560; margin-bottom: 12px; }
.pc-card { border: 1px solid #DEDCD4; border-radius: 2px; overflow: hidden; }
.pc-map { position: relative; aspect-ratio: 16 / 10; background: #081A2C; display: block; width: 100%; }
.pc-rows { padding: 4px 16px 14px; }
.pc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #EAE8E1; }
.pc-row:last-child { border-bottom: 0; }
.pc-k { font-size: 13px; color: #4A5560; flex-shrink: 0; }
/* Registered parcel data — PID, lot area, zone code, plan number. The brand
   sheet reserves IBM Plex Mono for exactly this: drawing data and PID or
   zoning references. The digits also line up down the right edge. */
.pc-v { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; font-weight: 500; color: #081A2C; text-align: right; font-variant-numeric: tabular-nums; }
.pc-v small { display: block; font-weight: 400; font-size: 12px; color: #4A5560; margin-top: 3px; }

.pc-note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: #4A5560; }
.pc-cta { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #081A2C; color: #fff; border: 0; border-radius: 2px; font: inherit; font-size: 14.5px; font-weight: 600; padding: 14px 20px; cursor: pointer; transition: filter .2s ease; }
.pc-cta:hover { filter: brightness(1.35); }

/* Gate — what are you trying to do, plus contact */
.pc-gate { margin-top: 16px; border-top: 1px solid #DEDCD4; padding-top: 18px; animation: ie-rise .25s ease both; }
.pc-gate-h { font-size: 15px; font-weight: 600; color: #081A2C; margin-bottom: 12px; }
.pc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-opt { text-align: left; background: #F4F3EF; border: 1px solid #DEDCD4; border-radius: 2px; padding: 11px 13px; font: inherit; font-size: 13.5px; color: #081A2C; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.pc-opt small { display: block; margin-top: 3px; font-size: 11px; color: #4A5560; }
.pc-opt:hover { border-color: #081A2C; }
.pc-opt.on { background: #081A2C; border-color: #081A2C; color: #fff; }
.pc-opt.on small { color: rgba(255,255,255,0.65); }
.pc-opt.wide { grid-column: 1 / -1; }
.pc-other { width: 100%; margin-top: 8px; border: 1px solid #0F2A45; border-radius: 2px; padding: 11px 13px; font: inherit; font-size: 14px; color: #081A2C; outline: none; animation: ie-rise .2s ease both; }
.pc-other::placeholder { color: #7C8794; }

.pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pc-field { display: flex; flex-direction: column; gap: 5px; }
.pc-field:nth-child(2) { grid-column: 1 / -1; }
.pc-field span { font-size: 12px; color: #4A5560; }
.pc-field em { color: #0F2A45; font-style: normal; }
.pc-field input { border: 1px solid #DEDCD4; border-radius: 2px; padding: 10px 12px; font: inherit; font-size: 14px; color: #081A2C; outline: none; transition: border-color .2s ease; }
.pc-field input:focus { border-color: #0F2A45; }
.pc-gate-err:not(:empty) { margin-top: 10px; font-size: 13px; color: #a4564a; }

/* Reveal */
.pc-flags { margin-top: 16px; border-top: 1px solid #DEDCD4; padding-top: 18px; animation: ie-rise .3s ease both; }
.pc-flags-h { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5560; margin-bottom: 14px; }
.pc-flags-h strong { color: #0F2A45; font-weight: 600; }
.pc-flag { border-left: 2px solid #DEDCD4; padding: 2px 0 2px 13px; margin-bottom: 14px; }
.pc-flag.alert { border-left-color: #c2603f; }
.pc-flag.ok { border-left-color: #4f8a6a; }
.pc-flag-t { font-size: 14.5px; font-weight: 600; color: #081A2C; }
.pc-flag-b { font-size: 13.5px; line-height: 1.55; color: #4A5560; margin-top: 4px; }

.pc-zone { border: 1px solid #DCE0E6; background: #F5F6F8; border-radius: 2px; padding: 14px 16px; margin-bottom: 16px; }
.pc-zone-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pc-zone-h strong { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 500; color: #081A2C; }
.pc-zone-h em.draft { color: #c2603f; }
.pc-zone-h em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4f8a6a; flex-shrink: 0; }
.pc-zone-s { font-size: 13.5px; line-height: 1.6; color: #2E3A46; }
.pc-zone-p { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pc-zone-p div { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.pc-zone-p b { flex: 0 0 34%; font-weight: 500; color: #4A5560; }
.pc-zone-p span { color: #081A2C; }
.pc-zone-c { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #8a5a52; }
.pc-zone-src { margin-top: 10px; font-size: 11.5px; color: #4A5560; }
.pc-zone-src a { color: #0F2A45; word-break: break-all; }
.pc-sub { margin: 20px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5560; }
.pc-sub small { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #A9B0B8; }
.pc-app { border: 1px solid #DEDCD4; border-radius: 2px; padding: 11px 13px; margin-bottom: 8px; background: #fff; }
.pc-app.live { border-color: #c2603f; background: #fdf8f6; }
.pc-app-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-app-h span { font-size: 13.5px; font-weight: 600; color: #081A2C; }
.pc-app-h em { flex-shrink: 0; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4A5560; }
.pc-app.live .pc-app-h em { color: #c2603f; }
.pc-app-m { font-size: 12px; color: #4A5560; margin-top: 3px; }
.pc-app-d { font-size: 13px; line-height: 1.5; color: #4A5560; margin-top: 6px; }

.pc-empty { border: 1px dashed #DEDCD4; border-radius: 2px; padding: 30px 22px; text-align: center; font-size: 14px; line-height: 1.6; color: #4A5560; }

/* ===== Idle / lookup animation =========================================
   Stands in for the result before there is one. The geometry is schematic —
   a parcel, its setback inset, a building envelope — so it reads as what the
   tool is about to go and find rather than as a claim about anyone's lot.

   Three states, driven from the real lookup rather than a timer:
   ready    slow drift while the visitor is still typing
   checking the outline traces fast and a scan sweeps the envelope
   done     everything settles (the card replaces this almost immediately). */
.pc-pulse { color: #2f6f9e; }
.pc-pulse[hidden] { display: none; }
.pc-pulse-scene { max-width: 340px; margin: 0 auto; }
.pc-pulse-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-pulse-env { animation: pc-pulse-breathe 5s ease-in-out infinite; transform-origin: 181px 196px; }
.pc-pulse-halo { animation: pc-pulse-dim 5s ease-in-out infinite; }
.pc-pulse-trace { animation: pc-pulse-trace 12s linear infinite; opacity: .7; }
.pc-pulse-scan { opacity: 0; }
.pc-pulse[data-state="checking"] .pc-pulse-trace { animation-duration: 2s; }
.pc-pulse[data-state="checking"] .pc-pulse-scan { opacity: 1; animation: pc-pulse-scan 2.3s ease-in-out infinite; }
.pc-pulse[data-state="checking"] .pc-pulse-env { animation: none; }
.pc-pulse[data-state="done"] .pc-pulse-trace { stroke-dasharray: none; animation: none; opacity: .6; }
.pc-pulse[data-state="done"] .pc-pulse-env,
.pc-pulse[data-state="done"] .pc-pulse-halo { animation: none; }
/* Nothing animates while the overlay is shut. */
.pc-pulse[data-paused="true"] * { animation-play-state: paused !important; }
.pc-pulse-msg { text-align: center; min-height: 84px; margin-top: 4px; }
.pc-pulse-msg h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: #0e1518; }
.pc-pulse-msg p { margin: 0; font-size: 13px; line-height: 1.65; color: #6B7680; }
.pc-pulse-steps { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 16px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8A9296; }
.pc-pulse-steps i { width: 3px; height: 3px; border-radius: 50%; background: #DEDCD4; }
@keyframes pc-pulse-breathe { 0%, 100% { transform: translateY(0); opacity: .75 } 50% { transform: translateY(-4px); opacity: 1 } }
@keyframes pc-pulse-dim { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes pc-pulse-trace { to { stroke-dashoffset: -100 } }
@keyframes pc-pulse-scan { 0%, 100% { transform: translateY(16px); opacity: .2 } 50% { transform: translateY(-26px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .pc-pulse * { animation: none !important; }
  .pc-pulse-scan { display: none; }
}
.pc-err { border: 1px solid #e6d4d0; background: #fdf7f6; border-radius: 2px; padding: 18px; font-size: 14px; line-height: 1.55; color: #8a5a52; }
.pc-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: pc-rot .7s linear infinite; }
@keyframes pc-rot { to { transform: rotate(360deg) } }

@media (max-width: 780px) {
  .pc-overlay { padding: 0; align-items: flex-end; }
  .pc-panel { max-width: none; max-height: 94vh; border-radius: 0; }
  .pc-body { grid-template-columns: 1fr; gap: 26px; padding: 22px 20px; }
  .pc-opts, .pc-fields { grid-template-columns: 1fr; }
}

/* What this zoning allows on this lot */
.pc-env { margin-top: 12px; border: 1px solid #dbe6d8; background: #f6faf4; border-radius: 2px; padding: 12px 14px; }
.pc-env-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4f8a6a; margin-bottom: 9px; }
.pc-env-r { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.pc-env-r b { flex: 0 0 34%; font-weight: 500; color: #4A5560; }
.pc-env-r span { color: #081A2C; font-weight: 600; }
.pc-env-r span small { display: block; font-weight: 400; font-size: 12px; color: #5E6875; margin-top: 1px; }
.pc-env-r.warn span { color: #a4564a; }
.pc-env-n { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #4A5560; }

/* Setback sketch */
.pc-sketch { margin-top: 12px; }
.pc-sketch .pc-map { border-radius: 2px; }
.pc-sketch-n { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: #4A5560; }

/* Bylaw citations inside zone points */
.pc-cite, .pc-zone-p a.pc-cite { color: #0F2A45; text-decoration: none; border-bottom: 1px dotted #A8B8C9; }
.pc-cite:hover { border-bottom-style: solid; }

/* Per-lot setback explanation (replaces the sketch) */
.pc-setnote { margin-top: 12px; border-left: 2px solid #DCE0E6; padding: 2px 0 2px 13px; font-size: 13px; line-height: 1.55; color: #2E3A46; }
.pc-setnote b { color: #081A2C; font-weight: 600; }

/* ===== Reveal card =====================================================
   Rebuilt to the 2B layout. The card is one padded column with a single
   rhythm: every block is a flex child of .pcx, so one gap value sets the
   spacing between the photo, the tiles, each panel and the CTA, and nothing
   carries margins of its own.

   Two things drove the retype. The old card ran the whole report at 11–13.5px,
   which made a verified bylaw figure look like fine print; the body list now
   sits at 15px and the numbers that answer the question — tile values and
   setbacks — are large enough to read at a glance. And the three light panels
   no longer carry three different blues: colour was doing no work there, so
   they share one ground and the dark panel keeps its contrast for the one
   section that earns it. */
.pcx { background: #fff; border-radius: 14px; overflow: hidden; padding: 26px; display: flex; flex-direction: column; gap: 22px; }

/* Photo */
.pcx-photo { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #081A2C; }
.pcx-photo .pc-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcx-photo-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,20,0.72) 0%, rgba(10,15,20,0) 55%); pointer-events: none; }
.pcx-cap { position: absolute; left: 20px; bottom: 18px; right: 150px; color: #fff; }
.pcx-cap b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.pcx-cap span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,0.85); }
.pcx-badge { position: absolute; right: 20px; bottom: 18px; background: rgba(20,25,32,0.72); border-radius: 10px; padding: 11px 16px; color: #fff; text-align: right; min-width: 118px; }
.pcx-badge small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.pcx-badge strong { display: block; margin-top: 2px; font-size: 28px; font-weight: 700; line-height: 1.15; }

/* Stat tiles */
.pcx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; }
.pcx-tile { border-radius: 12px; padding: 16px 18px; background: #F4F3EF; }
.pcx-tile small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #7C8794; text-transform: uppercase; }
.pcx-tile b { display: block; margin-top: 7px; font-size: 20px; font-weight: 700; line-height: 1.15; color: #081A2C; letter-spacing: -0.015em; }
.pcx-tile em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 500; color: #6F7A87; line-height: 1.4; }

/* Panels */
.pcx-body { display: flex; flex-direction: column; gap: 22px; }
.pcx-panel { background: #ECEEF2; border-radius: 12px; padding: 22px 24px; }
.pcx-panel-h { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pcx-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #0F2A45; flex-shrink: 0; }
.pcx-panel-t { font-size: 13.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #081A2C; }
/* The note that closes a panel is set off by a rule rather than by shrinking
   it — it is commentary, not fine print. */
.pcx-panel-n { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(15,42,69,0.15); font-size: 13.5px; line-height: 1.6; color: #4A5560; }
.pcx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.pcx-grid2 > .pcx-kv.wide { grid-column: 1 / -1; }
.pcx-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 30px; }
.pcx-stack { display: flex; flex-direction: column; gap: 16px; }

/* Label / value pairs */
.pcx-kv small { display: block; font-size: 13px; font-weight: 700; color: #16395C; margin-bottom: 7px; }
.pcx-kv b { display: block; font-size: 15px; font-weight: 600; color: #081A2C; line-height: 1.5; }
.pcx-kv em { display: block; font-style: normal; font-size: 13.5px; color: #4A5560; line-height: 1.6; margin-top: 6px; }
.pcx-setbacks .pcx-kv b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

/* Compound bylaw answers render as bullets rather than one run-on line. The
   marker is drawn with a pseudo-element so it inherits the panel's own text
   colour on the dark subdivision panel as well as the light ones. */
.pcx-list { list-style: none; margin: 0; padding: 0; }
.pcx-list li { position: relative; padding-left: 15px; font-size: 15px; font-weight: 500; color: #2E3A46; line-height: 1.55; }
.pcx-list li + li { margin-top: 6px; }
.pcx-list li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; }
.pcx-kv em .pcx-list li { font-size: 13.5px; font-weight: 400; color: #4A5560; }
.pcx-kv em .pcx-list li::before { top: 8px; }

/* The one panel that keeps its own colour: cautions read against the report,
   not with it. */
.pcx-sub { background: #0F2A45; }
.pcx-sub .pcx-dot { background: #8FA2B6; }
.pcx-sub .pcx-panel-t { color: #fff; }
.pcx-sub .pcx-kv small { color: #A8B8C9; }
.pcx-sub .pcx-kv b, .pcx-sub .pcx-list li { color: rgba(255,255,255,0.9); }
.pcx-sub p { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.75); }
.pcx-more { background: #F4F3EF; }
.pcx-more .pcx-dot { background: #7C8794; }
.pcx-more .pcx-kv small { color: #5A6470; }

/* The disclaimer is the one block that has to be read, so it is the one block
   that does not look like a footnote. Plain red on the card's own ground —
   a tinted box would file it back under decoration. */
/* A conversion is an aside to the figure it follows, never a competitor. */
.pcx-imp { font-style: normal; font-weight: 400; color: #6F7A87; white-space: nowrap; }
.pcx-sub .pcx-imp { color: rgba(255,255,255,0.6); }
.pcx-note { font-size: 13px; line-height: 1.6; color: #D42A20; padding: 0 4px; }
.pcx .pc-flag { margin: 0; }
/* An anchor now, not a button — it books a call. The extra properties are
   what an <a> needs to sit where a full-width <button> did. */
.pcx-cta { display: block; box-sizing: border-box; width: 100%; background: #0F2A45; color: #fff; border: none; border-radius: 12px; padding: 16px; font: inherit; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.pcx-cta:hover { background: #17395C; color: #fff; }
@media (max-width: 560px) {
  .pcx { padding: 16px; gap: 18px; }
  /* auto-fit would give up and stack all four at this width; two-up keeps the
     tiles a glanceable row rather than a list. */
  .pcx-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pcx-tile { padding: 14px; }
  .pcx-tile b { font-size: 17px; }
  .pcx-panel { padding: 18px 18px; }
  .pcx-grid2, .pcx-grid3 { grid-template-columns: 1fr; }
  /* The caption wraps to two lines on a phone, so the badge moves to the top
     corner rather than fighting it for the bottom edge. Taking it out of the
     photo's flow instead would clip it — .pcx-photo hides its overflow. */
  .pcx-cap { left: 14px; right: 14px; bottom: 12px; }
  .pcx-cap b { font-size: 15px; }
  .pcx-badge { top: 12px; right: 12px; bottom: auto; min-width: 0; padding: 8px 12px; }
  .pcx-badge strong { font-size: 20px; }
  .pcx-photo { aspect-ratio: 4 / 3; }
}
}