/* Front page only: the words, one product window that plays a sample check in four steps, then the
   sections. Kept apart from styles.css so its short class names never meet the report's.
   The free check's form, wait, result and phone bars are in styles.css. */

/* A returning buyer's "Open my report" box, above the hero (hidden for everyone else). */
.recover-top .recover { margin: 12px 0 0; }

/* ================= 1. Hero words ================= */
.hero { position: relative; isolation: isolate; padding-top: 20px; overflow-x: clip; }
/* The one decoration: faint catchment rings behind the headline (deco colour, at most 1.3:1). */
.rings { position: absolute; z-index: -1; left: 50%; top: 138px; width: 1200px; height: 1200px; max-width: none; margin: -600px 0 0 -600px; pointer-events: none; }
.rings circle { fill: none; stroke: var(--deco); transform-box: fill-box; transform-origin: center; }
/* The faintness is on the stroke, so opacity stays free for the motion gate and the play. */
.rings .r1 { stroke-width: 1.4; stroke-dasharray: 5 6; stroke-opacity: 0.55; }
.rings .r2 { stroke-width: 1.2; stroke-opacity: 0.42; }
.rings .r3 { stroke-width: 1; stroke-opacity: 0.32; }
@media (max-width: 759px) { .rings { display: none; } }

.hero-text { position: relative; }
.hero h1 {
  margin-top: var(--s-3);
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-hero); line-height: 1;
  letter-spacing: -0.025em; font-variation-settings: "opsz" 96;
}
.h1-line { display: block; }
.leads { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.lead { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }
.lead b { font-weight: 700; }
.lp-berry { color: var(--berry); }
.lp-petrol { color: var(--primary); }
.hero .ctas { margin-top: var(--s-6); }
.hero .micro { margin-top: 10px; }
@media (min-width: 760px) {
  .hero-text { text-align: center; }
  .leads { justify-items: center; }
  .hero .ctas { justify-content: center; }
}
/* One line from 1024 px up, so the product window starts inside a laptop's first screen. */
@media (min-width: 1024px) {
  .h1-line { display: inline; }
  .hero h1 { white-space: nowrap; }
  .leads { gap: 4px; margin-top: var(--s-4); }
  .hero .ctas { margin-top: var(--s-5); }
  .hero .micro { margin-top: 8px; }
}

/* ================= 2. The product window ================= */
.demo-sec { margin-top: var(--s-7); }
@media (min-width: 1024px) { .demo-sec { margin-top: var(--s-6); } }
.demo-wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.demo { position: relative; display: grid; gap: var(--s-3); }

/* A step's header: the tick ring, the title and who pays. The "now" layer lights it while it plays. */
.dhead { position: relative; isolation: isolate; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; }
.dhead .now { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-screen); background: var(--surface); box-shadow: var(--hair), var(--sh-2); opacity: 0; pointer-events: none; }
.dmark { position: relative; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dmark .done { position: absolute; inset: 0; border-radius: 50%; background: var(--primary); }
.dmark .done::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 9.5px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dtitle { line-height: 24px; }
.dtitle h3 { display: inline; font-size: 1rem; font-weight: 700; line-height: inherit; letter-spacing: -0.015em; }
/* A space in the page sits between the title and its tag, so big text can wrap the tag. */
.dtitle .tag { margin-left: 2px; vertical-align: 1px; height: 22px; line-height: 22px; padding: 0 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }

/* The white product screens */
.pane { position: relative; min-width: 0; padding: 14px 16px 0; background: var(--surface); font-size: var(--t-mock); line-height: 1.4; }
.pfoot { margin: 12px -16px 0; padding: 9px 16px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-mock); }
.plabel { color: var(--muted); font-size: var(--t-mock); font-weight: 500; }
.pfig { margin-top: 2px; font-size: 2.125rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pfig small { margin-left: 4px; color: var(--muted); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
.pfig.berry { color: var(--berry); }

/* Step 1: the address and the concept, as the form's own two fields. Under the address, the line
   the form's address box shows once a suggestion is picked. */
.p-bar { display: grid; gap: 12px; padding-bottom: 14px; }
.bfield { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-row); background: var(--sunk); color: var(--ink); font-size: 0.9375rem; overflow: hidden; }
.f-pin { width: 16px; height: 16px; flex: none; }
.f-pin path { fill: var(--map-pin); }
.f-pin circle { fill: var(--sunk); }
.f-text { min-width: 0; }
.f-concept { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: var(--t-mock); font-weight: 500; }
.found span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--fits-mark); }
.tick::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

/* Step 2: residents and the fit */
.pkey { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted); font-size: var(--t-mock); }
.pkey span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pkey i { width: 12px; height: 7px; border-radius: 1px; }
.k-here { background: var(--chart-here); }
.k-around { background: var(--chart-area); height: 4px !important; }
.pkey span + span { margin-left: 6px; }
/* The key ("Here", "Surrounding area") is too long to sit beside the number at most widths, so
   it always has its own line, left-aligned under the number and over the bars it explains. */
.p-res .phead { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; }
.p-res .phead > div { display: contents; }
.p-res .phead .plabel { flex: 0 0 100%; }
.p-res .pfig { flex: none; }
.p-res .pkey { flex-basis: 100%; margin-top: 2px; }
.prows { display: grid; gap: 8px; margin-top: 10px; }
.prow { display: grid; grid-template-columns: 3.3em minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.prow .who { color: var(--ink-2); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbars { display: grid; gap: 3px; }
.pbars i { display: block; height: 8px; border-radius: 0 2px 2px 0; transform-origin: left center; }
.pbars .here { background: var(--chart-here); }
.pbars .around { height: 4px; background: var(--chart-area); }
.prow .chip { padding: 1px 8px; }
/* With big text on a small phone, the change drops under its row, so the row never pushes the page
   sideways. The screen is the container, in em, so this follows the text size. */
.p-res { container-type: inline-size; }
@container (max-width: 15em) {
  .prow { grid-template-columns: 3.3em minmax(0, 1fr); row-gap: 4px; }
  .prow .chip { grid-column: 1 / -1; justify-self: start; }
}
.p-res .scale3 { margin-top: 12px; }
.p-res .scale3 > span { min-height: 40px; flex-direction: column; gap: 2px; }
.pcap { margin-top: 2px; }

/* Step 3: the map. Distances are drawn on a square-root scale, so the rings are labelled instead
   of a scale bar. */
.pmap { display: block; width: 100%; height: auto; aspect-ratio: 250 / 224; margin-top: 2px; border-radius: var(--r-small); overflow: hidden; }
@media (min-width: 960px) { .pmap { aspect-ratio: auto; height: 204px; } }
.pmap .ground { fill: var(--sunk); }
.pmap .blocks rect { fill: var(--map-block); }
.pmap .road { fill: none; stroke: var(--map-street); stroke-width: 7; stroke-linecap: round; }
.pmap .road.main { stroke-width: 10; }
.pmap .area { fill: var(--primary); fill-opacity: 0.07; stroke: var(--primary); stroke-width: 1.4; stroke-dasharray: 6 5; }
.pmap .walk { fill: none; stroke: var(--primary); stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.pmap .area, .pmap .walk, .pmap .mk, .pmap .pin { transform-box: fill-box; transform-origin: center; }
.pmap .pin { transform-origin: 50% 100%; }
.pmap .ring-l rect { fill: var(--surface); stroke: var(--line); }
.pmap .ring-l text { fill: var(--primary); font: 600 14.5px var(--f-text); text-anchor: middle; }
.pmap .rival rect { fill: var(--surface); stroke: var(--map-rival); stroke-width: 1.7; }
.pmap .rival text { fill: var(--map-rival); font: 700 14.5px var(--f-text); text-anchor: middle; }
.pmap .magnet rect { fill: var(--primary-soft); stroke: var(--map-magnet); stroke-width: 1.7; }
.pmap .pin path { fill: var(--map-pin); }
.pmap .pin circle { fill: var(--surface); }
.pnear { margin-top: 10px; color: var(--ink-2); }
.pnear b { color: var(--ink); font-weight: 600; }
.mkey { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--muted); }
.mkey span { display: inline-flex; align-items: center; gap: 6px; }
.k-site { width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--map-pin); }
.k-sq { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.6px var(--map-rival); }
.k-dia { width: 8px; height: 8px; margin-inline: 1px; transform: rotate(45deg); border-radius: 1px; background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--map-magnet); }

/* Step 4: rent as days of takings */
.days { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.days > span { position: relative; height: 28px; border-radius: 6px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.days i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--berry); transform-origin: left center; }
.daynums { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 3px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
/* The usual range as a band: green to 8%, amber to 11%, red above; the tick is this site. Scale 0 to 20%. */
.pband { position: relative; margin-top: 14px; }
.pband-track { position: relative; display: grid; grid-template-columns: 40fr 15fr 45fr; gap: 2px; height: 8px; }
.pband-track > span { border-radius: 1px; }
.pband-track .b1 { background: var(--fits-mark); border-radius: 4px 1px 1px 4px; }
.pband-track .b2 { background: var(--mixed-mark); }
.pband-track .b3 { background: var(--against-mark); border-radius: 1px 4px 4px 1px; }
.pband-tick { position: absolute; top: -5px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.pband-lab { position: relative; height: 18px; margin-top: 3px; color: var(--muted); line-height: 18px; font-variant-numeric: tabular-nums; }
.pband-lab span { position: absolute; transform: translateX(-50%); }
.pflag { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--against-fg); font-weight: 600; }
.pbe { margin-top: 6px; color: var(--ink-2); }
.pbe b { color: var(--ink); font-size: 0.9375rem; }

.demo-note { position: relative; margin-top: 12px; padding-inline: 4px; color: var(--muted); font-size: var(--t-caption); }
.replay { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--primary); font: 600 var(--t-caption) var(--f-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.replay:hover { color: var(--primary-hover); }
.replay[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* ---- Wide (1200 px and up): the rail beside one window. The four steps share one grid, so the
   step headers can sit in the rail and their screens in the window, in reading order. ---- */
@media (min-width: 1200px) {
  .demo {
    grid-template-columns: 284px 12px repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(72px, auto)) 1fr;
    gap: 4px 0; padding: 12px; border-radius: 28px; background: var(--tint-mist); box-shadow: var(--hair);
  }
  .dstep { display: contents; }
  .stage-bg { grid-column: 3 / 6; grid-row: 1 / 6; border-radius: 18px; background: var(--surface); box-shadow: var(--hair), var(--sh-1); }
  .dstep[data-step="1"] .dhead { grid-column: 1; grid-row: 1; }
  .dstep[data-step="2"] .dhead { grid-column: 1; grid-row: 2; }
  .dstep[data-step="3"] .dhead { grid-column: 1; grid-row: 3; }
  .dstep[data-step="4"] .dhead { grid-column: 1; grid-row: 4; }
  .p-bar { grid-column: 3 / 6; grid-row: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-self: start; border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; background: none; }
  .p-res { grid-column: 3; grid-row: 2 / 6; background: none; }
  .p-map { grid-column: 4; grid-row: 2 / 6; background: none; border-left: 1px solid var(--line); }
  .p-rent { grid-column: 5; grid-row: 2 / 6; background: none; border-left: 1px solid var(--line); }
  .p-res, .p-map, .p-rent { display: flex; flex-direction: column; margin-top: -4px; }
  .p-res .pfoot, .p-map .pfoot, .p-rent .pfoot { margin-top: auto; padding-top: 9px; }
  .p-res > :nth-last-child(2), .p-map > :nth-last-child(2), .p-rent > :nth-last-child(2) { margin-bottom: 12px; }
}
/* ---- Mid (960 to 1199 px): the four headers as one strip over the window ---- */
@media (min-width: 960px) and (max-width: 1199px) {
  .demo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding: 12px; border-radius: 28px; background: var(--tint-mist); box-shadow: var(--hair); }
  .dstep { display: contents; }
  .stage-bg { grid-column: 1 / -1; grid-row: 2 / 4; margin-top: 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--hair), var(--sh-1); }
  .dhead { grid-row: 1; padding: 12px 14px; }
  .dstep[data-step="1"] .dhead { grid-column: 1 / 4; }
  .dstep[data-step="2"] .dhead { grid-column: 4 / 7; }
  .dstep[data-step="3"] .dhead { grid-column: 7 / 10; }
  .dstep[data-step="4"] .dhead { grid-column: 10 / 13; }
  .dtitle .tag { display: table; margin: 6px 0 0; }
  .p-bar { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--line); background: none; }
  .p-res { grid-column: 1 / 5; grid-row: 3; background: none; }
  .p-map { grid-column: 5 / 9; grid-row: 3; background: none; border-left: 1px solid var(--line); }
  .p-rent { grid-column: 9 / 13; grid-row: 3; background: none; border-left: 1px solid var(--line); }
  .p-res, .p-map, .p-rent { display: flex; flex-direction: column; }
  .p-res .pfoot, .p-map .pfoot, .p-rent .pfoot { margin-top: auto; }
  .p-res > :nth-last-child(2), .p-map > :nth-last-child(2), .p-rent > :nth-last-child(2) { margin-bottom: 12px; }
}
/* ---- Phones and tablets (under 960 px): four trays, each a step over its own screen ---- */
@media (max-width: 959px) {
  .stage-bg { display: none; }
  .demo { gap: var(--s-3); }
  .dstep { padding: 8px; border-radius: var(--r-tray); }
  .dstep[data-step="1"] { background: var(--tint-mist); }
  .dstep[data-step="2"] { background: var(--tint-sky); }
  .dstep[data-step="3"] { background: var(--tint-stone); }
  .dstep[data-step="4"] { background: var(--tint-blush); }
  .dhead { padding: 10px 8px 12px; }
  .dhead .now { display: none; }
  .dtitle { line-height: 26px; }
  .dtitle h3 { font-size: 1.0625rem; }
  .pane { border-radius: var(--r-screen); box-shadow: var(--hair); }
  .pfoot { border-radius: 0 0 var(--r-screen) var(--r-screen); }
  .pfig { font-size: 2.25rem; }
  .prow { font-size: 0.875rem; }
  .days > span { height: 32px; }
}
@media (min-width: 600px) and (max-width: 959px) { .demo-wrap { max-width: 640px; } }

/* ================= 3. Sections ================= */
.why, .how, .offer, .start-sec, .faq { padding-top: clamp(72px, 4vw + 48px, 128px); }
.sec-head { max-width: 44rem; margin-bottom: var(--s-7); }
.sec-head h2, .why h2 { font-family: var(--f-display); font-weight: 750; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: "opsz" 60; }
.sec-head .kicker + h2 { margin-top: 12px; }
.sec-lede { margin-top: 12px; color: var(--ink-2); font-size: var(--t-lead); }
@media (min-width: 1024px) { .sec-head { margin-bottom: var(--s-8); } }

/* ---- Why it matters: the claim on the left, the reasons on the right ---- */
.why-in { display: grid; gap: var(--s-6); }
.why-body { display: grid; gap: var(--s-4); max-width: 38em; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.6; }
.why-body .last { color: var(--ink); }
.case { padding: 20px 22px; border-radius: var(--r-tray); background: var(--tint-stone); color: var(--ink-2); font-size: var(--t-body); }
.case b { color: var(--ink); }
@media (min-width: 960px) {
  .why-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
  .why h2 { position: sticky; top: 32px; }
}

/* ---- How it works: four numbered steps, words left, picture right ---- */
.steps { display: grid; gap: var(--s-9); margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: var(--s-5); }
.step-text .num { margin-bottom: 14px; }
.step h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.step-text p { margin-top: 8px; max-width: 32em; color: var(--ink-2); }
.pic { container-type: inline-size; padding: clamp(16px, 4vw, 40px); border-radius: var(--r-tray); }
.t-mist { background: var(--tint-mist); }
.t-sky { background: var(--tint-sky); }
.t-stone { background: var(--tint-stone); }
.t-blush { background: var(--tint-blush); }
@media (min-width: 960px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: center; }
}
.crop { max-width: 500px; margin-inline: auto; padding: 18px; border-radius: var(--r-screen); background: var(--surface); box-shadow: var(--hair), var(--sh-2); font-size: 0.875rem; }
.crop-h { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

/* Step 1 picture: the form suggests how far to look. The screen itself is the container: it stops
   at 500 px, so the picture around it is no guide. */
.crop { container-type: inline-size; }
.c-pair { display: grid; gap: 12px; align-items: end; }
/* Side by side only while both choices fit whole (at most 500 px, so only at normal text); in em,
   so big text stacks them. */
@container (min-width: 30em) { .c-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.c-fld { display: grid; gap: 6px; }
.c-fld > span { color: var(--ink); font-size: var(--t-mock); font-weight: 600; }
/* A block, not flex, so a long choice ends in an ellipsis before the chevron. */
.c-sel { position: relative; display: block; height: 42px; line-height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-row); background: var(--sunk); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sel::after { content: ""; position: absolute; right: 14px; top: 15px; width: 7px; height: 7px; border: solid var(--ink-2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.c-sel.lit { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.c-hint { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-small); background: var(--primary-soft); color: var(--ink-2); font-size: var(--t-mock); line-height: 1.45; }
.c-hint b { color: var(--primary); }
.c-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; color: var(--muted); font-size: var(--t-mock); }
.c-starts .sp { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-2); font-weight: 500; }

/* Step 2 picture: the free result's first lines */
.c-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--mixed-bg); color: var(--mixed-fg); font-size: var(--t-mock); font-weight: 650; }
.c-line { margin-top: 10px; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.c-share { margin-top: 6px; color: var(--ink-2); }
.crop .well { margin-top: 14px; font-size: var(--t-mock); }
.c-src { margin-top: 10px; color: var(--muted); font-size: var(--t-mock); }

/* Step 3 picture: the report cover over its summary */
.pile { position: relative; max-width: 500px; margin-inline: auto; }
.mini-cover { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; align-items: center; width: 92%; padding: 18px 20px; border-radius: var(--r-screen); background: var(--cover); color: var(--on-cover); box-shadow: inset 0 0 0 1px var(--cover-edge), 0 16px 32px rgb(0 46 61 / 0.22); }
.mc-kick { color: var(--on-cover-accent); font-size: var(--t-mock); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.mc-title { margin-top: 6px; font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
.mc-meta { margin-top: 10px; font-size: var(--t-mock); font-weight: 600; }
.mc-meta span { display: block; color: var(--on-cover-muted); font-weight: 500; }
.mc-map circle { fill: none; stroke: var(--on-cover-muted); stroke-width: 1.2; }
.mc-map .i { stroke-dasharray: 3 3; }
.mc-map rect { fill: none; stroke: var(--on-cover); stroke-width: 1.4; }
.mc-map .s { fill: var(--on-cover-berry); stroke: none; }
.mini-sum { position: relative; z-index: 1; margin: -30px 0 0 6%; padding: 46px 16px 16px; border-radius: var(--r-screen); background: var(--surface); box-shadow: var(--hair), var(--sh-2); }
.ms-label { color: var(--primary); font-size: var(--t-mock); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ms-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; border-top: 1px solid var(--line); }
/* The label takes the spare height, so the two figures in a row share a baseline. */
.ms-figs > div { display: flex; flex-direction: column; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.ms-figs > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
.ms-figs dt { flex: 1; color: var(--muted); font-size: var(--t-mock); line-height: 1.3; }
.ms-figs dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ms-fix { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-row); box-shadow: var(--hair); font-size: var(--t-mock); line-height: 1.4; }
.ms-fix small { color: var(--berry); font-size: var(--t-mock); font-weight: 650; }
.ms-fix strong { grid-column: 1; color: var(--ink); font-size: 0.875rem; }
.ms-fix span { grid-column: 1; color: var(--ink-2); }
.ms-fix b { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--berry); font-size: 1.125rem; }
/* A narrow picture (a phone with big text): one figure a row, and the cover keeps to its words.
   At normal text even a 320 px phone's picture is over 15em wide, so it keeps two columns. */
@container (max-width: 14em) {
  .ms-figs { grid-template-columns: minmax(0, 1fr); }
  .ms-figs > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .mini-cover { grid-template-columns: minmax(0, 1fr); }
  .mc-map { display: none; }
}

/* Step 4 picture: the tally sheet and the "Before you sign" list */
.pile-tally { display: grid; gap: 12px; max-width: 540px; margin-inline: auto; }
/* The rows share the sheet's columns (subgrid), so each column is as wide as its own words and
   the strokes get the rest. When room runs short "Residents here" breaks onto two lines, never
   "Walked past". Browsers without subgrid keep the fixed columns. */
.sheet { display: grid; grid-template-columns: max-content minmax(min-content, 1fr) max-content fit-content(7.4em); column-gap: 8px; padding: 14px 16px 12px; border-radius: var(--r-screen); background: var(--surface); box-shadow: var(--hair), var(--sh-2); font-size: var(--t-mock); }
.sh-head, .sh-cols, .tl-row, .sh-total { grid-column: 1 / -1; }
.sh-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.sh-cols, .tl-row, .sh-total { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.6em 7.4em; grid-template-columns: subgrid; gap: 0 8px; align-items: center; }
.sh-cols { padding: 6px 0; color: var(--muted); line-height: 1.25; }
.sh-cols span:nth-child(2) { white-space: nowrap; }
.sh-cols span:nth-child(3), .sh-cols span:nth-child(4) { text-align: right; }
.sh-cols span:nth-child(4) { text-wrap: balance; }
.tl-row { min-height: 36px; border-top: 1px solid var(--line); }
.tl-row .who { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-row b, .tl-row .res { text-align: right; font-variant-numeric: tabular-nums; }
.tl-row b { font-size: 0.9375rem; }
.tl-row .res { color: var(--muted); }
.res-of { display: none; }
.marks { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.grp { position: relative; display: inline-flex; gap: 4px; height: 18px; }
.grp i { display: block; width: 2px; height: 100%; border-radius: 1px; background: var(--ink); transform-origin: bottom center; }
.grp .slash { position: absolute; left: -3px; top: 14px; width: 26px; height: 2px; transform: rotate(-28deg); transform-origin: left center; }
.sh-total { padding-top: 8px; border-top: 1px solid var(--line-strong); color: var(--muted); }
.sh-total span:first-child { grid-column: 1 / 3; }
.sh-total b { color: var(--ink); text-align: right; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.bys { padding: 14px 16px; border-radius: var(--r-screen); background: var(--surface); box-shadow: var(--hair), var(--sh-3); }
.bys-title { color: var(--berry); font-size: 0.875rem; font-weight: 700; }
.bys ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.bys li { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.bys li i { width: 14px; height: 14px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* A narrow picture (a phone, or big text): three columns, and each age's share of residents on
   its own line under it. In em, so bigger text switches sooner. */
@container (max-width: 17em) {
  .sh-cols span:nth-child(2) { white-space: normal; }
  .sheet { grid-template-columns: minmax(min-content, max-content) minmax(min-content, 1fr) max-content; }
  .sh-cols, .tl-row, .sh-total { grid-template-columns: 4.6em minmax(0, 1fr) 2.6em; grid-template-columns: subgrid; }
  .sh-cols span:nth-child(4), .sh-total span:last-child { display: none; }
  .tl-row { padding-block: 4px; }
  .tl-row .res { grid-column: 1 / -1; text-align: left; line-height: 1.3; }
  .res-of { display: inline; }
}
/* Side by side only while the sheet keeps room for its four columns (about 500 px at normal text). */
@container (min-width: 29.5em) {
  .pile-tally { grid-template-columns: minmax(0, 1fr) 168px; align-items: end; }
  .bys { margin-bottom: -18px; }
}

/* ---- What's free, and what US$19 adds ---- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 960px) { .plans { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.plan { padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--surface); box-shadow: var(--hair), var(--sh-1); }
.plan-tray { padding: var(--s-3); border-radius: var(--r-tray); background: var(--tint-blush); }
.plan-tray .plan { border-radius: var(--r-screen); }
/* A long tag ("Full report · US$19 once") wraps inside its pill rather than widen the card. */
.plan .tag { max-width: 100%; height: auto; min-height: 24px; padding-block: 2px; line-height: 20px; white-space: normal; }
.plan h3 { margin-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.015em; font-variation-settings: "opsz" 40; }
.ticks { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); }
.ticks li::after { content: ""; position: absolute; left: 7.5px; top: 6px; width: 4px; height: 9px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan-full .ticks li::before { background: var(--berry-soft); }
.plan-full .ticks li::after { border-color: var(--berry); }
.ticks b { color: var(--ink); font-weight: 650; }
.plan-note { margin-top: 16px; color: var(--muted); font-size: var(--t-small); }
.price { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.price-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.amount { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.terms { color: var(--muted); font-size: var(--t-small); font-weight: 600; }
.price-p { margin-top: 12px; max-width: 36em; color: var(--ink-2); font-size: var(--t-small); }
.price-cta { margin-top: 18px; }
.price .well { margin-top: 14px; }
.refund { margin-top: 12px; color: var(--muted); font-size: var(--t-small); }
.price .link-arrow { margin-top: 4px; }
@media (max-width: 599px) { .price-cta .btn { width: 100%; } }

/* ---- Start here: the free check (the form itself is in styles.css) ---- */
.start-in { max-width: calc(760px + 2 * var(--gutter)); }
.start-sec .sec-head { margin-inline: auto; text-align: center; }

/* ---- Questions ---- */
.faq-in { max-width: calc(760px + 2 * var(--gutter)); }
.qs { border-top: 1px solid var(--line); }
.q { border-bottom: 1px solid var(--line); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; }
.q summary h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.q summary::-webkit-details-marker { display: none; }
.q summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.q .a { padding-bottom: 22px; }
.q .a p { max-width: 36em; color: var(--ink-2); }
.q .a p + p { margin-top: 10px; }
.faq .ctas { margin-top: var(--s-7); }
.faq .micro { margin-top: 10px; }

/* ---- Motion gate: while scripts run and motion is welcome, only the result layers ([data-r])
   wait for the script, which sets each one's start in the same task. Frames, labels and every
   word show from the first paint. A failsafe shows the layers after 2.5 s. ---- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.mo-live) [data-r] { opacity: 0; animation: mo-failsafe 1ms 2.5s forwards; }
}
@keyframes mo-failsafe { to { opacity: 1; } }

/* Windows high contrast: the bars, day tiles, rent band, tally strokes and map key are shapes
   drawn with backgrounds, which the browser drops there. Keep them, in the system's colours. */
@media (forced-colors: active) {
  .pbars i, .pkey i, .mkey i, .days > span, .pband-track, .grp i { forced-color-adjust: none; }
  .pbars .here, .k-here { background: CanvasText; }
  .pbars .around, .k-around { background: GrayText; }
  .days > span { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .days i, .grp i, .k-site { background: CanvasText; }
  .pband-tick { background: CanvasText; box-shadow: 0 0 0 2px Canvas; }
  .k-sq { box-shadow: inset 0 0 0 1.6px CanvasText; }
  .k-dia { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
}

@media print {
  .rings, .replay, .demo-sec .dhead .now { display: none !important; }
  .demo, .pic, .plan-tray, .dstep { background: none !important; }
}