/* ================= PSV2 HOME ================= */
/* Hero height is CAPPED. The mockup used a bare 88/92svh, which is fine on a
   typical laptop but balloons on very tall viewports (and in the Etch builder
   preview) into a huge dead zone above the copy. min() keeps the proportional
   feel on normal screens and stops it past the cap; because it is min-HEIGHT
   the hero still grows if the copy ever needs more room, so nothing clips. */
.psv2-hero{ position:relative; min-height:min(86svh,640px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; padding:0 var(--psv2-pad-x) 36px;
  & > *{ position:relative; z-index:2; }
}
@media (min-width: 56.25rem){ .psv2-hero{ min-height:min(88svh,720px); } }
.psv2-hero__bg{ position:absolute; inset:0; z-index:0;
  /* still + video are stacked: the still is the poster/fallback, the loop plays over it.
     object-position 45% keeps the golfer AND the screen edge in frame on narrow crops (mockup note). */
  & img,& video{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 45%; display:block; }
  & img{ filter:saturate(1.08) contrast(1.04); }   /* mockup grades the still, not the loop */
  & video{ z-index:1; }
  &::after{ content:""; position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg,rgba(17,17,17,.30) 0%,rgba(17,17,17,.55) 55%,rgba(17,17,17,.92) 100%); }
}
/* Mockup's stated reduced-motion behaviour: drop the loop, the still stands as the hero. */
@media (prefers-reduced-motion:reduce){
  .psv2-hero__bg video{ display:none; }
}
.psv2-hero__inner{ width:100%; max-width:var(--psv2-container); margin-inline:auto; }
.psv2-hero__title{ margin:0 0 16px; font-family:var(--psv2-display); font-size:var(--psv2-h1);
  font-weight:700; line-height:1.02; color:var(--psv2-text-hero);
  & em{ display:block; font-style:italic; color:var(--psv2-gold-em); }
}
.psv2-hero__price{ margin:16px 0 6px; font-family:var(--psv2-display); font-size:1.6rem;
  color:var(--psv2-gold-bright);
  & small{ font-family:var(--psv2-body); font-size:.9rem; color:var(--psv2-text-soft); }
}
.psv2-hero__rating{ display:flex; align-items:center; gap:8px; margin:0 0 18px;
  font-size:var(--psv2-sm); color:var(--psv2-text-soft);
  & .psv2-stars{ color:var(--psv2-gold); letter-spacing:2px; }
}
.psv2-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* Mockup's phone hero order: eyebrow → H1 → price → rating → CTAs → chips.
   (Its rule: [data-hero-wrap] h1{order:1} price{2} cta{3} chips{4,margin:16px 0 0}.) */
@media (max-width: 899px){
  .psv2-hero__inner{ display:flex; flex-direction:column; }
  .psv2-hero__title  { order:1; }
  /* The lede replaced the old price line in the hero. Without an explicit
     order it defaults to 0 and renders ABOVE the h1 on every phone — which is
     80.7% of this site's visitors. Caught on staging at 375px, 2026-08-19. */
  .psv2-hero__lede   { order:2; }
  .psv2-hero__price  { order:2; }
  .psv2-hero__rating { order:3; }
  .psv2-hero__actions{ order:4; }
  .psv2-hero__inner > .psv2-chiprow{ order:5; margin:16px 0 0; }
}

/* promo strip */
.psv2-promo{ position:relative; overflow:hidden; display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:16px 22px; text-align:center;
  padding:34px var(--psv2-pad-x);
  background:var(--psv2-glow), linear-gradient(180deg,#232323,#181818);
  border-block:1px solid var(--psv2-gold-border);
  & > *{ position:relative; z-index:1; }
}
/* The strip's three items need ~1100px including padding. Below that the CTA
   wraps alone under the badge+offer, which reads as broken rather than stacked.
   Go to a clean centred column instead of letting it half-wrap. */
@media (max-width: 1099px){
  .psv2-promo{ flex-direction:column; gap:14px; }
}
.psv2-promo__offer{ font-family:var(--psv2-display); font-size:1.3rem; color:var(--psv2-text-head);
  & s{ color:var(--psv2-text-muted); font-size:1rem; }
  & strong{ color:var(--psv2-gold-bright); font-weight:700; }
  & span{ font-family:var(--psv2-body); font-size:.85rem; color:var(--psv2-text-soft); }
}

/* trust row */
.psv2-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  padding:18px 20px; border-bottom:1px solid var(--psv2-hairline);
}
.psv2-trust__item{ display:flex; align-items:center; gap:7px;
  font-size:16px; color:var(--psv2-text-soft);
  & svg{ flex:none; } }

/* bay cards */
.psv2-bay{ display:flex; flex-direction:column; background:var(--psv2-surface-2);
  border:1px solid var(--psv2-hairline); border-radius:var(--psv2-radius); overflow:hidden;
  transition:border-color var(--psv2-t);
  &:hover{ border-color:var(--psv2-gold); }
}
.psv2-bay__media{ position:relative; aspect-ratio:16/10; background:var(--psv2-surface-3);
  & img,& video{ width:100%; height:100%; object-fit:cover; display:block; }
}
.psv2-bay__chips{ position:absolute; left:10px; top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.psv2-bay__body{ display:flex; flex-direction:column; gap:10px; padding:22px 20px; flex:1; }
.psv2-bay__title{ margin:0; font-family:var(--psv2-display); font-size:1.5rem; font-weight:700;
  color:var(--psv2-text-head);
  & small{ font-family:var(--psv2-body); font-size:.72rem; letter-spacing:1px;
    text-transform:uppercase; color:var(--psv2-text-muted); }
}
.psv2-bay__desc{ margin:0; font-size:var(--psv2-sm); line-height:1.65; color:var(--psv2-text-soft); }
.psv2-bay__price{ margin:0; font-family:var(--psv2-display); font-size:1.5rem; color:var(--psv2-gold-bright);
  & small{ font-family:var(--psv2-body); font-size:.78rem; color:var(--psv2-text-soft); }
}
.psv2-bay__link{ font-size:var(--psv2-sm); color:var(--psv2-gold); text-decoration:none;
  &:hover{ text-decoration:underline; }
}
.psv2-bay__foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }

/* differentiator */
/* Mockup: gold hairline, no fill, baseline-aligned. */
.psv2-math{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:14px;
  padding:16px 22px; border:1px solid var(--psv2-gold);
  border-radius:var(--psv2-radius); font-size:16px; color:var(--psv2-text-soft);
  & strong{ font-family:var(--psv2-display); font-size:clamp(22px,5vw,30px);
    color:var(--psv2-gold); font-weight:700; }
}

/* reviews */
/* DELIBERATE DEVIATION (Nick, 2026-08-14): the mockup butts this band straight
   against the differentiator card above and the How-It-Works eyebrow below —
   the section padding either side is 0 and 8. As a full-bleed tinted block it
   reads as cramped, so the band gets its own breathing room.
   NB: base + reset because Etch STRIPS :not(); and longhand margin-top/bottom
   because Etch also STRIPS the margin-block shorthand (padding-block survives). */
.psv2-reviews{ background:linear-gradient(180deg,var(--psv2-warm-a),var(--psv2-warm-b));
  border-block:1px solid var(--psv2-hairline-warm); padding:56px var(--psv2-pad-x);
  margin-top:56px; margin-bottom:56px; }
/* /the-lounge/ renders reviews as a card inside a plain section, not a full-bleed band. */
.psv2-reviews--card{ background:none; border-block:0; padding:64px var(--psv2-pad-x) 0;
  margin-top:0; margin-bottom:0;
  & > .psv2-container{ background:var(--psv2-surface-3); border:1px solid var(--psv2-hairline);
    border-radius:var(--psv2-radius); padding:26px 22px; }
}
.psv2-reviews__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:20px;
  & .psv2-score{ font-family:var(--psv2-display); font-size:1.9rem; color:var(--psv2-text-head); }
  & .psv2-stars{ color:var(--psv2-gold); letter-spacing:2px; }
  & .psv2-count{ font-size:var(--psv2-sm); color:var(--psv2-text-soft); }
  & .psv2-sync{ margin-left:auto; font-family:var(--psv2-caps); font-size:.62rem; letter-spacing:1.6px;
    text-transform:uppercase; color:var(--psv2-text-muted); }
}
.psv2-review{ background:rgba(17,17,17,.35); border:1px solid var(--psv2-hairline-warm);
  border-radius:var(--psv2-radius); padding:18px;
  & .psv2-stars{ color:var(--psv2-gold); letter-spacing:2px; font-size:.8rem; }
  & p{ margin:8px 0 10px; font-size:var(--psv2-sm); line-height:1.6; color:var(--psv2-text-soft); font-style:italic; }
  & cite{ font-style:normal; font-size:var(--psv2-xs); color:var(--psv2-text-muted); }
}

/* steps */
.psv2-step{ background:var(--psv2-surface); border:1px solid var(--psv2-hairline);
  border-radius:var(--psv2-radius); padding:20px; display:flex; gap:14px; align-items:flex-start;
  & svg{ flex-shrink:0; margin-top:2px; }
  & strong{ display:block; font-size:16px; color:var(--psv2-text-head); margin-bottom:4px;
    font-family:var(--psv2-body); font-weight:600; }
  & span{ font-size:16px; line-height:1.5; color:var(--psv2-text-soft); }
}

/* club tiers */
.psv2-tier{ background:var(--psv2-surface); border:1px solid var(--psv2-hairline);
  border-radius:var(--psv2-radius); padding:16px 18px;
  & h3{ margin:0 0 8px; font-family:var(--psv2-caps); font-size:.7rem; letter-spacing:1.6px;
    text-transform:uppercase; color:var(--psv2-gold-eyebrow); }
  & p{ margin:0 0 4px; font-size:var(--psv2-sm); color:var(--psv2-text-soft); }
  & .psv2-tier__meta{ font-size:var(--psv2-xs); color:var(--psv2-text-muted); }
}

/* closing cta */
.psv2-close{ position:relative; overflow:hidden; text-align:center;
  padding:72px var(--psv2-pad-x); border-block:1px solid var(--psv2-hairline);
  & > *{ position:relative; z-index:2; }
}
.psv2-close__bg{ position:absolute; inset:0; z-index:0;
  & img{ width:100%; height:100%; object-fit:cover; display:block; }
  &::after{ content:""; position:absolute; inset:0; background:rgba(17,17,17,.72); }
}

/* ---- live reviews module (psl_reviews shortcode output) ---- */
.psl-reviews{ display:block; }
.psl-reviews-summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:16px;
  &::after{ content:"Synced from Google daily"; margin-left:auto;
    font-family:var(--psv2-caps); font-size:12px; letter-spacing:2px;
    text-transform:uppercase; color:var(--psv2-text-muted); } }
.psl-reviews-score{ font-family:var(--psv2-display); font-size:44px; font-weight:700;
  color:var(--psv2-gold); line-height:1; }
.psl-reviews-stars{ color:var(--psv2-gold); letter-spacing:3px; font-size:18px; }
.psl-reviews-count{ font-size:16px; color:var(--psv2-text-soft); text-decoration:none;
  &:hover{ color:var(--psv2-gold); text-decoration:underline; } }
.psl-reviews-grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:6px; }
.psl-review-card{ margin:0; scroll-snap-align:start; flex-shrink:0; width:min(84vw,360px);
  background:var(--psv2-surface); border:1px solid var(--psv2-hairline);
  border-radius:var(--psv2-radius); padding:24px; display:flex; flex-direction:column; gap:12px;
  &::before{ content:"\2605\2605\2605\2605\2605"; color:var(--psv2-gold);
    letter-spacing:2px; font-size:14px; }
  & blockquote{ margin:0; font-size:16px; line-height:1.7; color:var(--psv2-text); font-style:italic; flex:1;
    &::before{ content:"\201C"; } &::after{ content:"\201D"; } }
  & figcaption{ font-size:14px; color:var(--psv2-text-muted); }
  & .psl-review-author{ color:var(--psv2-text-soft); }
}

/* ===== restructure 2026-08-19 — home ===================================== */

/* The hero's job is now one sentence that answers the query, not four chips
   plus a price line plus a promo bar. GSC's top queries are "golf simulator
   vaughan / near me / woodbridge", so the geography and the model have to be
   in the first sentence, not in an eyebrow above the headline. */
.psv2-hero__lede{ margin:0 0 4px; max-width:60ch; font-size:17px; line-height:1.75;
  color:var(--psv2-text-soft);
  & strong{ color:var(--psv2-text-head); font-weight:600; } }
.psv2-hero__actions{ align-items:center; gap:12px 22px; }

/* The fact strip sits flush under the hero photo — still section one, but on a
   solid ground so the labels read. On a phone it is the second screen, which
   is where 80.7% of this site's visitors are. */
.psv2-factstrip{ padding:20px var(--psv2-pad-x) 4px; }

/* Suite cards carry the technology as three bullets instead of two full
   chapters further down the page. */
.psv2-bay__specs{ display:flex; flex-direction:column; gap:7px; font-size:16px;
  line-height:1.5; color:var(--psv2-text-soft); }
.psv2-bay__price{ margin:4px 0 0; font-family:var(--psv2-display); font-size:26px;
  color:var(--psv2-gold-bright);
  & small{ font-family:var(--psv2-body); font-size:15px; color:var(--psv2-text-soft); } }