/* The Market report page ($99), and a few rules the $29 page borrows (M3.6 S0). The order forms
   are the free report's rig (presence.css: .rigform, .rfield, .fin, .tipwrap, .nositerow),
   untouched here. Tokens from tokens.css and instrument.css; no inline styles (CSP).

   THE $29 PAGE LOADS THIS SHEET TOO (full-report.html). It uses three things from it, kept
   exactly as they were: .rigform .fin.bad, and the .mi-how / .mi-steps / .mi-step cards. Every
   other rule below is the $99 page's own.

   THE MAP ACROSS THE PAGE (the owner's decision of 26 Sep: layout B; the $99 page investigation, section 1). A short
   hero, then the map as wide as the page (to the header's gutter, 1520 px at most), its bar stuck to the bottom of the
   screen while the map is in view on every screen, and under it the details: the fields on the left and the summary
   with Order on the right, held in view. Continue is inside the first desktop screen and glides to the details, where
   Order is in view (the render gate measures both). On a phone: one column, the map, the area, the fields, Order.

   NO STRIPES. A required field used to carry a gold left edge, and the "why now" note a mint one.
   Colour goes on a full border, a background wash, a dot or a chip. A required field carries no
   mark at all and an optional one says "optional" by its label (the coordinator's ruling of
   2026-09-26: one convention site-wide). */

/* ── shared with the $29 page ─────────────────────────────────────────────── */
.rigform .fin.bad{border-color:#ec7663}
.mi-how{padding:30px 0 60px}
.mi-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.mi-step{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mi-step .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#e6b654;margin-bottom:6px}
.mi-step p{margin:0;color:var(--muted);font-size:.92rem}

/* ── the hero: at most 25 words ───────────────────────────────────────────── */
.mr-hero{padding:104px 0 18px}
/* the site's one hero headline size (components.css .hero h1): 32 px on a phone, 56 px at 1440 */
.mr-hero h1{margin:0 0 8px;max-width:none;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.05}
.mr-sub{margin:0;max-width:980px;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5;color:var(--muted)}

/* ── the panel ────────────────────────────────────────────────────────────── */
.mr-panel-sec{padding:0 0 clamp(40px,6vw,72px)}
/* the hero and the panel run past the page column to the header's own gutter (--pad), 1520 px at most. Only the $99
   page's two columns carry mr-wide: the Visibility report page borrows .mr-hero and this sheet, and a rule on
   ".mr-hero .wrap" widened its headline past its form (review 99a's LM1: 64 against 195 at 1440) */
.wrap.mr-wide{max-width:1520px}
.mr-panel{display:block}
/* --mi-notice: how far the cookie notice reaches below the header on a desktop, while it shows (market-intel.js
   trackNotice; review 99a's LM3). A glide lands under it and the summary holds under it; unset, it is nothing. */
.mr-mapcol{min-width:0;display:flex;flex-direction:column;gap:10px;scroll-margin-top:calc(84px + var(--mi-notice,0px))}
/* the details: under the map, where Continue glides to */
.mr-ordercol{min-width:0;position:static;margin-top:28px;scroll-margin-top:calc(84px + var(--mi-notice,0px))}

/* the controls above the map (26 Sep, the owner's decisions): the state list first, then the map tools, in one row where
   there is room. "Your city or ZIP" left the page; a town is found inside the map. Everything here is 44 px tall. */
.mr-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0}
.mr-controls .mi-statef{flex:0 0 auto;min-width:0}
.mr-controls .fin{width:100%;min-width:210px;background:var(--surface-3);border:1px solid var(--line);border-radius:9px;color:var(--ink);font:inherit;font-size:.92rem;padding:8px 12px;min-height:44px;outline:none}
.mr-controls select.fin{padding-right:8px;cursor:pointer;text-overflow:ellipsis}
.mr-controls select.fin option{background:var(--surface-2);color:var(--ink)}
.mr-controls .fin:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(67,213,151,.12)}
.mr-controls .mr-tools{flex:1 1 auto}

/* the map tools: a toolbar above the map, so a phone's map is all map. THE FONT WAS NEVER APPLIED:
   "font:600 12px/1.2 inherit" is not a valid shorthand, so the whole declaration was dropped and
   the buttons drew in the browser's 13px regular. Each property is set on its own now. */
.mr-tools{display:flex;flex-wrap:wrap;gap:6px}
.mi-pbtn{font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.2;padding:8px 12px;min-height:36px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:#a7b1ab;cursor:pointer;white-space:nowrap}
.mi-pbtn:hover{color:var(--ink);background:var(--surface-2)}
.mi-pbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mi-pbtn.on{background:var(--forest);color:#0c221a;border-color:var(--forest)}
.mi-pbtn.gold{color:var(--gold);border-color:rgba(230,182,84,.45)}
.mi-pbtn.ghost{color:var(--faint)}
/* beside the state list, the tools are the list's height: 44 px at every size */
.mr-controls .mi-pbtn{min-height:44px}

/* THE MAP DRAWS UNDER THE FIXED HEADER. Leaflet stacks its panes at z-index 200 to 1000; without
   a stacking context of its own they competed with the header (z-index 20) and slid over the menu
   as the page scrolled. isolation keeps every one of them inside the map. The height follows the
   screen, so the map, its bar and the Order button beside it fit in one desktop screen. */
.mi-map{position:relative;isolation:isolate;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0e1412;height:420px;height:clamp(420px,calc(100svh - 400px),680px)}
.mi-map .leaflet-container{background:#0e1412;height:100%;font-family:inherit}
.mi-map .mi-tiles{filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.25)}
.mi-map .leaflet-control-attribution{background:#0d100fcc;color:#67716b;font-size:10px}
.mi-map .leaflet-control-attribution a{color:#67716b}
.mi-map .leaflet-control-zoom a{background:#141917;color:#a7b1ab;border-color:#242b28}
.mi-map.drawing .leaflet-container{cursor:crosshair}
/* Before a place is chosen the map IS the field: a click on it names the state. The pointer says
   so, and it wins over the drawing crosshair (same specificity, declared after). */
.mi-map.mi-pick .leaflet-container{cursor:pointer}
.mi-vtx{width:12px;height:12px;border-radius:50%;background:#0b0e0d;border:2px solid #43d597;box-shadow:0 0 6px rgba(67,213,151,.5)}
.mi-vtx.first{border-color:#e6b654;width:14px;height:14px}
.mi-home{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #e6b654;box-shadow:0 0 10px rgba(255,255,255,.5)}
/* the one line a visitor reads while drawing: what to do next */
.mi-hint{position:absolute;z-index:500;right:12px;top:12px;max-width:min(290px,calc(100% - 24px));background:#0d100fdd;border:1px solid #242b28;border-radius:10px;padding:7px 11px;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:#a7b1ab;backdrop-filter:blur(6px);pointer-events:none}
.mi-hint b{color:#43d597}
/* the town finder, inside the map at the top left, away from the hint at the top right; shown once a state is open */
.mi-town{position:absolute;z-index:550;left:12px;top:12px;width:min(280px,calc(100% - 330px))}
.mi-town[hidden]{display:none}
.mi-town-in{width:100%;min-height:44px;background:#0d100fee;border:1px solid #2f3a35;border-radius:10px;color:var(--ink);font:inherit;font-size:.9rem;padding:8px 12px;outline:none}
.mi-town-in::placeholder{color:#8d9791}
.mi-town-in:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(67,213,151,.12)}
/* 10 miles waiting for the spot it goes around */
.mi-map.mi-spot .leaflet-container{cursor:crosshair}
/* The question a switch of state asks when it would clear an area: over the top of the map, above the hint, until it is
   answered. A full gold border, no stripe. */
.mi-switch{position:absolute;z-index:600;left:12px;right:12px;top:12px;display:grid;gap:10px;padding:12px 14px;
  background:#0d100f;border:1px solid rgba(230,182,84,.55);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mi-switch[hidden]{display:none}
.mi-switch-q{margin:0;font-size:.92rem;line-height:1.45;color:var(--ink)}
.mi-switch-btns{display:flex;flex-wrap:wrap;gap:8px}
.mi-switch .btn{width:auto;min-height:44px;white-space:nowrap}

/* ── the area's bar: the count, the price and Continue ────────────────────── */
/* the bar sticks to the bottom of the screen while the map is in view, on every screen (layout B) */
.mi-sum.mr-bar{position:sticky;bottom:0;z-index:5;background:rgba(16,21,19,.97);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.mi-sum{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n price go" "rule price go" "note note note" "status status status";gap:2px 18px;align-items:center;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mi-sum-n{grid-area:n;display:flex;align-items:baseline;gap:7px}
.mi-sum .n{font-family:var(--font-display);font-size:2rem;line-height:1;font-weight:700;color:var(--ink)}
.mi-sum .n.over{color:#e6b654}.mi-sum .n.cap{color:#ec7663}
.mi-sum-unit{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mi-sum-l{grid-area:rule;min-width:0}
.mi-sum-rule{margin:0;font-size:.82rem;line-height:1.4;color:var(--muted)}
.mi-warn{display:none;margin-top:3px;font-size:.8rem;color:#e6b654}
.mi-warn.on{display:block}.mi-warn.bad{color:#ec7663}
.mi-sum-p{grid-area:price}
.mi-price{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.mi-price .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
/* the bar carries the total; the extra zips are said by the warning line beside the rule */
.mi-sum .mi-price .row:not(.tot){display:none}
.mi-sum .mi-price .row.tot span:first-child{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mi-sum .mi-price .row.tot span:last-child{font-family:var(--font-display);font-size:1.6rem;line-height:1;font-weight:700;color:var(--gold)}
.mi-confirm{grid-area:go;display:flex}
.mi-continue{min-width:136px;justify-content:center}
/* once the area is confirmed the button steps back, so the eye goes on to the fields and Order */
.mi-sum:has(.mi-confirm-note.ok) .mi-continue{background:transparent;color:var(--forest);border-color:var(--forest)}
.mi-confirm-note{margin:0;font-size:.82rem;line-height:1.45;color:var(--faint)}
.mi-confirm-note.ok{color:var(--forest)}
.mi-confirm-note.bad{color:#ec7663}
.mi-confirm-note.wait{color:var(--muted)}
.mi-confirm-note:empty{display:none}
.mi-sum > .mi-confirm-note{grid-area:note}
.mi-sum-status{grid-area:status;margin:0;min-height:0;font-size:.82rem;font-weight:500;line-height:1.45;color:var(--muted)}
.mi-sum-status.bad,.mi-sum-status.err{color:#ec7663}
.mi-sum-status:empty{display:none}

/* ── the order column ─────────────────────────────────────────────────────── */
.mr-form .rigform-body{gap:14px}
.mr-summary{display:grid;gap:12px;align-content:start}
@media (min-width:901px){
  .mr-form .rigform-body{grid-template-columns:minmax(0,1fr) minmax(340px,400px);column-gap:32px;align-items:start}
  .mr-form .mi-fields{grid-column:1;grid-row:1}
  .mr-summary{grid-column:2;grid-row:1;position:sticky;top:calc(88px + var(--mi-notice,0px))}
  /* the card clips its corners (presence.css .rigform: overflow hidden), which made the form a scroll container: the
     summary was held against a box that never scrolls, so it never held (found with LM3, 26 Sep). clip cuts the same
     corners and is no scroll container; a browser without it keeps hidden, and the summary simply scrolls */
  .rigform.mr-form{overflow:clip}
  /* the state list's label sits beside it, so the row above the map is one control tall */
  .mr-controls .mi-statef{display:flex;align-items:center;gap:10px}
  .mr-controls .mi-statef .flabel{margin:0;white-space:nowrap}
}
/* THE TAP TARGETS (the review's L9, 26 Sep; made the $29 form's after the merge): each "?" is a 44 px box around the same
   18 px ring presence.css draws (its ::before fills the content box: 44 - 2 x 13), and the negative margins give the 20 px
   back, so no label or field moves. The box reaches up into the space between the rows rather than 5 px down over its own
   field, and each label row takes 3 px more above it so the box does not reach the field of the row above either
   (money-onetime.css says the same for the $29; tests/unit/tap-targets.test.js holds the two alike). */
.mr-form .tipbtn{width:44px;height:44px;padding:13px;margin:-15px -10px -5px}
/* the labels run a touch tighter here, so "Business name · optional" fits a half column */
.mr-form .rfield .flabel{letter-spacing:.06em}
.flabel-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.flabel-row .flabel{margin-bottom:0}
.flabel-row .tipwrap{flex:none}
.flabel-row .tipbox{left:auto;right:0}
/* THE "?" HINTS STAY INSIDE THE FORM (M2's note on S1-4, 26 Sep): the form's card and the fold clip what leaves them, and a
   hint anchored to the right end of a label in the left column ran 340 px to the left, past the card's edge (117 px cut at
   1024 to 1440; the ZIP's, 138 in the fold). The label row is the hint's box, as on the $29 form: the hint opens under
   the label, as wide as its field */
.mr-form .flabel-row{position:relative;padding-top:3px}
.mr-form .flabel-row .tipwrap{position:static}
.mr-form .flabel-row .tipbox{left:0;right:0;width:auto;top:calc(100% + 6px)}
/* a hint shown by hover alone closes on Escape (the fix check's NL4): market-intel.js marks its wrapper until the pointer
   leaves (this outranks presence.css's .tipbtn:hover + .tipbox) */
.mr-form .tipwrap.tip-dismissed .tipbox{display:none}
/* the fields of a pair line up whatever their labels wrap to (the fix check's NL2: "Business phone · optional" wraps at
   desktop, and the ZIP and phone boxes sat 10 to 11 px apart) */
.mr-form .rtwo{align-items:end}
.mi-fields{display:grid;gap:14px}
.mr-nosite.nositerow{margin-top:-4px}
.mr-form:has(#mi-nosite:checked) #mi-url{opacity:.35;pointer-events:none}
.mr-form:has(#mi-nosite:checked) label[for="mi-url"]{opacity:.5}
.mi-fields .rfield{min-width:0}

/* the area and the add-on: what is being bought and what it costs, in one block with a gold wash */
.mi-order-block{margin:0;padding:12px 14px;border:1px solid rgba(230,182,84,.28);border-radius:12px;background:rgba(230,182,84,.04)}
.mi-recap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start;padding:0 0 10px;border-bottom:1px solid var(--line)}
.mi-recap-l{min-width:0}
.mi-recap-l .flabel{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mi-recap-where{margin:3px 0 0;font-size:.95rem;line-height:1.35;font-weight:600;color:var(--ink)}
.mi-recap-state{display:inline-flex;align-items:center;gap:6px;margin:5px 0 0;font-size:.78rem;color:var(--muted)}
.mi-recap-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.mi-recap-state.ok{color:var(--forest)}
.mi-recap-state.ok::before{background:var(--forest)}
.mi-recap-state:empty{display:none}
.mi-recap-p{font-family:var(--font-display);font-size:1.7rem;line-height:1;font-weight:700;color:var(--gold)}
.mi-recap-edit{grid-column:1 / -1;justify-self:start;background:none;border:0;padding:4px 0 0;cursor:pointer;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.mi-recap-edit:hover,.mi-recap-edit:focus-visible{color:var(--gold)}
/* The add-on. It reads as ten dollars added to the thing they came for, not as a fork between
   two products (the owner, D-2 of 2026-09-20); its explanation is behind the "?". */
.mi-addon{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.mi-addon-row{flex:1 1 auto;margin-top:0}
.mi-addon-t.nst{font-size:.92rem;color:var(--ink);font-weight:600}
.mi-addon-p{color:var(--gold);font-weight:700}
.mi-addon .tipwrap{flex:none}
/* (its "?" sits beside the switch, not under a label: the box keeps level, and reaches left no further than the 8 px gap,
   so it never takes a tap meant for the switch) */
.mi-addon .tipbtn{margin:-10px -12px -10px -8px}
.mi-addon .tipbox{left:auto;right:0}

/* The fold. Closed by default and it stays that way (D-5): one state to reason about, and the
   label says what is inside. */
.mi-more{margin:0;border:1px solid var(--line);border-radius:12px}
.mi-more-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.mi-more-head::-webkit-details-marker{display:none}
.mi-more-head::before{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .16s ease}
.mi-more[open] .mi-more-head::before{transform:rotate(45deg)}
.mi-more-t{flex:1 1 auto;font-size:.92rem;color:var(--ink);font-weight:600}
.mi-more-o{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mi-more-head:hover .mi-more-t{color:var(--gold)}
.mi-more-head:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* SCOPED TO [open]. Setting display on a non-summary child of a <details> OVERRIDES the UA rule
   that hides it when closed: the fold looked shut only because .mi-more clips its overflow,
   while the fields inside still laid out and were still reachable by keyboard. */
.mi-more[open] .mi-more-body{padding:0 14px 14px;display:grid;gap:14px}
.mi-more-lede{margin:0;font-size:.82rem;line-height:1.5;color:var(--faint)}
/* The competitors to follow (26 Sep): one box each, up to five, and under each box the line that says what we will do with
   it, in the colour of its news (found, a warning, a link we cannot use). No stripes: the colour is the text's. */
.mi-rivals{display:grid;gap:0}
.mi-rivals-lede{margin:0 0 8px;font-size:.82rem;line-height:1.5;color:var(--faint)}
.mi-rivals-list{display:grid;gap:10px}
.mi-rival{display:grid;gap:6px;min-width:0}
.mi-rival-say{margin:0;font-size:.8rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.mi-rival-say:empty{display:none}
.mi-rival-say.ok{color:var(--forest)}
.mi-rival-say.warn{color:#e6b654}
.mi-rival-say.bad{color:#ec7663}
.mi-rival-add{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin:2px 0 0;padding:0;background:none;border:0;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.mi-rival-add:hover,.mi-rival-add:focus-visible{color:var(--ink)}
.mi-rival-add[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.mi-more-head::before{transition:none}}

/* the order itself */
.mr-orderline{margin:2px 0 0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.mr-form .rigfoot{flex-direction:column;align-items:stretch}
.mr-form .rigfoot .btn{flex:0 0 auto;width:100%}
.rigfoot + .mi-confirm-note{margin-top:-4px}
.mr-form .form-status:empty{display:none}
.mr-form .form-status{min-height:0;margin:0;font-size:.88rem}

/* ── after the form: what you get, how it arrives, the sample, questions ─── */
.mr-after{padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.mr-after h2{font-size:clamp(1.45rem,2.3vw,1.9rem);margin:0 0 14px}
.mr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mr-card{padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.mr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mr-list li{position:relative;padding-left:18px;color:var(--muted);font-size:.95rem;line-height:1.5}
.mr-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--forest)}
.mr-list b{color:var(--ink);font-weight:600}
.mr-sample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;margin-top:clamp(36px,5vw,56px)}
.mr-sample-copy .btn{margin-top:16px}
/* the one real number, in a gold wash (the proof line used to hang off a gold left edge) */
.mr-proof{margin:0;padding:12px 14px;border:1px solid rgba(230,182,84,.26);border-radius:12px;background:rgba(230,182,84,.06);font-size:.95rem;line-height:1.55;color:var(--muted)}
.mr-proof b.t-gold{color:var(--gold);font-weight:600}
.mr-proof a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mr-proof a:hover,.mr-proof a:focus-visible{color:var(--gold)}
.mr-shot{margin:0;min-width:0}
/* the capture is a whole report chapter, far taller than it is wide: the frame shows its top, and keeps a strip of its
   own under the picture for the "Open the full example" tag, so the tag never sits on the capture's words */
.mr-shot .capture-slot{overflow:hidden;padding-bottom:40px;border:1px solid var(--line-2);border-radius:14px;background:#0b0e0d}
.mr-shot .capture-slot img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:top center}
.mr-shot-cap{margin:10px 2px 0;font-size:.82rem;line-height:1.5;color:var(--faint)}
.mr-faq{margin-top:clamp(36px,5vw,56px);max-width:860px}
.mr-start{margin:18px 0 0;color:var(--muted)}
.mr-start a{color:var(--gold)}

/* ── a phone: one column, the map first, the bar stuck to the bottom ─────── */
@media (max-width:900px){
  .mr-hero{padding:92px 0 14px}
  .mr-panel{grid-template-columns:minmax(0,1fr);gap:22px}
  .mr-ordercol{position:static;margin-top:22px}
  .mr-summary{display:contents}
  .mr-summary .mi-order-block{order:-1}
  .mr-tools{gap:5px}
  .mi-pbtn{flex:1 1 auto;padding:8px 9px;min-height:40px}
  .mi-map{height:min(62svh,520px);min-height:340px}
  .mi-hint{left:8px;right:8px;top:8px;max-width:none;padding:6px 9px;font-size:10.5px}
  /* the finder takes the map's top edge, and the hint sits under it while the finder shows */
  .mi-town{top:8px;left:8px;right:8px;width:auto}
  .mi-town:not([hidden]) ~ .mi-hint{top:60px}
  /* the bar: edge to edge, stuck to the bottom of the screen while the map is in view, and at
     rest under the map once the page moves on to the fields */
  .mi-sum.mr-bar{position:sticky;bottom:0;z-index:5;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"n price go" "warn warn warn" "note note note" "status status status";
    gap:4px 12px;margin-inline:calc(-1 * var(--pad));padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;
    background:rgba(16,21,19,.97);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  .mi-sum .n{font-size:1.7rem}
  .mi-sum-l{grid-area:warn}
  .mi-sum-rule{display:none}
  .mi-sum-p{justify-self:end}
  .mi-sum .mi-price .row.tot span:first-child{display:none}
  .mi-sum .mi-price .row.tot span:last-child{font-size:1.35rem}
  .mi-continue{min-width:0;padding:0 18px}
  .mi-sum-status{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mi-sum-status:empty{display:none}
  /* the map's line under the bar, not in it (market-intel.js placeStatus; review 99a's LM2): it scrolls with the page,
     so it reads whole, and the bar that sticks is the count, the total, Continue and its note */
  .mr-mapcol > .mi-sum-status{display:block;-webkit-line-clamp:none;overflow:visible;padding:0 2px}
  .mr-mapcol > .mi-sum-status:empty{display:none}
  .mr-cards,.mr-sample{grid-template-columns:minmax(0,1fr)}
  .mr-card{padding:18px}
}
/* THE COOKIE NOTICE AND THE BAR (reviewer B's M1, 26 Sep): the notice is fixed to the bottom of the screen and the area's
   bar sticks to the bottom of a phone's screen, so the notice sat on Continue. While the notice shows, ad-pixels.js puts
   has-consent on <html> and the notice's height in --consent-h (builder C); the bar rises by that much and comes back down
   when the notice goes. Outside every media query, so it holds wherever the bar sticks, and it outranks the phone block's
   bottom:0 by weight (three classes to two), not by order. */
.has-consent .mi-sum.mr-bar{bottom:var(--consent-h,0px)}
@media (max-width:600px){
  /* the state list has the row to itself, above the tools */
  .mr-controls .mi-statef{flex:1 1 100%}
  .mi-switch{left:8px;right:8px;top:8px;padding:10px 12px}
}
@media (pointer:coarse){
  .mi-pbtn{min-height:44px}
}

/* A SHORT DESKTOP SCREEN (the review's L8): a little less air above the hero's headline. It stays for every page that
   borrows .mr-hero (the Visibility report page's layout was built on it; review 99a's LM1); the $99 form's own trim went
   with layout B, whose first screen is measured with this one in place */
@media (min-width:901px) and (max-height:820px){.mr-hero{padding-top:92px}}
/* A PHONE's tap targets (L9): the website switch's row and the map's zoom buttons at 44 px, where the map comes first
   and the Order button is not asked to be in the first screen */
@media (max-width:900px){.mr-form .nositerow{min-height:44px}.mi-map .leaflet-bar.leaflet-control-zoom a{width:44px;height:44px;line-height:44px}}