/* Barlow (body), Barlow Condensed 700 (header wordmark only), Lilita One (headlines), SIL Open Font License 1.1, self-hosted (latin subset). No third-party font requests. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/LilitaOne-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/BarlowCondensed-700.woff2") format("woff2"); }
:root {
  --coral: #E07A3F;
  --grape: #4F6B3A;
  --peach: #EFE6D2;
  --ink: #1B1A17;
  --bg: #F7F2E7;
  --surface: #FFFFFF;
  --link: #3F5A2C;
  --line: #B9AE96;
  --x-deep: #2C3D20;
  --x-deep2: #3B5129;
  --x-purple: #4F6B3A;
  --x-purple-tint: #EEF1E7;
  --x-purple-text: #33461F;
  --x-coral: #E07A3F;
  --x-coral-tint: #FBF1E6;
  --x-upsell: #7A5233;
  --x-link2: #3F5A2C;
  --x-snap-tint: #F7F2E7;
  --x-snap-bar: #E4DCC8;
  --x-snap-line: #CFC4AA;
  --x-snap-sep: #CFC4AA;
  --x-snap-muted: #4A4A3E;
  --x-snap-kicker: #E9E2CF;
  --x-snap-sub: #EFE6D2;
  --x-snap-note: #E9E2CF;
  --x-grad-mid: #7A5233;
  --x-pop: #EFE6D2;
  --x-scan: #EFE6D2;
  --x-glow1: rgba(224, 122, 63, .45);
  --x-glow2: rgba(79, 107, 58, .55);
  --x-glow3: rgba(224, 122, 63, .4);
  --x-shadow: rgba(27, 26, 23, .35);
  --text: #1B1A17;
  --display: "Lilita One", "Arial Black", Impact, "Segoe UI", system-ui, sans-serif;
  --display-weight: 400;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 12px 32px color-mix(in srgb, var(--ink) 10%, transparent);
  --radius: 16px;
  --wrap: 72rem;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--bg);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: var(--display-weight, 700);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.35rem);
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  margin: 1.4rem 0 0.75rem;
}

h3 {
  font-size: 1.25rem;
  margin: 0.35rem 0 0.45rem;
}

p {
  margin: 0 0 0.9rem;
}

a {
  color: var(--link, var(--grape));
  text-underline-offset: 0.15em;
}

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.lede {
  font-size: 1.125rem;
  max-width: 42rem;
}

.section {
  padding: 0.4rem 0 1.2rem;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 80;
  background: var(--surface);
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
}

.skip:focus {
  top: 0.5rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, var(--surface));
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.78rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 48px;
  height: 48px;
}

.brand span {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.26rem;
  line-height: 1.1;
}

.nav-toggle {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: 0.3rem 0.9rem;
}

.site-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.85rem;
}

.site-nav.is-open {
  display: flex;
}

.site-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 600;
  padding: 0.55rem 0.15rem;
  border-radius: 8px;
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"]:not(.btn) {
  text-decoration: underline;
}

.hero {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--coral) 55%, transparent), transparent 46%),
    var(--grape);
  color: var(--surface);
  padding: 2.4rem 0 2.6rem;
}

.hero h1,
.hero h2 {
  color: var(--surface);
}

.hero .lede,
.hero > .wrap > p {
  color: var(--bg);
}

.finder {
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.finder label,
.finder p {
  color: var(--ink);
}

.finder .btn {
  width: 100%;
}

.tile-grid,
.city-grid,
.card-grid {
  display: grid;
  gap: 0.9rem;
}

.link-card,
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 100%;
  padding: 1rem;
  text-decoration: none;
}

.link-card:hover {
  outline: 2px solid var(--coral);
  outline-offset: 0;
}

.cat-mark {
  width: 2.75rem;
  height: 2.75rem;
  padding: .4rem;
  border-radius: 8px;
  background: var(--grape);
  color: var(--peach);
  display: inline-flex;
  box-sizing: border-box;
}

.cat-mark svg {
  width: 100%;
  height: 100%;
}

.cat-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.2;
}

.cat-blurb {
  color: var(--text);
}

.city-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.tile-go {
  margin-top: auto;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.card {
  padding: 1.1rem 1.15rem 1.15rem;
}

.card h3 a {
  text-underline-offset: 0.12em;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
}

.badge-sample {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
}

.badge-sponsored {
  background: var(--grape);
  color: var(--surface);
}

.meta {
  font-size: 0.98rem;
}

.note {
  font-size: 0.98rem;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 0.5rem 4.5rem;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.step h2,
.step h3 {
  margin-top: 0.15rem;
}

.cta-band {
  background:
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--coral) 50%, transparent), transparent 52%),
    var(--grape);
  color: var(--surface);
  border-radius: 20px;
  padding: 1.4rem;
}

.cta-band h2 {
  color: var(--surface);
  margin-top: 0;
}

.cta-band p {
  color: var(--bg);
}

.cta-band .btn-ghost {
  color: var(--surface);
  border-color: var(--surface);
  background: transparent;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 0.4rem 0 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-accent {
  background: var(--coral);
  color: var(--ink);
  border: 2px solid var(--coral);
}

.btn-navy {
  background: var(--grape);
  color: var(--surface);
  border: 2px solid var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.btn:disabled {
  background: var(--surface);
  color: var(--text);
  border: 2px dashed var(--ink);
  cursor: not-allowed;
}

.nav-cta {
  font-size: 1rem;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  list-style: none;
  padding: 1rem 0 0;
  margin: 0;
  font-size: 0.95rem;
}

.crumbs li + li::before {
  content: "/";
  margin: 0 0.4rem;
}

.page-head {
  padding-top: 0.35rem;
}

.split {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.price {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.15rem 0;
}

.price-note {
  font-weight: 700;
  margin-top: 0;
}

.tier-card .btn,
.checkout-block .btn {
  margin: 0.35rem 0.5rem 0.35rem 0;
}

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 40rem;
}

caption {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 1rem 1rem 0.4rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, var(--surface));
}

thead th {
  background: var(--bg);
}

.empty {
  background: var(--surface);
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, var(--bg));
  border-radius: var(--radius);
  padding: 1rem;
}

.disclaimer {
  background: var(--surface);
  border-left: 6px solid var(--coral);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.2rem;
}

.fit-cell {
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.source-list {
  margin: 0;
  padding-left: 1.1rem;
}

.faq-list details {
  background: var(--surface);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

.faq-list details p {
  margin: 0.7rem 0 0.2rem;
}

.stack-form {
  margin-top: 0.4rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 28%, var(--surface));
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
  min-height: 48px;
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-row {
  margin-bottom: 0.9rem;
}

.finder .form-row {
  margin-bottom: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 500;
}

.check input {
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  min-height: 1.2rem;
  margin-top: 0.2rem;
  padding: 0;
}

.check-grid {
  display: grid;
  gap: 0.45rem;
}

fieldset {
  border: 1px solid color-mix(in srgb, var(--ink) 20%, var(--surface));
  border-radius: 12px;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem 0.9rem;
}

legend {
  font-weight: 700;
  padding: 0 0.3rem;
}

.prose {
  max-width: 42rem;
  padding-bottom: 1rem;
}

.prose h2 {
  margin-top: 1.5rem;
}

address {
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.site-footer {
  background: var(--grape);
  color: var(--surface);
  margin-top: 2.5rem;
  padding: 2.2rem 0 1.4rem;
  border-top: 6px solid var(--coral);
}

.site-footer a {
  color: var(--surface);
}

.footer-grid {
  display: grid;
  gap: 1.4rem;
}

.footer-brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.footer-label {
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin: 0.28rem 0;
}

.disclosure {
  margin-top: 1.5rem;
}

.disclosure p,
.legal-line {
  margin: 0.4rem 0;
}

main {
  min-height: 50vh;
}

@media (min-width: 40rem) {
  .brand span {
    font-size: 1.56rem;
  }

  .tile-grid,
  .city-grid,
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 52rem) {
  .finder {
    grid-template-columns: 1.4fr 0.8fr auto;
    align-items: end;
  }

  .finder .btn {
    width: auto;
  }
}

@media (min-width: 64rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.85rem;
    padding: 0 0 0.65rem;
  }

  .tile-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .city-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .step-wide {
    grid-column: 1 / -1;
  }

  .split {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.8fr);
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 0.85fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .badge,
  .card,
  .link-card {
    border: 1px solid ButtonText;
  }
}


/* ---- Edition-specific additions ---- */
.hero .kicker { color: var(--peach); font-family: var(--display); font-weight: var(--display-weight, 700); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.3rem; }
.hero .hook { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); color: var(--peach); line-height: 1.1; }
.site-header { border-bottom: 4px solid var(--coral); }
.btn-accent { color: var(--ink); }
.btn-static { cursor: default; }
.card-grid.three { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .card-grid.three { grid-template-columns: repeat(3, 1fr); } .listing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .listing-grid { grid-template-columns: 1fr 1fr; } }

.chip { display: inline-block; align-self: flex-start; font-size: 0.74rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--ink); line-height: 1.4; }
.chip-live { background: var(--coral); color: var(--ink); }
.chip-soon { background: var(--surface); color: var(--ink); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.4rem 0; }
.chips li { background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 25%, var(--surface)); border-radius: 6px; padding: 0.15rem 0.55rem; font-size: 0.9rem; }
.zip-chips li { font-variant-numeric: tabular-nums; font-weight: 600; }

.notice { background: var(--surface); border-left: 6px solid var(--coral); border-radius: 10px; padding: 0.6rem 1rem; margin: 0.8rem 0 1.2rem; }
.notice p { margin: 0; }
.pitch { background: var(--grape); color: var(--surface); border-radius: 20px; padding: 1.4rem; margin: 1.2rem 0; border-left: 10px solid var(--coral); }
.pitch h2 { color: var(--peach); margin-top: 0; }
.pitch p { color: var(--surface); }
.pitch .btn-ghost { color: var(--surface); border-color: var(--surface); background: transparent; }

/* tier card variants */
.lcard { border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.lcard-free { box-shadow: none; padding: 0.9rem 1rem; }
.lcard-free h3 { font-size: 1.1rem; margin: 0.3rem 0; }
.lcard-featured { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.lcard-priority { border: 3px solid var(--coral); box-shadow: 0 0 0 3px var(--ink), var(--shadow); background: color-mix(in srgb, var(--coral) 8%, var(--surface)); }
.lcard-head { display: flex; gap: 0.8rem; align-items: flex-start; }
.logo-mark { flex: 0 0 auto; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 10px; background: var(--grape); color: var(--peach); border: 3px solid var(--coral); font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 1.3rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.6rem 0; }
.gallery .ph { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, color-mix(in srgb, var(--grape) 25%, var(--bg)) 10px, color-mix(in srgb, var(--grape) 25%, var(--bg)) 20px); border-radius: 8px; display: grid; place-items: center; font-size: 0.75rem; color: var(--ink); text-align: center; }
.profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.6rem; }
.profile-head .logo-mark { width: 4.2rem; height: 4.2rem; font-size: 1.7rem; }
.profile-head h1 { margin: 0; }
.upgrade-card { margin-top: 1rem; }

/* upgrade comparison */
.look { margin: 2rem 0; }
.look-grid { display: grid; gap: 1rem; }
@media (min-width: 64rem) { .look-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.look-col h3 { margin: 0 0 0.4rem; }

/* Locally Verified badge */
.lv-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 0.15rem 0.5rem 0.15rem 0.35rem; font-size: 0.78rem; font-weight: 700; text-decoration: none; line-height: 1.35; }
.lv-badge:hover { background: var(--coral); }
.lv-large { font-size: 1.4rem; padding: 0.4rem 0.9rem 0.4rem 0.6rem; gap: 0.6rem; font-family: var(--display); font-weight: var(--display-weight, 700); }
.lv-inline { display: inline-flex; vertical-align: middle; margin-right: 0.3rem; }
.big-badge { margin: 1rem 0; }
.badge-sponsored { background: var(--grape); color: var(--surface); }

/* all categories */
.cat-group { margin: 1.5rem 0; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem 1.5rem; }
@media (min-width: 40rem) { .cat-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .cat-list { grid-template-columns: 1fr 1fr 1fr; } }
.cat-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, var(--surface)); padding: 0.3rem 0; }

.zip-msg, .zip-result { font-weight: 600; margin: 0.4rem 0 0; min-height: 1.4em; }
.zip-lookup .btn { margin-top: 0.2rem; }

/* Town label next to a listing name (towns are shown, not separated) */
.town-label { display: inline-block; margin-left: .35rem; padding: .1rem .55rem; border-radius: 999px; background: var(--grape); color: var(--surface); font: 700 .78rem/1.5 var(--body, inherit); letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.listing-filter { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--grape); border-radius: 8px; background: var(--surface); }
.listing-filter .filter-title { flex-basis: 100%; margin: 0; font-weight: 700; }
.listing-filter .form-row { margin: 0; }
.listing-filter input, .listing-filter select { min-width: 9rem; }

/* Hot Coral & Deep Grape: coral only as fills; text ink or white; grape for links and accents */
.logo-mark { color: var(--surface); }
.btn-accent:hover { background: var(--peach); border-color: var(--coral); }
.btn-navy:hover { background: var(--ink); border-color: var(--ink); }

/* Not yet claimed (basic listings) */
.badge-unclaimed { background: color-mix(in srgb, var(--peach) 45%, var(--surface)); color: var(--ink); border: 1px solid var(--peach); }
.lcard-unclaimed { padding: 0.8rem 1rem; border: 1px dashed color-mix(in srgb, var(--ink) 30%, var(--surface)); box-shadow: none; }
.lcard-unclaimed h3 { font-size: 1.05rem; margin: 0.3rem 0 0.2rem; }
.lcard-unclaimed .meta { margin: 0 0 0.3rem; font-size: 0.92rem; }
.claim-prompt { font-size: 0.85rem; margin: 0.3rem 0 0; }

.headshot { flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 12px; object-fit: cover; border: 3px solid var(--coral); }

/* website on cards: Priority = button, Featured = link */
.btn-site { background: var(--grape); color: var(--surface); border: 2px solid var(--grape); }
.btn-site:hover { background: var(--ink); border-color: var(--ink); }
.site-link { font-weight: 700; color: var(--grape); }
.site-link-static { color: var(--ink); text-decoration: underline dotted; }
.card-site { margin: 0.25rem 0 0.4rem; }
.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; }

.scard { margin: 1rem 0 1.25rem; border-style: dashed; }
.scard h3 { margin: 0.4rem 0; }

/* Find a category: live suggestions */
.finder-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0.2rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line, #cfcfcf);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  color: var(--text);
}

.finder-list li {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
}

.finder-list li:hover,
.finder-list li.is-active {
  background: var(--bg);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.finder-name {
  font-weight: 700;
}

.finder-group {
  font-size: 0.85em;
  opacity: 0.75;
  margin-left: 0.4rem;
}

.finder-list .finder-none {
  cursor: default;
}

.finder-list .finder-none a {
  font-weight: 700;
}

.finder-status {
  margin: 0;
  font-size: 0.9rem;
  grid-column: 1 / -1;
}

.finder-status:empty {
  display: none;
}

.feature-band {
  margin: 1.25rem 0;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--coral);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.feature-card:hover {
  outline: 2px solid var(--grape);
}

.feature-card .feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.share-block {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.share-block h2 {
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}

.share-block .form-row input {
  width: 100%;
  max-width: 32rem;
}

.share-status {
  min-height: 1.4em;
  font-weight: 600;
  margin: .5rem 0 0;
}

.share-details {
  margin-top: .9rem;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: .6rem;
}

.share-details summary {
  cursor: pointer;
  font-weight: 600;
}

.share-compact {
  margin: .6rem 0 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.share-compact h3 {
  font-size: 1rem;
  margin: 0 0 .3rem;
}

.prose.legal { max-width: 46rem; }
.prose.legal h2 { scroll-margin-top: 5rem; }
.prose.legal .caps { font-size: .92rem; line-height: 1.5; letter-spacing: .01em; padding: .75rem 1rem; border-left: 4px solid var(--coral); background: var(--surface); }
.legal-toc { max-width: 46rem; margin: 0 0 1.25rem; }
.legal-toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.25rem; font-size: .95rem; }
@media (max-width: 40rem) { .legal-toc ol { columns: 1; } }
.legal-note { font-size: .9rem; }

/* Locally Verified sticker in the home pitch band */
.pitch-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .25rem 1.25rem; }
.pitch-foot .actions { margin-bottom: .5rem; }
.sticker { display: block; flex: 0 0 auto; margin: 1.4rem 0 .6rem .6rem; line-height: 0; transform: rotate(-6deg); transform-origin: center; transition: transform .2s ease; }
.sticker img { display: block; width: 150px; height: 150px; max-width: 100%; filter: drop-shadow(0 6px 8px rgba(20, 6, 40, .45)) drop-shadow(0 1px 2px rgba(20, 6, 40, .4)); }
.sticker:hover { transform: rotate(-3deg) translateY(-2px); }
@media (max-width: 40rem) { .sticker { margin: 1.1rem 0 .5rem .5rem; } .sticker img { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .sticker { transition: none; } }

/* Sticker in the home hero: below the header's "List your business" button on wide screens, below the buttons on narrow ones */
.hero .sticker { margin: 1.1rem 0 .25rem .5rem; width: max-content; }
@media (min-width: 64rem) {
  .hero > .wrap { position: relative; }
  .hero > .wrap > .kicker, .hero > .wrap > h1, .hero > .wrap > p { max-width: 34rem; }
  .hero .sticker { position: absolute; top: .9rem; left: 36rem; margin: 0; }
}

/* =====================================================================
   STICKER STYLE (site-wide): bold ink borders, boxed cards with offset hard shadows,
   sticker-like badges, chunky headline font (Lilita One, self-hosted).
   Colors: ink #2B0F47 borders/text, coral = fills/buttons only (never text), grape = links/dark panels,
   peach = pop, bg #FFF1EC page. Body text stays Barlow on white/cream for readability.
   ===================================================================== */
:root {
  --bw: 1.5px;
  --hard: 2px 2px 0 var(--ink);
  --hard-sm: 1px 1px 0 var(--ink);
  --hard-lg: 3px 3px 0 var(--ink);
  --radius: 14px;
}
@media (max-width: 40rem) {
  :root { --bw: 1.5px; --hard: 2px 2px 0 var(--ink); --hard-lg: 2.5px 2.5px 0 var(--ink); }
}
body { font-size: 1.0625rem; }

/* headlines: chunky display face, regular weight (the face is already heavy), no faux bold */
h1, h2, h3, .cat-name, .price, .footer-brand, .step::before, .logo-mark, .lv-large, .hero .kicker, .hero .hook {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.01em;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.12; }
h3 { line-height: 1.15; }
.hero h1 { text-shadow: 1px 1px 0 var(--ink); }
.hero .kicker { letter-spacing: 0.06em; }

/* header + footer frames */
.site-header { border-bottom: 2px solid var(--ink); box-shadow: 0 2px 0 var(--coral); }
.topbar { background: var(--surface); }
.site-footer { border-top: 2px solid var(--ink); box-shadow: inset 0 3px 0 var(--coral); padding-top: 2.6rem; }

/* hero: ink frame, subtle dot texture like a sticker sheet */
.hero {
  background:
    radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--peach) 18%, transparent) 1.5px, transparent 1.6px) 0 0 / 18px 18px,
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--coral) 55%, transparent), transparent 46%),
    var(--grape);
  border-bottom: 2px solid var(--ink);
}

/* boxed cards with hard offset shadows */
.link-card, .card, .step, .table-wrap, .share-block, .feature-card, .finder, .listing-filter, .faq-list details, .notice, .disclaimer, .empty, .cta-band, .pitch, fieldset, .look-col .card {
  border: var(--bw) solid var(--ink);
  box-shadow: var(--hard);
}
.link-card, .card, .step, .table-wrap, .feature-card, .finder, .share-block { border-radius: var(--radius); }
.cta-band, .pitch { border-radius: 18px; box-shadow: var(--hard-lg); }
.pitch { border-left: var(--bw) solid var(--ink); }
.cta-band { background: radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--peach) 16%, transparent) 1.5px, transparent 1.6px) 0 0 / 18px 18px, radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--coral) 50%, transparent), transparent 52%), var(--grape); }
.finder { box-shadow: var(--hard-lg); border-color: var(--ink); }
.notice, .disclaimer { border-left: 6px solid var(--coral); border-radius: 12px; }
.empty { border-style: dashed; box-shadow: none; }
.faq-list details { border-radius: 12px; box-shadow: var(--hard-sm); }
.faq-list details[open] { background: color-mix(in srgb, var(--peach) 22%, var(--surface)); }
fieldset { box-shadow: var(--hard-sm); background: var(--surface); }
.listing-filter { border-radius: 12px; box-shadow: var(--hard-sm); }
.table-wrap { overflow-x: auto; }
thead th { background: var(--peach); color: var(--ink); border-bottom: var(--bw) solid var(--ink); }
th, td { border-bottom-color: color-mix(in srgb, var(--ink) 25%, var(--surface)); }

/* tiles + listing cards: lift on hover (shadow grows), tier variants stay distinct */
.link-card { transition: transform .12s ease, box-shadow .12s ease; }
.link-card:hover, .feature-card:hover { outline: none; transform: translate(-1px, -1px); box-shadow: var(--hard-lg); background: color-mix(in srgb, var(--peach) 28%, var(--surface)); }
.cat-mark { border: 1px solid var(--ink); border-radius: 10px; box-shadow: 1px 1px 0 var(--ink); }
.lcard { border-color: var(--ink); position: relative; }
.lcard-free { box-shadow: var(--hard-sm); }
.lcard-featured { border-width: var(--bw); box-shadow: var(--hard); }
.lcard-priority { border: var(--bw) solid var(--ink); box-shadow: var(--hard-lg), 0 0 0 0 transparent; background: color-mix(in srgb, var(--peach) 30%, var(--surface)); }
.lcard-unclaimed { border: 1.5px dashed var(--ink); box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 35%, transparent); background: var(--surface); }
.scard { border-style: dashed; box-shadow: var(--hard); }
.logo-mark { border: var(--bw) solid var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.headshot { border: var(--bw) solid var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.step::before { border: 1.5px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.gallery .ph { border: 1px solid var(--ink); }

/* sticker-like badges and chips: ink outline, tiny tilt, small hard shadow */
.badge, .chip, .lv-badge, .town-label, .chips li {
  border: 1px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
}
.badge { border-radius: 999px; padding: 0.2rem 0.65rem; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.72rem; transform: rotate(-1.5deg); }
.badge-sponsored { background: var(--grape); color: var(--surface); }
.badge-sample { background: var(--surface); color: var(--ink); border: 1px solid var(--ink); }
.badge-unclaimed { background: var(--peach); color: var(--ink); border: 1px solid var(--ink); }
.lv-badge { border-radius: 999px; padding: 0.15rem 0.6rem 0.15rem 0.4rem; background: var(--surface); transform: rotate(-1.5deg); }
.lv-badge:hover { background: var(--coral); }
.lv-large { border-radius: 999px; box-shadow: var(--hard-sm); }
.town-label { border-radius: 999px; background: var(--grape); color: var(--surface); padding: 0.05rem 0.55rem; box-shadow: 1px 1px 0 var(--ink); }
.chip { border-radius: 999px; padding: 0.1rem 0.6rem; }
.chip-live { background: var(--coral); }
.chips li { border-radius: 999px; background: var(--bg); padding: 0.1rem 0.7rem; box-shadow: 1px 1px 0 var(--ink); border-width: 1px; }
.badge-row { gap: 0.5rem 0.5rem; margin-bottom: 0.25rem; }

/* buttons: ink border + hard shadow, press-down on click. Coral is a fill only; labels stay ink or white. */
.btn {
  font-family: var(--body);
  font-weight: 700;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--hard-sm);
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.btn:hover { transform: translate(-0.5px, -0.5px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(0.5px, 0.5px); box-shadow: 0.5px 0.5px 0 var(--ink); }
.btn-accent { background: var(--coral); color: var(--ink); border-color: var(--ink); }
.btn-accent:hover { background: var(--peach); border-color: var(--ink); }
.btn-navy { background: var(--grape); color: var(--surface); border-color: var(--ink); }
.btn-navy:hover { background: var(--ink); }
.btn-site { background: var(--grape); border-color: var(--ink); }
.btn-site:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--peach); }
.hero .btn, .cta-band .btn, .pitch .btn { border-color: var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.cta-band .btn-ghost, .pitch .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.cta-band .btn-ghost:hover, .pitch .btn-ghost:hover { background: var(--peach); }
.btn:disabled, .btn-static { box-shadow: none; }
.btn-static:hover { transform: none; box-shadow: var(--hard-sm); }
.nav-toggle { border-width: var(--bw); box-shadow: var(--hard-sm); }
.nav-cta { box-shadow: 1px 1px 0 var(--ink); }
.site-nav a:not(.btn) { font-weight: 700; }
.site-nav a[aria-current="page"]:not(.btn) { text-decoration-thickness: 3px; text-decoration-color: var(--coral); }

/* forms */
input, select, textarea { border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 30%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; box-shadow: var(--hard-sm); }
.check input { box-shadow: none; }
.finder-list { border: var(--bw) solid var(--ink); box-shadow: var(--hard); border-radius: 12px; }
.finder-list li:hover, .finder-list li.is-active { background: var(--peach); outline: none; }
label { font-weight: 700; }

/* misc: prose, crumbs, legal callouts */
.crumbs { font-weight: 600; }
.prose.legal .caps { border: 1px solid var(--ink); border-left: 6px solid var(--coral); border-radius: 10px; }
.cat-list li { border-bottom: 2px dotted color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.zip-chips li { font-weight: 700; }

.profile-head { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .btn, .link-card { transition: none; }
  .btn:hover, .link-card:hover { transform: none; }
}

/* Verified listings: a thin, soft pink-orange band inside the ink border (fill only; no text uses it).
   Outer 3px ink border + 3px band (pop/coral blend) + 2px ink inner line, then the usual hard shadow.
   The ink line inside keeps the band readable on the peach-tinted Priority card. */
:root { --band: color-mix(in srgb, var(--coral) 35%, var(--peach)); }
.lcard[data-lv="yes"] {
  border: var(--bw) solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--band), inset 0 0 0 3px var(--ink), var(--hard);
}
.lcard-priority[data-lv="yes"] { box-shadow: inset 0 0 0 2px var(--band), inset 0 0 0 3px var(--ink), var(--hard-lg); }
.lcard-free[data-lv="yes"] { padding: 1.05rem 1.2rem; }
.lcard[data-lv="yes"]:not(.lcard-free) { padding: 1.3rem 1.4rem 1.25rem; }
.lv-main {
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.1rem;
  box-shadow: inset 0 0 0 2px var(--band), inset 0 0 0 3px var(--ink), var(--hard);
}
.lv-main .upgrade-card, .lv-main .card { background: var(--bg); }
@media (max-width: 40rem) {
  .lv-main { padding: 1.25rem 1.05rem 1rem; }
  .lcard[data-lv="yes"]:not(.lcard-free) { padding: 1.25rem 1.1rem 1.15rem; }
  .lcard-free[data-lv="yes"] { padding: 1.05rem 1.1rem; }
}

/* Not yet claimed / unverified basic cards: muted grey-tinted surface and a softer dashed border.
   Text stays full ink (14:1 on the grey) and links stay grape (6:1); nothing uses opacity.
   The Sample Priority card (.scard) and layout examples are not touched. */
.lcard-unclaimed {
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, var(--bg));
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.lcard-unclaimed .claim-prompt { font-size: 0.9rem; }
.lcard-unclaimed .claim-prompt a { font-weight: 700; color: var(--grape); text-decoration-thickness: 2px; }

/* Priority company logo: small bordered square (owner-supplied image, contained, never cropped) */
.logo-img {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 70%, var(--surface));
  border-radius: 10px;
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 35%, transparent);
  overflow: hidden;
}
.logo-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.profile-head .logo-img { width: 4.75rem; height: 4.75rem; padding: 0.3rem; border-radius: 12px; }
.logo-note { max-width: 42rem; }

/* CTA / pitch bands: solid grape behind the copy (no dot texture or coral glow under the text) and pure white text,
   so every line, including the last line next to the buttons, keeps full contrast (white on grape 7:1). */
.cta-band, .pitch { background: var(--grape); }
.cta-band h2, .cta-band p, .pitch p { color: #fff; opacity: 1; text-shadow: none; }
.cta-band .lede { color: #fff; }
.pitch h2 { color: var(--peach); }
/* Cause of the "faded" ending: the last words are a link, and links are grape by default, i.e. grape text on the grape band. */
.cta-band a:not(.btn), .pitch a:not(.btn) { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.cta-band a:not(.btn):hover, .pitch a:not(.btn):hover { color: var(--peach); }

/* Wide company logos (e.g. 2.6:1): own row above the name, wide box, full logo shown uncropped on white */
.logo-row { margin: 0 0 0.6rem; }
/* Wide (landscape) logos: own row above the name, whole logo shown uncropped on a light box. */
.logo-img.logo-wide {
  --logo-h: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
}
.logo-img.logo-wide img { display: block; height: var(--logo-h); width: auto; max-width: 100%; max-height: none; object-fit: contain; }
article.section .logo-row .logo-wide { --logo-h: 5rem; padding: 0.5rem 0.9rem; border-radius: 12px; }
@media (max-width: 40rem) {
  .logo-img.logo-wide { --logo-h: 3.1rem; }
  article.section .logo-row .logo-wide { --logo-h: 3.8rem; }
}

/* /app/ : Add to Home Screen steps (mobile-first). Each step: numbered coral circle, short copy, small illustration. */
.app-os { margin: 1.4rem 0 1.8rem; }
.app-step { padding-bottom: 1rem; }
.app-fig { margin: 0.6rem 0 0.2rem; max-width: 20rem; border: 1px solid color-mix(in srgb, var(--ink) 60%, var(--surface)); border-radius: 12px; overflow: hidden; background: var(--bg); }
.app-fig svg { display: block; width: 100%; height: auto; }
@media (min-width: 52rem) {
  .app-step { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 1.2rem; align-items: start; }
  .app-step h3, .app-step p { grid-column: 1; }
  .app-step .app-fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* Home hero: small "Get the app" pill next to the kicker (cream pill, ink text; wraps under the kicker on narrow screens) */
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; max-width: 34rem; margin: 0 0 .3rem; }
.hero-top .kicker { margin: 0; }
.app-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px;
  box-shadow: 1px 1px 0 var(--ink);
  padding: .28rem .8rem .28rem .65rem;
  font-family: var(--body, inherit); font-weight: 700; font-size: .92rem; line-height: 1.2;
  text-decoration: none;
}
.app-pill svg { flex: 0 0 auto; }
.app-pill:hover { background: var(--peach); color: var(--ink); text-decoration: none; }
.app-pill:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }

/* ===== Business lookup: header strip, lookup pages, home sticker callout ===== */
.lookup-bar { background: var(--grape); }
.lookup-bar .wrap { display: flex; justify-content: flex-end; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.lookup-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.2rem 0.95rem; border-radius: 999px; background: var(--coral); color: var(--ink); border: 2px solid var(--ink); font-weight: 800; font-size: 0.9rem; line-height: 1.1; text-decoration: none; }
.lookup-link:hover, .lookup-link[aria-current="page"] { background: var(--peach); }
.lookup-link:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }
.lookup-link svg { flex: 0 0 auto; }
@media (max-width: 24rem) { .lookup-link { font-size: 0.82rem; padding: 0.2rem 0.75rem; } }

.lookup-wrap { max-width: 34rem; padding-top: 2.5rem; padding-bottom: 3rem; }
.lookup-wrap.lookup-wide { max-width: 60rem; padding-top: 1.75rem; }
.lookup-title { font-size: 1.4rem; margin: 0 0 1rem; }
.lookup-form label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.lookup-row { display: flex; gap: 0.5rem; }
.lookup-row input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0.5rem 0.8rem; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; }
.lookup-row input:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.lookup-row .btn { flex: 0 0 auto; min-height: 48px; }
.lookup-out { margin: 1.4rem 0 0.5rem; }
.lookup-h { font-size: 1.2rem; margin: 0 0 0.7rem; }
.lookup-note { margin: 0.4rem 0 1rem; }
.lookup-results { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.9rem; }
.lookup-result h3 { margin: 0 0 0.2rem; }
.lookup-result .meta { margin: 0 0 0.6rem; }
.lookup-add { margin-top: 0.4rem; }
.lookup-add h3 { margin-top: 0; }
.badge-lv { background: var(--grape); color: var(--surface); }
.badge-claimed { background: var(--surface); color: var(--ink); border: 1px solid var(--ink); }

.dir-all { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid color-mix(in srgb, var(--ink) 15%, var(--surface)); }
.dir-all h3 { font-size: 1.05rem; margin: 1.4rem 0 0.3rem; }
.dir-count { font-weight: 400; color: color-mix(in srgb, var(--ink) 70%, var(--surface)); font-size: 0.9rem; }
.dir-jump { font-size: 0.9rem; line-height: 1.8; }
.dir-list { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2rem; }
.dir-list li { break-inside: avoid; margin: 0.12rem 0; font-size: 0.95rem; }
@media (min-width: 40rem) { .dir-list { columns: 2; } }
@media (min-width: 64rem) { .dir-list { columns: 3; } }

.cta-band-sticker { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.cta-band-sticker .cta-copy { flex: 1 1 22rem; min-width: 0; }
.sticker-callout { flex: 0 1 auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 11rem; }
.sticker-callout p { margin: 0.5rem 0 0; font-weight: 700; font-size: 0.95rem; color: var(--bg); }
.sticker.sticker-note { margin: 0.2rem 0 0; }
.sticker.sticker-note img { width: 120px; height: 120px; }
@media (max-width: 40rem) {
  .sticker-callout { flex-direction: row; max-width: 100%; text-align: left; gap: 1rem; }
  .sticker-callout p { margin: 0; flex: 1 1 0; min-width: 0; }
  .sticker.sticker-note { margin: 0.2rem 0; }
  .sticker.sticker-note img { width: 96px; height: 96px; }
}

/* Public beta card (only rendered by `node build.mjs --beta`) */
.beta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 1.25rem 0; }
.beta-band .beta-copy { flex: 1 1 22rem; }
.beta-band h2 { margin: 0.2rem 0 0.4rem; }
.beta-band p { margin: 0; }
.beta-band .beta-tag { display: inline-block; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--coral); color: var(--ink); margin-bottom: 0.3rem; }
.beta-band .btn { flex: 0 0 auto; }
@media (max-width: 40rem) { .beta-band .btn { width: 100%; text-align: center; justify-content: center; } }
.beta-band .beta-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; text-align: center; }
.beta-band .beta-how { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 40rem) { .beta-band .beta-actions { width: 100%; } }

/* Slim "Best on your phone" reminder (home page only, not sticky so the mobile header stays slim) */
.app-strip { background: var(--peach); color: var(--ink); border-bottom: 2px solid var(--ink); }
.app-strip[hidden] { display: none; }
.app-strip-bar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
.app-strip-bar p { margin: 0; font-size: 0.95rem; line-height: 1.2; text-align: center; }
.app-strip-bar a { color: var(--grape); font-weight: 800; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; }
.app-strip-bar a:focus-visible, .app-strip-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.app-strip-close { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; }
.app-strip-close:hover { background: rgba(43, 15, 71, 0.12); }
.footer-app a { font-weight: 700; }
[hidden][data-app-promo] { display: none !important; }

/* Hero: hand-drawn arrow + reminder pointing at the "Get the app" pill (beta build only) */
.hero-top { max-width: 100%; }
.app-row { display: flex; align-items: center; gap: .4rem; flex: 1 1 100%; min-width: 0; }
.app-row .app-pill { flex: 0 0 auto; }
.app-nudge { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; flex: 0 1 auto; }
.app-nudge[hidden] { display: none; }
.app-arrow { flex: 0 0 auto; display: block; transform-origin: 100% 70%; overflow: visible; }
.app-nudge-text { color: #fff; font-weight: 700; font-size: .88rem; line-height: 1.2; max-width: 11.5rem; }
@media (min-width: 40rem) { .app-nudge-text { font-size: .95rem; max-width: 20rem; } .app-arrow { width: 62px; height: 41px; } }
@media (prefers-reduced-motion: no-preference) {
  .app-arrow { animation: app-arrow-wiggle 2.2s ease-in-out 1.2s infinite; }
  .app-arrow-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: app-arrow-draw .9s ease-out .3s forwards; }
  .app-arrow-head { opacity: 0; animation: app-arrow-pop .3s ease-out 1s forwards; }
}
@keyframes app-arrow-wiggle { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-5px, -3px) rotate(-5deg); } 50% { transform: translate(-2px, 1px) rotate(2deg); } 75% { transform: translate(-6px, -2px) rotate(-3deg); } }
@keyframes app-arrow-draw { to { stroke-dashoffset: 0; } }
@keyframes app-arrow-pop { to { opacity: 1; } }

/* Back button bar (every page except home). Not sticky, so the mobile header stays slim. */
.back-bar { background: var(--bg); }
.back-bar .wrap { padding-top: .35rem; padding-bottom: .1rem; }
.back-btn { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0 1rem 0 .7rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--grape); font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 1px 1px 0 var(--ink); }
.back-btn:hover { background: var(--peach); color: var(--ink); text-decoration: none; }
.back-btn:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.back-btn svg { flex: 0 0 auto; }

.group-priority { margin: 0 0 1.6rem; }

/* Public Instagram (footer, Contact, About). Grape/peach only; coral never as text. */
.ig-line { margin: 0.45rem 0 0; }
.ig-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; }
.ig-link:hover, .ig-link:focus-visible { text-decoration: underline; }
.ig-icon { flex: 0 0 auto; }
.site-footer .ig-link { color: var(--peach); }
.site-footer .ig-link:hover, .site-footer .ig-link:focus-visible { color: #fff; }
.prose .ig-link { color: var(--grape); }
.prose .ig-link:hover, .prose .ig-link:focus-visible { color: var(--ink); }

/* More Finder areas strip */
.more-areas { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.2); }
.more-areas-sub { margin: 0 0 .8rem; opacity: .85; }
.more-areas-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.site-footer .area-card { margin: 0; background: var(--surface); color: var(--ink); border-radius: 12px; padding: .75rem .8rem .6rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.area-card img { width: 100%; max-width: 200px; height: auto; display: block; }
.area-tag { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; background: var(--peach); color: var(--ink); }
.area-card.is-here { box-shadow: inset 0 0 0 2px var(--coral); }
.area-card.is-here .area-tag { background: var(--coral); color: var(--surface); }
@media (min-width: 760px) { .more-areas-list { grid-template-columns: repeat(3, minmax(0, 15rem)); } }
.portal-link { margin: 1rem 0 0; font-size: .95rem; }
.look-plan { margin-top: .75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.look-price { font-family: var(--display); font-size: 1.6rem; margin: 0; }
.look-note { margin: 0; font-size: .9rem; }
.site-footer .footer-secure { margin: 1rem 0 0; font-size: .85rem; opacity: .75; }
.badge-onespot { display: inline-block; background: var(--coral); color: var(--surface); font-weight: 700; font-size: .8rem; letter-spacing: .02em; padding: .25rem .6rem; border-radius: 999px; }
.why-upgrade { margin: 2rem 0; }
.why-tagline { font-family: var(--display); font-size: 1.25rem; margin: .25rem 0 1rem; }
.why-compact { margin: 0 0 1rem; }
.why-compact ul { margin: 0; padding-left: 1.1rem; }
.why-compact li { margin: .3rem 0; }
.look-plan .badge-onespot { margin-bottom: .2rem; }
.tier-card.tier-card-priority, .look-plan.look-plan-priority { background: var(--x-purple-tint, #F1EAFD); border: 2px solid var(--x-purple, #6D2BD9); color: var(--x-deep, #1E1033); }
.look-plan.look-plan-priority { border-radius: 12px; padding: .8rem; }
.plan-lead { color: var(--x-coral, #FF5E5B); font-weight: 800; -webkit-text-stroke: 1px #000; paint-order: stroke fill; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
@supports (-webkit-text-stroke: 1px #000) and (paint-order: stroke fill) { .plan-lead { text-shadow: none; } }
.priority-tally { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; }
.tally-pill { display: inline-block; background: var(--x-purple-tint, #F1EAFD); color: var(--x-purple-text, #3B1478); border: 2px solid var(--x-purple, #6D2BD9); border-radius: 999px; padding: .25rem .75rem; font-weight: 800; font-size: .9rem; }
.tally-pill.tally-last { background: var(--x-coral, #FF5E5B); color: var(--x-deep, #1E1033); border-color: var(--x-deep, #1E1033); }
.tally-pill.tally-full { background: var(--x-deep, #1E1033); color: #fff; border-color: var(--x-deep, #1E1033); }
.btn-small { padding: .35rem .8rem; font-size: .9rem; }
/* Priority listing cards site-wide (full, compact/sample, home highlight): lavender look */
.card.lcard-priority, .card.lcard-priority[data-lv], .sample-priority, .preview-test-priority { background: var(--x-purple-tint, #F1EAFD); border: 2px solid var(--x-purple, #6D2BD9); color: var(--x-deep, #1E1033); box-shadow: var(--hard-lg); }
.card.lcard-priority :is(p, li, dd, dt, small, span:not([class*="badge"]):not([class*="tag"])) { color: var(--x-deep, #1E1033); }
/* Featured listing cards: peach tint, coral border (distinct from Basic white and Priority lavender) */
.card.lcard-featured, .card.lcard-featured[data-lv] { background: var(--x-coral-tint, #FFF1E8); border: 2px solid var(--x-coral, #FF5E5B); color: var(--x-deep, #1E1033); box-shadow: var(--hard); }
/* Real listing photos */
.gallery-real { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin: .6rem 0; }
.gallery-real .ph-real { margin: 0; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; }
.gallery-real .ph-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Basic listings: small, muted gray card. Name, category, town only. */
.card.lcard-basic, .card.lcard-basic[data-lv] { background: #F2F2F4; border: 1px solid #C9C9D1; box-shadow: none; color: #55556A; padding: .7rem .9rem; }
.card.lcard-basic h3 { font-size: 1rem; margin: .2rem 0; }
.card.lcard-basic h3 a { color: #3A3A4A; }
.card.lcard-basic .meta { color: #6B6B7B; font-size: .85rem; margin: 0; }
.basic-upsell { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; }
.basic-upsell a, .basic-upsell span { color: var(--x-upsell, #E0413E); text-decoration: underline; }
.locked-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.btn.btn-locked { background: #E6E6EA; color: #6B6B7B; border: 2px dashed #A9A9B5; box-shadow: none; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btn.btn-locked small { font-size: .72rem; font-weight: 600; color: #8A8A98; }
.nav-new { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: var(--x-coral, #FF5E5B); color: var(--x-deep, #1E1033); font-size: .7rem; font-weight: 800; letter-spacing: .03em; vertical-align: middle; border: 1px solid var(--x-deep, #1E1033); }
.basic-phone { margin: .15rem 0 .35rem; font-size: .9rem; color: #555; }
.basic-phone a { color: #444; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.basic-phone-profile { font-size: 1rem; margin-top: .4rem; }
.audit-perk { font-weight: 700; margin: .2rem 0 .6rem; }
.audit-perk span { color: var(--grape); margin-right: .25rem; }
.audit-included { border: 2px solid var(--grape); background: var(--x-purple-tint, #F1EAFD); margin: 1.2rem 0; }
.audit-included h2 { margin-top: 0; }
.founding-card fieldset { margin: 0 0 1.2rem; }
.founding-parent { border-left: 4px solid var(--grape); padding-left: .9rem; margin-top: .6rem; }
.founding-parent[hidden] { display: none; }
/* ===== Photo Finder (home hero) ===== */
.snap { margin: 1.2rem 0; color: var(--x-deep, #1E1033); scroll-margin-top: calc(var(--wsf-hdr, 90px) + 12px); }
.snap-card { position: relative; overflow: hidden; padding: 1.3rem 1.25rem 1.1rem; border-radius: 24px; color: #fff; border: 2px solid var(--x-deep, #1E1033);
  background: radial-gradient(120% 90% at 100% 0%, var(--x-glow1, rgba(255, 94, 91, .55)), transparent 55%), radial-gradient(90% 80% at 0% 100%, var(--x-glow2, rgba(140, 82, 255, .55)), transparent 60%), linear-gradient(135deg, var(--x-deep2, #2A1150), var(--x-deep, #1E1033) 70%);
  box-shadow: 0 10px 30px var(--x-shadow, rgba(30, 16, 51, .35)); }
.snap-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 60%); mask-image: linear-gradient(160deg, #000, transparent 60%); }
.snap-card > * { position: relative; z-index: 1; }
.snap-kicker { margin: 0 0 .25rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--x-snap-kicker, #FFD9D8); }
.snap-card h2 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.45rem, 4.6vw, 2rem); line-height: 1.1; }
.snap-sub { margin: 0 0 .9rem; color: var(--x-snap-sub, #EDE4FF); }
.snap-note { margin: .7rem 0 0; font-size: .82rem; color: var(--x-snap-note, #D9CCF5); }
.snap-new { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--x-pop, #FFE45E); color: var(--x-deep, #1E1033); font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: none; border: 1px solid var(--x-deep, #1E1033); vertical-align: middle; }
.snap-kicker .snap-new { margin-right: .35rem; }
.snap-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.snap-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .7rem 1.25rem; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: 1.08rem; color: #fff; text-decoration: none; border: 2px solid var(--x-deep, #1E1033);
  background: linear-gradient(100deg, var(--coral, #FF5E5B) 0%, var(--x-grad-mid, #E2459A) 45%, var(--grape, #6D2BD9) 100%);
  box-shadow: 0 6px 18px rgba(226, 69, 154, .45), 0 0 0 0 rgba(255, 94, 91, .5); animation: snap-glow 2.8s ease-in-out infinite; }
.snap-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: snap-shimmer 3.6s ease-in-out infinite; }
.snap-cta:hover { filter: brightness(1.06); }
.snap-cta:active { transform: translateY(1px); }
.snap-cta:focus-visible, .snap-alt:focus-visible { outline: 3px solid var(--x-pop, #FFE45E); outline-offset: 3px; }
.snap-cta .snap-cam { flex: none; }
.snap-alt { display: inline-flex; align-items: center; min-height: 48px; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
.snap-alt:hover { background: rgba(255,255,255,.16); }
.finder .snap-quick { width: 100%; }
@keyframes snap-shimmer { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes snap-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(226, 69, 154, .40), 0 0 0 0 rgba(255, 94, 91, .45); } 50% { box-shadow: 0 8px 26px rgba(109, 43, 217, .55), 0 0 0 6px rgba(255, 94, 91, 0); } }
/* armed: arrived from the menu on another page; the picker needs one tap (iOS and most browsers require it) */
.snap.snap-arm .snap-card { animation: snap-pulse 1.4s ease-out 3; }
.snap.snap-arm .snap-cta[data-snap-main] { width: 100%; min-height: 64px; font-size: 1.22rem; }
@keyframes snap-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 94, 91, .75), 0 10px 30px rgba(30,16,51,.35); } 100% { box-shadow: 0 0 0 18px rgba(255, 94, 91, 0), 0 10px 30px rgba(30,16,51,.35); } }
/* results */
.snap-results { scroll-margin-top: calc(var(--wsf-hdr, 90px) + 8px); }
.snap-results:not(:empty) { margin-top: .9rem; padding: 1rem 1.1rem 1.1rem; border-radius: 20px; background: var(--x-snap-tint, #F6F1FF); border: 2px solid var(--x-deep, #1E1033); }
.snap-results h3 { color: var(--x-deep, #1E1033); margin: .9rem 0 .45rem; }
.snap-results > p, .snap-results .note, .snap-msg { color: var(--x-deep, #1E1033); }
.snap-results > p a, .snap-also a, .snap-cat > p a:not(.btn), .snap-msg a { color: var(--x-link2, #5B21B6); }
.snap-summary { font-weight: 700; margin: 0 0 .25rem; }
.snap-look { display: flex; gap: .9rem; align-items: center; }
.snap-look p { margin: 0; color: var(--x-deep, #1E1033); }
/* scanning */
.snap-scan { display: flex; gap: 1rem; align-items: center; }
.snap-frame { position: relative; flex: none; width: 132px; height: 132px; border-radius: 16px; overflow: hidden; background: var(--x-deep, #1E1033); box-shadow: 0 0 0 2px var(--x-deep, #1E1033), 0 0 24px var(--x-glow3, rgba(109, 43, 217, .45)); }
.snap-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); }
.snap-frame .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(140, 255, 230, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 255, 230, .22) 1px, transparent 1px); background-size: 16px 16px; mix-blend-mode: screen; }
.snap-frame .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(109, 43, 217, .15), rgba(255, 94, 91, .15)); }
.snap-frame .line { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(120, 255, 220, .15) 60%, rgba(160, 255, 235, .95) 98%, transparent); animation: snap-sweep 1.6s cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.snap-frame .br { position: absolute; width: 20px; height: 20px; border: 3px solid var(--x-scan, #8CFFE6); }
.snap-frame .br.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.snap-frame .br.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.snap-frame .br.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.snap-frame .br.brr { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.snap-frame .dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--x-pop, #FFE45E); box-shadow: 0 0 10px var(--x-pop, #FFE45E); animation: snap-blip 1.8s ease-in-out infinite; }
.snap-scan-copy { flex: 1; min-width: 0; }
.snap-status { font-weight: 800; color: var(--x-deep, #1E1033); margin: 0 0 .5rem; min-height: 1.4em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.snap-status::after { content: "_"; animation: snap-caret 1s steps(1) infinite; }
.snap-bar { height: 8px; border-radius: 999px; background: var(--x-snap-bar, #E3D8FA); overflow: hidden; border: 1px solid var(--x-deep, #1E1033); }
.snap-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--coral, #FF5E5B), var(--grape, #6D2BD9)); transition: width .45s ease; }
.snap-pct { margin: .35rem 0 0; font-size: .8rem; color: var(--x-snap-muted, #4A3A66); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@keyframes snap-sweep { from { transform: translateY(-30%); } to { transform: translateY(300%); } }
@keyframes snap-blip { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes snap-caret { 50% { opacity: 0; } }
/* filter row */
.snap-filters { position: sticky; top: var(--wsf-hdr, 0px); z-index: 5; display: flex; gap: .45rem; align-items: center;
  margin: .9rem -1.1rem .2rem; padding: .5rem 1.1rem; background: rgba(246, 241, 255, .96); border-top: 1px solid var(--x-snap-line, #DDD0F7); border-bottom: 1px solid var(--x-snap-line, #DDD0F7); }
.snap-chiprow { flex: 1; min-width: 0; display: flex; gap: .45rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; }
.snap-chiprow::-webkit-scrollbar { display: none; }
.snap-chip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 2px solid var(--x-deep, #1E1033); background: #fff; color: var(--x-deep, #1E1033); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.snap-chip[aria-pressed="true"] { background: var(--x-deep, #1E1033); color: #fff; }
.snap-chip:focus-visible, .snap-town:focus-visible { outline: 3px solid var(--coral, #FF5E5B); outline-offset: 2px; }
.snap-sep { flex: none; width: 1px; align-self: stretch; background: var(--x-snap-sep, #CDBDF0); margin: 0 .15rem; }
.snap-town { flex: none; min-height: 36px; padding: .2rem 1.8rem .2rem .7rem; border-radius: 999px; border: 2px solid var(--x-deep, #1E1033); background: #fff; color: var(--x-deep, #1E1033); font: inherit; font-weight: 700; font-size: .9rem; max-width: 9.5rem; }
.snap-also { font-size: .88rem; color: var(--x-snap-muted, #4A3A66); margin: .4rem 0 0; }
.snap-cat .listing-grid { margin-bottom: .6rem; }
@media (prefers-reduced-motion: reduce) {
  .snap-cta, .snap-cta::before, .snap.snap-arm .snap-card, .snap-frame .line, .snap-frame .dot, .snap-status::after { animation: none !important; }
  .snap-cta::before { display: none; }
  .snap-frame .line { top: 45%; transform: none; }
  .snap-bar i { transition: none; }
}
.finder-btns > .btn, .finder-btns > .snap-cta { flex: 1 1 100%; justify-content: center; }
.or-divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: #fff; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.or-divider span { padding: .25rem .9rem; border-radius: 999px; background: #fff; color: var(--x-deep, #1E1033); border: 2px solid var(--x-deep, #1E1033); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.hero .snap + .or-divider { margin-top: 1rem; }
@media (min-width: 52rem) { .finder > .btn[type="submit"] { grid-column: 1 / -1; width: 100%; } }
.hero .hero-short { font-size: 1.05rem; font-weight: 600; margin: .2rem 0 .4rem; max-width: 40rem; }
.hero .why-local { margin: 1rem 0 0; max-width: 46rem; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.hero .why-local strong { color: #fff; }