/*
 * SpacesNow site stylesheet.
 *
 * Mobile-first: base rules target the ≤430px layout from the approved design
 * (Home-Full-Mobile.dc.html); `min-width:900px` brings in the desktop layout
 * (Home-Full.dc.html, 1280 baseline). One markup tree, two renderings — no
 * page duplication. Tokens live in tokens.css; nothing here is a literal
 * color/size that isn't already a --sn-* variable.
 */

/* ───────────────────────── Fonts (self-hosted, D-014 brief) ────────────── */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-800.woff2") format("woff2");
}

/* ───────────────────────── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sn-font);
  background: var(--sn-white);
  color: var(--sn-text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sn-violet); text-decoration: none; }
a:hover { color: var(--sn-text); }
button { font-family: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Visible keyboard focus everywhere — quality floor, never suppressed.
 * A single violet outline is only 2.47:1 against --sn-ink and ~1:1 against
 * --sn-violet itself (WCAG 2.2 SC 1.4.11 needs 3:1) — invisible on exactly
 * the dark/violet surfaces this site uses most (footer, how-callout,
 * segment-card--residential). A white outline plus a violet halo works on
 * every surface the palette has: white contrasts the dark/violet ones, the
 * halo contrasts the light ones.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sn-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sn-violet);
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--sn-ink);
  color: var(--sn-white);
  padding: 12px 18px;
  border-radius: var(--sn-radius-md);
  font-weight: 700;
  font-size: 14px;
  z-index: 100;
  transition: top var(--sn-transition);
}
.skip:focus { top: 8px; }

/* ───────────────────────── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--sn-radius-md);
  border: 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--sn-transition), color var(--sn-transition), border-color var(--sn-transition);
}
.btn--primary { background: var(--sn-violet); color: var(--sn-white); }
.btn--primary:hover { background: var(--sn-violet-hover); color: var(--sn-white); }
.btn--dark { background: var(--sn-ink); color: var(--sn-white); }
.btn--dark:hover { background: var(--sn-ink-hover); color: var(--sn-white); }
.btn--outline { background: var(--sn-white); border: 1px solid var(--sn-border); color: var(--sn-text); }
.btn--outline:hover { border-color: var(--sn-violet); color: var(--sn-violet); }
.btn--on-ink { background: var(--sn-mint); color: var(--sn-text-on-mint); }
.btn--on-ink:hover { background: var(--sn-mint-tint); }
.btn--full { width: 100%; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }

/* ───────────────────────── Header ───────────────────────────────────────── */
.site-header {
  min-height: var(--sn-header-height);
  background: var(--sn-white);
  border-bottom: 1px solid var(--sn-haze-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .wrap {
  min-height: var(--sn-header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { width: 16px; height: 14px; }
.brand__word {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--sn-tracking-wordmark);
  color: var(--sn-ink);
}
.main-nav { display: none; }
.header-actions { display: none; }

.mobile-menu {
  margin-left: auto;
}
.mobile-menu > summary {
  list-style: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--sn-radius-sm);
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu[open] > summary { background: var(--sn-haze); }
.mobile-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sn-header-height);
  background: var(--sn-white);
  border-bottom: 1px solid var(--sn-haze-border);
  padding: 8px var(--sn-gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 49;
}
.mobile-menu-panel a {
  color: var(--sn-text);
  font-weight: 500;
  font-size: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--sn-border-hairline);
}
.mobile-menu-panel .btn { margin-top: 12px; }

@media (min-width: 900px) {
  /* Three columns: brand left, nav optically centred in the page, actions
     right. Grid rather than flex + margin-left:auto, because with flex the
     nav's position depends on how wide the brand and the action pair happen
     to be — it drifts the moment a label changes. `1fr` centres the nav
     against the CONTAINER, which is what "centred" has to mean here. */
  .site-header .wrap {
    display: grid;
    /* Brand and nav sit together on the left, actions hard right. The third
       column takes all the slack, so the nav stays beside the wordmark
       instead of drifting with the width of the action pair. */
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 32px;
  }
  .brand { justify-self: start; }
  .brand__mark { width: 21px; height: 18px; }
  .brand__word { font-size: 24px; }
  .main-nav { display: flex; align-items: center; gap: 26px; }
  .main-nav a { font-size: 15px; font-weight: 500; color: var(--sn-ink); }
  .main-nav { justify-self: start; }
  .header-actions { justify-self: end; }
  /* Third grid column — already hard right, so no margin-left:auto needed. */
  .header-actions { display: flex; align-items: center; gap: 18px; }
  .header-actions__signin { font-size: 15px; font-weight: 500; color: var(--sn-text-mute-2); }
  .mobile-menu { display: none; }
}

/* ───────────────────────── Layout shell ─────────────────────────────────── */
.section { padding: var(--sn-section-y) 0; }
.section--tint { background: var(--sn-haze); }
.section--dark { background: var(--sn-ink); }

.section__head { max-width: 720px; }
/* .section__head--row is the ROW WRAPPER around an inner .section__head plus
   a link/tabgroup (markup: <div class="section__head section__head--row">
   <div class="section__head">…), so this class landed on BOTH elements and
   clamped the row itself to 720px too — the trailing link/tabgroup then sat
   stranded mid-page instead of at the right gutter. Un-clamp the row; the
   inner .section__head keeps its own 720px reading-width limit. */
.section__head--row { max-width: none; }
.section__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-violet);
  margin-bottom: 14px;
  display: block;
}
.section__title {
  font-size: 27px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sn-text);
}
.section--dark .section__title { color: var(--sn-white); }
.section__lead {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sn-text-muted);
}
.section--dark .section__lead { color: var(--sn-text-on-ink-muted); }
.section__link {
  font-size: 16px;
  font-weight: 700;
  color: var(--sn-violet);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .section__head--row { display: flex; align-items: flex-end; gap: 40px; }
  .section__head--row .section__head { flex: 0 1 auto; }
  .section__head--row .section__link,
  .section__head--row .section__tabgroup { margin-left: auto; flex-shrink: 0; }
  .section__title { font-size: 40px; line-height: 1.08; }
  .section__lead { font-size: 18px; margin-top: 14px; }
}

/* Segmented tab group (used in hero + "how" + inventory filters) */
.tabgroup {
  display: flex;
  gap: 6px;
  background: var(--sn-white);
  border: 1px solid var(--sn-haze-border);
  border-radius: 12px;
  padding: 5px;
}
.section--tint .tabgroup { background: var(--sn-white); }
.tabgroup__btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sn-text-mute-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tabgroup__btn[aria-pressed="true"] { background: var(--sn-violet); color: var(--sn-white); }
/* Hero deal group (search router milestone): a real radio + its <label>,
   not a JS-toggled button — same visual result via :checked, native to the
   browser. The input itself is .visually-hidden; focus moves to the label
   via the input+label adjacency so a keyboard user still sees a ring. */
.tabgroup__radio:checked + .tabgroup__btn { background: var(--sn-violet); color: var(--sn-white); }
.tabgroup__radio:focus-visible + .tabgroup__btn {
  outline: 2px solid var(--sn-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sn-violet);
  border-radius: 4px;
}

/* ── The hero deal control, as real tabs ─────────────────────────────────
 * The pill-in-a-box treatment read as a segmented button group, not as tabs:
 * a violet slab floating inside a rounded outline, with the outline itself
 * doing nothing. Tabs are a row of labels on a rule, with the active one
 * marked underneath — so that is what these are now. Scoped to the search
 * card; the "I have a property / I'm looking" pair elsewhere is genuinely a
 * toggle and keeps its pills.
 */
.search-card .tabgroup {
  background: transparent;
  border: 0;
  /* the rule runs the full width of the card, not just under the labels —
     a hairline that stops mid-card reads as an unfinished box, which is what
     the old outline looked like */
  border-bottom: 1px solid var(--sn-border-hairline);
  border-radius: 0;
  padding: 0;
  gap: 0;
  flex-grow: 1;
}
.search-card .tabgroup__btn {
  border-radius: 0;
  padding: 0 2px;
  margin-right: 28px;
  /* the underline overlaps the group's own hairline rather than sitting under it */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--sn-text-mute-2);
  font-size: 15px;
  background: transparent;
}
.search-card .tabgroup__btn:last-of-type { margin-right: 0; }
.search-card .tabgroup__btn:hover { color: var(--sn-ink); }
.search-card .tabgroup__btn[aria-pressed="true"],
.search-card .tabgroup__radio:checked + .tabgroup__btn {
  background: transparent;
  color: var(--sn-ink);
  border-bottom-color: var(--sn-violet);
}
.search-card .tabgroup__radio:focus-visible + .tabgroup__btn {
  outline: 2px solid var(--sn-violet);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 3px;
}

/* ───────────────────────── Hero ─────────────────────────────────────────── */
.hero { background: var(--sn-haze); padding: 24px 0 28px; }
.hero h1 {
  font-size: 32px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 860px;
}
.hero__lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sn-text-muted);
  max-width: 720px;
}
.search-card {
  margin-top: 20px;
  background: var(--sn-white);
  border: 1px solid var(--sn-haze-border);
  border-radius: var(--sn-radius-xl);
  padding: 16px;
}
.search-card__top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--sn-text-mute-3); }
.field input, .field select {
  height: 50px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-md);
  font-family: inherit;
  font-size: 16px;
  color: var(--sn-text);
  background: var(--sn-white);
}
.search-card__fields { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.search-card__submit { margin-top: 10px; }
/* Mobile hero keeps the form to one decision (where) plus submit, matching
   the approved mobile design — type/bhk refine on the results page. They
   return at desktop width, where the hero has the room for both. */
.field--bhk, .field--type { display: none; }
.search-card__popular {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.search-card__popular-label { font-size: 13px; color: var(--sn-text-mute-3); }
.chip-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--sn-text);
  border: 1px solid var(--sn-haze-border);
  border-radius: var(--sn-radius-pill);
  padding: 7px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.chip-link:hover { border-color: var(--sn-violet); color: var(--sn-violet); }
.hero__facts { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.fact { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fact__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sn-violet); flex-shrink: 0; }
.hero__scroll-hint { display: none; }

@media (min-width: 900px) {
  .hero { padding: 64px 0 0; display: flex; flex-direction: column; min-height: 824px; }
  /* .hero is a column flex container, which turns .wrap into a flex ITEM.
     Per the flexbox spec, an item with an auto margin on the cross axis is
     NEVER stretched by `align-self`/`align-items`, no matter what they're
     set to — and the base `.wrap` rule's `margin: 0 auto` IS a cross-axis
     margin here (cross axis = horizontal, since the container is a COLUMN
     flex). With stretch off, the item's width falls back to shrink-to-fit
     instead of filling the container, landing at the h1's own max-width +
     padding (measured: 972px wide instead of the page's usual 1168px,
     sitting ~154px in from the gutter on both sides). Setting `width: 100%`
     sizes the item directly instead of leaving it `auto`, which sidesteps
     that rule entirely — `max-width` + the existing `margin: 0 auto` still
     centre it normally above 1280px, exactly as every other `.wrap` on the
     page already does. */
  .hero .wrap { flex-grow: 1; width: 100%; display: flex; flex-direction: column; }
  .hero h1 { font-size: 56px; line-height: 1.04; }
  .hero__lead { font-size: 19px; margin-top: 20px; }
  .search-card { margin-top: 36px; padding: 22px 24px 24px; }
  .search-card__top { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .search-card .tabgroup__btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
  .search-card__fields { flex-direction: row; align-items: flex-end; gap: 12px; margin-top: 0; }
  .search-card__fields .field--place { flex-grow: 1; }
  .field--bhk { display: flex; width: 120px; flex-shrink: 0; }
  .field--type { display: flex; width: 190px; flex-shrink: 0; }
  /* site.js hides BHK when Commercial is picked (a residential-only unit of
     measure) by setting the `hidden` IDL attribute — an attribute selector
     outranks the plain class selector above, so this actually wins instead
     of the browser's own [hidden] UA rule losing to `.field--bhk`'s
     unconditional `display: flex`. */
  .field--bhk[hidden] { display: none; }
  .field input, .field select { height: 52px; }
  .search-card__submit { margin-top: 0; width: auto; padding: 0 30px; height: 52px; }
  .hero__facts { flex-direction: row; gap: 46px; margin-top: 40px; }
  .fact { font-size: 16px; }
  .fact__dot { width: 10px; height: 10px; }
  .hero__scroll-hint {
    display: flex; margin-top: auto; height: 26px; align-items: center; justify-content: center;
    font-size: 13px; color: var(--sn-text-faint);
  }
}

/* ───────────────────────── How it works (steps) ─────────────────────────── */
.steps-grid { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.step-card {
  background: var(--sn-white);
  border: 1px solid var(--sn-haze-border);
  border-radius: var(--sn-radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.step-card__meta { display: flex; align-items: center; gap: 10px; }
.step-card__num {
  width: 30px; height: 30px; border-radius: 9px; background: var(--sn-violet); color: var(--sn-white);
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-card__when { font-size: 13px; font-weight: 600; color: var(--sn-text-mute-3); }
.step-card__title { margin-top: 14px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.step-card__body { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--sn-text-mute-2); }
.step-card__note { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: var(--sn-violet); }

.how-bottom { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.how-callout {
  background: var(--sn-ink); border-radius: var(--sn-radius-xl); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.how-callout__title { font-size: 18px; font-weight: 800; color: var(--sn-white); letter-spacing: -0.02em; }
.how-callout__body { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--sn-text-on-ink-muted); }
.fee-note-card { background: var(--sn-mint); border-radius: var(--sn-radius-xl); padding: 20px; }
.fee-note-card__title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--sn-text-on-mint); }
.fee-note-card__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-on-mint-muted); }

@media (min-width: 900px) {
  .steps-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .step-card { padding: 28px 26px; }
  .step-card__title { font-size: 21px; }
  .how-bottom { margin-top: 28px; flex-direction: row; gap: 20px; }
  .how-callout { flex-grow: 1; flex-direction: row; align-items: center; gap: 26px; padding: 26px 30px; }
  .how-callout__text { flex-grow: 1; }
  .fee-note-card { width: 330px; flex-shrink: 0; padding: 26px 28px; }
}

/* ───────────────────────── Compare (table → cards) ───────────────────────── */
.compare-head { display: none; }
.compare-table { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.compare-row {
  background: var(--sn-white);
  border: 1px solid var(--sn-haze-border);
  border-radius: var(--sn-radius-xl);
  padding: 18px 20px;
}
.compare-row__label { font-size: 16px; font-weight: 800; }
.compare-row__cells { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.compare-row__cell { display: flex; gap: 10px; }
.compare-row__source { width: 96px; flex-shrink: 0; color: var(--sn-text-mute-3); }
.compare-row__cell--us {
  background: var(--sn-haze); border-radius: 8px; padding: 8px 10px; margin: -8px -10px 0;
}
.compare-row__cell--us .compare-row__source { color: var(--sn-violet); font-weight: 700; }
.compare-row__cell--us .compare-row__text { font-weight: 600; }
.compare-row__cell--portal .compare-row__text,
.compare-row__cell--broker .compare-row__text { color: var(--sn-text-mute-2); }

.compare-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.compare-cta__note { font-size: 15px; color: var(--sn-text-mute-3); }

@media (min-width: 900px) {
  .compare-head, .compare-row { display: grid; grid-template-columns: 300px repeat(3, minmax(0, 1fr)); gap: 0; }
  .compare-head { margin-top: 40px; }
  .compare-head__col { padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--sn-text-mute-2); }
  .compare-head__col--us {
    background: var(--sn-violet); border-radius: 14px 14px 0 0; display: flex; align-items: center; gap: 9px;
    color: var(--sn-white); font-weight: 800; letter-spacing: 0.01em;
  }
  .compare-head__col--us svg path { fill: var(--sn-white); }
  .compare-table { margin-top: 0; gap: 0; }
  .compare-row { border: 0; border-top: 1px solid var(--sn-border-hairline); border-radius: 0; padding: 0; background: transparent; }
  .compare-row:last-child .compare-row__cell--us { border-radius: 0 0 14px 14px; }
  .compare-row__label { padding: 20px 0; font-size: 16px; }
  .compare-row__cells { display: contents; }
  .compare-row__cell { padding: 20px 22px; display: block; }
  .compare-row__cell--us { margin: 0; border-radius: 0; }
  /* Visually redundant once the column headers are visible (Portal/Broker/
     SpacesNow), but `display:none` removes it from the ACCESSIBILITY TREE
     at every width, not just the visual layout — a screen reader lost the
     "who does this row apply to" label entirely. Hidden visually only. */
  .compare-row__source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare-cta { flex-direction: row; align-items: center; gap: 22px; margin-top: 34px; }
}

/* ───────────────────────── Segment hubs (residential/commercial) ────────── */
.segment-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.segment-card {
  border-radius: var(--sn-radius-2xl);
  padding: 22px 20px;
  text-decoration: none;
  display: block;
}
.segment-card--residential { background: var(--sn-violet); color: var(--sn-white); }
.segment-card--commercial { background: var(--sn-mint); color: var(--sn-text-on-mint); }
.segment-card__head { display: flex; align-items: center; gap: 11px; }
.segment-card__title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.segment-card--residential .segment-card__title { color: var(--sn-white); }
.segment-card--commercial .segment-card__title { color: var(--sn-text-on-mint); }
.segment-card__lead { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.segment-card--residential .segment-card__lead { color: var(--sn-text-on-violet-muted); }
.segment-card--commercial .segment-card__lead { color: var(--sn-text-on-mint-muted); }
.segment-card__tags { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.segment-card__tag { font-size: 13px; font-weight: 600; border-radius: var(--sn-radius-pill); padding: 7px 12px; }
.segment-card--residential .segment-card__tag { background: var(--sn-violet-tint); color: var(--sn-white); }
.segment-card--commercial .segment-card__tag { background: var(--sn-mint-tint); color: var(--sn-text-on-mint); }
.segment-card__stats { margin-top: 18px; display: flex; gap: 24px; }
.segment-card__stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.segment-card__stat-label { font-size: 13px; margin-top: 2px; }
.segment-card--residential .segment-card__stat-label { color: var(--sn-text-on-violet-faint); }
.segment-card--commercial .segment-card__stat-label { color: var(--sn-text-on-mint-faint); }
.segment-card__foot {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid; display: flex; align-items: center; justify-content: space-between;
}
.segment-card--residential .segment-card__foot { border-color: var(--sn-violet-border); }
.segment-card--commercial .segment-card__foot { border-color: var(--sn-mint-border); }
.segment-card__cta { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }

@media (min-width: 900px) {
  .segment-grid { margin-top: 40px; flex-direction: row; gap: 24px; }
  .segment-card { flex-grow: 1; width: 50%; padding: 34px 36px; }
  .segment-card__title { font-size: 30px; }
  .segment-card__lead { font-size: 17px; }
  .segment-card__stats { margin-top: 26px; gap: 30px; }
  .segment-card__stat-value { font-size: 26px; }
  .segment-card__foot { margin-top: 26px; padding-top: 26px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .segment-card__cta { font-size: 17px; }
  .segment-card__url { font-size: 13px; }
  .segment-card--residential .segment-card__url { color: var(--sn-text-on-violet-chip); }
  .segment-card--commercial .segment-card__url { color: var(--sn-text-on-mint-faint); }
}
.segment-card__url { display: none; }
@media (min-width: 900px) { .segment-card__url { display: block; } }

/* ───────────────────────── Cities ────────────────────────────────────────── */
.city-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.city-card {
  background: var(--sn-white); border: 1px solid var(--sn-haze-border); border-radius: var(--sn-radius-xl);
  overflow: hidden; text-decoration: none; color: var(--sn-text); display: block;
}
.city-card__head { padding: 18px 20px; display: flex; align-items: center; }
.city-card__name { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
.city-card__count { margin-left: auto; font-size: 13px; }
.city-card__body { padding: 18px 20px; }
.city-card__stats { display: flex; gap: 22px; }
.city-card__stat-value { font-size: 19px; font-weight: 800; }
.city-card__stat-label { font-size: 13px; color: var(--sn-text-mute-3); margin-top: 2px; }
.city-card__localities { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.locality-chip { font-size: 13px; font-weight: 600; background: var(--sn-haze); border-radius: var(--sn-radius-pill); padding: 6px 12px; color: var(--sn-text); }
.city-card__foot { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--sn-violet); display: flex; align-items: center; gap: 9px; }

.city-card--navi-mumbai .city-card__head { background: var(--sn-violet); }
.city-card--navi-mumbai .city-card__name { color: var(--sn-white); }
.city-card--navi-mumbai .city-card__count { color: var(--sn-text-on-violet-faint); }
.city-card--mumbai .city-card__head { background: var(--sn-ink); }
.city-card--mumbai .city-card__name { color: var(--sn-white); }
.city-card--mumbai .city-card__count { color: var(--sn-text-on-ink-faint); }
.city-card--thane .city-card__head { background: var(--sn-mint); }
.city-card--thane .city-card__name { color: var(--sn-text-on-mint); }
.city-card--thane .city-card__count { color: var(--sn-text-on-mint-faint); }

.city-cta-row { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.city-manager-card {
  background: var(--sn-haze); border: 1px solid var(--sn-haze-border); border-radius: var(--sn-radius-xl); padding: 20px;
}
.city-manager-card__title { font-size: 16px; font-weight: 800; }
.city-manager-card__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-mute-2); }
.city-manager-card__cta { margin-top: 14px; }

@media (min-width: 900px) {
  .city-grid { margin-top: 40px; flex-direction: row; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .city-card__head { height: 156px; padding: 24px 26px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
  /* No locality/manager count yet (geo_master figures aren't wired in) — a
     fixed 156px slab of solid colour with only the city name in it reads as
     unfinished, not "coming soon". Collapse to content height instead;
     restore 156px (drop this class) once real counts are wired in. */
  .city-card__head--bare { height: auto; min-height: 84px; justify-content: flex-start; }
  .city-card__name { font-size: 26px; }
  .city-card__body { padding: 22px 26px 24px; display: flex; flex-direction: column; flex-grow: 1; }
  .city-card__stats { gap: 26px; }
  .city-card__stat-value { font-size: 22px; }
  .city-card__foot { margin-top: auto; padding-top: 20px; }
  .city-cta-row { margin-top: 26px; flex-direction: row; gap: 22px; }
  .city-manager-card { flex-grow: 1; padding: 24px 28px; display: flex; align-items: center; gap: 20px; }
  .city-manager-card__text { flex-grow: 1; }
  .city-manager-card__cta { flex-shrink: 0; margin-top: 0; }
}

/* ───────────────────────── Inventory (listings) ─────────────────────────── */
.listing-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.listing-card {
  background: var(--sn-white); border: 1px solid var(--sn-haze-border); border-radius: var(--sn-radius-xl);
  overflow: hidden; display: flex; flex-direction: column;
}
.listing-card__photo {
  height: 170px; background: var(--sn-violet-photo-tint); display: flex; align-items: flex-end; padding: 12px;
}
.listing-card__badge { font-size: 12px; font-weight: 700; background: var(--sn-white); border-radius: var(--sn-radius-pill); padding: 6px 11px; }
.listing-card__badge--dark { margin-left: auto; background: var(--sn-ink); color: var(--sn-white); }
.listing-card__body { padding: 18px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.listing-card__price { display: flex; align-items: baseline; gap: 7px; }
.listing-card__price-value { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
.listing-card__price-period { font-size: 14px; color: var(--sn-text-mute-3); }
.listing-card__title { margin-top: 7px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.listing-card__meta { margin-top: 5px; font-size: 14px; color: var(--sn-text-mute-3); }
.listing-card__tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.listing-card__tag { font-size: 12px; font-weight: 600; border-radius: var(--sn-radius-pill); padding: 6px 10px; background: var(--sn-haze); }
.listing-card__tag--verified { background: var(--sn-mint); color: var(--sn-text-on-mint); }
.listing-card__manager {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sn-border-hairline);
  display: flex; align-items: center; gap: 9px;
}
.listing-card__avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sn-violet); color: var(--sn-white);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.listing-card__manager-name { font-size: 14px; font-weight: 600; }
.listing-card__visit { margin-left: auto; min-height: 44px; padding: 0 15px; font-size: 14px; }
.listing-grid__foot { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.listing-grid__updated { font-size: 15px; color: var(--sn-text-mute-3); }

@media (min-width: 900px) {
  .listing-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .listing-card__photo { height: 186px; padding: 14px; }
  .listing-card__body { padding: 20px 22px 22px; }
  .listing-card__price-value { font-size: 24px; }
  .listing-card__title { font-size: 17px; }
  .listing-grid__foot { flex-direction: row; align-items: center; gap: 22px; margin-top: 30px; }
}

/* ───────────────────────── Fees ──────────────────────────────────────────── */
.fee-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.fee-card { border-radius: var(--sn-radius-2xl); padding: 22px 20px; display: flex; flex-direction: column; }
.fee-card--rent { background: var(--sn-violet); }
.fee-card--resale { background: var(--sn-haze); border: 1px solid var(--sn-haze-border); }
.fee-card--new { background: var(--sn-mint); }
.fee-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fee-card--rent .fee-card__eyebrow { color: var(--sn-mint); }
.fee-card--resale .fee-card__eyebrow { color: var(--sn-violet); }
.fee-card--new .fee-card__eyebrow { color: var(--sn-text-on-mint-muted); }
.fee-card__value { margin-top: 12px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.fee-card--rent .fee-card__value { color: var(--sn-white); }
.fee-card--new .fee-card__value { color: var(--sn-text-on-mint); }
.fee-card__note { margin-top: 6px; font-size: 15px; }
.fee-card--rent .fee-card__note { color: var(--sn-text-on-violet-faint); }
.fee-card--resale .fee-card__note { color: var(--sn-text-mute-2); }
.fee-card--new .fee-card__note { color: var(--sn-text-on-mint-muted); }
.fee-card__rule { margin-top: 22px; height: 1px; }
.fee-card--rent .fee-card__rule { background: var(--sn-violet-border); }
.fee-card--resale .fee-card__rule { background: var(--sn-haze-border); }
.fee-card--new .fee-card__rule { background: var(--sn-mint-border); }
.fee-card__list { margin-top: 20px; padding-left: 18px; font-size: 15px; line-height: 1.75; display: none; }
.fee-card--rent .fee-card__list { color: var(--sn-text-on-violet-muted); }
.fee-card--resale .fee-card__list { color: var(--sn-text-mute-2); }
.fee-card--new .fee-card__list { color: var(--sn-text-on-mint-muted); }

.fee-extra { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.fee-extra-card {
  border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-xl); padding: 20px; background: var(--sn-white);
}
.fee-extra-card__title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.fee-extra-card__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-mute-2); }
.fee-note-dark {
  background: var(--sn-ink); border-radius: var(--sn-radius-xl); padding: 20px;
}
.fee-note-dark__title { font-size: 16px; font-weight: 800; color: var(--sn-white); letter-spacing: -0.02em; }
.fee-note-dark__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-on-ink-muted); }

@media (min-width: 900px) {
  .fee-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .fee-card { padding: 30px 32px; }
  .fee-card__value { font-size: 34px; }
  .fee-card__note { font-size: 16px; }
  .fee-card__list { display: block; }
  .fee-extra { margin-top: 26px; flex-direction: row; gap: 22px; }
  .fee-extra-card { flex-grow: 1; padding: 26px 30px; }
  .fee-note-dark { width: 360px; flex-shrink: 0; padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
}

/* ───────────────────────── Proof / trust (dark) ─────────────────────────── */
.stat-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat-card { background: var(--sn-ink-soft); border-radius: var(--sn-radius-lg); padding: 20px; }
.stat-card__value { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--sn-white); }
.stat-card__value--mint { color: var(--sn-mint); }
.stat-card__label { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--sn-white); }
.stat-card__since { margin-top: 4px; font-size: 14px; color: var(--sn-text-on-ink-faint); display: none; }

.testimonial-grid { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.testimonial-card { background: var(--sn-ink-soft); border-radius: var(--sn-radius-lg); padding: 22px 20px; display: flex; flex-direction: column; }
.testimonial-card__eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sn-mint); font-weight: 600; }
.testimonial-card__quote { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--sn-white); font-weight: 600; letter-spacing: -0.01em; }
.testimonial-card__person { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; }
.testimonial-card__avatar {
  width: 36px; height: 36px; border-radius: 50%; color: var(--sn-white); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testimonial-card__avatar--owner { background: var(--sn-violet); }
.testimonial-card__avatar--tenant { background: var(--sn-mint); color: var(--sn-text-on-mint); }
.testimonial-card__name { font-size: 14px; font-weight: 700; color: var(--sn-white); }
.testimonial-card__sub { font-size: 13px; color: var(--sn-text-on-ink-faint); }

@media (min-width: 900px) {
  .stat-grid { margin-top: 44px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .stat-card { padding: 28px 26px; }
  .stat-card__value { font-size: 42px; }
  .stat-card__label { font-size: 16px; }
  .stat-card__since { display: block; }
  .testimonial-grid { margin-top: 26px; flex-direction: row; gap: 22px; }
  .testimonial-card { flex-grow: 1; padding: 30px 32px; }
  .testimonial-card__quote { font-size: 21px; }
}

/* ───────────────────────── Managers ─────────────────────────────────────── */
.manager-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.manager-card {
  border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-xl); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
}
.manager-card__avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--sn-violet-photo-tint);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.manager-card__name { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.manager-card__area { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--sn-violet); }
.manager-card__stats { margin-top: 4px; font-size: 14px; color: var(--sn-text-mute-3); }

.manager-cta-card { background: var(--sn-violet); border-radius: var(--sn-radius-2xl); padding: 22px 20px; }
.manager-cta-card__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sn-white); }
.manager-cta-card__body { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--sn-text-on-violet-muted); }
.manager-cta-card .btn { margin-top: 14px; width: 100%; background: var(--sn-white); color: var(--sn-text); }

.manager-promise {
  margin-top: 14px; background: var(--sn-haze); border: 1px solid var(--sn-haze-border); border-radius: var(--sn-radius-xl); padding: 20px;
}
.manager-promise__title { font-size: 16px; font-weight: 800; }
.manager-promise__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-mute-2); }

@media (min-width: 900px) {
  .manager-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  /* Until real manager profiles exist, $managers is empty and the grid holds
     only the CTA card — a 276px card in a 4-column grid leaves ~900px of
     blank white next to it, which reads as broken, not "coming soon". */
  .manager-grid--solo { grid-template-columns: 1fr; }
  .manager-card { flex-direction: column; align-items: stretch; border-radius: var(--sn-radius-2xl); padding: 0; overflow: hidden; }
  .manager-card__avatar { width: 100%; height: 180px; border-radius: 0; }
  .manager-card__info { padding: 20px 22px 22px; }
  .manager-cta-card { display: flex; flex-direction: column; justify-content: space-between; }
  .manager-promise { margin-top: 28px; padding: 26px 30px; display: flex; align-items: center; gap: 30px; }
  .manager-promise__text { flex-grow: 1; }
  .manager-promise__body { max-width: 760px; }
}

/* ───────────────────────── Insights / guides ─────────────────────────────── */
.insight-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.insight-lead {
  border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-xl); overflow: hidden;
  text-decoration: none; color: var(--sn-text); display: block;
}
.insight-lead__band { height: 150px; background: var(--sn-violet); padding: 18px 20px; display: flex; align-items: flex-start; }
.insight-lead__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sn-white); color: var(--sn-text); border-radius: var(--sn-radius-pill); padding: 6px 11px; }
.insight-lead__body { padding: 18px 20px; }
.insight-lead__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.insight-lead__excerpt { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--sn-text-mute-2); }
.insight-lead__meta { margin-top: 12px; font-size: 14px; color: var(--sn-text-mute-3); }
.insight-card { border: 1px solid var(--sn-border-soft); border-radius: var(--sn-radius-lg); padding: 18px 20px; text-decoration: none; color: var(--sn-text); display: flex; gap: 14px; align-items: flex-start; }
.insight-card__thumb { width: 54px; height: 54px; border-radius: 11px; flex-shrink: 0; background: var(--sn-violet-photo-tint); }
.insight-card__thumb--tone-a { background: var(--sn-mint); }
.insight-card__thumb--tone-b { background: var(--sn-violet-photo-tint); }
.insight-card__thumb--tone-c { background: var(--sn-violet-photo-tint); }
.insight-card__thumb--tone-d { background: var(--sn-mint); }
.insight-card__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sn-violet); }
.insight-card__title { margin-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.insight-card__meta { margin-top: 6px; font-size: 14px; color: var(--sn-text-mute-3); }
.insight-locality-band {
  margin-top: 14px; background: var(--sn-haze); border: 1px solid var(--sn-haze-border); border-radius: var(--sn-radius-xl); padding: 20px;
}
.insight-locality-band__title { font-size: 16px; font-weight: 800; }
.insight-locality-band__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sn-text-mute-2); }

@media (min-width: 900px) {
  .insight-grid { margin-top: 40px; flex-direction: row; gap: 22px; }
  .insight-lead { width: 512px; flex-shrink: 0; }
  .insight-lead__band { height: 232px; padding: 24px 26px; align-items: flex-start; justify-content: space-between; }
  .insight-lead__body { padding: 26px 28px 28px; }
  .insight-lead__title { font-size: 26px; }
  .insight-list { flex-grow: 1; display: flex; flex-direction: column; gap: 14px; }
  .insight-locality-band { margin-top: 26px; padding: 24px 28px; display: flex; align-items: center; gap: 24px; }
  .insight-locality-band__text { flex-grow: 1; }
}
.insight-list { display: contents; }
@media (min-width: 900px) { .insight-list { display: flex; } }

/* ───────────────────────── Owner CTA ─────────────────────────────────────── */
.owner-cta { background: var(--sn-violet); padding: var(--sn-section-y) 0; }
.owner-cta__title { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--sn-white); }
.owner-cta__lead { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--sn-text-on-violet-muted); }
.owner-cta__card { margin-top: 18px; background: var(--sn-white); border-radius: var(--sn-radius-xl); padding: 20px; }
.owner-cta__card label { display: block; font-size: 13px; font-weight: 600; color: var(--sn-text-mute-3); margin-bottom: 7px; }
.owner-cta__card input {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-md);
  font-family: inherit; font-size: 16px; color: var(--sn-text);
}
.owner-cta__actions { display: flex; gap: 10px; margin-top: 10px; }
.owner-cta__actions .btn { flex-grow: 1; }
.owner-cta__whatsapp { margin-top: 12px; font-size: 14px; color: var(--sn-text-mute-3); line-height: 1.5; }

@media (min-width: 900px) {
  .owner-cta { padding: 64px 0; }
  .owner-cta .wrap { display: flex; align-items: center; gap: 48px; }
  .owner-cta__text { flex-grow: 1; }
  .owner-cta__title { font-size: 44px; line-height: 1.06; max-width: 640px; }
  .owner-cta__lead { font-size: 18px; max-width: 600px; }
  .owner-cta__card { width: 420px; flex-shrink: 0; margin-top: 0; padding: 28px 30px; }
}

/* ───────────────────────── FAQ ───────────────────────────────────────────── */
.faq { padding: var(--sn-section-y) 0; background: var(--sn-white); }
.faq__title { margin-bottom: 20px; }
.faq-grid { display: flex; flex-direction: column; gap: 18px; }
.faq-item { border-top: 1px solid var(--sn-border-soft); padding-top: 16px; }
.faq-item__q { margin: 0; font-size: 17px; font-weight: 700; }
.faq-item__a { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--sn-text-mute-2); }

@media (min-width: 900px) {
  .faq__title { margin-bottom: 36px; }
  .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
  .faq-item { padding-top: 20px; }
  .faq-item__q { font-size: 18px; }
  .faq-item__a { font-size: 16px; }
}

/* ───────────────────────── Footer ────────────────────────────────────────── */
.site-footer { background: var(--sn-ink); padding: 36px 0 28px; color: var(--sn-white); }
.site-footer__brand { display: flex; align-items: center; gap: 6px; }
.site-footer__brand .brand__word { font-size: 24px; color: var(--sn-white); }
.site-footer__tagline { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--sn-text-on-ink-faint); max-width: 300px; }
.site-footer__contact { margin-top: 20px; font-size: 14px; color: var(--sn-text-on-ink-faint); line-height: 1.7; }
.site-footer__cols { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.footer-col__title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-mint); margin-bottom: 12px; }
.footer-col__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col__links a { color: var(--sn-link-on-ink); }
.footer-col__links a:hover { color: var(--sn-white); }
/* Mobile footer keeps the four links people actually use per column; the
   fifth (desktop-only) returns once there's room for it. */
.footer-col__links a:nth-child(5) { display: none; }
.site-footer__legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--sn-ink-line); font-size: 14px; color: var(--sn-text-on-ink-faint); line-height: 1.7; }
.site-footer__disclaimer { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--sn-text-on-ink-hairline); max-width: 900px; }

@media (min-width: 900px) {
  .site-footer { padding: 56px 0 32px; }
  .site-footer .wrap { display: flex; flex-direction: column; }
  .site-footer__top { display: flex; gap: 56px; }
  .site-footer__about { width: 300px; flex-shrink: 0; }
  .site-footer__brand .brand__word { font-size: 28px; }
  .site-footer__cols { flex-grow: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 0; }
  .footer-col__links a:nth-child(5) { display: flex; }
  .site-footer__legal { margin-top: 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .site-footer__legal-links { display: flex; gap: 24px; }
  .site-footer__legal-links a { color: var(--sn-text-on-ink-faint); }
  .site-footer__legal-links a:hover { color: var(--sn-white); }
  .site-footer__market { margin-left: auto; }
}

/* ───────────────────────── Mobile bottom nav ─────────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: var(--sn-bottom-nav-height);
  background: var(--sn-white); border-top: 1px solid var(--sn-haze-border);
  display: flex; align-items: stretch; padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__item {
  flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-decoration: none; min-height: 44px;
}
.bottom-nav__label { font-size: 12px; font-weight: 500; color: var(--sn-text-mute-3); }
.bottom-nav__item[aria-current="page"] .bottom-nav__label { color: var(--sn-violet); font-weight: 600; }
.bottom-nav__item[aria-current="page"] svg circle,
.bottom-nav__item[aria-current="page"] svg path { stroke: var(--sn-violet); }
body.has-bottom-nav { padding-bottom: var(--sn-bottom-nav-height); }

@media (min-width: 900px) {
  .bottom-nav { display: none; }
  body.has-bottom-nav { padding-bottom: 0; }
}

/* ───────────────────────── Container width clamp ─────────────────────────── */
/*
 * Full-bleed backgrounds, capped content. Every section's direct children sit
 * in a `.wrap`, which carries the horizontal gutter and centers at the design's
 * 1280px canvas width — the design was authored edge-to-edge at 1280, so above
 * that width the gutter would otherwise keep stretching instead of centering.
 */
.wrap {
  max-width: var(--sn-max-width);
  margin: 0 auto;
  padding: 0 var(--sn-gutter);
  box-sizing: border-box;
}

/* ── /list-your-property ─────────────────────────────────────────────────── */
.lp-form { max-width: 560px; margin-top: 28px; }
.lp-group { border: 0; padding: 0; margin: 0 0 28px; }
.lp-group legend {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sn-violet); padding: 0; margin-bottom: 14px;
}
.lp-form .field { margin-bottom: 16px; }
.lp-form .field label,
.lp-form .field__label-as-text {
  display: block; font-size: 14px; font-weight: 600; color: var(--sn-text); margin-bottom: 6px;
}
.lp-form .field input,
.lp-form .field select {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--sn-border); border-radius: var(--sn-radius-sm);
  font-family: inherit; font-size: 16px; color: var(--sn-ink); background: var(--sn-white);
}
.lp-form .field input:focus-visible,
.lp-form .field select:focus-visible { outline: 2px solid var(--sn-violet); outline-offset: 2px; }
.lp-form .field input[aria-invalid="true"],
.lp-form .field select[aria-invalid="true"] { border-color: #B3261E; }
.field__hint { font-weight: 500; color: var(--sn-text-mute-2); }
.field__hint--block { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.field__error { margin: 6px 0 0; font-size: 14px; color: #B3261E; }
.form-alert {
  margin: 20px 0 0; padding: 12px 16px; border-radius: var(--sn-radius-sm);
  background: #FDECEA; color: #7A1C16; font-size: 15px;
}
.lp-radios { display: flex; gap: 10px; }
.lp-radio {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--sn-border); border-radius: var(--sn-radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; background: var(--sn-white);
}
.lp-radio:has(input:checked) { border-color: var(--sn-violet); box-shadow: inset 0 0 0 1px var(--sn-violet); }
.lp-radio input { accent-color: var(--sn-violet); }
/* Off-screen rather than display:none — a bot reading the DOM still finds it. */
.lp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-submit { min-height: 52px; padding: 0 28px; font-size: 16px; }
.lp-small { margin: 12px 0 0; font-size: 14px; color: var(--sn-text-mute-2); }
.lp-done { max-width: 620px; padding: 8px 0 24px; }
.lp-done h1 { font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 14px; }
.lp-done p { font-size: 17px; line-height: 1.6; color: var(--sn-text); margin: 0 0 12px; }
.lp-done__next { color: var(--sn-text-mute-2); }
.lp-done .btn { margin-top: 10px; }
@media (min-width: 900px) {
  .lp-form .field--row { display: flex; gap: 14px; }
  .lp-done h1 { font-size: 40px; }
}
/* Number plus its unit read as one control, so they sit on one line. */
.field-pair { display: flex; gap: 8px; }
.field-pair input { flex: 1 1 auto; }
.field-pair select { flex: 0 0 110px; width: 110px; }