/* HomePilot product system: UI type, deliberate surfaces, finite state motion.
   Presentation only. Never override hidden, auth, role, or consent state. */
:root {
  --hp-product-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hpc-ui: var(--hp-product-font);
  --hpc-display: var(--hp-product-font);
  --hp-font-display: var(--hp-product-font);
  --hp-font-ui: var(--hp-product-font);
  --hp-product-navy: #102637;
  --hp-product-cream: #f5f3ed;
  --hp-product-paper: #fffdf8;
  --hp-product-gold: #dfc28a;
}
html body {font-family:var(--hp-product-font)}
html body :is(#page-search,#page-analyzer,#page-my-homepilot,#hp2OwnedRoles,#hp2ConversationRoot) :is(h1,h2,h3,h4),
html body.connect-body.connect-one-page.hp2-core-connect :is(#connectLanding,#connectWorkspace) :is(h1,h2,h3,h4) {
  font-family:var(--hp-product-font)!important;font-weight:700;letter-spacing:-.035em;line-height:1.15;
}
html body #page-my-homepilot .hp-workspace-title {font-family:var(--hp-product-font)!important}
html body :is(#page-my-homepilot,#connectWorkspace) .hp-workspace-identity h2 {font-family:var(--hp-product-font)!important;font-weight:700!important}
html body.hp2-core-connect .hp2-owned-roles .hp-workspace-identity h2 {font:700 28px/1.15 var(--hp-product-font)!important}
@media(max-width:600px){html body.hp2-core-connect .hp2-owned-roles .hp-workspace-identity h2 {font-size:24px!important}html body.hp2-core-connect .hp2-owned-roles .hp-workspace-identity {padding-top:10px}html body.hp2-core-connect #professionalHomeSummary {padding:16px!important}}
html body #page-my-homepilot .hpe-mobile-nav nav a {font-family:var(--hp-product-font);font-size:22px;font-weight:600}
html body :is(.auth-logo-text,.connect-brand,.hpe-wordmark,.brand,.hp2-wordmark) {font-family:Georgia,"Times New Roman",serif!important}
html body :is(#page-search,#page-analyzer) .page-header {padding-block:26px!important}
html body :is(#page-search,#page-analyzer) .page-header h1 {font-size:clamp(30px,3.2vw,44px)!important;font-weight:720!important;margin-bottom:12px}
html body :is(#page-search,#page-analyzer) .page-header p {font:16px/1.6 var(--hp-product-font);max-width:54ch;margin-left:0!important;text-transform:none;letter-spacing:0}
html body :is(#page-search,#page-analyzer) .page-header::after {display:none}
html body :is(#page-search,#page-analyzer) .page-header .gold-line {display:none}
html body :is(#page-search,#page-analyzer) .page-header h1 {margin-top:0}
html body #page-analyzer .panel-header {background:#102637!important;color:#fffdf8!important;border-radius:10px 10px 0 0!important}
html body #page-analyzer .panel-header :is(h2,h3,span) {color:#fffdf8!important}
@media(min-width:600px) and (max-width:999px){html body #page-analyzer .form-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
html body :is(#page-search,#page-analyzer) .section {padding-block:24px!important}
html body :is(#page-search,#page-analyzer,#connectWorkspace) :is(input,select,textarea,button) {font-family:var(--hp-product-font)}
html body :is(#page-search,#page-analyzer) :is(.panel-header,.analyzer-panel,.panel-card,.mls-filters-bar) {border-radius:10px!important}

/* Find stays map-led before and after a search. Existing cards retain all data. */
html body #page-search .mls-smart-search-intro {display:none}
html body #page-search .mls-filters-bar {padding:18px!important;margin-bottom:20px}
html body #page-search .mls-filters-row {gap:12px!important;align-items:end}
html body #page-search .mls-search-quickstart {margin:16px 0;max-width:none;box-shadow:none;padding:20px!important}
html body #page-search .mls-state {padding:28px 24px!important;min-height:0!important;text-align:left}
html body #page-search .mls-state-title {font:700 25px/1.2 var(--hp-product-font)!important}
html body #page-search .mls-state-icon {display:none}
html body #page-search .hp-search-layout {gap:24px;align-items:start}
html body #page-search .hp-search-map {border:1px solid #b9c7c7;border-radius:12px;overflow:hidden;background:#fffdf8;box-shadow:0 8px 24px #1026370a}
html body #page-search .hp-search-map summary {background:#102637;color:#fffdf8;padding:16px 20px;font-weight:700;min-height:48px}
html body #page-search .hp-map-status {padding:16px 20px;margin:0;color:#304e5c;font-size:14px;line-height:1.5}
html body #page-search .hp-map-canvas {height:clamp(340px,58vh,650px);min-height:340px;max-height:none;background:#dce4dc}
html body #page-search .hp-map-disclosure {font-size:12px;line-height:1.5;padding:14px 20px;margin:0;color:#52636b}
html body #page-search .hp-map-title {background:#102637!important;color:#fffdf8!important;-webkit-text-fill-color:#fffdf8!important;padding:16px 20px;margin:0;font:700 18px/1.4 var(--hp-product-font)}
.hp-map-views {display:none}
html body #page-search .hp-search-map.is-unavailable .hp-map-canvas {display:none!important}
@media(min-width:750px){
  html body #page-search .hp-search-layout.is-map-open {display:grid;grid-template-columns:minmax(280px,42%) minmax(0,1fr)}
  html body #page-search .hp-search-layout.is-map-open .hp-search-map {grid-column:2;grid-row:1;order:initial;position:sticky;top:90px}
  html body #page-search .hp-search-layout.is-map-open .hp-search-list-pane {grid-column:1;grid-row:1;min-width:0}
  html body #page-search .hp-search-layout.is-map-open .mls-grid {grid-template-columns:1fr!important}
  html body #page-search .hp-map-results-return {display:none}
}
@media(max-width:749px){
  .hp-map-views {display:flex;gap:4px;padding:4px;background:#e5e7e2;border-radius:10px;margin:16px 0;position:sticky;top:0;z-index:450}
  .hp-map-views button {flex:1;min-height:48px;border:0;border-radius:7px;background:transparent;color:#102637;font:600 16px/1.4 var(--hp-product-font)}
  .hp-map-views button[aria-pressed=true] {background:#102637;color:#fffdf8}
  html body #page-search .hp-search-layout[data-view=list] .hp-search-map,
  html body #page-search .hp-search-layout[data-view=map] .hp-search-list-pane {display:none}
}
html body #page-search .hp-map-card {transition:background-color .18s,box-shadow .18s;border-radius:10px}
html body #page-search .hp-map-card.is-selected {box-shadow:0 0 0 3px #b28b47;background:#f1e3c7}
html body #page-search .hp-map-marker {transition:background-color .18s,box-shadow .18s}
html body #page-search .hp-map-marker.is-selected {box-shadow:0 0 0 4px #dfc28a}
html body #page-search .mls-listing-card .mls-listing-card-badge {color:#fff!important;background:#174b38!important}
html body #page-search .mls-listing-card .mls-listing-card-badge.mls-status-pending {background:#644b1c!important}
/* National data cards have no licensed photography. Give the map visual priority. */
html body #page-search .mls-listing-card--national {border:1px solid #c8d0cd;background:#fffdf8;box-shadow:0 5px 18px #1026370b;transform:none}
html body #page-search .mls-listing-card--national .mls-listing-card-body {padding:20px 22px!important}
html body #page-search .mls-national-card-top {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px 0;color:#335668;font:600 12px/1.3 var(--hp-product-font)}
html body #page-search .mls-national-card-status {color:#174b38;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
html body #page-search .mls-national-card-location {text-align:right}
html body #page-search .mls-listing-card--national .mls-listing-card-price {font:700 clamp(26px,2.5vw,34px)/1.15 var(--hp-product-font)!important;color:#102637!important;margin:0 0 8px}
html body #page-search .mls-listing-card--national .mls-listing-card-address {font-size:17px;white-space:normal;line-height:1.35;color:#102637}
html body #page-search .mls-listing-card--national .mls-listing-card-citystate {margin:3px 0 10px}
html body #page-search .mls-national-card-type {font-size:13px;color:#52636b;margin-bottom:14px}
html body #page-search .mls-listing-card--national .mls-listing-card-facts {margin:0;padding-top:13px;flex-wrap:wrap;gap:8px 15px}
html body #page-search .mls-listing-card--national .mls-listing-card-source {font-size:11px;margin-top:14px;color:#52636b}
html body #page-search .mls-national-card-footer {display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap;border-top:1px solid #e6e1d6;padding-top:13px;margin-top:14px;color:#8a6020;font-size:13px;font-weight:700}
html body #page-search .mls-national-card-footer small {color:#52636b;font-size:11px;font-weight:400}
html body #page-search .hp-map-card.is-selected .mls-listing-card--national {border-color:#a8782d;box-shadow:0 0 0 2px #d3ae65,0 8px 22px #10263716}
html body #page-search .mls-listing-card--national:hover,html body #page-search .mls-listing-card--national:focus-visible {border-color:#a8782d;box-shadow:0 0 0 2px #d3ae65,0 8px 22px #10263716}
html body #page-search .leaflet-popup-content a {color:#174963;text-underline-offset:3px}
@media(min-width:1000px){
  html body #page-search .hp-search-layout.is-map-open {display:grid;grid-template-columns:minmax(320px,42%) minmax(0,58%);height:clamp(620px,calc(100dvh - 190px),1050px);align-items:stretch}
  html body #page-search .hp-search-layout.is-map-open .hp-search-list-pane {overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#b9c7c7 transparent;padding:3px 10px 8px 3px;outline-offset:-3px}
  html body #page-search .hp-search-list-pane:focus-visible {outline:3px solid #217b9a}
  html body #page-search .hp-search-list-pane .mls-search-toolbar {position:sticky;top:0;z-index:10;background:#f7f5ef;padding:12px 4px 14px}
  html body #page-search .hp-search-layout.is-map-open .hp-search-map {order:initial;position:relative;top:auto;display:flex;flex-direction:column;height:100%}
  html body #page-search .hp-search-map .hp-map-canvas {flex:1;min-height:320px;height:auto}
  html body #page-search .hp-search-layout.is-map-open .mls-grid {grid-template-columns:1fr!important}
}
@media(max-width:999px){
  html body #page-search .mls-filters-row {display:grid!important;grid-template-columns:1fr 1fr!important}
  html body #page-search .mls-smart-location-field,
  html body #page-search .mls-filters-actions {grid-column:1/-1}
  html body #page-search .mls-filters-collapsed .mls-filters-row {display:grid!important}
  html body #page-search .mls-filters-collapsed .mls-filters-actions {display:flex!important}
  html body #page-search .mls-filters-collapsed .mls-filter-field:not(:has(#mls-f-city)) {display:none}
  html body #page-search .mls-filters-toggle {margin-bottom:12px}
  html body #page-search .hp-map-canvas {height:360px}
  html body #page-search .hp-search-layout {display:flex;flex-direction:column;align-items:stretch}
  html body #page-search .hp-search-map {order:-1}
}
/* A missing location is a compact explanation, never a misleading U.S. map. */
@media(max-width:749px){
 html body #page-search .hp-search-layout:has(.is-unavailable) #mls-search-results,
 html body #page-search .hp-search-layout:has(.is-unavailable) .hp-search-map {display:block}
}
@media(min-width:750px) and (max-width:999px){
 html body #page-search .hp-search-layout.is-map-open {display:grid;grid-template-columns:minmax(280px,42%) minmax(0,1fr)}
}

/* Explicit foreground/background pairs fix inherited dark-on-dark choices. */
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode] {
  background:#102637!important;color:#fffdf8!important;border:1px solid #899da7!important;
}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode] :is(span,strong,small) {color:inherit!important;-webkit-text-fill-color:currentColor!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode]:hover {background:#25485c!important;color:#fff!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode][aria-selected=true] {background:#dfc28a!important;color:#102637!important;border-color:#dfc28a!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode]:focus-visible {outline:3px solid #217b9a;outline-offset:4px}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore [data-connect-guest-mode]:disabled {opacity:1;background:#dae0df!important;color:#40545d!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore .connect-approved-pills span {background:#102637!important;color:#fffdf8!important;border-color:#899da7!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore .connect-approved-privacy :is(span,strong) {color:#fffdf8!important;-webkit-text-fill-color:currentColor!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore .connect-approved-privacy {background:#102637!important;padding:18px!important;border-radius:8px}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore :is(input,select,textarea) {color:#102637!important;-webkit-text-fill-color:#102637!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectExplore :is(input,textarea)::placeholder {color:#536571!important;opacity:1;-webkit-text-fill-color:#536571!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectLanding .connect-one-steps > li > span {background:#102637!important;color:#dfc28a!important;font:700 16px/1 var(--hp-product-font)}
html body.connect-body.connect-one-page.hp2-core-connect #connectLanding .connect-one-section-head h2 {font-size:clamp(30px,4vw,48px)!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectLanding .connect-role-panel h3 {font-size:clamp(27px,3.5vw,42px)!important}
html body.connect-body.connect-one-page.hp2-core-connect #connectLanding .connect-one-subhead {font-family:var(--hp-product-font)!important;font-weight:650}
html body.connect-body.connect-one-page.hp2-core-connect #connectLanding :is(.connect-one-roles,.connect-one-how,.connect-one-trust) {padding-block:56px!important}

/* One finite statement → answer sequence in a fixed four-line text window.
   Full text remains in the heading's accessible name. Reduced motion shows both. */
.hero h1 .hero-line {position:relative;display:grid;min-height:4.5em;overflow:hidden}
.hero h1 .hero-line > * {grid-area:1/1;align-self:start}
.hero h1 .hero-line > span {animation:hp-statement 5s cubic-bezier(.22,.61,.36,1) both}
.hero h1 .hero-line > em {animation:hp-answer 5s cubic-bezier(.22,.61,.36,1) both}
@keyframes hp-statement {0%,48%{transform:none;opacity:1}64%,100%{transform:translateY(-110%);opacity:0}}
@keyframes hp-answer {0%,48%{transform:translateY(110%);opacity:0}64%,100%{transform:none;opacity:1}}
html body #page-analyzer .metric-card-cashflow {animation:hp-insight .65s ease-out both}
@keyframes hp-insight {from{box-shadow:inset 3px 0 #dfc28a;transform:translateY(4px)}to{box-shadow:inset 0 0 transparent;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .hero-line > *,html body #page-search *,html body #page-analyzer .metric-card {animation:none!important;transition:none!important}
  .hero h1 .hero-line {display:block;min-height:0}
  .hero h1 .hero-line > * {transform:none;opacity:1}
}
html body #page-search .mls-search-connect-bridge a {color:#102637!important}

/* Clearly fictional area aggregation; never individual Buyer pins. */
html body.connect-body.connect-one-page.hp2-core-connect #connectDemand {background:#102637;color:#fffdf8;padding:56px 32px;border-radius:12px;margin:48px 0}
html body.connect-body.connect-one-page.hp2-core-connect #connectDemand :is(h2,h3,p,strong,dt,dd,a,span) {color:inherit;-webkit-text-fill-color:currentColor}
html body.connect-body.connect-one-page.hp2-core-connect #connectDemand h2 {font-size:clamp(30px,4vw,48px);max-width:20ch;margin:12px 0}
.hp-demand-eyebrow {font:700 12px/1.5 var(--hp-product-font);letter-spacing:.12em;text-transform:uppercase}
.hp-demand-heading>p:last-child {font-size:18px;line-height:1.6}
.hp-demand-sample-label {padding:14px 18px;background:#1c3b4d;border:1px solid #5f7885;border-radius:6px;font:14px/1.6 var(--hp-product-font);max-width:90ch;margin:24px 0}
.hp-demand-grid {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:28px;align-items:start}
.hp-demand-map {position:relative;border:1px solid #587380;border-radius:10px;overflow:hidden;isolation:isolate;min-height:360px}
.hp-demand-map svg {display:block;width:100%;height:440px;object-fit:cover}
.hp-demand-area {position:absolute;display:grid;gap:6px;min-height:48px;border:1px solid #a9bdc1;border-radius:8px;padding:12px 14px;background:#102637;color:#fffdf8;font:600 14px/1.4 var(--hp-product-font);cursor:pointer;box-shadow:0 6px 20px #0002;transition:background .2s,box-shadow .2s}
.hp-demand-area strong {font-size:12px;font-weight:500}
.hp-demand-area[data-demand-area=naperville] {left:31%;top:22%}
.hp-demand-area[data-demand-area=aurora] {left:4%;top:57%}
.hp-demand-area[data-demand-area=plainfield] {right:4%;top:72%}
.hp-demand-area[aria-pressed=true] {background:#dfc28a;color:#102637;border-color:#dfc28a;box-shadow:0 0 0 5px #dfc28a26;animation:hp-area-selected 1.2s ease-out 1}
@keyframes hp-area-selected {from{box-shadow:0 0 0 12px #dfc28a00}to{box-shadow:0 0 0 5px #dfc28a26}}
.hp-demand-area:focus-visible {outline:3px solid white;outline-offset:4px}
.hp-demand-map-note {position:absolute;left:14px;bottom:10px;font:11px/1.5 var(--hp-product-font);background:#102637;padding:5px 8px;border-radius:4px}
.hp-demand-detail {padding:24px;border:1px solid #587380;border-radius:10px;background:#183647}
.hp-demand-detail h3 {font-size:27px;margin:16px 0}
.hp-demand-count {display:block;font:700 40px/1.3 var(--hp-product-font)}
.hp-demand-count span {display:block;font:400 14px/1.6 var(--hp-product-font)}
.hp-demand-detail dl {margin:24px 0}
.hp-demand-detail dl>div {padding:14px 0;border-top:1px solid #587380}
.hp-demand-detail dt {font:650 13px/1.5 var(--hp-product-font);margin-bottom:6px}
.hp-demand-detail dd {margin:0;font:15px/1.6 var(--hp-product-font)}
.hp-demand-detail a {font:600 15px/1.6 var(--hp-product-font);text-underline-offset:4px}
.hp-demand-region {animation:hp-demand-once 3.2s ease-out 1}
@keyframes hp-demand-once {0%{fill-opacity:.08;stroke-opacity:.4}55%{fill-opacity:.35;stroke-opacity:1}100%{fill-opacity:.22;stroke-opacity:1}}
html body.hp2-workspace-visible #connectLanding #connectDemand {display:none}
@media(max-width:760px){
  html body.connect-body.connect-one-page.hp2-core-connect #connectDemand {padding:28px 16px;margin:24px 0}
  .hp-demand-grid {grid-template-columns:1fr;gap:16px}
  .hp-demand-map svg {height:360px}
  .hp-demand-area {padding:10px;font-size:13px}
  .hp-demand-area[data-demand-area=naperville] {left:31%;top:18%}
  .hp-demand-area[data-demand-area=aurora] {left:3%;top:47%}
  .hp-demand-area[data-demand-area=plainfield] {right:3%;top:71%}
}
@media(prefers-reduced-motion:reduce){.hp-demand-region,.hp-demand-area {animation:none!important;transition:none!important}}