/* ==========================================================================
   MyCabin Homes with Plot Page Pack — frontend.css
   Clean-room build from source-design/homes-with-plot-original.zip. Every
   rule is scoped under .pp-homes-with-plot-clean (Page Pack Spec §5).
   Single breakpoint, min-width: 900px, matching the source exactly
   (styles.css §15).
   ========================================================================== */

.pp-homes-with-plot-clean {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-surface:      var(--pp-beige);
  --pp-olive:        #6E5C3C;

  --pp-good:      #4F7A44;
  --pp-good-soft: #E3ECD9;
  --pp-bad:       #B0463F;
  --pp-bad-soft:  #F6DEDE;

  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  --pp-tint-line:        color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint));
  --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint));

  --pp-ink-72:  color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-ink-56:  color-mix(in oklab, var(--pp-ink) 65%, transparent);
  --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent);

  --pp-maxw:    1280px;
  --pp-gutter:  clamp(18px, 4vw, 40px);
  --pp-hdr-h:   clamp(58px, 7vw, 74px);
  --pp-sec-y-p: clamp(48px, 7vw, 104px);

  --pp-rail-pad: max(var(--pp-gutter), calc((100% - var(--pp-maxw)) / 2 + var(--pp-gutter)));

  --pp-r-pill: 999px;
  --pp-r-lg:   10px;
  --pp-r-md:   9px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;
  --pp-t-slow: .35s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bone);
  overflow-x: clip;
}

.pp-homes-with-plot-clean, .pp-homes-with-plot-clean *, .pp-homes-with-plot-clean ::before, .pp-homes-with-plot-clean ::after {
  box-sizing: border-box;
}

/* Fine paper grain, matching every other page's own body::after exactly
   (styles.css §02 BASE/RESET — shared, site-wide, not page-specific). */
.pp-homes-with-plot-clean::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: radial-gradient(color-mix(in oklab, var(--pp-ink) 55%, transparent) .5px, transparent .5px);
  background-size: 3px 3px;
}

.pp-homes-with-plot-clean h1, .pp-homes-with-plot-clean h2, .pp-homes-with-plot-clean h3, .pp-homes-with-plot-clean h4,
.pp-homes-with-plot-clean p, .pp-homes-with-plot-clean figure {
  margin: 0;
}
/* Real WordPress typography-cascade lesson (Master Workflow §44): the
   active theme's own generated global-styles block can declare a direct
   rule on h1-h6/.wp-block-button__link, which always wins over this
   pack's own inherited Poppins regardless of that rule's own specificity.
   Source sets font-family exactly once, on <body>, with no separate
   heading/button override anywhere — applied from the start this round. */
.pp-homes-with-plot-clean h1, .pp-homes-with-plot-clean h2, .pp-homes-with-plot-clean h3, .pp-homes-with-plot-clean h4,
.pp-homes-with-plot-clean .wp-block-button__link, .pp-homes-with-plot-clean .wp-element-button {
  font-family: inherit;
}
.pp-homes-with-plot-clean a { color: var(--pp-ink); text-decoration: none; }
.pp-homes-with-plot-clean a:hover { color: var(--pp-accent); }
.pp-homes-with-plot-clean img { max-width: 100%; }
.pp-homes-with-plot-clean button { font: inherit; color: inherit; }
.pp-homes-with-plot-clean input { font: inherit; }

.pp-homes-with-plot-clean .pp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pp-homes-with-plot-clean .pp-no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.pp-homes-with-plot-clean .pp-no-bar::-webkit-scrollbar { display: none; }


/* ==========================================================================
   WordPress block-gap / flow-margin protection
   --------------------------------------------------------------------------
   Every container below owns its own child spacing entirely through flex
   `gap`/grid `gap`, through each child's own padding/border, or through a
   specific per-child margin override further down this file (each of
   those carries its own !important, per the same reasoning) — a stray
   WordPress-injected margin on any non-first child here is never
   legitimate design spacing. See Master Workflow §17 and §45: this list
   is written comprehensively from the start, covering every conditionally-
   visible component (the compare cards, the plot list) unconditionally
   across all children — not keyed to which child a filter/tab currently
   shows as first-visible (Homes Overview Clean's own v1.0.0→v1.0.1
   lesson).
   ========================================================================== */
.pp-homes-with-plot-clean > *,
.pp-homes-with-plot-clean .pp-hwp-hero__text > *,
.pp-homes-with-plot-clean .pp-hwp-hero__btns > *,
.pp-homes-with-plot-clean .pp-hwp-nbhd-grid > *,
.pp-homes-with-plot-clean .pp-hwp-nbhd-card > *,
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__media > *,
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__body > *,
.pp-homes-with-plot-clean .pp-hwp-stats > *,
.pp-homes-with-plot-clean .pp-stat > *,
.pp-homes-with-plot-clean .pp-hwp-intro > *,
.pp-homes-with-plot-clean .pp-hwp-map-row > *,
.pp-homes-with-plot-clean .pp-hwp-map-col > *,
.pp-homes-with-plot-clean .pp-hwp-plots-col > *,
.pp-homes-with-plot-clean .pp-hwp-plots__head > *,
.pp-homes-with-plot-clean .pp-plot-list > *,
.pp-homes-with-plot-clean .pp-plot-row > *,
.pp-homes-with-plot-clean .pp-plot-row__status > *,
.pp-homes-with-plot-clean .pp-plot-row__meta > *,
.pp-homes-with-plot-clean .pp-hwp-reserve-cta-section > *,
.pp-homes-with-plot-clean .pp-hwp-reserve-cta > *,
.pp-homes-with-plot-clean .pp-hwp-reserve-cta__copy > *,
.pp-homes-with-plot-clean .pp-hwp-feature__row > *,
.pp-homes-with-plot-clean .pp-hwp-feature__body > *,
.pp-homes-with-plot-clean .pp-section--p .pp-wrap > *,
.pp-homes-with-plot-clean .pp-hwp-house-box > *,
.pp-homes-with-plot-clean .pp-rail > *,
.pp-homes-with-plot-clean .pp-model > *,
.pp-homes-with-plot-clean .pp-model__body > *,
.pp-homes-with-plot-clean .pp-model__specs > *,
.pp-homes-with-plot-clean .pp-model__price-wrap > *,
.pp-homes-with-plot-clean .pp-hwp-gallery-section .pp-wrap > *,
.pp-homes-with-plot-clean .pp-hwp-gallery-box > *,
.pp-homes-with-plot-clean .pp-hwp-amenities-section .pp-wrap > *,
.pp-homes-with-plot-clean .pp-hwp-amenity-grid > *,
.pp-homes-with-plot-clean .pp-hwp-amenity > *,
.pp-homes-with-plot-clean .pp-hwp-amenity__row > *,
.pp-homes-with-plot-clean .pp-hwp-amenity__icon > *,
.pp-homes-with-plot-clean .pp-hwp-compare-section .pp-wrap > *,
.pp-homes-with-plot-clean .pp-hwp-compare > *,
.pp-homes-with-plot-clean .pp-hwp-compare__card > *,
.pp-homes-with-plot-clean .pp-hwp-compare__head > *,
.pp-homes-with-plot-clean .pp-hwp-compare__row > *,
.pp-homes-with-plot-clean .pp-hwp-compare__row-inner > *,
.pp-homes-with-plot-clean .pp-hwp-compare__value > *,
.pp-homes-with-plot-clean .pp-hwp-compare__icon > *,
.pp-homes-with-plot-clean .pp-faq--tint > *,
.pp-homes-with-plot-clean .pp-faq--tint .pp-wrap > *,
.pp-homes-with-plot-clean .pp-faq-cols > *,
.pp-homes-with-plot-clean .pp-faq-col > *,
.pp-homes-with-plot-clean .pp-faq > *,
.pp-homes-with-plot-clean .pp-dark-cta > *,
.pp-homes-with-plot-clean .pp-dark-cta__copy > *,
.pp-homes-with-plot-clean .pp-dark-cta__btns > *,
.pp-homes-with-plot-clean .wp-block-buttons > .wp-block-button {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ==========================================================================
   Layout helpers
   ========================================================================== */
.pp-homes-with-plot-clean .pp-wrap {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}
.pp-homes-with-plot-clean .pp-section--p { padding-block: var(--pp-sec-y-p); }


/* ==========================================================================
   Type
   ========================================================================== */
.pp-homes-with-plot-clean .pp-h1 { font-size: clamp(34px, 8.6vw, 46px); line-height: 1.06; letter-spacing: -.026em; font-weight: 500; }
.pp-homes-with-plot-clean .pp-h2 { font-size: clamp(30px, 6.4vw, 58px); line-height: 1.04; letter-spacing: -.022em; font-weight: 500; }
.pp-homes-with-plot-clean .pp-h2--xs { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; }
.pp-homes-with-plot-clean .pp-h2--p { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; }
.pp-homes-with-plot-clean .pp-h3 { font-size: clamp(19px, 2.4vw, 22px); font-weight: 500; letter-spacing: -.018em; }
.pp-homes-with-plot-clean .pp-h3--card { font-size: clamp(24px, 3.8vw, 31px); letter-spacing: -.02em; }
.pp-homes-with-plot-clean .pp-lead { font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--pp-ink-72); font-weight: 300; }
.pp-homes-with-plot-clean .pp-body { font-size: 16px; line-height: 1.5; color: var(--pp-ink-72); font-weight: 300; }
.pp-homes-with-plot-clean .pp-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-mw-16 { max-width: 16ch; }
.pp-homes-with-plot-clean .pp-mw-18 { max-width: 18ch; }
.pp-homes-with-plot-clean .pp-mw-20 { max-width: 20ch; }


/* ==========================================================================
   Buttons, pills, links, icons
   ========================================================================== */
.pp-homes-with-plot-clean .wp-block-button .wp-block-button__link,
.pp-homes-with-plot-clean .pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 21px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-homes-with-plot-clean .pp-btn-ink .wp-block-button__link, .pp-homes-with-plot-clean .pp-btn.pp-btn-ink { background: var(--pp-ink); color: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-btn-ink .wp-block-button__link:hover, .pp-homes-with-plot-clean .pp-btn.pp-btn-ink:hover { background: var(--pp-accent); color: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-btn-light .wp-block-button__link { background: var(--pp-bone); color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-btn-outline .wp-block-button__link { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); }
.pp-homes-with-plot-clean .pp-btn-outline .wp-block-button__link:hover { background: var(--pp-surface); color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-btn-ghost .wp-block-button__link {
  background: color-mix(in oklab, var(--pp-ink) 30%, transparent);
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-60);
}
.pp-homes-with-plot-clean .pp-btn-ghost .wp-block-button__link:hover {
  background: color-mix(in oklab, var(--pp-bone) 14%, transparent);
  border-color: var(--pp-bone);
  color: var(--pp-bone);
}
.pp-homes-with-plot-clean .pp-btn-48 .wp-block-button__link { height: 38px; padding-inline: 19px; }

.pp-homes-with-plot-clean .pp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.pp-homes-with-plot-clean .pp-link-arrow a { display: inline-flex; align-items: center; gap: 10px; }
.pp-homes-with-plot-clean .pp-link-arrow a:hover { color: var(--pp-accent); }
.pp-homes-with-plot-clean .pp-icon { flex: 0 0 auto; }

.pp-homes-with-plot-clean .pp-link--on-dark {
  color: var(--pp-bone);
  text-decoration: underline;
}
.pp-homes-with-plot-clean .pp-link--on-dark:hover { color: var(--pp-accent-soft); }

.pp-homes-with-plot-clean .pp-iconbtn {
  position: relative;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-ink-line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-homes-with-plot-clean .pp-iconbtn:hover { background: var(--pp-ink); color: var(--pp-bone); border-color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-iconbtn:disabled { opacity: .35; cursor: default; }
.pp-homes-with-plot-clean .pp-iconbtn:disabled:hover { background: transparent; color: inherit; border-color: var(--pp-ink-line); }
.pp-homes-with-plot-clean .pp-iconbtn--44 { width: 35px; height: 35px; }

.pp-homes-with-plot-clean .pp-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-ink-line);
  background: transparent;
  color: var(--pp-ink);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-homes-with-plot-clean .pp-tab[aria-selected="true"] { background: var(--pp-ink); border-color: var(--pp-ink); color: var(--pp-bone); }

/* --- Badge / status pill --------------------------------------------------
   .pp-badge--live's dot is CSS-owned (::before), reproducing the source's
   own literal <span class="dot"> without needing raw nested markup inside
   a paragraph's RichText content for a purely decorative indicator. */
.pp-homes-with-plot-clean .pp-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--pp-r-pill);
  font-size: 12px;
  white-space: nowrap;
}
/* Only --live carries the small-caps treatment (source: .badge--live)
   — --soon deliberately stays the plain base .badge typography (source:
   .badge--soon overrides background/color/border only). Both were
   incorrectly merged onto the shared .pp-badge base in v1.0.0, forcing
   "Coming soon" into uppercase/bold/letter-spaced when source renders it
   in plain mixed-case text. */
.pp-homes-with-plot-clean .pp-badge--live {
  background: var(--pp-accent-soft);
  color: var(--pp-ink);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pp-homes-with-plot-clean .pp-badge--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-good);
  margin-right: 6px;
  flex: none;
}
.pp-homes-with-plot-clean .pp-badge--soon {
  background: color-mix(in oklab, var(--pp-bone) 90%, transparent);
  color: var(--pp-ink-72);
  border: 1px solid var(--pp-ink-line);
}


/* ==========================================================================
   Hero — plain text band, no photo (same idea as the site's other
   photo-less hero bands). Only the text is capped (.hwp-hero__text),
   matching the source's own established fix — capping .hwp-hero__inner
   itself would pull the whole hero into a narrow centred column instead
   of the left-aligned, gutter-matched band the source intends.
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-hero {
  padding: calc(var(--pp-hdr-h) + clamp(40px, 8vw, 68px)) 0 clamp(32px, 5vw, 48px);
  background: var(--pp-surface);
}
.pp-homes-with-plot-clean .pp-hwp-hero__text { max-width: 640px; }
.pp-homes-with-plot-clean .pp-hwp-hero h1.pp-h1 { max-width: 18ch; }
.pp-homes-with-plot-clean .pp-hwp-hero .pp-lead { margin-top: 16px !important; max-width: 54ch; font-size: clamp(14px, 2.4vw, 17px); line-height: 1.65; }
.pp-homes-with-plot-clean .pp-hwp-hero__btns { margin-top: clamp(20px, 3vw, 26px) !important; display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* .wp-block-buttons/.wp-block-button explicit width, alongside the link —
   root-caused via direct real-staging DOM inspection (2026-09-04): the
   real WordPress core Buttons block ships its own "flex layout" support,
   giving `.wp-block-buttons` a real, unconditional `display:flex;
   flex-direction:row` (class `is-layout-flex`) regardless of this page's
   own CSS — invisible in the local harness, which never replicates this
   block-support-generated behavior. Since `.wp-block-buttons` is itself a
   row-direction flex container, its single `.wp-block-button` child does
   not auto-stretch on the main (width) axis by default (flex-grow:0),
   shrinking to its own button text's intrinsic width (measured 197px of
   a 460px-wide row on real staging) even though `.pp-hwp-hero__btns`
   itself (one level up, column-direction) was already correctly full
   width. `.pp-model__actions`/`.pp-dark-cta__btns` already carried this
   same `.wp-block-buttons`/`.wp-block-button` rule (added for a different
   reason in v1.0.4), which is why they were already unaffected — hero
   was the one remaining case missing it. */
.pp-homes-with-plot-clean .pp-hwp-hero__btns .wp-block-buttons,
.pp-homes-with-plot-clean .pp-hwp-hero__btns .wp-block-button { width: 100%; }
.pp-homes-with-plot-clean .pp-hwp-hero__btns .wp-block-button__link { width: 100%; }


/* ==========================================================================
   Neighbourhood selector
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-nbhd-section { padding: clamp(40px, 6vw, 56px) 0 var(--pp-sec-y-p); }
.pp-homes-with-plot-clean .pp-hwp-nbhd-section > .pp-wrap > .pp-eyebrow { margin-bottom: clamp(14px, 2vw, 18px) !important; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-grid { margin-top: clamp(14px, 2vw, 18px); display: grid; grid-template-columns: 1fr; gap: 20px; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card { border: 1px solid var(--pp-ink-line); border-radius: var(--pp-r-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__media { position: relative; aspect-ratio: 16 / 10; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__img { margin: 0; position: absolute; inset: 0; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__badge { position: absolute; top: 14px; right: 14px; z-index: 2; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__body { padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 26px) clamp(24px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__cta { margin-top: auto !important; min-height: 40px; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--pp-ink-72); }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__stats b { color: var(--pp-ink); font-weight: 500; }
/* margin-top on the known children (not `gap`) is deliberate: real-
   staging investigation of a reported "card grows on input focus" defect
   traced it to a password-manager browser extension (confirmed: NordPass)
   injecting its own `<nordpass-icon>` custom element as an extra flex
   child of this row when the email input gains focus — the injected
   element itself is height:0, but `gap` applies once per *pair* of
   children regardless of any one child's own height, so 3→4 children
   silently added one more 10px gap, growing this form (and, since both
   neighbourhood cards stretch to match the taller one, the whole card
   row) by 10px. Removing this element confirmed the page's own code
   causes 0px shift on its own. Margin-top on the two real, known
   children is immune to this specific mechanism: an extra injected
   sibling of any height no longer triggers a phantom extra gap, since
   there is no child-count-dependent spacing left to trigger. This
   cannot defend against every conceivable extension behaviour (one that
   injects a visibly tall element will still take up its own space,
   unavoidably), but it removes the specific gap-counting mechanism this
   round's own reproduction actually hit. */
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture { margin-top: 4px; display: flex; flex-direction: column; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture input { margin-top: 0 !important; }
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn { margin-top: 10px !important; }
/* !important on the properties that lose to it: real WordPress ships a
   global input rule (`input:not([type="submit"]):not([type="checkbox"])
   :not([type="radio"]):not([type="range"])`) whose four :not() clauses
   push its specificity past this rule's own two classes + tag, confirmed
   via direct matched-stylesheet inspection on real staging — not every
   declaration loses (height/font-family survive on specificity alone),
   only padding/border-radius/border-color/font-size do. */
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture input {
  width: 100%;
  height: 44px;
  border-radius: var(--pp-r-pill) !important;
  border: 1px solid var(--pp-ink-line) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-family: inherit;
  box-sizing: border-box;
}
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture input::placeholder {
  color: var(--pp-ink-56);
  opacity: 1;
}
.pp-homes-with-plot-clean .pp-hwp-nbhd-card__capture .pp-btn { width: 100%; }


/* ==========================================================================
   Scope flag
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-scope-wrap { margin-top: 0; }
.pp-homes-with-plot-clean .pp-hwp-scope {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--pp-ink-56);
  scroll-margin-top: calc(var(--pp-hdr-h) + 16px);
}


/* ==========================================================================
   Stats card — 2×2 at every width. Divider mechanism is grid-position-
   dependent (no border on the top row, a vertical rule between the two
   columns), not conditional on any filter/visibility state, so a plain
   nth-child selector is safe and correct here — kept CSS-owned rather
   than migrated to native separators, since the same element also needs
   to carry the border-right vertical rule a standalone <hr> cannot.
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-stats-wrap { position: relative; z-index: 4; }
.pp-homes-with-plot-clean .pp-hwp-stats {
  margin-top: clamp(20px, 3vw, 28px) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pp-bone);
  border-radius: var(--pp-r-lg);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--pp-ink) 16%, transparent);
  overflow: hidden;
}
.pp-homes-with-plot-clean .pp-stat {
  border-top: 1px solid var(--pp-ink-hair);
  padding: 12px clamp(14px, 4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pp-homes-with-plot-clean .pp-stat:nth-child(-n+2) { border-top: 0; }
.pp-homes-with-plot-clean .pp-stat:nth-child(odd) { border-right: 1px solid var(--pp-ink-hair); }
.pp-homes-with-plot-clean .pp-stat__num {
  display: flex;
  align-items: flex-end;
  min-height: 2.35em;
  font-size: clamp(20px, 6vw, 38px);
  line-height: 1.15;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
}
.pp-homes-with-plot-clean .pp-stat__num--static { font-weight: 300; }
.pp-homes-with-plot-clean .pp-stat__lbl { font-size: 9.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-ink-56); }


/* ==========================================================================
   Intro strip
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-intro {
  padding: var(--pp-sec-y-p) 0 clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(24px, 5vw, 56px);
}
/* v1.0.8 — real core/separator (Issue 3), sibling of .pp-hwp-intro inside
   the same .pp-wrap rather than a border on .pp-hwp-intro itself, so it is
   independently selectable/duplicatable/deletable in Gutenberg. .pp-hwp-
   intro's own bottom padding is unchanged and already provides the exact
   same gap the border used to sit flush against, so the rule needs no
   extra margin of its own. */
/* v1.0.14: now a ROOT-level block (full viewport width on mobile/tablet), no longer inside the
   intro's padded .pp-wrap; see the desktop layer for the inset from 900px. */
.pp-homes-with-plot-clean .pp-hwp-intro__rule { border-top-width: 1px; border-color: var(--pp-ink-hair); margin: 0 !important; }
.pp-homes-with-plot-clean .pp-hwp-intro h2 { flex: 1 1 280px; max-width: 22ch; font-size: clamp(23px, 4.4vw, 34px); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-hwp-intro p { flex: 1 1 260px; max-width: 42ch; font-size: clamp(14px, 2.6vw, 15.5px); line-height: 1.7; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   Map + plot picker
   --------------------------------------------------------------------------
   .plot-list's own internal scroll at 900px+ (see desktop layer below) is
   a deliberate, source-justified nested scroller — Available plots stays
   independently scrollable beside the sticky map, not the document's own
   root scroller. Documented, not accidental (Master Workflow §11 overflow
   audit / Phase 11 of this round's own instructions).
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-map-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-surface); }
.pp-homes-with-plot-clean .pp-hwp-map-row { margin-top: clamp(24px, 4vw, 36px) !important; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
.pp-homes-with-plot-clean .pp-hwp-map-col { margin-inline: calc(-1 * var(--pp-gutter)); }
/* v1.0.14 -- the descriptive paragraph under "Izvēlies savu īpašumu" (added after the design:
   the source goes heading -> map). It is a direct child of .pp-hwp-map-col, which is pulled
   out by -gutter on mobile so the MAP can bleed to the viewport edges; only the heading was
   given its own gutter back (rule below), so the paragraph sat at x=0, and the blockGap
   neutraliser above (`.pp-hwp-map-col > *`, margin 0 !important) left no space between it
   and the map. Same gutter as the heading, the intro paragraph's typography, and a gap
   before the map (the map itself, its column and the plot list are untouched). */
.pp-homes-with-plot-clean .pp-hwp-map__lead {
  margin-inline: var(--pp-gutter);
  margin-bottom: clamp(20px, 2.6vw, 28px) !important;
  max-width: 62ch;
  font-size: clamp(14px, 2.6vw, 15.5px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--pp-ink-72);
}
.pp-homes-with-plot-clean .pp-hwp-map-col h2:has(+ .pp-hwp-map__lead) { margin-bottom: clamp(10px, 1.4vw, 14px) !important; }
.pp-homes-with-plot-clean .pp-hwp-map-col h2 { margin-inline: var(--pp-gutter); margin-bottom: clamp(16px, 2.4vw, 22px) !important; }
.pp-homes-with-plot-clean .pp-hwp-map__media { position: relative; aspect-ratio: 3000 / 1674; overflow: hidden; margin: 0; }
/* position:absolute + inset:0 (not just margin:0) is required here — a
   plain static figure has no explicit height of its own, so it shrinks
   to its own content (the img's natural-ratio rendered size), and a
   percentage height on the img inside then resolves against that
   auto-height parent per spec (i.e. is ignored, falling back to
   intrinsic sizing) instead of actually filling .pp-hwp-map__media's
   own aspect-ratio box. Absolutely positioning the figure against its
   position:relative media parent gives it a real, definite height for
   the img's own height:100% to resolve against — the same technique
   .pp-hwp-nbhd-card__img already used correctly. Confirmed via direct
   real-staging measurement: figure height was rendering at the image's
   own natural aspect ratio (auto), not the container's true height. */
.pp-homes-with-plot-clean .pp-hwp-map__img { margin: 0; position: absolute; inset: 0; }
.pp-homes-with-plot-clean .pp-hwp-map__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-homes-with-plot-clean .pp-hwp-map__dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--pp-r-pill); flex: none; margin-right: 6px; vertical-align: middle; }
.pp-homes-with-plot-clean .pp-hwp-map__dot--available { background: var(--pp-good); }
.pp-homes-with-plot-clean .pp-hwp-map__dot--sold { background: var(--pp-olive); }

.pp-homes-with-plot-clean .pp-hwp-plots__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: clamp(14px, 2vw, 18px) !important; }
.pp-homes-with-plot-clean .pp-hwp-plots__head h3 { font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-hwp-plots__head p { font-size: 14px; color: var(--pp-ink-72); font-weight: 300; }

.pp-homes-with-plot-clean .pp-plot-list { display: flex; flex-direction: column; }
.pp-homes-with-plot-clean .pp-plot-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; flex-wrap: wrap; }
/* v1.0.8 — real core/separator (Issue 3), a sibling of .pp-plot-row inside
   the column-flex .pp-plot-list (not a child of the row itself, since
   .pp-plot-row is a row-direction flex container — an <hr> child would
   become a flex item sitting inline with the row's own content instead of
   a horizontal divider above it) — omitted before the list's own first
   row, matching source's :first-child exemption. Needs no margin: each
   row's own unchanged 10px top/bottom padding already provides the same
   spacing the border used to sit flush against. */
.pp-homes-with-plot-clean .pp-plot-row-rule { border-top-width: 1px; border-color: var(--pp-ink-hair); margin: 0 !important; }
.pp-homes-with-plot-clean .pp-plot-row__num {
  flex: none;
  width: 23px; height: 23px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  color: var(--pp-accent);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px "Poppins", sans-serif;
}
.pp-homes-with-plot-clean .pp-plot-row__status { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-homes-with-plot-clean .pp-plot-row__status-line { display: flex; align-items: center; font: 500 12.5px "Poppins", sans-serif; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-plot-row__delivery { font-size: 11px; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-plot-row__type {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  color: var(--pp-accent);
  font-size: 11px;
  font-weight: 500;
}
.pp-homes-with-plot-clean .pp-plot-row__meta { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.pp-homes-with-plot-clean .pp-plot-row__price { font: 500 13.5px "Poppins", sans-serif; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-plot-row__size { font-size: 11px; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-plot-row__link { flex: 0 0 100%; margin-top: 1px !important; font-size: 11.5px; font-weight: 500; color: var(--pp-accent); }
.pp-homes-with-plot-clean .pp-plot-row__link a { color: inherit; }
.pp-homes-with-plot-clean .pp-plot-row__link:hover { color: var(--pp-ink); }


/* ==========================================================================
   Reserve-a-plot CTA
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-reserve-cta-section { padding: clamp(32px, 5vw, 48px) 0; background: var(--pp-tint); }
/* border-top-width explicit — WordPress core's own .wp-block-separator
   default (block-library CSS, not this pack's own) renders at 2px; source's
   equivalent (styles.css `border-block: 1px solid`) is 1px. Confirmed via
   direct computed-style inspection on real staging: border-color already
   won (this pack's own rule), but border-top-width stayed at core's 2px
   since this pack never set it. */
.pp-homes-with-plot-clean .pp-hwp-reserve-cta__rule { border-top-width: 1px; border-color: var(--pp-tint-line); }
.pp-homes-with-plot-clean .pp-hwp-reserve-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.pp-homes-with-plot-clean .pp-hwp-reserve-cta__copy h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 500; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-hwp-reserve-cta__copy p { margin-top: 6px !important; font-size: 14px; font-weight: 300; color: var(--pp-ink-72); }
/* .wp-block-buttons/.wp-block-button themselves, not just the link —
   .pp-hwp-reserve-cta is display:flex; flex-wrap:wrap in the ROW direction
   (matching source's own .hwp-reserve-cta), so width is the flex MAIN
   axis here, which does not auto-stretch by default (unlike a column-
   direction flex container, where width is the cross axis and stretches
   via default align-items:stretch — the reason .pp-hwp-hero__btns/
   .pp-dark-cta__btns buttons already came out full width with no
   equivalent fix). Without an explicit width, .wp-block-buttons shrinks
   to its own link's intrinsic content width instead of filling its own
   flex row — confirmed via direct DOM ancestor-chain inspection: the
   link's own width:100% was resolving against an already-shrunk
   .wp-block-buttons parent. */
.pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-buttons,
.pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-button { width: 100%; }
.pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-button__link { width: 100%; }


/* ==========================================================================
   Showcase rows ×3
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-feature { padding: var(--pp-sec-y-p) 0; }
.pp-homes-with-plot-clean .pp-hwp-feature--bone { background: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-hwp-feature--surface { background: var(--pp-surface); }
.pp-homes-with-plot-clean .pp-hwp-feature__row { display: flex; flex-direction: column; gap: clamp(24px, 5vw, 40px); }
.pp-homes-with-plot-clean .pp-hwp-feature__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--pp-r-lg); overflow: hidden; margin: 0; }
/* Same fix, same reason, as .pp-hwp-map__img above — confirmed via real
   staging measurement this was the actual root cause of the reported
   feature-row image-alignment discrepancies (all three rows share this
   one figure class). */
.pp-homes-with-plot-clean .pp-hwp-feature__img { margin: 0; position: absolute; inset: 0; }
.pp-homes-with-plot-clean .pp-hwp-feature__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-homes-with-plot-clean .pp-hwp-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pp-homes-with-plot-clean .pp-hwp-feature__title { font-size: clamp(22px, 4.6vw, 30px); line-height: 1.25; letter-spacing: -.02em; font-weight: 500; color: var(--pp-ink); max-width: 16ch; }
.pp-homes-with-plot-clean .pp-hwp-feature__body p { font-size: clamp(13.5px, 2.6vw, 15px); line-height: 1.7; font-weight: 300; color: var(--pp-ink-72); max-width: 42ch; }


/* ==========================================================================
   Rails — horizontal snap carousels. Base .pp-rail matches the shared
   mechanism already proven on Homepage Clean; --flush is this page's own
   variant (both house/gallery rails sit inside .pp-wrap already, full-
   bleed to the true viewport edge on mobile via a negative margin +
   matching padding + matching scroll-padding-left — the exact technique
   the source's own README documents, including the scroll-snap gotcha it
   solves: without the matching scroll-padding-left, `scroll-snap-align:
   start` auto-scrolls the rail back to 0 on load and silently cancels the
   position-preserving negative margin).
   ========================================================================== */
.pp-homes-with-plot-clean .pp-rail {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.pp-homes-with-plot-clean .pp-rail > * { scroll-snap-align: start; flex-shrink: 0; }

.pp-homes-with-plot-clean .pp-rail__controls {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pp-homes-with-plot-clean .pp-rail__progress {
  flex: 1 1 auto;
  max-width: 220px;
  height: 3px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-ink-line);
  overflow: hidden;
}
.pp-homes-with-plot-clean .pp-rail__thumb {
  height: 100%;
  border-radius: var(--pp-r-pill);
  background: var(--pp-ink);
  width: 25%;
  margin-left: 0;
  transition: width .3s ease, margin-left var(--pp-t-slow) var(--pp-ease);
}
.pp-homes-with-plot-clean .pp-rail__count { font-size: 13px; color: var(--pp-ink-56); font-variant-numeric: tabular-nums; }
.pp-homes-with-plot-clean .pp-rail__arrows { margin-left: auto; display: flex; gap: 8px; }

.pp-homes-with-plot-clean .pp-hwp-house-rail {
  margin-top: clamp(24px, 4vw, 36px) !important;
  padding-top: 8px;
  padding-bottom: 28px;
  margin-inline: calc(-1 * var(--pp-gutter));
  padding-inline: var(--pp-gutter);
  scroll-padding-left: var(--pp-gutter);
}
.pp-homes-with-plot-clean .pp-hwp-house-rail__controls { max-width: none; margin: clamp(16px, 2.4vw, 22px) 0 0 !important; padding-inline: clamp(20px, 3vw, 28px); }

.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model {
  flex: 0 0 min(78vw, 320px);
  background: var(--pp-bone);
  border-radius: var(--pp-r-md);
  box-shadow: 0 8px 28px color-mix(in oklab, var(--pp-ink) 10%, transparent);
  overflow: hidden;
}
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__media {
  position: relative;
  height: 250px;
  border-radius: var(--pp-r-md) var(--pp-r-md) 0 0;
  overflow: hidden;
  background: var(--pp-surface);
  margin: 0;
}
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
  box-sizing: border-box;
}
/* Each render file carries a different amount of built-in transparent
   margin — mc-l100 runs 11% larger to normalise apparent house height. */
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__media img[src*="mc-l100"] { transform: scale(1.11); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__media img[src*="mc-l80"]  { transform: scale(1.04); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__body { padding: clamp(18px, 2.4vw, 22px) clamp(18px, 2.4vw, 22px) clamp(20px, 2.6vw, 24px); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__desc { margin-top: 4px !important; font-size: 14px; font-weight: 500; color: var(--pp-accent); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__specs {
  display: flex;
  gap: 16px;
}
/* v1.0.8 — real core/separator (Issue 3), a sibling before .pp-model__specs
   rather than a border on the group itself (.pp-model__specs is a
   row-direction flex container — an <hr> child would become a flex item
   instead of a horizontal divider above it). margin recreates the exact
   same 25px gap the old margin-top(12) + border(1) + padding-top(12)
   produced, now split 12px above/below the rule itself. */
.pp-homes-with-plot-clean .pp-model__specs-rule { border-top-width: 1px; border-color: var(--pp-ink-hair); margin: 12px 0 !important; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__spec { display: flex; flex-direction: column; gap: 2px; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__spec b { font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--pp-ink); white-space: nowrap; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__spec span { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-ink-56); white-space: nowrap; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__price-wrap { margin-top: clamp(16px, 2.2vw, 20px) !important; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__price-eyebrow { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__price { margin-top: 4px !important; font-size: clamp(22px, 3vw, 26px); font-weight: 600; letter-spacing: -.018em; color: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__price-vat { margin-left: 7px; font-size: 13px; font-weight: 300; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions { margin-top: clamp(18px, 2.4vw, 22px) !important; padding-top: 0; display: flex; flex-direction: column; gap: 8px; }
/* .wp-block-buttons/.wp-block-button explicit width, alongside the link —
   defensive reinforcement matching the reserve-CTA fix's own mechanism
   (this container is column-direction flex, which auto-stretches width by
   default, so this is a belt-and-suspenders guarantee rather than a
   locally-reproducible bug fix). */
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-buttons,
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-button { width: 100%; }
.pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-button__link { width: 100%; height: 44px; font-size: 14px; }

.pp-homes-with-plot-clean .pp-hwp-gallery-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-hwp-gallery-section .pp-lead { margin-top: 10px !important; }
/* Qualified with its own section (not just the bare class) so this
   selector's specificity ties the section-level Flow-margin defense rule
   above (both 2 extra classes beyond the root) — a tie resolves by
   source order, and this rule comes later, so it correctly wins. The
   bare `.pp-hwp-gallery-box` selector (1 extra class) previously lost
   outright to `.pp-hwp-gallery-section .pp-wrap > *` (2 extra classes),
   even though both are !important — confirmed via direct real-staging
   inspection (computed margin-top was 0px, not the intended clamp()
   value) before this fix. See Master Workflow §45's own divider-margin
   lesson for the general mechanism. */
.pp-homes-with-plot-clean .pp-hwp-gallery-section .pp-hwp-gallery-box { margin-top: clamp(24px, 4vw, 36px) !important; }
.pp-homes-with-plot-clean .pp-hwp-gallery-rail { margin-inline: calc(-1 * var(--pp-gutter)); padding-inline: var(--pp-gutter); scroll-padding-left: var(--pp-gutter); padding-bottom: 8px; }
.pp-homes-with-plot-clean .pp-hwp-gallery-item { flex: 0 0 min(72vw, 300px); aspect-ratio: 3 / 4; border-radius: var(--pp-r-lg); overflow: hidden; background: var(--pp-surface); margin: 0; }
.pp-homes-with-plot-clean .pp-hwp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-homes-with-plot-clean .pp-hwp-gallery-rail__controls { max-width: none; margin: clamp(16px, 2.4vw, 22px) 0 0 !important; padding-inline: 0; }


/* ==========================================================================
   Life in Alderi (amenities)
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-amenities-section { padding: clamp(40px, 6vw, 64px) 0; background: var(--pp-surface); }
/* Same specificity-tie fix as .pp-hwp-gallery-box above. */
.pp-homes-with-plot-clean .pp-hwp-amenities-section .pp-hwp-amenity-grid { margin-top: clamp(18px, 3vw, 24px) !important; display: grid; grid-template-columns: 1fr; gap: 20px; }
/* .pp-hwp-amenity__row wraps the icon circle + heading as real sibling
   Gutenberg blocks (v1.0.7 — icon migrated from a raw <span><svg>
   embedded in the heading's own RichText to a genuine core/group +
   core/image, so it's independently selectable/duplicatable/replaceable;
   see the manifest's own v1.0.7 changelog note). Carries the same
   row-direction-with-gap layout the icon+heading pairing has always had
   — this class simply moves that role from the heading itself (which no
   longer has anything but its own text) to this new wrapper. */
.pp-homes-with-plot-clean .pp-hwp-amenity__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-homes-with-plot-clean .pp-hwp-amenity__head {
  font: 500 14px "Poppins", sans-serif;
  color: var(--pp-ink);
}
.pp-homes-with-plot-clean .pp-hwp-amenity__icon {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  color: var(--pp-accent);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pp-homes-with-plot-clean .pp-hwp-amenity__icon-img { margin: 0; line-height: 0; }
.pp-homes-with-plot-clean .pp-hwp-amenity__icon-img img { width: 16px; height: 16px; display: block; }
/* margin-top: 3px, not source's own 6px — deliberate, user-requested
   deviation from source (2026-09-04 mobile pass): measured as already
   byte-identical to source's own `.hwp-amenity p { margin-top: 6px }`
   value, but the user explicitly asked to tighten it further after
   reviewing real staging, and explicitly authorized deviating from
   source for this item. Desktop (900px+) keeps its own separate 2px
   value, untouched. */
.pp-homes-with-plot-clean .pp-hwp-amenity p { margin-top: 3px !important; padding-left: 44px; font-size: 12.5px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   Comparison
   ========================================================================== */
.pp-homes-with-plot-clean .pp-hwp-compare-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-bone); }

/* Qualified with the containing-section prefix (matching the same §45
   specificity-tie fix used elsewhere in this file) — .pp-compare-tabs-
   section is a direct child of .pp-hwp-compare-section .pp-wrap, which
   this file's own Flow-margin defense list zeroes via
   `.pp-hwp-compare-section .pp-wrap > *` (3 classes, specificity 0-3-0)
   with `!important`. The bare 2-class `.pp-compare-tabs-section` selector
   (0-2-0) loses to that on specificity regardless of `!important` on
   both sides; simply adding `!important` here was NOT sufficient — this
   selector must independently reach 3 classes to tie, then win on later
   source order. Confirmed via direct getComputedStyle inspection: margin-
   top computed 0px with `!important` alone, 20px once requalified. */
.pp-homes-with-plot-clean .pp-hwp-compare-section .pp-compare-tabs-section { margin-top: 20px !important; }
.pp-homes-with-plot-clean .pp-compare-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-homes-with-plot-clean .pp-hwp-compare__card.pp-is-hidden { display: none; }

/* Same specificity-tie fix as .pp-hwp-gallery-box above. */
.pp-homes-with-plot-clean .pp-hwp-compare-section .pp-hwp-compare { margin-top: clamp(24px, 4vw, 36px) !important; display: flex; flex-direction: column; gap: 20px; }
.pp-homes-with-plot-clean .pp-hwp-compare__card { flex: 1 1 0; min-width: 0; border-radius: var(--pp-r-lg); padding: clamp(22px, 3vw, 30px); }
.pp-homes-with-plot-clean .pp-hwp-compare__card--plain { background: var(--pp-bone); border: 1px solid var(--pp-ink-line); }
.pp-homes-with-plot-clean .pp-hwp-compare__card--accent {
  background: var(--pp-surface);
  border: 1px solid var(--pp-ink);
  box-shadow: 0 12px 32px color-mix(in oklab, var(--pp-ink) 12%, transparent);
}
/* min-height: 25px — mobile only (reset to none at 900px+ below), matching
   the accent card's own real measured head height (with its "Better
   choice" badge) so the plain card's own head (no badge) reserves the
   same vertical space. User-requested mobile toggle-stability pass
   (2026-09-04): the two cards' own real content — a badge on one head but
   not the other, and differing value-text lengths per row — means their
   natural heights differ, causing the page below to jump on the instant
   display:none/block toggle. Reserving equal head space here (and equal
   row space below) makes every row/head start at the same Y position in
   both card states, without touching source's own instant-swap mechanism
   or removing any content. Not applied at desktop, where both cards show
   simultaneously side-by-side and there is no toggle to stabilize. */
.pp-homes-with-plot-clean .pp-hwp-compare__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 25px; margin-bottom: clamp(16px, 2.4vw, 22px) !important; }
.pp-homes-with-plot-clean .pp-hwp-compare__head h3 { font: 500 13px "Poppins", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-ink-56); }
.pp-homes-with-plot-clean .pp-hwp-compare__badge { padding: 4px 11px; border-radius: var(--pp-r-pill); background: var(--pp-good-soft); color: var(--pp-good); font-size: 11.5px; font-weight: 500; }
/* v1.0.8 — the per-row divider is now a real core/separator
   (.pp-hwp-compare__row-rule, first child of .pp-hwp-compare__row,
   omitted on each card's own first row/Price to match source's
   :first-of-type exemption) instead of a CSS border-top, so it is
   independently selectable/duplicatable/deletable in Gutenberg (Issue 3).
   .pp-hwp-compare__row itself is now a plain block wrapper around
   [rule?, .pp-hwp-compare__row-inner] — the label/value flex pair that
   used to live directly on .pp-hwp-compare__row moved to the new
   .pp-hwp-compare__row-inner child below, since a real <hr> can't be a
   flex sibling of the label/value pair without becoming one itself. */
.pp-homes-with-plot-clean .pp-hwp-compare__row { padding: 0 0 12px 0; }
.pp-homes-with-plot-clean .pp-hwp-compare__row-rule { border-top-width: 1px; border-color: var(--pp-ink-hair); margin: 0 0 12px 0 !important; }
.pp-homes-with-plot-clean .pp-hwp-compare__card--accent .pp-hwp-compare__row-rule { border-color: var(--pp-tint-line); }
.pp-homes-with-plot-clean .pp-hwp-compare__row-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
/* Per-row min-height, mobile only (reset to none at 900px+ below) — same
   toggle-stability pass as .pp-hwp-compare__head above. Both cards list
   the same 6 metrics in the same order (Price/Parking/Land/Management
   fee/Privacy/Nature — a fixed design invariant, not user-reorderable
   editor content), but each card's own value text wraps to a different
   number of lines at the same width (e.g. apartment's "Neighbours above,
   below, beside" vs mycabin's "Only next door" in the same Privacy row).
   Each row's own min-height is set to the taller of its two real,
   measured heights across both cards (45px content rows stay 45px; rows
   where either card's text wraps to 2 lines become 65px in BOTH cards),
   so row N starts at the same Y position and has the same height
   regardless of which card is currently shown. Kept mobile-only in
   v1.0.8 (desktop alignment is now handled by the shared-row-track
   subgrid mechanism below, not by these fixed pixel values). */
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(2),
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(3),
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(4) { min-height: 45px; }
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(5),
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(6),
.pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(7) { min-height: 65px; }
.pp-homes-with-plot-clean .pp-hwp-compare__label { font-size: 13.5px; font-weight: 500; color: var(--pp-ink); }
/* .pp-hwp-compare__value is now a real core/group wrapping the value
   text and the status marker as two independent sibling blocks (v1.0.7 —
   the ✓/✕ migrated from a <span> embedded in the value paragraph's own
   RichText to a genuine core/group + core/paragraph, independently
   selectable/duplicatable/replaceable; see the manifest's own v1.0.7
   changelog note). Same flex/gap/alignment role it always had; the
   text-align/font-size/font-weight/color that used to apply directly to
   this element's own text now live on .pp-hwp-compare__value-text below,
   since this wrapper no longer contains text directly. */
.pp-homes-with-plot-clean .pp-hwp-compare__value { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pp-homes-with-plot-clean .pp-hwp-compare__value-text { text-align: right; font-size: 13px; font-weight: 300; color: var(--pp-ink-72); }
.pp-homes-with-plot-clean .pp-hwp-compare__icon { flex: none; width: 18px; height: 18px; border-radius: var(--pp-r-pill); display: inline-flex; align-items: center; justify-content: center; }
.pp-homes-with-plot-clean .pp-hwp-compare__icon-glyph { font-size: 11px; line-height: 1; }
.pp-homes-with-plot-clean .pp-hwp-compare__icon--bad { background: var(--pp-bad-soft); color: var(--pp-bad); }
.pp-homes-with-plot-clean .pp-hwp-compare__icon--good { background: var(--pp-good-soft); color: var(--pp-good); }


/* ==========================================================================
   FAQ — same .pp-faq-cols/.pp-faq/.pp-faq__q/.pp-faq__a mechanism already
   proven on Homes Overview Clean, with every .pp-faq carrying its own
   native core/separator as first child (matching source: EVERY item has
   a top rule, including the first — no first-child exemption, unlike a
   conditional divider). Exclusive accordion — see frontend.js — is the
   one behavioural difference from Homes Overview's own non-exclusive FAQ.
   ========================================================================== */
/* border-block, migrated to two native core/separator siblings (top/
   bottom band edges) — omitted entirely in v1.0.0 (a real fidelity gap,
   not a deliberate CSS-owned choice: source's own .faq--tint carries
   `border-block: 1px solid var(--tint-line)`, matching the established
   How It Works Clean tint-band pattern exactly). */
.pp-homes-with-plot-clean .pp-faq--tint { padding: clamp(56px, 8vw, 100px) 0; background: var(--pp-tint); }
/* border-top-width explicit — same real-WP-core-2px-vs-source-1px fix as
   .pp-hwp-reserve-cta__rule above. */
.pp-homes-with-plot-clean .pp-faq--tint__rule { border-top-width: 1px; border-color: var(--pp-tint-line); margin: 0 !important; }
/* Same specificity-tie fix as .pp-hwp-gallery-box above (§45 lesson). */
.pp-homes-with-plot-clean .pp-faq--tint .pp-faq-cols {
  margin-top: clamp(24px, 3.5vw, 36px) !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(28px, 5vw, 64px);
  align-items: start;
}
.pp-homes-with-plot-clean .pp-faq-col { display: flex; flex-direction: column; }
/* grid-column: 1 / -1 — source's own equivalent (styles.css §11.7,
   line 2822: `.faq--tint .faq-cols { border-bottom-color: ... }`) is a
   border on the .faq-cols CONTAINER itself, so it inherently spans the
   full grid width at any column count. This pack migrates that rule to
   a native core/separator sibling instead (Page Pack Spec's own
   preference for an editable block over an invisible CSS-only border —
   see the .pp-faq__rule precedent above), which makes it a genuine grid
   ITEM rather than the container's own border — without an explicit
   span it would default to occupying a single auto-placed cell once the
   grid switches to 2 columns at desktop, rendering only half-width.
   Explicit full-span keeps it visually identical to source at every
   column count. */
.pp-homes-with-plot-clean .pp-faq-cols__rule { grid-column: 1 / -1; border-top-width: 1px; border-color: var(--pp-tint-line-strong); margin: 0 !important; }
.pp-homes-with-plot-clean .pp-faq { border-top: 0; }
.pp-homes-with-plot-clean .pp-faq__rule { border-top-width: 1px; border-color: var(--pp-tint-line-strong); margin: 0 !important; }
.pp-homes-with-plot-clean .pp-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: color .2s;
}
.pp-homes-with-plot-clean .pp-faq__q:hover { color: var(--pp-accent); }
.pp-homes-with-plot-clean .pp-faq__q::after {
  content: "+";
  flex: 0 0 22px;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  color: var(--pp-ink-56);
  text-align: right;
}
.pp-homes-with-plot-clean .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; }
.pp-homes-with-plot-clean .pp-faq__a {
  padding: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pp-ink-72);
  font-weight: 300;
  max-width: 52ch;
  display: none;
}
.pp-homes-with-plot-clean .pp-faq.pp-is-open .pp-faq__a { display: block; }


/* ==========================================================================
   Closing CTA
   ========================================================================== */
.pp-homes-with-plot-clean .pp-dark-cta-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-ink); }
.pp-homes-with-plot-clean .pp-dark-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pp-homes-with-plot-clean .pp-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; }
.pp-homes-with-plot-clean .pp-dark-cta h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-homes-with-plot-clean .pp-dark-cta p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-homes-with-plot-clean .pp-dark-cta__note { margin-top: 2px !important; font-size: 13.5px; font-weight: 300; color: var(--pp-bone-60); }
.pp-homes-with-plot-clean .pp-dark-cta__btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* .wp-block-buttons/.wp-block-button explicit width — same defensive
   reinforcement as .pp-model__actions above. */
.pp-homes-with-plot-clean .pp-dark-cta__btns .wp-block-buttons,
.pp-homes-with-plot-clean .pp-dark-cta__btns .wp-block-button { width: 100%; }
.pp-homes-with-plot-clean .pp-dark-cta__btns .wp-block-button__link { width: 100%; }


/* ==========================================================================
   Desktop layer — the source's single breakpoint (styles.css §15,
   @media (min-width: 900px))
   ========================================================================== */
@media (min-width: 900px) {
  .pp-homes-with-plot-clean .pp-hwp-hero__text { max-width: 920px; }
  .pp-homes-with-plot-clean .pp-hwp-hero h1.pp-h1 { max-width: none; font-size: clamp(40px, 4.2vw, 58px); white-space: nowrap; }
  .pp-homes-with-plot-clean .pp-hwp-hero__btns { flex-direction: row; width: auto; max-width: 420px; }
  .pp-homes-with-plot-clean .pp-hwp-hero__btns .wp-block-button__link { width: auto; }
  .pp-homes-with-plot-clean .pp-hwp-hero__btns .wp-block-buttons { flex: 1 1 0; }

  .pp-homes-with-plot-clean .pp-hwp-nbhd-grid { grid-template-columns: 1fr 1fr; }

  .pp-homes-with-plot-clean .pp-hwp-stats .pp-stat { padding: 20px clamp(18px, 4vw, 26px); gap: 6px; }
  .pp-homes-with-plot-clean .pp-hwp-stats .pp-stat__num { font-size: clamp(28px, 4vw, 38px); }
  .pp-homes-with-plot-clean .pp-hwp-stats .pp-stat__lbl { font-size: 11px; }

  .pp-homes-with-plot-clean .pp-hwp-map-row { flex-direction: row; align-items: flex-start; }
  /* Sticky map column — see the required admin-bar/sticky-offset audit in
     the handoff doc; var(--wp-admin--admin-bar--height, 0px) applied only
     if real staging measurement proves this element's own offset needs
     it, never assumed from another page's own fix (Master Workflow §42). */
  .pp-homes-with-plot-clean .pp-hwp-map-col {
    flex: 0 0 calc(68% - 20px);
    min-width: 0;
    margin-inline: 0;
    position: sticky;
    top: calc(var(--pp-hdr-h) + 24px + var(--wp-admin--admin-bar--height, 0px));
  }
  .pp-homes-with-plot-clean .pp-hwp-map-col h2 { margin-inline: 0; }
  .pp-homes-with-plot-clean .pp-hwp-map__lead { margin-inline: 0; }
  /* v1.0.14: the intro hairline is a root-level (full-width) sibling since the paragraph/separator
     repair; from 900px it is inset to the same rail as the content (identical to before: the
     .pp-wrap content box). */
  .pp-homes-with-plot-clean .pp-hwp-intro__rule { margin-inline: var(--pp-rail-pad) !important; }
  .pp-homes-with-plot-clean .pp-hwp-map__media { border-radius: var(--pp-r-lg); }
  .pp-homes-with-plot-clean .pp-hwp-plots-col { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--pp-ink-line); padding-left: clamp(24px, 3vw, 32px); }
  /* Deliberate, source-justified nested vertical scroller — see the note
     above .pp-hwp-map-section and the handoff's overflow audit. */
  .pp-homes-with-plot-clean .pp-plot-list { max-height: 29vw; overflow-y: auto; padding-right: 6px; }

  .pp-homes-with-plot-clean .pp-hwp-feature__row { flex-direction: row; align-items: center; }
  .pp-homes-with-plot-clean .pp-hwp-feature__row.pp-hwp-feature__row--rev { flex-direction: row-reverse; }
  .pp-homes-with-plot-clean .pp-hwp-feature__media { flex: 1 1 0; }
  .pp-homes-with-plot-clean .pp-hwp-feature__body { flex: 1 1 0; }

  .pp-homes-with-plot-clean .pp-hwp-house-rail { overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
  .pp-homes-with-plot-clean .pp-hwp-gallery-rail { margin-inline: 0; padding-inline: 0; scroll-padding-left: 0; }
  .pp-homes-with-plot-clean .pp-hwp-gallery-item { flex-basis: 380px; }
  .pp-homes-with-plot-clean .pp-hwp-gallery-section { padding-top: clamp(20px, 3vw, 32px); }
  .pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-buttons,
  .pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-button { width: auto; }
  .pp-homes-with-plot-clean .pp-hwp-reserve-cta .wp-block-button__link { width: auto; }
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model { flex: 1 1 0; }
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__media { height: 300px; }
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions { flex-direction: row; gap: 8px; }
  /* .wp-block-buttons (the real flex item inside .pp-model__actions once
     it switches to row direction) has no own width rule from core, so it
     shrinks to its single button's own content width instead of filling
     the row — the button's own flex:1 1 0 then has nothing to grow into.
     Confirmed via direct real-staging inspection: the link itself
     correctly computed flex-grow:1, but its wrapping .wp-block-buttons
     was already clamped to 98px. Stretching .wp-block-buttons here fixes
     it structurally rather than fighting the symptom on the link alone. */
  /* Both wrapping layers need stretching, not just .wp-block-buttons:
     .wp-block-button (the actual flex item *inside* .wp-block-buttons,
     one level further in than it looks) is `display:block` and was
     still shrinking to its own link's content width even after
     .wp-block-buttons itself correctly stretched to fill the row —
     confirmed via direct real-staging inspection: .wp-block-buttons
     measured the correct 546px, but its own child .wp-block-button
     (and the link inside it) still measured 98px. */
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-buttons,
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-button { flex: 1 1 0; min-width: 0; width: 100%; }
  /* width:100%, not flex:1/auto — the link's own direct parent
     (.wp-block-button) is display:block, not a flex container, so
     flex-grow on the link itself has no effect there regardless of what
     value it's given; confirmed via direct real-staging inspection
     (every ancestor up to and including .wp-block-button correctly
     measured the full stretched width, but the link one level deeper
     still measured its own unstretched content width). width:100% fills
     the now-correctly-stretched .wp-block-button directly. */
  .pp-homes-with-plot-clean .pp-hwp-house-box .pp-model__actions .wp-block-button__link { width: 100%; min-width: 0; height: 42px; padding: 0 8px; font-size: 12.5px; }
  .pp-homes-with-plot-clean .pp-hwp-house-rail__controls { display: none; }

  /* Qualified with the same containing-section prefix as each base rule
     (Type/Layout sections above), not the bare class — CSS specificity
     is compared identically whether a rule sits inside @media or not,
     so once the BASE (mobile) rule for amenity-grid/compare/faq-cols was
     qualified to fix their own margin-top (the §45 specificity-tie fix,
     three sections up), these desktop overrides' own bare, now-less-
     specific selectors started LOSING to that base rule's own
     grid-template-columns:1fr/flex-direction:column — at every width,
     including 900px+, silently reverting all three components back to
     their own mobile single-column layout. This was a real, confirmed
     regression (not a new report): the desktop 5-column amenities row,
     the desktop side-by-side compare cards, and the desktop 2-column FAQ
     grid all collapsed to a single stacked column, discovered via a
     fresh source-vs-WP visual re-audit, not assumed from the earlier
     margin-only fix. Requalifying these three selectors to match their
     own base rule's specificity restores the intended cascade: the base
     rule wins on mobile (no competing rule in scope), and this
     media-query override — now equally specific and later in source
     order — correctly wins at 900px+. */
  .pp-homes-with-plot-clean .pp-hwp-amenities-section .pp-hwp-amenity-grid { grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 3vw, 28px); }
  .pp-homes-with-plot-clean .pp-hwp-amenity__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pp-homes-with-plot-clean .pp-hwp-amenity p { padding-left: 0; margin-top: 2px !important; }

  .pp-homes-with-plot-clean .pp-compare-tabs-section { display: none; }
  /* v1.0.8 — desktop row/divider alignment (Issue 2). Both cards' rows
     used to be sized independently (flex-direction:row on .pp-hwp-compare,
     each card an independent flex:1 1 0 column); real-staging measurement
     found every row on the accent (MyCabin Alderi) card sitting ~7.5px
     lower than the matching plain (Riga apartment) row, because the
     accent card's own head is taller (its "Better choice" badge) while
     both cards' rows are otherwise identical height — a single constant
     offset from the head that both cards' independent layouts had no way
     to reconcile (the v1.0.4-era equal-total-card-height fix coincidentally
     matched because the accent card's smaller bottom padding happened to
     absorb almost exactly that same offset, masking the true per-row
     misalignment). CSS Grid subgrid gives both cards a genuinely SHARED
     set of 7 row tracks (head + 6 rows) — each track is sized to the
     taller of its two cells, so corresponding rows/dividers land at
     identical Y positions on both cards regardless of future text/badge
     changes, with no hand-tuned pixel values. Mobile keeps the existing
     nth-child min-height mechanism unchanged (only one card is visible at
     a time there via .pp-is-hidden, so there is no second column for
     subgrid to size against). */
  .pp-homes-with-plot-clean .pp-hwp-compare-section .pp-hwp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, auto);
    column-gap: 20px;
    row-gap: 0;
  }
  .pp-homes-with-plot-clean .pp-hwp-compare__card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 7;
  }
  .pp-homes-with-plot-clean .pp-hwp-compare__card--plain { grid-column: 1; }
  .pp-homes-with-plot-clean .pp-hwp-compare__card--accent { grid-column: 2; }
  .pp-homes-with-plot-clean .pp-hwp-compare__card.pp-is-hidden { display: grid; }
  /* Undo the mobile-only toggle-stability min-heights above — both cards
     show simultaneously side-by-side at desktop, so there is no toggle to
     stabilize, and reserving the extra space here would just add unwanted
     empty room; the subgrid row tracks above now own desktop alignment. */
  .pp-homes-with-plot-clean .pp-hwp-compare__head { min-height: 0; }
  /* nth-child-qualified, matching the mobile rules' own specificity —
     a bare `.pp-hwp-compare__row` reset here loses to the more specific
     `:nth-child()` mobile rules above regardless of media-query order. */
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(2),
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(3),
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(4),
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(5),
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(6),
  .pp-homes-with-plot-clean .pp-hwp-compare__row:nth-child(7) { min-height: 0; }

  .pp-homes-with-plot-clean .pp-faq--tint .pp-faq-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 clamp(30px, 5vw, 72px); }

  .pp-homes-with-plot-clean .pp-dark-cta__btns { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  /* width:100%, not auto — source's own .btn is a direct grid item, so
     CSS Grid's own default justify-self:stretch fills each 1fr cell
     evenly regardless of each button's own text length (confirmed via
     direct source measurement: both buttons render at an identical
     162.36px despite different label lengths). This pack's own markup
     has one extra wrapping layer (.wp-block-buttons > .wp-block-button
     > the real link) between the grid container and the link — the
     stretch lands on that wrapper, not automatically on the link inside
     it, so the link itself needs its own width:100% to actually fill
     the now-equal-width wrapper (confirmed via direct real-staging
     inspection: the two buttons rendered 150.97px vs 162.36px wide
     before this fix, matching their own unequal text lengths exactly). */
  /* .wp-block-button (the actual grid item, one layer inside
     .wp-block-buttons) also needs its own width:100% — same missing-
     middle-layer issue as the house-card action button above. */
  .pp-homes-with-plot-clean .pp-dark-cta__btns .wp-block-button,
  .pp-homes-with-plot-clean .pp-dark-cta__btns .wp-block-button__link { width: 100%; }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pp-homes-with-plot-clean, .pp-homes-with-plot-clean *, .pp-homes-with-plot-clean ::before, .pp-homes-with-plot-clean ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Scroll reveal — matches every other page's own .pp-io-fade mechanism
   (frontend.js's shared IntersectionObserver). This page also uses it for
   the count-up stat numbers (.pp-stat__num-val[data-count] inside .pp-io-fade).
   ========================================================================== */
.pp-homes-with-plot-clean .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-homes-with-plot-clean .pp-io-fade.pp-in-view { opacity: 1; transform: none; }