/* MoveInMetro
   Layout concept: a neighborhood guidebook. One calm reading column, wide bands for
   groups, homes as index cards with a plan drawing until real photos arrive.
   Palette: plaster walls, Detroit brick, Pewabic glaze. */
:root {
  --paper: #eef0eb;      /* plaster */
  --surface: #fbfcfa;    /* card */
  --ink: #1d2a28;        /* text */
  --muted: #56645f;      /* secondary text */
  --line: #cfd6cf;       /* rules, borders */
  --brick: #a3402a;      /* primary action */
  --brick-ink: #ffffff;
  --glaze: #2e6766;      /* links, accents */
  --glaze-soft: #dbe8e5;
  --warn: #8a5a12;
  --warn-soft: #f4ead6;
  --tint-1: #dfe6dc; --tint-2: #e7dfd6; --tint-3: #dde3e8; --tint-4: #e6e2d4; --tint-5: #d6e4e3;
  --plan: #1d2a28;

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 4vw, 2.5rem);
  --step-4: clamp(2.3rem, 5.5vw, 3.6rem);

  --radius: 6px;
  --wrap: 72rem;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131a19; --surface: #1a2321; --ink: #e6ebe7; --muted: #9eaba6; --line: #2e3a37;
    --brick: #d9714f; --brick-ink: #1a0d08; --glaze: #7cc0b9; --glaze-soft: #1f3331;
    --warn: #e2b267; --warn-soft: #2e2617;
    --tint-1: #1f2a24; --tint-2: #2a2420; --tint-3: #1e252b; --tint-4: #29271d; --tint-5: #1c2b2a;
    --plan: #cfd8d3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131a19; --surface: #1a2321; --ink: #e6ebe7; --muted: #9eaba6; --line: #2e3a37;
  --brick: #d9714f; --brick-ink: #1a0d08; --glaze: #7cc0b9; --glaze-soft: #1f3331;
  --warn: #e2b267; --warn-soft: #2e2617;
  --tint-1: #1f2a24; --tint-2: #2a2420; --tint-3: #1e252b; --tint-4: #29271d; --tint-5: #1c2b2a;
  --plan: #cfd8d3;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--glaze); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--glaze); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: 40rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.92em; }
.eyebrow { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Demo banner */
.demo-bar { background: var(--warn-soft); color: var(--warn); font-size: var(--step--1); }
.demo-bar .wrap { padding-block: 0.45rem; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
.wordmark { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--brick); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--glaze); text-decoration: underline; }
.nav-menu summary { display: none; }
@media (max-width: 860px) {
  .nav-menu summary {
    display: inline-flex; list-style: none; cursor: pointer; padding: 0.4rem 0.8rem;
    border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; font-size: 0.95rem;
  }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu:not([open]) .nav-links { display: none; }
  .nav-menu[open] .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-menu[open] .nav-links a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .nav-menu[open] .nav-links li:last-child a { border-bottom: 0; margin-top: 0.6rem; text-align: center; }
}

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 1rem/1 var(--font-body); padding: 0.85rem 1.3rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--brick); color: var(--brick-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink); }
.nav-links .btn-primary { color: var(--brick-ink); padding: 0.6rem 1rem; }
.nav-links .btn-primary:hover { color: var(--brick-ink); text-decoration: none; }

.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.75rem; width: 100%;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--glaze); outline: 2px solid var(--glaze-soft); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.95rem; cursor: pointer;
}
.check input { width: auto; accent-color: var(--brick); margin: 0; }
.check:has(input:checked) { border-color: var(--glaze); background: var(--glaze-soft); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Sections */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band + .band { border-top: 1px solid var(--line); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.band-head .prose { display: flex; flex-direction: column; gap: 0.6rem; }

/* Home hero */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero-copy { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 0.5rem; }
.hero-copy .lede { font-size: var(--step-1); color: var(--muted); max-width: 32rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.97rem; }
.hero-facts li { display: flex; gap: 0.5rem; align-items: baseline; }
.hero-facts li::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--brick); border-radius: 1px; transform: translateY(-0.1em); flex: none; }

.intake-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(20, 30, 28, 0.35);
}
.intake-card h2 { font-size: var(--step-2); }
.intake-card .btn { width: 100%; }
.intake-note { font-size: var(--step--1); color: var(--muted); }

/* Situation index */
.situations { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.situation { background: var(--surface); padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.situation:hover { background: var(--glaze-soft); }
.situation h3 { font-size: 1.2rem; }
.situation p { color: var(--muted); font-size: 0.97rem; }
.situation .more { margin-top: auto; color: var(--glaze); font-weight: 600; font-size: 0.95rem; }

/* Steps: a real sequence, so numbers carry meaning */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 0.4rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); font-family: var(--font-data); font-size: var(--step--1); color: var(--brick); font-weight: 600; }
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--muted); font-size: 0.97rem; }

/* Home cards */
.homes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.home-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.home-card .body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.home-card h3 a { color: var(--ink); text-decoration: none; }
.home-card h3 a:hover { color: var(--glaze); text-decoration: underline; }
.home-card .summary { color: var(--muted); font-size: 0.97rem; }
.home-card .foot { margin-top: auto; padding-top: 0.75rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--line); }
.price { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }
.price small { font-weight: 400; color: var(--muted); font-family: var(--font-body); }
.specs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: var(--step--1); color: var(--muted); margin: 0; padding: 0; list-style: none; }

.plan { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; position: relative; }
.plan svg { width: 62%; height: auto; overflow: visible; }
.plan .plan-label { position: absolute; left: 0.8rem; bottom: 0.6rem; font-family: var(--font-data); font-size: 0.75rem; color: var(--muted); }
.tint-egb { background: var(--tint-1); } .tint-ncm { background: var(--tint-3); } .tint-warren { background: var(--tint-2); }
.tint-roseville { background: var(--tint-4); } .tint-harsens { background: var(--tint-5); }
.plan svg .wall { fill: none; stroke: var(--plan); stroke-width: 2.5; }
.plan svg .inner { fill: none; stroke: var(--plan); stroke-width: 1.25; opacity: 0.7; }
.plan svg .door { fill: none; stroke: var(--plan); stroke-width: 1; opacity: 0.6; }
.plan svg text { fill: var(--plan); font-family: var(--font-data); font-size: 7px; opacity: 0.75; }

/* Neighborhood list */
.hoods { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.hood { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 0 0; border-top: 1px solid var(--ink); }
.hood h3 a { color: var(--ink); text-decoration: none; }
.hood h3 a:hover { color: var(--glaze); text-decoration: underline; }
.drive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; }
.drive-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding-block: 0.2rem; }
.drive-list .data { color: var(--ink); white-space: nowrap; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.drive { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 34rem; }
table.drive th, table.drive td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
table.drive td.num, table.drive th.num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
table.drive tbody tr:last-child td { border-bottom: 0; }
table.drive th { font-weight: 600; font-size: var(--step--1); color: var(--muted); }

/* Coordinator band */
.coord { background: var(--ink); color: var(--paper); }
.coord .wrap { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .coord .wrap { grid-template-columns: 1fr; } }
.coord p { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.coord ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.coord .btn-primary { justify-self: start; }

/* Page header (inner pages) */
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-head .wrap { display: flex; flex-direction: column; gap: 1rem; }
.page-head .lede { font-size: var(--step-1); color: var(--muted); max-width: 40rem; }
.crumbs { font-size: var(--step--1); color: var(--muted); }
.crumbs a { color: var(--muted); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.cares { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cares > div { display: flex; flex-direction: column; gap: 0.4rem; }
.cares h3 { font-size: 1.15rem; }
.cares p { color: var(--muted); }

.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.aside-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: 0.97rem; }
.aside-card dt { color: var(--muted); }
.aside-card dd { margin: 0; }

.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.faq details p { margin-top: 0.6rem; color: var(--muted); max-width: 40rem; }

/* Home detail */
.gallery { display: grid; gap: 0.75rem; grid-template-columns: 2fr 1fr; }
.gallery .plan:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 16rem; }
.gallery .plan { border-radius: 10px; aspect-ratio: 4 / 3; }
.gallery .placeholder { font-family: var(--font-data); font-size: 0.8rem; color: var(--muted); }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } .gallery .plan:not(:first-child) { display: none; } }
.detail-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.facts div { background: var(--surface); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.facts dt { font-size: var(--step--1); color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

/* Match page */
.match-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .match-layout { grid-template-columns: 1fr; } }
.match-form { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 961px) { .match-form { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5rem); } }
.match-form details summary { cursor: pointer; font-weight: 600; color: var(--glaze); }
.match-form details[open] summary { margin-bottom: 1rem; }
.match-form .refine { display: flex; flex-direction: column; gap: 1rem; }
.results { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; }
.result { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
@media (max-width: 640px) { .result { grid-template-columns: 1fr; } }
.result .plan { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 640px) { .result .plan { aspect-ratio: 16 / 9; min-height: 0; } }
.result .body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.result-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; }
.why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; }
.why li { display: flex; gap: 0.5rem; }
.why li::before { content: "+"; color: var(--glaze); font-weight: 700; font-family: var(--font-data); }
.why li.trade::before { content: "!"; color: var(--warn); }
.why li.fail::before { content: "×"; color: var(--brick); }
.cost { border-top: 1px solid var(--line); padding-top: 0.8rem; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; font-size: 0.95rem; }
.cost dt { color: var(--muted); }
.cost dd { margin: 0; text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.cost .total dt, .cost .total dd { color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); padding-top: 0.35rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { display: inline-block; font-size: var(--step--1); padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--glaze-soft); color: var(--glaze); font-weight: 600; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.callout { background: var(--glaze-soft); border-radius: 10px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.callout.warn { background: var(--warn-soft); }

.request { background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 6rem; }
.request .chosen { font-weight: 600; }
.confirm { display: flex; flex-direction: column; gap: 0.5rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem; font-size: 0.95rem; }
.site-footer .wrap { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.site-footer h2 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer a { color: var(--ink); }
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.copy-btn { font: 600 0.8rem var(--font-body); padding: 0.2rem 0.55rem; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .result, .request { animation: rise 220ms ease-out both; }
  @keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
}

/* ===== v2: request-first site ===== */
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 0.5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }
.h-sub { font-size: var(--step-2); }
.on-dark { color: inherit; opacity: 0.75; }
.narrow .wrap, .narrow-wrap { max-width: 40rem; }

/* Lead form */
.lead-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.1rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(20, 30, 28, 0.35);
  scroll-margin-top: 5rem;
}
.lead-form .step { display: flex; flex-direction: column; gap: 1.05rem; }
.lead-form .step[hidden] { display: none; }
.lead-form h2 { font-size: var(--step-2); }
.lead-form h2:focus { outline: none; }
.lead-form > .step > .btn-primary { width: 100%; }
.form-steps { display: flex; gap: 1rem; font-size: var(--step--1); color: var(--muted); font-weight: 600; }
.form-steps span { padding-bottom: 0.25rem; border-bottom: 2px solid transparent; }
.form-steps span.on { color: var(--ink); border-bottom-color: var(--brick); }
.step-actions { display: flex; gap: 0.6rem; }
.step-actions .btn-primary { flex: 1; }
.form-error { color: var(--brick); font-weight: 600; font-size: 0.95rem; }
.form-error a { color: inherit; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; color: var(--muted); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--brick); flex: none; }
.consent[hidden], .field[hidden], [data-when][hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .done { gap: 0.6rem; }
.lead-form .done:focus { outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.45rem 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.95rem; line-height: 1.25;
}
.chip input:checked + span { border-color: var(--glaze); background: var(--glaze-soft); color: var(--ink); font-weight: 600; }
.chip input:checked + span::before { content: "✓"; margin-right: 0.4rem; color: var(--glaze); }
.chip input:focus-visible + span { outline: 3px solid var(--glaze); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }

/* Areas */
.areas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.areas.one { grid-template-columns: 1fr; }
.area-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.area-card h3 { font-size: 1.35rem; }
.area-card h3 a { color: var(--ink); text-decoration: none; }
.area-card h3 a:hover { color: var(--glaze); text-decoration: underline; }
.area-top { display: flex; flex-direction: column; gap: 0.2rem; }
.area-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 0.4rem; font-size: 0.95rem; }
.area-card.sister { background: var(--glaze-soft); border-color: transparent; }
.home-card img, .photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* Owners band */
.owner-actions { display: grid; gap: 0.75rem; }
.owner-link {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.2rem; border-radius: 8px; text-decoration: none;
  background: color-mix(in srgb, var(--paper) 10%, var(--ink)); color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 25%, var(--ink));
}
.owner-link strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.owner-link span { opacity: 0.8; }
.owner-link:hover { border-color: var(--paper); }
.coord .owner-link:focus-visible { outline-color: var(--paper); }

/* Footer legal */
.site-footer .legal { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }
.eho { display: flex; gap: 0.6rem; align-items: flex-start; }
.eho svg { flex: none; color: var(--ink); }

/* Quick-action bar (phones) */
.action-bar { display: none; }
@media (max-width: 760px) {
  .action-bar {
    display: flex; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line);
    transition: transform 180ms ease;
  }
  .action-bar .btn { flex: 1; padding-block: 0.8rem; }
  .action-bar .btn-quiet { background: var(--surface); }
  .action-bar.tucked { transform: translateY(110%); }
  body { padding-bottom: 4.5rem; }

  /* Get the form onto the first screen */
  .hero { padding-block: 1.25rem 2rem; }
  .hero .wrap { gap: 1.25rem; }
  .hero-copy { gap: 0.6rem; padding-top: 0; }
  .hero h1 { font-size: 1.75rem; }
  .hero-copy .lede { font-size: 1rem; }
  .hero-facts { display: none; }
}
@media (prefers-reduced-motion: reduce) { .action-bar { transition: none; } }

/* ===== v2.1 ===== */
.site-header .wrap { gap: 1rem; }
.header-text { margin-left: auto; color: var(--ink); text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.header-text:hover { color: var(--glaze); text-decoration: underline; }
@media (max-width: 760px) { .header-text { display: none; } }

.field-error { color: var(--brick); font-weight: 600; font-size: 0.9rem; margin-top: 0.15rem; }
.field-error[hidden] { display: none; }
[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) { border-color: var(--brick); }
.field:has(.field-error:not([hidden])) .chip span { border-color: color-mix(in srgb, var(--brick) 55%, var(--line)); }
.form-steps { gap: 1.25rem; }

/* Fit step 1 on a laptop screen */
@media (min-width: 861px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hero { padding-block: 2rem 3rem; }
  .lead-form .step { gap: 0.8rem; }
  .lead-form .field { gap: 0.3rem; }
  .chip span { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: 0.92rem; }
}

/* Trust */
.trust { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; } }
.trust-facts { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.trust-facts div { background: var(--surface); padding: 0.85rem 1.1rem; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
@media (max-width: 480px) { .trust-facts div { grid-template-columns: 1fr; gap: 0.15rem; } }
.trust-facts dt { color: var(--muted); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 0.15rem; }
.trust-facts dd { margin: 0; }

/* Owners: a quiet band, not a competing section */
.owner-band { border-top: 1px solid var(--line); background: var(--surface); }
.owner-band .wrap { padding-block: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.owner-band p { max-width: 44rem; }
.owner-links { display: flex; gap: 1.25rem; font-weight: 600; }
@media (min-width: 861px) {
  .hero { padding-block: 1.25rem 3rem; }
  .lead-form { padding: 1.15rem 1.35rem; gap: 0.75rem; }
  .lead-form .step { gap: 0.7rem; }
  .lead-form h2 { font-size: 1.4rem; }
  .chips { gap: 0.4rem; }
  .chip span { min-height: 2.1rem; padding: 0.3rem 0.75rem; }
}

/* Nav: links inline on desktop, menu button on phones */
.nav-toggle { display: none; font: 600 0.95rem var(--font-body); padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu .nav-links { display: none; }
  .nav-menu.open .nav-links {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-menu.open .nav-links a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .nav-menu.open .nav-links li:last-child a { border-bottom: 0; margin-top: 0.6rem; text-align: center; }
}
@media (min-width: 861px) { .header-text { margin-left: auto; } .nav-menu { margin-left: 1.5rem; } }

/* ---- Search steps (Where / When / Who), modeled on the Airbnb app flow ---- */
.search-step { gap: 0.75rem; }
.search-top h2 { font-size: var(--step-1); }
.search-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.link-btn { white-space: nowrap; flex: none; background: none; border: 0; padding: 0.25rem 0; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); overflow: hidden; }
.s-card.open { box-shadow: 0 6px 24px rgb(0 0 0 / 0.1); border-color: transparent; }
.s-head { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem; cursor: pointer; }
.s-head:focus-visible { outline: 3px solid var(--glaze); outline-offset: -3px; }
.s-card.open .s-head { display: none; }
.s-label { color: var(--muted); font-weight: 500; }
.s-value { font-weight: 600; text-align: right; color: var(--ink); }
.s-value:not(.set) { font-weight: 600; }
.s-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.s-body[hidden] { display: none; }
.s-body h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.s-sub { font-size: 0.9rem; color: var(--muted); margin: 0; }
.btn-dark { background: var(--ink); color: var(--paper); align-self: stretch; }
.btn-dark:hover { filter: brightness(1.2); }

.dest-box { display: flex; align-items: center; gap: 0.6rem; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 0.9rem; background: var(--surface); color: var(--muted); }
.dest-box:focus-within { border-color: var(--ink); }
.dest-search { flex: 1; border: 0; background: transparent; padding: 0.85rem 0; font: inherit; color: var(--ink); min-width: 0; outline: none; -webkit-appearance: none; appearance: none; }
.dest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dest-item[hidden] { display: none; }
.dest-item label { display: block; cursor: pointer; position: relative; }
.dest-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dest-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem; border-radius: 12px; }
.dest-item:hover .dest-row { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.dest-item input:focus-visible + .dest-row { outline: 3px solid var(--glaze); outline-offset: 1px; }
.dest-item input:checked + .dest-row { background: var(--glaze-soft); }
.dest-icon { width: 3.4rem; height: 3.4rem; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--glaze); background: var(--tint-3); }
.dest-icon.i2 { background: var(--tint-2); color: var(--brick); }
.dest-icon.i3 { background: var(--tint-1); color: var(--glaze); }
.dest-icon.i4 { background: var(--tint-4); color: var(--warn); }
.dest-text { display: flex; flex-direction: column; min-width: 0; }
.dest-text b { font-weight: 600; }
.dest-text i { font-style: normal; color: var(--muted); font-size: 0.93rem; }
.dest-check { margin-left: auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; }
.dest-item input:checked + .dest-row .dest-check { background: var(--glaze); border-color: var(--glaze); }
.dest-item input:checked + .dest-row .dest-check::after { content: "✓"; color: var(--surface); font-size: 0.85rem; font-weight: 700; line-height: 1; }

.seg { display: flex; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 999px; padding: 0.3rem; gap: 0.2rem; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 0.7rem 1rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.cal { max-height: 21rem; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); }
.cal-month h4 { font-size: 1.05rem; font-weight: 600; margin: 1.1rem 0 0.4rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-day { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); height: 2.9rem; cursor: pointer; border-radius: 0; position: relative; }
.cal-day:hover:not(:disabled):not(.edge) { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 50%; }
.cal-day:disabled { color: var(--muted); opacity: 0.55; text-decoration: line-through; cursor: default; }
.cal-day.mid { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.cal-day.edge { background: var(--ink); color: var(--paper); border-radius: 50%; }
.cal-day:focus-visible { outline: 3px solid var(--glaze); outline-offset: -3px; z-index: 1; }
.cal-note { margin: 0; font-size: 0.93rem; color: var(--muted); min-height: 1.3em; }
.cal-note.warn { color: var(--brick); font-weight: 600; }
.flex-days { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; }
.flex-days .chip span { white-space: nowrap; }
.month-cards { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.15rem 0.15rem 0.5rem; scroll-snap-type: x proximity; }
.month-card { position: relative; flex: none; scroll-snap-align: start; cursor: pointer; }
.month-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.month-card span { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 8.2rem; padding: 1.1rem 0.5rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); }
.month-card b { font-weight: 600; }
.month-card i { font-style: normal; color: var(--muted); font-size: 0.9rem; }
.month-card input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--glaze-soft); }
.month-card input:focus-visible + span { outline: 3px solid var(--glaze); outline-offset: 2px; }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.stepper:last-of-type { border-bottom: 0; }
.stepper > span:first-child { display: flex; flex-direction: column; }
.stepper b { font-weight: 500; font-size: var(--step-1); }
.stepper i { font-style: normal; color: var(--muted); font-size: 0.93rem; }
.stepper-ctl { display: flex; align-items: center; gap: 0.9rem; }
.stepper-ctl output { min-width: 1.5rem; text-align: center; font-weight: 600; font-size: var(--step-1); }
.stepper-ctl button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.stepper-ctl button:hover:not(:disabled) { border-color: var(--ink); }
.stepper-ctl button:disabled { opacity: 0.35; cursor: default; }
.stepper-ctl button:focus-visible { outline: 3px solid var(--glaze); outline-offset: 2px; }
.search-step > .btn-primary { margin-top: 0.4rem; }

/* ---- Wide screens: Airbnb-style single search bar (forms with data-bar) ---- */
.s-bar { display: contents; }
.s-go-wide, .s-go-ico, .cal-nav { display: none; }
.sample-note { margin-top: 1rem; }
.homes-band { padding-block: clamp(2.5rem, 5vw, 4rem); }
.home-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
.home-card { display: flex; flex-direction: column; gap: 0.7rem; }
.home-card img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 14px; background: var(--tint-1); }
.home-card div { display: flex; flex-direction: column; gap: 0.1rem; }
.home-card b { font-weight: 600; }
.home-card span { color: var(--ink); }
.home-card i { font-style: normal; color: var(--muted); font-size: 0.93rem; }

@media (min-width: 900px) {
  .hero.hero-bar .wrap { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
  .hero.hero-bar .hero-copy { align-items: center; text-align: center; max-width: 46rem; padding-top: 0; }
  .hero.hero-bar h1 { font-size: var(--step-3); }
  .hero.hero-bar .hero-facts { justify-content: center; }
  .hero.hero-bar .lead-form { width: 100%; max-width: 62rem; }

  .lead-form.bar { background: transparent; border: 0; box-shadow: none; padding: 0; position: relative; }
  .lead-form.bar .form-steps { display: none; }
  .lead-form.bar .search-top { display: none; }
  .lead-form.bar .search-step { position: relative; }
  .lead-form.bar .s-bar {
    display: grid; grid-template-columns: 1fr 1.1fr 1fr auto; align-items: stretch;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 4px 22px rgb(0 0 0 / 0.1); padding: 0.4rem; gap: 0; position: relative;
  }
  .lead-form.bar .s-card { background: transparent; border: 0; box-shadow: none; border-radius: 999px; overflow: visible; position: static; }
  .lead-form.bar .s-card + .s-card .s-head { position: relative; }
  .lead-form.bar .s-card + .s-card .s-head::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  .lead-form.bar .s-card.open { background: var(--surface); box-shadow: 0 4px 18px rgb(0 0 0 / 0.16); }
  .lead-form.bar .s-card.open .s-head::before, .lead-form.bar .s-card.open + .s-card .s-head::before { display: none; }
  .lead-form.bar .s-card:hover:not(.open) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .lead-form.bar .s-card.open .s-head { display: flex; }
  .lead-form.bar .s-head { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.7rem 1.4rem; border-radius: 999px; }
  .lead-form.bar .s-label { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
  .lead-form.bar .s-value { text-align: left; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .lead-form.bar .s-value.set { color: var(--ink); font-weight: 500; }

  .lead-form.bar .s-go { align-self: center; margin-left: 0.4rem; border-radius: 999px; padding: 0.95rem 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem; width: auto; }
  .lead-form.bar .s-go-wide, .lead-form.bar .s-go-ico { display: inline; }
  .lead-form.bar .s-go-narrow { display: none; }
  .lead-form.bar .search-step > .btn-primary { width: auto; }

  .lead-form.bar .s-body {
    position: absolute; top: calc(100% + 0.6rem); z-index: 30; background: var(--surface);
    border-radius: 28px; box-shadow: 0 12px 48px rgb(0 0 0 / 0.22); padding: 1.5rem; max-height: 34rem; overflow: auto;
  }
  .lead-form.bar [data-card="where"] .s-body { left: 0; width: min(26rem, 100%); }
  .lead-form.bar [data-card="when"] .s-body { left: 50%; transform: translateX(-50%); width: min(46rem, 100%); }
  .lead-form.bar [data-card="who"] .s-body { right: 0; width: min(24rem, 100%); }
  .lead-form.bar .s-body > h3 { display: none; }
  .lead-form.bar .s-body > .btn-dark { display: none; }

  .lead-form.bar .seg { align-self: center; width: 16rem; }
  .lead-form.bar .cal-dow { display: none; }
  .lead-form.bar .cal-nav { display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; top: -0.15rem; pointer-events: none; z-index: 2; }
  .lead-form.bar .cal-nav button { pointer-events: auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ink); }
  .lead-form.bar .cal-nav button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .lead-form.bar [data-panel="dates"] { position: relative; }
  .lead-form.bar .cal {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 1rem); column-gap: 2rem;
    overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x mandatory; scrollbar-width: none; border-bottom: 0;
  }
  .lead-form.bar .cal::-webkit-scrollbar { display: none; }
  .lead-form.bar .cal-month { scroll-snap-align: start; }
  .lead-form.bar .cal-month h4 { text-align: center; margin-top: 0.2rem; }
  .lead-form.bar .cal-day { height: 2.6rem; }

  /* the contact step opens as its own panel under the bar */
  .lead-form.bar [data-step="2"] {
    margin: 1rem auto 0; max-width: 40rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 1.5rem; box-shadow: 0 8px 30px rgb(0 0 0 / 0.1);
  }
  .lead-form.bar .form-error { max-width: 100%; }
  .lead-form.bar [data-done] { background: var(--surface); border-radius: 20px; padding: 1.5rem; margin: 1rem auto 0; max-width: 40rem; }
}
.beta-ver { font-family: var(--font-data); font-size: 0.85em; background: color-mix(in srgb, currentColor 14%, transparent); padding: 0.05em 0.45em; border-radius: 4px; margin-right: 0.15em; white-space: nowrap; }

/* ---- v0.4 ---- */
.demo-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.demo-bar[hidden] { display: none; }
.demo-x { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 4px; }
.demo-x:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (max-width: 600px) { .demo-bar { font-size: 0.8rem; } .demo-bar .data { font-size: 0.8rem; } }
.reassure { margin: 0; }
.hero-facts-below { justify-content: center; margin-top: 1.25rem; }
.crit-summary { margin: -0.3rem 0 0.2rem; padding: 0.55rem 0.8rem; background: var(--glaze-soft); border-radius: 10px; font-size: 0.93rem; font-weight: 600; }
.dest-icon.i5 { background: var(--tint-5); color: var(--glaze); }
.dest-empty { background: var(--warn-soft); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.dest-empty[hidden], .dest-other[hidden] { display: none; }
.dest-empty p { margin: 0; }
.dest-other { display: flex; flex-direction: column; gap: 0.35rem; }
.dest-other label { font-weight: 600; font-size: 0.95rem; }
.dest-other input { border: 1.5px solid var(--line); border-radius: 10px; padding: 0.75rem 0.9rem; font: inherit; background: var(--surface); color: var(--ink); }
.sample-top { margin: 0.2rem 0 0; color: var(--ink); background: var(--warn-soft); border-radius: 8px; padding: 0.5rem 0.75rem; max-width: 40rem; }
.home-row { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .home-row { grid-template-columns: repeat(4, 1fr); } }
.team { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.team-photo { margin: 0; }
.team-photo img { width: 100%; height: auto; border-radius: 18px; display: block; background: var(--tint-1); }
.team-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.team-list li { display: flex; flex-direction: column; }
.team-list span { color: var(--muted); font-size: 0.95rem; }
.reviews { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.review .stars { margin: 0; color: var(--warn); letter-spacing: 0.12em; }
.review blockquote { margin: 0; font-size: 1.02rem; }
.review figcaption { color: var(--muted); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ph-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 600; background: var(--warn-soft); color: var(--warn); padding: 0.1rem 0.5rem; border-radius: 999px; }
.home-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.home-card img { border-radius: 0; }
.home-card div { padding: 0.2rem 1rem 1rem; }

/* ---- Marshall (AI assistant) ---- */
.mshl-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 0.8rem 1.15rem; font: 600 0.95rem var(--font-body); cursor: pointer; box-shadow: 0 6px 24px rgb(0 0 0 / 0.28); }
.mshl-fab:hover { filter: brightness(1.15); }
.mshl-fab:focus-visible { outline: 3px solid var(--glaze); outline-offset: 3px; }
.mshl-fab.is-open { display: none; }
.mshl-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; width: min(24rem, calc(100vw - 2rem)); height: min(34rem, calc(100vh - 2rem)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 56px rgb(0 0 0 / 0.3); display: flex; flex-direction: column; overflow: hidden; }
.mshl-panel[hidden] { display: none; }
.mshl-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; background: var(--ink); color: var(--paper); }
.mshl-title { display: flex; flex-direction: column; line-height: 1.25; }
.mshl-title span { font-size: 0.8rem; opacity: 0.8; }
.mshl-x { background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.5rem; border-radius: 6px; }
.mshl-x:hover { background: rgb(255 255 255 / 0.15); }
.mshl-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mshl-msg { max-width: 88%; display: flex; flex-direction: column; gap: 0.5rem; }
.mshl-msg p { margin: 0; padding: 0.6rem 0.8rem; border-radius: 14px; font-size: 0.95rem; }
.mshl-msg.bot p { background: var(--glaze-soft); border-bottom-left-radius: 4px; }
.mshl-msg.me { align-self: flex-end; }
.mshl-msg.me p { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.mshl-act { align-self: flex-start; display: inline-block; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0.4rem 0.8rem; font: 600 0.85rem var(--font-body); text-decoration: none; cursor: pointer; }
.mshl-act:hover { background: var(--ink); color: var(--paper); }
.mshl-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.7rem; }
.mshl-quick[hidden] { display: none; }
.mshl-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.7rem; font: 500 0.85rem var(--font-body); cursor: pointer; }
.mshl-chip:hover { border-color: var(--ink); }
.mshl-form { display: flex; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
.mshl-form input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.6rem 0.9rem; font: inherit; background: var(--surface); color: var(--ink); }
.mshl-form input:focus { outline: none; border-color: var(--ink); }
.mshl-send { border: 0; border-radius: 999px; background: var(--brick); color: var(--brick-ink); padding: 0.6rem 1rem; font: 600 0.9rem var(--font-body); cursor: pointer; }
.mshl-foot { margin: 0; padding: 0 1rem 0.7rem; font-size: 0.75rem; color: var(--muted); }
@media (max-width: 900px) {
  .mshl-fab { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
  .mshl-panel { right: 0; bottom: 0; left: 0; width: 100%; height: 88vh; border-radius: 18px 18px 0 0; }
}

/* ---- v0.6 header: logo | search | text us | menu ---- */
.no-scroll { overflow: hidden; }
.site-header { z-index: 40; }
.site-header .wrap.hdr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding-block: 0.6rem; }
.hs { min-width: 0; display: flex; justify-content: center; position: relative; }
.hs-form { background: transparent; border: 0; box-shadow: none; padding: 0; width: 100%; max-width: 44rem; position: relative; }
.hs-trigger, .hs-close { display: none; }
.header-text { margin-left: 0; font-weight: 600; }
.burger { width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.burger span { display: block; width: 1.05rem; height: 2px; background: var(--ink); border-radius: 2px; }
.burger:hover { border-color: var(--ink); }
.burger:focus-visible { outline: 3px solid var(--glaze); outline-offset: 2px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); z-index: 90; }
.drawer-backdrop[hidden], .nav-drawer[hidden] { display: none; }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 86vw); background: var(--surface); z-index: 95; box-shadow: -12px 0 40px rgb(0 0 0 / 0.25); padding: 1rem 1.25rem 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.drawer-x { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0.1rem 0.5rem; border-radius: 8px; }
.drawer-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-drawer li a:not(.btn) { display: block; padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.05rem; }
.nav-drawer li a:not(.btn):hover { color: var(--glaze); }
.nav-drawer li:last-child { margin-top: 1rem; }
.nav-drawer .btn { width: 100%; text-align: center; }
.btn-lg { padding: 0.95rem 1.6rem; font-size: 1.05rem; }
.hero-cta { margin: 0.5rem 0 0; }
.cta-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; max-width: 36rem; }
.cta-card p { margin: 0; color: var(--muted); }
.request-start { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-bottom: 2rem; }
.request-start p { margin: 0; font-size: var(--step-1); color: var(--muted); }

@media (min-width: 900px) {
  /* compact bar in the header; panels drop below it */
  .hs-form.bar .s-bar { box-shadow: 0 2px 10px rgb(0 0 0 / 0.1); padding: 0.25rem; grid-template-columns: 1fr 1.15fr 0.95fr auto; }
  .hs-form.bar .s-head { padding: 0.4rem 1.05rem; }
  .hs-form.bar .s-label { font-size: 0.68rem; }
  .hs-form.bar .s-value { font-size: 0.9rem; }
  .hs-form.bar .s-go { padding: 0.6rem 0.95rem; font-size: 0.9rem; margin-left: 0.2rem; }
  .hs-form.bar .s-go-wide { display: inline; }
  .hs-form.bar .s-body { top: calc(100% + 0.8rem); }
  .hs-form.bar [data-card="when"] .s-body { width: min(44rem, 94vw); }
  .hs-form.bar .reassure, .hs-form.bar .search-step > .small { display: none; }
  .hs-form.bar .form-error { display: none; }
  .hs-form.bar [data-step="2"], .hs-form.bar [data-done] {
    position: absolute; top: calc(100% + 0.8rem); left: 50%; transform: translateX(-50%);
    width: min(40rem, 94vw); max-height: 80vh; overflow: auto; z-index: 45; margin: 0;
    box-shadow: 0 12px 48px rgb(0 0 0 / 0.25);
  }
}

@media (max-width: 899.98px) {
  .site-header .wrap.hdr { grid-template-columns: 1fr auto auto; row-gap: 0.55rem; }
  .site-header .hs { grid-column: 1 / -1; grid-row: 2; }
  .hs-trigger { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.7rem 1.1rem; font: 500 0.97rem var(--font-body); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); cursor: pointer; text-align: left; }
  .hs-trigger-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-form { display: none; }
  .hs-form.sheet-open { display: flex; position: fixed; inset: 0; z-index: 100; max-width: none; background: var(--paper); overflow-y: auto; padding: 3.5rem 1rem 2rem; border-radius: 0; }
  .hs-form.sheet-open .hs-close { display: block; position: fixed; top: 0.6rem; right: 0.8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; }
  .hs-form .s-go-narrow { display: inline; }
}
.no-scroll .mshl-fab, .no-scroll .action-bar { display: none; }

/* ---- v0.7 split hero ---- */
.hero-split { padding-block: clamp(1.75rem, 4vw, 3.5rem); }
.hero-split .wrap { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.hero-split .hero-copy { align-items: flex-start; text-align: left; padding-top: 0; gap: 0.9rem; }
.hero-split h1 { font-size: var(--step-4); }
.hero-where { font-size: var(--step-1); font-weight: 600; margin: 0; color: var(--ink); }
.hero-split .lede { margin: 0; max-width: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.6rem; }
.hero-split .reassure { margin: 0.2rem 0 0; }
.hero-photo { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: var(--tint-2); box-shadow: 0 18px 50px -24px rgb(0 0 0 / 0.45); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 36 / 26; object-fit: cover; }
.hero-photo figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hero-photo figcaption span { background: rgb(255 255 255 / 0.92); color: #1d2a28; font-weight: 600; font-size: 0.82rem; padding: 0.3rem 0.65rem; border-radius: 999px; }
.hero-photo-tag { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--warn-soft); color: var(--warn); font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.trust-strip { border-block: 1px solid var(--line); background: var(--surface); }
.trust-strip ul { list-style: none; margin: 0; padding: 0.9rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2rem; font-weight: 500; font-size: 0.97rem; }
.trust-strip li { display: flex; align-items: center; gap: 0.5rem; }
.trust-strip li::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--brick); border-radius: 1px; }
@media (max-width: 860px) {
  .hero-split .wrap { grid-template-columns: 1fr; }
  .hero-split h1 { font-size: var(--step-3); }
}
/* Marshall: lighter so it never competes with the primary CTA */
.mshl-fab { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 4px 16px rgb(0 0 0 / 0.16); padding: 0.6rem 0.95rem; font-size: 0.88rem; }
.mshl-fab:hover { background: var(--ink); color: var(--paper); filter: none; }

/* ---- v0.8 ---- */
.hw-short { display: none; }
@media (max-width: 860px) {
  .hw-long { display: none; }
  .hw-short { display: inline; }
  .hero-split .hero-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 900px) {
  body { padding-bottom: 4.75rem; }
  /* compact round Marshall button above the fixed bar */
  .mshl-fab { padding: 0; width: 3rem; height: 3rem; justify-content: center; border-radius: 50%; }
  .mshl-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mshl-fab svg { width: 22px; height: 22px; }
}

/* ---- v0.9: short contact step ---- */
.match-more { border: 1px solid var(--line); border-radius: 12px; padding: 0.2rem 0.9rem; background: var(--surface); }
.match-more > summary { cursor: pointer; font-weight: 600; padding: 0.7rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.match-more > summary::-webkit-details-marker { display: none; }
.match-more > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.match-more[open] > summary::after { content: "-"; }
.match-more-body { display: flex; flex-direction: column; gap: 1rem; padding: 0.2rem 0 1rem; }
.panel-x { position: absolute; top: 0.6rem; right: 0.7rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink); z-index: 3; }
.panel-x:hover { border-color: var(--ink); }
.lead-form [data-step="2"], .lead-form [data-done] { position: relative; }
.lead-form [data-step="2"] > h2, .lead-form [data-done] > h2 { padding-right: 2.8rem; }
.hs-form [data-step="2"] .step-actions { position: sticky; bottom: 0; background: var(--surface); padding: 0.6rem 0 0.2rem; margin-top: 0.2rem; box-shadow: 0 -10px 12px -10px rgb(0 0 0 / 0.18); }
.lead-form [data-done] { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem; }
.lead-form [data-done][hidden] { display: none; }
.lead-form [data-done] .btn { align-self: flex-start; }

/* ===== v0.10: Rent / Buy / Sell paths ===== */
.mode-bar { border-top: 1px solid var(--line); }
.site-header .mode-bar .wrap { padding-block: 0.4rem 0.55rem; justify-content: flex-start; }
.mode-tabs { display: inline-flex; gap: 0.25rem; padding: 0.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.mode-tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 5.25rem; padding: 0.4rem 1.1rem;
  border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
}
.mode-tabs a:hover { background: var(--glaze-soft); }
.mode-tabs a[aria-current] { background: var(--ink); color: var(--paper); }
.mode-bar .mode-note { margin-left: 1rem; font-size: var(--step--1); color: var(--muted); }
@media (max-width: 760px) {
  .site-header .mode-bar .wrap { padding-block: 0.35rem 0.5rem; }
  .mode-tabs { display: flex; width: 100%; }
  .mode-tabs a { flex: 1; min-width: 0; padding: 0.5rem 0.4rem; }
  .mode-bar .mode-note { display: none; }
}

/* Describe what you need */
.describe { margin-top: 0.9rem; max-width: 34rem; }
.describe-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px dashed var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); font: 600 0.95rem var(--font-body); cursor: pointer;
}
.describe-toggle:hover { border-color: var(--ink); }
.describe-toggle .spark { color: var(--brick); }
.describe-panel { margin-top: 0.7rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 0.7rem; }
.describe-panel[hidden], .describe-result[hidden] { display: none; }
.describe-label { font-weight: 600; font-size: 0.95rem; }
.describe-panel textarea { min-height: 5.2rem; resize: vertical; }
.describe-result { display: flex; flex-direction: column; gap: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.d-lead { font-weight: 600; }
.d-intent { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); padding: 0.65rem 0.8rem; font-size: 0.95rem; }
.d-intent a { color: inherit; font-weight: 700; }
.d-intent .muted { color: inherit; opacity: 0.85; }
.d-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.d-field { display: flex; flex-direction: column; gap: 0.25rem; }
.d-field label { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.describe-result .btn-primary { width: 100%; }

/* "What brings you here?" path cards */
.paths { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .paths { grid-template-columns: 1fr; } }
.path-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem;
  text-decoration: none; color: var(--ink);
}
.path-card:hover { border-color: var(--ink); }
.path-card h3 { font-size: 1.25rem; }
.path-card p { color: var(--muted); font-size: 0.97rem; }
.path-card .more { margin-top: auto; padding-top: 0.4rem; color: var(--glaze); font-weight: 600; font-size: 0.95rem; }
.path-card.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.path-card.primary p { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.path-card.primary .more { color: var(--paper); }

/* Buy / Sell pages */
.path-switch { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.path-switch a { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; background: var(--surface); }
.path-switch a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.next-steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; color: var(--muted); }
.next-steps b { color: var(--ink); }
.honest-note { background: var(--glaze-soft); border-radius: var(--radius); padding: 0.8rem 1rem; font-size: 0.97rem; }
.urgent-flag { margin-top: 0.1rem; }

/* ===== v0.11: dark master strip (path tabs + describe switch), lighter header ===== */
:root { --strip-bg: #1d2a28; --strip-ink: #eef0eb; --strip-h: 2.75rem; }
.site-header { top: calc(var(--strip-h) * -1 + env(safe-area-inset-top, 0px)); }
.modebar { background: var(--strip-bg); color: var(--strip-ink); height: var(--strip-h); }
.site-header .modebar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0; }
.modebar .mode-tabs { background: rgb(255 255 255 / 0.1); border: 0; padding: 0.18rem; }
.modebar .mode-tabs a { color: color-mix(in srgb, var(--strip-ink) 82%, transparent); min-width: 4.4rem; padding: 0.3rem 1rem; font-size: 0.93rem; }
.modebar .mode-tabs a:hover { background: rgb(255 255 255 / 0.12); color: var(--strip-ink); }
.modebar .mode-tabs a[aria-current] { background: var(--strip-ink); color: var(--strip-bg); }
.modebar .mode-tabs a:focus-visible, .ai-switch:focus-visible { outline: 3px solid #7cc0b9; outline-offset: 2px; }
.ai-switch { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 0; color: var(--strip-ink); font: 600 0.93rem var(--font-body); cursor: pointer; padding: 0.3rem 0; margin-left: auto; }
.ai-spark { color: #e9a58b; }
.ai-short { display: none; }
.ai-knob { position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: rgb(255 255 255 / 0.28); transition: background 0.15s; flex: none; }
.ai-knob::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.ai-switch[aria-checked="true"] .ai-knob { background: #d9714f; }
.ai-switch[aria-checked="true"] .ai-knob::after { transform: translateX(1.1rem); }
@media (prefers-reduced-motion: reduce) { .ai-knob, .ai-knob::after { transition: none; } }
@media (max-width: 560px) { .ai-text { display: none; } .ai-short { display: inline; } .modebar .mode-tabs a { min-width: 0; padding: 0.3rem 0.8rem; } .modebar .mode-tabs { flex: 1; max-width: 18rem; } .modebar .mode-tabs a { flex: 1; } }

/* describe bar replaces the search pill while the switch is on */
.describe-on .hs { display: none; }
.describe-bar { display: flex; align-items: center; gap: 0.4rem; min-width: 0; width: 100%; max-width: 44rem; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.35rem 0.3rem 1.1rem; box-shadow: 0 2px 10px rgb(0 0 0 / 0.1); }
.describe-bar[hidden] { display: none; }
.describe-bar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 0.97rem; padding: 0.5rem 0; color: var(--ink); text-overflow: ellipsis; }
.describe-bar .btn { white-space: nowrap; border-radius: 999px; padding: 0.65rem 1.1rem; font-size: 0.93rem; }
.describe-x { background: transparent; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 999px; }
.describe-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (max-width: 860px) { .describe-bar { grid-column: 1 / -1; grid-row: 2; } .describe-bar .btn { padding: 0.6rem 0.8rem; } }
@media (max-width: 520px) { .describe-bar input::placeholder { font-size: 0.88rem; } .describe-bar .btn { display: none; } .describe-bar { padding-right: 0.5rem; } }
.describe-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; display: flex; justify-content: center; padding: 0 var(--gutter); }
.describe-pop[hidden] { display: none; }
.describe-pop-card { width: 100%; max-width: 42rem; margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.45); padding: 1rem; max-height: calc(100vh - 8.5rem); overflow: auto; display: flex; flex-direction: column; gap: 0.8rem; }
.describe-pop-card .btn-primary { width: 100%; }
.d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.hs-cta { display: flex; justify-content: center; }

/* thinner beta notice */
.demo-bar { font-size: 0.8rem; }
.demo-bar .wrap { padding-block: 0.15rem; }

/* ===== v0.11.1: folder tabs. The active tab shares the header's color and opens into the page. ===== */
.site-header .modebar .wrap { align-items: flex-end; }
.modebar .mode-tabs { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0.2rem; height: 100%; align-items: flex-end; }
.modebar .mode-tabs a {
  position: relative; align-self: flex-end; height: calc(100% - 0.4rem); min-width: 5rem; padding: 0 1.3rem;
  border-radius: 10px 10px 0 0; background: rgb(255 255 255 / 0.08); color: color-mix(in srgb, var(--strip-ink) 78%, transparent);
  font-size: 0.95rem;
}
.modebar .mode-tabs a:hover { background: rgb(255 255 255 / 0.16); color: var(--strip-ink); }
.modebar .mode-tabs a[aria-current] { height: 100%; background: var(--paper); color: var(--ink); font-weight: 700; }
.modebar .mode-tabs a[aria-current]::before,
.modebar .mode-tabs a[aria-current]::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; pointer-events: none; }
.modebar .mode-tabs a[aria-current]::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 9.5px, var(--paper) 10px); }
.modebar .mode-tabs a[aria-current]::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--paper) 10px); }
.ai-switch { align-self: center; }
@media (max-width: 560px) { .modebar .mode-tabs a { padding: 0 0.5rem; min-width: 0; } }

/* ===== v0.11.2: polish pass on the top of the page ===== */
:root { --strip-h: 3rem; --hdr: var(--surface); }
/* one dark block: slim beta line + master strip */
.demo-bar { background: #1b2321; color: #7d8985; font-size: 0.74rem; border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.demo-bar .wrap { padding-block: 0.2rem; }
.demo-bar .data { color: #7d8985; font-size: 0.74rem; }
.demo-bar .beta-ver { background: rgb(255 255 255 / 0.05); color: #8f9a96; }
.demo-bar .copy-btn { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); color: #e8dcc0; padding: 0.05rem 0.5rem; font-size: 0.7rem; min-height: 0; }
.demo-bar .demo-x { color: #7d8985; }
/* white header against the plaster page; folder tab uses the header tone */
.site-header { background: var(--hdr); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px -16px rgb(20 30 28 / 0.55); }
.modebar .mode-tabs a[aria-current] { background: var(--hdr); }
.modebar .mode-tabs a[aria-current]::before { background: radial-gradient(circle at 0 0, transparent 9.5px, var(--hdr) 10px); }
.modebar .mode-tabs a[aria-current]::after { background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--hdr) 10px); }
.modebar .mode-tabs a { font-size: 0.98rem; min-width: 5.4rem; }
.hs-form.bar .s-bar { border: 1px solid var(--line); background: var(--paper); box-shadow: none; }
.hs-form.bar .s-card .s-head:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.describe-bar { border: 1px solid var(--line); background: var(--paper); box-shadow: none; }
.header-text { border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; }
.header-text:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
/* calmer hero rhythm */
@media (min-width: 861px) {
  .hero { padding-block: 1.9rem 2.5rem; }
  .hero-split .hero-copy { gap: 0.7rem; }
}
.hero-split { background: radial-gradient(60rem 28rem at 85% 30%, color-mix(in srgb, var(--brick) 7%, transparent), transparent 70%), var(--paper); }
.hero-photo { box-shadow: 0 28px 50px -34px rgb(20 30 28 / 0.55); }
@media (max-width: 760px) { .header-text { display: none; } }
@media (max-width: 560px) {
  .modebar .mode-tabs a { min-width: 0; padding: 0 0.6rem; font-size: 0.92rem; }
  .modebar .mode-tabs { flex: 1 1 auto; max-width: 17rem; }
  .site-header .modebar .wrap { gap: 0.5rem; }
}

/* ===== v0.11.3: tighter top, merged hero lede, photo-ready hero frame ===== */
:root { --strip-h: 2.6rem; }
.site-header .wrap.hdr { padding-block: 0.4rem; }
.modebar .mode-tabs a { font-size: 0.95rem; }
.hero-lede { font-size: var(--step-1); color: var(--muted); max-width: 34rem; margin: 0; line-height: 1.45; }
@media (min-width: 861px) { .hero { padding-block: 1.5rem 2.25rem; } }
/* Frame for a real photo: drop a 5:4 JPG in as assets/hero-home.jpg and point the <img src> at it. */
.hero-photo { border-radius: 20px; }
.hero-photo img { aspect-ratio: 5 / 4; object-fit: cover; }
.hero-photo figcaption span { backdrop-filter: blur(4px); }

/* Compare view: open the site with ?hero=dedupe. One search lives in the header; the hero stops repeating it. */
.hero-dedupe .hero-actions .btn-quiet { display: none; }
@media (min-width: 861px) { .hero-dedupe .hero-actions { display: none; } .hero-dedupe .hero-copy .reassure { margin-top: 0.6rem; } }
.hero-photo img[src$=".svg"] { aspect-ratio: 36 / 26; }

/* ===== v0.12: one search, two places (hero at the top, header after scrolling) ===== */
.hs-init .hdr > .hs { visibility: hidden; }
.hero-search-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.6rem; }
.hero-search-slot { position: relative; z-index: 30; min-height: 3.4rem; display: flex; }
.hero-search-slot .hs { width: 100%; justify-content: flex-start; }
.hero-search-slot .hs-form { max-width: 48rem; }
.hero-search-slot .hs-trigger { max-width: 48rem; padding: 0.95rem 1.2rem; font-size: 1.02rem; }
.hero-search-slot .describe-bar { max-width: 48rem; }
.describe-pop.in-hero { position: absolute; left: 0; right: auto; width: 100%; max-width: 48rem; padding: 0; top: 100%; }
.describe-pop.in-hero .describe-pop-card { margin-top: 0.5rem; }
@media (min-width: 900px) {
  .hero-search-slot { min-height: 4.6rem; }
  .hero-search-slot .hs-form.bar .s-bar { box-shadow: 0 16px 36px -18px rgb(20 30 28 / 0.5); border-color: transparent; background: var(--surface); }
  .hero-search-slot .hs-form.bar .s-head { padding: 0.75rem 1.5rem; }
  .hero-search-slot .hs-form.bar .s-label { font-size: 0.74rem; }
  .hero-search-slot .hs-form.bar .s-value { font-size: 1.02rem; }
  .hero-search-slot .hs-form.bar .s-go { padding: 0.95rem 1.5rem; font-size: 1.02rem; }
}
/* header while the search is in the hero: logo left, Text us + menu right */
.hs-in-hero .wrap.hdr { grid-template-columns: 1fr auto auto; }
.hs-in-hero .header-text { grid-column: 2; }
@media (max-width: 860px) { .hero-search-block { order: 2; } .hero-split .hero-photo { order: 3; } .hero-split .hero-copy { order: 1; } }

/* ===== v0.12.1: search sits directly under the lede on wide screens; opens fully into view ===== */
.hero-search-slot { scroll-margin-top: 6.5rem; }
@media (min-width: 1100px) {
  .hero-split .wrap { grid-template-areas: "copy photo" "search photo"; grid-template-rows: 1fr auto; column-gap: clamp(1.5rem, 3vw, 3rem); }
  .hero-split .hero-copy { grid-area: copy; align-self: end; }
  .hero-split .hero-photo { grid-area: photo; align-self: center; }
  .hero-search-block { grid-area: search; align-self: start; grid-column: auto; }
  .hero-search-slot .hs-form.bar .s-head { padding: 0.7rem 1.05rem; }
  .hero-search-slot .hs-form.bar .s-go { padding: 0.9rem 1.15rem; font-size: 0.98rem; }
  .hero-search-slot .hs-form.bar .s-value { font-size: 0.97rem; }
}

/* ===== v0.12.2: clearer describe mode ===== */
.describe-bar { display: block; background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; max-width: 48rem; width: 100%; }
.describe-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.35rem 0.3rem 1.1rem; }
.describe-row input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 0.97rem; padding: 0.5rem 0; color: var(--ink); text-overflow: ellipsis; }
.describe-row .btn { white-space: nowrap; border-radius: 999px; padding: 0.65rem 1.2rem; font-size: 0.95rem; }
.describe-hint { margin: 0.55rem 0.4rem 0; font-size: 0.9rem; color: var(--muted); }
.describe-hint button { background: none; border: 0; padding: 0; font: inherit; color: var(--glaze); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.hdr .describe-hint { display: none; }
.hero-search-slot .describe-row { background: var(--surface); border-color: transparent; box-shadow: 0 16px 36px -18px rgb(20 30 28 / 0.5); padding: 0.45rem 0.5rem 0.45rem 1.35rem; }
.hero-search-slot .describe-row input { font-size: 1.02rem; }
.describe-link { align-self: flex-start; background: none; border: 0; padding: 0.15rem 0; color: var(--ink); font: 600 0.95rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--line); }
.describe-link:hover { text-decoration-color: var(--ink); }
.describe-link span { color: var(--brick); text-decoration: none; display: inline-block; }
.describe-on .describe-link { display: none; }
@media (max-width: 520px) {
  .describe-row .btn { display: none; }
  .hero-search-slot .describe-row .btn { display: inline-flex; padding: 0.55rem 0.9rem; font-size: 0.9rem; }
  .hero-search-slot .describe-row { padding-left: 1rem; }
}
/* the button never wraps; wide screens give the left column more room */
.hs-form.bar .s-go, .hs-form.bar .s-go span { white-space: nowrap; }
@media (min-width: 1100px) {
  .hero-split .wrap { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
}

/* ===== v0.13: Airbnb-style: search stays up top; toggle says what it does; describe box with examples + mic ===== */
/* hero returns to copy + photo (search no longer lives here) */
.hero-search-block, .hero-search-slot { display: none; }
@media (min-width: 1100px) {
  .hero-split .wrap { grid-template-areas: none; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hero-split .hero-copy, .hero-split .hero-photo { grid-area: auto; align-self: center; }
}
@media (max-width: 860px) { .hero-split .hero-photo, .hero-split .hero-copy { order: 0; } }
.hdr .describe-hint { display: block; }
/* toggle: sentence + visible On / Off */
.ai-more { display: inline; font-weight: 500; opacity: 0.85; }
@media (max-width: 899px) { .ai-more { display: none; } }
.ai-knob { width: 3.7rem; height: 1.75rem; }
.ai-knob::before { content: "Off"; position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); font: 700 0.78rem var(--font-body); color: rgb(255 255 255 / 0.8); }
.ai-knob::after { top: 0.2rem; left: 0.22rem; width: 1.35rem; height: 1.35rem; }
.ai-switch[aria-checked="true"] .ai-knob::before { content: "On"; right: auto; left: 0.7rem; color: #fff; }
.ai-switch[aria-checked="true"] .ai-knob::after { transform: translateX(1.9rem); }
.ai-switch[aria-checked="true"] .ai-knob { background: #d9714f; }
/* describe mode in the header: bigger, with a mic */
.describe-row { padding: 0.4rem 0.45rem 0.4rem 1.3rem; }
.describe-row input { font-size: 1.02rem; }
.describe-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.describe-mic:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.describe-mic.on { background: var(--brick); color: var(--brick-ink); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brick) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .describe-mic.on { animation: none; } }
.describe-hint { font-size: 0.85rem; }
@media (max-width: 520px) {
  .describe-row .btn { display: inline-flex; padding: 0.55rem 0.85rem; font-size: 0.9rem; }
  .describe-row { padding-left: 1rem; }
}

/* ===== v0.13.1: in-page beta feedback ===== */
.beta-feedback { background: none; border: 0; padding: 0; color: #7d8985; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.beta-feedback:hover { color: #aab4af; }
.beta-feedback:focus-visible { outline: 2px solid #7cc0b9; outline-offset: 2px; }
.drawer-feedback { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0.95rem 0.2rem; color: var(--ink); font: 500 1.05rem var(--font-body); cursor: pointer; }
.drawer-feedback:hover { color: var(--glaze); }
.fb-overlay { position: fixed; inset: 0; z-index: 130; background: rgb(0 0 0 / 0.5); display: flex; align-items: flex-start; justify-content: center; padding: clamp(1rem, 8vh, 4rem) 1rem 1rem; overflow-y: auto; }
.fb-overlay[hidden] { display: none; }
.fb-panel { width: 100%; max-width: 30rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.6); padding: 1.25rem; }
.fb-form, .fb-done { display: flex; flex-direction: column; gap: 0.9rem; }
.fb-form[hidden], .fb-done[hidden] { display: none; }
.fb-head { display: flex; align-items: center; justify-content: space-between; }
.fb-head h2, .fb-done h2 { font-size: var(--step-2); }
.fb-x { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.1rem 0.5rem; border-radius: 8px; }
.fb-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.fb-lede { margin: 0; color: var(--muted); }
.fb-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fb-actions { display: flex; gap: 0.6rem; }
.fb-actions .btn-primary { flex: 1; }
.fb-done p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .demo-bar .beta-feedback { font-size: 0.78rem; } }

/* ===== v0.14.0: animated example text, one-line hint, tap targets, delayed chat bubble ===== */
:root { --strip-h: 2.75rem; }
.describe-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.describe-field input { width: 100%; }
.describe-row input::placeholder { color: transparent; }
.describe-ghost {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02rem; font-style: italic;
  color: color-mix(in srgb, var(--ink) 38%, transparent); animation: ghost-swipe 4.6s ease-in-out infinite;
}
.describe-field input:not(:placeholder-shown) + .describe-ghost { display: none; }
@keyframes ghost-swipe {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  22% { clip-path: inset(0 0 0 0); opacity: 1; }
  88% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .describe-ghost { animation: none; } }
.describe-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.describe-hint .hint-note { display: none; }
.describe-hint.show-note .hint-main { display: none; }
.describe-hint.show-note .hint-note { display: inline; }
/* compact header bar label swap (now the same text at every width) */
@media (min-width: 900px) and (max-width: 1199px) {
  .hs-form.lead-form.bar .s-go-wide { display: none; }
  .hs-form.lead-form.bar .s-go-narrow { display: inline; }
}
/* tap targets */
.burger { width: 2.75rem; height: 2.75rem; }
.demo-x { position: relative; }
.demo-x::after { content: ""; position: absolute; inset: -0.7rem -0.6rem; }
.drawer-x { padding: 0.4rem 0.75rem; }
.header-text { min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-footer li a, .site-footer .contact-line a { display: inline-block; padding-block: 0.4rem; }
.copy-btn { min-height: 2.25rem; }
.link-btn { padding: 0.25rem 0.1rem; }
/* chat bubble waits on phones until the visitor has scrolled */
.mshl-fab { transition: opacity 0.25s ease, transform 0.25s ease; }
.mshl-fab.mshl-wait { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ===== v0.14.1: equal-height tabs; unselected tabs recede ===== */
.modebar .mode-tabs a { height: 100%; background: rgb(255 255 255 / 0.04); color: rgb(238 240 235 / 0.52); }
.modebar .mode-tabs a:hover { background: rgb(255 255 255 / 0.1); color: rgb(238 240 235 / 0.9); }
.modebar .mode-tabs a[aria-current] { background: var(--hdr); color: var(--ink); }

/* ===== v0.15.0: "Describe" lives inside the search bar (Airbnb-style sparkle on the button) ===== */
.strip-note { margin-left: auto; font-size: 0.85rem; color: rgb(238 240 235 / 0.65); white-space: nowrap; }
@media (max-width: 700px) { .strip-note { display: none; } }
.s-describe { display: none; align-items: center; gap: 0.4rem; background: transparent; border: 0; color: var(--ink); font: 600 0.92rem var(--font-body); padding: 0.5rem 0.75rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.s-describe:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.s-describe:focus-visible { outline: 3px solid var(--glaze); outline-offset: 2px; }
.s-describe-ico { color: var(--brick); font-size: 1.05rem; line-height: 1; }
.hs-sparkle { display: none; }
/* desktop bar: chip sits just before the main button */
@media (min-width: 900px) {
  .hs-form.lead-form.bar .s-describe { display: inline-flex; margin-left: 0.15rem; padding-left: 0.85rem; border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; }
  .hs-form.lead-form.bar .s-bar { grid-template-columns: 1fr 1.15fr 0.95fr auto auto; align-items: center; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hs-form.lead-form.bar .s-describe-text { display: none; }
  .hs-form.lead-form.bar .s-describe { padding: 0.5rem 0.7rem; }
}
/* phones: a sparkle button beside the compact search pill; inside the opened sheet a full-width option */
@media (max-width: 899px) {
  .hs { display: flex; align-items: center; gap: 0.5rem; }
  .hs-trigger { flex: 1; min-width: 0; }
  .hs-sparkle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--brick); font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
  .hs-form.sheet-open .s-describe { display: flex; justify-content: center; width: 100%; border: 1px dashed var(--line); padding: 0.75rem; margin-top: 0.4rem; }
}
.describe-row .describe-go { display: inline-flex; align-items: center; gap: 0.4rem; }
.strip-note { align-self: center; }
@media (max-width: 760px) { .header-text { display: none; } }

/* ===== v0.16.0: first tab names the business; unselected tabs clearly secondary; live strip (time/weather -> contact nudge) ===== */
.tab-short { display: none; }
@media (max-width: 700px) { .tab-long { display: none; } .tab-short { display: inline; } }
.modebar .mode-tabs a { background: rgb(255 255 255 / 0.06); color: rgb(238 240 235 / 0.74); }
.modebar .mode-tabs a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.modebar .mode-tabs a[aria-current] { background: var(--hdr); color: var(--ink); }
.strip-note { display: none; }
.strip-live { margin-left: auto; align-self: center; position: relative; height: 1.7rem; width: 19rem; max-width: 46%; overflow: hidden; font-size: 0.86rem; color: rgb(238 240 235 / 0.82); }
.strip-roll { position: absolute; inset: 0; }
.strip-roll > .sr-a, .strip-roll > .sr-b { position: absolute; right: 0; top: 0; max-width: 100%; height: 1.7rem; line-height: 1.7rem; white-space: nowrap; display: inline-flex; align-items: center; transition: transform 0.45s ease, opacity 0.45s ease; }
.sr-b { color: #fff; font-weight: 600; text-decoration: none; }
.sr-b:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sr-b:focus-visible { outline: 2px solid #7cc0b9; outline-offset: 2px; border-radius: 4px; }
.sr-sep { opacity: 0.55; white-space: pre; }
.sr-wx svg { vertical-align: -3px; }
.strip-roll .sr-a { transform: translateY(0); opacity: 1; }
.strip-roll .sr-b { transform: translateY(110%); opacity: 0; }
.strip-roll.show-b .sr-a { transform: translateY(-110%); opacity: 0; }
.strip-roll.show-b .sr-b { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .strip-roll > .sr-a, .strip-roll > .sr-b { transition: none; } .strip-roll .sr-b { display: none; } }
@media (max-width: 700px) { .strip-live { width: 8.5rem; max-width: 40%; font-size: 0.8rem; } .sr-label, .sr-cond, .strip-live .sr-sep:first-of-type { display: none; } .sr-label + .sr-sep { display: none; } .sr-b { font-size: 0.8rem; } }
@media (max-width: 420px) { .sr-b { font-size: 0.78rem; } }
.sr-b > span { margin-left: 0.4rem; }

/* ===== v0.16.1: one short label ("Get matched"), so the Describe text can stay visible on mid-width screens ===== */
@media (min-width: 900px) and (max-width: 1199px) {
  .hs-form.lead-form.bar .s-go-wide { display: inline; }
  .hs-form.lead-form.bar .s-go-narrow { display: none; }
  .hs-form.lead-form.bar .s-describe-text { display: inline; }
}
@media (min-width: 900px) and (max-width: 999px) { .hs-form.lead-form.bar .s-describe-text { display: none; } }

/* Desktop header: the describe hint hangs below the search pill so it doesn't push Text us and the menu out of line. */
@media (min-width: 861px) {
  .site-header .hdr .describe-bar { position: relative; }
  .site-header .hdr .describe-hint { position: absolute; left: 0; right: 0; top: 100%; margin: 0.15rem 0 0; text-align: center; }
}

/* Beta notice sits centered in the top strip; the dismiss button stays at the right edge. */
.demo-bar .wrap { position: relative; justify-content: center; text-align: center; }
.demo-bar .wrap > .demo-x { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); }

/* QA fixes (0.16.14) */
body:has(.hs-form.sheet-open) .demo-bar .demo-x { visibility: hidden; }
.who-note { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--muted, #5b6663); }
.hs-form [data-step="2"] .step-actions { position: static; box-shadow: none; }

.team.team-solo { grid-template-columns: minmax(0, 46rem); }

.actions-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.6rem; }

.hero-photo img[src$=".jpg"] { object-position: 62% 50%; }
.hero-photo-tag { background: rgb(20 30 28 / 0.62); color: #fff; font-weight: 500; backdrop-filter: blur(4px); }

.min-stay { margin: 0.2rem 0 0.7rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); }

.about-photo { max-width: 34rem; }

/* Phone numbers and the footer email use the body font: in a monospace face the space after "(313)" is a full digit wide. */
a[href^="sms:"] .data, a[href^="tel:"] .data, .contact-line .data, .contact-line a.data, .aside-card .data { font-family: inherit; font-size: 1em; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* QA round 2: one close button at a time on the phone sheet */
.hs-form.sheet-open [data-step="2"] .panel-x { display: none; }
.hs-form.sheet-open:has([data-done]:not([hidden])) .hs-close { display: none; }