/* Location Template B (city pages, max 7): "Switch-led with local market map". Shared by New York City, Chicago, Miami, Seattle,
   Boston, Charlotte, Minneapolis. Prefix plb-. Needs mid.css (G scoreboard, J heatmap, M sliders). Behaviour: p-loc-b.js. */
.plb-hero, .plb-ans, .plb-map, .plb-vs, .plb-rules, .plb-pri, .plb-how, .plb-cost, .plb-start {
  --plb-ink: #082238; --plb-body: #334155; --plb-muted: #475569; --plb-line: #E2E8F0; --plb-paper: #F3F7F9;
  --plb-blue: #0A6FA8; --plb-deep: #0A4F7A; --plb-amber: #FFB81C; --plb-teal: #00B2A9; --plb-navy: #061A2E;
}
.plb-switch__tool:focus-visible, .plb-switch__send:focus-visible, .plb-map__picks button:focus-visible, .plb-btn-line:focus-visible,
.plb-vs__more a:focus-visible { outline: 3px solid #FFB81C; outline-offset: 3px; }

/* ---------- 1. Hero + switch card ---------- */
.plb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.plb-hero .pg-h1 { max-width: 16ch; font-size: clamp(34px, 1.1rem + 2.5vw, 54px); }
.plb-sub { margin: 14px 0 0; font: 600 clamp(17px, 1rem + .3vw, 20px)/1.45 var(--f-display); color: var(--plb-ink); max-width: 44ch; }
.plb-hero .pg-lead { font-size: 17px; max-width: 58ch; }

.plb-switch { position: relative; margin: 0; padding: 22px; border-radius: 28px; background: var(--plb-navy); background: linear-gradient(160deg, #061A2E, #0A3A63 60%, #07605E); color: #E3EEF6; box-shadow: 0 50px 90px -50px rgba(8,34,56,.7); overflow: hidden; }
.plb-switch::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(0,163,217,.35), transparent 70%); pointer-events: none; }
.plb-switch__q { position: relative; margin: 0 0 12px; font: 800 clamp(20px, 1rem + .6vw, 24px)/1.2 var(--f-display); letter-spacing: -.02em; color: #fff; }
.plb-switch__tools { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.plb-switch__tool { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 600 14px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.plb-switch__tool img, .plb-switch__sheet { flex: none; width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: #fff; box-sizing: border-box; }
.plb-switch__sheet rect { fill: #E9F7EF; stroke: #1E7B46; stroke-width: 1.6; } .plb-switch__sheet path { fill: none; stroke: #1E7B46; stroke-width: 1.4; }
.plb-switch__tool:hover { border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
.plb-switch__tool[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--plb-ink); }
.plb-switch__panel { position: relative; margin-top: 16px; padding: 16px 18px; border-radius: 20px; background: #fff; color: var(--plb-body); }
.plb-switch__panel + .plb-switch__panel { margin-top: 10px; }
.plb-switch.is-live .plb-switch__panel { margin-top: 16px; }
.plb-switch.is-live .plb-switch__panel[hidden] { display: none; }
.plb-switch__panel.is-in { animation: plbIn .35s both; }
@keyframes plbIn { from { opacity: 0; transform: translateY(8px); } }
.plb-switch__h { margin: 0 0 8px; font: 800 11.5px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--plb-deep); }
.plb-switch__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plb-switch__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--plb-paper); font-size: 14px; line-height: 1.35; }
.plb-switch__rows li::after { content: ""; grid-column: 2; grid-row: 1; width: 22px; height: 10px; background: linear-gradient(90deg, #00A3D9, #3FB97A); clip-path: polygon(0 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 0 65%); }
.plb-switch__rows span { grid-column: 1; grid-row: 1; color: var(--plb-body); }
.plb-switch__rows b { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1.3 var(--f-body); color: var(--plb-ink); }
.plb-switch__rows b img { flex: none; width: 20px; height: 20px; }
.plb-switch__note { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid #FFB81C; font-size: 13.5px; line-height: 1.5; color: var(--plb-muted); }
.plb-switch__send { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding: 10px 18px; border: 0; border-radius: 999px; background: #FFB81C; color: #082238; font: 700 15px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s, transform .2s; }
.plb-switch__send:hover { background: #F0A400; transform: translateY(-1px); }
.plb-switch__status { position: relative; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: #C9DCEA; }
.plb-switch__status.is-done { color: #B8F0D0; font-weight: 600; }

/* ---------- 2. Answer + facts ---------- */
.plb-ans__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.plb-ans__grid > div > p:not(.hp-kick):not(.pg-answer) { font-size: 16.5px; line-height: 1.65; color: var(--plb-body); max-width: 64ch; }
.plb-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plb-facts div { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--plb-line); border-top: 4px solid var(--plb-blue); }
.plb-facts div:nth-child(2) { border-top-color: var(--plb-teal); } .plb-facts div:nth-child(3) { border-top-color: #F0A400; } .plb-facts div:nth-child(4) { border-top-color: #3FB97A; }
.plb-facts dt { font: 800 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--plb-deep); margin-bottom: 6px; }
.plb-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--plb-ink); }

/* ---------- 3. District explorer ---------- */
.plb-map__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3.5vw, 48px); margin-top: 30px; align-items: start; }
.plb-map__art { position: sticky; top: 100px; }
.plb-map__svg { display: block; width: 100%; height: auto; max-width: 520px; }
.plb-map__water { fill: #DDEFFA; }
.plb-map__land { fill: #F3F7F9; stroke: #C7DCEA; stroke-width: 1.2; }
.plb-map__area { fill: #CFE6F4; stroke: #0A6FA8; stroke-width: 1.4; cursor: pointer; transition: fill .25s, stroke-width .25s; }
.plb-map__area.is-hover { fill: #A9D6EF; }
.plb-map__area.is-on { fill: #FFB81C; stroke: #082238; stroke-width: 2; }
.plb-map__labels text { font: 700 11px/1 var(--f-body, Inter, sans-serif); fill: #082238; pointer-events: none; }
.plb-map__cap { margin: 8px 0 0; font-size: 13px; color: var(--plb-muted); }
.plb-map__picks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plb-map__picks button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #CFE2EE; background: #fff; font: 600 14px/1.2 var(--f-body); color: var(--plb-ink); cursor: pointer; text-align: left; transition: border-color .2s, background-color .2s; }
.plb-map__picks button::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: #CFE6F4; border: 1.5px solid #0A6FA8; transform: rotate(45deg); }
.plb-map__picks button:hover { border-color: #00A3D9; }
.plb-map__picks button[aria-pressed="true"] { background: #FFF4D6; border-color: #F0A400; }
.plb-map__picks button[aria-pressed="true"]::before { background: #FFB81C; border-color: #082238; }
.plb-map__cards { display: grid; gap: 12px; }
.plb-map__card { padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: #fff; border: 1px solid var(--plb-line); box-shadow: 0 30px 60px -46px rgba(8,34,56,.55); }
.plb-map.is-live .plb-map__card[hidden], .plb-map__grid.is-live .plb-map__card[hidden] { display: none; }
.plb-map__card.is-in { animation: plbIn .35s both; }
.plb-map__card h3 { margin: 0 0 10px; font: 800 clamp(20px, 1rem + .6vw, 24px)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--plb-ink); }
.plb-map__card p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--plb-body); }
.plb-map__card p b { display: block; margin-bottom: 2px; font: 800 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--plb-deep); }
.plb-map__start { padding: 10px 12px; border-radius: 14px; background: #EAF6F4; }
.plb-map__start b { color: #0B5E57 !important; }
.plb-map__apps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0 !important; }
.plb-map__apps span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border-radius: 99px; background: var(--plb-paper); border: 1px solid var(--plb-line); font: 600 13px/1 var(--f-body); color: var(--plb-ink); }
.plb-map__apps img { width: 20px; height: 20px; }

/* ---------- 4-6. Mid kit wrappers ---------- */
.plb-score, .plb-heat, .plb-weigh { margin-top: 28px; }
.plb-vs__more { margin: 18px 0 0; font-size: 15.5px; color: var(--plb-body); }
.plb-vs__more a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; color: var(--plb-blue); }
.plb-rules .pg-note { color: var(--plb-muted); }
.plb-weigh .mk-weigh__lvl { color: var(--plb-muted); }
.plb-weigh__send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.plb-btn-line { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--plb-ink); background: #fff; color: var(--plb-ink); font: 700 15px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s, color .2s; }
.plb-btn-line:hover { background: var(--plb-ink); color: #fff; }
.plb-weigh__status { margin: 0; font-size: 14px; color: var(--plb-muted); }
.plb-weigh__status.is-done { color: #14532D; font-weight: 600; }

/* ---------- 7. How we work + clocks ---------- */
.plb-how__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.plb-how__grid > div > p:not(.hp-kick):not(.pg-answer) { font-size: 16.5px; line-height: 1.65; color: var(--plb-body); }
.plb-clock { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px 18px; margin-top: 22px; padding: 18px; border-radius: 22px; background: var(--plb-paper); border: 1px solid var(--plb-line); }
.plb-clock__face { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.plb-clock__face svg { display: block; width: 88px; height: 88px; }
.plb-clock__face circle:first-child { fill: #fff; stroke: #0A6FA8; stroke-width: 3; }
.plb-clock__face--city circle:first-child { stroke: #F0A400; }
.plb-clock__ticks { stroke: #475569; stroke-width: 3; stroke-linecap: round; }
.plb-clock__h, .plb-clock__m { stroke: #082238; stroke-linecap: round; transform-box: view-box; transform-origin: 50px 50px; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.plb-clock__h { stroke-width: 5; } .plb-clock__m { stroke-width: 3; }
.plb-clock__dot { fill: #FFB81C; }
.plb-clock__face small { display: block; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--plb-muted); }
.plb-clock__face b { display: block; font: 800 17px/1.2 var(--f-display); color: var(--plb-ink); font-variant-numeric: tabular-nums; }
.plb-clock__say { margin: 0; font-size: 15px; line-height: 1.55; color: var(--plb-body); }
.plb-how__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plb-how__list li { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--plb-line); border-left: 5px solid #00A3D9; }
.plb-how__list li:nth-child(even) { border-left-color: #3FB97A; }
.plb-how__list b { display: block; margin-bottom: 4px; font: 700 16.5px/1.3 var(--f-display); color: var(--plb-ink); }
.plb-how__list span { font-size: 15px; line-height: 1.55; color: var(--plb-body); }

/* ---------- 8. Cost ---------- */
.plb-cost__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.plb-cost__grid > div > p:not(.hp-kick):not(.pg-answer) { font-size: 16px; line-height: 1.65; color: var(--plb-body); }
.plb-bill { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--plb-line); border-top: 6px solid #082238; box-shadow: 0 40px 70px -50px rgba(8,34,56,.5); }
.plb-bill__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.plb-bill__h b { font: 800 17px/1.2 var(--f-display); color: var(--plb-ink); }
.plb-bill__h span { font-size: 14px; color: var(--plb-muted); }
.plb-bill__h em { margin-left: auto; font: 700 11px/1 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: #FFF4D6; color: #7A4F00; }
.plb-bill table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.plb-bill th, .plb-bill td { padding: 10px 6px; text-align: left; border-bottom: 1px dashed #D6E3EC; color: var(--plb-ink); }
.plb-bill thead th { font: 800 11.5px/1.3 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--plb-muted); }
.plb-bill td:last-child, .plb-bill th:last-child { text-align: right; white-space: nowrap; }
.plb-bill tbody th { font-weight: 600; }
.plb-bill tfoot th, .plb-bill tfoot td { border-bottom: 0; font: 800 16px/1.3 var(--f-display); padding-top: 14px; }
.plb-bill__foot { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--plb-muted); }

/* ---------- 9. Start ---------- */
.plb-start__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: plbst; }
.plb-start__list li { position: relative; counter-increment: plbst; padding: 20px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--plb-line); }
.plb-start__list li::before { content: counter(plbst); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: #082238; color: #fff; font: 800 15px/1 var(--f-body); }
.plb-start__list li:last-child::before { background: #FFB81C; color: #082238; }
.plb-start__list b { display: block; margin-bottom: 6px; font: 700 17px/1.3 var(--f-display); color: var(--plb-ink); }
.plb-start__list span { font-size: 14.5px; line-height: 1.5; color: var(--plb-body); }
.plb-local { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; padding: 20px 24px; border-radius: 22px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); }
.plb-local p { flex: 1 1 260px; margin: 0; font: 700 clamp(18px, 1rem + .5vw, 22px)/1.3 var(--f-display); color: #fff; }
.plb-local .btn--red { color: #082238 !important; }
.plb-local .pg-link { margin-top: 0; color: #BFE6F7 !important; min-height: 24px; display: inline-flex; align-items: center; }
.plb-start .pg-link, .pg-faq__links .pg-link { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .plb-start__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plb-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .plb-hero__grid, .plb-ans__grid, .plb-how__grid, .plb-cost__grid, .plb-map__grid { grid-template-columns: minmax(0, 1fr); }
  .plb-switch { max-width: 600px; }
  .plb-map__art { position: static; max-width: 460px; }
  .plb-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .plb-switch { padding: 16px; border-radius: 22px; }
  .plb-switch__tool { font-size: 13.5px; padding-right: 12px; }
  .plb-switch__panel { padding: 14px; }
  .plb-switch__rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .plb-switch__rows li::after { display: none; }
  .plb-switch__rows span, .plb-switch__rows b { grid-column: 1; grid-row: auto; }
  .plb-switch__rows span::after { content: " \2193"; color: #0A6FA8; }
  .plb-facts, .plb-start__list { grid-template-columns: minmax(0, 1fr); }
  .plb-clock { grid-template-columns: 1fr 1fr; padding: 14px; }
  .plb-clock__say { grid-column: 1 / -1; }
  .plb-bill { padding: 16px; }
  .plb-bill table { font-size: 13.5px; }
  .plb-map__picks button { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .plb-switch__panel.is-in, .plb-map__card.is-in { animation: none; }
  .plb-switch__tool, .plb-switch__send, .plb-map__area, .plb-clock__h, .plb-clock__m { transition: none; }
}
