/* ==========================================================================
   Responsive verification pages (loaded after
   hail-map-verify.css). Changes only the header and the sidebar; the map, its
   colors and controls are exactly the live page's.
   900px and wider: header + full-height left sidebar with tabs across its top.
   Under 900px (map would get too tight): header, bottom tab bar, and the
   panels as a bottom sheet (see hail-report-verify-sheet.js).
   The template keeps the live page's inline styles, so overrides use !important.
   ========================================================================== */
:root {
  --hrv2-header-h: 60px;
  --hrv2-panel-w: 400px;
  --hrv2-tabs-h: 58px;
  --hrv2-blue: #1277e1;
  --hrv2-blue-dark: #0b4f9c;
  --hrv2-blue-tint: #d6e7fb;
  --hrv2-ink: #202124;
  --hrv2-ink-2: #3c4043;
  --hrv2-muted: #5f6368;
  --hrv2-line: #e3e6ea;
  --hrv2-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
body.hrv2 { color: var(--hrv2-ink); -webkit-font-smoothing: antialiased; }
.hrv2 button { font-family: inherit; }

/* ---------- header (all sizes) ---------- */
.hrv2-header {
  position: absolute; top: 0; left: 0; right: 0; height: var(--hrv2-header-h); z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 0 20px 0 12px;
  background: #fff; border-bottom: 1px solid var(--hrv2-line); box-shadow: 0 1px 3px rgba(60,64,67,.08);
}
.hrv2-logo:focus-visible, .hrv2-links a:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-logo { display: flex; align-items: center; height: 38px; border-radius: 6px; }
.hrv2-logo img { display: block; height: 22px; width: auto; }
.hrv2-title { padding-left: 14px; border-left: 1px solid #dadce0; color: var(--hrv2-muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hrv2-links { margin-left: auto; display: flex; gap: 2px; }
.hrv2-links a { padding: 9px 14px; border-radius: 999px; color: var(--hrv2-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.hrv2-links a:hover { background: #f1f3f4; color: var(--hrv2-ink); }

/* the floating map ✕ is replaced by the header's Back link */
.hrv2 :is(#hrv-return, #hmv-return) { display: none !important; }

/* ---------- desktop: tabs across the top of the left panel ---------- */
.hrv2 .verify-tool-rail {
  top: var(--hrv2-header-h) !important; left: 0 !important; bottom: auto !important;
  width: var(--hrv2-panel-w) !important; height: var(--hrv2-tabs-h) !important; z-index: 36 !important;
  flex-direction: row !important; align-items: stretch !important; justify-content: space-between !important;
  gap: 0 !important; padding: 0 8px !important;
  background: #fff !important; border-right: 1px solid var(--hrv2-line) !important; border-bottom: 1px solid var(--hrv2-line);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hrv2 .verify-tool-rail > div { display: none !important; } /* old logo, divider, spacer */
.hrv2 .verify-tool-rail > .hmv-tool {
  flex: 1 1 0; width: auto !important; padding: 8px 0 7px !important; gap: 3px; border-radius: 0;
  background: none !important; color: var(--hrv2-muted);
}
.hrv2 .verify-tool-rail > .hmv-tool:hover { color: var(--hrv2-ink); background: #f8f9fa !important; }
.hrv2 .verify-tool-rail > .hmv-tool:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: -2px; }
.hrv2 .verify-tool-rail > .hmv-tool svg { width: 20px; height: 20px; }
.hrv2 .verify-tool-rail > .hmv-tool span { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
/* the selected tab is marked "is-current" by the nav script (Search and Report share one page tool) */
.hrv2 .verify-tool-rail > .hmv-tool.is-current { color: var(--hrv2-blue); }
.hrv2 .verify-tool-rail > .hmv-tool.is-current span { font-weight: 700 !important; }
.hrv2 .verify-tool-rail > .hmv-tool.is-current::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--hrv2-blue);
}
.hrv2 :is(#hrv-profile-dot, #hmv-profile-dot) { top: 7px !important; right: calc(50% - 17px) !important; box-shadow: 0 0 0 2px #fff !important; }

.hrv2 .verify-sidebar {
  top: calc(var(--hrv2-header-h) + var(--hrv2-tabs-h)); left: 0; width: var(--hrv2-panel-w);
  background: #fff; border-right: 1px solid var(--hrv2-line); box-shadow: 2px 0 12px rgba(60,64,67,.12);
}
.hrv2 .verify-sidebar.hmv-closed { transform: translateX(calc(-100% - 2px)); }
.hrv2 .hrv2-app:has(:is(#hrv-sidebar, #hmv-sidebar).hmv-closed) .verify-tool-rail { transform: translateX(calc(-100% - 2px)); }
.hrv2-handle { display: none; }

/* "Show panel" button when the panel is collapsed */
.hrv2 .verify-open-tab {
  top: calc(var(--hrv2-header-h) + 16px); left: 16px; transform: none; width: auto; height: 40px; gap: 6px;
  padding: 0 16px 0 10px; border-radius: 999px; background: #fff; box-shadow: var(--hrv2-shadow); animation: none;
  color: var(--hrv2-ink-2); font-size: 14px; font-weight: 600;
}
.hrv2 .verify-open-tab::after { content: "Show panel"; }
.hrv2 .verify-open-tab svg path { stroke: var(--hrv2-ink-2); }

/* panel details */
.hrv2 .hmv-panel > div:first-child { background: #fff !important; }
.hrv2 .hailscroll { background: #f8f9fa !important; }
/* Guide (hail sizes): white like the Search and Profile sections; the intro is an info note */
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) .hailscroll { background: #fff !important; }
.hrv2-guide-note {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid var(--hrv2-line); border-radius: 13px; background: #fff;
}
.hrv2-guide-note-icon {
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--hrv2-blue-tint); color: var(--hrv2-blue);
}
.hrv2-guide-note strong { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--hrv2-ink); }
.hrv2-guide-note p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--hrv2-muted); }
/* the search profile choices sit on white, like the Search section, lined up with the header text */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hailscroll { background: #fff !important; padding-left: 40px !important; padding-right: 40px !important; }
/* search profile questions (hail-report-verify-profile.js): both start closed and open one at a time;
   arrows point right when closed and down when open */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile).hrv2-q-closed :is(:is(#hrv-role-opts, #hmv-role-opts), :is(#hrv-area-opts, #hmv-area-opts)) { display: none !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile).hrv2-q-closed :is(:is(#hrv-step1-head, #hmv-step1-head), :is(#hrv-step2-head, #hmv-step2-head)) { border-color: #e3e6ea !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile).hrv2-q-closed :is(:is(#hrv-step1-sub, #hmv-step1-sub), :is(#hrv-step2-sub, #hmv-step2-sub)):not(:empty) { display: block !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(:is(#hrv-step1-chev, #hmv-step1-chev), :is(#hrv-step2-chev, #hmv-step2-chev)) { transform: rotate(-90deg) !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] :is(#hrv-step1-chev, #hmv-step1-chev),
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] :is(#hrv-step2-chev, #hmv-step2-chev) { transform: none !important; }
/* an open question is one white card with the blue outline: the question on top with "Pick one"
   under it, then its answers as white tiles inside the same card with a round single-choice marker;
   closed questions keep their field look */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] div:has(> :is(#hrv-step1-head, #hmv-step1-head)),
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] div:has(> :is(#hrv-step2-head, #hmv-step2-head)) { border: 1.5px solid var(--hrv2-blue); border-radius: 14px; overflow: hidden; background: #fff; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] :is(#hrv-step1-head, #hmv-step1-head),
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] :is(#hrv-step2-head, #hmv-step2-head) { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] :is(#hrv-step1-head, #hmv-step1-head) > span > span:last-child::after,
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] :is(#hrv-step2-head, #hmv-step2-head) > span > span:last-child::after { content: "Pick one"; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--hrv2-muted); }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(#hrv-role-opts, #hmv-role-opts, #hrv-area-opts, #hmv-area-opts) { margin-top: 0 !important; gap: 7px !important; padding: 0 24px 16px; } /* tiles sit 24px in from the card's sides */
/* the answers scroll inside the card (the profile script sizes the list to the panel) while the question above
   them stays put; reaching the end of the list doesn't drag the panel along */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(#hrv-role-opts, #hmv-role-opts, #hrv-area-opts, #hmv-area-opts) { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(#hrv-role-opts, #hmv-role-opts, #hrv-area-opts, #hmv-area-opts)::-webkit-scrollbar { display: none; } /* the site's small handle instead (scrollbar script) */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(#hrv-role-opts, #hmv-role-opts, #hrv-area-opts, #hmv-area-opts) > * { flex-shrink: 0; }
/* a fine line under the open question only while its answers are scrolled under it (a shadow, so nothing shifts) */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] :is(#hrv-step1-head, #hmv-step1-head),
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] :is(#hrv-step2-head, #hmv-step2-head) { position: relative; z-index: 1; transition: box-shadow .15s; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="1"] .hrv2-list-scrolled > :is(#hrv-step1-head, #hmv-step1-head),
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile)[data-q="2"] .hrv2-list-scrolled > :is(#hrv-step2-head, #hmv-step2-head) { box-shadow: 0 1px 0 var(--hrv2-line); }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(#hrv-role-opts, #hmv-role-opts, #hrv-area-opts, #hmv-area-opts) > span { margin: 0 !important; padding: 8px 2px 0 !important; } /* group headings line up with the tiles */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hmv-opt { border-radius: 10px !important; padding: 12px 14px !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hmv-opt-box { width: 18px; height: 18px; border-radius: 50%; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hmv-opt.hmv-sel .hmv-opt-box { background: #fff; border: 5.5px solid var(--hrv2-blue); }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hmv-opt.hmv-sel .hmv-opt-box svg { display: none; }
/* phones/tablets: the profile sheet header matches the Search sheet ("Search an address") */
@media (max-width: 899px) {
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child { padding: 56px 40px 14px !important; border-bottom: 0 !important; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child > div:first-child { align-items: center !important; }
  .hrv2 .hrv2-profile-title { font-size: 20px !important; line-height: 1.2; letter-spacing: -.01em !important; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hailscroll { padding: 6px 40px 40px !important; } /* same 40px bottom as the Search sheet */
}
.hrv2 .hmv-zip-input { border-color: #dadce0 !important; }
.hrv2 .hmv-zip-input:focus { border-color: var(--hrv2-blue) !important; box-shadow: 0 0 0 3px rgba(18,119,225,.15); }
.hrv2 .hmv-opt { border-color: #e3e6ea; }
.hrv2 .hrv2-footer { background: #fff !important; border-top-color: var(--hrv2-line) !important; }
.hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) { border-color: #dadce0 !important; background: #fff !important; border-radius: 50% !important; }
.hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)):hover { background: #f1f3f4 !important; }

/* ==========================================================================
   Narrow screens (<900px): bottom tab bar + bottom sheet
   ========================================================================== */
@media (max-width: 899px) {
  :root { --hrv2-header-h: 56px; --hrv2-nav-h: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .hrv2-header { padding: 0 12px 0 4px; gap: 4px; }
  .hrv2-links { display: none; }
  .hrv2-logo img { height: 20px; }
  /* logo | Hail Report by Address — the same divider + title as the desktop sidebar's top row */
  .hrv2-header .hrv2-title { min-width: 0; margin-left: 8px; padding-left: 12px; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }

  /* bottom tab bar */
  .hrv2 .verify-tool-rail {
    top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: auto !important; height: var(--hrv2-nav-h) !important; z-index: 45 !important;
    justify-content: space-around !important; align-items: stretch !important;
    padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
    border-right: 0 !important; border-bottom: 0; border-top: 1px solid var(--hrv2-line) !important;
    box-shadow: 0 -1px 3px rgba(60,64,67,.06); transform: none !important;
  }
  /* Facebook-style bar: grey icons, the selected one turns blue with a blue line along the top */
  .hrv2 .verify-tool-rail > .hmv-tool {
    position: relative; max-width: 110px; height: 100%; padding: 9px 0 0 !important; gap: 4px; justify-content: flex-start;
    color: #65676b; transition: color .15s;
  }
  .hrv2 .verify-tool-rail > .hmv-tool:hover { background: none !important; color: #3c4043; }
  .hrv2 .verify-tool-rail > .hmv-tool svg { width: 24px; height: 24px; }
  .hrv2 .verify-tool-rail > .hmv-tool span { font-size: 11.5px !important; font-weight: 600 !important; }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current { color: var(--hrv2-blue); }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current svg path, .hrv2 .verify-tool-rail > .hmv-tool.is-current svg circle { stroke-width: 2.4; }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current::after {
    top: -1px; bottom: auto; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px;
  }
  .hrv2 :is(#hrv-profile-dot, #hmv-profile-dot) { top: 6px !important; right: calc(50% - 16px) !important; }
  .hrv2 .verify-open-tab { display: none !important; }

  /* bottom sheet */
  .hrv2 .verify-sidebar {
    top: auto; left: 0 !important; right: 0; bottom: var(--hrv2-nav-h); width: auto !important; height: 52vh;
    max-height: calc(100% - var(--hrv2-header-h) - var(--hrv2-nav-h));
    z-index: 40; border: 0; border-radius: 16px 16px 0 0; overflow: hidden;
    box-shadow: 0 -2px 16px rgba(60,64,67,.22);
    transform: translateY(0);
    transition: height .28s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .hrv2 .verify-sidebar.hmv-closed { transform: translateY(calc(100% + var(--hrv2-nav-h) + 24px)); }
  .hrv2-handle {
    display: flex; position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 6;
    align-items: center; justify-content: center; cursor: grab; touch-action: none;
  }
  .hrv2-handle span { width: 36px; height: 4px; border-radius: 999px; background: #dadce0; }
  /* Profile: the title row with its ✕ stays at the top of the sheet while the questions scroll under it (an opened
     question 2 is scrolled up to just below it, which would otherwise take the ✕ out of view); a fine line under it
     only while the panel is scrolled, like the other tabs' headers */
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child { position: sticky !important; top: 0; z-index: 2; background: #fff !important; border-bottom: 1px solid transparent !important; transition: border-color .15s; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile).hrv2-scrolled > div:first-child { border-bottom-color: var(--hrv2-line) !important; }
  .hrv2-handle:focus-visible { outline: none; }
  .hrv2-handle:focus-visible span { background: var(--hrv2-blue); }
  .hrv2 .hmv-panel { bottom: 0; }
  .hrv2 .hmv-panel > div:first-child { padding-top: 56px !important; touch-action: none; } /* twice the room above each sheet's heading */
  .hrv2 .hmv-panel > div:first-child input { touch-action: manipulation; }
  .hrv2 .hrv2-footer { display: none !important; } /* the logo now lives in the header */

  /* map controls keep their look; they only sit above the tab bar instead of behind it */
  .hrv2 .maplibregl-ctrl-bottom-right { bottom: var(--hrv2-nav-h) !important; }
}

/* phones: header is back + logo | title (the page links stay hidden) */
@media (max-width: 699px) {
  .hrv2-links { display: none; }
}

/* ---------- panel controls in the HailGeeks blue (the live CSS uses indigo) ---------- */
.hrv2 .hmv-opt.hmv-sel, .hrv2 .hmv-opt.hmv-sel:hover { border-color: var(--hrv2-blue); box-shadow: 0 2px 10px rgba(18,119,225,.14); }
.hrv2 .hmv-opt.hmv-sel .hmv-opt-label { color: var(--hrv2-blue); }
.hrv2 .hmv-opt.hmv-sel .hmv-opt-box { border-color: var(--hrv2-blue); background: var(--hrv2-blue); }
.hrv2 .hmv-opt-label { color: var(--hrv2-ink-2); }
/* profile options: the border rule above hides the live hover, so give mouse users a clear light-blue hover
   (only on devices that can hover, so it never sticks after a tap) and keyboard users a focus ring */
.hrv2 .hmv-opt { transition: border-color .14s, background-color .14s, box-shadow .14s; }
.hrv2 .hmv-opt-label, .hrv2 .hmv-opt-box { transition: color .14s, border-color .14s; }
@media (hover: hover) {
  .hrv2 .hmv-opt:not(.hmv-sel):hover { border-color: #a9cbf2; background: #f5f9ff; }
  .hrv2 .hmv-opt:not(.hmv-sel):hover .hmv-opt-label { color: var(--hrv2-blue-dark); }
  .hrv2 .hmv-opt:not(.hmv-sel):hover .hmv-opt-box { border-color: #8fb9ec; }
  .hrv2 .hmv-opt.hmv-sel:hover { box-shadow: 0 4px 14px rgba(18,119,225,.22); }
}
.hrv2 .hmv-opt:focus-visible { outline: none; border-color: var(--hrv2-blue); box-shadow: 0 0 0 3px rgba(18,119,225,.18); }
.hrv2 .hmv-pro-card { border-color: var(--hrv2-line); }
.hrv2 .hmv-pro-card.hmv-sel { border-color: var(--hrv2-blue); box-shadow: 0 8px 24px rgba(18,119,225,.2); }
.hrv2 .hmv-primary:hover, .hrv2 .hmv-more-zips:hover { background: #0f62bd !important; border-color: #0f62bd !important; }
.hrv2 .hmv-remote-link:hover { color: #0f62bd !important; }
.hrv2 .hmv-back-btn:hover { background: #f1f3f4 !important; }
.hrv2 .hailscroll::-webkit-scrollbar-thumb { background: #cfd4da; }
/* sidebar panels: no default scrollbar, a small fixed-size handle instead (hail-report-verify-scrollbar.js) */
.hrv2 :is(#hrv-sidebar, #hmv-sidebar) .hailscroll { scrollbar-width: none; overscroll-behavior: contain; }
.hrv2 :is(#hrv-sidebar, #hmv-sidebar) .hailscroll::-webkit-scrollbar { display: none; }
.hrv2-scroll-thumb {
  position: absolute; z-index: 5; width: 5px; height: 36px; border-radius: 999px;
  background: #cfd4da; cursor: grab; touch-action: none; transition: background-color .15s;
}
.hrv2-scroll-thumb:hover, .hrv2-scroll-thumb.is-dragging { background: #9aa0a6; }
.hrv2-scroll-thumb.is-dragging { cursor: grabbing; }
.hrv2-scroll-thumb[hidden] { display: none; }
.hrv2 body, body.hrv2 { font-family: 'Public Sans', system-ui, sans-serif; }

/* ==========================================================================
   Map pill (top-right of the map): "Join as a Pro" by default, "N pros found
   nearby" once a report finds pros; + the "Join as a Pro" pop-up
   ========================================================================== */
.hrv2-pros-badge {
  position: absolute; top: calc(var(--hrv2-header-h) + 10px); right: 10px; z-index: 34;
  display: flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 0;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18);
  animation: hrv2-badge-in .3s ease-out both;
}
.hrv2-pros-badge[hidden] { display: none; }
/* light "look here" blink, three times when it appears */
.hrv2-pros-badge.is-new { animation: hrv2-badge-in .3s ease-out both, hrv2-badge-blink 1s ease-in-out .35s 3; }
.hrv2-pros-badge-main {
  min-width: 0; display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 12px 0 10px;
  border: 0; border-radius: 999px; background: none; color: var(--hrv2-ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.hrv2-pros-badge-main:hover { background: #f1f3f4; }
.hrv2-pros-badge-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hrv2-pros-badge-text strong { color: var(--hrv2-ink); font-weight: 700; }
.hrv2-pros-badge-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
/* "Join as a Pro": brand-blue dot (green stays for live pros found) */
.hrv2-pros-badge[data-mode="join"] .hrv2-pros-badge-dot { background: var(--hrv2-blue); box-shadow: 0 0 0 2px rgba(18,119,225,.18); }
.hrv2-pros-join {
  flex: none; height: 25px; margin-right: 3px; padding: 0 11px; border: 0; border-radius: 999px;
  background: var(--hrv2-blue); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hrv2-pros-join:hover { background: #0f62bd; }
.hrv2-pros-badge-main:focus-visible, .hrv2-pros-join:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
@keyframes hrv2-badge-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes hrv2-badge-blink {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18), 0 0 0 0 rgba(18,119,225,0); }
  50% { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18), 0 0 0 6px rgba(18,119,225,.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hrv2-pros-badge, .hrv2-pros-badge.is-new { animation: none; }
}

/* phones: hide the map pill while the "how it works" card is open (it would peek out behind the card) */
@media (max-width: 699px) {
  .hrv2 .hrv2-app:has(.hrv2-welcome:not([hidden])) .hrv2-pros-badge { visibility: hidden; }
}

/* ==========================================================================
   Search vs Report views of the search panel (data-view set by the nav script)
   ========================================================================== */
/* Report: no address form — just the confirm step or the report */
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > div:nth-child(2) { display: none !important; }
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-idle, #hmv-idle) { display: none !important; }
/* Search: just the form (the current report waits under Report) */
.hrv2 .hrv2-app[data-view="search"] :is(#hrv-searching, #hmv-searching),
.hrv2 .hrv2-app[data-view="search"] :is(#hrv-confirm, #hmv-confirm),
.hrv2 .hrv2-app[data-view="search"] :is(#hrv-result, #hmv-result) { display: none !important; }

.hrv2-report-empty, .hrv2-search-note { display: none; }
.hrv2 .hrv2-app[data-view="report"]:has(:is(#hrv-searching, #hmv-searching)[hidden]):has(:is(#hrv-confirm, #hmv-confirm)[hidden]):has(:is(#hrv-result, #hmv-result)[hidden]):has(:is(#hrv-gate, #hmv-gate)[hidden]) .hrv2-report-empty {
  display: flex;
}
.hrv2-report-empty { flex-direction: column; align-items: center; padding: 46px 26px; text-align: center; }
.hrv2-report-empty-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--hrv2-blue-tint); color: var(--hrv2-blue); }
.hrv2-report-empty strong { margin-top: 16px; font-size: 16px; font-weight: 800; color: var(--hrv2-ink); }
.hrv2-report-empty p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hrv2-muted); }
.hrv2-report-empty-btn {
  margin-top: 18px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--hrv2-blue); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.hrv2-report-empty-btn:hover { background: #0f62bd; }
.hrv2 .hrv2-app[data-view="search"]:has(:is(#hrv-result, #hmv-result):not([hidden])) .hrv2-search-note,
.hrv2 .hrv2-app[data-view="search"]:has(:is(#hrv-confirm, #hmv-confirm):not([hidden])) .hrv2-search-note { display: flex; }
.hrv2-search-note {
  align-items: center; justify-content: space-between; gap: 12px; margin: 16px 18px 0; padding: 12px 14px;
  border-radius: 12px; background: var(--hrv2-blue-tint); font-size: 13.5px; color: #174a85;
}
.hrv2-search-note button { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--hrv2-blue); font-size: 13px; font-weight: 700; cursor: pointer; }
.hrv2-report-empty-btn:focus-visible, .hrv2-search-note button:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }

/* ==========================================================================
   Address form (all screen sizes): soft grey filled fields with no borders
   (white with a blue ring while typing) — Street / City + State / ZIP — and
   the Search button as the last row, full width.
   ========================================================================== */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > div:nth-child(2) { margin-top: 16px !important; gap: 10px !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > div:nth-child(2) > div { gap: 10px !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hmv-zip-input {
  height: 52px !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important;
  font-size: 15px !important; font-weight: 500 !important; color: var(--hrv2-ink) !important;
  background: #f1f3f4 !important; box-shadow: none !important; transition: background-color .15s, box-shadow .15s;
}
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hmv-zip-input::placeholder { color: #80868b; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 1; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hmv-zip-input:hover { background: #ebedef !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hmv-zip-input:focus { background: #fff !important; box-shadow: inset 0 0 0 2px var(--hrv2-blue) !important; }
/* last row: ZIP on its own line, the Search button full width below */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) div:has(> :is(#hrv-zip, #hmv-zip-input)) { flex-wrap: wrap; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-zip, #hmv-zip-input) { flex: 1 1 100% !important; }
.hrv2 :is(#hrv-go, #hmv-zip-go) {
  flex: 1 1 100% !important; width: 100% !important; height: 52px !important; margin-top: 4px; gap: 8px; padding: 0 20px !important;
  border-radius: 12px !important; font-size: 15.5px; font-weight: 700; box-shadow: none !important; transition: background-color .15s;
}
.hrv2 :is(#hrv-go, #hmv-zip-go):hover { background: #0f62bd !important; }
.hrv2 :is(#hrv-go, #hmv-zip-go):focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2 :is(#hrv-go, #hmv-zip-go) svg { width: 18px; height: 18px; }
.hrv2 :is(#hrv-address-error, #hmv-zip-error) { padding-top: 10px !important; }
/* the report's buttons ("Show Local Pros", "Check Your Home") look exactly like the Search button: 52px, no glow,
   and the data note sits 12px under them, as it does under Search */
.hrv2 :is(#hrv-show-pros, #hmv-show-pros, #hmv-check-address) {
  height: 52px !important; border-radius: 12px !important; font-size: 15.5px !important; box-shadow: none !important; transition: background-color .15s;
}
.hrv2 :is(#hrv-show-pros, #hmv-show-pros, #hmv-check-address):hover { background: #0f62bd !important; }
.hrv2 :is(#hrv-result, #hmv-result) .hrv2-form-source.hrv2-report-source { margin-top: 12px !important; }
/* phones: 16px text so the browser doesn't zoom into the field */
@media (max-width: 899px) {
  .hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hmv-zip-input { font-size: 16px !important; }
  .hrv2 :is(#hrv-go, #hmv-zip-go) { font-size: 16px; }
  .hrv2 :is(#hrv-show-pros, #hmv-show-pros, #hmv-check-address) { font-size: 16px !important; }
}

/* data sources under the Search button (same note as the "how it works" pop-up) */
.hrv2-form-source { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: #80868b; text-align: center; }
.hrv2-form-source span { display: inline-flex; align-items: center; gap: 5px; }
.hrv2-form-source svg { flex: none; color: #9aa0a6; }
.hrv2-form-source b { font-weight: 600; color: var(--hrv2-ink-2); }
/* field icons (all sizes), in a soft blue: pin = street address, buildings = city, map = state, envelope = ZIP (postal) code */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) div:has(> :is(#hrv-street, #hmv-street)) > svg { display: none !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(:is(#hrv-street, #hmv-street), :is(#hrv-city, #hmv-city), :is(#hrv-state, #hmv-state), :is(#hrv-zip, #hmv-zip-input)) {
  padding-left: 42px !important; text-align: left; background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 18px 18px !important;
}
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-street, #hmv-street) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f9fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-city, #hmv-city) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f9fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-3v17'/%3E%3Cpath d='M12 21V9l7 3v9'/%3E%3Cpath d='M8 9v.01M8 12v.01M8 15v.01M15.5 14v.01M15.5 17v.01'/%3E%3C/svg%3E") !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-state, #hmv-state) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f9fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E") !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-zip, #hmv-zip-input) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f9fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) :is(#hrv-state, #hmv-state) { width: 116px !important; }

/* ==========================================================================
   Phones/tablets (<900px): mobile-app style search sheet. One short heading and
   a plain grey ✕ above the form (styled above for all sizes).
   Only the form shows on the Search tab (the sheet script sizes the sheet to it).
   ========================================================================== */
.hrv2-search-heading { display: none; }
/* Search tab (all sizes): "Search an address" and the form only — no report title, no empty state or grey area below */
.hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { display: none !important; }
.hrv2 .hrv2-app[data-view="search"] .hrv2-panel-title,
.hrv2 .hrv2-app[data-view="search"] .hrv2-panel-sub { display: none; }
.hrv2 .hrv2-app[data-view="search"] .hrv2-search-heading { display: block; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--hrv2-ink); text-wrap: balance; }
.hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > div:first-child { align-items: center !important; }
/* desktop: the heading + form + data note sit as one block, centred (a little above the middle) in the white panel;
   the ✕ stays in the top-right corner like the other panels */
@media (min-width: 900px) {
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center;
    padding: 40px 40px 88px !important; border-bottom: 0 !important;
  }
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) :is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]) { position: absolute; top: 20px; right: 40px; }
}
@media (max-width: 899px) {
  /* sheet headers: plain grey round ✕ — the cross drawn large, dark and bold enough to read on a phone
     (the page's own 16px, 1.3px-thin grey cross looked like a dot) */
  .hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) { width: 36px !important; height: 36px !important; border-color: transparent !important; background: #f1f3f4 !important; }
  .hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)):hover { background: #e8eaed !important; }
  .hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) svg { width: 22px; height: 22px; }
  .hrv2 :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) svg path { stroke: var(--hrv2-ink-2); stroke-width: 2.6; }

  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child { padding: 56px 40px 40px !important; border-bottom: 0 !important; }
}

/* ==========================================================================
   Desktop (900px+): no top bar over the map. The sidebar runs full height on the
   left with the logo row (Back · logo · title) on top and the section menu as a
   horizontal bar along its bottom — the same Facebook-style bar as on phones,
   but only as wide as the sidebar, so the map keeps the rest of the screen.
   Under 900px the full-width bottom bar + bottom sheet takes over.
   ========================================================================== */
.hrv2-brand { display: none; }

@media (min-width: 900px) {
  :root { --hrv2-panel-w: 384px; --hrv2-brand-h: 60px; --hrv2-menu-h: 64px; }

  .hrv2-header { display: none; }

  /* section menu: horizontal bar at the bottom of the sidebar */
  .hrv2 .verify-tool-rail {
    top: auto !important; left: 0 !important; bottom: 0 !important; width: var(--hrv2-panel-w) !important; height: var(--hrv2-menu-h) !important;
    flex-direction: row !important; align-items: stretch !important; justify-content: space-around !important;
    gap: 0 !important; padding: 0 6px !important; z-index: 36 !important;
    background: #fff !important; border-top: 1px solid var(--hrv2-line) !important; border-right: 1px solid var(--hrv2-line) !important; border-bottom: 0;
    transition: transform .32s cubic-bezier(.4,0,.2,1);
  }
  .hrv2 .verify-tool-rail > .hmv-tool {
    position: relative; flex: 1 1 0; height: 100%; padding: 10px 0 0 !important; gap: 4px; justify-content: flex-start;
    border-radius: 0; color: #65676b; transition: color .15s;
  }
  .hrv2 .verify-tool-rail > .hmv-tool:hover { background: #f8f9fa !important; color: var(--hrv2-ink-2); }
  .hrv2 .verify-tool-rail > .hmv-tool svg { width: 23px; height: 23px; }
  .hrv2 .verify-tool-rail > .hmv-tool span { font-size: 11.5px !important; font-weight: 600 !important; }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current { color: var(--hrv2-blue); background: none !important; }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current svg path, .hrv2 .verify-tool-rail > .hmv-tool.is-current svg circle { stroke-width: 2.4; }
  .hrv2 .verify-tool-rail > .hmv-tool.is-current::after { top: -1px; bottom: auto; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; }
  .hrv2 :is(#hrv-profile-dot, #hmv-profile-dot) { top: 7px !important; right: calc(50% - 16px) !important; }
  /* the menu belongs to the sidebar: it slides away with it */
  .hrv2 .hrv2-app:has(:is(#hrv-sidebar, #hmv-sidebar).hmv-closed) .verify-tool-rail { transform: translateX(calc(-100% - 2px)) !important; }

  /* sidebar: full height above the menu, logo row on top */
  .hrv2 .verify-sidebar { top: 0; left: 0; bottom: var(--hrv2-menu-h); width: var(--hrv2-panel-w); border-right: 1px solid var(--hrv2-line); }
  .hrv2 .verify-sidebar.hmv-closed { transform: translateX(calc(-100% - 2px)); }
  .hrv2 .hrv2-app:has(:is(#hrv-sidebar, #hmv-sidebar).hmv-closed) .verify-sidebar { box-shadow: none; }
  .hrv2-brand {
    display: flex; align-items: center; gap: 12px; position: absolute; top: 0; left: 0; right: 0; height: var(--hrv2-brand-h); z-index: 6;
    padding: 0 20px 0 10px; background: #fff; border-bottom: 1px solid var(--hrv2-line);
  }
  .hrv2-brand .hrv2-logo img { height: 22px; }
  .hrv2 .hmv-panel { top: var(--hrv2-brand-h); bottom: 0; }
  .hrv2 .hrv2-footer { display: none !important; } /* the logo is in the top row now */

  /* reopen tab on the screen's left edge when the sidebar is collapsed */
  .hrv2 .verify-open-tab {
    top: 50%; left: 0; transform: translateY(-50%); width: 30px; height: 60px; padding: 0;
    border-radius: 0 12px 12px 0; box-shadow: 3px 0 12px rgba(0,0,0,.18);
  }
  .hrv2 .verify-open-tab::after { content: none; }

  /* map pill: top-right corner of the map (same 10px inset as the zoom buttons) */
  .hrv2-pros-badge { top: 10px; right: 10px; max-width: calc(100% - var(--hrv2-panel-w) - 20px); }
  .hrv2 .hrv2-app:has(:is(#hrv-sidebar, #hmv-sidebar).hmv-closed) .hrv2-pros-badge { max-width: calc(100% - 20px); }
}

/* ==========================================================================
   "How it works" pop-up — opens from the "How it works" links (under the Search form and the
   search profile), which pulse gently until it has been opened once. One white card floating over a lightly
   dimmed map on every screen size (phones too). Roomy layout: header, the
   steps, a fine divider, the two pro services, then a separate
   light grey footer with the "Got it" button and the data sources.
   Page font (Public Sans) and the HailGeeks website's text colors: headings
   #0b2e4e, list text #2a3340, descriptions #5a6472, small grey text #6e7682.
   ========================================================================== */
.hrv2-welcome {
  position: absolute; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(8,13,22,.42);
  transition: background-color .35s ease;
}
.hrv2-welcome[hidden] { display: none; }
/* closing: the backdrop fades while the card drifts toward the help button (see the welcome script) */
.hrv2-welcome.is-closing { background-color: transparent; pointer-events: none; }

.hrv2-welcome-card {
  position: relative; width: 460px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column;
  /* when the card is taller than the screen, the header scrolls together with the content; the footer stays pinned */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  --hgw-heading: #0b2e4e; --hgw-text: #2a3340; --hgw-desc: #5a6472; --hgw-muted: #6e7682;
  border-radius: 24px; background: #fff; outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.32);
  animation: hrv2-w-in .26s cubic-bezier(.2,.8,.2,1) both;
}
.hrv2-welcome-card::-webkit-scrollbar { display: none; } /* a small rounded handle replaces it (welcome script) */
@keyframes hrv2-w-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hrv2-welcome-card { animation: none; } }

.hrv2-w-close {
  position: absolute; top: 20px; right: 20px; z-index: 1; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: #f1f3f4; color: var(--hrv2-muted); cursor: pointer; transition: background-color .15s, color .15s;
}
.hrv2-w-close:hover { background: #e8eaed; color: var(--hrv2-ink); }

.hrv2-w-head { flex: none; padding: 30px 68px 4px 32px; } /* no divider under the header */
.hrv2-w-head h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--hgw-heading); text-wrap: balance; }
/* subtitle: a lighter, finer weight */
.hrv2-w-head p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; font-weight: 300; color: var(--hgw-desc); text-wrap: balance; }

/* sections separated by a fine line */
.hrv2-w-body { flex: none; padding: 0 32px; }
.hrv2-w-section { padding: 22px 0; }
.hrv2-w-section + .hrv2-w-section { border-top: 1px solid var(--hrv2-line); }
.hrv2-w-section:last-child { padding-bottom: 26px; }
.hrv2-w-label { margin: 0 0 12px; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hgw-muted); }

/* steps: numbered timeline */
.hrv2-w-steps { list-style: none; margin: 0; padding: 0; }
.hrv2-w-steps li { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--hgw-text); } /* same size as the paragraph under "Remote hail inspection" */
.hrv2-w-steps li + li { margin-top: 6px; }
.hrv2-w-num {
  flex: none; width: 22px; height: 22px; margin-top: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--hrv2-blue-tint); color: var(--hrv2-blue-dark); font-size: 11px; font-weight: 800;
}
.hrv2-w-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 10.5px; top: calc(50% + 12px); bottom: calc(-50% + 9px); width: 1px; background: var(--hrv2-line);
}

/* the two pro services */
.hrv2-w-feature { display: flex; gap: 14px; align-items: flex-start; }
.hrv2-w-feature + .hrv2-w-feature { margin-top: 16px; }
.hrv2-w-icon {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--hrv2-blue-tint); color: var(--hrv2-blue);
}
.hrv2-w-feature strong { display: block; font-size: 14.5px; line-height: 1.3; font-weight: 800; color: var(--hgw-heading); }
.hrv2-w-feature p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hgw-desc); text-wrap: pretty; }
.hrv2-w-feature b { font-weight: 700; color: var(--hgw-text); }

/* separate footer: light grey strip with the button and the data sources */
.hrv2-w-foot { position: sticky; bottom: 0; z-index: 2; flex: none; margin-top: auto; padding: 20px 32px 24px; border-top: 1px solid var(--hrv2-line); background: #f8f9fa; }
.hrv2-w-start {
  width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--hrv2-blue); color: #fff;
  font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(18,119,225,.3); transition: background-color .15s;
}
.hrv2-w-start:hover { background: #0f62bd; }
.hrv2-w-start:focus-visible, .hrv2-w-close:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-w-source { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--hgw-muted); text-align: center; }
.hrv2-w-source span { display: inline-flex; align-items: center; gap: 5px; }
.hrv2-w-source svg { flex: none; color: var(--hgw-muted); }
.hrv2-w-source b { font-weight: 600; color: var(--hgw-text); }

/* Join as a Pro reuses the welcome card, sections, icons and footer. */
.hrv2-join-primary { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.hrv2-join-secondary { display: block; width: fit-content; margin: 12px auto 0; color: var(--hrv2-blue-dark); font-size: 13.5px; font-weight: 600; text-underline-offset: 3px; }
.hrv2-join-secondary:hover { color: var(--hrv2-blue); }
.hrv2-join-secondary:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-join-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--hgw-muted); text-align: center; }

/* phones: exactly the desktop card (same spacing, height and corners); only the text is a touch smaller */
@media (max-width: 699px) {
  .hrv2-w-head h2 { font-size: 18px; }
  .hrv2-w-head p { font-size: 14px; }
  .hrv2-w-label { font-size: 11px; letter-spacing: .03em; text-wrap: balance; }
  .hrv2-w-steps li { font-size: 13px; }
  .hrv2-w-feature strong { font-size: 14px; }
  .hrv2-w-feature p { font-size: 13px; }
  .hrv2-w-start { font-size: 15px; }
  .hrv2-w-source { font-size: 11.5px; }
}

/* ==========================================================================
   Roomier panels (all screen sizes): about twice the side (≈40px) and bottom
   (≈40–48px) spacing in every panel. Search and Profile set theirs in their
   own blocks above.
   ========================================================================== */
@media all {
  /* panel headers (Report, Local Pros, Guide, Profile on desktop) */
  .hrv2 .hmv-panel > div:first-child { padding-left: 40px !important; padding-right: 40px !important; }
  /* Report tab: confirm step and report content (their own blocks keep ~20px inside) */
  .hrv2 :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { padding: 0 20px 24px !important; }
  /* Tips */
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) .hailscroll { padding: 18px 40px 40px !important; }
  /* Local Pros: count, cards, pager, empty state; filter chips still scroll edge to edge */
  .hrv2 :is(#hrv-pros-content, #hmv-pros-content) > div { padding-left: 40px !important; padding-right: 40px !important; }
  .hrv2 :is(#hrv-pros-content, #hmv-pros-content) > div:last-child { padding-bottom: 40px !important; }
  .hrv2 :is(#hrv-no-pros, #hmv-no-pros) { padding-left: 40px !important; padding-right: 40px !important; }
  .hrv2 :is(#hrv-pro-filters, #hmv-pro-filters) { margin-left: -40px !important; margin-right: -40px !important; padding-left: 40px !important; padding-right: 40px !important; }
}

/* ==========================================================================
   Guide cards in the page's cool greys (the live script draws them with warm
   beige outlines and size chips): grey hairline outline, grey size chip, and a
   neutral "NWS severe-hail threshold" divider. Severity pills keep their colors.
   ========================================================================== */
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) > div { border-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) span[style*="#f3f1ea"] { background: #f1f3f4 !important; color: var(--hrv2-ink) !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) span[style*="Space Grotesk"] { font-family: inherit !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) span[style*="#f0d9c8"] { background: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) div[style*="#c2410c"] { color: var(--hrv2-muted) !important; }

/* ==========================================================================
   Top bar (phones): one line — round back button, logo, a small divider and
   "Hail Report by Address". Sidebar top row (desktop): back · logo with the
   title under it · ✕.
   ========================================================================== */
@media (max-width: 899px) {
  /* phones/tablets: one line — logo | Hail Report by Address · ⋮ (site menu) */
  :root { --hrv2-header-h: 64px; }
  .hrv2-header {
    display: flex; align-items: center; gap: 10px; padding: 0 16px !important;
    border-bottom: 0; box-shadow: 0 1px 2px rgba(60,64,67,.06), 0 2px 8px rgba(60,64,67,.06);
  }
  .hrv2-header .hrv2-logo { flex: none; height: auto; }
  .hrv2-header .hrv2-logo img { height: 19px; }
  .hrv2-header .hrv2-title {
    display: block !important; min-width: 0; margin: 0 !important; padding: 0 0 0 10px !important; border: 0 !important; border-left: 1px solid #dadce0 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px !important; line-height: 1.2; font-weight: 600; color: var(--hrv2-muted);
  }
}
@media (min-width: 900px) {
  :root { --hrv2-brand-h: 76px; --hrv2-gap: 0px; }
  /* one top row, as on phones: logo | Hail Report by Address · ⋮ (site menu) in the corner */
  .hrv2-brand { display: flex; align-items: center; gap: 10px; padding: 0 24px; border-bottom: 0; }
  .hrv2-brand .hrv2-logo { flex: none; height: auto; }
  .hrv2-brand .hrv2-logo img { height: 19px; }
  .hrv2-brand .hrv2-title {
    display: block; min-width: 0; margin: 0; padding: 0 0 0 10px; border: 0; border-left: 1px solid #dadce0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.2;
  }
  .hrv2-brand .hrv2-menu-btn { margin-left: auto; }
  /* the panels' own ✕ buttons are not repeated on desktop */
  .hrv2 .hmv-panel :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) { display: none !important; }

  /* the sidebar + its menu run the full height along the left edge; only the outside (right) corners are rounded */
  .hrv2 .verify-sidebar {
    top: 0; left: 0; bottom: var(--hrv2-menu-h);
    border-right: 0; border-radius: 0 20px 0 0; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(60,64,67,.06), 4px 0 24px rgba(0,0,0,.22);
  }
  .hrv2 .verify-tool-rail {
    left: 0 !important; bottom: 0 !important; border-right: 0 !important;
    border-radius: 0 0 20px 0; overflow: hidden; box-shadow: 4px 6px 18px -6px rgba(0,0,0,.3);
  }
  .hrv2 .verify-sidebar.hmv-closed,
  .hrv2 .hrv2-app:has(:is(#hrv-sidebar, #hmv-sidebar).hmv-closed) .verify-tool-rail { transform: translateX(calc(-100% - var(--hrv2-gap) - 24px)) !important; }
  .hrv2-pros-badge { max-width: calc(100% - var(--hrv2-panel-w) - var(--hrv2-gap) - 20px); }
}

/* phones/tablets: the slide-up sheet sits slightly in from both sides so a sliver of map shows around it */
@media (max-width: 899px) {
  :root { --hrv2-sheet-gap: 8px; }
  .hrv2 .verify-sidebar { left: var(--hrv2-sheet-gap) !important; right: var(--hrv2-sheet-gap); }
}

/* under "Save & Start Searching" (only while that button shows) */
.hrv2-save-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--hrv2-muted); text-align: center; }

/* profile questions: numbers grey until answered, then the page blue (the live script uses indigo while open, green once answered);
   the answer reads "Selected: …" */
/* numbers stay grey until that question is answered (the page colors them while a question is open); answered = blue */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(:is(#hrv-step1-num, #hmv-step1-num), :is(#hrv-step2-num, #hmv-step2-num))[style*="rgb(79, 124, 255)"] { background: #c2c8d2 !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(:is(#hrv-step1-num, #hmv-step1-num), :is(#hrv-step2-num, #hmv-step2-num))[style*="rgb(22, 163, 74)"] { background: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) :is(:is(#hrv-step1-sub, #hmv-step1-sub), :is(#hrv-step2-sub, #hmv-step2-sub))::before { content: "Selected: "; font-weight: 500; color: var(--hrv2-muted); }

/* ==========================================================================
   Report and Local Pros match the other sections: white backgrounds, and the
   Local Pros controls in the page blue and cool greys (the live script draws
   them in indigo with beige outlines; its inline colors serialize as rgb()).
   ========================================================================== */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll, .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller) { background: #fff !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) [style*="background: rgb(79, 124, 255)"] { background: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) :is([style*="solid rgb(79, 124, 255)"], [style*="border-color: rgb(79, 124, 255)"]) { border-color: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) :is([style^="color: rgb(79, 124, 255)"], [style*="; color: rgb(79, 124, 255)"]) { color: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) :is([style*="solid rgb(227, 223, 214)"], [style*="border-color: rgb(227, 223, 214)"]) { border-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) [style*="background: rgb(243, 241, 236)"] { background: #f1f3f4 !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) [style*="solid rgb(240, 237, 230)"] { border-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) [style*="Manrope"] { font-family: inherit !important; }

/* "Nothing here yet" screens styled like the Search block: blue-tint icon, 20px heading, full-width blue button */
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:first-child { background: var(--hrv2-blue-tint) !important; }
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:first-child svg path { stroke: var(--hrv2-blue); }
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:nth-child(2), .hrv2 .hrv2-report-empty strong { font-size: 20px !important; font-weight: 700 !important; color: var(--hrv2-ink) !important; }
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:nth-child(3), .hrv2 .hrv2-report-empty p { font-size: 14px !important; line-height: 1.5 !important; color: var(--hrv2-muted) !important; }
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > button, .hrv2 .hrv2-report-empty-btn {
  width: 100%; height: 52px !important; margin-top: 22px !important; padding: 0 20px !important; border-radius: 12px !important;
  background: var(--hrv2-blue) !important; font-size: 15.5px !important; font-weight: 700 !important; box-shadow: none;
}
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) > button:hover, .hrv2 .hrv2-report-empty-btn:hover { background: #0f62bd !important; }
.hrv2 .hrv2-report-empty { align-items: stretch; }
.hrv2 .hrv2-report-empty-icon { align-self: center; }

/* ==========================================================================
   Desktop: Profile, and Report / Local Pros when there is nothing to show yet,
   sit as one block centred in the white panel — the same feel as Search.
   ========================================================================== */
.hrv2-profile-title { font-size: 20px !important; line-height: 1.2; letter-spacing: -.01em !important; }
@media (min-width: 900px) {
  /* Profile: title + questions + Save centred together (see "titles scroll with their content" below) */
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) { padding-bottom: 48px; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child { padding-top: 24px !important; padding-bottom: 8px !important; border-bottom: 0 !important; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > .hailscroll { padding-bottom: 24px !important; }

  /* Report tab before any search: no report title bar, the "No report yet" block centred */
  .hrv2 .hrv2-app[data-view="report"]:has(:is(#hrv-searching, #hmv-searching)[hidden]):has(:is(#hrv-confirm, #hmv-confirm)[hidden]):has(:is(#hrv-result, #hmv-result)[hidden]):has(:is(#hrv-gate, #hmv-gate)[hidden]) :is(#hrv-panel-search, #hmv-panel-search) > div:first-child { display: none !important; }
  .hrv2 .hrv2-app[data-view="report"]:has(:is(#hrv-searching, #hmv-searching)[hidden]):has(:is(#hrv-confirm, #hmv-confirm)[hidden]):has(:is(#hrv-result, #hmv-result)[hidden]):has(:is(#hrv-gate, #hmv-gate)[hidden]) :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll {
    display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 88px !important;
  }
  .hrv2 .hrv2-report-empty { padding: 0 !important; }

  /* Local Pros with nothing to show: no title bar, the message block centred */
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect):has(:is(#hrv-no-pros, #hmv-no-pros):not([hidden])) > div:first-child { display: none !important; }
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect):has(:is(#hrv-no-pros, #hmv-no-pros):not([hidden])) :is(#hrv-pro-scroller, #hmv-pro-scroller) { display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 88px; }
  .hrv2 :is(#hrv-no-pros, #hmv-no-pros) { padding: 0 !important; }
}
@media (max-width: 899px) { .hrv2 .hrv2-report-empty { padding: 36px 20px 16px !important; } } /* 40px edge; ends 40px below the button like the Search sheet */

/* ==========================================================================
   One look for every panel: 20px titles with the same subtitle style, and no
   divider under the title until the content is scrolled under it (scrollbar
   script). Guide cards get the page's text sizes and colors.
   ========================================================================== */
.hrv2 :is(:is(#hrv-panel-tips, #hmv-panel-tips), :is(#hrv-panel-inspect, #hmv-panel-inspect)) > div:first-child > div:first-child > div:first-child > div:first-child,
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hrv2-panel-title {
  font-size: 20px !important; line-height: 1.2; letter-spacing: -.01em !important; color: var(--hrv2-ink) !important;
}
.hrv2 :is(:is(#hrv-panel-tips, #hmv-panel-tips), :is(#hrv-panel-inspect, #hmv-panel-inspect)) > div:first-child > div:first-child > div:first-child > div:nth-child(2),
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hrv2-panel-sub {
  margin-top: 4px !important; font-size: 13px !important; line-height: 1.4; font-weight: 500 !important; color: var(--hrv2-muted) !important;
}
.hrv2 .hmv-panel > div:first-child { border-bottom-color: transparent !important; transition: border-color .15s; }
.hrv2 .hmv-panel.hrv2-scrolled > div:first-child { border-bottom-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) .hailscroll { padding-top: 4px !important; }

/* Guide cards */
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) { gap: 12px !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) > div { padding: 14px 16px !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) span[style*="#2b303a"] { font-size: 14px !important; color: var(--hrv2-ink) !important; }
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) > div > div:last-child { font-size: 13px !important; line-height: 1.55 !important; color: var(--hrv2-muted) !important; }

/* ==========================================================================
   Scrolling (desktop): Guide, Profile and Report scroll as a whole — the title
   moves with the content, like the Search block. Centred blocks use auto
   margins, so on a short window they scroll normally instead of hiding under
   the top row. One fine line under the top row appears only while the open
   panel is scrolled (scrollbar script). Local Pros keeps its title and filter
   chips in place (the page scrolls its list to a pro picked on the map); its
   own fine line shows only while its list is scrolled.
   ========================================================================== */
.hrv2 :is(#hrv-sidebar, #hmv-sidebar) :is(.hmv-panel, .hmv-panel > div:first-child) { scrollbar-width: none; }
.hrv2 :is(#hrv-sidebar, #hmv-sidebar) :is(.hmv-panel, .hmv-panel > div:first-child)::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .hrv2 :is(:is(#hrv-panel-tips, #hmv-panel-tips), :is(#hrv-panel-profile, #hmv-panel-profile)),
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .hrv2 :is(:is(#hrv-panel-tips, #hmv-panel-tips), :is(#hrv-panel-profile, #hmv-panel-profile)) > :is(div:first-child, .hailscroll),
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > :is(div:first-child, .hailscroll) { flex: none !important; overflow: visible !important; }

  /* Profile centred with auto margins */
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child { margin-top: auto; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > .hailscroll { margin-bottom: auto; }

  /* Search block centred with auto margins (its own area scrolls on a short window) */
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child { justify-content: flex-start !important; }
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > :first-child { margin-top: auto; }
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > :last-child { margin-bottom: auto; }

  /* "No report yet": the content area fills the panel and centres the block */
  .hrv2 .hrv2-app[data-view="report"]:has(:is(#hrv-searching, #hmv-searching)[hidden]):has(:is(#hrv-confirm, #hmv-confirm)[hidden]):has(:is(#hrv-result, #hmv-result)[hidden]):has(:is(#hrv-gate, #hmv-gate)[hidden]) :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll {
    flex: 1 0 auto !important; justify-content: flex-start !important;
  }
  .hrv2 .hrv2-report-empty { margin-top: auto !important; margin-bottom: auto !important; }

  /* Local Pros with nothing to show: centred the same way */
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect):has(:is(#hrv-no-pros, #hmv-no-pros):not([hidden])) :is(#hrv-pro-scroller, #hmv-pro-scroller) { justify-content: flex-start !important; }
  .hrv2 :is(#hrv-no-pros, #hmv-no-pros) { margin-top: auto !important; margin-bottom: auto !important; }

  /* one fine line under the top row while the open panel is scrolled (not for Local Pros, which has its own) */
  .hrv2-brand { border-bottom: 1px solid transparent !important; transition: border-color .15s; }
  .hrv2 :is(#hrv-sidebar, #hmv-sidebar).hrv2-scrolled .hrv2-brand { border-bottom-color: var(--hrv2-line) !important; }
  /* titles that scroll away don't draw a line of their own */
  .hrv2 :is(:is(#hrv-panel-tips, #hmv-panel-tips), :is(#hrv-panel-profile, #hmv-panel-profile), :is(#hrv-panel-search, #hmv-panel-search), :is(#hrv-panel-inspect, #hmv-panel-inspect)).hrv2-scrolled > div:first-child { border-bottom-color: transparent !important; }
}

/* "How it works" link a little below the data note on the Search form (replaces the map's ? button);
   the pop-up folds back into it when closed */
.hrv2-howto {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 18px auto 0; padding: 8px 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--hrv2-blue); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .15s;
}
.hrv2-howto:hover { background: rgba(18,119,225,.08); }
.hrv2-howto:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }

/* phones/tablets: when the screen is too short for the whole Search form (the sheet is capped under the top bar),
   the form scrolls inside the sheet so the Search button, the data note and "How it works" stay reachable */
@media (max-width: 899px) {
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
}

/* ==========================================================================
   Report notices ("Get a More Precise Property Check", "We couldn't locate
   this address", "No hail impact on record"): white cards with the grey
   hairline outline like every other card, and a light-fill icon tile (blue
   tint + blue icon, like the pro cards) instead of a solid blue tile.
   ========================================================================== */
.hrv2 :is(#hrv-result, #hmv-result) div[style*="background:#eef5fd"] { background: #fff !important; border-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-result, #hmv-result) span[style*="background:#1277e1"][style*="width:26px"] { width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--hrv2-blue-tint) !important; }
.hrv2 :is(#hrv-result, #hmv-result) span[style*="background:#1277e1"][style*="width:26px"] svg { width: 17px; height: 17px; }
.hrv2 :is(#hrv-result, #hmv-result) span[style*="background:#1277e1"][style*="width:26px"] svg :is(path, circle) { stroke: var(--hrv2-blue); }
.hrv2 :is(#hrv-result, #hmv-result) span[style*="color:#1e3a8a"] { color: var(--hrv2-ink) !important; font-size: 14px !important; }
.hrv2 :is(#hrv-result, #hmv-result) div[style*="color:#43506b"] { color: var(--hrv2-muted) !important; }

/* ==========================================================================
   Report and Local Pros details (hail-report-verify-results.js)
   ========================================================================== */
/* searched address: street on one line, city, state ZIP on the next */
.hrv2-addr-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pro cards: long company names end in "…" (full name on hover) */
.hrv2 .hmv-pro-card div[style*="Space Grotesk"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit !important; }
/* Remote Hail Inspection: a small green dot that pulses gently (no shield, no circle around it — the card's top
   row keeps its height); hover: "Remote inspection available"; tap: the Remote Inspection pop-up */
.hrv2 .hmv-remote-link {
  position: relative; width: 13px; height: 13px; padding: 0 !important; justify-content: center; align-items: center;
  font-size: 0 !important; gap: 0 !important; line-height: 1 !important; background: none !important;
}
.hrv2 .hmv-remote-link svg { display: none; }
.hrv2 .hmv-remote-link::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #16a34a;
  animation: hrv2-remote-pulse 1.8s ease-out infinite;
}
@keyframes hrv2-remote-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .hrv2 .hmv-remote-link::before { animation: none; } }
.hrv2 .hmv-remote-link:focus { outline: none; }
.hrv2 .hmv-remote-link:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 3px; border-radius: 999px; }

/* Local Pros categories: one pill with a dropdown (the scrolling row stays hidden; it still drives the filter) */
.hrv2 :is(#hrv-pro-filters, #hmv-pro-filters) { display: none !important; }
.hrv2-cat { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.hrv2-cat[hidden] { display: none; }
.hrv2-cat-drop { position: relative; }
.hrv2-cat-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--hrv2-line); border-radius: 999px;
  background: #fff; color: var(--hrv2-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.hrv2-cat-pill[hidden] { display: none; }
.hrv2-cat-btn { padding-right: 12px; }
.hrv2-cat-pill:hover { background: #f8f9fa; }
.hrv2-cat-pill.is-active, .hrv2-cat-pill.is-active:hover { border-color: var(--hrv2-blue); background: var(--hrv2-blue); color: #fff; }
.hrv2-cat-btn svg { color: currentColor; opacity: .7; transition: transform .15s; }
.hrv2-cat-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hrv2-cat-pill:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-cat-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 230px; padding: 6px;
  border: 1px solid var(--hrv2-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.hrv2-cat-menu[hidden] { display: none; }
.hrv2-cat-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--hrv2-ink-2); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.hrv2-cat-item:hover { background: #f1f3f4; }
.hrv2-cat-item.is-selected { color: var(--hrv2-blue); }
.hrv2-cat-item.is-selected::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5 9-10' stroke='%231277e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ==========================================================================
   Desktop: Report and Local Pros use the Search layout — the title (and the
   category pill) scroll with the content; short content sits centred in the
   panel, long content starts at the top and scrolls.
   ========================================================================== */
@media (min-width: 900px) {
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) > div:first-child, .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller) { flex: none !important; overflow: visible !important; }
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) > div:first-child { margin-top: auto; }
  .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller) { margin-bottom: auto; }
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect):has(:is(#hrv-no-pros, #hmv-no-pros):not([hidden])) :is(#hrv-pro-scroller, #hmv-pro-scroller) { flex: 1 0 auto !important; }
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child { margin-top: auto; }
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { margin-bottom: auto; }
  /* the report itself: the title row above is hidden in this view and the content area fills the panel, so
     the report is centred inside it (like Search and Profile); a report taller than the panel starts at the top */
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll > :is(#hrv-result, #hmv-result) { margin-top: auto !important; margin-bottom: auto !important; }
  /* and the same extra space below as Search and Profile keep (48px more than above), so every tab's content
     sits at the same height */
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { padding-bottom: 46px !important; }
  /* the centred message screens (no hail, not found, retrieval issue): the same height as the other tabs too */
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll > :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) { padding-bottom: 44px !important; }
}

/* the data note under "Show Local Pros" (same as under the Search button) */
.hrv2-report-source { margin-top: 14px !important; }

/* empty Report / Local Pros screens: outline icons (thin grey ring, grey outline icon, no filled background) */
.hrv2 .hrv2-report-empty-icon, .hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:first-child {
  width: 64px !important; height: 64px !important; border-radius: 50% !important;
  background: transparent !important; border: 1.5px solid var(--hrv2-line); color: #80868b;
}
.hrv2 .hrv2-report-empty-icon svg, .hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:first-child svg { width: 28px; height: 28px; }
.hrv2 .hrv2-report-empty-icon svg :is(path, circle, rect), .hrv2 :is(#hrv-no-pros, #hmv-no-pros) > div:first-child svg :is(path, circle, rect) { stroke: #80868b !important; }

/* the dot in the map pill pulses gently: green for "N pros found nearby", blue for "Join as a Pro" */
.hrv2-pros-badge-dot { animation: hrv2-dot-pulse-green 1.8s ease-out infinite; }
.hrv2-pros-badge[data-mode="join"] .hrv2-pros-badge-dot { animation-name: hrv2-dot-pulse-blue; }
@keyframes hrv2-dot-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }
@keyframes hrv2-dot-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(18,119,225,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18,119,225,0); } }
@media (prefers-reduced-motion: reduce) { .hrv2-pros-badge-dot { animation: none; } }

/* ==========================================================================
   Search profile: "Save & Start Searching" and the line under it are always
   there; the button stays inactive until both questions are answered (the page
   keeps it [hidden] until then — we show it greyed out instead).
   ========================================================================== */
.hrv2 :is(#hrv-save-profile, #hmv-save-profile)[hidden] { display: flex !important; opacity: .4; pointer-events: none; cursor: default; box-shadow: none !important; }
/* the Save button stays blue; after a change the note under it turns amber ("You haven't saved your changes.") */
.hrv2 .hrv2-save-note.is-changed { color: #b45309; font-weight: 600; }

/* ==========================================================================
   Report (all sizes): no "Hail Report / Preliminary Hail History" title — the
   confirm step and the report stand on their own; the confirm step (and the
   searching state) sit centred like the Search block.
   Local Pros (all sizes): no "Local Pros" title or ZIP line — the heading is
   "N pros near ZIP" with a filter icon on the same line (category pop-up).
   ========================================================================== */
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) :is(.hrv2-panel-title, .hrv2-panel-sub) { display: none !important; }
.hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) > div:first-child > div:first-child > div:first-child { display: none !important; }
.hrv2 .hrv2-cat { display: none !important; }
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { display: flex; flex-direction: column; }
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll > :is(:is(#hrv-confirm, #hmv-confirm), :is(#hrv-searching, #hmv-searching)) { margin-top: auto !important; margin-bottom: auto !important; }

/* "N pros near ZIP" + filter icon */
.hrv2 :is(#hrv-pros-content, #hmv-pros-content) > div:first-child { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 4px !important; padding-bottom: 6px !important; }
/* the filter button first, on the far left, then "N pros near ZIP" */
.hrv2 :is(#hrv-pros-content, #hmv-pros-content) > div:first-child > .hrv2-filter-btn { order: -1; }
.hrv2 :is(#hrv-pros-count, #hmv-pros-count) { font-size: 20px !important; line-height: 1.2; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--hrv2-ink) !important; }
.hrv2-filter-btn {
  flex: none; position: relative; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hrv2-line); border-radius: 8px; background: #fff; color: var(--hrv2-muted); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.hrv2-filter-btn[hidden] { display: none; }
.hrv2-filter-btn:hover { background: #f1f3f4; color: var(--hrv2-ink); }
.hrv2-filter-btn.is-active { border-color: var(--hrv2-blue); background: var(--hrv2-blue); color: #fff; } /* a category is selected */
.hrv2-filter-btn:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }

/* the category pop-up (welcome-pop-up style, compact) */
.hrv2 .hrv2-filter-card { width: 380px; }
.hrv2-filter .hrv2-w-body { padding-bottom: 26px; }
.hrv2-filter-list { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.hrv2-filter-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 16px;
  border: 1.5px solid var(--hrv2-line); border-radius: 12px; background: #fff; color: var(--hrv2-ink-2);
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.hrv2-filter-item:hover { background: #f8f9fa; }
.hrv2-filter-item.is-selected { border-color: var(--hrv2-blue); color: var(--hrv2-blue); background: #fff; }
.hrv2-filter-item.is-selected::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5 9-10' stroke='%231277e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.hrv2-filter-item:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }

@media (min-width: 900px) {
  /* no title bar at all for Report and Local Pros (their ✕ lives in the sidebar's top row) */
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child,
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) > div:first-child { display: none !important; }
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll.hailscroll { flex: 1 0 auto !important; padding-top: 6px !important; }
  .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller) { margin-top: auto; padding-top: 17px; } /* "N pros near ZIP" 100px down, like the other tabs' titles */
}
@media (max-width: 899px) {
  /* Report and Local Pros sheets: only the ✕ is left of the title row — it sits in the corner, content starts 56px down */
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > div:first-child,
  .hrv2 :is(#hrv-panel-inspect, #hmv-panel-inspect) > div:first-child {
    position: absolute; top: 0; right: 0; z-index: 3; padding: 16px 16px 0 0 !important; background: transparent !important; border: 0 !important;
  }
  .hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll { padding-top: 38px !important; } /* "Property-level hail report" lines up with the other sheets' headings (56px down) */
  .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller) { padding-top: 49px; } /* "N pros near ZIP" 56px down, like the other tabs' titles */
  /* the filter button right after the count (not under the sheet's ✕) */
  .hrv2 :is(#hrv-pros-content, #hmv-pros-content) > div:first-child { padding-bottom: 2px !important; } /* first pro card 94px down, like the other tabs' first card */
  .hrv2 :is(#hrv-no-pros, #hmv-no-pros) { padding-top: 25px !important; } /* its icon 74px below the sheet's top, like the empty Report's (38px + 36px) */
}
.hrv2-filter-btn svg { width: 15px; height: 15px; }

/* phones/tablets: the sheet's ✕ always sits in the same top-right corner (16px in), never on the heading's line;
   the heading starts below it (56px down) with the full width to itself */
@media (max-width: 899px) {
  .hrv2 .hmv-panel > div:first-child { position: relative; }
  .hrv2 .hmv-panel :is(:is([data-hrv="toggle-sidebar"], [data-hmv="toggle-sidebar"]), :is(#hrv-profile-close, #hmv-profile-close)) { position: absolute !important; top: 16px; right: 16px; z-index: 4; margin: 0 !important; }
  .hrv2 .hmv-panel > div:first-child > div:first-child { display: block !important; }
}

/* menu locked until the search profile is saved (hail-report-verify-profile.js): only Profile is active */
.hrv2 .hrv2-app.hrv2-locked .verify-tool-rail .hmv-tool:not(:is(#hrv-tool-profile, #hmv-tool-profile)) { opacity: .35; pointer-events: none; cursor: default; }
/* map locked too: a see-through shield over the map (over its zoom buttons, under the panel, menu, header and pills);
   trying to use the map shows a short note in the middle of the map in view */
.hrv2-map-lock { position: absolute; inset: 0; z-index: 3; cursor: default; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hrv2-map-lock[hidden] { display: none; }
.hrv2-map-hint {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(540px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border-radius: 14px;
  background: #0b2e4e; color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.4; font-weight: 500;
  box-shadow: 0 12px 32px rgba(6, 22, 42, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 6px));
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.hrv2-map-hint.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.hrv2-map-hint > svg { flex: none; color: #8cc2ff; }
.hrv2-map-hint > span { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
.hrv2-map-hint-btn {
  flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: #1277e1; color: #fff; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color .15s;
}
.hrv2-map-hint-btn:hover { background: #0f62bd; }
.hrv2-map-hint-btn:focus-visible { outline: 2px solid #8cc2ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hrv2-map-hint, .hrv2-map-hint.is-shown { transition: none; transform: translate(-50%, -50%); } }

/* Filter pros pop-up: the ✕ in the corner, the heading below it (not on the same line) */
.hrv2 .hrv2-filter .hrv2-w-head { padding-top: 62px; padding-right: 32px; }

/* "Property-level hail report" above the report (same style as "Enter your address") */
.hrv2-result-heading { margin: 0 0 14px; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--hrv2-ink); } /* the same title style as "Check your address" and "N pros near ZIP" */

/* the same 14px under "Enter your address", "Hail Report Profile Setup" and "Hail Size Guide" (all sizes) */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) > div:first-child > div:nth-child(2) { margin-top: 14px !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > div:first-child { padding-bottom: 8px !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > .hailscroll { padding-top: 6px !important; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) > div:first-child { padding-bottom: 9px !important; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) > .hailscroll { padding-top: 4px !important; }
/* phones: the empty Local Pros message ends 40px below its button, like the Search sheet */
@media (max-width: 899px) { .hrv2 :is(#hrv-no-pros, #hmv-no-pros) { padding-bottom: 40px !important; } .hrv2 :is(#hrv-pro-scroller, #hmv-pro-scroller):has(:is(#hrv-no-pros, #hmv-no-pros):not([hidden])) { padding-bottom: 0 !important; } }

/* ==========================================================================
   Map pill ("Join as a Pro" / "N pros found nearby"): a soft dark-blue pill
   that blends with the map instead of a white one that stands out; white text,
   the same pulsing dot (lighter shades so it reads on blue).
   ========================================================================== */
.hrv2-pros-badge {
  background: rgba(36,58,99,.94) !important; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 10px rgba(0,0,0,.28) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hrv2-pros-badge-main { color: rgba(255,255,255,.8) !important; }
.hrv2-pros-badge-main:hover { background: rgba(255,255,255,.08) !important; }
.hrv2-pros-badge-text strong { color: #fff !important; }
.hrv2-pros-badge-dot { background: #34d399 !important; animation-name: hrv2-dot-pulse-mint; }
.hrv2-pros-badge[data-mode="join"] .hrv2-pros-badge-dot { background: #7cc0ff !important; animation-name: hrv2-dot-pulse-sky; }
@keyframes hrv2-dot-pulse-mint { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } }
@keyframes hrv2-dot-pulse-sky { 0% { box-shadow: 0 0 0 0 rgba(124,192,255,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(124,192,255,0); } }
@keyframes hrv2-badge-blink {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 0 0 0 rgba(124,192,255,0); }
  50% { box-shadow: 0 2px 10px rgba(0,0,0,.28), 0 0 0 6px rgba(124,192,255,.3); }
}
.hrv2-pros-badge-main:focus-visible, .hrv2-pros-join:focus-visible { outline-color: #7cc0ff !important; }
.hrv2-w-steps li::after { content: none !important; } /* steps sit close together now; no connector line */

/* ==========================================================================
   Report outcomes without a report — no hail on record, address not found,
   service problem: no "Property-level hail report" heading; the message sits centred
   like the other "nothing here" screens (grey outline icon, 20px heading,
   grey text, full-width blue button). The amber banners use the page's
   white + blue instead.
   ========================================================================== */
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) .hrv2-result-heading { display: none; }
.hrv2 .hrv2-app[data-view="report"] :is(#hrv-panel-search, #hmv-panel-search) > .hailscroll > :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) { margin-top: auto !important; margin-bottom: auto !important; }
@media (max-width: 899px) { .hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) { padding: 36px 20px 16px !important; } }

/* the no-hail and address-not-found cards become the centred message */
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:first-child { flex-direction: column; gap: 16px !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:first-child > span:first-child {
  width: 64px !important; height: 64px !important; border-radius: 50% !important; background: transparent !important; border: 1.5px solid var(--hrv2-line);
}
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:first-child > span:first-child svg { width: 28px !important; height: 28px !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:first-child > span:first-child svg :is(path, circle) { stroke: #80868b !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:first-child > span:last-child { font-size: 20px !important; font-weight: 700 !important; color: var(--hrv2-ink) !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) > div:not(:first-child) { font-size: 14px !important; line-height: 1.5 !important; color: var(--hrv2-muted) !important; }
.hrv2 :is(#hrv-noimpact-addr, #hmv-noimpact-addr) { margin-top: 6px !important; white-space: normal !important; color: var(--hrv2-ink-2) !important; font-weight: 600 !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(:is(#hrv-notfound-cta, #hmv-notfound-cta), :is(#hrv-noimpact-cta, #hmv-noimpact-cta)) :is(a, button).hmv-primary {
  height: 52px !important; margin-top: 22px !important; border-radius: 12px !important; font-size: 15.5px !important; box-shadow: none !important;
}

/* service problem (banner without a report): the banner becomes the centred message + "Try again" */
.hrv2-retry { display: none; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) {
  flex-direction: column; gap: 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center;
}
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) :is(#hrv-status-iconwrap, #hmv-status-iconwrap) {
  width: 64px !important; height: 64px !important; border-radius: 50% !important; background: transparent !important; border: 1.5px solid var(--hrv2-line); color: #80868b !important;
}
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) :is(#hrv-status-iconwrap, #hmv-status-iconwrap) svg { width: 28px; height: 28px; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) :is(#hrv-status-title, #hmv-status-title) { font-size: 20px !important; color: var(--hrv2-ink) !important; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) :is(#hrv-status-sub, #hmv-status-sub) { margin-top: 6px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--hrv2-muted) !important; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report)[hidden]) :is(#hrv-status-banner, #hmv-status-banner):not([hidden]) ~ .hrv2-retry {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 22px; border: 0; border-radius: 12px;
  background: var(--hrv2-blue); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.hrv2 .hrv2-retry:hover { background: #0f62bd; }
.hrv2 .hrv2-retry:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2 :is(#hrv-noimpact-cta, #hmv-noimpact-cta) > p { font-size: 11.5px !important; line-height: 1.55; color: #80868b; }

/* partial-coverage banner above a report: white card + blue icon tile instead of amber */
.hrv2 :is(#hrv-status-banner, #hmv-status-banner)[style*="202, 138, 4"] { background: #fff !important; border-color: var(--hrv2-line) !important; }
.hrv2 :is(#hrv-status-banner, #hmv-status-banner)[style*="202, 138, 4"] :is(#hrv-status-iconwrap, #hmv-status-iconwrap) { background: var(--hrv2-blue-tint) !important; color: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-status-banner, #hmv-status-banner)[style*="202, 138, 4"] :is(#hrv-status-title, #hmv-status-title) { color: var(--hrv2-ink) !important; }

/* "View N local pros in ZIP": not shown above a report (partial coverage); a plain clickable text link on the
   no-report screens (no hail, report retrieval issue) instead of a button */
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-result-pros, #hmv-result-pros) { display: none !important; }
.hrv2 :is(#hrv-result, #hmv-result) :is(#hrv-result-pros, #hmv-result-pros):not([hidden]) {
  display: block; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 16px 0 0 !important; padding: 4px 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--hrv2-blue) !important; font-size: 14px !important; font-weight: 600 !important; text-align: center; cursor: pointer;
}
.hrv2 :is(#hrv-result, #hmv-result) :is(#hrv-result-pros, #hmv-result-pros):hover { text-decoration: underline; }
.hrv2 :is(#hrv-result, #hmv-result) :is(#hrv-result-pros, #hmv-result-pros):focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; border-radius: 6px !important; }

/* "View N local pros near you" under "Edit your address" — a text link like on the other unsuccessful screens */
.hrv2 :is(#hrv-notfound-pros-link, #hmv-notfound-pros-link).hrv2-pros-textlink:not([hidden]) {
  display: block; margin: 16px 0 0; padding: 4px 0; color: var(--hrv2-blue); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
}
.hrv2 :is(#hrv-notfound-pros-link, #hmv-notfound-pros-link).hrv2-pros-textlink:hover { text-decoration: underline; }

/* Filter pros pop-up: category counts on the right; the card scrolls when the list is long */
.hrv2 .hrv2-filter-card { max-height: min(600px, 100%) !important; }
.hrv2-filter-item { gap: 10px; }
.hrv2-filter-item > span:first-child { flex: 1; min-width: 0; text-align: left; }
.hrv2-filter-count { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #f1f3f4; color: var(--hrv2-muted); font-size: 12.5px; font-weight: 700; text-align: center; }
.hrv2-filter-item.is-selected .hrv2-filter-count { background: var(--hrv2-blue-tint); color: var(--hrv2-blue); }

/* "Call" on desktop: a small pop-up with the pro and the number as a tap-to-call button (phones dial directly) */
.hrv2 .hrv2-call-card { width: 360px; }
.hrv2-call-body { display: flex; flex-direction: column; align-items: center; padding: 36px 32px 28px; text-align: center; }
.hrv2-call-icon {
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--hrv2-blue-tint); color: var(--hrv2-blue); margin-bottom: 14px;
}
.hrv2-call-body h2 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--hgw-heading); text-wrap: balance; }
.hrv2-call-place { margin: 4px 0 0; font-size: 13.5px; color: var(--hgw-muted); }
.hrv2-call-number {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 20px;
  border-radius: 999px; background: var(--hrv2-blue); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 6px 16px rgba(18,119,225,.28); transition: background-color .15s;
}
.hrv2-call-number:hover { background: #0f62bd; color: #fff; }
.hrv2-call-number:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 3px; }
.hrv2-call-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hgw-muted); }

/* report banners: the address stays inside the banner with a small outline pin before it (no tile) —
   in the green banner it is the banner's own address line; the coverage-incomplete banner shows it under its message */
.hrv2 :is(:is(#hrv-status-sub, #hmv-status-sub), :is(#hrv-confirm-addr, #hmv-confirm-addr)):has(.hrv2-addr-line), .hrv2-banner-addr { display: flex; align-items: flex-start; gap: 5px; }
.hrv2-addr-pin { flex: none; display: flex; margin-top: 1px; color: #80868b; }
.hrv2-addr-lines { display: flex; flex-direction: column; min-width: 0; }
.hrv2-banner-addr { display: none; margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.35; color: #70757a; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-banner, #hmv-status-banner)[style*="202, 138, 4"] .hrv2-banner-addr { display: flex; }

/* "How it works" under the search profile's Save button (same link as under the Search form) */
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hrv2-howto { display: flex; margin: 14px auto 0; }

/* the same spacing under the main button on Search and Profile: 12px to the small text, 20px to "How it works"
   (the Search form's fields sit in a column with a 10px gap, so its margins are 10px smaller) */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hrv2-form-source { margin-top: 2px !important; }
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hrv2-howto { margin-top: 10px !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hrv2-save-note { margin-top: 12px !important; }
.hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) .hrv2-howto { margin-top: 20px !important; }

/* the data note under "Search an address" on the empty Report screen (12px below the button, like Search) */
.hrv2 :is(#hrv-panel-search, #hmv-panel-search) .hrv2-report-empty .hrv2-empty-source { margin-top: 12px !important; }
.hrv2 .hrv2-report-empty .hrv2-empty-source { font-size: 12px !important; line-height: 1.4 !important; color: #80868b !important; } /* same size as under the Search button */
/* the same note under "Go to search" on the empty Local Pros screen, only before any search (results script) */
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) .hrv2-empty-source { margin-top: 12px !important; font-size: 12px !important; line-height: 1.4 !important; color: #80868b !important; }
.hrv2 :is(#hrv-no-pros, #hmv-no-pros) .hrv2-empty-source.is-off { display: none !important; }

/* welcome pop-up: the three "How it works" steps sit in a card (white, grey hairline, rounded — like the other cards) */
.hrv2 #hrv2-welcome .hrv2-w-steps { padding: 12px 16px; border: 1px solid var(--hrv2-line); border-radius: 14px; background: #fff; }
.hrv2 #hrv2-welcome .hrv2-w-steps li + li { margin-top: 0; padding-top: 8px; margin-top: 8px; border-top: 1px solid #f1f3f4; }

/* welcome pop-up: outlines instead of filled backgrounds — step numbers and feature icons get a thin grey ring,
   the number / icon itself in blue */
.hrv2 #hrv2-welcome .hrv2-w-num { background: transparent !important; border: 1.5px solid #d5dae0; color: var(--hrv2-blue) !important; }
.hrv2 #hrv2-welcome .hrv2-w-icon { background: transparent !important; border: 1.5px solid #d5dae0; color: var(--hrv2-blue) !important; }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-pin { margin-top: 2px; } /* address confirmation: pin lines up with the first line */

/* address confirmation card: the street larger and darker, city/state/ZIP softer underneath; pin lined up with the street */
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) { margin-top: 8px !important; gap: 7px !important; }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-lines { gap: 2px; }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-line:first-child { font-size: 15px !important; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--hrv2-ink); }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-line + .hrv2-addr-line { font-size: 13.5px !important; font-weight: 500; line-height: 1.35; color: var(--hrv2-muted); }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-pin { margin-top: 2px; }
.hrv2 :is(#hrv-confirm-addr, #hmv-confirm-addr) .hrv2-addr-pin svg { width: 15px; height: 15px; }

/* ==========================================================================
   Guide: "Your max hail" from the report at the top (hail-report-verify-guide.js).
   With a report it stays at the top while the sizes scroll under it; the closest
   size card is outlined in blue and scrolled to. "How to read" opens a pop-up.
   ========================================================================== */
.hrv2-guide-top { margin: 0 0 12px; background: #fff; }
.hrv2-guide-top.is-sticky { position: sticky; top: 0; z-index: 3; margin-top: -12px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 0; }
.hrv2-guide-top.is-stuck { box-shadow: 0 1px 0 var(--hrv2-line); }
.hrv2-guide-toprow { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 0 0 14px; }
/* "How to read": on the right, just under the "Your max hail" card */
.hrv2-guide-howto-row { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.hrv2-guide-label { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--hrv2-ink); } /* the same title style as the other tabs */
.hrv2-guide-howto {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.3 'Public Sans', sans-serif; color: var(--hrv2-blue); white-space: nowrap;
}
.hrv2-guide-howto:hover { color: var(--hrv2-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.hrv2-guide-howto:focus-visible, .hrv2-mine:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; border-radius: 6px; }

.hrv2-mine {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0;
  border: 1px solid var(--hrv2-line); border-radius: 13px; background: #fff; text-align: left; font-family: 'Public Sans', sans-serif;
}
button.hrv2-mine { cursor: pointer; transition: border-color .15s; }
button.hrv2-mine:hover { border-color: #c6cdd5; }
.hrv2-mine-size { flex: none; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--hrv2-ink); }
.hrv2-mine-unit { margin-left: 1px; font-size: 17px; vertical-align: top; line-height: 1; color: #b3b8c1; } /* the inch mark, as on the report */
.hrv2-mine-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hrv2-mine-text strong { font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--hrv2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrv2-mine-head { display: flex; align-items: center; gap: 8px; min-width: 0; } /* name on the left, level pill on the right like the size cards */
.hrv2-mine-head strong { flex: 0 1 auto; max-width: 100%; }
.hrv2-mine-sub { display: flex; align-items: flex-start; gap: 4px; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--hrv2-muted); }
.hrv2-mine-sub svg { flex: none; margin-top: 1.5px; color: #80868b; }
/* the address on two lines: street, then city, state ZIP */
.hrv2-mine-lines { display: flex; flex-direction: column; min-width: 0; }
.hrv2-mine-lines span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrv2-mine-pill { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.hrv2-mine-empty .hrv2-mine-text strong { white-space: normal; }
.hrv2-mine-empty .hrv2-mine-sub { font-size: 13px; line-height: 1.5; }

/* the closest size on the scale */
.hrv2 :is(#hrv-guide-list, #hmv-guide-list) > div.hrv2-guide-match { border-color: var(--hrv2-blue) !important; box-shadow: 0 0 0 1px var(--hrv2-blue); }
.hrv2-match-tag {
  display: flex; align-items: center; gap: 6px; margin: -2px 0 9px;
  font-size: 10.5px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hrv2-blue);
}
.hrv2-match-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* "How to read hail reports" pop-up: numbered directions in a card, outlined like the welcome pop-up */
.hrv2-read-steps { list-style: none; margin: 0; padding: 4px 16px; border: 1px solid var(--hrv2-line); border-radius: 14px; background: #fff; }
.hrv2-read-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.hrv2-read-steps li + li { border-top: 1px solid #f1f3f4; }
.hrv2-read-steps .hrv2-w-num { margin-top: 0; background: transparent !important; border: 1.5px solid #d5dae0; color: var(--hrv2-blue) !important; }
.hrv2-read-steps strong { display: block; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--hgw-heading); }
.hrv2-read-steps p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hgw-desc); text-wrap: pretty; }
.hrv2-read-note { margin-top: 20px; }
.hrv2-read-note .hrv2-w-icon { background: transparent !important; border: 1.5px solid #d5dae0; color: var(--hrv2-blue) !important; }
@media (max-width: 899px) { .hrv2-read-steps p { font-size: 13px; } }

/* Guide with no report yet (no search, or a search that ended without one): the same default view as the
   Report tab — no title bar, "No report yet" with the Search button and data note, centred on desktop and
   fitted by the sheet on phones (sheet script) */
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips):not(.hrv2-guide-noreport) .hrv2-guide-empty { display: none !important; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips).hrv2-guide-noreport .hrv2-guide-empty { display: flex; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips).hrv2-guide-noreport :is(#hrv2-guide-top, :is(#hrv-guide-list, #hmv-guide-list), .hailscroll > p:last-child) { display: none !important; }
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) .hrv2-guide-empty .hrv2-empty-source { margin-top: 12px !important; }
@media (min-width: 900px) {
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) > div:first-child { display: none !important; }
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips).hrv2-guide-noreport > .hailscroll {
    flex: 1 0 auto !important; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 40px 88px !important;
  }
}
@media (max-width: 899px) {
  /* only the ✕ stays, top right, like the Report sheet */
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) > div:first-child {
    position: absolute; top: 0; right: 0; z-index: 3; padding: 16px 16px 0 0 !important; background: transparent !important; border: 0 !important;
  }
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) > div:first-child > div > div:first-child { display: none !important; }
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips).hrv2-guide-noreport > .hailscroll { padding: 38px 20px 24px !important; }
}

/* Guide with a report: no "Hail Size Guide" title, so "Your max hail" starts where the other tabs' first line does
   (desktop 100px below the top row's top, like the Report tab; phones 56px down the sheet) */
@media (min-width: 900px) {
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips):not(.hrv2-guide-noreport) > .hailscroll { padding-top: 24px !important; }
}
@media (max-width: 899px) {
  .hrv2 :is(#hrv-panel-tips, #hmv-panel-tips):not(.hrv2-guide-noreport) > .hailscroll { padding-top: 56px !important; }
}
/* the Guide scrolls as one piece like the other tabs: "Your max hail" and its card go up with the sizes
   (no card held at the top, no line under it) */
.hrv2 :is(#hrv-panel-tips, #hmv-panel-tips) .hrv2-guide-top.is-sticky { position: static; margin: 0 0 12px; padding: 0; box-shadow: none; }

/* phones: Profile and the Search form scroll as one piece (title and ✕ go up with the content), like desktop;
   Report, Local Pros and Guide keep their own scroll area and the sheet script moves the ✕ with it */
@media (max-width: 899px) {
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile),
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .hrv2 :is(#hrv-panel-profile, #hmv-panel-profile) > :is(div:first-child, .hailscroll),
  .hrv2 .hrv2-app[data-view="search"] :is(#hrv-panel-search, #hmv-panel-search) > :is(div:first-child, .hailscroll) { flex: none !important; overflow: visible !important; }
}

/* Report and partial report (coverage incomplete): the address card looks exactly like the address
   confirmation card — white, hairline border, a quiet uppercase label ("Radar indicated hail activity at"
   in place of "Address found"), then the pin, the street and city / state / ZIP. The partial report uses the
   same label, with its coverage explanation under the address. */
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-banner, #hmv-status-banner) {
  display: block !important; padding: 14px 15px !important; border-radius: 13px !important; background: #fff !important; border: 1px solid #e8eaed !important;
}
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-iconwrap, #hmv-status-iconwrap) { display: none !important; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-banner, #hmv-status-banner) > div:last-child { display: flex; flex-direction: column; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-title, #hmv-status-title) {
  font-size: 10.5px !important; font-weight: 700 !important; line-height: normal !important; letter-spacing: .06em; text-transform: uppercase; color: #9aa0a6 !important;
}
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub):has(.hrv2-addr-line), .hrv2-banner-addr) {
  order: 1; margin-top: 8px !important; gap: 7px !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #3c4043 !important; white-space: normal !important;
}
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub), .hrv2-banner-addr) .hrv2-addr-lines { gap: 2px; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub), .hrv2-banner-addr) .hrv2-addr-line:first-child { font-size: 15px !important; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--hrv2-ink); }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub), .hrv2-banner-addr) .hrv2-addr-line + .hrv2-addr-line { font-size: 13.5px !important; font-weight: 500; line-height: 1.35; color: var(--hrv2-muted); }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub), .hrv2-banner-addr) .hrv2-addr-pin { margin-top: 2px; }
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(:is(#hrv-status-sub, #hmv-status-sub), .hrv2-banner-addr) .hrv2-addr-pin svg { width: 15px; height: 15px; }
/* partial report: the coverage explanation sits under the address */
.hrv2 :is(#hrv-result, #hmv-result):has(:is(#hrv-report, #hmv-report):not([hidden])) :is(#hrv-status-sub, #hmv-status-sub):not(:has(.hrv2-addr-line)) {
  order: 2; margin-top: 10px !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #80868b !important;
}

/* ==========================================================================
   Site menu: a round ⋮ button — top-right of the sidebar's top row on desktop (in place of the ✕),
   right end of the top bar on phones — opens the list of pages under it (menu script)
   ========================================================================== */
.hrv2-menu-btn {
  flex: none; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--hrv2-muted); cursor: pointer; transition: color .15s;
}
.hrv2-menu-btn:hover, .hrv2-menu-btn[aria-expanded="true"] { color: var(--hrv2-ink); } /* no background: only the dots darken */
.hrv2-menu-btn:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-header .hrv2-menu-btn { margin-left: auto; }

.hrv2-sitemenu {
  position: fixed; z-index: 70; width: 248px; padding: 6px; background: #fff; border: 1px solid var(--hrv2-line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(32,33,36,.18), 0 2px 6px rgba(32,33,36,.08);
  transform-origin: top right; animation: hrv2-menu-in .16s ease-out both;
}
.hrv2-sitemenu[hidden] { display: none; }
@keyframes hrv2-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hrv2-sitemenu { animation: none; } }
.hrv2-sitemenu a {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px;
  font: 600 14.5px/1.2 'Public Sans', sans-serif; color: var(--hrv2-ink); text-decoration: none;
}
.hrv2-sitemenu a svg { flex: none; color: var(--hrv2-muted); }
.hrv2-sitemenu a:hover, .hrv2-sitemenu a:focus-visible { background: #f1f3f4; outline: none; }
.hrv2-sitemenu-sep { display: block; height: 1px; margin: 6px 6px; background: var(--hrv2-line); }
.hrv2-sitemenu a.hrv2-sitemenu-join, .hrv2-sitemenu a.hrv2-sitemenu-join svg { color: var(--hrv2-blue); }

/* ==========================================================================
   "How it works" nudge (welcome script) — in place of opening the pop-up on arrival, the link draws
   the eye until it is opened: a light blue pill, a soft halo pulsing around the ? icon, and the icon
   giving a small wiggle three times. Reduced motion: the pill only.
   ========================================================================== */
.hrv2-howto { position: relative; transition: background-color .4s; }
.hrv2-howto.is-nudging { background: rgba(18,119,225,.08); }
.hrv2-howto.is-nudging:hover { background: rgba(18,119,225,.13); }
.hrv2-howto.is-nudging::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  pointer-events: none; animation: hrv2-howto-halo 2.4s ease-out infinite;
}
.hrv2-howto.is-nudging svg { transform-origin: 50% 55%; animation: hrv2-howto-wiggle 4.8s ease-in-out .3s 3; }
@keyframes hrv2-howto-halo {
  0% { box-shadow: 0 0 0 0 rgba(18,119,225,.45); }
  70% { box-shadow: 0 0 0 10px rgba(18,119,225,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,119,225,0); }
}
@keyframes hrv2-howto-wiggle {
  0%, 14%, 100% { transform: none; }
  2.5% { transform: rotate(-16deg) scale(1.08); }
  5% { transform: rotate(13deg) scale(1.08); }
  7.5% { transform: rotate(-9deg) scale(1.04); }
  10% { transform: rotate(5deg); }
  12% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .hrv2-howto.is-nudging::before, .hrv2-howto.is-nudging svg { animation: none; } }

/* exit pop-up before any search: the Search button's two-line data note under "Set up my search" */
.hrv2-w-foot .hrv2-form-source { margin-top: 10px; }

/* ==========================================================================
   ZIP page (/maps/…/verify/, <body data-hrv2-prefix="hmv">): the pieces only it has
   ========================================================================== */
/* the affected ZIPs moved into a pop-up: the page's own chip area stays hidden */
.hrv2 #hmv-idle { display: none !important; }
/* "Select an affected ZIP": a quiet outline button under Search, with the number of ZIPs */
.hrv2-zippick-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px; margin-top: 2px; padding: 0 16px;
  border: 1.5px solid #d5dae0; border-radius: 12px; background: #fff; color: var(--hrv2-ink-2);
  font: 700 14.5px 'Public Sans', sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.hrv2-zippick-btn[hidden] { display: none; }
.hrv2-zippick-btn:hover { background: #f8f9fa; border-color: #c6cdd5; }
.hrv2-zippick-btn:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }
.hrv2-zippick-btn svg { flex: none; color: var(--hrv2-blue); }
.hrv2-zippick-count { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #f1f3f4; color: var(--hrv2-muted); font-size: 12.5px; font-weight: 700; }
@media (max-width: 899px) { .hrv2-zippick-btn { font-size: 15px; } }

/* the pop-up's ZIP list: ZIP codes only, three to a row, as soft tiles (like the form fields) */
.hrv2 .hrv2-zippick .hrv2-filter-card { width: 360px; }
.hrv2-zip-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; }
.hrv2-zip-chip {
  height: 46px; padding: 0 8px; border: 0; border-radius: 12px; background: #f1f3f4; cursor: pointer;
  font: 600 15px 'Public Sans', sans-serif; letter-spacing: .02em; color: var(--hrv2-ink); transition: background-color .15s, color .15s, box-shadow .15s;
}
.hrv2-zip-chip:hover { background: var(--hrv2-blue-tint); color: var(--hrv2-blue-dark); }
.hrv2-zip-chip:active { box-shadow: inset 0 0 0 2px var(--hrv2-blue); }
.hrv2-zip-chip:focus-visible { outline: 2px solid var(--hrv2-blue); outline-offset: 2px; }

/* the report's ZIP card: ZIP and its city under the label (results script) */
.hrv2 #hmv-result:has(#hmv-report:not([hidden])) .hrv2-banner-addr { display: flex; }

.hrv2 #hmv-check-address { margin-top: 10px !important; }
/* report hero: when "Widespread hail" wraps on a narrow phone, both numbers still line up at the bottom */
.hrv2 #hmv-report > div:first-child > div:first-child > div { display: flex; flex-direction: column; justify-content: space-between; }

/* ZIP page: which storm and area the map is (Search and Report), and that it covers this storm only */
.hrv2-event { display: flex; flex-wrap: wrap; gap: 6px; }
.hrv2-event-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px;
  background: #f1f3f4; color: var(--hrv2-ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hrv2-event-chip svg { flex: none; color: #6f9fd8; }
.hrv2-event-search { display: none; }
/* Search: the storm's date and area as a quiet grey line under "Check your ZIP code" (no pill) */
.hrv2 .hrv2-app[data-view="search"] .hrv2-event-search { display: flex; margin: 6px 0 0; }
.hrv2-event-search .hrv2-event-chip { height: auto; padding: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 500; color: var(--hrv2-muted); }
.hrv2-event-search .hrv2-event-chip svg { color: currentColor; }
/* "this storm only" tip: slides in above the ZIP box the first time it is used, then fades by itself */
.hrv2-zip-form { position: relative; }
/* map: the card shown when a hail area is clicked — points to the ZIP search for the hail size */
.hrv2-hail-pop .maplibregl-popup-content {
  padding: 14px 16px 14px; border-radius: 14px; box-shadow: 0 12px 32px rgba(11, 46, 78, .26);
  font-family: 'Public Sans', system-ui, sans-serif; color: #3c4043; text-align: left;
}
.hrv2-hail-pop .hrv2-w-close {
  top: 10px; right: 10px; width: 32px; height: 32px; color: #80868b;
}
.hrv2-hail-pop .hrv2-w-close:hover { background: #e8eaed; color: #202124; }
.hrv2-hail-pop-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 30px; }
.hrv2-hail-pop-body strong { display: block; margin: 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: #0b2e4e; }
.hrv2-hail-pop-body p { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; color: #5f6368; }
.hrv2-hail-pop-btn {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; margin: 0; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #1277e1; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(18, 119, 225, .3);
}
.hrv2-hail-pop-btn:hover { background: #0f62bd; }
.hrv2-hail-pop-btn:focus-visible { outline: 2px solid #1277e1; outline-offset: 2px; }
.hrv2-scope-tip {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 5;
  display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border-radius: 14px;
  background: #0b2e4e; color: rgba(255, 255, 255, .9); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(11, 46, 78, .28);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.hrv2-scope-tip[hidden] { display: none; }
.hrv2-scope-tip.is-shown { opacity: 1; transform: none; }
/* while the tip is open, the heading and the storm's date line behind it fade out (a long date line could otherwise
   peek out past the tip's right edge, next to the sheet's ✕) */
.hrv2-search-heading, .hrv2-event-search { transition: opacity .2s ease; }
.hrv2-scope-tip-open :is(.hrv2-search-heading, .hrv2-event-search) { opacity: 0; }
.hrv2-scope-tip::after {   /* pointer down to the ZIP box */
  content: ""; position: absolute; left: 26px; top: 100%; border: 7px solid transparent; border-top-color: #0b2e4e;
}
/* the icon sits level with the first line of the message; "Don't show again" just under it on the right */
.hrv2-scope-tip-row { display: flex; align-items: flex-start; gap: 9px; }
.hrv2-scope-tip-row > svg { flex: none; margin-top: 1px; color: #8cc2ff; }
.hrv2-scope-tip-text { flex: 1 1 auto; min-width: 0; }
.hrv2-scope-tip b { font-weight: 700; color: #fff; }
.hrv2-scope-tip-off {
  display: block; margin: 4px 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: #8cc2ff; text-decoration: underline; text-underline-offset: 3px;
}
.hrv2-scope-tip-off:hover { color: #fff; }
.hrv2-scope-tip-off:focus-visible { outline: 2px solid #8cc2ff; outline-offset: 2px; border-radius: 3px; }
/* phones/tablets: stop short of the sheet's ✕ (top right), so the tip never runs under it; phones have less room
   between the grab handle and the ZIP box, so a little less padding */
@media (max-width: 899px) { .hrv2-scope-tip { right: 16px; } }
@media (max-width: 599px) { .hrv2-scope-tip { padding: 14px 16px; } }
/* very narrow phones, where the message wraps to three lines and the tip would run up under the grab handle
   (set by hail-map-verify-zips.js): tighter, with "Don't show again" at the right end of the last line */
.hrv2-scope-tip.is-compact { padding: 10px 14px; }
.hrv2-scope-tip.is-compact .hrv2-scope-tip-off { float: right; margin: 0 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .hrv2-scope-tip { transition: none; transform: none; } }
.hrv2-scope-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #80868b; text-align: center; }
.hrv2-scope-note a { color: var(--hrv2-blue); font-weight: 600; text-decoration: none; }
.hrv2-scope-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the scope note points at "Check Your Home" when the report shows it (no local pros), else links to it */
.hrv2 #hmv-report:has(#hmv-check-address[hidden]) .hrv2-scope-btn,
.hrv2 #hmv-report:has(#hmv-check-address:not([hidden])) .hrv2-scope-link { display: none; }
.hrv2-nowrap { white-space: nowrap; } /* keeps "City, ST" on one line */

/* Professional exit offer: public vs registered. A navy pill with a gold star, then a comparison table where
   the Registered column is highlighted in blue (most valuable rows first), then the Learn More footer. */
/* The "Join as a Pro" pop-up (#hrv2-join) shares this frame: width, spacing, pill, header and footer. */
:is(#hrv2-pro-exit, #hrv2-join) { padding: 28px; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-welcome-card { width: 580px; border: 0; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head { padding: 32px 64px 16px 32px; background: #fff; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head h2 { margin-top: 14px; font-size: 27px; line-height: 1.2; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head > p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-close { top: 22px; right: 22px; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-pro-exit-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px;
  background: var(--hgw-heading); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-pro-exit-badge svg { flex: none; filter: drop-shadow(0 0 5px rgba(251,191,36,.55)); }
#hrv2-pro-exit .hrv2-w-body { padding: 4px 32px 24px; }
/* Join as a Pro: each group label sits over short feature rows split by fine lines, like the comparison table */
#hrv2-join .hrv2-w-body { padding: 4px 32px 22px; }
#hrv2-join .hrv2-w-section { padding: 14px 0 0; }
#hrv2-join .hrv2-w-section + .hrv2-w-section { margin-top: 10px; border-top: 0; }
#hrv2-join .hrv2-w-label { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
#hrv2-join .hrv2-w-feature { align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #e8edf3; }
#hrv2-join .hrv2-w-feature + .hrv2-w-feature { margin-top: 0; }
#hrv2-join .hrv2-w-feature p { margin-top: 2px; }
.hrv2-pro-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.hrv2-pro-table th, .hrv2-pro-table td { padding: 11px 12px; text-align: center; vertical-align: middle; }
.hrv2-pro-table thead th { padding: 10px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hgw-muted); }
.hrv2-pro-table thead th:first-child, .hrv2-pro-table tbody th { text-align: left; }
.hrv2-pro-table tbody th { font-weight: 700; color: var(--hgw-heading); }
.hrv2-pro-table tbody td { color: var(--hgw-desc); }
.hrv2-pro-table tbody th, .hrv2-pro-table tbody td { border-top: 1px solid #e8edf3; }
.hrv2-pro-table .is-pro { width: 32%; }
.hrv2-pro-table thead .is-pro { color: #fff; background: linear-gradient(135deg, #1277e1, #134a85); border-radius: 12px 12px 0 0; }
.hrv2-pro-table tbody .is-pro { background: #f3f8fe; color: var(--hrv2-blue); font-weight: 800; }
.hrv2-pro-table tbody tr:last-child .is-pro { border-radius: 0 0 12px 12px; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-foot { padding: 20px 32px 24px; background: #f5f8fc; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-start { gap: 10px; height: 50px; }
:is(#hrv2-pro-exit, #hrv2-join) .hrv2-join-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: #52677f; }
@media (max-width: 599px) {
  :is(#hrv2-pro-exit, #hrv2-join) { padding: 16px; }
  :is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head { padding: 26px 56px 12px 20px; }
  :is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head h2 { font-size: 23px; }
  :is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-head > p { font-size: 13.5px; }
  :is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-close { top: 16px; right: 14px; }
  #hrv2-pro-exit .hrv2-w-body { padding: 2px 14px 18px; }
  #hrv2-join .hrv2-w-body { padding: 2px 20px 18px; }
  #hrv2-join .hrv2-w-feature { gap: 12px; padding: 11px 0; }
  .hrv2-pro-table { font-size: 12.5px; }
  .hrv2-pro-table th, .hrv2-pro-table td { padding: 10px 6px; line-height: 1.3; }
  .hrv2-pro-table thead th { padding: 9px 6px; font-size: 10px; letter-spacing: .04em; }
  .hrv2-pro-table thead th:first-child, .hrv2-pro-table tbody th { padding-left: 6px; }
  .hrv2-pro-table .is-pro { width: 30%; }
  :is(#hrv2-pro-exit, #hrv2-join) .hrv2-w-foot { padding: 16px 16px 20px; }
}
/* text only for screen readers */
.hrv2-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }




/* Preserve the screenshot's three-column comparison and ten feature rows. */
#hrv2-pro-exit .hrv2-pro-cell-note { display: block; margin-top: 3px; color: var(--hgw-desc); font-size: 11px; font-weight: 400; line-height: 1.4; }
#hrv2-pro-exit .hrv2-pro-table { table-layout: fixed; }
#hrv2-pro-exit .hrv2-pro-table th:first-child { width: 40%; }
#hrv2-pro-exit .hrv2-pro-table .is-pro { width: 32%; }
#hrv2-pro-exit .hrv2-pro-table tbody td { line-height: 1.4; }
#hrv2-pro-exit .hrv2-w-foot .hrv2-pro-access-note { margin: 0 0 14px; color: var(--hgw-desc); font-size: 11.5px; line-height: 1.5; text-align: left; }

#hrv2-pro-exit .hrv2-pro-table tbody td:nth-child(2) { white-space: nowrap; font-size: 12px; }

/* Property-owner exit comparison; preserve existing modal controls and routing. */
#hrv2-precise { padding: 28px; }
#hrv2-precise .hrv2-welcome-card { width: 580px; }
#hrv2-precise .hrv2-w-head { padding: 32px 60px 20px 32px; }
#hrv2-precise .hrv2-w-body { padding: 0 32px 28px; }
#hrv2-precise .hrv2-owner-table { table-layout: fixed; }
#hrv2-precise .hrv2-owner-table th:first-child { width: 38%; }
#hrv2-precise .hrv2-owner-table .is-pro { width: 31%; }
#hrv2-precise .hrv2-owner-table td { line-height: 1.4; overflow-wrap: normal; }
#hrv2-precise .hrv2-w-foot { padding: 22px 32px 26px; background: #f5f8fc; }
#hrv2-precise .hrv2-join-note { margin: 12px 0 0; color: #52677f; font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 599px) {
  #hrv2-precise { padding: 16px; }
  #hrv2-precise .hrv2-w-head { padding: 28px 52px 20px 24px; }
  #hrv2-precise .hrv2-w-body { padding: 0 16px 24px; }
  #hrv2-precise .hrv2-owner-table th, #hrv2-precise .hrv2-owner-table td { padding: 12px 6px; font-size: 12px; }
  #hrv2-precise .hrv2-owner-table thead th { font-size: 10px; }
  #hrv2-precise .hrv2-w-foot { padding: 20px 24px 24px; }
}
/* narrowest phones: "50+ signals" stays on one line in the Local pro column */
@media (max-width: 359px) {
  #hrv2-precise .hrv2-owner-table .is-pro { padding-left: 4px; padding-right: 4px; }
}
/* short screens (a phone held sideways, short laptop windows): tighter spacing so more of the table shows
   above the pinned "Find a local pro" footer */
@media (max-height: 500px) {
  #hrv2-precise { padding: 12px; }
  #hrv2-precise .hrv2-w-head { padding: 18px 56px 10px 24px; }
  #hrv2-precise .hrv2-w-head h2 { font-size: 20px; }
  #hrv2-precise .hrv2-w-head > p { font-size: 13.5px; }
  #hrv2-precise .hrv2-w-close { top: 12px; right: 12px; }
  #hrv2-precise .hrv2-w-body { padding-bottom: 14px; }
  #hrv2-precise .hrv2-owner-table th, #hrv2-precise .hrv2-owner-table td { padding-top: 8px; padding-bottom: 8px; }
  #hrv2-precise .hrv2-w-foot { padding: 12px 24px 14px; }
  #hrv2-precise .hrv2-w-start { height: 44px; }
  #hrv2-precise .hrv2-join-note { margin-top: 8px; }
}