@media (max-width: 768px) {
      /* Bottom sheet, not a full-screen takeover - slides up from the
         bottom, leaves the dimmed page visible behind it, and only takes
         as much height as its content needs (capped so it never crowds
         out the status bar). */
      .property-selector-overlay { align-items: flex-end; }
      .property-selector { width: 100%; max-width: 100%; height: auto; max-height: 88vh; border-radius: 20px 20px 0 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; background: #fff; overflow: hidden; position: relative; box-shadow: 0 -16px 44px -8px rgba(58,40,20,.4); }
      .property-selector-overlay.show .property-selector { animation: hpSheetUp .28s ease; }
      @keyframes hpSheetUp { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
      .property-close-btn { display: flex !important; align-items: center; justify-content: center; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: #f5efe8 !important; color: #9a9089; font-size: 20px; line-height: 1; z-index: 6; }
      .selector-content { width: 100% !important; height: auto !important; position: relative; display: block !important; }
      .property-selector-overlay .mobile-header { display: none !important; }
      .mobile-card { position: relative; width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 30px 22px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; max-height: 88vh; }
      .mobile-card::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; background: #ece3d9; border-radius: 99px; }
      .continue-btn { margin-top: 20px; min-height: 52px; border-radius: 11px; }
      .mobile-card h5.mobile-card-title { display: block !important; font-family: var(--lr-font); font-size: 21px; font-weight: 600; margin: 6px 0 18px; color: #23262B; }
      .property-options { display: flex; flex-direction: column; gap: 12px; }
      .property-item label { height: 52px; border-radius: 11px; background: #faf7f3; }
   }
   @media (max-width: 380px) {
      .mobile-card { padding: 26px 18px calc(18px + env(safe-area-inset-bottom)); }
   }
   @media (max-width: 767px) {
      .hp-preview .hp-header { display: none; }
      .hp-preview .hp-header-mobile { border-bottom: 1px solid var(--line);display: block; background: rgba(255,255,255,.94); }
      .hp-preview .hp-app-banner:not(.hp-app-banner-hide) { display: block; }
      .hp-preview .hp-scroll { scrollbar-width: none; }
      .hp-preview .hp-scroll::-webkit-scrollbar { display: none; }

      .hp-preview .hp-hero { padding: 0; }
      .hp-preview .hp-hero-grid { display: block; }
      .hp-preview .hp-hero-copy { padding: 18px 16px 14px; }
      /* Badge/subtitle/stats dropped on mobile - they pushed the search
         card and real content below the fold. The <h1> itself stays
         (just shrunk) rather than being hidden too, since Google indexes
         the mobile DOM first and this is the page's only h1. */
      .hp-preview .hp-hero-badge { display: none; }
      .hp-preview .hp-hero-title { font-size: 24px; line-height: 1.15; margin-top: 0; }
      .hp-preview .hp-hero-sub { display: none; }
      .hp-preview .hp-hero-stats { display: none; }
      .hp-preview .hp-hero-visual { display: none; }

      .hp-preview .hp-search-card { margin: 0 16px; margin-top: -6px; padding: 14px; border-radius: 16px; box-shadow: 0 18px 46px -26px rgba(58,40,20,.4); }
      .hp-preview .hp-search-tabs-row { padding: 0 0 14px; }
      .hp-preview .hp-search-tabs { flex-wrap: nowrap; overflow-x: auto; }
      .hp-preview .hp-tab-btn { font-size: 13.5px; padding: 9px 15px; white-space: nowrap; }
      .hp-preview .hp-search-right { width: 100%; justify-content: space-between; }
      .hp-preview .hp-search-fields { grid-template-columns: 1fr; gap: 10px; padding: 0; }
      .hp-preview .hp-field-select-btn, .hp-preview .hp-field-location { padding: 13px 14px; }
      .hp-preview .hp-search-btn { height: 50px; font-size: 15.5px; }
      /* Horizontal scroll row of short chips, matching the app's
         recyclerViewLastSearch - flex-wrap here (unlike the desktop rule)
         would stack multiple long-ish chips into several rows. */
      .hp-preview .hp-recent-row { flex-wrap: nowrap; overflow-x: auto; padding: 14px 16px 0; font-size: 12px; }
      .hp-preview .hp-recent-row-label { flex: 0 0 auto; }
      .hp-preview .hp-recent-chip { max-width: 200px; padding: 5px 11px; font-size: 12px; }

      .hp-preview .hp-cities-section { padding: 36px 0 0; }
      .hp-preview .hp-cities-section .hp-container { padding: 0 16px; }
      .hp-preview .hp-section-head-center { text-align: left; margin-bottom: 16px; }
      .hp-preview .hp-section-title { font-size: 26px; }
      .hp-preview .hp-section-sub { font-size: 13.5px; margin-top: 6px; }
      .hp-preview .hp-cities-track { padding-left: 16px; padding-right: 16px; }
      .hp-preview .hp-city-card { flex-basis: 150px; }
      .hp-preview .hp-city-card-img { height: 120px; }
      .hp-preview .hp-city-card-overlay { padding: 22px 12px 12px; }
      .hp-preview .hp-city-card-name { font-size: 14px; }

      /* Matches the Android app's own current-requirement card
         (home_dash_layout_new.xml: small label, one truncated title line,
         a compact dot-separated meta line, Edit pinned to the side) rather
         than the desktop version's stacked kicker/full-wrap-title/4-item
         meta row, which ran to ~200px tall here. */
      .hp-preview .hp-requirement-section { padding: 16px 16px 0; }
      .hp-preview .hp-requirement-card { flex-wrap: nowrap; align-items: center; padding: 12px; gap: 10px; }
      .hp-preview .hp-requirement-icon { width: 38px; height: 38px; flex: 0 0 38px; font-size: 17px; border-radius: 11px; }
      .hp-preview .hp-requirement-body { min-width: 0; }
      .hp-preview .hp-requirement-kicker { font-size: 10px; }
      .hp-preview .hp-requirement-title { font-size: 13.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .hp-preview .hp-requirement-meta { gap: 4px 10px; margin-top: 4px; font-size: 10.5px; }
      .hp-preview .hp-requirement-meta span:not(:first-child) { position: relative; padding-left: 12px; }
      .hp-preview .hp-requirement-meta span:not(:first-child)::before { content: '•'; position: absolute; left: 0; color: #cbd0d6; }
      .hp-preview .hp-requirement-edit-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 11.5px; }

      .hp-preview .hp-listings-section { padding: 36px 0 0; }
      .hp-preview .hp-listings-section .hp-container { padding: 0 16px; }
      .hp-preview .hp-section-head-row { align-items: flex-end; margin-bottom: 14px; }
      .hp-preview .hp-section-title { max-width: 220px; line-height: 1.1; }
      .hp-preview .hp-listings-section .hp-section-title { font-size: 25px; }
      .hp-preview .hp-see-all { font-size: 13px; white-space: nowrap; }
      .hp-preview .hp-listings-track { padding-left: 16px; padding-right: 16px; }
      .hp-preview .hp-prop-card { flex-basis: 272px; }
      .hp-preview .hp-prop-img-wrap { height: 160px; }
      .hp-preview .hp-prop-body { padding: 13px 14px 15px; }
      .hp-preview .hp-prop-price { font-size: 18px; }
      .hp-preview .hp-scroll-nav { display: none; }
      /* Mobile card in the design drops the photo-count badge, PID line
         and the "Listed by / Contact" footer entirely - just price,
         title, location and specs. */
      .hp-preview .hp-prop-photos { display: none; }
      .hp-preview .hp-prop-pid { display: none; }
      .hp-preview .hp-prop-footer { display: none; }

      .hp-preview .hp-browse-section { padding: 36px 16px 0; }
      .hp-preview .hp-browse-title { font-size: 25px; margin-bottom: 6px; }
      .hp-preview .hp-browse-sub { font-size: 13.5px; margin-bottom: 16px; }
      .hp-preview .hp-city-chips { flex-wrap: nowrap; overflow-x: auto; }
      .hp-preview .hp-type-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .hp-preview .hp-type-tile { height: 140px; padding: 14px; border-radius: 14px; }
      .hp-preview .hp-type-tile-title { font-size: 14px; }
      .hp-preview .hp-type-tile-ph { width: 56px; height: 56px; border-radius: 10px; }
      .hp-preview .hp-services-grid { display: flex; flex-direction: column; gap: 14px; }
      .hp-preview .hp-service-card { height: 120px; }
      .hp-preview .hp-service-card-fade { background: linear-gradient(100deg,#fff 32%,rgba(255,255,255,0) 68%); }
      .hp-preview .hp-service-card-title { padding: 22px 0 0 22px; font-size: 16px; max-width: 120px; }
      .hp-preview .hp-budget-grid { display: flex; gap: 12px; overflow-x: auto; }
      .hp-preview .hp-budget-tile { flex: 0 0 130px; padding: 18px 16px; border-radius: 14px; }
      .hp-preview .hp-budget-amt { font-size: 30px; }
      .hp-preview .hp-budget-label { font-size: 11px; }
      .hp-preview .hp-budget-count { font-size: 12px; }

      .hp-preview .hp-assist-section { padding: 36px 16px 0; }
      .hp-preview .hp-assist-card { padding: 26px 22px; border-radius: 18px; }
      .hp-preview .hp-assist-glow { right: -60px; top: -60px; width: 180px; height: 180px; }
      .hp-preview .hp-assist-top { display: block; }
      .hp-preview .hp-assist-label { font-size: 11.5px; }
      .hp-preview .hp-assist-heading { font-size: 25px; margin-top: 10px; max-width: none; }
      .hp-preview .hp-assist-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
      .hp-preview .hp-assist-step { background: none; border: none; padding: 0; display: flex; gap: 14px; align-items: flex-start; }
      .hp-preview .hp-assist-num { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
      .hp-preview .hp-assist-step-title { margin: 0; font-size: 15px; }
      .hp-preview .hp-assist-step-body { margin-top: 3px; font-size: 13px; }
      .hp-preview .hp-assist-btn { position: static; width: 100%; text-align: center; margin-top: 22px; display: block; }

      .hp-preview .hp-postcta-section { padding: 36px 16px 0; }
      .hp-preview .hp-postcta-card { display: block; padding: 24px 22px; border-radius: 18px; }
      .hp-preview .hp-postcta-photo { display: none; }
      .hp-preview .hp-postcta-title { display: none; }
      .hp-preview .hp-postcta-sub { display: none; }
      .hp-preview .hp-postcta-mobile-title { display: block; font-family: var(--lr-font); font-weight: 600; font-size: 24px; margin: 0; letter-spacing: -0.3px; line-height: 1.15; }
      .hp-preview .hp-postcta-mobile-sub { display: block; color: #5f6570; font-size: 14px; margin: 9px 0 0; }
      .hp-preview .hp-postcta-actions { flex-direction: column; gap: 10px; margin-top: 18px; }
      .hp-preview .hp-postcta-btn, .hp-preview .hp-postcta-whatsapp { width: 100%; text-align: center; justify-content: center; }

      .hp-preview .hp-tools-section { padding: 36px 16px 0; }
      .hp-preview .hp-tools-title { font-size: 25px; margin-bottom: 16px; }
      .hp-preview .hp-tools-sub { display: none; }
      .hp-preview .hp-tools-grid { display: flex; flex-direction: column; gap: 12px; }
      .hp-preview .hp-tool-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
      .hp-preview .hp-tool-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
      .hp-preview .hp-tool-body-wrap { flex: 1; }
      .hp-preview .hp-tool-title { font-size: 15.5px; margin: 0; }
      .hp-preview .hp-tool-body { font-size: 12.5px; margin-top: 2px; }
      .hp-preview .hp-tool-cta { display: none; }
      .hp-preview .hp-tool-arrow { display: inline-block; color: #FC4A0A; font-weight: 700; font-size: 18px; }

      .hp-preview .hp-app-section { padding: 36px 16px 0; }
      .hp-preview .hp-app-card { display: block; padding: 26px 22px; border-radius: 18px; }
      .hp-preview .hp-app-mockup { display: none; }
      .hp-preview .hp-app-badge { font-size: 11px; padding: 4px 11px; }
      .hp-preview .hp-app-title { font-size: 24px; margin-top: 14px; }
      .hp-preview .hp-app-sub { font-size: 13.5px; margin-top: 8px; line-height: 1.55; }
      .hp-preview .hp-app-stores { margin-top: 18px; }
      .hp-preview .hp-app-store-btn { padding: 10px 16px; font-size: 12.5px; }

      .hp-preview .hp-seo-section { padding: 36px 16px 0; }
      .hp-preview .hp-seo-tabs { margin-bottom: 16px; }
      .hp-preview .hp-video-section { padding: 36px 0 0; }
      .hp-preview .hp-video-section .hp-container { padding: 0 16px; }
      .hp-preview .hp-video-title { font-size: 25px; }
      .hp-preview .hp-video-sub { margin-bottom: 20px; }
      .hp-preview .hp-video-frame { height: 220px; margin: 0 16px; max-width: none; border-radius: 15px; }
      .hp-preview .hp-video-play { width: 56px; height: 56px; font-size: 20px; }
      /* Old homepage's mobile pattern for this section (.top-cities-cards in
         styles.css) - same category cards as desktop (Flat/House/PG/etc,
         each its own heading + link list), laid out as a horizontally
         scrolling row of fixed-width cards instead of the desktop 4-column
         grid. touch-action/user-select as usual so a swipe is unambiguously
         a scroll, not a text-selection drag. */
      .hp-preview .hp-seo-grid {
         display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
         touch-action: pan-x; user-select: none; -webkit-user-select: none; padding-bottom: 4px;
      }
      .hp-preview .hp-seo-grid > div {
         flex: 0 0 240px; max-width: 80vw; background: #fff; border: 1px solid #ececec;
         border-radius: 12px; padding: 16px; box-sizing: border-box;
      }
      .hp-preview .hp-seo-title { font-size: 25px; margin-bottom: 14px; }

      .hp-preview .hp-testi-section { padding: 36px 0 0; }
      .hp-preview .hp-testi-head { text-align: left; padding: 0 16px; margin-bottom: 14px; }
      .hp-preview .hp-testi-title { font-size: 25px; }
      .hp-preview .hp-testi-grid { display: flex; gap: 14px; overflow-x: auto; padding: 0 16px; }
      .hp-preview .hp-testi-card { flex: 0 0 290px; padding: 20px; border-radius: 15px; }
      .hp-preview .hp-testi-quote { font-size: 14px; margin: 12px 0 16px; }
      .hp-preview .hp-testi-avatar { width: 40px; height: 40px; flex-basis: 40px; }
      .hp-preview .hp-testi-name { font-size: 13.5px; }
      .hp-preview .hp-testi-role { font-size: 12px; }

      .hp-preview .hp-footer { margin-top: 40px; padding: 32px 16px 24px; }
      .hp-preview .hp-footer-grid { display: block; }
      .hp-preview .hp-footer-logo { height: 34px; }
      .hp-preview .hp-footer-tagline { font-size: 13.5px; margin-top: 14px; max-width: none; }
      /* Design's mobile footer only shows Company + Explore side by side
         and drops Legal entirely - but Terms/Privacy/Sitemap/FAQ are real
         legal links that need to stay reachable, so Legal is kept here
         too (wraps to its own row in the 2-column grid) rather than
         silently dropped to match the mockup exactly. */
      .hp-preview .hp-footer-cols-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
      .hp-preview .hp-footer-contact-col { margin-top: 24px; padding-top: 20px; border-top: 1px solid #2c2926; }
      .hp-preview .hp-footer-col-head { font-size: 13.5px; margin-bottom: 12px; }
      .hp-preview .hp-footer-links a { font-size: 13px; }
      .hp-preview .hp-footer-bottom { text-align: center; font-size: 11.5px; margin-top: 18px; }

      .hp-preview .hp-bottom-nav { display: flex; position: sticky; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid #f0eae3; padding: 8px 6px 22px; }
      .hp-preview .hp-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: transparent; cursor: pointer; padding: 6px 0; color: #9a9089; text-decoration: none; }
      .hp-preview .hp-bottom-nav-item.active { color: #FC4A0A; }
      .hp-preview .hp-bottom-nav-item i { font-size: 20px; line-height: 1; }
      .hp-preview .hp-bottom-nav-item span { font-size: 10.5px; font-weight: 600; }
   }

   /* ================= LISTING PAGE (.lp-preview) mobile overrides ================= */
   @media (max-width: 767.98px) {
      /* The site-wide mobile header (logo + profile icon, from
         header.blade.php's .hp-header-mobile) is redundant here - this
         page's own mobile header below already has a back button, so the
         site logo bar above it just eats space for nothing. It isn't a
         descendant of .lp-preview (header.blade.php renders before
         @yield('content')), so it can't be scoped the normal way -
         body:has() reaches it without touching any other page. */
      body:has(.lp-preview) .hp-header-mobile { display: none; }

      /* Sticky mobile header (back button + search pill + sort/filter row)
         that hides on scroll-down and reappears on scroll-up - see the
         scroll listener at the bottom of listing.blade.php that toggles
         .lp-header-hidden. Sits well below the mobile sheets' backdrop
         (z-index 88) and sheets (z-index 90) so an open sheet always
         covers it. */
      .lp-preview .lp-mobile-header {
         position: sticky; top: 0; z-index: 45;
         transition: transform .25s ease;
      }
      .lp-preview .lp-mobile-header.lp-header-hidden { transform: translateY(-100%); }

      /* Same hide-on-scroll-down treatment for the shared bottom tab bar,
         scoped to this page only (body:has(), since .hp-bottom-nav comes
         from footer.blade.php, not a descendant of .lp-preview). */
      body:has(.lp-preview) .hp-bottom-nav {
         transition: transform .25s ease;
      }
      body:has(.lp-preview) .hp-bottom-nav.lp-navbar-hidden { transform: translateY(100%); }

      /* Filter and Premium Filter are now two independent sheets
         (#mobileFilterSheet / #mobilePremiumSheet) instead of one
         combined sheet, each with its own "Show X properties" footer
         pinned to the bottom - the scrollable area is .lp-sheet-body,
         not the sheet itself, so the footer stays fixed while the
         filter list scrolls underneath it. */
      .lp-preview .filter-sidebar.show {
         /* styles.css has an unconditional `.filter-sidebar {
            margin-bottom: 20px; ... }` at max-width:991.98px (from the
            old desktop-stacks-to-mobile layout) - left a 20px gap
            between the sheet's bottom edge and the true screen bottom,
            exposing the backdrop through it. Neither of our other
            .filter-sidebar rules touch margin, so it was never
            contested until now. */
         margin-bottom: 0;
         position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-width: 100%;
         /* Plain vh resolves against the "large" viewport (as if the
            browser's address bar were hidden) - on a real phone with the
            toolbar visible, that made this fixed/bottom-anchored sheet
            taller than the actually-visible screen, pushing the footer
            button below the fold. dvh tracks the real, current viewport
            so the footer always stays on-screen; vh is just the fallback
            for browsers that don't support dvh yet. */
         max-height: 82vh;
         max-height: 82dvh;
         z-index: 90; border-radius: 18px 18px 0 0;
         box-shadow: 0 -14px 40px -18px rgba(0,0,0,.5);
         /* styles.css has `.filter-sidebar.show { display: block !important; }`
            with no scoping - only !important can win against !important. */
         display: flex !important; flex-direction: column; overflow: hidden;
      }
      .lp-preview .filter-sidebar .lp-sheet-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
      .lp-preview .filter-sidebar .filter-card { border: none; border-radius: 18px 18px 0 0; }
      .lp-preview .filter-sidebar .lp-sheet-footer {
         flex: 0 0 auto; padding: 12px 18px; border-top: 1px solid #eee; background: #fff;
         display: flex; gap: 10px;
         /* keeps the buttons clear of the home-indicator / gesture bar on notched phones */
         padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }
      /* .lp-sidebar-col (Filter/Premium Filter/Quick Links wrapper) is
         empty on mobile - Filter/Premium Filter render as fixed-position
         sheets and Quick Links is desktop-only - but it was still a
         wrapped Bootstrap grid row, so its own row-gap added ~32px of
         dead space between the results heading and the first card that
         desktop (where the sidebar sits beside the results, not
         wrapped) never had. display:contents drops the wrapper from
         layout entirely without touching its children's own
         display/position (the sheets are unaffected).
         styles.css's `.main-content .row.g-3 > [class*="col-"] {
         display:flex; ...}` outguns this rule on specificity alone
         (four class/attribute selectors vs our two) - !important is
         the only way to still win here. */
      .lp-preview .lp-sidebar-col { display: contents !important; }
   }

   /* ================= PROPERTY DETAIL PAGE (.pd-preview) mobile overrides ================= */
   @media (max-width: 767.98px) {
      /* Same reasoning as .lp-preview above: the site-wide mobile header
         (logo + profile icon) just eats space above this page's own
         content with nothing it adds here. Not a descendant of
         .pd-preview (header.blade.php renders before @yield('content')),
         so body:has() is the only way to reach it. */
      body:has(.pd-preview) .hp-header-mobile { display: none; }

      /* The site-wide bottom tab bar (Home/Search/Saved/Post/Account)
         was stacking underneath this page's own sticky Contact Owner
         bar - two competing bottom bars looked broken and pushed the
         real CTA further down. This page has its own primary action
         (.pd-sticky-mobile), so the generic nav is redundant here.
         Not a descendant of .pd-preview (footer.blade.php renders after
         @yield('content')), so body:has() is the only way to reach it. */
      body:has(.pd-preview) .hp-bottom-nav { display: none; }
   }

   /* Breakpoints below (860px/480px) match the page's own design mockup
      grid collapses, not the site's usual 767.98px - kept as authored. */
   @media (max-width: 860px) {
      .pd-preview .pd-container { padding-left: 16px; padding-right: 16px; }
      .pd-preview .pd-gallery-grid { grid-template-columns: 1fr; }
      .pd-preview .pd-quickfacts-grid { grid-template-columns: repeat(2,1fr); }
      .pd-preview .pd-furnishing-grid { grid-template-columns: repeat(2,1fr); }
      .pd-preview .pd-amenities-grid { grid-template-columns: repeat(2,1fr); }
      .pd-preview .pd-owner-grid { grid-template-columns: 1fr; }
      .pd-preview .pd-hide-mobile { display: none !important; }
      .pd-preview .pd-title-price { font-size: 26px !important; }
      /* Always fixed at the bottom on mobile now (was previously hidden
         until scrolled past the hero, toggled by JS on scroll) - the
         .pd-sticky-visible class/JS listener has been removed. */
      .pd-preview .pd-sticky-mobile { display: flex !important; }
      /* Keeps page content clear of the fixed sticky contact bar - was a
         bare `body { padding-bottom:78px }` in the page's own inline
         <style> before this moved here; scoped with :has() now that it
         lives in a file shared by every page. */
      body:has(.pd-preview) { padding-bottom: 78px; }
   }

   /* ================= BUY PROPERTY DETAIL PAGE (.pdv2-page) mobile overrides =================
      Breakpoints below (900px/560px/760px/480px/640px) match this page's own
      design mockup grid collapses, not the site's usual 767.98px - kept as
      authored, same as .pd-preview above. */
   @media (max-width: 767.98px) {
      /* The site-wide bottom tab bar (Home/Search/Saved/Post/Account) is
         rendered unconditionally by footer.blade.php outside this page's
         own markup, so body:has() is the only way to reach it - it was
         colliding with this page's own mobile-cta bar. The site-wide
         mobile header (logo + profile icon) is kept - this page's own
         back button sits directly below it, not a replacement for it. */
      body:has(.pdv2-page) .hp-bottom-nav { display: none; }
   }
   @media (max-width: 900px) {
      .pdv2-page .ov-card { grid-template-columns: 1fr; }
      .pdv2-page .ov-photo { height: 280px; }
      .pdv2-page .loc-adv-cols { grid-template-columns: 1fr 1fr; }
      .pdv2-page .mini-map2 { grid-column: 1/-1; height: 160px; }
   }
   @media (max-width: 760px) {
      .pdv2-page .rate-chips { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .pdv2-page .quickfacts-row { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 16px; }
   }
   @media (max-width: 640px) {
      .pdv2-page .mobile-subheader { display: flex; align-items: center; gap: 10px; padding: 12px 20px 0; background: #fff; }
      .pdv2-page .price-actions { display: none; }
      .pdv2-page .pdv2-lightbox-close { width: 36px; height: 36px; top: 14px; right: 14px; font-size: 18px; }
      .pdv2-page .pdv2-lightbox-arrow { width: 38px; height: 38px; font-size: 22px; }
      .pdv2-page .pdv2-lightbox-arrow.prev { left: 10px; }
      .pdv2-page .pdv2-lightbox-arrow.next { right: 10px; }

      .pdv2-page .price-row .persqft { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .pdv2-page .title-block .loc { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .pdv2-page .pill-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
      .pdv2-page .pill-row::-webkit-scrollbar { display: none; }
      .pdv2-page .pill-row span { flex: none; white-space: nowrap; }
      .pdv2-page .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; gap: 10px; box-shadow: 0 -10px 30px -12px rgba(18,18,26,.2); }
      .pdv2-page .mobile-cta .btn { flex: 1; padding: 13px 10px; font-size: 13.5px; }
      .pdv2-page.has-mobile-cta { padding-bottom: 76px; }

      .pdv2-page .price-row { margin-top: 16px; }
      .pdv2-page .title-block { margin-top: 12px; }
      .pdv2-page .tabs { gap: 22px; margin-top: 16px; }
      .pdv2-page .tabs button { padding: 11px 2px; }
      .pdv2-page .ov-card { margin-top: 16px; padding: 14px; gap: 14px; }
      .pdv2-page .chip-scroll { margin-top: 16px; }
      .pdv2-page .why-block { margin-top: 20px; }
      .pdv2-page .why-block h4 { margin-bottom: 10px; }
      .pdv2-page .quickfacts-row { margin-top: 18px; padding-top: 14px; gap: 14px 16px; }
      .pdv2-page .about-head { margin: 24px 0 12px; font-size: 17px; }
      .pdv2-page .desc-box, .pdv2-page .icon-strip, .pdv2-page .amen-box, .pdv2-page .loc-adv-box, .pdv2-page .about-loc-box, .pdv2-page .reviews-box { padding: 16px; }
      .pdv2-page .similar-head { margin-top: 28px; margin-bottom: 14px; }
      .pdv2-page .broker-panel { margin-top: 16px; padding: 18px; gap: 14px; }
      .pdv2-page .report-inline { margin-top: 16px; padding: 14px 16px; }
      .pdv2-page .rate-chips { gap: 8px; margin-bottom: 14px; }
   }
   @media (max-width: 560px) {
      .pdv2-page .loc-adv-cols { grid-template-columns: 1fr; }
   }
   @media (max-width: 480px) {
      .pdv2-page .spec-grid2 { grid-template-columns: 1fr 1fr; }
      .pdv2-page .icon-strip { gap: 20px; justify-content: space-between; }
      .pdv2-page .icon-strip .it { width: 80px; }
      .pdv2-page .amen-grid2 { gap: 20px; justify-content: space-between; }
   }

   /* ================= BROKER/OWNER CONTACT DETAILS PAGE (.bcp-page) mobile overrides ================= */
   @media (max-width: 767.98px) {
      /* Same reasoning as .pdv2-page above: the site-wide bottom tab bar
         (Home/Search/Saved/Post/Account) is rendered unconditionally by
         footer.blade.php outside this page's own markup, so body:has()
         is the only way to reach it - it collides with this page's own
         layout on mobile otherwise. */
      body:has(.bcp-page) .hp-bottom-nav { display: none; }

      /* Contact-details page only: prevent its Bootstrap pb-5 and the
         shared footer margin from stacking into a white pre-footer gap. */
      .bcp-page.pb-5 { padding-bottom: 0 !important; }
      .hp-preview .bcp-page + .hp-footer { margin-top: 0; }
   }
   @media (max-width: 960px) {
      .bcp-page .detail-grid { grid-template-columns: 1fr; }
      .bcp-page .prop-summary { position: static; }
   }
   @media (max-width: 640px) {
      .bcp-page .bcp-breadcrumb { padding-top: 12px; }
      .bcp-page .contact-methods { grid-template-columns: 1fr; }
      .bcp-page .contact-cta { gap: 12px; }
      .bcp-page .contact-cta .btn { gap: 7px; padding: 13px 10px; font-size: 14px; white-space: nowrap; }
      .bcp-page .back-row { padding: 16px 0; }
   }

   /* post-your-property-preview responsive rules */
   @media (max-width: 960px) {
      .ppv-hero { grid-template-columns: minmax(0, 1fr); padding: 32px 5vw 96px; gap: 40px; }
      .ppv-hero-title { font-size: 34px; }
      .ppv-quickpost-wrap { position: relative; top: 0; }
      .ppv-quickpost-card { padding: 18px; }
      .ppv-quickpost-title { font-size: 27px; }
      .ppv-chip-row, .ppv-phone-row, .ppv-phone-hint { padding-left: 0; }
      .ppv-chip-row label { padding: 8px 12px; font-size: 13px; }
      .ppv-section { padding: 24px 5vw; }
      section.ppv-section + section.ppv-section { padding-top: 0; }
      .ppv-heading { font-size: 27px; }
      .ppv-subheading { margin-bottom: 24px; }
      .ppv-steps3-grid { gap: 4px; }
      .ppv-step3-item { padding: 8px 20px; }
      .ppv-step3-icon { margin-bottom: 10px; }
      .ppv-how-row, .ppv-how-row.ppv-how-reverse { grid-template-columns: minmax(0, 1fr); }
      .ppv-how-row.ppv-how-reverse .ppv-how-media { order: 0; }
      .ppv-locations-section { padding: 40px 5vw 0; }
      .ppv-testimonial-card { width: 82vw; }
      .ppv-mobile-cta { display: flex; }
      .ppv-page { padding-bottom: 0; }
      /* Same body:has() fix as the desktop rule in style1.css - the inline
         <script> block between .ppv-mobile-cta and .hp-footer in the DOM
         broke the old adjacent-sibling selector, leaving the site-wide
         footer margin-top unset here and creating a large gap on mobile. */
      body:has(.ppv-page) .hp-footer {
         margin-top: 0;
         padding-bottom: 100px;
      }
   }

/* ==================================================================
   Account pages (Profile / Billing History / Wishlist) - redesign
   Scoped under .pf-page so these rules never affect any other page.
   ================================================================== */

/* ---- Profile / Billing / Wishlist account pages - shared ---- */
@media (max-width:960px){.pf-page .pf-grid{grid-template-columns:1fr;}}

@media (max-width:960px){.pf-page .pf-side{position:static;}}


@media (max-width:640px){
  .pf-page .pf-main-head{padding-left:20px;padding-right:20px;}
}

/* ---- Profile page ---- */
@media (max-width:760px){.pf-page .field-grid{grid-template-columns:1fr;}}


@media (max-width:640px){
  .pf-page .pf-form{padding-left:20px;padding-right:20px;}
}

/* ---- Billing History page ---- */
@media (max-width:820px){
  .pf-page .plan-hero{flex-direction:column;align-items:stretch;gap:26px;padding:28px 24px;}
  .pf-page .plan-hero-divider{width:100%;height:1px;}
}

@media (max-width:900px){.pf-page .bh-table-head{display:none;}}

@media (max-width:900px){
  .pf-page .bh-row{
    grid-template-columns:1fr 1fr;grid-template-areas:
      "paid end"
      "amount plan"
      "status refund"
      "action action";
    row-gap:14px;padding:20px;
  }
  .pf-page .bh-cell.paid{grid-area:paid;} .pf-page .bh-cell.end{grid-area:end;}
  .pf-page .bh-cell.amount{grid-area:amount;} .pf-page .bh-cell.plan{grid-area:plan;}
  .pf-page .bh-cell.status{grid-area:status;} .pf-page .bh-cell.refund{grid-area:refund;}
  .pf-page .bh-cell.action{
    grid-area:action;justify-self:stretch;
    margin-top:2px;padding-top:14px;border-top:1px solid var(--line);
  }
  .pf-page .bh-cell.action .invoice-btn{width:100%;justify-content:center;padding:12px 16px;}
  .pf-page .refund-cell{padding-right:0;}
  .pf-page .refund-bar{margin-right:0;max-width:none;}
}

@media (max-width:900px){.pf-page .bh-cell-label{display:block;}}


@media (max-width:640px){
  .pf-page .pf-main-head{padding:20px;}
  .pf-page .filter-group{flex-wrap:nowrap;width:100%;}
  .pf-page .filter-group .filter-select{flex:1;min-width:0;padding:9px 10px;font-size:12.5px;}
}

@media (max-width:440px){
  .pf-page .rd-head{padding:22px 20px;}
  .pf-page .rd-body{padding:6px 20px 18px;}
  .pf-page .rd-foot{padding:0 20px 20px;}
  .pf-page .rd-item{gap:12px;padding:14px 0;}
  .pf-page .rd-label{white-space:nowrap;font-size:12px;}
  .pf-page .rd-value{font-size:13px;}
}

/* ---- Wishlist page ---- */
@media (max-width:980px){.pf-page .wl-grid{grid-template-columns:repeat(2,1fr);}}

@media (max-width:640px){.pf-page .wl-grid{grid-template-columns:1fr;}}


@media (max-width:640px){
  .pf-page .wl-head{flex-direction:column;align-items:flex-start;}
}

/* ==================================================================
   Locality pages (Home / City / Detail) - redesign, responsive rules
   Scoped under .locality-page so these rules never affect any other page.
   ================================================================== */

/* ---- from common.css ---- */
@media (max-width:900px){.locality-page .faq-wrap{grid-template-columns:minmax(0,1fr);}}
@media (max-width:960px){.locality-page .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){
  .locality-page .nav-inner{padding:12px 0;}
  .locality-page .nav-right{gap:8px;}
  .locality-page .nav-right .btn-primary{padding:10px 16px !important;font-size:12.5px !important;}
  .locality-page .icon-btn{width:38px;height:38px;}
  .locality-page .section{padding:26px 0;}
  .locality-page .section-head{margin-bottom:20px;}
  .locality-page .faq-q{padding:16px 18px;font-size:14px;}
  .locality-page .faq-item{margin-bottom:10px;}
  .locality-page .cta{padding:36px 22px;}
  .locality-page .cta-actions{flex-direction:column;align-items:stretch;}
  .locality-page .cta-actions .btn{width:100%;}
  .locality-page .insights-panel{padding:20px;}
  .locality-page .side-stack{gap:12px;}
  .locality-page .side-panel{padding:16px;}
  .locality-page .carousel-arrows{display:none;}
  .locality-page .amenity-card, .locality-page .nearby-city-card{flex-basis:78%;}
  .locality-page .amenity-tabs{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:8px;padding:2px 18px 6px;
  }
  .locality-page .amenity-tabs::-webkit-scrollbar{display:none;}
  .locality-page .amenity-tabs div{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;padding:10px 18px;font-size:13px;}

  .locality-page .am-rail{
    -webkit-overflow-scrolling:touch;
    gap:12px;margin:0 -16px;padding:2px 16px 10px;scroll-padding-left:16px;
  }
  .locality-page .am-rail::-webkit-scrollbar{display:none;}
  .locality-page .am-card{flex-basis:72%;}
  .locality-page .am-media{height:140px;}
  .locality-page .am-panel{border-radius:16px;}
  .locality-page .am-tabbar{-webkit-overflow-scrolling:touch;}
  .locality-page .am-tab{padding:14px 18px;font-size:13px;}
  .locality-page .am-tab::after{left:14px;right:14px;}
  .locality-page .am-panel-body{padding:18px 16px 8px;}
  .locality-page .am-panel-head{margin-bottom:14px;}
}

/* ---- from home.css ---- */
@media (max-width:900px){.locality-page .step-arrow{display:none;}}
@media (max-width:960px){
  .locality-page .why-grid{grid-template-columns:repeat(2,1fr);}
  .locality-page .steps{grid-template-columns:1fr;}
  .locality-page .two-col{grid-template-columns:1fr;}
  .locality-page .stats-strip{grid-template-columns:repeat(2,1fr);}
  .locality-page .stats-strip div:nth-child(2){border-right:none;}
}
@media (max-width:640px){
  .locality-page .search-bar{flex-direction:column;border-radius:24px;}
  .locality-page .search-divider{display:none;}
  .locality-page .search-field{padding:14px 18px;}
  .locality-page .search-btn{margin:6px;padding:16px;justify-content:center;}

  .locality-page .why-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    gap:14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 6px;
    margin:0 -24px;
    padding-left:24px;
    padding-right:24px;
  }
  .locality-page .why-grid::-webkit-scrollbar{display:none;}
  .locality-page .why-card{flex:0 0 80%;scroll-snap-align:start;}
  .locality-page .why-slider-hint{
    display:flex;justify-content:center;gap:6px;margin-top:14px;
  }
  .locality-page .why-slider-hint span{
    width:6px;height:6px;border-radius:50%;background:var(--line);
    transition:width .2s ease, background .2s ease, border-radius .2s ease;
  }
  .locality-page .why-slider-hint span.active{background:var(--brand-1);width:18px;border-radius:4px;}
}
@media (min-width:641px){
  .locality-page .why-slider-hint{display:none;}
}

/* ---- from city.css ---- */
@media (max-width:860px){
  .locality-page .locality-hero{grid-template-columns:1fr;}
  .locality-page .hero-photo, .locality-page .hero-map{height:220px;}
}
@media (max-width:960px){.locality-page .page-layout{grid-template-columns:1fr;}}
@media (max-width:640px){.locality-page .stat-strip{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){
  .locality-page .hero-map{display:none;}
  .locality-page .hero-photo{height:260px;}

  .locality-page .overview-card{padding:20px;}
  .locality-page .overview-top{flex-direction:column;align-items:flex-start;}

  .locality-page .sector-card{padding:18px;}
  .locality-page .sector-top{flex-direction:column;}
  .locality-page .sector-meta{gap:18px;}
  .locality-page .sector-actions{flex-direction:column;}
  .locality-page .sector-actions .btn{width:100%;}
}

/* ---- from detail.css ---- */
@media (max-width:860px){.locality-page .locality-hero{grid-template-columns:minmax(0,1fr);}.locality-page .hero-photo, .locality-page .hero-map{height:220px;}}
@media (max-width:960px){.locality-page .page-layout{grid-template-columns:minmax(0,1fr);}}
@media (max-width:640px){.locality-page .fact-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.locality-page .badge-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.locality-page .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:960px){.locality-page .explore-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:640px){.locality-page .explore-grid{grid-template-columns:minmax(0,1fr);}}
@media (max-width:760px){.locality-page .two-col{grid-template-columns:minmax(0,1fr);}}
@media (max-width:960px){.locality-page .map-layout{grid-template-columns:minmax(0,1fr);}.locality-page .map-canvas{min-height:260px;}.locality-page .np-body{max-height:340px;}}
@media (max-width:760px){.locality-page .map-cta{right:12px;bottom:12px;padding:8px 14px;font-size:12px;}}
@media (max-width:600px){.locality-page .map-panel{padding:14px;}}
@media (max-width:640px){.locality-page .gallery-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){
  .locality-page .hero-map{display:none;}
  .locality-page .page-layout{gap:16px;margin-top:16px;}
  .locality-page .side-stack{gap:12px;}
  .locality-page .locality-hero{gap:12px;}
  .locality-page .overview-card, .locality-page .trend-panel, .locality-page .review-card-wrap{padding:20px;}
  .locality-page .review-card-wrap{margin-top:12px;}
  .locality-page .fact-strip, .locality-page .badge-row{margin-bottom:16px;}
  .locality-page .badge-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .locality-page .two-col{gap:12px;}
  .locality-page .explore-grid{gap:12px;}
  .locality-page .gallery-grid{gap:10px;}
  .locality-page .owner-cta{flex-direction:column;align-items:flex-start;padding:22px;gap:16px;}
  .locality-page .owner-cta h3{font-size:18px;line-height:1.35;}
  .locality-page .owner-cta .actions{width:100%;flex-direction:column;gap:10px;}
  .locality-page .owner-cta .actions .btn{width:100%;white-space:nowrap;font-size:14px;padding:13px 18px;}
}


/* ---- Locality pages: legacy responsive-locality.css (used by the OLD
   locality design AND the buy-home preview) forces !important rules on
   several class names we also use (.container, .breadcrumb,
   .all-localities-link, .explore-card) at the same 767.98px breakpoint.
   Since those still win over a plain override, we re-assert our own
   values here with matching !important + higher (.locality-page-scoped)
   specificity so they don't leak through on mobile. ---- */
@media (max-width:767.98px){
  .locality-page .container{width:100% !important;max-width:100% !important;margin:0 auto !important;padding:0 20px !important;background:transparent !important;}
  .locality-page .breadcrumb{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:6px !important;width:auto !important;margin:0 !important;padding:16px 20px !important;overflow:visible !important;background:transparent !important;white-space:normal !important;font-size:12.5px !important;}
  .locality-page .all-localities-link{display:inline-flex !important;}
  .locality-page .explore-card{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;box-shadow:none !important;padding:24px !important;flex:initial !important;width:auto !important;min-width:0 !important;min-height:0 !important;margin:0 !important;overflow:visible !important;scroll-snap-align:none !important;}
}

/* ==================================================================
   Pricing / Plans page (/{role_slug}/plans) - redesign, responsive
   Base rules for .pln-page live in style1.css; this section holds
   every media-query for that page.
   ================================================================== */
@media (min-width:768px){
  .pln-page>.container:first-child{display:none;}
  .pln-page .pl-hero{padding-top:48px;}
}

/* ---------- Legacy site chrome overrides (mobile) ---------- */
@media (max-width:767.98px){
  body:has(.pln-page) .hp-bottom-nav{display:none;}
  body:has(.pln-page){padding-bottom:108px;}
  body:has(.pln-page) .hp-header{display:none;}
  .pln-page .container{padding-left:16px;padding-right:16px;}
  .hp-preview .pln-page+.hp-footer{margin-top:0;}
  .pln-page>.container:first-child{max-width:none;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));padding:12px 16px 0;}
  .pln-page .back-row{padding:0;}
  .pln-page .back-btn{width:32px;height:32px;color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);}
  .pln-page .pl-hero{padding:18px 0 40px;text-align:left;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));}
  .pln-page .pl-hero>.container{display:flex;flex-wrap:wrap;align-items:flex-start;}
  .pln-page .pl-hero h1{order:1;width:72%;font-size:24px;line-height:1.3;color:#fff;margin:0;}
  .pln-page .pl-hero h1 .accent{color:#fff;}
  .pln-page .rent-select-wrap{order:2;margin:0 0 0 auto;}
  .pln-page .rent-select{padding:8px 14px;color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);font-size:12.5px;}
  .pln-page .rent-select svg{color:#fff;}
  .pln-page .pl-hero>.container>p{order:3;width:100%;font-size:12.5px;color:rgba(255,255,255,.9);margin-top:10px;}
  .pln-page .trust-row{display:none;}
  .pln-page .plan-segment{order:4;width:calc(100% - 32px);margin:22px 16px -62px;background:#fff;box-shadow:var(--shadow-sm);border:0;padding:5px;overflow:visible;}
  .pln-page .segment-btn{flex:1;padding:11px 6px;font-size:12.5px;text-align:center;}
  .pln-page>.section{padding:44px 0 32px!important;}
  .pln-page .pl-hero+.section{padding-top:48px!important;}
  .pln-page .features-overlap{margin-top:24px;}
  .pln-page .features-overlap,.pln-page .features-overlap>.container:first-of-type,.pln-page .feature-box{width:100%!important;max-width:100%!important;}
  .pln-page .features-overlap>.container:first-of-type{padding:0!important;border:0;background:#fff;}
  .pln-page .feature-cta{display:none;}
  .pln-page .feature-box-title{display:block!important;font-family:var(--lr-font);font-size:19px;font-weight:700;margin:0 0 16px;}
  .pln-page .feature-box .row{grid-template-columns:1fr;gap:12px;}
  .pln-page .feature-box .row>[class*="col-"]{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;}
  /* Mobile only: swap the real partial's inline checkmark glyph for the
     mockup's circular checkmark-cutout icon (a mask cut out of a solid
     circle, same technique the mockup itself uses) - li.active still
     comes from real plan_features DB data, only the icon look changes,
     and only below this breakpoint. Desktop keeps the plain glyph as-is
     (see the un-media-queried .feature-list rule in style1.css). */
  .pln-page .feature-list li{position:relative;display:block;padding:0 0 0 26px!important;font-size:13px;}
  .pln-page .feature-list svg{display:none;}
  .pln-page .feature-list li::before{
    content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
    background:var(--brand-1);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover;
  }
  .pln-page .feature-list li:not(.active)::before{background:var(--ink-faint);}
  .pln-page .mobile-plan-help-bubble{width:100%;margin-top:24px;padding:12px 14px;gap:12px;}
  .pln-page .mobile-plan-help-bubble__whatsapp{order:1;flex:none;}
  .pln-page .mobile-plan-help-bubble__text{order:2;}
  .pln-page .mobile-plan-help-bubble__action{display:flex;order:3;align-items:center;gap:5px;}
  .pln-page .plans-page__review-block{display:none!important;}
  .pln-page .t-section{background:#fff;padding-top:0px!important;padding-bottom:0px!important;}
  .pln-page .t-head{max-width:none;text-align:left;margin:0 0 20px;}
  .pln-page .t-heading-desktop,.pln-page .t-head>p{display:none;}
  .pln-page .t-heading-mobile{display:block;font-size:19px;line-height:1.25;margin:0;}
  .pln-page .t-track-wrap{overflow:visible;}
  .pln-page .t-track{overflow-x:auto;gap:14px;padding-bottom:4px;transform:none!important;scrollbar-width:none;}
  .pln-page .t-track::-webkit-scrollbar{display:none;}
  .pln-page .t-card{flex:0 0 82%;padding:18px;box-shadow:var(--shadow-sm);}
  .pln-page .t-card>.t-stars{display:none;}
  .pln-page .t-card p{font-size:12.5px;line-height:1.65;margin-bottom:16px;min-height:0;}
  .pln-page .t-avatar{width:36px;height:36px;font-size:13px;}
  .pln-page .t-name{font-size:13px;}
  .pln-page .t-role{display:none;}
  .pln-page .t-person-stars{display:block;color:var(--gold);font-size:12px;letter-spacing:1.5px;line-height:1.2;margin-top:2px;}
  .pln-page .t-dots{display:none!important;}
  .pln-page .faq-wrap{gap:18px;}
  .pln-page .faq-label{display:none;}
  .pln-page .faq-side h2{font-size:19px;line-height:1.25;margin:0;}
  .pln-page .faq-list{border-top:0;display:flex;flex-direction:column;gap:12px;}
  .pln-page .faq-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .pln-page .faq-q{padding:16px 18px;font-size:13.5px;line-height:1.4;}
  .pln-page .faq-q .plus{width:22px;height:22px;font-size:15px;background:var(--surface);color:var(--ink-soft);}
  .pln-page .faq-item.open .faq-q .plus{background:#FFE9DF;color:var(--brand-1);}
  .pln-page .faq-a p{padding:0 18px 18px;font-size:12.5px;}
  .hp-preview .pln-page+.hp-footer{padding-bottom:120px;}
}

@media (min-width:992px){
  .pln-page .plan-listing .row.g-4{display:grid!important;}
}

@media (max-width:991.98px){
  .pln-page .plan-listing .row.g-4.d-none{display:none!important;}
  .pln-page .mobile-plan-list-wrapper{display:block!important;}
}

@media (max-width:960px){
  .pln-page .t-card{flex:0 0 calc(50% - 11px);}
}
@media (max-width:900px){
  .pln-page .rent-select-wrap{position:static;display:inline-block;margin-bottom:16px;}
  .pln-page .faq-wrap{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pln-page .section{padding:36px 0;}
  .pln-page .t-card{flex:0 0 88%;}
  .pln-page .plan-segment{overflow-x:auto;max-width:100%;}
}

/* Keep these mobile app-layout values after the broader 900/640 rules. */
@media (max-width:767.98px){
  .pln-page .rent-select-wrap{position:relative;display:block;margin:0 0 0 auto;}
  .pln-page .plan-segment{display:flex;overflow:visible;max-width:none;}
  .pln-page .t-card{flex-basis:82%;}
}

/* Profile Details mobile fixes only. */
@media (max-width:767.98px){
  .pf-page.pf-profile-detail-page .pf-wrap{padding-bottom:0;}
  .pf-page.pf-profile-detail-page .pf-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
  .pf-page.pf-profile-detail-page .pf-actions #updateBtn{
    display:inline-flex;width:auto!important;min-width:0;min-height:50px;height:auto;padding:14px 28px;
    align-items:center;justify-content:center;white-space:nowrap;line-height:1.2;
  }
  .hp-preview .pf-profile-detail-page + .hp-footer{margin-top:0;}
}

/* Billing History mobile CTA only. */
@media (max-width:767.98px){
  .pf-page.pf-billing-history-page .pf-wrap{padding-bottom:0;}
  .pf-page.pf-billing-history-page .no-plan-hero > .btn{
    display:inline-flex;width:auto!important;min-width:160px;min-height:50px;height:auto;
    padding:14px 28px;align-items:center;justify-content:center;
    white-space:nowrap;line-height:1.2;
  }
  .hp-preview .pf-billing-history-page + .hp-footer{margin-top:0;}
}

/* Saved Properties mobile fixes only. */
@media (max-width:767.98px){
  .pf-page.pf-saved-properties-page .wl-grid-wrap{padding-bottom:0;}
  .pf-page.pf-saved-properties-page #emptyStateCta{
    display:inline-flex;width:auto!important;min-width:190px;min-height:50px;height:auto;
    padding:14px 28px;align-items:center;justify-content:center;
    white-space:nowrap;line-height:1.2;
  }
  .hp-preview .pf-saved-properties-page ~ .hp-footer{margin-top:0;}
}

/* ================= BUY/SELL LISTING PAGE (.bl-preview) mobile overrides =================
   Base rules for .bl-preview live in style1.css; this section holds
   every media-query for that page. ================= */
@media (max-width:640px){.bl-preview .bl-pill-search-wrap{padding:16px 0 4px;}}
@media (max-width:900px){.bl-preview .bl-layout{grid-template-columns:1fr;}.bl-preview .bl-sidebar{order:2;}}

@media (max-width:767.98px){
  .bl-preview .bl-insight-banner{align-items:center;flex-wrap:nowrap;gap:12px;padding:13px 16px;}
  .bl-preview .bl-insight-copy{flex:1;width:auto;align-items:center;gap:10px;line-height:1.35;}
  .bl-preview .bl-insight-copy svg{margin-top:0;}
  .bl-preview .bl-insight-banner a{flex:none;margin-left:auto;font-size:13px;}
  .bl-preview .bl-listing-card{flex-direction:column;height:auto;min-height:0;}
  .bl-preview .bl-listing-photo{flex:0 0 200px;width:100%;height:200px;min-height:200px;align-self:auto;}
  .bl-preview .bl-listing-content{padding:16px;}
  .bl-preview .bl-prop-meta{row-gap:14px;}
  .bl-preview .bl-prop-meta .p-col{flex:1 1 45%;padding:0 12px;}
  .bl-preview .bl-prop-meta .p-col:nth-child(odd){padding-left:0;}
  .bl-preview .bl-prop-meta .p-col:nth-child(n+3){border-left:none;padding-top:14px;border-top:1px solid var(--bl-line);}
  .bl-preview .bl-listing-foot{flex-wrap:wrap;}
  .bl-preview .bl-foot-actions{width:100%;}
  .bl-preview .bl-foot-actions .bl-view-number,.bl-preview .bl-foot-actions .bl-contact-solid{flex:1;justify-content:center;}
}

@media (max-width:767.98px){
  .bl-preview .bl-desktop-search{display:none;}
  .bl-preview .bl-pill-search-wrap{display:none;}
  .bl-preview .bl-pill-row{display:none;}
  .bl-preview .bl-sidebar{display:none;}
  .bl-preview .bl-layout{display:block;}

  .bl-preview .bl-mobile-topbar{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;}
  .bl-preview .bl-mobile-back{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--bl-line);display:flex;align-items:center;justify-content:center;color:var(--bl-ink);flex:none;}
  .bl-preview .bl-mobile-search-pill{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bl-line);border-radius:100px;padding:0 16px;min-width:0;}
  .bl-preview .bl-mobile-search-pill svg{flex:none;color:var(--bl-brand-1);}
  .bl-preview .bl-mobile-search-pill input{border:none;outline:none;background:transparent;flex:1;font-size:16px;font-weight:700;color:var(--bl-ink);padding:10px 0;min-width:0;}
  .bl-preview .bl-mobile-icon-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--bl-line);display:flex;align-items:center;justify-content:center;color:var(--bl-ink);flex:none;}

  .bl-preview .bl-mobile-filter-row{display:flex;gap:10px;padding:12px 16px 4px;}
  .bl-preview .bl-mobile-sort-pill{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--bl-line);border-radius:100px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--bl-ink);cursor:pointer;}
  .bl-preview .bl-premium-filter-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#FFF0EA;border:1px solid #FFD9C9;border-radius:100px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--bl-brand-1);cursor:pointer;}
}

@media (max-width:767.98px){
  .bl-preview .bl-layout{padding-bottom:0;}
  .bl-preview .bl-show-more-wrap{margin-top:20px;padding:0 0 3rem;}
  .bl-preview .bl-show-more-wrap .btn-show-more{
    display:inline-flex;width:auto!important;min-width:160px;min-height:48px;height:auto;
    padding:13px 28px;align-items:center;justify-content:center;
    border:1px solid var(--bl-line);border-radius:100px;background:#fff;
    color:var(--bl-ink);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;
  }
  body:has(.bl-preview) .hp-footer{margin-top:0;}
}

/* Keep the normal site header visible; only suppress the bottom nav on
   this page because it has its own mobile controls. */
@media (max-width:767.98px){
  body:has(.bl-preview) .hp-bottom-nav{display:none;}
}

/* ================= EDIT REQUIREMENT PAGE (.rq-page) mobile overrides =================
   Base rules for .rq-page live in style1.css; this section holds every
   media-query for that page. ================= */
@media (min-width:701px){
  .rq-page .timeline-list{flex-direction:row;}
  .rq-page .timeline-card{position:relative;padding-right:48px;}
  .rq-page .timeline-card .radio-dot{position:absolute;right:16px;top:50%;transform:translateY(-50%);}
  .rq-page .timeline-text .t-title{white-space:nowrap;}
}
@media (max-width:980px){
  .rq-page .rq-grid{grid-template-columns:1fr;}
  .rq-page .summary-card{position:static;}
  .rq-page .rq-wrap{padding:0 0 28px;}
  .rq-page .rq-grid{gap:20px;}
}
@media (max-width:640px){
  .rq-page .rq-hero{padding:10px 0 2px;}
  .rq-page .rq-back-left{gap:12px;}
  .rq-page .back-btn{width:38px;height:38px;}
  .rq-page .rq-eyebrow{margin-bottom:6px;padding:5px 12px;font-size:11px;}
  .rq-page .rq-sub{margin-top:4px;font-size:13.5px;}
  .rq-page .rq-wrap{padding:0 0 22px;}
  .rq-page .rq-card{padding:18px;}
  .rq-page .field-group{margin-bottom:18px;}
  .rq-page .field-row{grid-template-columns:1fr;gap:14px;}
  .rq-page .search-input input,
  .rq-page .select-wrap select{padding-top:12px;padding-bottom:12px;}
  .rq-page .radius-head{margin-bottom:10px;}
  .rq-page .timeline-list{gap:9px;}
  .rq-page .timeline-card{padding:12px 14px;gap:11px;}
  .rq-page .choice-list{gap:9px;}
  /* min-width:0 (rather than a real floor) let flex shrink each card
     below what its icon+label+radio-dot actually needs instead of
     wrapping the 3rd card to its own line - the content then overflowed
     past its own shrunk box (most visible on the 3-up "Are You" row,
     where "Working" + the radio dot spilled out past the screen edge). */
  .rq-page .choice-card{padding:11px 13px;gap:10px;min-width:130px;}
  .rq-page .rq-actions{justify-content:stretch;margin-top:20px;padding-top:18px;}
  .rq-page .rq-actions .btn{
    flex:1;
    height:52px !important;
    min-height:52px;
    padding:0 20px !important;
    line-height:1.2;
    box-sizing:border-box;
  }
  .rq-page .summary-card{padding:20px;}
  .rq-page .summary-row{padding:11px 0;}
  .rq-page .summary-note{margin-top:16px;padding:13px;}
}

/* ================= EMI CALCULATOR PAGE (.emi-preview) mobile overrides =================
   Base rules for .emi-preview live in style1.css; this section holds
   every media-query for that page. ================= */
@media (max-width:900px){
  .emi-preview .calc-card{grid-template-columns:1fr;}
  .emi-preview .card-grid{grid-template-columns:1fr;}
  .emi-preview .faq-wrap{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .emi-preview .calc-inputs{padding:30px 22px;}
  .emi-preview .calc-results{padding:32px 22px;}
  .emi-preview .card-grid{
    display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;
    padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .emi-preview .card-grid::-webkit-scrollbar{display:none;}
  .emi-preview .card-grid .info-card{flex:0 0 82%;scroll-snap-align:start;}
  .emi-preview .section{padding:40px 0;}
}

/* ================= RENT CALCULATOR PAGE (.rc-preview) mobile overrides =================
   Base rules for .rc-preview live in style1.css; this section holds
   every media-query for that page. ================= */
@media (max-width:900px){
  .rc-preview .calc-hero{grid-template-columns:1fr;}
  .rc-preview .calc-hero-left{min-height:340px;}
  .rc-preview .house-illustration,.rc-preview .desk-shapes{display:none;}
  .rc-preview .calc-hero-left{min-height:0;padding:36px 20px;}
  .rc-preview .calc-card-float{position:static;transform:none;margin:0 auto;width:100%;}
  .rc-preview .calc-hero-right{padding:44px 24px;}
  .rc-preview .faq-wrap{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .rc-preview .section{padding:40px 0;}
}

/* ============================================================
   Rent Agreement v2 (.ra2-preview / .ra2d-preview) responsive
   merged from rent-agreement-v2.css
   ============================================================ */

  @media (max-width:960px){
    .ra2-preview .hero-grid{grid-template-columns:1fr;gap:44px;}
    .ra2-preview .doc-card{transform:none;}
    .ra2-preview .float-a{right:0;}.ra2-preview .float-b{left:0;}
  }

  @media (max-width:768px){
    .ra2-preview .hero{padding:30px 0 34px;}
    .ra2-preview .hero-grid{gap:28px;}
    .ra2-preview .hero .lede{font-size:15px;margin-top:14px;}
    .ra2-preview .hero-cta{margin-top:20px;gap:14px;}
    .ra2-preview .trust-row{margin-top:18px;}
  }

  @media (max-width:520px){
    .ra2-preview .doc-float{display:none;}
  }


  @media (max-width:560px){
    .ra2-preview .base-plan{flex-wrap:wrap;row-gap:0;padding:16px;}
    .ra2-preview .base-plan .bp-body{flex:1 1 0;min-width:0;}
    .ra2-preview .base-plan .bp-price{
      flex:1 0 100%;text-align:right;
      margin-top:14px;padding-top:12px;border-top:1px dashed #F5C6B4;
    }
  }

  @media (max-width:560px){.ra2-preview .incl-list{grid-template-columns:1fr;}}

  @media (max-width:1000px){
    .ra2-preview .builder-grid{grid-template-columns:1fr;}
    .ra2-preview .summary{position:static;}
  }

  @media (max-width:820px){
    .ra2-preview .steps{grid-template-columns:1fr;gap:14px;}
    .ra2-preview .steps::before{display:none;}
    .ra2-preview .step{
      display:grid;grid-template-columns:68px 1fr;
      column-gap:18px;row-gap:0;text-align:left;align-items:start;
    }
    .ra2-preview .step .ring{margin:0;grid-column:1;grid-row:1 / span 3;}
    .ra2-preview .step h4,.ra2-preview .step p,.ra2-preview .step .eta{grid-column:2;}
    .ra2-preview .step p{margin-inline:0;max-width:none;margin-top:6px;}
    .ra2-preview .step .eta{justify-self:start;}
  }

  @media (max-width:880px) and (min-width:769px){.ra2-preview .promise{grid-template-columns:1fr;}}

  @media (max-width:760px){.ra2-preview .docs-grid{grid-template-columns:1fr;}}

  @media (max-width:820px){.ra2-preview .help{grid-template-columns:1fr;padding:30px 24px;}}

  @media (max-width:768px){
    .ra2-preview .mobile-bar{display:flex;}
    .ra2-preview{padding-bottom:76px;}
    .ra2-preview .to-top{bottom:88px;}

    /* tighter vertical rhythm on small screens */
    .ra2-preview .container{padding:0 18px;}
    .ra2-preview .section{padding:36px 0;}
    .ra2-preview .section-head{margin-bottom:24px;}
    .ra2-preview .section-head p{font-size:14.5px;margin-top:9px;}
    .ra2-preview .eyebrow{margin-bottom:12px;}
    .ra2-preview .builder-grid{gap:16px;}
    .ra2-preview .panel{padding:20px 18px;}
    .ra2-preview .panel-sub{margin-bottom:16px;}
    .ra2-preview .incl-list{margin-top:16px;gap:10px;}
    .ra2-preview .summary{padding:22px 20px;}
    .ra2-preview .steps{gap:22px;}
    .ra2-preview .step p{margin-top:6px;}
    .ra2-preview .step .eta{margin-top:9px;}
    /* promise cards become a swipeable slider */
    .ra2-preview .promise{
      display:flex;grid-template-columns:none;gap:14px;
      overflow-x:auto;scroll-snap-type:x mandatory;
      margin:0 -18px;padding:4px 18px 6px;
      scroll-padding-left:18px;
      scrollbar-width:none;-ms-overflow-style:none;
      overscroll-behavior-x:contain;
    }
    .ra2-preview .promise::-webkit-scrollbar{display:none;}
    .ra2-preview .p-card{
      flex:0 0 82%;scroll-snap-align:start;padding:22px 20px;
    }
    .ra2-preview .p-card:hover{transform:none;box-shadow:none;border-color:var(--line);}
    .ra2-preview .p-card .ic{margin-bottom:14px;}
    .ra2-preview .promise-dots{
      display:flex;justify-content:center;gap:7px;margin-top:16px;
    }
    .ra2-preview .promise-dots button{
      width:7px;height:7px;padding:0;border:none;border-radius:50%;
      background:#D3D4DE;cursor:pointer;transition:width .22s ease, background .22s ease;
    }
    .ra2-preview .promise-dots button.on{width:20px;border-radius:100px;background:var(--brand-1);}
    .ra2-preview .docs-grid{gap:14px;}
    .ra2-preview .doc-col{padding:20px 18px;}
    .ra2-preview .docs-note{margin-top:14px;padding:14px 16px;}
    .ra2-preview .help{padding:26px 22px;gap:20px;border-radius:20px;}
    .ra2-preview .help p{margin-top:8px;}
    .ra2-preview .faq-item{margin-bottom:10px;}
    .ra2-preview .faq-q{padding:16px 18px;font-size:14.5px;}
    .ra2-preview .faq-a p{padding:0 18px 17px;font-size:14px;}
  }

  @media (prefers-reduced-motion:reduce){
    .ra2-preview .reveal{opacity:1;transform:none;transition:none;}
    .ra2-preview .strip-track,.ra2-preview .float-a,.ra2-preview .float-b{animation:none;}
  }

  @media (max-width:600px){
    .ra2d-preview .rail-step span.lbl{display:none;}
    .ra2d-preview .rail-line{width:28px;margin:0 8px;}
    .ra2d-preview .rail-step.now span.lbl{display:inline;}
  }

  @media (max-width:1000px){.ra2d-preview .ra-grid{grid-template-columns:minmax(0,1fr);margin-top:-56px;}}

  @media (max-width:600px){.ra2d-preview .two-col{grid-template-columns:1fr;gap:22px;}}

  @media (max-width:1000px){.ra2d-preview .side{position:static;}}


  @media (max-width:768px){
    .ra2d-preview .container{padding:0 18px;}
    .ra2d-preview .ra-band{padding:28px 0 80px;}
    .ra2d-preview .ra-band p.band-sub{font-size:14.5px;}
    .ra2d-preview .rail{margin-top:20px;}
    .ra2d-preview .form-card{padding:22px 18px;border-radius:20px;}
    .ra2d-preview .fc-head{padding-bottom:16px;margin-bottom:20px;}
    .ra2d-preview .fc-head h2{font-size:19px;}
    .ra2d-preview .fc-head p{font-size:13.5px;}
    .ra2d-preview .field{margin-bottom:22px;}
    .ra2d-preview .drop{padding:22px 16px;}
    .ra2d-preview .summary{padding:22px 20px;}
    .ra2d-preview .mobile-bar{display:flex;}
    .ra2d-preview{padding-bottom:78px;}
    .ra2d-preview .fc-foot .btn-submit{display:none;}
    .ra2d-preview .fc-foot{margin-top:22px;padding-top:18px;}
    .ra2d-preview .success-actions .btn{width:100%;}
  }

  @media (max-width:400px){
    .ra2d-preview .thumb,.ra2d-preview .thumb-add{width:66px;height:66px;}
  }

  @media (prefers-reduced-motion:reduce){
    .ra2d-preview .reveal{opacity:1;transform:none;transition:none;}
    .ra2d-preview .spin{animation:none;}
  }


/* ---------------------------------------------------------------
   Both pages ship their own sticky bottom CTA (.mobile-bar), which
   would otherwise stack with the site-wide .hp-bottom-nav tab bar
   on mobile (see hp-preview chrome pattern used by .pdv2-page /
   .bcp-page / .bl-preview). The site's own mobile header stays
   visible since these test pages don't ship a replacement for it.
   --------------------------------------------------------------- */
@media (max-width:767.98px){
  body:has(.ra2-preview) .hp-bottom-nav{display:none;}
  body:has(.ra2d-preview) .hp-bottom-nav{display:none;}
}

/* ================================================================
   POST PROPERTY WIZARD (live) — merged from post-property-v2.css.
   ================================================================ */
/* ---------- Responsive ---------- */
@media (max-width:680px){
  .pp2-preview .flow{padding:24px 14px 54px;}
  .pp2-preview .stp{width:104px;}
  .pp2-preview .stepper.steps-4 .stp{width:82px;}
  .pp2-preview .stp small{font-size:10.5px;}
  .pp2-preview .stepper.steps-4 .stp b{font-size:11.5px;}
  .pp2-preview .stepper.steps-4 .stp small{font-size:10px;}
  .pp2-preview .card{padding:28px 20px 26px;border-radius:20px;}
  .pp2-preview .card-title h1{font-size:21px;}
  .pp2-preview .grid2{grid-template-columns:1fr;gap:0;}
  .pp2-preview .opts{gap:10px 16px;}
  .pp2-preview .opts.amen{grid-template-columns:repeat(2,1fr);}
  .pp2-preview .room{padding:16px 16px 14px;border-radius:16px;}
  .pp2-preview .help{padding:16px 18px;gap:13px;}
  .pp2-preview .help b{font-size:14.5px;}
  .pp2-preview .help p{font-size:12.5px;}
  .pp2-preview .actions .btn{width:100%;}

  .pp2-preview .pp-overlay{padding:0;}
  .pp2-preview .pp-card{max-width:100%;border-radius:24px 24px 0 0;margin:auto 0 0;max-height:92vh;}
  .pp2-preview .pp-head{padding:26px 20px 20px;}
  .pp2-preview .pp-head h2{font-size:22px;}
  .pp2-preview .pp-body{padding:20px 20px 16px;}
  .pp2-preview .pp-foot{padding:16px 20px 20px;}
  .pp2-preview .intent-grid{gap:8px;}
  .pp2-preview .intent{padding:14px 8px 12px;border-radius:15px;}
  .pp2-preview .intent .ic{width:44px;height:44px;border-radius:13px;margin-bottom:9px;}
  .pp2-preview .intent b{font-size:12px;}
  .pp2-preview .intent small{display:none;}
  .pp2-preview .type-list{grid-template-columns:1fr;}

  .pp2-preview .track{grid-auto-columns:88%;gap:14px;}
  .pp2-preview .plan-sec{padding:34px 16px 44px;}
  .pp2-preview .help-wrap{padding:0 16px 44px;}

  .pp2-preview .hero{padding:36px 16px 118px;}
  .pp2-preview .panel{margin-top:-90px;padding:0 16px 48px;}
  .pp2-preview .offer{padding:26px 20px 24px;border-radius:22px;}
  .pp2-preview .offer h2{font-size:17px;}
  .pp2-preview .next{padding:0 16px 8px;}
  .pp2-preview .next-grid{grid-template-columns:1fr;}
  .pp2-preview .ncard{display:flex;align-items:center;gap:13px;text-align:left;padding:14px;}
  .pp2-preview .ncard .ic{margin:0;}

  .pp2-preview .fail-hero{padding:36px 16px 84px;}
  .pp2-preview .fail-panel{margin-top:-60px;padding:0 16px 48px;}
  .pp2-preview .fail-card{padding:26px 20px 24px;border-radius:22px;}
}

/* Sitewide mobile chrome: these flow pages have their own slim sticky
   header (.flow-header) and no bottom CTA bar, so hide both the site's
   mobile header and bottom tab bar to avoid doubling up, same pattern
   as other rentz4.0 redesigns.
   :not(#ppInlineRoot) matters here: popupInline.blade.php's site-wide
   inline "Post Property" popup (included on every page by
   front.template.blade.php) reuses this same .pp2-preview class on its
   own (normally hidden) overlay root, so a bare body:has(.pp2-preview)
   matched on every single page and hid the mobile header/bottom nav
   everywhere, not just on these dedicated flow pages. */
@media (max-width:767.98px){
  body:has(.pp2-preview:not(#ppInlineRoot)) .hp-header-mobile{display:none;}
  body:has(.pp2-preview:not(#ppInlineRoot)) .hp-bottom-nav{display:none;}

  /* The site-wide footer's generous 56px top padding (meant for pages with
     denser content right above it) reads as a big empty gap after this
     wizard's short, already-padded sections - trim it just for pages using
     this flow, same adjacent-sibling pattern already used for .ppv-mobile-cta. */
  .hp-preview .pp2-preview ~ .hp-footer{padding-top:20px;}
}

/* ================= AREA CONVERTER PAGE (.ac-preview) =================
   Media rules for style1.css's .ac-preview block, in the mockup's own
   source order. No hp-header-mobile/hp-bottom-nav hiding needed here -
   this page uses the normal site header, not a dedicated mobile flow
   chrome like the post-property wizard above. ================= */
@media (max-width:900px){
  .ac-preview .calc-card{grid-template-columns:1fr;}
  .ac-preview .pop-grid{grid-template-columns:repeat(2,1fr);}
  .ac-preview .card-grid{grid-template-columns:1fr;}
  .ac-preview .faq-wrap{grid-template-columns:1fr;}
  .ac-preview .tool-grid{grid-template-columns:1fr;}
  .ac-preview .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .ac-preview .calc-inputs{padding:30px 22px;}
  .ac-preview .calc-results{padding:32px 22px;}
  .ac-preview .card-grid{
    display:flex;grid-template-columns:none;gap:14px;
    padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ac-preview .card-grid::-webkit-scrollbar{display:none;}
  .ac-preview .card-grid .info-card{flex:0 0 82%;scroll-snap-align:start;}
  .ac-preview .steps,.ac-preview .tool-grid{
    display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;
    padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ac-preview .steps::-webkit-scrollbar,.ac-preview .tool-grid::-webkit-scrollbar{display:none;}
  .ac-preview .steps > .step-card,.ac-preview .tool-grid > .tool-card{flex:0 0 82%;scroll-snap-align:start;}
  .ac-preview .tool-grid > .tool-card{align-items:flex-start;}
  .ac-preview .slider-dots{
    display:flex;justify-content:center;align-items:center;gap:7px;margin-top:18px;
  }
  .ac-preview .section{padding:40px 0;}
}
@media (max-width:520px){
  .ac-preview .input-shell{flex-wrap:wrap;padding:12px 14px;gap:12px;}
  .ac-preview .input-shell input{padding:0;}
  .ac-preview .unit-select,.ac-preview .unit-select select{width:100%;max-width:none;}
  .ac-preview .pop-grid{grid-template-columns:1fr;}
}

/* ================= MY PROPERTY LISTING PAGE (.mpl-preview) =================
   Media rules for style1.css's .mpl-preview block, in the mockup's own
   source order. No hp-header-mobile/hp-bottom-nav hiding needed here -
   this page uses the normal site header, not a dedicated mobile flow
   chrome. ================= */
@media (max-width:1040px){
  .mpl-preview .mpl-grid{grid-template-columns:repeat(2,1fr);}
  .mpl-preview .mpl-summary{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .mpl-preview .mpl-empty{grid-template-columns:1fr;}
  .mpl-preview .mpl-empty-copy{padding:34px 26px 30px;order:2;}
  .mpl-preview .mpl-art{order:1;border-left:none;border-bottom:1px solid var(--line);padding:34px 26px;}
  .mpl-preview .mpl-art svg.scene{max-width:250px;}
  .mpl-preview .mpl-chip.one{top:8%;left:3%;}
  .mpl-preview .mpl-chip.two{bottom:10%;right:3%;}
  .mpl-preview .mpl-steps-grid{grid-template-columns:1fr;}
  .mpl-preview .mpl-step{display:flex;align-items:flex-start;gap:14px;padding:16px;}
  .mpl-preview .mpl-step .ic{margin-bottom:0;flex:none;}
  .mpl-preview .mpl-step .no{display:none;}
}
@media (max-width:720px){
  .mpl-preview .mpl{padding:22px 0 60px;}
  .mpl-preview .mpl-head{flex-direction:column;align-items:flex-start;}
  .mpl-preview .mpl-head-cta{width:100%;}
  .mpl-preview .mpl-head-cta .btn{flex:1;}
  .mpl-preview .mpl-toolbar{position:static;flex-direction:column;align-items:stretch;border-radius:18px;}
  .mpl-preview .mpl-tabs{width:100%;}
  .mpl-preview .mpl-tools{width:100%;min-width:0;}
  .mpl-preview .mpl-search{flex:1;min-width:0;}
  .mpl-preview .mpl-search input{width:100%;}
  .mpl-preview .mpl-grid{grid-template-columns:1fr;}
  .mpl-preview .mpl-empty-cta{flex-direction:column;align-items:stretch;}
  .mpl-preview .mpl-empty-cta .btn{width:100%;}
}
@media (max-width:560px){
  .mpl-preview .mpl-pg-arrow span{display:none;}
  .mpl-preview .mpl-pg-arrow{padding:10px 13px;}
  .mpl-preview .mpl-pg-nums button{min-width:36px;height:36px;padding:0 9px;font-size:13px;}
}
@media (max-width:420px){
  .mpl-preview .mpl-summary{grid-template-columns:1fr;}
}

/* Both new pages already end with their own bottom padding (.ac-preview
   .section / .mpl-preview .mpl's padding-bottom), so the site-wide mobile
   .hp-footer's own 40px margin-top (responsive1.css, @media max-width:767px
   above) just stacks another gap on top of that - same double-gap issue
   already fixed for .pp2-preview/.bl-preview/.pln-page/etc above, same
   body:has() fix pattern. */
@media (max-width:767.98px){
  body:has(.ac-preview) .hp-footer{margin-top:0;}
  body:has(.mpl-preview) .hp-footer{margin-top:0;}
  body:has(.pi-preview) .hp-footer{margin-top:0;}
  body:has(.li-preview) .hp-footer{margin-top:0;}
}

/* ================= PROPERTY INSIGHTS PAGE (.pi-preview) =================
   Media rules for style1.css's .pi-preview block, in the mockup's own
   source order. No hp-header-mobile/hp-bottom-nav hiding needed here - this
   page uses the normal site header, not a dedicated mobile flow chrome.
   ================= */
@media (max-width:1040px){
  .pi-preview .pi-board{grid-template-columns:1fr;}
}
@media (max-width:1040px){
  .pi-preview .pi-board{gap:14px;margin-top:22px;}
  .pi-preview .pi-prop,.pi-preview .pi-tip{margin-top:22px;}
}
@media (max-width:640px){
  .pi-preview .container{padding:0 16px;}
  .pi-preview .pi{padding:18px 0 36px;}
  .pi-preview .pi-crumb{margin-bottom:12px;}
  .pi-preview .pi-eyebrow{margin-bottom:9px;}
  .pi-preview .pi-sub{margin-top:7px;}
  .pi-preview .pi-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .pi-preview .pi-controls{width:100%;}
  .pi-preview .pi-prop{margin-top:18px;gap:12px;padding:12px;border-radius:18px;}
  .pi-preview .pi-prop-thumb{width:74px;height:60px;}
  .pi-preview .pi-prop-actions{width:100%;gap:8px;}
  .pi-preview .pi-switch{flex:1;min-width:0;padding:11px 34px 11px 14px;}
  .pi-preview .pi-prop-actions .btn{flex:1;padding:11px 16px;}
  .pi-preview .pi-tabsel{
    display:flex;gap:2px;margin-top:18px;
    background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px;
    box-shadow:var(--shadow-sm);
  }
  .pi-preview .pi-board{gap:12px;margin-top:12px;}
  .pi-preview .pi-board .pi-panel{display:none;}
  .pi-preview .pi-board .pi-panel.is-active{display:block;}
  .pi-preview .pi-panel{border-radius:18px;}
  .pi-preview .pi-panel-head{padding:12px 14px;}
  .pi-preview .pi-list{padding:4px 6px 6px;}
  .pi-preview .pi-row{gap:10px;padding:10px 8px;}
  .pi-preview .pi-tip{margin-top:18px;gap:14px;padding:18px;border-radius:18px;}
  .pi-preview .pi-tip .ic{width:40px;height:40px;border-radius:13px;}
  .pi-preview .pi-tip-txt{min-width:0;}
}
@media (prefers-reduced-motion:reduce){
  .pi-preview .btn:hover{transform:none;}
}

/* ================= LOCKED PROPERTY INSIGHTS PAGE (.li-preview) =================
   Media rules for style1.css's .li-preview block, in the mockup's own
   source order. No hp-header-mobile/hp-bottom-nav hiding needed here - this
   page uses the normal site header, not a dedicated mobile flow chrome.
   ================= */
@media (max-width:1040px){
  .li-preview .li-board{grid-template-columns:1fr;gap:14px;}
  .li-preview .li-prop{margin-top:22px;}
}
@media (max-width:640px){
  .li-preview .container{padding:0 16px;}
  .li-preview .li{padding:18px 0 36px;}
  .li-preview .li-crumb{margin-bottom:12px;}
  .li-preview .li-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .li-preview .li-headcta{width:100%;}
  .li-preview .li-prop{margin-top:18px;gap:12px;padding:12px;border-radius:18px;}
  .li-preview .li-prop-thumb{width:74px;height:60px;}
  .li-preview .li-prop-actions{width:100%;gap:8px;}
  .li-preview .li-switch{flex:1;min-width:0;padding:11px 34px 11px 14px;}
  .li-preview .li-prop-actions .btn{flex:1;padding:11px 16px;}
  .li-preview .li-tabsel{
    display:flex;gap:2px;margin-top:16px;
    background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px;
    box-shadow:var(--shadow-sm);
  }
  .li-preview .li-board{gap:12px;margin-top:12px;}
  .li-preview .li-board .li-panel{display:none;}
  .li-preview .li-board .li-panel.is-active{display:block;}
  .li-preview .li-panel{border-radius:18px;}
  .li-preview .li-panel-head{padding:12px 14px;}
  .li-preview .li-list{padding:4px 6px 6px;height:296px;}
  .li-preview .li-row{gap:10px;padding:10px 8px;}
  .li-preview .li-cta{margin-top:16px;padding:20px;border-radius:20px;gap:18px;}
  .li-preview .li-cta-txt h2{font-size:20px;}
  .li-preview .li-cta-buy{width:100%;}
  .li-preview .li-cta-buy .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .li-preview .btn:hover{transform:none;}
}

/* ================= ZERO-ACTIVITY PROPERTY INSIGHTS PAGE (.zi-preview) =================
   Media rules for style1.css's .zi-preview block, in the mockup's own
   source order. No hp-header-mobile/hp-bottom-nav hiding needed here - this
   page uses the normal site header, not a dedicated mobile flow chrome.
   ================= */
@media (max-width:1040px){
  .zi-preview .zi-board{grid-template-columns:1fr;gap:14px;}
  .zi-preview .zi-steps{grid-template-columns:1fr;}
  .zi-preview .zi-prop{margin-top:22px;}
}
@media (max-width:640px){
  .zi-preview .container{padding:0 16px;}
  .zi-preview .zi{padding:18px 0 36px;}
  .zi-preview .zi-crumb{margin-bottom:12px;}
  .zi-preview .zi-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .zi-preview .zi-headcta{width:100%;}
  .zi-preview .zi-headcta .btn{flex:1;}
  .zi-preview .zi-prop{margin-top:18px;gap:12px;padding:12px;border-radius:18px;}
  .zi-preview .zi-prop-thumb{width:74px;height:60px;}
  .zi-preview .zi-prop-actions{width:100%;gap:8px;}
  .zi-preview .zi-switch{flex:1;min-width:0;padding:11px 34px 11px 14px;}
  .zi-preview .zi-prop-actions .btn{flex:1;padding:11px 16px;}
  .zi-preview .zi-tabsel{
    display:flex;gap:2px;margin-top:16px;
    background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px;
    box-shadow:var(--shadow-sm);
  }
  .zi-preview .zi-board{gap:12px;margin-top:12px;}
  .zi-preview .zi-board .zi-panel{display:none;}
  .zi-preview .zi-board .zi-panel.is-active{display:block;}
  .zi-preview .zi-panel{border-radius:18px;}
  .zi-preview .zi-panel-head{padding:12px 14px;}
  .zi-preview .zi-empty{height:300px;padding:18px;}
  .zi-preview .zi-boost{margin-top:16px;padding:20px;border-radius:20px;}
  .zi-preview .zi-boost-top h2{font-size:19px;}
}
@media (prefers-reduced-motion:reduce){
  .zi-preview .btn:hover{transform:none;}
}

/* 404 error page (.err2-page) mobile overrides */
@media (max-width:640px){
  .err2-hero{padding:40px 0 52px;}
  .err2-actions .err2-btn{flex:1 1 100%;}
  .err2-badge-a{left:-4px;}
  .err2-badge-b{right:-4px;}
}

/* ================= TENANT RELAX PLAN PAGE (.rlx-page) mobile overrides ================= */
@media (max-width:859px){
  /* This page has its own fixed .mobile-cta bar, which would otherwise
     stack with the site-wide bottom tab bar rendered unconditionally by
     header/footer.blade.php outside this page's own markup - body:has()
     is the only way to reach it. Use the shared website mobile header
     across the same breakpoint as this page's mobile layout. */
  body:has(.rlx-page) .hp-header{display:none;}
  body:has(.rlx-page) .hp-header-mobile{
    display:block;position:sticky;top:0;z-index:90;
    background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  }
  body:has(.rlx-page) .hp-bottom-nav{display:none;}
}

@media (max-width:560px){
  .rlx-page .modal-backdrop{padding:0;align-items:flex-end;}
  .rlx-page .modal{max-width:none;max-height:92vh;border-radius:22px 22px 0 0;transform:translateY(40px);}
  .rlx-page .modal-head{padding:24px 22px 20px;}
  .rlx-page .modal-head h2{font-size:22px;}
  .rlx-page .modal-body{padding:22px 22px 6px;}
  .rlx-page .modal-foot{padding:16px 22px 20px;flex-direction:column-reverse;align-items:stretch;gap:10px;}
  .rlx-page .modal-foot small{text-align:center;}
  .rlx-page .modal-ok{width:100%;}
}

@media (max-width:859px){
  /* Keep the page and global footer flush; safe-area space belongs inside
     the fixed CTA itself, not between the FAQ and footer. */
  .rlx-page{padding-bottom:0;overflow-x:clip;}
  body:has(.rlx-page) .hp-footer{margin-top:0;}
  .rlx-page .hero{grid-template-columns:1fr;gap:36px;padding:32px 5vw 8px;}
  .rlx-page .hero > *{min-width:0;}
  .rlx-page .hero-copy{padding-top:0;}
  .rlx-page .hero h1{font-size:34px;}
  .rlx-page .hero-sub{font-size:16px;margin-bottom:24px;}
  .rlx-page .card-wrap{position:relative;top:0;}
  .rlx-page .plan-card{padding:22px;}
  .rlx-page .plan-card h2,.rlx-page .section-title{font-size:27px;}
  .rlx-page .price{font-size:34px;}
  .rlx-page section.pad{padding:28px 5vw;}
  .rlx-page .benefits .section-lede{margin-bottom:24px;}
  .rlx-page .benefits-grid{gap:8px;}
  .rlx-page .benefit-card{padding:8px 20px;}
  .rlx-page .benefit-icon{margin-bottom:10px;}
  .rlx-page .promise-inner{grid-template-columns:1fr;gap:18px;padding:26px 22px;text-align:left;}
  .rlx-page .promise-inner h2{font-size:24px;}
  .rlx-page .testimonial{width:min(82vw,340px);}
  .rlx-page .testimonials .section-lede,.rlx-page .faq .section-lede{margin-bottom:20px;}
  .rlx-page .mobile-cta{display:flex;}
}

@media (max-width:480px){
  .rlx-page .hero{gap:28px;padding-top:24px;}
  .rlx-page .hero h1{font-size:32px;overflow-wrap:anywhere;}
  .rlx-page .pill{font-size:11px;margin-bottom:16px;}
  .rlx-page .hero-bullets{padding-left: 0;display:grid;grid-template-columns:1fr;gap:11px;margin-bottom:24px;}
  .rlx-page .callback{width:100%;padding:14px 16px;}
  .rlx-page .callback a{font-size:16px;overflow-wrap:anywhere;}
  .rlx-page .card-deco{left:-10px;top:-10px;}
  .rlx-page .plan-card{padding:20px 18px;border-radius:20px;}
  .rlx-page .brokerage-strip{align-items:flex-start;padding:13px;}
  .rlx-page .stats{padding:28px 5vw;}
  .rlx-page .stats-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;}
  .rlx-page .stat-value{font-size:29px;}
  .rlx-page .stat-label{font-size:12px;}
  .rlx-page .benefit-card{padding:10px 8px 18px;}
  .rlx-page .promise-seal{width:82px;height:82px;}
  .rlx-page .testimonial{width:88vw;padding:21px;}
  .rlx-page .faq-q{padding:17px 18px;align-items:flex-start;}
  .rlx-page .faq-q span:first-child{font-size:14px;line-height:1.45;}
  .rlx-page .faq-a{padding:0 18px 18px;font-size:14px;}
  .rlx-page .mobile-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
  .rlx-page .mobile-cta a{font-size:14px;padding:12px 10px;}
}

@media (prefers-reduced-motion:reduce){
  .rlx-page *,.rlx-page *::before,.rlx-page *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .rlx-page .reveal{opacity:1;transform:none;}
}

/* ---------- Search by PID v2 (.pid-v2-preview) ---------- */
@media (max-width:900px){.pid-v2-preview .hiw-grid::before{display:none;}}
@media (max-width:1000px){
  .pid-v2-preview .find-grid{grid-template-columns:repeat(2,1fr);}
  .pid-v2-preview .hiw-grid{grid-template-columns:1fr;}
  .pid-v2-preview .res-card{grid-template-columns:1fr;}
  .pid-v2-preview .res-media{min-height:0;height:200px;}
  .pid-v2-preview .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .pid-v2-preview .section{padding:28px 0;}
  .pid-v2-preview .pid-hero{padding:26px 0 30px;}
  .pid-v2-preview .pid-panel{padding:16px;border-radius:18px;}
  .pid-v2-preview .pid-types{grid-template-columns:repeat(2,1fr);}
  .pid-v2-preview .pid-input-row{grid-template-columns:1fr;}
  .pid-v2-preview .pid-submit{padding:16px;justify-content:center;}
  .pid-v2-preview .pid-input input{font-size:18px;}
  /* responsive-locality.css has an unscoped mobile `.pid-input{width:50% !important;
     height:50px;padding-left:0}` meant for the locality page's own PID box. It is
     loaded site-wide and squeezed this field to half width, leaving the input
     ~21px wide (a 5-digit PID showed as "73"). Undo it for this page only. */
  .pid-v2-preview .pid-input{width:auto !important;height:auto;padding-left:16px;}
  .pid-v2-preview .pid-input input{flex:1;min-width:0;}

  .pid-v2-preview .find-grid{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px;padding:4px 24px 14px;
    scrollbar-width:none;
  }
  .pid-v2-preview .find-grid::-webkit-scrollbar{display:none;}
  .pid-v2-preview .find-card{flex:0 0 82%;scroll-snap-align:center;}
  .pid-v2-preview .find-dots{display:flex;}

  .pid-v2-preview .sec-head{margin-bottom:26px;}
  .pid-v2-preview .hiw-grid{gap:6px;}
  .pid-v2-preview .hiw-step{margin-top:32px;padding:16px 20px 18px;}
  .pid-v2-preview .hiw-step .badge{width:38px;height:38px;font-size:15px;margin:-37px auto 10px;border-width:3px;}
  .pid-v2-preview .hiw-step p{margin-top:6px;}

  /* mobile result card: tall photo on top, meta stacked underneath */
  .pid-v2-preview .res-media{height:auto;aspect-ratio:25/22;}
  .pid-v2-preview .res-media::after{display:none;}
  .pid-v2-preview .res-media-foot{background:rgba(18,20,28,.9);padding:5px 16px;font-size:13px;opacity:.6;}
  .pid-v2-preview .res-count{font-size:12.5px;}
  .pid-v2-preview .res-save{top:14px;right:14px;width:36px;height:36px;border-radius:11px;border-color:var(--line);color:var(--ink);}
  .pid-v2-preview .res-save svg{width:16px;height:16px;}

  .pid-v2-preview .res-body{display:flex;flex-direction:column;padding:16px 16px 14px;}
  .pid-v2-preview .res-society{order:1;padding-right:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
  .pid-v2-preview .res-price-row{order:2;margin-top:11px;gap:6px;}
  .pid-v2-preview .res-title{order:3;margin-top:13px;font-size:15.5px;}
  .pid-v2-preview .res-loc{order:4;margin-top:9px;font-size:13px;}
  .pid-v2-preview .res-specs{display:none;}

  .pid-v2-preview .res-price{font-size:19px;}
  .pid-v2-preview .res-price span{font-size:12.5px;}
  .pid-v2-preview .res-verified{font-size:10.5px;padding:4px 9px 4px 6px;gap:4px;}
  .pid-v2-preview .res-verified svg{width:11px;height:11px;}
  .pid-v2-preview .res-pid{
    position:static;margin-left:auto;clip-path:none;border-radius:100px;
    background:#FFF0EA;color:var(--brand-1);font-size:11.5px;padding:5px 9px;
  }
  .pid-v2-preview .res-pid b{color:var(--brand-1);}

  .pid-v2-preview .res-foot{background:#fff;padding:12px 16px 16px;gap:10px;}
  .pid-v2-preview .res-btn.call{flex:1;padding:12px 10px;font-size:14px;}
  .pid-v2-preview .res-icon-btn{width:46px;height:44px;}
  .pid-v2-preview .res-icon-btn.share{background:#F5F5F8;border-color:#ECECF2;}
}

/* ---------- Tenant Plans (.pln3-page) ---------- */
@media (min-width:768px){
  .pln3-page .pln3-features summary{cursor:default;pointer-events:none;}
  .pln3-page .pln3-features summary span{display:none;}
}
@media (max-width:1000px){
  .pln3-page .pln3-t-card{flex:0 0 calc(50% - 11px);}
}
@media (max-width:700px){
  /* Card grid itself is left to repeat(auto-fit,minmax(228px,1fr)) - same
     as the reference, which has no breakpoints at all and lets the grid
     collapse to one column naturally once a row can't fit two 228px
     cards plus the gap. */
  .pln3-page .pln3-testimonial-band{margin-left:-16px;margin-right:-16px;padding:32px 16px;}
  .pln3-page .pln3-t-card{flex:0 0 82%;}
  .pln3-page .pln3-faq{margin-top:44px;}
  .pln3-page .pln3-faq-side{position:static;}
}

/* Search by PID collapses to its icon before the header gets tight; the title
   attribute carries the meaning. Below 767px the desktop header is hidden
   entirely and hp-header-mobile takes over, which has no PID entry point. */
@media (max-width: 900px) {
  .hp-preview .hp-pid-btn span { display: none; }
  .hp-preview .hp-pid-btn { padding: 7px 10px; }
}