/* ==========================================================================
   Loupe - index.html's own layout: the landing and scan form, the waiting
   screen, the results (Block 1 and Block 2) and the "which city?" step.
   Tokens and shared components (buttons, fields, notices, the answer card,
   the waiting ring) are in site.css; this file only places and dresses what
   is unique to this page. Taken from the approved direction C mockup.
   Light mode only. ASCII only (curly punctuation as CSS escapes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Landing
   -------------------------------------------------------------------------- */
.hero { display: grid; gap: 28px; padding-top: 12px; }
.hero h1 { font-size: clamp(36px, 9.6vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; max-width: 12ch; }
/* the form sits right under the headline (no lede line between them) */
.scan-form { padding: 20px; display: grid; gap: 18px; margin-top: 22px; }
.city-row { display: grid; gap: 18px; }
/* State first: the city list is looked up within the chosen state */
@media (min-width: 520px) { .city-row { grid-template-columns: 190px minmax(0, 1fr); gap: 12px; } }

/* the city combobox */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.combo-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 12px; border-radius: var(--r-sm); cursor: pointer; font-weight: 650;
}
.combo-list li b { font-weight: 800; }
.combo-list li .st { color: var(--ink-3); font-weight: 700; font-size: 15px; flex: none; }
.combo-list li[aria-selected="true"] { background: var(--green-soft); }
.combo-list li[aria-selected="true"] .st { color: var(--green-soft-ink); }
.combo-list .combo-note { min-height: 0; padding: 6px 12px 4px; color: var(--ink-3); font-size: 13px; font-weight: 800; cursor: default; letter-spacing: .02em; }

/* the loupe says it: the exact question, shown before it is asked, in a speech bubble whose tail
   points at the loupe. Both sit on the row's bottom line, so the tail stays level with the loupe's
   middle however many lines the bubble holds (the idle line, the question, the job-title hint). */
.talk { display: flex; align-items: flex-end; gap: 14px; }
.talk-lens { flex: none; width: 40px; height: 40px; }
.talk-lens svg { width: 100%; height: 100%; }
.talk-bubble {
  position: relative; flex: 1 1 auto; min-width: 0;
  background: var(--green-soft); color: var(--green-soft-ink);
  border-radius: 18px; padding: 11px 15px 12px;
  font-size: 15.5px; font-weight: 700; line-height: 1.45;
}
/* the tail: a rounded square turned 45 degrees, half of it out past the bubble's left edge */
.talk-bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 12px; width: 16px; height: 16px;
  background: inherit; border-radius: 3px; transform: rotate(45deg);
}
.talk-bubble q { color: var(--ink); font-weight: 850; overflow-wrap: anywhere; }
@media (min-width: 520px) {
  .talk-lens { width: 44px; height: 44px; }
  .talk-bubble::before { bottom: 14px; }
}

.scan-form .fine { text-align: center; margin-top: -6px; }

/* a button waiting on its answer: the ring before the label */
.btn[aria-busy="true"] { cursor: progress; }

.hero-art { margin: 0; }
.street-card { background: var(--green-soft); border-radius: 28px; padding: 18px 16px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.bubbles { display: grid; gap: 10px; }
.bubble { margin: 0; border-radius: 20px; padding: 12px 16px; display: grid; gap: 6px; max-width: 88%; }
.bubble .bk { font-size: 12.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.bubble-q { justify-self: end; background: var(--green); color: var(--on-green); border-bottom-right-radius: 6px; }
.bubble-q .bk { opacity: .85; }
.bubble-q q { font-size: 19px; font-weight: 850; letter-spacing: -0.01em; line-height: 1.25; }
.bubble-a { justify-self: start; width: 80%; background: var(--surface); color: var(--ink-3); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.skel { display: flex; gap: 6px; align-items: center; }
.skel i { display: block; height: 9px; border-radius: 5px; background: var(--paper-2); }
.skel i.w88 { width: 88%; }
.skel i.w64 { width: 64%; }
.skel i.w76 { width: 76%; }
.skel i.skel-chip { width: 44px; height: 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 2px var(--green); flex: none; }
.street-card .street { margin-top: auto; }
.street-card svg { width: 100%; height: auto; }
.street-card figcaption { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--green-soft-ink); text-align: center; text-wrap: balance; }

/* Below the fold: a plain fact sheet (the way a listing sheet reads) and the
   "won't do" list, instead of a row of icon cards. */
.truth { margin-top: 56px; display: grid; gap: 28px; }
.truth-big { font-size: clamp(27px, 6.8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; max-width: 19ch; }
.truth-big span { color: var(--green); display: block; }
.truth-grid { display: grid; gap: 32px; }
.sheet { margin: 10px 0 0; border-top: 2px solid var(--ink); }
.sheet > div { display: grid; gap: 4px; padding: 16px 0 17px; border-bottom: 1px solid var(--line-strong); }
.sheet dt { font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.sheet dd { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; max-width: 52ch; }
/* the heading and the button are centred in the box; the items stay left-aligned, so the ✕ icons
   line up in their own column */
.wont { background: var(--paper-2); border-radius: var(--r-lg); padding: 22px 20px 24px; }
.wont h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.wont ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.wont li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.wont li svg { width: 26px; height: 26px; color: var(--ink-2); }
.wont .to-form { display: flex; margin: 20px auto 0; width: 100%; }
@media (min-width: 520px) { .wont .to-form { width: auto; } }
@media (min-width: 700px) {
  .sheet > div { grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 56px; align-items: stretch; padding-top: 28px; }
  .hero-copy { align-self: center; }
  .scan-form { padding: 28px; max-width: 540px; }
  .hero-art { align-self: center; }
  .street-card { padding: 28px 30px 22px; gap: 20px; }
  .bubble-q q { font-size: 23px; }
  .truth { margin-top: 96px; gap: 32px; }
  .truth-big { max-width: 26ch; }
  .truth-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .wont { padding: 26px 28px 28px; margin-top: 30px; }
}

/* --------------------------------------------------------------------------
   2. Waiting
   -------------------------------------------------------------------------- */
.wait { max-width: 620px; margin: 8px auto 0; }
.wait-card { padding: 26px 20px 22px; text-align: center; }
/* the live status is the heading; it changes only on what the page can measure */
.wait-status { font-size: clamp(27px, 7.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.wait-ask { margin: 14px auto 0; display: inline-grid; gap: 2px; justify-items: center; max-width: 100%; }
.wait-ask[hidden] { display: none; }
.wait-k { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.wait-q { font-size: clamp(19px, 5vw, 22px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.wait-from { color: var(--ink-2); font-weight: 700; font-size: 15.5px; }
.wait-art { margin: 18px -6px 4px; background: var(--green-soft); border-radius: 20px; padding: 10px 8px 4px; }
.wait-art svg { width: 100%; height: auto; overflow: visible; }
/* the answer bubble over the bare street; the loupe (scan.js) is drawn over it in the bubble's own pixels
   and may hang over its edges, still inside the green card */
.wait-art .bubble-a { position: relative; margin: 14px 0 12px 4px; }
.wait-art .bubble-a svg.lens-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wait .fine { text-align: center; margin-top: 14px; }

/* --------------------------------------------------------------------------
   3 + 4. Results
   -------------------------------------------------------------------------- */
.res-top { display: grid; gap: 14px; }
/* the header is the question itself, plainly */
.res-h { font-size: clamp(22px, 5.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.scan-ctx { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scan-ctx .who { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.scan-ctx .who svg { width: 16px; height: 16px; flex: none; }
/* section tabs; on phones they stick to the top while you scroll the two blocks */
.jump { display: flex; gap: 8px; margin-top: 16px; }
.jump a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 7px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; color: var(--ink); font-weight: 800; font-size: 15.5px; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.jump a:hover { box-shadow: inset 0 0 0 2px var(--green); color: var(--ink); }
.jump a[aria-current="true"] { background: var(--green); color: var(--on-green); box-shadow: none; }
.jump a[aria-current="true"] .num { background: var(--on-green); color: var(--green); }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--on-green); font-weight: 800; font-size: 15px; flex: none; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 759px) {
  .jump { position: sticky; top: 0; z-index: 30; margin: 12px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .jump a { flex: 1 1 0; min-width: 0; justify-content: flex-start; padding: 0 12px 0 7px; font-size: 15px; }
  .block, #names { scroll-margin-top: 76px; }
}

.block { margin-top: 36px; }
/* jump targets land clear of the sticky tab bar on phones (set in the phone query above) */
@media (min-width: 760px) { .block { scroll-margin-top: 12px; } #names { scroll-margin-top: 16px; } }
.block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.block-head h2 { font-size: 26px; font-weight: 800; }
.b1-grid { display: grid; gap: 16px; }

.sample-note { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.sample-note .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-ink); display: grid; place-items: center; }
.sample-note .ico svg { width: 22px; height: 22px; }
.sample-note strong { display: block; font-weight: 800; font-size: 17px; text-wrap: balance; }
.sample-note p { color: var(--ink-2); font-size: 15.5px; margin-top: 2px; }

/* the names: "Is one of these you?" */
.cands { display: grid; gap: 12px; }
.cands > h3 { font-size: 23px; font-weight: 800; }
.cands > .muted { font-size: 15.5px; margin-top: -6px; }
/* what "That's me" does, said before the buttons */
.cand-how { display: flex; gap: 10px; align-items: flex-start; background: var(--green-soft); color: var(--green-soft-ink); border-radius: var(--r-md); padding: 11px 14px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.cand-how svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.names-failed { background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 16px 18px; color: var(--ink-2); font-weight: 650; font-size: 15.5px; }
.names-failed strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.cand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cand { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow); min-width: 0; }
.cand-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cand-id > div { min-width: 0; }
.cand-name { font-weight: 750; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.cand-aff { color: var(--ink-2); font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.cand-id .pill { margin-left: auto; align-self: flex-start; }
.cand-why { font-size: 14.5px; color: var(--ink-2); font-weight: 650; overflow-wrap: anywhere; }
.cand-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cand-src .k { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.cand-src .why-none { flex-basis: 100%; font-size: 14.5px; color: var(--ink-3); font-weight: 650; }
.not-listed { display: grid; gap: 10px; margin-top: 4px; background: var(--paper-2); border-radius: var(--r-lg); padding: 16px; }
.not-listed p { font-size: 15px; color: var(--ink-2); font-weight: 650; text-align: center; }

@media (min-width: 980px) {
  .b1-grid { gap: 20px; }
  .sample-note { grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: 14px 18px; }
  .cands { gap: 14px; }
  .cand-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .cand { display: flex; flex-direction: column; }
  .cand > .btn { margin-top: auto; }
  .not-listed { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; gap: 20px; padding: 16px 20px; }
  .not-listed p { text-align: left; }
}

/* Block 2: where AI looks */
.b2-lead { font-size: clamp(25px, 6.4vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; max-width: 22ch; }
.b2-sub { margin: -2px 0 12px; font-size: 16.5px; font-weight: 700; color: var(--ink-2); max-width: 60ch; }
.b2-paid { margin-top: 10px; font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
/* what a "test run" is, said once before the first count */
.tests-def { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; font-weight: 650; color: var(--ink-2); line-height: 1.5; max-width: 760px; }
.tests-def svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink-3); }
.tests-def strong { color: var(--ink); }
.sub-h { font-size: 20px; font-weight: 800; margin: 30px 0 12px; }
/* a sub-heading with its fine print beside it (not inside the heading), wrapping under it on a phone */
.sub-hd { display: flex; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; margin: 30px 0 12px; }
.sub-hd .sub-h { margin: 0; }
.sub-hd .fine { font-weight: 700; }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .src-list { grid-template-columns: 1fr 1fr; } }
.src { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow); min-width: 0; }
.src-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.src-head > div { min-width: 0; }
.src-name { font-weight: 750; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.src-dom { font-weight: 750; font-size: 15px; display: inline-flex; gap: 5px; align-items: center; margin-top: 2px; overflow-wrap: anywhere; }
.src-dom svg { width: 13px; height: 13px; flex: none; }
.src-name a svg { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: 0; }
/* one plain sentence per site, with the test-run dots beside the count */
.src-say { font-size: 16.5px; font-weight: 650; color: var(--ink); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }
.src-say .fee { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.src-say .cited-in { display: block; margin-top: 6px; }
.src-say .meter { display: inline-flex; vertical-align: 0; margin-left: 6px; }
/* the directory's own page for an agent's listing: one plain link per site */
.dlink { font-size: 15.5px; font-weight: 750; }
.dlink a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; overflow-wrap: anywhere; }
.dlink a svg { width: 13px; height: 13px; flex: none; }
.tbl .dlink { display: block; margin-top: 6px; font-size: 15px; }
/* one dot per test run: filled = cited, an open ring = not cited, so "0 of 6" still reads */
.meter { display: inline-flex; gap: 4px; }
.meter i { width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.meter i.on { background: var(--green); box-shadow: none; }
.meter.amber i { box-shadow: inset 0 0 0 1.5px var(--amber-ink); }
.meter.amber i.on { background: var(--amber-ink); box-shadow: none; }
/* more than 8 runs: one bar, the width of six dots, filled in proportion (scan.js sets the fill's width) */
.meter.meter-bar { position: relative; width: 80px; height: 10px; flex: none; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.meter.meter-bar i { position: absolute; left: 0; top: 0; width: 0; height: 10px; border-radius: 5px; box-shadow: none; }
.meter.meter-bar.amber { box-shadow: inset 0 0 0 1.5px var(--amber-ink); }
.src-empty { background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 18px; color: var(--ink-2); font-weight: 650; }
.src-empty strong { display: block; color: var(--ink); font-weight: 850; font-size: 17px; margin-bottom: 2px; }
.b2-note { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; font-weight: 700; color: var(--ink-2); max-width: 60ch; }
.b2-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink-3); }

/* directory tables: a real table on wide screens, stacked cards on phones */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.tbl caption { text-align: left; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: 13px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); line-height: 1.3; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl .dname { font-weight: 750; font-size: 17px; display: block; }
.tbl .dnote { display: block; font-size: 14.5px; color: var(--ink-2); font-weight: 600; margin-top: 2px; max-width: 46ch; }
.tbl .dnote + .dnote { margin-top: 4px; }
.tbl .ddom { display: block; font-size: 14px; color: var(--ink-3); font-weight: 700; margin-top: 1px; }
.tbl td { font-weight: 700; font-size: 15.5px; }
.tbl td.c-what { font-weight: 650; color: var(--ink-2); font-size: 15px; }
/* both tables share column widths, so the "Cited in Loupe's tests" columns line up */
.tbl col.c-w40 { width: 40%; }
.tbl col.c-w21 { width: 21%; }
.tbl col.c-w17 { width: 17%; }
.tbl col.c-w22 { width: 22%; }
.tbl col.c-w39 { width: 39%; }
@media (min-width: 760px) { .tbl { table-layout: fixed; } .tbl td.c-pill { text-wrap: balance; } }
.tbl .ratio { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tbl .good { color: var(--green); font-weight: 850; }
.tbl .plain { color: var(--ink-2); font-weight: 750; }
.tbl.paid thead th { background: var(--amber-soft); color: var(--amber-ink); }
.tbl .m { display: none; }
@media (max-width: 759px) {
  .tbl .m { display: inline; }
  .tbl .d { display: none; }
  .tbl, .tbl tbody { display: block; }
  .tbl { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tbody { display: grid; gap: 10px; }
  .tbl tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow); }
  .tbl th[scope="row"], .tbl td { display: block; padding: 0; border: 0 !important; }
  .tbl colgroup { display: none; }
  .tbl th[scope="row"] { flex: 1 1 100%; min-width: 0; }
  .tbl .dnote { font-size: 14.5px; max-width: none; }
  /* the note runs the full card width; the count, with its label, is one row under it */
  .tbl td.c-cited { flex: 1 1 100%; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .tbl td.c-cited .ratio { justify-content: flex-start; }
  .tbl td.c-cited::before { content: "Cited in Loupe\2019s tests"; font-size: 14px; font-weight: 700; color: var(--ink-3); }
  .tbl td.c-what { flex: 1 1 100%; }
  .tbl td.c-pill { font-size: 14px; font-weight: 800; line-height: 1.45; padding: 3px 11px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
  .tbl td.c-pill.good { background: var(--green-soft); color: var(--green-soft-ink); }
  .tbl td.c-pill.plain { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
}
.paid-note { margin-top: 12px; font-size: 15.5px; font-weight: 700; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.paid-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--amber-ink); }
.b2-foot { margin-top: 16px; display: grid; gap: 6px; }
/* Block 2 ends with a way back up to the names */
.b2-back { margin-top: 28px; background: var(--green-soft); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; }
.b2-back p { font-size: 18px; font-weight: 750; color: var(--green-soft-ink); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 760px) { .b2-back { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 22px; } }

/* --------------------------------------------------------------------------
   needs_city: which one?
   -------------------------------------------------------------------------- */
.pick { padding: 22px 20px; display: grid; gap: 16px; }
.pick h1 { font-size: clamp(28px, 7.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pick .intro { margin-top: -6px; color: var(--ink-2); font-weight: 650; }
.pick fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick-opts { display: grid; gap: 8px; }
.pick .opt { min-width: 0; }
.pick .opt .st { flex: none; }
/* "Not here? Which state?" (the same-name case) keeps the card's rhythm; the exact question, once a city is
   picked, is the landing's loupe and speech bubble (.talk, above) */
.pick-state { display: grid; gap: 16px; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .jump a { transition: none; }
}