/* HomeProRegister extensions to the design prototype stylesheet (/hpr/proto.css).
   - Legacy rules apply only inside .hpr-std (pages not yet on prototype markup).
   - Then prototype-native extensions for states the prototype does not draw.
   Loaded only on HomeProRegister. */
body.hpr { --font-geist-sans: "Geist"; }
body.hpr { --teal: #075e59;
  --teal-dark: #054a46;
  --teal-soft: #e5f0ed;
  --ink: #183b3b;
  --text: #22403f;
  --muted: #586966;
  --line: #d7e1dd;
  --grey-1: #f7f3ec;
  --grey-2: #efe7da;
  --grey-3: #c9d5d1;
  --masthead: #173f41;
  --gold: #b77534;
  --focus: #b77534;
  --ok: #1f6a45;
  --warn: #8a5500;
  --bad: #a33a2b;
  --radius: 8px;
  --radius-lg: 12px;
  --max: 1200px;
  --sans: "Geist", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif }
body.hpr .hpr-std h1,
body.hpr .hpr-std h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); }
body.hpr .hpr-std h1 { font-size: clamp(38px, 4.6vw, 66px); }
body.hpr .hpr-std h2 { font-size: clamp(27px, 2.6vw, 40px); }
body.hpr .hpr-std h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.hpr .hpr-std p { color: var(--muted); }
body.hpr .prose p,
body.hpr .hpr-std article p { color: var(--text); }
body.hpr .hpr-std a { color: var(--teal); }
body.hpr .hpr-std a:focus-visible,
body.hpr .hpr-std button:focus-visible,
body.hpr .hpr-std input:focus-visible,
body.hpr .hpr-std select:focus-visible,
body.hpr .hpr-std textarea:focus-visible,
body.hpr .hpr-std summary:focus-visible,
body.hpr [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
body.hpr .wrap { max-width: var(--max); }
body.hpr .hpr-std .eyebrow,
body.hpr .kicker { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
body.hpr .hpr-std .lede { font-size: 1.08rem; color: var(--muted); max-width: 60ch; }
body.hpr .hpr-std .small { font-size: .88rem; }
body.hpr .muted { color: var(--muted); }
body.hpr .hpr-std .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.hpr .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 7px; background: var(--teal); color: #fff; border: 1px solid var(--teal); font-weight: 600; font-size: .96rem; text-decoration: none; cursor: pointer; width: auto; line-height: 1.2; }
body.hpr .btn:hover { background: var(--teal-dark); color: #fff; }
body.hpr .btn.secondary,
body.hpr .btn.ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
body.hpr .btn.secondary:hover,
body.hpr .btn.ghost:hover { background: var(--grey-1); color: var(--ink); }
body.hpr .hpr-std .btn.small { min-height: 40px; padding: 0 14px; font-size: .88rem; }
body.hpr .hpr-std .btn.block { width: 100%; }
body.hpr .btn[disabled],
body.hpr .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body.hpr .linkbtn { background: none; border: 0; padding: 0; color: var(--teal); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
body.hpr .arrowlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal); text-decoration: none; }
body.hpr .arrowlink:hover { text-decoration: underline; text-underline-offset: 3px; }
body.hpr .ico { width: 18px; height: 18px; flex: none; }
body.hpr .hpr-std label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin: 14px 0 6px; }
body.hpr .hpr-std input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.hpr .hpr-std select,
body.hpr .hpr-std textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--grey-3); border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
body.hpr .hpr-std textarea { min-height: 120px; resize: vertical; }
body.hpr .hpr-std input[aria-invalid="true"],
body.hpr .hpr-std select[aria-invalid="true"],
body.hpr .hpr-std textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
body.hpr .hpr-std .field-error { color: var(--bad); font-size: .88rem; font-weight: 600; margin: 6px 0 0; }
body.hpr .req { color: var(--bad); }
body.hpr .hint { color: var(--muted); font-size: .88rem; margin: 6px 0 0; }
body.hpr .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
body.hpr .check input { margin-top: 2px; flex: none; }
body.hpr .hpr-std input[type="checkbox"]:not(.choice input) { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; flex: none; vertical-align: -5px; }
body.hpr .hpr-std input[type="checkbox"]:not(.choice input)::before { content: ""; width: 12px; height: 12px; background: #fff; transform: scale(0); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
body.hpr .hpr-std input[type="checkbox"]:not(.choice input):checked { background: var(--teal); border-color: var(--teal); }
body.hpr .hpr-std input[type="checkbox"]:not(.choice input):checked::before { transform: scale(1); }
body.hpr .hpr-std input[type="checkbox"]:not(.choice input):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.hpr .hpr-std input[type="checkbox"][aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
body.hpr .check { cursor: pointer; }
body.hpr .send-hint { color: var(--bad); font-weight: 600; margin: 8px 0 0; }
body.hpr .hpr-std fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin: 16px 0; }
body.hpr .hpr-std legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
body.hpr .error-summary { border: 2px solid var(--bad); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; background: #fff7f5; }
body.hpr .error-summary h2 { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; font-weight: 700; margin: 0 0 6px; color: var(--bad); }
body.hpr .notice { border: 1px solid var(--line); border-left: 4px solid var(--teal); background: var(--grey-1); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; color: var(--text); }
body.hpr .notice.warn { border-left-color: var(--gold); background: #fbf6ef; }
body.hpr .hpr-std .notice.error { border-left-color: var(--bad); background: #fff5f3; }
body.hpr .notice.ok { border-left-color: var(--ok); background: #f1f8f4; }
body.hpr .staging-banner { background: #3b2a12; color: #fff; text-align: center; font-size: .8rem; letter-spacing: .06em; padding: 6px 14px; }
body.hpr .staging-banner b { letter-spacing: .12em; }
body.hpr header.hpr-head { border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 40; }
body.hpr .hpr-head .bar { max-width: var(--max); margin: 0 auto; padding: 0 20px; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.hpr .hpr-brand { display: inline-flex; align-items: center; gap: 0; font-size: 1.35rem; letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
body.hpr .hpr-brand b { font-weight: 700; }
body.hpr .hpr-brand span { font-weight: 400; }
body.hpr .hpr-brand svg { width: 28px; height: 28px; color: var(--teal); margin-right: 8px; }
body.hpr .hpr-nav { display: flex; align-items: center; gap: 22px; }
body.hpr .hpr-nav a { color: var(--ink); text-decoration: none; font-size: .95rem; }
body.hpr .hpr-nav a:hover,
body.hpr .hpr-nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; text-underline-offset: 6px; }
body.hpr .hpr-tools { display: flex; align-items: center; gap: 14px; }
body.hpr .hpr-saved { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink); }
body.hpr .hpr-saved:hover { background: var(--grey-1); }
body.hpr .hpr-saved .count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--teal); color: #fff; font-size: .7rem; font-weight: 700; display: none; align-items: center; justify-content: center; padding: 0 4px; }
body.hpr .hpr-saved .count.on { display: inline-flex; }
body.hpr .hpr-pro { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); font-weight: 600; text-decoration: none; }
body.hpr .hpr-pro:hover { background: var(--grey-1); }
body.hpr .hpr-menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 7px; width: 46px; height: 46px; align-items: center; justify-content: center; color: var(--ink); }
body.hpr .hpr-mobile { display: none; }
@media (max-width: 900px) {
body.hpr .hpr-nav,
body.hpr .hpr-pro { display: none; }
body.hpr .hpr-menu-btn { display: inline-flex; }
body.hpr .hpr-head .bar { height: 68px; }
body.hpr .hpr-mobile:not([hidden]) { display: block; border-top: 1px solid var(--line); padding: 10px 20px 18px; }
body.hpr .hpr-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.hpr .hpr-mobile a { display: block; padding: 12px 4px; color: var(--ink); text-decoration: none; font-size: 1.02rem; border-bottom: 1px solid var(--grey-2); }
}
body.hpr main#main { padding-top: 28px; padding-bottom: 56px; }
body.hpr main#main.full { max-width: none; padding: 0; }
body.hpr .band { padding: clamp(36px, 5vw, 64px) 20px; }
body.hpr .band.soft { background: var(--grey-1); }
body.hpr .band > .in { max-width: var(--max); margin: 0 auto; }
body.hpr .band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
body.hpr .band-head h2 { margin: 0; }
body.hpr .crumbs { font-size: .86rem; color: var(--muted); }
body.hpr .crumbs a { color: var(--muted); }
body.hpr .h-hero { background: var(--grey-1); padding: clamp(36px, 6vw, 84px) 20px; }
body.hpr .h-hero .in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 36px; align-items: center; }
body.hpr .h-hero h1 { margin: 0 0 18px; }
body.hpr .h-hero h1 em { font-style: italic; color: var(--teal); }
body.hpr .hpr-std .h-hero .lede { margin-bottom: 26px; }
body.hpr .h-panel { background: var(--masthead); color: #fff; border-radius: var(--radius-lg); padding: 30px 28px; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
body.hpr .h-panel p { color: rgba(255,255,255,.82); }
body.hpr .h-panel .kicker { color: rgba(255,255,255,.72); }
body.hpr .h-panel h2 { color: #fff; font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 12px; }
body.hpr .h-panel ul { margin: 6px 0 0; padding-left: 18px; color: rgba(255,255,255,.88); }
body.hpr .h-panel a { color: #fff; }
@media (max-width: 900px) {
body.hpr .h-hero .in { grid-template-columns: 1fr; }
}
body.hpr .qbox { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px; box-shadow: 0 1px 2px rgba(24,59,59,.05); }
body.hpr .qbox .f { padding: 4px 12px; border-right: 1px solid var(--line); }
body.hpr .qbox .f:last-of-type { border-right: 0; }
body.hpr .qbox label { margin: 2px 0 0; font-size: .78rem; }
body.hpr .qbox input,
body.hpr .qbox select { border: 0 !important; min-height: 38px !important; padding: 4px 0 !important; box-shadow: none !important; }
body.hpr .qbox .btn { align-self: stretch; min-height: 56px; }
@media (max-width: 720px) {
body.hpr .qbox { grid-template-columns: 1fr; }
body.hpr .qbox .f { border-right: 0; border-bottom: 1px solid var(--line); }
body.hpr .qbox .btn { margin-top: 8px; }
}
body.hpr .qnote { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); margin: 12px 0 0; }
body.hpr .intents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.hpr .intent { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: var(--ink); background: #fff; min-height: 200px; }
body.hpr .intent:hover { border-color: var(--teal); }
body.hpr .intent h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -.02em; margin: 6px 0 0; }
body.hpr .intent p { margin: 0; flex: 1; }
body.hpr .intent .go { color: var(--teal); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 800px) {
body.hpr .intents { grid-template-columns: 1fr; }
}
body.hpr .groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
body.hpr .hpr-std .group { padding: 20px 18px; border-right: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; min-height: 170px; }
body.hpr .hpr-std .group:last-child { border-right: 0; }
body.hpr .hpr-std .group:hover { background: var(--grey-1); }
body.hpr .hpr-std .group .num { font-size: .8rem; color: var(--muted); display: flex; justify-content: space-between; }
body.hpr .hpr-std .group b { font-weight: 600; }
body.hpr .hpr-std .group span.sub { font-size: .84rem; color: var(--muted); }
@media (max-width: 1000px) {
body.hpr .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.hpr .hpr-std .group:nth-child(3n) { border-right: 0; }
body.hpr .hpr-std .group:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
body.hpr .groups { grid-template-columns: 1fr 1fr; }
body.hpr .hpr-std .group { border-bottom: 1px solid var(--line); }
body.hpr .hpr-std .group:nth-child(3n) { border-right: 1px solid var(--line); }
body.hpr .hpr-std .group:nth-child(2n) { border-right: 0; }
}
body.hpr .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
body.hpr .areas a { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: var(--ink); background: #fff; }
body.hpr .areas a:hover { border-color: var(--teal); }
body.hpr .areas .n { color: var(--muted); font-size: .88rem; }
body.hpr .clarity { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
body.hpr .clarity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
body.hpr .clarity li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
body.hpr .clarity li svg { color: var(--teal); width: 22px; height: 22px; margin-top: 3px; }
body.hpr .clarity li b { display: block; color: var(--ink); font-size: 1.05rem; }
@media (max-width: 800px) {
body.hpr .clarity { grid-template-columns: 1fr; }
}
body.hpr .hook { background: var(--masthead); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px; }
body.hpr .hook h2 { color: #fff; margin: 0 0 14px; }
body.hpr .hook p { color: rgba(255,255,255,.84); }
body.hpr .hook .kicker { color: rgba(255,255,255,.7); }
body.hpr .hook ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: rgba(255,255,255,.9); }
body.hpr .hook li { display: flex; gap: 10px; }
body.hpr .hook li svg { color: #9fd2c6; margin-top: 3px; }
body.hpr .hook .btn { background: #fff; color: var(--masthead); border-color: #fff; }
body.hpr .hook .btn:hover { background: var(--teal-soft); color: var(--masthead); }
body.hpr .hook .btn.secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 800px) {
body.hpr .hook { grid-template-columns: 1fr; }
}
body.hpr .svc-dir-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 18px 0 8px; }
body.hpr .svc-dir-tools .f { flex: 1 1 280px; }
body.hpr .svc-section { margin-top: 36px; }
body.hpr .svc-section h2 { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
body.hpr .svc-section h2 small { font-family: var(--sans); font-size: .9rem; color: var(--muted); letter-spacing: 0; }
body.hpr .svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
body.hpr .svc-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; text-decoration: none; color: var(--ink); background: #fff; display: flex; flex-direction: column; gap: 6px; }
body.hpr .svc-card:hover { border-color: var(--teal); }
body.hpr .svc-card b { font-weight: 600; }
body.hpr .svc-card .d { font-size: .88rem; color: var(--muted); }
body.hpr .svc-card .c { font-size: .84rem; color: var(--teal); font-weight: 600; margin-top: auto; }
body.hpr .svc-card .c.none { color: var(--muted); font-weight: 500; }
body.hpr .stepper { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0 0 20px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
body.hpr .stepper li { display: flex; align-items: center; gap: 8px; }
body.hpr .hpr-std .stepper .dot { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--grey-3); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
body.hpr .stepper li[aria-current="step"] { color: var(--ink); font-weight: 700; }
body.hpr .hpr-std .stepper li[aria-current="step"] .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
body.hpr .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: clamp(18px, 3vw, 30px); }
body.hpr .choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.hpr .choice { position: relative; }
body.hpr .choice input { position: absolute; opacity: 0; inset: 0; }
body.hpr .choice label { margin: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; font-weight: 500; min-height: 120px; }
body.hpr .choice label b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
body.hpr .choice input:checked + label { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); background: var(--teal-soft); }
body.hpr .choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 700px) {
body.hpr .choice-grid { grid-template-columns: 1fr; }
}
body.hpr .suggest { border: 1px dashed var(--teal); border-radius: var(--radius); padding: 12px 14px; background: var(--teal-soft); margin-top: 12px; }
body.hpr .results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
body.hpr .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
body.hpr .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .86rem; color: var(--ink); text-decoration: none; background: #fff; }
body.hpr .chip[aria-pressed="true"],
body.hpr .chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
body.hpr .chip:hover { border-color: var(--teal); }
body.hpr .hpr-std .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
body.hpr article.pcard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
body.hpr article.pcard.pro { border-color: #b9cfc8; }
body.hpr article.pcard .top { display: flex; gap: 12px; align-items: flex-start; }
body.hpr .mono { width: 48px; height: 48px; border-radius: 8px; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.2rem; flex: none; border: 1px solid #cfe0db; }
body.hpr article.pcard h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; overflow-wrap: anywhere; }
body.hpr article.pcard h3 a { color: var(--ink); text-decoration: none; }
body.hpr article.pcard h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.hpr article.pcard .meta { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
body.hpr article.pcard .svcs { font-size: .86rem; color: var(--text); }
body.hpr article.pcard .intro { font-size: .92rem; color: var(--text); margin: 0; }
body.hpr article.pcard .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
body.hpr .hpr-std .tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.hpr .hpr-std .tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; border-radius: 5px; padding: 3px 8px; border: 1px solid var(--line); color: var(--ink); background: #fff; text-decoration: none; }
body.hpr .hpr-std .tag.sponsored { background: #fbf2e7; border-color: #e5c9a4; color: #6b4210; }
body.hpr .hpr-std .tag.checked { background: #edf6f1; border-color: #b8d9c6; color: var(--ok); }
body.hpr .hpr-std .tag.pro { background: var(--masthead); border-color: var(--masthead); color: #fff; }
body.hpr .hpr-std .tag.owner { background: var(--teal-soft); border-color: #c4dcd5; color: var(--teal-dark); }
body.hpr .hpr-std .tag svg { width: 13px; height: 13px; }
body.hpr .savebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: .86rem; font-weight: 600; cursor: pointer; }
body.hpr .savebtn[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
body.hpr .pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 26px 0 0; flex-wrap: wrap; }
body.hpr .pager a,
body.hpr .pager span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; padding: 0 12px; text-decoration: none; color: var(--ink); }
body.hpr .pager [aria-current="page"] { background: var(--teal); border-color: var(--teal); color: #fff; }
body.hpr .hpr-std .empty { border: 1px dashed var(--grey-3); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); text-align: center; background: #fff; }
body.hpr .hpr-std .empty h2 { font-size: clamp(22px, 2vw, 30px); margin: 0 0 8px; }
body.hpr .hpr-std .empty .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
body.hpr .card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
body.hpr .badge { border-radius: 5px; }
body.hpr .linkgrid a { border-radius: var(--radius); }
body.hpr .trustbar { color: var(--muted); }
body.hpr .faq-item { border-color: var(--line); }
body.hpr .hpr-std table { border-collapse: collapse; width: 100%; }
body.hpr .hpr-std th,
body.hpr .hpr-std td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
body.hpr .hpr-std th { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
body.hpr .prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 16px 0 10px; }
body.hpr .prof-head .mono { width: 72px; height: 72px; font-size: 1.8rem; }
body.hpr .prof-head h1 { font-size: clamp(32px, 3.6vw, 52px); margin: 4px 0; overflow-wrap: anywhere; }
body.hpr .prof-head .svcline { font-size: .88rem; color: var(--muted); }
body.hpr .prof-head .loc { display: flex; gap: 6px; align-items: center; font-size: .92rem; color: var(--muted); flex-wrap: wrap; }
@media (max-width: 700px) {
body.hpr .prof-head { grid-template-columns: auto minmax(0, 1fr); }
body.hpr .prof-head .savecol { grid-column: 1 / -1; }
}
body.hpr .masthead { background: var(--masthead); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px); margin: 10px 0 18px; }
body.hpr .masthead h2 { color: #fff; margin: 0; font-size: clamp(28px, 3vw, 44px); }
body.hpr .masthead p { color: rgba(255,255,255,.82); margin: 10px 0 0; }
body.hpr .masthead .kicker { color: rgba(255,255,255,.7); }
body.hpr .prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
@media (max-width: 960px) {
body.hpr .prof-grid { grid-template-columns: 1fr; }
}
body.hpr .prof-sec { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 28px; }
body.hpr .prof-sec:first-child { border-top: 0; margin-top: 8px; padding-top: 0; }
body.hpr .prof-sec h2 { margin: 0 0 14px; font-size: clamp(24px, 2.2vw, 34px); }
body.hpr .contact-card { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: #fff; display: grid; gap: 12px; }
body.hpr .contact-card .who { display: flex; gap: 12px; align-items: center; }
body.hpr .contact-card .who b { color: var(--ink); display: block; }
body.hpr .contact-card .note { display: flex; gap: 8px; font-size: .84rem; color: var(--muted); }
body.hpr .contact-card .note svg { color: var(--teal); margin-top: 2px; }
body.hpr .facts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
body.hpr .facts2 dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
body.hpr .facts2 dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) {
body.hpr .facts2 { grid-template-columns: 1fr; }
}
body.hpr .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
body.hpr .ev { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
body.hpr .ev .k { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; gap: 6px; align-items: center; }
body.hpr .ev .s { font-weight: 700; color: var(--ink); }
body.hpr .ev.checked .s { color: var(--ok); }
body.hpr .ev.expired .s,
body.hpr .ev.failed .s { color: var(--bad); }
body.hpr .ev.none .s { color: var(--muted); font-weight: 600; }
body.hpr .ev .d { font-size: .86rem; color: var(--muted); }
body.hpr .coverage { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
body.hpr .coverage li { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; font-size: .9rem; }
body.hpr .story-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
body.hpr .story-card .body { padding: 18px; }
body.hpr .story-card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
body.hpr .story-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; margin: 10px 0 0; }
body.hpr .story-card dt { color: var(--muted); }
body.hpr .story-card dd { margin: 0; }
body.hpr .story-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 6px; }
body.hpr .story-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
body.hpr .stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
body.hpr .tipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.hpr .tip { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--grey-1); padding: 16px 18px; }
body.hpr .tip b { color: var(--ink); display: block; margin-bottom: 4px; }
body.hpr .tip p { margin: 0; font-size: .9rem; }
@media (max-width: 640px) {
body.hpr .tipgrid { grid-template-columns: 1fr; }
}
body.hpr .prof-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 18px 0 0; overflow-x: auto; }
body.hpr .prof-tabs a { padding: 12px 0; color: var(--ink); text-decoration: none; white-space: nowrap; font-size: .95rem; }
body.hpr .prof-tabs a:hover { color: var(--teal); }
body.hpr .ow { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 70vh; }
body.hpr .ow-side { border-right: 1px solid var(--line); padding: 26px 18px; background: #fbfcfb; }
body.hpr .ow-side .biz { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); margin: 6px 0 8px; overflow-wrap: anywhere; }
body.hpr .ow-nav { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 4px; }
body.hpr .ow-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: .94rem; }
body.hpr .ow-nav a:hover { background: var(--grey-1); }
body.hpr .ow-nav a[aria-current="page"] { background: var(--teal-soft); font-weight: 700; color: var(--teal-dark); }
body.hpr .ow-main { padding: 26px clamp(18px, 3vw, 40px) 48px; min-width: 0; }
body.hpr .ow-main h1 { font-size: clamp(30px, 3.4vw, 46px); margin: 6px 0 8px; }
body.hpr .ow-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
body.hpr .ow { grid-template-columns: 1fr; }
body.hpr .ow-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; }
body.hpr .ow-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.hpr .progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; margin: 10px 0 18px; }
body.hpr .progress .bar { width: 160px; height: 8px; border-radius: 999px; background: var(--grey-2); overflow: hidden; }
body.hpr .progress .bar i { display: block; height: 100%; background: var(--ok); }
body.hpr .builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1100px) {
body.hpr .builder { grid-template-columns: 1fr; }
}
body.hpr .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; flex-wrap: wrap; }
body.hpr .tabs button,
body.hpr .tabs a { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 10px; font: inherit; font-size: .92rem; color: var(--muted); cursor: pointer; text-decoration: none; }
body.hpr .tabs [aria-selected="true"],
body.hpr .tabs [aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); font-weight: 700; }
body.hpr .preview-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
body.hpr .preview-frame .pv-head { background: var(--masthead); color: #fff; padding: 26px 24px; }
body.hpr .preview-frame.free .pv-head { background: var(--grey-1); color: var(--ink); }
body.hpr .preview-frame .pv-head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin: 10px 0 4px; color: inherit; }
body.hpr .preview-frame .pv-head p { color: inherit; opacity: .82; margin: 0; }
body.hpr .preview-frame .pv-body { padding: 22px 24px; }
body.hpr .preview-frame .pv-body p { color: var(--text); }
body.hpr .pv-tag { display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 4px; padding: 3px 8px; }
body.hpr .savestate { font-size: .88rem; color: var(--muted); }
body.hpr .savestate.ok { color: var(--ok); }
body.hpr .savestate.bad { color: var(--bad); font-weight: 600; }
body.hpr .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
body.hpr .kpi { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; background: #fff; }
body.hpr .kpi b { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--ink); }
body.hpr .kpi span { font-size: .84rem; color: var(--muted); }
body.hpr .qr { display: flex; flex-direction: column; align-items: center; gap: 14px; }
body.hpr .qr svg,
body.hpr .qr img { width: 220px; height: 220px; background: #fff; }
body.hpr .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.hpr .timeline li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .92rem; }
body.hpr .timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--grey-3); margin-top: 7px; }
body.hpr .timeline li.good::before { background: var(--ok); }
body.hpr .timeline li.bad::before { background: var(--bad); }
body.hpr .timeline time { color: var(--muted); font-size: .84rem; }
body.hpr .rcpt { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; background: #fff; display: grid; gap: 12px; }
body.hpr .rcpt + .rcpt { margin-top: 14px; }
body.hpr .rcpt-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
body.hpr .rcpt-head h3 { margin: 0; }
body.hpr .states { display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; }
body.hpr .states span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
body.hpr .states .on { border-color: var(--ok); color: var(--ok); font-weight: 700; }
body.hpr .states .bad { border-color: var(--bad); color: var(--bad); font-weight: 700; }
body.hpr .msg { border-left: 3px solid var(--line); padding: 4px 12px; }
body.hpr .msg.biz { border-left-color: var(--teal); }
body.hpr .msg .by { font-size: .82rem; color: var(--muted); }
body.hpr .est { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--grey-1); }
body.hpr .est dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: .9rem; }
body.hpr .est dt { color: var(--muted); }
body.hpr .est dd { margin: 0; }
body.hpr .hpr-std .pick { display: grid; gap: 10px; }
body.hpr .pick-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; background: #fff; }
body.hpr .pick-item input { width: 20px; height: 20px; margin-top: 4px; }
body.hpr .pick-item:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
body.hpr .consent { border: 1px solid var(--teal); border-radius: var(--radius-lg); background: var(--teal-soft); padding: 16px 18px; }
body.hpr .consent ul { margin: 6px 0; }
body.hpr .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.hpr .cmp { min-width: 640px; }
body.hpr .cmp th[scope="row"] { width: 180px; background: var(--grey-1); }
body.hpr .cmp td.missing { color: var(--muted); font-style: italic; }
body.hpr footer.hpr-foot { background: #f7f8f6; border-top: 1px solid var(--line); padding: 48px 20px 28px; margin-top: 0; }
body.hpr .hpr-foot .in { max-width: var(--max); margin: 0 auto; }
body.hpr .hpr-foot .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
body.hpr .hpr-foot h2 { font-family: var(--sans); font-size: .92rem; letter-spacing: 0; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
body.hpr .hpr-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.hpr .hpr-foot a { color: var(--ink); text-decoration: none; font-size: .92rem; }
body.hpr .hpr-foot a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
body.hpr .hpr-foot .popular { margin-top: 30px; }
body.hpr .hpr-foot .popular ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
body.hpr .hpr-foot .legal { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
@media (max-width: 860px) {
body.hpr .hpr-foot .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
body.hpr .hpr-foot .cols { grid-template-columns: 1fr; }
}
body.hpr .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.hpr .stack { display: grid; gap: 12px; }
body.hpr .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 800px) {
body.hpr .split { grid-template-columns: 1fr; }
}
body.hpr .kbd-help { font-size: .82rem; color: var(--muted); }
body.hpr .hpr-std dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; max-width: min(560px, 92vw); }
body.hpr .hpr-std dialog::backdrop { background: rgba(24,59,59,.45); }
@media (prefers-reduced-motion: reduce) {
body.hpr * { transition: none !important; animation: none !important; }
}
body.hpr .cmpbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; gap: 14px; align-items: center; background: var(--ink); color: #fff; padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .95rem; }
body.hpr .cmpbar[hidden] { display: none; }
body.hpr .cmpbar .btn { background: #fff; color: #075e59; border-color: #fff; }
body.hpr [hidden] { display: none !important; }
body.hpr .hpr-std article.pcard .top .tags { flex: 1; }
body.hpr article.pcard .actions { align-items: center; margin-top: auto; }
body.hpr .prof-grid > *,
body.hpr .builder > *,
body.hpr .ow > *,
body.hpr .split > * { min-width: 0; }
body.hpr .hpr-head .bar { flex-wrap: wrap; height: auto; min-height: 84px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
body.hpr .hpr-pro { white-space: nowrap; }
@media (max-width: 900px) {
body.hpr .hpr-head .bar { min-height: 68px; }
}

@media (max-width: 400px) {
body.hpr .hpr-head .bar { gap: 10px; padding-left: 14px; padding-right: 14px; }
body.hpr .hpr-brand { font-size: 1.12rem; }
body.hpr .hpr-brand svg { width: 22px; height: 22px; margin-right: 6px; }
body.hpr .hpr-tools { gap: 6px; }
}
body.hpr .hpr-std h1,
body.hpr .hpr-std h2,
body.hpr .hpr-std h3 { overflow-wrap: anywhere; }

/* ===== Prototype-native extensions (match prototype visual language) ===== */
body.hpr .accordion { border-top: 1px solid var(--border, #d7e1dd); max-width: 820px; }
body.hpr .accordion-item { border-bottom: 1px solid var(--border, #d7e1dd); }
body.hpr .accordion-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; color: var(--ink, #183b3b); }
body.hpr .accordion-item summary::-webkit-details-marker { display: none; }
body.hpr .accordion-item summary svg { flex: none; transition: transform .15s; }
body.hpr .accordion-item[open] summary svg { transform: rotate(180deg); }
body.hpr .accordion-body { padding: 0 0 18px; max-width: 70ch; }
body.hpr .notice-bar { padding: 12px 5%; background: #fff5f3; color: #a33a2b; font-weight: 600; border-bottom: 1px solid #efc9c1; }
body.hpr .saved-link { position: relative; }
body.hpr .saved-count { display: none; position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #075e59; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
body.hpr .saved-count.on { display: inline-block; }
body.hpr .header nav a[aria-current="page"] { color: #075e59; text-decoration: underline; text-underline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { body.hpr .accordion-item summary svg { transition: none; } }
/* Links standing in for the prototype's client-side toggle buttons (server-rendered pages). */
body.hpr .journey-modes > a { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 16px; font-size: 16px; text-align: left; }
body.hpr .journey-modes > a.active { border-color: var(--teal); background: #e4eee5; color: var(--teal); }
body.hpr .area-picker a { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); padding: 12px 18px; border-radius: 6px; }
body.hpr .area-picker a.active { border-color: var(--teal); background: #e4eee5; color: var(--teal); }
/* Native selects styled like the prototype's select trigger (.pick). */
body.hpr select.pick { -webkit-appearance: none; appearance: none; border: 1px solid #c7d5d0; color: var(--ink); font: inherit; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important; padding-right: 36px !important; cursor: pointer; }
body.hpr .field input[aria-invalid="true"], body.hpr .field textarea[aria-invalid="true"], body.hpr select.pick[aria-invalid="true"] { border-color: #a33a2b !important; box-shadow: 0 0 0 1px #a33a2b; }
body.hpr .field-error { color: #a33a2b; font-size: 13px; font-weight: 600; font-style: normal; }
body.hpr .error-summary { border: 2px solid #a33a2b; border-radius: 6px; padding: 14px 16px; margin: 0 0 18px; background: #fff7f5; }
body.hpr .error-summary h3 { font-size: 15px; margin: 0 0 6px; color: #a33a2b; }
body.hpr .error-summary ul { margin: 0; padding-left: 18px; }
body.hpr .error-summary a { color: #a33a2b; text-decoration: underline; }
body.hpr .request-card form > .form-stack + .form-stack { margin-top: 22px; }
body.hpr .active-filters { flex-wrap: wrap; }
body.hpr .active-filters a { display: flex; align-items: center; gap: 8px; background: #f1e9dc; color: #255b51; border-radius: 4px; padding: 6px 10px; margin-bottom: 15px; font-size: 12px; }
body.hpr .tick input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); flex: none; }
body.hpr .filter-group .tick + p, body.hpr .filter-group .tick + strong { margin-top: 6px; }
body.hpr .filter-group strong { display: block; }
body.hpr .card-bottom .tick { margin: 0; }
body.hpr .search-strip input { width: 100%; height: 46px; border: 1px solid #c7d5d0; border-radius: 6px; padding: 10px 14px; font-size: 14px; background: #fff; color: var(--ink); }
body.hpr .wide-note + .disclosure, body.hpr section[aria-label="Results"] .disclosure { margin-top: 14px; }
body.hpr section[aria-label="Sponsored"] { margin-bottom: 8px; }
body.hpr .field input, body.hpr .field select, body.hpr .field textarea, body.hpr .tick { font-weight: 400; }
/* Company profile: real-data variants of prototype elements */
body.hpr .credential-cards { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
body.hpr .credential-cards .credential { display: flex; flex-direction: column; align-items: start; gap: 10px; padding: 20px 15px; text-align: left; border: 1px solid var(--border); border-radius: 6px; background: #faf6ef; min-width: 0; }
body.hpr .credential-cards .credential > span { font-size: 13px; color: #56675c; }
body.hpr .credential-cards .credential > svg { color: var(--teal); }
body.hpr .credential-cards .credential.is-expired > svg, body.hpr .credential-cards .credential.is-failed > svg { color: #a33a2b; }
body.hpr .credential-cards .credential.is-none > svg, body.hpr .credential-cards .credential.is-stated > svg { color: #56675c; }
body.hpr .credential-cards small { color: #56675c; overflow-wrap: anywhere; }
body.hpr .listing-cover > .cover-gallery { position: absolute; right: 25px; bottom: 30px; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 5px; font-size: 14px; }
body.hpr .owner-prompt .owner-prompt-link { display: block; color: #56675c; font-size: 12px; text-decoration: underline; margin-top: 17px; }
body.hpr .owner-prompt strong { display: block; }
body.hpr .listing-project.no-photo { display: block; }
body.hpr .project-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 13px; }
body.hpr .project-facts dt { color: #56675c; }
body.hpr .project-facts dd { margin: 0; }
body.hpr .listing-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
body.hpr .listing-photo-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; display: block; }
body.hpr .compare-tick { margin-top: 14px; }
body.hpr .owner-bar { margin: 0; border-radius: 0; padding: 12px 5%; }
body.hpr .nearby-list { display: grid; gap: 0; }
body.hpr [data-save][aria-pressed="true"] svg { fill: currentColor; }
body.hpr .evidence-footnote, body.hpr .disclosure { color: #56675c; }
/* Place pages */
body.hpr .side-links { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
body.hpr .side-links li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #edf1ef; }
body.hpr .side-links a { color: var(--teal); }
body.hpr .side-links a:hover { text-decoration: underline; }
body.hpr .side-links span { color: #56675c; font-variant-numeric: tabular-nums; }
body.hpr .filter-panel .filter-group + .filter-group { margin-top: 24px; }
body.hpr .place-faq { margin-top: 40px; }
body.hpr .place-extra { margin-top: 40px; }
body.hpr .place-extra h2 { font-size: 30px; margin: 30px 0 12px; }
/* Service landing */
body.hpr .service-landing-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
body.hpr .service-landing .search-panel { margin-top: 26px; width: 100%; }
body.hpr .service-landing h1 { margin: 6px 0 14px; }
body.hpr .service-landing .small { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }
body.hpr .service-banner { position: relative; border-radius: 8px; overflow: hidden; min-height: 320px; background: #efe4d2; }
body.hpr .service-banner img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
body.hpr .service-banner .photo-tag { position: absolute; left: 14px; bottom: 14px; }
@media (max-width: 850px) { body.hpr .service-landing-grid { grid-template-columns: 1fr; gap: 24px; } body.hpr .service-banner, body.hpr .service-banner img { min-height: 220px; } }
body.hpr .area-service-links .count { margin-left: auto; margin-right: 8px; color: #56675c; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Compare / saved */
body.hpr .compare-art { min-height: 160px; }
body.hpr .comparison .remove { display: inline-flex; }
body.hpr .compare-fact.missing strong { color: #56675c; font-weight: 400; font-style: italic; }
body.hpr .compare-phone { display: inline-flex; gap: 6px; align-items: center; margin: 10px 0; }
body.hpr .saved-grid .contact-panel { align-self: start; display: grid; gap: 14px; }
/* Request */
body.hpr .req-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
body.hpr .req-fieldset legend { font-weight: 600; font-size: 15px; margin-bottom: 4px; padding: 0; }
body.hpr .req-fieldset legend .mini { font-weight: 400; margin-left: 6px; }
body.hpr .select-recipient input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); flex: none; margin: 0; }
body.hpr .select-recipient input[disabled] + .avatar { opacity: .5; }
body.hpr .two-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { body.hpr .two-fields.three { grid-template-columns: 1fr; } }
body.hpr .consent-tick { align-items: flex-start; }
body.hpr .consent-tick input { margin-top: 3px; }
body.hpr .review-box button.text-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
body.hpr .request-card .form-actions .mini { align-self: center; }
body.hpr .request-card section h3 { font-size: 17px; margin-bottom: 10px; }
body.hpr .send-hint { color: #a33a2b; font-weight: 600; font-size: 14px; margin: 8px 0 0; }
/* Clear, WCAG-visible checkboxes everywhere on prototype pages (Safari draws native ones tiny and faint). */
body.hpr .tick input[type="checkbox"], body.hpr .select-recipient input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 2px solid #183b3b; border-radius: 4px;
  background: #fff; display: inline-grid; place-content: center; cursor: pointer; flex: none; }
body.hpr .tick input[type="checkbox"]::before, body.hpr .select-recipient input[type="checkbox"]::before {
  content: ""; width: 12px; height: 12px; background: #fff; transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
body.hpr .tick input[type="checkbox"]:checked, body.hpr .select-recipient input[type="checkbox"]:checked { background: #075e59; border-color: #075e59; }
body.hpr .tick input[type="checkbox"]:checked::before, body.hpr .select-recipient input[type="checkbox"]:checked::before { transform: scale(1); }
body.hpr .tick input[type="checkbox"]:focus-visible, body.hpr .select-recipient input[type="checkbox"]:focus-visible { outline: 3px solid #b77534; outline-offset: 2px; }
body.hpr .tick input[type="checkbox"][aria-invalid="true"] { border-color: #a33a2b; box-shadow: 0 0 0 1px #a33a2b; }
body.hpr .select-recipient input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
/* Business page: link-based billing toggle, two real plans, find-your-business */
.billing-toggle a{display:inline-flex;align-items:center;min-height:40px;padding:10px 18px;color:#5c6b60;border-radius:4px;font-size:13px;text-decoration:none}
.billing-toggle a.active{background:#fff;color:var(--teal);box-shadow:0 2px 5px #15372e12}
.pricing-grid.two-plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
@media (max-width:760px){.pricing-grid.two-plans{grid-template-columns:1fr}}
.find-strip{max-width:720px;margin:24px auto 0}
.find-strip .field{flex:1}
.find-results{max-width:720px;margin:16px auto 0;display:grid;gap:10px}
.find-list{margin:0}
.find-list li a strong{margin-right:6px}
#compare .cmp-wrap{max-width:900px;margin:24px auto 0}
#compare .billing-notes{max-width:900px;margin:14px auto 0;padding-left:1.2em;display:grid;gap:6px}
/* How it works (about) */
.how-policy{max-width:760px;margin:0 auto;padding:0 20px 64px}
/* Guides */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:32px 0}
.guide-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.guide-card h2{font-size:22px;margin:0}
.guide-card:hover h2,.guide-card:focus-visible h2{text-decoration:underline}
.guide-card .text-link{margin-top:auto}
.guide-body{margin-top:24px;max-width:70ch}
.request-card .notice-bar{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border:1px solid #efc9c1;border-radius:6px;margin:12px 0}
.request-card .notice-bar p{margin:0}
/* Pages still on the standard layout (legal, support, forms): prototype page frame */
body.hpr main.hpr-std.wrap{margin:0 auto;padding:48px 5% 80px;max-width:1200px;box-sizing:border-box;width:100%}
body.hpr main.hpr-std.wrap > h1,body.hpr main.hpr-std.wrap > .prose > h1,body.hpr main.hpr-std.wrap > article > h1{font-size:clamp(36px,5vw,52px);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px}
body.hpr main.hpr-std.wrap form{max-width:620px}
body.hpr main.hpr-std.wrap .prose{max-width:760px}
/* Long-form text (guides, policies, about): the prototype's preflight zeroes margins, so restore rhythm */
body.hpr .prose{line-height:1.65;font-size:16px}
body.hpr .prose > * + *{margin-top:.9em}
body.hpr .prose h2{font-size:clamp(24px,2.6vw,30px);line-height:1.15;margin-top:1.7em;margin-bottom:.1em}
body.hpr .prose h3{font-size:19px;margin-top:1.4em}
body.hpr .prose ul{list-style:disc;padding-left:1.3em}
body.hpr .prose ol{list-style:decimal;padding-left:1.3em}
body.hpr .prose li + li{margin-top:.45em}
body.hpr .prose a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
body.hpr .prose table{border-collapse:collapse;width:100%}
body.hpr .prose th,body.hpr .prose td{border-bottom:1px solid var(--border,#dfe6e2);padding:8px 10px;text-align:left;vertical-align:top}
body.hpr .how-policy{margin-top:8px}
/* Homeowner project page */
.inline-notice.ok{background:#eef6f1;border-color:#b9d8c6;color:#1e4d3a}
.inline-notice.error{background:#fff7f5;border-color:#efc9c1;color:#a33a2b}
.relink-panel{max-width:560px;display:grid;gap:14px}
.workspace-summary .scope-text{white-space:pre-wrap}
.sent-details{margin-top:12px}
.sent-details summary{cursor:pointer;font-weight:600;color:var(--teal);min-height:32px}
.withdraw-form{display:grid;gap:10px;margin-top:12px}
.progress-cards > article{display:flex;flex-direction:column;gap:10px}
.progress-cards .contact-heading .tag{margin-left:auto}
.delivery-state.bad{color:#a33a2b;font-weight:600}
.history summary{cursor:pointer;font-size:13px;color:var(--teal);min-height:32px}
.history .timeline{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;font-size:13px}
.history .timeline time{color:#56675c;margin-right:6px;font-variant-numeric:tabular-nums}
.history .timeline .good{color:#1e5b44}
.history .timeline .bad{color:#a33a2b}
.conversation + .conversation{margin-top:22px;padding-top:18px;border-top:1px solid #e3e9e5}
.conversation h3{font-size:17px;margin:0 0 8px}
.message-entry.biz{border-left:3px solid var(--teal);padding-left:12px}
.message-form{display:grid;gap:10px;margin-top:12px;max-width:640px}
.estimate-version + .estimate-version{margin-top:16px;padding-top:14px;border-top:1px dashed #d7dfda}
.estimate-version.earlier .estimate-total{font-size:20px;color:#56675c}
.clear-choice{margin:12px 0 0}
.link-note{margin-top:18px}
.not-found{max-width:980px}.not-found .search-strip{margin:28px 0 18px}
/* Owner workspace frame */
.owner-rail .tag{font-size:12px}
.rail-signout{display:inline-flex;align-items:center;gap:8px;font-size:14px;background:none;border:0;padding:6px 0;cursor:pointer;min-height:36px}
body.hpr .owner-work.hpr-std h1,body.hpr .owner-work h1{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;color:var(--ink);font-size:clamp(30px,3vw,46px);line-height:1.16;margin:24px 0 12px}
body.hpr .owner-body > h1:first-child,body.hpr .owner-body h1.owner-page-title{font-size:clamp(24px,2.2vw,32px);margin:0 0 8px}
body.hpr .owner-body{background:#fff;border:1px solid #d9e4e2;border-radius:10px;padding:clamp(18px,2.4vw,32px)}
body.hpr .owner-body .ow{display:block}
body.hpr .owner-body .ow-side{display:none}
body.hpr .owner-body fieldset#svc-f,body.hpr .owner-body fieldset.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px}
body.hpr .owner-body fieldset#svc-f legend{grid-column:1/-1}
body.hpr .hpr-std input[type="checkbox"]:not(.choice input){min-width:22px;max-width:22px}
@media (max-width:860px){.owner-app{grid-template-columns:1fr}.owner-rail{border-right:0;border-bottom:1px solid #dbe4e3;padding:20px}.owner-rail nav{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:6px 0}}
body.hpr .hpr-std a.btn{color:#fff}
body.hpr .hpr-std a.btn.secondary,body.hpr .hpr-std a.btn.ghost{color:var(--ink)}
body.hpr .owner-body h2.owner-page-title{font-size:clamp(24px,2.2vw,32px);margin:4px 0 8px}
body.hpr .owner-body > .crumbs,body.hpr .owner-body > p.small:first-child{margin-top:0}
.results-label{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#56675c;margin:6px 0 10px}
.results-label span{text-transform:none;letter-spacing:0;font-weight:400}
body.hpr .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Links inside running text are underlined, not colour-only (WCAG 1.4.1) */
body.hpr .hpr-std p a:not(.btn):not(.button),body.hpr .hpr-std .small a:not(.btn),body.hpr .hpr-std .muted a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.results-layout > *{min-width:0}
body.hpr .side-links li a{overflow-wrap:anywhere}
body.hpr .owner-body .split > *{min-width:0}
.filter-panel > *{min-width:0}
body.hpr .owner-body > nav.small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
/* Phone: form action rows stack, buttons full width and on one line */
@media (max-width:560px){
  .form-actions{flex-direction:column-reverse;align-items:stretch;gap:12px}
  .form-actions .button{width:100%;justify-content:center;white-space:nowrap}
  .form-actions .mini{text-align:center}
}
/* ===== Result cards v2: clearer separation and per-business definition ===== */
.results-layout > div,.results-layout > div > section{min-width:0}
body.hpr .results-layout{background:#f7f3ec}
.pro-card.card-v2{border:1px solid #cfdcd6;border-radius:10px;box-shadow:0 1px 2px #15372e14,0 4px 14px #15372e0d;margin-bottom:18px;background:#fff}
.pro-card.card-v2.free-result{display:block;grid-template-columns:none !important}
.card-v2 .pro-content{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.card-v2 .card-head{display:flex;align-items:flex-start;gap:14px}
.card-v2 .card-head .avatar{flex:none;width:48px;height:48px;font-size:18px}
.card-v2 .card-title{flex:1;min-width:0}
.card-v2 .card-title h3{font-size:20px;line-height:1.25;margin:0;letter-spacing:-.01em}
.card-v2 .card-title h3 a{color:var(--ink);text-decoration:none}
.card-v2 .card-title h3 a:hover{text-decoration:underline}
.card-v2 .card-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 0 0;font-size:14px;color:#52635a}
.card-v2 .card-where svg{flex:none}
.card-v2 .owner-flag{display:inline-flex;align-items:center;gap:4px;color:#2f6546;font-weight:600}
.card-v2 .card-head .save-icon{position:static;flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid #cfdcd6;border-radius:8px;background:#fff}
.card-v2 .card-services{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.card-v2 .card-services span{font-size:13px;padding:4px 10px;border-radius:999px;background:#f7f3ec;color:#33463f;border:1px solid #ebe1d1}
.card-v2 .card-services span.match{background:#f5e8d4;border-color:#e0c49b;color:#6e4a12;font-weight:600}
.card-v2 .card-services .more{background:none;border-color:transparent;color:#52635a}
.card-v2 .fact-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:1px solid #e1e9e5;border-radius:8px;overflow:hidden}
.card-v2 .fact-strip > div{padding:10px 12px;background:#fcfaf6}
.card-v2 .fact-strip > div + div{border-left:1px solid #e1e9e5}
.card-v2 .fact-strip dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#52635a;margin:0 0 3px}
.card-v2 .fact-strip dd{margin:0;font-size:14px;font-weight:600;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.card-v2 .fact-strip .big{font-size:17px}
.card-v2 .fact-strip .sub{font-weight:400;font-size:13px;color:#52635a}
.card-v2 .fact-strip .good{background:#eef6f1}
.card-v2 .fact-strip .good dd{color:#1f5a3c}
.card-v2 .card-summary{margin:0;font-size:15px;line-height:1.55;color:#33463f}
.card-v2 .card-extras{margin:0;font-size:14px;color:#2f6546;font-weight:500}
.card-v2 .card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.card-v2 .card-actions .button{min-height:44px;padding:10px 18px}
.card-v2 .card-compare{align-self:flex-start;font-size:14px}
.card-v2 .service-card-art{min-height:160px}
@media (max-width:560px){
  .pro-card.card-v2.upgraded-result{display:block}
  .card-v2 .pro-photo{height:150px}
  .card-v2 .pro-photo img,.card-v2 .service-card-art{height:150px;min-height:0}
  .card-v2 .pro-content{padding:16px}
  .card-v2 .card-title h3{font-size:19px}
  .card-v2 .fact-strip > div{padding:9px 8px}
  .card-v2 .fact-strip dt{font-size:10px}
  .card-v2 .card-actions .button{flex:1 1 auto;justify-content:center}
}

/* ===== Warm sand accent (Option B): section labels and highlights ===== */
:where(body.hpr) .eyebrow,body.hpr .hpr-std .eyebrow{color:#8a5a1c}
body.hpr .soft-callout,body.hpr .inline-notice:not(.ok):not(.error){background:#faf4ea;border-color:#e0c49b}
body.hpr .soft-callout svg{color:#8a5a1c}
body.hpr .demo-chip{border-color:#e0c49b;color:#6e4a12}

/* Header stays at the top while scrolling. --hpr-hdr is its live height (set in Header.astro). */
body.hpr .header{position:sticky;top:0;z-index:70}
html:has(body.hpr){scroll-padding-top:calc(var(--hpr-hdr,94px) + 12px)}
body.hpr .contact-panel,body.hpr .contact-card,:where(body.hpr .hpr-std) aside .card{top:calc(var(--hpr-hdr,94px) + 16px)}
body.hpr .listing-contact,body.hpr .preview-bar{top:var(--hpr-hdr,94px)}
body.hpr aside[aria-labelledby="pv-h"]{top:calc(var(--hpr-hdr,94px) + 12px) !important}
@media (min-width:900px){body.hpr .fu-hero-cta{top:calc(var(--hpr-hdr,94px) + 16px)}}
/* Back / Home row under the header on every page except home. */
body.hpr .page-nav{display:flex;align-items:center;gap:22px;padding:4px calc(max(0px,(100% - 1600px) / 2) + min(5%,80px));background:#fff;border-bottom:1px solid var(--border);font-size:14px;font-weight:600}
body.hpr .page-nav ~ main.hpr-std.wrap{padding-top:32px}
body.hpr .page-nav a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--teal);text-decoration:none}
body.hpr .page-nav a:hover{text-decoration:underline;text-underline-offset:3px}
body.hpr .page-nav a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
body.hpr .page-nav .backlink{margin:0;padding:0;font-size:inherit;font-weight:inherit}
body.hpr .page-nav ~ main#main:not(.hpr-std){padding-top:0}

/* HPR maps (components/hpr/AreaMap.astro). Kept here, not in the component, so hoarding pages that
   import shared HPR components get no extra CSS. */
body.hpr .area-map { margin: 16px 0; }
body.hpr .area-map-canvas { width: 100%; border: 1px solid var(--line, #dfe5e3); border-radius: 10px; overflow: hidden; background: #eef2f1; }
body.hpr .area-map figcaption { margin-top: 6px; color: var(--muted, #5b6663); }
body.hpr .area-map-failed { display: none; }
body.hpr .area-map .maplibregl-popup-content a { color: #075e59; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Phones: the businesses come first on town, trade and state pages; the "other services" and
   "nearby" link lists follow them instead of pushing the first listing several screens down. */
@media (max-width: 850px) { body.hpr .results-layout > .filter-panel { order: 2; } }
/* Phones: keep the feedback button clear of the sticky call / quote bar on company profiles. */
@media (max-width: 720px) { body.hpr:has(.listing-mobile-cta) .fbw-pill { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* Phones: a shorter results map so the first business shows sooner. */
@media (max-width: 720px) { body.hpr .results-layout .area-map-canvas { height: 200px !important; } }

/* Home hero: common-question shortcuts under the search box (2026-10 Q&A pass). */
.quick-qs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: .9rem; }
.quick-qs > span { color: var(--muted); font-weight: 600; margin-right: 2px; }
.quick-qs a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 24px; color: var(--ink); text-decoration: none; background: #fff; }
.quick-qs a:hover, .quick-qs a:focus-visible { border-color: var(--teal); color: var(--teal); }

/* Quick-answers box on Florida town × trade pages (src/components/hpr/QuickAnswers.astro). */
.quick-answers { border: 1px solid var(--line, #d9e2e0); border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; background: var(--card, #fff); }
  .quick-answers h2 { font-size: 1.05rem; margin: 0 0 10px; }
  .quick-answers dl { margin: 0; }
  .qa-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line, #e6ecea); }
  .qa-row:first-child { border-top: 0; }
  .qa-more .qa-row:first-child { border-top: 1px solid var(--line, #e6ecea); }
  .qa-row dt { font-weight: 600; font-size: .9rem; }
  .qa-row dd { margin: 0; font-size: .95rem; line-height: 1.45; }
  .qa-row .text-link { white-space: nowrap; }
  .qa-more { margin-top: 2px; }
  .qa-more > summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: 8px 0; min-height: 24px; }
  .qa-src { margin: 10px 0 0; font-size: .8rem; color: var(--muted, #4f5d5a); }
  /* Desktop shows everything (the details stays open and its summary is hidden). */
  @media (min-width: 851px) {
    .qa-more > summary { display: none; }
  }
  @media (max-width: 560px) {
    .qa-row { grid-template-columns: 1fr; }
  }

/* "Your area" type-ahead (public/hpr/place-ahead.js). */
.pa-list { position: absolute; left: 0; right: 0; min-width: min(280px, calc(100vw - 32px)); top: 100%; z-index: 60; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 40, 36, .12); max-height: 320px; overflow-y: auto; text-align: left; }
.pa-list[hidden] { display: none; }
.pa-list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 8px; cursor: pointer; min-height: 24px; }
.pa-list li[aria-selected="true"], .pa-list li:hover { background: #e8f3f1; }
.pa-list .pa-main { font-weight: 600; color: var(--ink); font-size: .95rem; }
.pa-list .pa-sub { color: var(--muted); font-size: .8rem; }
.county-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.county-towns a { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 24px; text-decoration: none; color: var(--ink); background: #fff; }
.county-towns a span { color: var(--muted); font-size: .8rem; }
.county-towns a:hover, .county-towns a:focus-visible { border-color: var(--teal); }
.pa-list.pa-flip { left: auto; right: 0; }
.filter-group .radius-pick { display: block; font-weight: 600; margin: 12px 0 6px; font-size: .9rem; }
.search-wider { font-size: .9rem; margin: 0 0 12px; color: var(--muted); } .search-wider a { color: var(--teal); font-weight: 600; }

/* Search pickers (public/hpr/hpr-pick.js): chips for chosen towns / categories, grouped suggestions. */
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.pk-chips[hidden] { display: none; }
.pk-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8f3f1; color: var(--ink); border: 1px solid #b9dbd5; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.pk-x { border: 0; background: transparent; color: var(--ink); font-size: 1.05rem; line-height: 1; min-width: 24px; min-height: 24px; border-radius: 999px; cursor: pointer; padding: 0; }
.pk-x:hover, .pk-x:focus-visible { background: #cfe7e2; }
.pa-list .pk-group { cursor: default; padding: 8px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none !important; min-height: 0; }
.pa-list li.pk-dim .pa-main { color: var(--muted); }
.pk-input { width: 100%; }
.service-catalog-grid .svc-match { display: inline-block; align-self: flex-start; margin-bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #075e59; background: #e8f3f1; border-radius: 999px; padding: 3px 9px; }

/* Town + trade "by the numbers" (TradeSnapshot.astro) */
.trade-snap { border: 1px solid var(--line, #d9e2e0); border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; background: var(--card, #fff); }
  .trade-snap h2 { font-size: 1.05rem; margin: 0 0 10px; }
  .trade-snap dl { margin: 0; }
  .trade-snap dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line, #e6ecea); }
  .trade-snap dl > div:first-child { border-top: 0; }
  .trade-snap dt { font-weight: 600; font-size: .9rem; }
  .trade-snap dd { margin: 0; font-size: .95rem; line-height: 1.45; }
  .trade-snap .snap-note { color: var(--muted, #4f5d5a); }
  .trade-snap .snap-foot { margin: 10px 0 0; font-size: .8rem; color: var(--muted, #4f5d5a); }
@media (max-width: 640px) { .trade-snap dl > div { grid-template-columns: 1fr; } }