/*
 * Hire Pross — page & flow styles.
 * Detail pages (category/service/provider/city), the post-job/quote/chat/pay
 * flows, dashboards, wallet, accordions, breadcrumbs, modals, and helpers.
 * Loaded after components.css; uses the same design tokens.
 */

/* ============================ SHARED ============================ */
.hp-breadcrumb { display: flex; align-items: center; gap: var(--hp-sp-2); font-size: var(--hp-fs-sm); color: var(--hp-slate); margin-bottom: var(--hp-sp-4); flex-wrap: wrap; }
.hp-breadcrumb a { color: var(--hp-slate); }
.hp-breadcrumb a:hover { color: var(--hp-spruce); }
.hp-breadcrumb [aria-current] { color: var(--hp-ink); font-weight: 600; }

.hp-prose { font-size: var(--hp-fs-base); line-height: 1.7; color: var(--hp-ink); }
.hp-prose h2 { margin-top: var(--hp-sp-6); }
.hp-prose h3 { margin-top: var(--hp-sp-5); }
.hp-prose p { margin-bottom: var(--hp-sp-4); }
.hp-prose ul, .hp-prose ol { margin-bottom: var(--hp-sp-4); }
.hp-prose a { text-decoration: underline; text-underline-offset: 2px; }

.hp-cat-sec-title { font-size: var(--hp-fs-xl); margin-bottom: var(--hp-sp-5); }

.hp-pagination { margin-top: var(--hp-sp-7); display: flex; justify-content: center; }
.hp-pagination .nav-links { display: flex; gap: var(--hp-sp-2); flex-wrap: wrap; align-items: center; }
.hp-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 var(--hp-sp-3); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); font-family: var(--hp-font-display); font-weight: 600; color: var(--hp-ink); background: var(--hp-cloud); }
.hp-pagination .page-numbers.current { background: var(--hp-spruce); color: #fff; border-color: var(--hp-spruce); }
.hp-pagination .page-numbers:hover:not(.current) { border-color: var(--hp-spruce); }

/* Accordions */
.hp-accordion { border: 1px solid var(--hp-mist); border-radius: var(--hp-radius); margin-bottom: var(--hp-sp-3); background: var(--hp-cloud); overflow: hidden; }
.hp-accordion__q { cursor: pointer; padding: var(--hp-sp-4) var(--hp-sp-5); font-family: var(--hp-font-display); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); }
.hp-accordion__q::-webkit-details-marker { display: none; }
.hp-accordion__q::after { content: "+"; font-size: 1.4rem; color: var(--hp-amber-dk); transition: transform var(--hp-dur); }
.hp-accordion[open] .hp-accordion__q::after { transform: rotate(45deg); }
.hp-accordion__a { padding: 0 var(--hp-sp-5) var(--hp-sp-5); color: var(--hp-slate); }

/* Archive hero (shared) */
.hp-archive-hero { background: linear-gradient(180deg, var(--hp-paper), #eef1ea); padding-block: var(--hp-sp-8) var(--hp-sp-7); }
.hp-archive-hero h1 { margin-bottom: var(--hp-sp-3); }

/* Empty states */
.hp-empty { text-align: center; padding: var(--hp-sp-8); }
.hp-empty p { font-size: var(--hp-fs-md); color: var(--hp-slate); margin-bottom: var(--hp-sp-4); }

/* Tags/pills reused */
.hp-input--invalid { border-color: var(--hp-danger) !important; box-shadow: 0 0 0 3px rgba(178,59,46,0.12) !important; }
.hp-field__error { display: block; color: var(--hp-danger); font-size: var(--hp-fs-sm); margin-top: var(--hp-sp-2); }
.hp-checkbox { display: flex; align-items: center; gap: var(--hp-sp-2); cursor: pointer; }

/* ============================ CATEGORY PAGE ============================ */
.hp-cat-hero { border-bottom: 1px solid var(--hp-line); padding-block: var(--hp-sp-6) var(--hp-sp-7); background: linear-gradient(120deg, color-mix(in srgb, var(--hp-cat-accent) 8%, var(--hp-paper)), var(--hp-paper)); }
.hp-cat-hero__inner { display: flex; gap: var(--hp-sp-5); align-items: flex-start; }
.hp-cat-hero__icon { font-size: 3rem; line-height: 1; padding: var(--hp-sp-3); background: var(--hp-cloud); border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow-sm); }
.hp-cat-hero__title { margin-bottom: var(--hp-sp-2); }
.hp-cat-hero__blurb { font-size: var(--hp-fs-md); color: var(--hp-slate); max-width: 60ch; margin-bottom: var(--hp-sp-4); }
.hp-cat-hero__actions { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; }

.hp-cat-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--hp-sp-7); }
.hp-cat-seo { margin-top: var(--hp-sp-7); }
.hp-cat-side__providers { display: flex; flex-direction: column; gap: var(--hp-sp-4); margin-bottom: var(--hp-sp-5); }
.hp-cat-side__cta { padding: var(--hp-sp-5); position: sticky; top: calc(var(--hp-header-h) + 16px); }
.hp-cat-side__cta h3 { font-size: var(--hp-fs-md); }

/* ============================ SERVICE PAGE ============================ */
.hp-service-hero { padding-block: var(--hp-sp-6) var(--hp-sp-7); border-bottom: 1px solid var(--hp-line); }
.hp-service-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--hp-sp-7); align-items: center; }
.hp-service-hero__title { margin-block: var(--hp-sp-2) var(--hp-sp-3); }
.hp-service-hero__excerpt { font-size: var(--hp-fs-md); color: var(--hp-slate); margin-bottom: var(--hp-sp-5); }
.hp-service-hero__facts { display: flex; gap: var(--hp-sp-6); flex-wrap: wrap; margin-bottom: var(--hp-sp-5); }
.hp-fact { display: flex; flex-direction: column; }
.hp-fact__label { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--hp-slate); }
.hp-fact__value { font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-fs-md); }
.hp-service-hero__actions { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; }
.hp-service-hero__media img, .hp-service-hero__media .hp-ph { border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow-lg); aspect-ratio: 16/10; object-fit: cover; }

.hp-service-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--hp-sp-7); }
.hp-service-main > section { margin-bottom: var(--hp-sp-7); }
.hp-service-side__card { padding: var(--hp-sp-5); position: sticky; top: calc(var(--hp-header-h) + 16px); }
.hp-service-side__price { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-xl); margin: 0 0 var(--hp-sp-3); }
.hp-service-side__list { list-style: none; margin: var(--hp-sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--hp-sp-2); }
.hp-service-side__list li { position: relative; padding-left: 1.6em; font-size: var(--hp-fs-sm); color: var(--hp-slate); }
.hp-service-side__list li::before { content: "✓"; position: absolute; left: 0; color: var(--hp-verified); font-weight: 700; }

.hp-reviews { display: grid; gap: var(--hp-sp-4); }
.hp-review { padding: var(--hp-sp-5); }
.hp-review__head { display: flex; justify-content: space-between; gap: var(--hp-sp-3); margin-bottom: var(--hp-sp-2); }
.hp-review p { margin: var(--hp-sp-2) 0 0; color: var(--hp-slate); }
.hp-related { margin-top: var(--hp-sp-7); }

/* ============================ PROVIDER PAGE ============================ */
.hp-provider-hero { padding-block: var(--hp-sp-6) var(--hp-sp-7); border-bottom: 1px solid var(--hp-line); background: linear-gradient(120deg, color-mix(in srgb, var(--hp-cat-accent) 7%, var(--hp-paper)), var(--hp-paper)); }
.hp-provider-hero__grid { display: grid; grid-template-columns: auto 1fr auto; gap: var(--hp-sp-6); align-items: center; }
.hp-provider-hero__avatar { width: 120px; height: 120px; border-radius: var(--hp-radius-lg); overflow: hidden; border: 3px solid var(--hp-cloud); box-shadow: var(--hp-shadow); }
.hp-provider-hero__avatar img, .hp-provider-hero__avatar .hp-ph { width: 100%; height: 100%; object-fit: cover; }
.hp-provider-hero__badges { display: flex; gap: var(--hp-sp-2); margin-bottom: var(--hp-sp-2); }
.hp-provider-hero__name { margin: 0 0 var(--hp-sp-1); }
.hp-provider-hero__tagline { color: var(--hp-slate); margin: 0 0 var(--hp-sp-3); }
.hp-provider-hero__rating { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; }
.hp-provider-hero__cat { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.hp-provider-hero__trust { background: var(--hp-cloud); border: 1px solid var(--hp-mist); border-radius: var(--hp-radius-lg); padding: var(--hp-sp-4); display: flex; flex-direction: column; gap: var(--hp-sp-2); text-align: center; min-width: 200px; }
.hp-provider-hero__trust-label { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--hp-slate); }
.hp-provider-hero__trust .hp-trust { justify-content: center; }

.hp-provider-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--hp-sp-7); }
.hp-provider-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4); margin-bottom: var(--hp-sp-6); }
.hp-provider-stat { padding: var(--hp-sp-4); text-align: center; }
.hp-provider-stat__value { display: block; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-md); }
.hp-provider-stat__label { font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-provider-bio, .hp-provider-reviews { margin-bottom: var(--hp-sp-6); }
.hp-provider-side__card { padding: var(--hp-sp-5); position: sticky; top: calc(var(--hp-header-h) + 16px); display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-provider-side__rate { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-xl); margin: 0; }
.hp-provider-side__assurance { margin-top: var(--hp-sp-3); padding-top: var(--hp-sp-4); border-top: 1px solid var(--hp-mist); }

/* ============================ PROVIDER ARCHIVE ============================ */
.hp-provider-archive { display: grid; grid-template-columns: 260px 1fr; gap: var(--hp-sp-7); }
.hp-filter__title { font-size: var(--hp-fs-md); margin-bottom: var(--hp-sp-3); }
.hp-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--hp-header-h) + 16px); }
.hp-filter__link { display: flex; align-items: center; gap: var(--hp-sp-2); padding: var(--hp-sp-2) var(--hp-sp-3); border-radius: var(--hp-radius); color: var(--hp-ink); font-size: var(--hp-fs-sm); }
.hp-filter__link:hover { background: var(--hp-mist); }
.hp-filter__link.is-active { background: var(--hp-spruce); color: #fff; }

/* ============================ CITY PAGE ============================ */
.hp-city-hero { padding-block: var(--hp-sp-6) var(--hp-sp-6); border-bottom: 1px solid var(--hp-line); }
.hp-city-hero__intro { max-width: 65ch; margin-block: var(--hp-sp-3) var(--hp-sp-4); }
.hp-city-map-wrap { padding-block: var(--hp-sp-5); }
.hp-city-map { width: 100%; height: 360px; border-radius: var(--hp-radius-lg); overflow: hidden; border: 1px solid var(--hp-mist); }
.hp-city-map--static { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hp-sp-2); background: linear-gradient(135deg, var(--hp-mist), #dfe6e0); text-align: center; }
.hp-city-map__pin { font-size: 2.4rem; }
.hp-city-map__hint { max-width: 40ch; font-size: var(--hp-fs-sm); }

/* ============================ FLOWS (shared) ============================ */
.hp-flow { padding-block: var(--hp-sp-7) var(--hp-sp-8); }
.hp-flow__head { text-align: center; margin-bottom: var(--hp-sp-6); }
.hp-flow__head .hp-eyebrow { justify-content: center; }
.hp-flow__head .hp-lead { margin-inline: auto; }

/* Steps indicator */
.hp-steps { display: flex; justify-content: center; gap: var(--hp-sp-2); list-style: none; margin: 0 0 var(--hp-sp-6); padding: 0; flex-wrap: wrap; }
.hp-steps__item { display: flex; align-items: center; gap: var(--hp-sp-2); font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-fs-sm); color: var(--hp-slate); }
.hp-steps__item span { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hp-mist); color: var(--hp-slate); font-size: var(--hp-fs-xs); }
.hp-steps__item.is-active { color: var(--hp-spruce); }
.hp-steps__item.is-active span { background: var(--hp-spruce); color: #fff; }
.hp-steps__item:not(:last-child)::after { content: ""; width: 24px; height: 2px; background: var(--hp-line); margin-left: var(--hp-sp-2); }

/* Job form */
.hp-jobform { padding: var(--hp-sp-6); }
.hp-jobstep { border: 0; margin: 0; padding: 0; }
.hp-jobstep__title { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-lg); margin-bottom: var(--hp-sp-4); padding: 0; }
.hp-jobstep__nav { display: flex; justify-content: space-between; gap: var(--hp-sp-3); margin-top: var(--hp-sp-5); }
.hp-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hp-sp-2); padding: var(--hp-sp-7); border: 2px dashed var(--hp-line); border-radius: var(--hp-radius-lg); cursor: pointer; text-align: center; transition: border-color var(--hp-dur), background var(--hp-dur); }
.hp-dropzone:hover, .hp-dropzone.is-dragover { border-color: var(--hp-spruce); background: var(--hp-mist); }
.hp-dropzone__icon { font-size: 2rem; }
.hp-dropzone__previews { display: flex; flex-wrap: wrap; gap: var(--hp-sp-2); margin-top: var(--hp-sp-3); }
.hp-dropzone__thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--hp-radius); border: 1px solid var(--hp-mist); }
.hp-jobreview { display: grid; gap: var(--hp-sp-2); }
.hp-jobreview__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--hp-sp-3); padding: var(--hp-sp-3); border-bottom: 1px solid var(--hp-mist); }
.hp-jobreview__row dt { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--hp-slate); margin: 0; }
.hp-jobreview__row dd { margin: 0; font-weight: 500; }
.hp-jobform__assurance { display: flex; gap: var(--hp-sp-2); margin-top: var(--hp-sp-4); flex-wrap: wrap; }
.hp-jobform__success, .hp-pay-success { text-align: center; padding: var(--hp-sp-7); }
.hp-jobform__success-icon, .hp-pay-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(27,122,75,0.12); color: var(--hp-verified); font-size: 2rem; margin-bottom: var(--hp-sp-4); }

/* ============================ QUOTE FLOW ============================ */
.hp-quote-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--hp-sp-7); }
.hp-quote-compare { display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-quote-card { padding: var(--hp-sp-5); display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-quote-card.is-accepted { border-color: var(--hp-verified); box-shadow: 0 0 0 2px rgba(27,122,75,0.2); }
.hp-quote-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); }
.hp-quote-card__top > div { display: flex; align-items: center; gap: var(--hp-sp-2); flex-wrap: wrap; }
.hp-quote-card__amount { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-lg); }
.hp-quote-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; }
.hp-quote-card__actions { display: flex; gap: var(--hp-sp-2); }
.hp-quote-submit__card { padding: var(--hp-sp-5); position: sticky; top: calc(var(--hp-header-h) + 16px); }
.hp-quote-submit__msg { margin-top: var(--hp-sp-3); font-size: var(--hp-fs-sm); }
.hp-quote-submit__msg.is-success { color: var(--hp-verified); }
.hp-quote-submit__msg.is-error { color: var(--hp-danger); }
.hp-quote-submit__assurance { margin-top: var(--hp-sp-4); padding-top: var(--hp-sp-4); border-top: 1px solid var(--hp-mist); }

/* ============================ CHAT ============================ */
.hp-chat { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--hp-mist); border-radius: var(--hp-radius-lg); overflow: hidden; min-height: 560px; background: var(--hp-cloud); }
.hp-chat__threads { border-right: 1px solid var(--hp-mist); padding: var(--hp-sp-4); }
.hp-chat__title { font-size: var(--hp-fs-lg); margin-bottom: var(--hp-sp-4); }
.hp-chat__thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-chat__thread { display: flex; gap: var(--hp-sp-3); align-items: center; width: 100%; text-align: left; padding: var(--hp-sp-3); border: 0; background: none; border-radius: var(--hp-radius); cursor: pointer; }
.hp-chat__thread:hover, .hp-chat__thread.is-active { background: var(--hp-mist); }
.hp-chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hp-spruce); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--hp-font-display); font-weight: 700; flex-shrink: 0; }
.hp-chat__thread-body { display: flex; flex-direction: column; min-width: 0; }
.hp-chat__thread-name { font-weight: 600; font-size: var(--hp-fs-sm); }
.hp-chat__thread-last { font-size: var(--hp-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-chat__conversation { display: flex; flex-direction: column; }
.hp-chat__conv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); padding: var(--hp-sp-4) var(--hp-sp-5); border-bottom: 1px solid var(--hp-mist); flex-wrap: wrap; }
.hp-chat__conv-head > div { display: flex; align-items: center; gap: var(--hp-sp-3); }
.hp-chat__conv-actions { display: flex; gap: var(--hp-sp-2); }
.hp-chat__messages { flex: 1; padding: var(--hp-sp-5); display: flex; flex-direction: column; gap: var(--hp-sp-3); overflow-y: auto; max-height: 420px; }
.hp-msg { max-width: 75%; padding: var(--hp-sp-3) var(--hp-sp-4); border-radius: var(--hp-radius-lg); position: relative; }
.hp-msg p { margin: 0; }
.hp-msg__time { display: block; font-size: 0.68rem; opacity: 0.6; margin-top: 4px; }
.hp-msg--in { background: var(--hp-mist); align-self: flex-start; border-bottom-left-radius: 4px; }
.hp-msg--out { background: var(--hp-spruce); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.hp-chat__composer { display: flex; gap: var(--hp-sp-2); padding: var(--hp-sp-4); border-top: 1px solid var(--hp-mist); }
.hp-chat__composer .hp-input { flex: 1; }

/* Modal */
.hp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--hp-sp-4); }
.hp-modal__backdrop { position: absolute; inset: 0; background: rgba(20,32,28,0.5); }
.hp-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: var(--hp-sp-6); }
.hp-modal__close { position: absolute; top: var(--hp-sp-3); right: var(--hp-sp-3); background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--hp-slate); }

/* ============================ PAYMENT / ESCROW ============================ */
.hp-escrow-steps { list-style: none; margin: 0 0 var(--hp-sp-6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-4); }
.hp-escrow-step { display: flex; gap: var(--hp-sp-3); align-items: flex-start; padding: var(--hp-sp-4); border: 1px solid var(--hp-mist); border-radius: var(--hp-radius); background: var(--hp-cloud); }
.hp-escrow-step.is-current { border-color: var(--hp-amber); box-shadow: 0 0 0 2px rgba(244,161,31,0.18); }
.hp-escrow-step__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--hp-spruce); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-sm); flex-shrink: 0; }
.hp-escrow-step div { display: flex; flex-direction: column; }
.hp-escrow-step span.hp-muted { font-size: var(--hp-fs-sm); }
.hp-pay-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--hp-sp-6); }
.hp-pay-form { padding: var(--hp-sp-5); }
.hp-pay-form__demo-note { margin-bottom: var(--hp-sp-4); }
.hp-pay-form__msg { margin-top: var(--hp-sp-3); font-size: var(--hp-fs-sm); }
.hp-pay-summary { padding: var(--hp-sp-5); align-self: start; position: sticky; top: calc(var(--hp-header-h) + 16px); }
.hp-pay-summary__job { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--hp-sp-4); padding-bottom: var(--hp-sp-4); border-bottom: 1px solid var(--hp-mist); }
.hp-pay-summary__lines { margin: 0; }
.hp-pay-summary__lines > div { display: flex; justify-content: space-between; padding: var(--hp-sp-2) 0; }
.hp-pay-summary__lines dt, .hp-pay-summary__lines dd { margin: 0; }
.hp-pay-summary__total { border-top: 1px solid var(--hp-mist); margin-top: var(--hp-sp-2); padding-top: var(--hp-sp-3) !important; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-md); }
.hp-pay-summary__note { font-size: var(--hp-fs-sm); margin-top: var(--hp-sp-4); }

/* ============================ DASHBOARDS ============================ */
.hp-dash { padding-block: var(--hp-sp-6) var(--hp-sp-8); }
.hp-dash__head { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-4); margin-bottom: var(--hp-sp-5); flex-wrap: wrap; }
.hp-dash__title { margin: 0; }
.hp-dash__tabs { display: flex; gap: var(--hp-sp-2); border-bottom: 1px solid var(--hp-line); margin-bottom: var(--hp-sp-5); overflow-x: auto; }
.hp-dash__tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--hp-sp-3) var(--hp-sp-4); font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-fs-sm); color: var(--hp-slate); cursor: pointer; white-space: nowrap; }
.hp-dash__tab[aria-selected="true"] { color: var(--hp-spruce); border-bottom-color: var(--hp-amber); }
.hp-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4); margin-bottom: var(--hp-sp-5); }
.hp-dash__stat { background: var(--hp-cloud); border: 1px solid var(--hp-mist); border-radius: var(--hp-radius-lg); padding: var(--hp-sp-4); text-align: center; }
.hp-dash__stat-value { display: block; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-xl); color: var(--hp-spruce); }
.hp-dash__stat-label { font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-dash__hint, .hp-dash__empty { color: var(--hp-slate); }
.hp-joblist, .hp-quotelist, .hp-paylist, .hp-wallet-tx__list { display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-joblist__item { padding: var(--hp-sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-4); flex-wrap: wrap; }
.hp-joblist__item h3 { font-size: var(--hp-fs-md); margin: 0 0 2px; }
.hp-joblist__meta { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; }
.hp-joblist__budget { font-family: var(--hp-font-display); font-weight: 600; }
.hp-quotelist__item { padding: var(--hp-sp-4); }
.hp-quotelist__top { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); margin-bottom: var(--hp-sp-2); }
.hp-quotelist__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); margin-top: var(--hp-sp-3); }
.hp-quotelist__amount { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-md); }
.hp-paylist__row { padding: var(--hp-sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); }
.hp-wallet__balance { padding: var(--hp-sp-5); text-align: center; display: flex; flex-direction: column; gap: var(--hp-sp-2); margin-bottom: var(--hp-sp-4); }
.hp-wallet__amount { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-2xl); color: var(--hp-spruce); }

/* ============================ WALLET PAGE ============================ */
.hp-wallet-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--hp-sp-5); margin-bottom: var(--hp-sp-6); }
.hp-wallet-balance { padding: var(--hp-sp-5); display: flex; flex-direction: column; gap: var(--hp-sp-3); text-align: center; }
.hp-wallet-balance__amount { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-2xl); color: var(--hp-spruce); }
.hp-wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-4); }
.hp-wallet-stat { padding: var(--hp-sp-5); text-align: center; }
.hp-wallet-stat__value { display: block; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-lg); }
.hp-wallet-stat__label { font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-wallet-tx__row { padding: var(--hp-sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); }
.hp-wallet-tx__main { display: flex; flex-direction: column; }
.hp-wallet-tx__amount { font-family: var(--hp-font-display); font-weight: 700; }
.hp-wallet-tx__amount--credit { color: var(--hp-verified); }
.hp-wallet-tx__amount--debit { color: var(--hp-slate); }

/* ============================ FAQ / HELP ============================ */
.hp-faq-topic { margin-bottom: var(--hp-sp-6); }
.hp-faq-topic__title { font-size: var(--hp-fs-lg); margin-bottom: var(--hp-sp-4); padding-bottom: var(--hp-sp-2); border-bottom: 2px solid var(--hp-amber); display: inline-block; }
.hp-faq-cta { text-align: center; padding: var(--hp-sp-6); margin-top: var(--hp-sp-6); }
.hp-help-hero { background: linear-gradient(180deg, var(--hp-spruce), var(--hp-pine)); color: #fff; padding-block: var(--hp-sp-8); }
.hp-help-hero h1 { color: #fff; }
.hp-help-hero .hp-eyebrow { color: rgba(255,255,255,0.85); justify-content: center; }
.hp-help-hero__search { max-width: 520px; margin: var(--hp-sp-5) auto 0; }
.hp-help-topics { margin-bottom: var(--hp-sp-7); }
.hp-help-topic { padding: var(--hp-sp-5); text-align: center; display: flex; flex-direction: column; gap: var(--hp-sp-2); align-items: center; }
.hp-help-topic__icon { font-size: 2rem; }
.hp-help-topic__name { font-family: var(--hp-font-display); font-weight: 600; }
.hp-help-topic__count { font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-help-contact { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-4); padding: var(--hp-sp-6); flex-wrap: wrap; margin-top: var(--hp-sp-6); }
.hp-help-contact__actions { display: flex; gap: var(--hp-sp-2); flex-wrap: wrap; }

/* ============================ ADMIN DASHBOARD ============================ */
.hp-admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4); margin-bottom: var(--hp-sp-6); }
.hp-admin-metric { padding: var(--hp-sp-5); text-align: center; color: var(--hp-ink); }
.hp-admin-metric__value { display: block; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-2xl); color: var(--hp-spruce); }
.hp-admin-metric__label { font-size: var(--hp-fs-sm); color: var(--hp-slate); }
.hp-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-sp-5); }
.hp-admin-panel { padding: var(--hp-sp-5); }
.hp-admin-actions { display: flex; flex-wrap: wrap; gap: var(--hp-sp-2); }

/* ============================ 404 ============================ */
.hp-404 { padding-block: var(--hp-sp-9); }
.hp-404__code { font-family: var(--hp-font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 8rem); color: var(--hp-amber); line-height: 1; }
.hp-404__search { max-width: 440px; margin: var(--hp-sp-5) auto; }
.hp-404__links { display: flex; gap: var(--hp-sp-3); justify-content: center; flex-wrap: wrap; }

/* ============================ PAGE / SINGLE ============================ */
.hp-page-hero, .hp-single-hero { padding-block: var(--hp-sp-7) var(--hp-sp-5); }
.hp-single-hero__meta { font-size: var(--hp-fs-sm); margin-bottom: var(--hp-sp-3); }
.hp-single__featured { margin-bottom: var(--hp-sp-5); }
.hp-single__img { border-radius: var(--hp-radius-lg); width: 100%; }
.hp-blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--hp-sp-7); }
.hp-post-card__excerpt { font-size: var(--hp-fs-sm); color: var(--hp-slate); }
.hp-widget { margin-bottom: var(--hp-sp-5); }
.hp-widget__title { font-size: var(--hp-fs-md); margin-bottom: var(--hp-sp-3); }
.hp-news-thanks { color: var(--hp-verified); font-weight: 600; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
	.hp-cat-layout, .hp-service-layout, .hp-provider-layout, .hp-quote-grid, .hp-pay-grid, .hp-blog-layout { grid-template-columns: 1fr; }
	.hp-provider-archive { grid-template-columns: 1fr; }
	.hp-filter__list { position: static; flex-direction: row; flex-wrap: wrap; }
	.hp-wallet-grid { grid-template-columns: 1fr; }
	.hp-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
	.hp-service-hero__grid { grid-template-columns: 1fr; }
	.hp-provider-hero__grid { grid-template-columns: auto 1fr; }
	.hp-provider-hero__trust { grid-column: 1 / -1; }
	.hp-provider-stats { grid-template-columns: repeat(2, 1fr); }
	.hp-dash__stats { grid-template-columns: repeat(2, 1fr); }
	.hp-escrow-steps { grid-template-columns: 1fr; }
	.hp-admin-metrics { grid-template-columns: repeat(2, 1fr); }
	.hp-wallet-stats { grid-template-columns: 1fr; }
	.hp-chat { grid-template-columns: 1fr; }
	.hp-chat__threads { border-right: 0; border-bottom: 1px solid var(--hp-mist); }
}
@media (max-width: 620px) {
	.hp-cat-hero__inner { flex-direction: column; }
	.hp-provider-hero__grid { grid-template-columns: 1fr; text-align: center; }
	.hp-provider-hero__avatar { margin-inline: auto; }
	.hp-provider-hero__badges, .hp-provider-hero__rating { justify-content: center; }
	.hp-provider-stats { grid-template-columns: 1fr; }
	.hp-admin-metrics { grid-template-columns: 1fr; }
	.hp-steps { gap: var(--hp-sp-1); }
	.hp-steps__item span { width: 24px; height: 24px; }
	.hp-flow__head .hp-steps__item:not(:last-child)::after { display: none; }
}

/* Category archive — filter bar & service count (added in category-fix) */
.hp-cat-services__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hp-sp-4);
	flex-wrap: wrap;
	margin-bottom: var(--hp-sp-5);
}
.hp-cat-services__head .hp-cat-sec-title { margin-bottom: 0; }
.hp-cat-count {
	display: inline-block;
	margin-left: var(--hp-sp-3);
	font-family: var(--hp-font-mono, monospace);
	font-size: var(--hp-fs-sm);
	font-weight: 500;
	color: var(--hp-ink-soft, #4a5a51);
	background: var(--hp-paper-2, #efece3);
	border-radius: 999px;
	padding: 2px 12px;
	vertical-align: middle;
}
.hp-cat-filters {
	display: flex;
	align-items: center;
	gap: var(--hp-sp-2);
}
.hp-cat-filters__label {
	font-size: var(--hp-fs-sm);
	font-weight: 600;
	color: var(--hp-ink-soft, #4a5a51);
}
.hp-cat-filters .hp-select { min-width: 190px; }
@media (max-width: 620px) {
	.hp-cat-services__head { align-items: flex-start; }
	.hp-cat-filters { width: 100%; }
	.hp-cat-filters .hp-select { flex: 1; }
}

/* ==================================================================
   STATIC PAGES — How it Works, Pricing, Become a Provider
   (added with the static-pages build)
   ================================================================== */

/* Shared page hero */
.hp-page-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin: var(--hp-sp-2) 0 var(--hp-sp-3); }
.hp-page-hero__lede { font-size: var(--hp-fs-lg); color: var(--hp-slate); max-width: 60ch; }
.hp-page-hero__actions { display: flex; gap: var(--hp-sp-3); flex-wrap: wrap; margin-top: var(--hp-sp-5); }
.hp-page-hero--center { text-align: center; }
.hp-page-hero--center .hp-page-hero__lede { margin-inline: auto; }
.hp-page-hero--center .hp-eyebrow { justify-content: center; }
.hp-breadcrumb--center { justify-content: center; }

/* Utilities */
.hp-center { text-align: center; margin-top: var(--hp-sp-5); }
.hp-section--muted { background: var(--hp-paper-2, #efece3); }

.hp-check-list { list-style: none; margin: var(--hp-sp-4) 0 0; padding: 0; display: grid; gap: var(--hp-sp-2); }
.hp-check-list li { position: relative; padding-left: 1.9em; color: var(--hp-ink); }
.hp-check-list li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	width: 1.35em; height: 1.35em; line-height: 1.35em; text-align: center;
	font-size: 0.8em; font-weight: 700; color: #fff;
	background: var(--hp-verified, #2f7d4f); border-radius: 999px;
}

/* Numbered step grid */
.hp-steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4); }
.hp-step-card { position: relative; padding: var(--hp-sp-5); }
.hp-step-card__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.2em; height: 2.2em; border-radius: 999px;
	font-family: var(--hp-font-mono); font-weight: 600;
	background: var(--hp-spruce, #1b4332); color: #fff; margin-bottom: var(--hp-sp-3);
}
.hp-step-card__icon { font-size: 1.6rem; display: block; margin-bottom: var(--hp-sp-2); }
.hp-step-card__title { font-size: var(--hp-fs-md); margin: 0 0 var(--hp-sp-2); }
.hp-step-card__text { color: var(--hp-slate); font-size: var(--hp-fs-sm); margin: 0; }

/* Escrow band */
.hp-escrow-band { background: var(--hp-spruce, #1b4332); color: #fff; }
.hp-escrow-band__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--hp-sp-7); align-items: center; }
.hp-escrow-band h2 { color: #fff; margin: var(--hp-sp-3) 0; }
.hp-escrow-band p { color: rgba(255,255,255,0.85); }
.hp-escrow-band .hp-check-list li { color: rgba(255,255,255,0.92); }
.hp-escrow-flow { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; justify-content: center; }
.hp-escrow-flow__node { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--hp-radius-lg); padding: var(--hp-sp-4); text-align: center; min-width: 120px; }
.hp-escrow-flow__node strong { display: block; font-family: var(--hp-font-display); }
.hp-escrow-flow__node span { font-size: var(--hp-fs-xs); color: rgba(255,255,255,0.75); }
.hp-escrow-flow__node--release { background: color-mix(in srgb, var(--hp-amber, #f4a11f) 30%, transparent); border-color: var(--hp-amber, #f4a11f); }
.hp-escrow-flow__arrow { color: var(--hp-amber, #f4a11f); font-size: 1.3rem; }

/* CTA band */
.hp-cta-band { background: var(--hp-paper-2, #efece3); }
.hp-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-5); flex-wrap: wrap; }
.hp-cta-band h2 { margin: 0 0 var(--hp-sp-1); }
.hp-cta-band p { margin: 0; color: var(--hp-slate); }

/* Pricing — free band */
.hp-price-free { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-5); flex-wrap: wrap; padding: var(--hp-sp-6); }
.hp-price-free h2 { margin: var(--hp-sp-2) 0 var(--hp-sp-1); }
.hp-price-free p { margin: 0; max-width: 52ch; }

/* Pricing — plans */
.hp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-5); align-items: start; }
.hp-plan { position: relative; padding: var(--hp-sp-6); display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-plan--featured { border: 2px solid var(--hp-amber, #f4a11f); box-shadow: var(--hp-shadow-lg); }
.hp-plan__flag { position: absolute; top: -0.9em; left: 50%; transform: translateX(-50%); background: var(--hp-amber, #f4a11f); color: var(--hp-ink); font-size: var(--hp-fs-xs); font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.hp-plan__name { font-size: var(--hp-fs-lg); margin: 0; }
.hp-plan__price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.hp-plan__amount { font-family: var(--hp-font-display); font-size: 2.2rem; font-weight: 700; }
.hp-plan__period { color: var(--hp-slate); font-size: var(--hp-fs-sm); }
.hp-plan__blurb { color: var(--hp-slate); font-size: var(--hp-fs-sm); margin: 0; }
.hp-plan__features { margin: var(--hp-sp-2) 0 var(--hp-sp-4); flex: 1; }
.hp-plan__features li { font-size: var(--hp-fs-sm); }
.hp-price-note { margin-top: var(--hp-sp-5); max-width: 60ch; margin-inline: auto; }

/* Become a provider */
.hp-provider-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--hp-sp-7); align-items: center; }
.hp-provider-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin: var(--hp-sp-2) 0 var(--hp-sp-3); }
.hp-provider-hero__lede { font-size: var(--hp-fs-lg); color: var(--hp-slate); }
.hp-provider-hero__actions { display: flex; gap: var(--hp-sp-3); flex-wrap: wrap; margin: var(--hp-sp-5) 0 var(--hp-sp-3); }
.hp-provider-hero__meta { font-size: var(--hp-fs-sm); color: var(--hp-slate); }
.hp-provider-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }

.hp-benefit-card { padding: var(--hp-sp-5); }
.hp-benefit-card__icon { font-size: 1.8rem; display: block; margin-bottom: var(--hp-sp-3); }
.hp-benefit-card__title { font-size: var(--hp-fs-md); margin: 0 0 var(--hp-sp-2); }
.hp-benefit-card__text { color: var(--hp-slate); font-size: var(--hp-fs-sm); margin: 0; }

.hp-trust-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--hp-sp-7); align-items: center; }
.hp-trust-split__card { padding: var(--hp-sp-6); display: flex; flex-direction: column; gap: var(--hp-sp-3); }

/* Static-page responsive */
@media (max-width: 960px) {
	.hp-steps-grid { grid-template-columns: repeat(2, 1fr); }
	.hp-plans { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
	.hp-escrow-band__inner,
	.hp-provider-hero__inner,
	.hp-trust-split { grid-template-columns: 1fr; }
	.hp-provider-hero__visual { min-height: 340px; }
}
@media (max-width: 620px) {
	.hp-steps-grid { grid-template-columns: 1fr; }
	.hp-price-free, .hp-cta-band__inner { flex-direction: column; align-items: flex-start; }
}