/* Phone home page fonts, self-hosted (SIL Open Font License), latin only.
   Only requested by the phone layout, where these families are used. */
@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/bigshoulders-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/publicsans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   UPSIDE — THE PHONE HOME PAGE: THE MOVE TICKET
   ============================================================
   Phones only. From 701px up none of this shows and the desktop
   home page (search photo + slim cards) is untouched.

   The idea: Upside's buyers and renters often move on orders, to
   a date. The phone home page is their move ticket. Three tap-only
   questions sit in the bottom half of the screen where a thumb
   reaches; the stub at the foot answers at once: how many homes
   fit, and when to tour, offer and have the keys.

   Colour: quiet on purpose. Fog paper, slate ink; the brand red is
   kept to one small stamp and the count, the way an official stamp
   is the only colour on a printed ticket.
   ============================================================ */
[data-mx], .mx-sticky { display: none; }

@media (max-width: 700px) {
  :root {
    --mx-bg: #eceeeb;
    --mx-paper: #f8f8f5;
    --mx-step: #e2e6e2;
    --mx-ink: #1d2622;
    --mx-muted: #56625d;
    --mx-slate: #27312d;
    --mx-slate-2: #2f3a35;
    --mx-on-slate: #eef1ee;
    --mx-on-slate-2: #b9c2bd;
    --mx-stamp: #c8322f;
    --mx-hl-1: #d7e4dc;
    --mx-hl-2: #e7ddd0;
    --mx-hl-3: #d9e1ea;
    --mx-display: "Big Shoulders", "Archivo Narrow", "Arial Narrow", sans-serif;
    --mx-text: "Public Sans", "Inter", system-ui, sans-serif;
    --mx-gut: 16px;
    --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* The phone has its own first screen (the move ticket), so the desktop
     search photo, the gateway and the hero step aside. Every other desktop
     section stays: results, why us, insights, reviews, the call to start
     and the areas, restyled below to sit in the phone's design. */
  body[data-page="home"] .hs,
  body[data-page="home"] .gateway,
  body[data-page="home"] section.hero { display: none !important; }
  body[data-page="home"] .rail { display: none; }

  /* ---------------- the desktop sections, phone-sized ---------------- */
  body[data-page="home"] main > section[data-rail] { padding: 56px 0 !important; }
  body[data-page="home"] main > section[data-rail] .shell { padding-left: var(--mx-gut); padding-right: var(--mx-gut); }
  body[data-page="home"] main > section.section.white { background: var(--mx-paper); }
  body[data-page="home"] main > section[data-rail] + section[data-rail] { border-top: 1px solid rgba(29, 38, 34, 0.07); }
  body[data-page="home"] main > section[data-rail] h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); line-height: 1.04; }
  /* section headers: a title and its link side by side, never wrapped */
  body[data-page="home"] main > section[data-rail] .sec-bar a,
  body[data-page="home"] main > section[data-rail] .link-arrow { white-space: nowrap; }
  /* insights: one photo card, text on top, no side thumbnails */
  body[data-page="home"] .insight { aspect-ratio: auto; height: 400px; width: 100%; }
  body[data-page="home"] .insight__thumbs { display: none; }
  body[data-page="home"] .insight__body { left: 18px; right: 18px; bottom: 70px; margin: 0; }
  body[data-page="home"] .insight__nav { left: 18px; right: 18px; bottom: 16px; }
  /* buttons are thumb-sized */
  body[data-page="home"] main > section[data-rail] .btn { min-height: 46px; }
  /* open houses: a compact row per home (photo left, details right) */
  body[data-page="home"] .oh { background: var(--mx-bg); padding: 56px 0; }
  body[data-page="home"] .oh__in { width: auto; margin: 0 var(--mx-gut); }
  body[data-page="home"] .oh__list { gap: 12px; }
  body[data-page="home"] .oh__link { flex-direction: row; }
  body[data-page="home"] .oh__photo { width: 42%; flex: none; aspect-ratio: auto; min-height: 132px; }
  body[data-page="home"] .oh__photo img { color: transparent; }   /* no alt text while it loads */
  body[data-page="home"] .oh__when { left: 6px; right: 6px; bottom: 6px; padding: 5px 7px; font-size: .74rem; }
  body[data-page="home"] .oh__when b { font-size: .8rem; }
  body[data-page="home"] .oh__own, body[data-page="home"] .oh__virtual { top: 6px; font-size: .62rem; padding: 3px 6px; }
  body[data-page="home"] .oh__own { left: 6px; }
  body[data-page="home"] .oh__virtual { right: auto; left: 6px; }
  body[data-page="home"] .oh__body { padding: 10px 12px; justify-content: center; }
  body[data-page="home"] .oh__price { font-size: 1.05rem; }
  body[data-page="home"] .oh__addr { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .9rem; }
  body[data-page="home"] .oh__actions { padding: 0 12px 12px; }
  body[data-page="home"] { background: var(--mx-bg); }
  body[data-page="home"] .header { background: transparent; }

  [data-mx] { display: block; font-family: var(--mx-text); color: var(--mx-ink); }

  /* ---------------- first screen ---------------- */
  .mx { padding: 88px var(--mx-gut) 0; background: var(--mx-bg); }
  .mx-kicker {
    margin: 0 0 10px;
    font: 700 0.72rem/1.3 var(--mx-text);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx-ink); opacity: 0.72;
    animation: mx-fade 0.6s var(--mx-ease) backwards;
  }
  .mx-title {
    margin: 0;
    font: 800 clamp(3.4rem, 19vw, 5.2rem)/0.86 var(--mx-display);
    letter-spacing: -0.005em; text-transform: uppercase; color: var(--mx-ink);
  }
  .mx-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
  .mx-line > span { display: block; animation: mx-rise 0.9s var(--mx-ease) backwards; }
  .mx-line + .mx-line > span { animation-delay: 0.11s; }
  @keyframes mx-rise { from { transform: translateY(105%); } }
  .mx-lead { margin: 12px 0 0; max-width: 34ch; font-size: 1.02rem; line-height: 1.45; color: var(--mx-ink); animation: mx-fade 0.6s var(--mx-ease) 0.35s backwards; }
  @keyframes mx-fade { from { opacity: 0; transform: translateY(8px); } }

  .mx-photo { position: relative; z-index: 0; margin: 16px 0 0 auto; width: 58%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mx-step); }
  .mx-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) contrast(0.96); animation: mx-drift 18s ease-in-out infinite alternate; }
  @keyframes mx-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateY(-2%); } }

  /* ---------------- the ticket ---------------- */
  .mx-ticket {
    position: relative; z-index: 1;
    margin: -52px 0 0; padding: 22px 0 0;
    background: var(--mx-paper);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(29, 38, 34, 0.14);
    animation: mx-fade 0.7s var(--mx-ease) 0.45s backwards;
  }
  .mx-stamp {
    position: absolute; right: 16px; top: 14px;
    padding: 4px 9px 3px;
    border: 2.5px solid var(--mx-stamp); border-radius: 6px;
    font: 800 0.95rem/1 var(--mx-display); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mx-stamp); opacity: 0.78; transform: rotate(-8deg);
  }
  .mx-row { margin: 0; padding: 0 16px 18px; border: 0; min-width: 0; }
  .mx-row[hidden] { display: none; }
  .mx-row legend { padding: 0 0 8px; font: 600 0.88rem/1.2 var(--mx-text); color: var(--mx-muted); }
  .mx-hint { margin: 8px 0 0; font-size: 0.84rem; color: var(--mx-muted); }

  .mx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--mx-step); }
  .mx-chips { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scroll-padding-inline: 16px; scrollbar-width: none; }
  .mx-chips::-webkit-scrollbar { display: none; }
  .mx-seg label, .mx-chips label { position: relative; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mx-seg input, .mx-chips input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .mx-seg span, .mx-chips span {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 16px; border-radius: 10px;
    font: 600 1rem/1 var(--mx-text); color: var(--mx-ink); white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }
  .mx-seg span { min-height: 44px; }
  .mx-chips span { background: var(--mx-step); }
  .mx-seg input:checked + span, .mx-chips input:checked + span { background: var(--mx-ink); color: #fff; }
  .mx-seg label:active span, .mx-chips label:active span { transform: scale(0.95); }
  .mx-seg input:focus-visible + span, .mx-chips input:focus-visible + span { outline: 3px solid var(--mx-ink); outline-offset: 2px; }
  .mx-date input[type="date"] { display: none; height: 46px; margin-left: 6px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--mx-step); font: 600 1rem var(--mx-text); color: var(--mx-ink); }
  .mx-date { display: flex; align-items: center; }
  .mx-date input[type="radio"]:checked ~ input[type="date"] { display: block; }

  .mx-input {
    width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 10px;
    background: var(--mx-step); font: 500 1.02rem var(--mx-text); color: var(--mx-ink);
  }
  .mx-input:focus { outline: 3px solid var(--mx-ink); outline-offset: 1px; }

  /* the stub, torn off along a row of punched holes */
  .mx-stub {
    position: relative;
    margin-top: 4px; padding: 22px 16px 16px;
    border-radius: 0 0 14px 14px;
    background: var(--mx-slate); color: var(--mx-on-slate);
    -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) top left / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 0, transparent 98%, #000) top right / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) top left / 51% 100% no-repeat,
                  radial-gradient(circle 12px at 100% 0, transparent 98%, #000) top right / 51% 100% no-repeat;
  }
  .mx-stub::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 6px;
    background: radial-gradient(circle 3px, var(--mx-paper) 96%, transparent) 0 0 / 14px 6px repeat-x;
  }
  .mx-count { margin: 0; display: flex; align-items: baseline; gap: 10px; }
  .mx-count b { font: 800 3.4rem/0.9 var(--mx-display); color: #fff; font-variant-numeric: tabular-nums; }
  .mx-count b.is-tick { animation: mx-tick 0.35s var(--mx-ease); }
  @keyframes mx-tick { from { transform: translateY(-30%); opacity: 0.2; } }
  .mx-count span { font: 600 1.05rem/1.2 var(--mx-text); color: var(--mx-on-slate); }
  .mx-plan { margin: 10px 0 14px; font-size: 0.96rem; line-height: 1.45; color: var(--mx-on-slate-2); }
  .mx-plan b { color: #fff; font-weight: 600; }
  .mx-plan .is-tight { color: #f3c2bf; }

  .mx-go {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 56px;
    border: 0; border-radius: 12px; background: #fff; color: var(--mx-ink);
    font: 700 1.06rem/1 var(--mx-text); cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
  }
  .mx-go:active { transform: scale(0.97); background: var(--mx-hl-1); }
  .mx-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

  /* ---------------- four ways in ---------------- */
  .mx-ways { padding: 72px 0 0; background: var(--mx-bg); }
  .mx-h2 { margin: 0 var(--mx-gut) 18px; font: 800 2.6rem/0.9 var(--mx-display); text-transform: uppercase; color: var(--mx-ink); }
  .mx-way {
    display: grid; gap: 6px; padding: 22px var(--mx-gut) 24px;
    background: var(--mx-slate); color: var(--mx-on-slate); text-decoration: none;
    transition: background 0.2s ease;
  }
  .mx-way:nth-of-type(even) { background: var(--mx-slate-2); }
  .mx-way b { font: 800 1.9rem/0.95 var(--mx-display); text-transform: uppercase; color: #fff; }
  .mx-way span { font-size: 1rem; line-height: 1.45; color: var(--mx-on-slate); }
  .mx-way i { font-style: normal; font-size: 0.86rem; color: var(--mx-on-slate-2); }
  .mx-way:active { background: #3a4741; }
  .mx-way:focus-visible { outline: 3px solid var(--mx-ink); outline-offset: -3px; }

  /* the featured homes in between keep their own section, on this page's ground */
  body[data-page="home"] #featured { background: var(--mx-bg); padding-top: 72px; }

  /* ---------------- John ---------------- */
  .mx-john { padding: 72px var(--mx-gut) 24px; background: var(--mx-bg); }
  .mx-john .mx-h2 { margin: 0 0 18px; }
  .mx-story { margin: 0; font-size: 1.25rem; line-height: 1.32; color: var(--mx-muted); }
  .mx-story b { color: var(--mx-ink); font-weight: 700; }
  .mx-story mark { padding: 0 0.1em; color: var(--mx-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .mx-story .m1 { background: var(--mx-hl-1); }
  .mx-story .m2 { background: var(--mx-hl-2); }
  .mx-story .m3 { background: var(--mx-hl-3); }
  .mx-story-cta { display: block; margin-top: 24px; padding: 6px 0; font: 700 1.25rem/1.3 var(--mx-text); color: #fff; text-decoration: none; }
  .mx-story-cta mark { padding: 4px 8px; background: var(--mx-slate); color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ---------------- the tear-off question ---------------- */
  .mx-coupon-wrap { padding: 48px 12px 120px; background: var(--mx-bg); }
  .mx-coupon {
    position: relative; border-radius: 14px; background: var(--mx-step); overflow: hidden;
    -webkit-mask: radial-gradient(circle 14px at 0 112px, transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 14px at 100% 112px, transparent 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 14px at 0 112px, transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle 14px at 100% 112px, transparent 98%, #000) right / 51% 100% no-repeat;
  }
  .mx-coupon__head { height: 112px; padding: 22px 16px 0; box-sizing: border-box; }
  .mx-coupon__head .mx-h2 { margin: 0 0 6px; font-size: 2.2rem; }
  .mx-coupon__head p { margin: 0; font-size: 1rem; color: var(--mx-muted); }
  .mx-coupon__body { position: relative; display: grid; gap: 10px; padding: 22px 16px 18px; }
  .mx-coupon__body::before { content: ""; position: absolute; left: 22px; right: 22px; top: -3px; height: 6px; background: radial-gradient(circle 3px, var(--mx-bg) 96%, transparent) 0 0 / 14px 6px repeat-x; }
  .mx-coupon__body input:not([type="checkbox"]):not([type="hidden"]), .mx-coupon__body textarea {
    width: 100%; min-height: 54px; padding: 14px; border: 0; border-radius: 10px; box-sizing: border-box;
    background: var(--mx-paper); font: 500 1rem/1.3 var(--mx-text); color: var(--mx-ink); resize: vertical;
  }
  .mx-coupon__body input:focus, .mx-coupon__body textarea:focus { outline: 3px solid var(--mx-ink); outline-offset: 1px; }
  .mx-coupon .mx-go { background: var(--mx-ink); color: #fff; }
  .mx-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; line-height: 1.4; color: var(--mx-muted); }
  .mx-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mx-ink); }
  .mx-coupon .form-ok { font-size: 0.95rem; }

  /* ---------------- the answer follows your thumb ---------------- */
  .mx-sticky {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 96;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 58px; padding: 0 8px 0 18px; border-radius: 14px;
    background: var(--mx-slate); color: #fff; text-decoration: none;
    box-shadow: 0 14px 34px rgba(29, 38, 34, 0.3);
    transform: translateY(140%); transition: transform 0.4s var(--mx-ease);
  }
  .mx-sticky.is-on { transform: none; }
  .mx-sticky b { font: 800 1.6rem/1 var(--mx-display); }
  .mx-sticky span { font: 600 0.92rem/1.2 var(--mx-text); color: var(--mx-on-slate-2); }
  .mx-sticky i { display: grid; place-items: center; height: 42px; padding: 0 16px; border-radius: 10px; background: #fff; color: var(--mx-ink); font: 700 0.95rem/1 var(--mx-text); font-style: normal; }
  .mx-sticky:active { transform: scale(0.98); }
  body[data-page="home"] .ai__bubble { bottom: 84px !important; width: 52px !important; height: 52px !important; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mx-line > span, .mx-lead, .mx-ticket { animation: none; }
  .mx-photo img { animation: none; transform: none; }
  .mx-count b.is-tick { animation: none; }
  .mx-sticky { transition: opacity 0.2s ease; }
}

/* the featured homes keep their section; their button follows the quiet palette */
@media (max-width: 700px) {
  body[data-page="home"] #featured .btn--accent { background: var(--mx-ink); color: #fff; box-shadow: none; }
}

/* Below-the-fold home sections: the browser skips laying out and painting
   them until they come near the screen. The intrinsic size keeps the
   scrollbar steady; "auto" remembers the real height once seen. Phones
   only: on desktop the section rail jumps between sections, and estimated
   heights would make those jumps land short. */
@media (max-width: 900px) {
  main > section:nth-of-type(n+5) {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}