/* Repossession directory — layered on site.css, not a parallel design system.
 *
 * The first version shipped its own tokens, lifted from statement-review.html: Poppins, a
 * different blue ramp, pill buttons, a 1120px wrap. statement-review is a one-off campaign page,
 * so the directory ended up looking like a different product. Everything below now uses site.css
 * variables — --blue, --ink, --muted, --line-white, --blue-soft — and the site's Inter stack, so
 * a change to the site's design reaches these pages too.
 *
 * Only two things are defined here that site.css does not already give us: the chrome rules that
 * live inline on carpay-vs-blytz rather than in site.css, and the directory's own components.
 */

/* ---------- chrome the home page inlines and site.css does not carry ----------
   site.css has .nav, .nav-row, .nav-center, .nav-phone, .wordmark-img, .btn and
   .btn-live-demo-nav already. The burger and the mobile menu exist only in index.html's
   inline stylesheet, so without these the nav simply has no mobile state. Taken from
   index.html so they match the page they are copied from. */
/* mobile menu */
  .nav-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; background: transparent; border: none;
    cursor: pointer; margin-left: 4px;
  }
.nav-burger span {
    display: block; height: 2.5px; width: 100%; background: var(--navy); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
    display: none; flex-direction: column;
    border-top: 1px solid var(--line-white);
    background: #fff;
    padding: 8px 0 16px;
  }
.mobile-menu a {
    font-size: 17px; font-weight: 600; color: var(--ink);
    padding: 15px 24px; border-bottom: 1px solid rgba(15,35,71,.05);
  }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu.open { display: flex; }
@media (max-width: 560px) {
    .nav-row { gap: 10px; height: 64px; }
    .wordmark-img { height: 21px; }
    .nav-right { gap: 8px; }
    .nav-burger { margin-left: 0; width: 40px; padding: 0 8px; }
  }
@media (max-width: 560px) {
    .btn-live-demo-nav { padding: 8px 8px 8px 12px; gap: 8px; }
    .btn-live-demo-nav .bld-text { font-size: 13.5px; }
    .btn-live-demo-nav .bld-arrow { width: 24px; height: 24px; }
  }
@media (max-width: 400px) {
    .btn-live-demo-nav .bld-arrow { display: none; }
  }

/* footer band — site.css carries .site-footer and the columns, but not the referral
   banner, so without these .ft-refer collapses to a bare link on a dark ground. */
/* Site-wide referral strip. A referral program is not a "Company" sitemap
   entry — it is a standing secondary CTA, so it sits at the top of the dark
   footer above a divider, visually separate from "Schedule a demo" so the two
   never compete. Values are literal rather than tokenised because this same
   block ships into pages with different token sets. */
.site-footer .ft-refer{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:34px 32px;border-bottom:1px solid rgba(255,255,255,.10)}
@media (max-width:720px){.site-footer .ft-refer{padding:28px 20px}}
.site-footer .ft-refer-copy h3{font-family:inherit;font-size:19px;font-weight:600;color:#fff;margin:0 0 5px;letter-spacing:-.012em;line-height:1.35}
.site-footer .ft-refer-copy p{font-size:14.5px;color:#9FB0CE;margin:0;line-height:1.5}
.site-footer .ft-refer-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#203B8E;border-radius:999px;padding:13px 24px;font-size:15px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .16s ease,transform .16s ease}
.site-footer .ft-refer-btn:hover{background:#eef3fc;transform:translateY(-1px)}

/* ---------- directory ---------- */
[hidden]{display:none !important}
/* The browser's [hidden] is display:none at UA weight, which .row{display:flex} below silently
   outranks — the filter hid nothing while reporting the right count. */

.dir{padding-bottom:8px}
/* :not(.btn) matters — a bare ".dir a" colour rule outranks site.css's .btn-primary{color:#fff}
   on specificity and rendered the Claim button's label in dark blue on dark blue. */
.dir a:not(.btn){color:var(--blue);text-decoration:none}
.dir a:not(.btn):hover{text-decoration:underline}
.dir .btn{text-decoration:none}

nav.crumbs{font-size:13px;color:var(--muted);padding:22px 0 0}
nav.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
nav.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--line)}
nav.crumbs a{color:var(--muted)}
nav.crumbs a:hover{color:var(--ink)}

.pagehead{padding:18px 0 26px}
.pagehead h1{font-size:38px;line-height:1.12;letter-spacing:-.02em;font-weight:700;
  color:var(--ink);margin:0;text-wrap:balance}
@media(max-width:700px){.pagehead h1{font-size:29px}}
.pagehead .lede{margin:12px 0 0;max-width:62ch;font-size:17px;line-height:1.6;color:var(--muted)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-lite);margin:0 0 10px}
.count{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.dir h2{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0 0 14px}
.section{margin:0 0 30px}

/* rows */
.rows{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.row{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:15px 18px;
  background:var(--white);border:1px solid var(--line-white);border-radius:12px}
.row:hover{border-color:var(--blue-soft)}
.row .who{min-width:0}
.row .name{font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.row .name a{color:var(--ink)}
.row .name a:hover{color:var(--blue)}
.row .where{font-size:13.5px;color:var(--muted);margin-top:2px}
.row .tel{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14.5px;font-weight:500;
  color:var(--muted)}

/* state grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:8px;
  list-style:none;margin:0;padding:0}
.grid a{display:flex;justify-content:space-between;gap:10px;padding:12px 15px;background:var(--white);
  border:1px solid var(--line-white);border-radius:10px;color:var(--ink);font-weight:500;
  font-size:14.5px}
.grid a:hover{border-color:var(--blue-soft);text-decoration:none;color:var(--blue)}
.grid .n{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}

/* filter */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.filter{margin:0 0 14px}
.filter input{width:100%;max-width:540px;padding:14px 18px;font:inherit;font-size:15.5px;
  color:var(--ink);background:var(--white);border:1.5px solid var(--line-white);border-radius:12px;
  -webkit-appearance:none;appearance:none}
.filter input::placeholder{color:var(--muted)}
.filter input:focus-visible{outline:none;border-color:var(--blue-lite)}
.filter input:disabled{background:var(--blue-tint)}
/* Reserve a line only when there is something to say — an always-present empty status left a
   visible hole between the box and the results. */
.filter-status{margin:8px 2px 0;font-size:14px;color:var(--muted)}
.filter-status:empty{margin:0}
.dist{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--blue);background:var(--blue-soft);border-radius:6px;padding:2px 8px;
  font-variant-numeric:tabular-nums}
.chip{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin:0 5px 5px 0;
  padding:5px 12px;border-radius:8px;color:var(--blue);background:var(--blue-soft);
  border:1px solid transparent}
.chip:hover{background:var(--blue-tint);border-color:var(--blue-lite)}

/* company page */
.company{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;
  align-items:start}
@media(max-width:820px){.company{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line-white);border-radius:14px}
dl.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 22px;padding:22px 24px}
dl.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:2px}
dl.facts dd{margin:0;color:var(--ink);font-size:15px;line-height:1.5}
dl.facts dd.tel{font-variant-numeric:tabular-nums;font-weight:600}
.unclaimed{font-size:13px;color:var(--muted);margin:10px 0 0}

/* owner panel */
.owner{padding:20px 22px}
.owner h2{font-size:16px;margin:0 0 6px}
.owner p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--muted)}
.owner .actions{display:flex;flex-direction:column;gap:9px}
.owner .btn{width:100%;justify-content:center}
.owner .note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font-size:13px;padding:4px 10px;border-radius:8px;background:var(--blue-tint);
  color:var(--blue);border:1px solid var(--blue-soft)}

/* notice */
.notice{margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--line-white)}
.notice p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--muted);max-width:80ch}

/* ---------- request pages (claim / report a change) ---------- */
.form-wrap{max-width:620px}
.form-card{padding:24px 26px}
.about-listing{margin:14px 0 0;font-size:14px;color:var(--muted);background:var(--blue-tint);
  border:1px solid var(--blue-soft);border-radius:10px;padding:9px 14px;display:inline-block}
.done{padding:26px 28px}
.done h2{font-size:20px;margin:0 0 10px}
.done p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch}
.actions-inline{display:flex;gap:10px;flex-wrap:wrap;margin:0}
/* The V2 embed renders inline in our DOM, so the form inherits this page's CSS rather than
   arriving as a HubSpot-looking widget. Selectors below are HubSpot's own generated names. */
.form-card .hs-form-field{margin:0 0 16px}
.form-card .hs-form-field>label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  margin:0 0 6px}
.form-card .hs-form-required{color:var(--red,#e0414b);margin-left:2px}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],
.form-card select,.form-card textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line-white);border-radius:10px;-webkit-appearance:none;appearance:none}
.form-card select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.form-card textarea{min-height:104px;resize:vertical}
.form-card input:focus-visible,.form-card select:focus-visible,.form-card textarea:focus-visible{
  outline:none;border-color:var(--blue-lite)}
.form-card .hs-error-msg,.form-card .hs-error-msgs label{color:#e0414b;font-size:13px;
  margin:5px 0 0;display:block}
.form-card .hs-button{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;border-radius:12px;border:1.5px solid transparent;background:var(--blue);
  color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.form-card .hs-button:hover{background:var(--navy)}
.form-card ul{list-style:none;margin:0;padding:0}
.form-card .hs_error_rollup{margin:0 0 12px}

/* ---------- US map ---------- */
.usmap{margin:0 0 30px}
.usmap svg{display:block;width:100%;height:auto;max-width:860px;margin:0 auto}
.usmap a{cursor:pointer}
.usmap path{stroke:#fff;stroke-width:1;stroke-linejoin:round;transition:fill .12s ease}
.usmap .s1 path{fill:#eef3fb}
.usmap .s2 path{fill:#d7e3f6}
.usmap .s3 path{fill:#b3c8ea}
.usmap .s4 path{fill:#7c9dd4}
.usmap .s5 path{fill:var(--blue)}
.usmap a:hover path{fill:var(--orange)}
.usmap a:focus-visible{outline:none}
.usmap a:focus-visible path{fill:var(--orange);stroke:var(--ink);stroke-width:1.5}
.maplegend{display:flex;align-items:center;gap:6px;justify-content:center;margin:12px 0 0;
  font-size:12.5px;color:var(--muted)}
.maplegend .k{width:17px;height:11px;border-radius:2px;display:inline-block}
.maplegend .k.s1{background:#eef3fb;margin-right:2px}
.maplegend .k.s2{background:#d7e3f6}
.maplegend .k.s3{background:#b3c8ea}
.maplegend .k.s4{background:#7c9dd4}
.maplegend .k.s5{background:var(--blue);margin-right:2px}
@media(max-width:600px){.usmap{margin-bottom:22px}.maplegend{font-size:11.5px}}

.gap{margin:0;padding:14px 24px 20px;font-size:13.5px;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--line-white)}
a.mail{word-break:break-all}
.row .tel{text-decoration:none}
.row .tel:hover{text-decoration:underline}

/* The standalone way into the two forms, on the home and state pages. A person whose company
   is not listed has no listing page to click from, so this is their only route. */
.owner-cta{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:36px 0 0;padding:22px 24px;border:1px solid var(--line-white);border-radius:12px;
  background:#F7F9FC}
.owner-cta h2{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.owner-cta p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:62ch}
.owner-cta .actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
@media (max-width:640px){.owner-cta{padding:18px}}

/* The footer's top padding lives in index.html's inline CSS, not in site.css, so a page that
   links site.css alone renders the wordmark tight against the referral banner. The directory
   pages are such a page. Same value, so the footer matches the home page exactly. */
.site-footer .ft-top{padding-top:52px}