/* base.css — mechanics shared by the three prototypes: reset, shell, reveal,
   neighborhood scene + popups, stacked deck, tiers, steps, FAQ, security grid.
   Colors, type, radius and shadows come from each version's own theme. */
:root{--hdr-h:88px}
*,*::before,*::after{box-sizing:border-box}
/* residents lookup + pricing strip mechanics */
.res-grid{display:grid; gap:32px; align-items:center} @media(min-width:960px){.res-grid{grid-template-columns:1.1fr 1fr; gap:56px}}
.lookup{display:flex; flex-direction:column; gap:12px}
.lookup__row{display:flex; gap:10px} @media(max-width:520px){.lookup__row{flex-direction:column}}
.lookup input{flex:1; min-width:0; height:52px; padding:0 16px; font:inherit; font-size:1rem; border-radius:10px; outline:none}
.lookup input:focus-visible{outline:2px solid var(--focus,#B23A2B); outline-offset:2px}
.pricing{display:grid; gap:12px 40px; align-items:start; margin-top:40px} @media(min-width:900px){.pricing{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
html{-webkit-text-size-adjust:100%; scroll-padding-top:80px}
body{margin:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,dl,dd{margin:0}
.shell{width:min(100% - 48px, 1200px); margin-inline:auto}
@media(min-width:760px){.shell{width:min(100% - 80px, 1200px)}}
@media(min-width:1100px){.shell{width:min(100% - 160px, 1200px)}}
.shell--wide{width:min(100% - 32px, 1440px)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity 520ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:70ms} [data-reveal][data-delay="2"]{transition-delay:140ms}
[data-reveal][data-delay="3"]{transition-delay:210ms} [data-reveal][data-delay="4"]{transition-delay:280ms}

/* ---------- neighborhood scene ---------- */
.scene{position:relative; overflow:hidden; isolation:isolate}
.scene > img{width:100%; height:100%; object-fit:cover; display:block; z-index:1}
.scene-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible}
.scene-lines .line{fill:none; stroke:var(--line-color,#0F4436); stroke-width:var(--line-w,2.5); stroke-linecap:round}
.scene-lines .line.is-trail{stroke:var(--trail-color,#B58A32); stroke-width:1.5; stroke-dasharray:3 7 !important; stroke-dashoffset:0 !important; opacity:.6}
.scene-layer{position:absolute; inset:0; z-index:3; pointer-events:none}
.scene-pin{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:999px; background:var(--pin-color,#B23A2B);
  box-shadow:0 0 0 2px var(--pin-ring,#fff); opacity:.85; transition:transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms}
.scene-pin[hidden]{display:none}
/* mobile menu */
.menu-btn{display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:8px}
.menu-btn svg{width:22px; height:22px}
.menu-btn .x{display:none} body.menu-open .menu-btn .x{display:block} body.menu-open .menu-btn .bars{display:none}
.drawer{display:none}
@media(max-width:979px){
  .menu-btn{display:inline-flex}
  body.menu-open{overflow:hidden}
  body.menu-open .drawer{display:flex; position:fixed; inset:var(--hdr-h,60px) 0 0 0; z-index:49; flex-direction:column; gap:4px; padding:20px 24px; overflow:auto}
  .drawer a{display:block; padding:14px 8px; font-size:1.25rem; font-weight:500; text-decoration:none; border-bottom:1px solid var(--drawer-line, rgba(0,0,0,.08))}
  .drawer .drawer__cta{margin-top:20px; display:flex; flex-direction:column; gap:10px}
}
.scene-pin.is-amenity{border-radius:3px}
.scene-pin.lit{transform:scale(1.3); opacity:1}
.scene-pin.lit::after{content:""; position:absolute; inset:-3px; border-radius:inherit; border:2px solid var(--pin-color,#B23A2B); animation:pin-pulse 1.4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pin-pulse{from{transform:scale(.7); opacity:.9} to{transform:scale(2.2); opacity:0}}
.pop{position:absolute; width:var(--pop-w,252px); max-width:calc(100% - 16px); padding:12px 14px 13px; border-radius:var(--pop-r,12px);
  background:var(--pop-bg,#fff); color:var(--pop-ink,#16130F); border:1px solid var(--pop-line,#E2DCD2);
  box-shadow:var(--pop-shadow,0 12px 24px rgba(22,19,15,.10), 0 2px 6px rgba(22,19,15,.06));
  font-size:13px; line-height:1.4; opacity:0; text-align:left;
  transform:translateY(8px) scale(.96);
  transition:opacity 300ms cubic-bezier(.2,.8,.2,1), transform 360ms cubic-bezier(.2,.8,.2,1)}
.pop.show{opacity:1; transform:none}
.pop::before{content:""; position:absolute; width:10px; height:10px; background:inherit; border:1px solid var(--pop-line,#E2DCD2); transform:rotate(45deg)}
.pop--right::before{left:-6px; border-width:0 0 1px 1px} .pop--left::before{right:-6px; border-width:1px 1px 0 0}
.pop--right.pop--above::before,.pop--left.pop--above::before{bottom:14px} .pop--right.pop--below::before,.pop--left.pop--below::before{top:14px}
.pop--center::before{left:calc(var(--px,50%) - 5px)}
.pop--center.pop--above::before{bottom:-6px; border-width:0 1px 1px 0} .pop--center.pop--below::before{top:-6px; border-width:1px 0 0 1px}
.pop__head{display:flex; align-items:center; gap:9px; margin-bottom:6px}
.pop__av{width:28px; height:28px; border-radius:999px; display:grid; place-items:center; font-size:11px; font-weight:600; letter-spacing:.02em;
  background:var(--pop-av-bg,#0F4436); color:var(--pop-av-ink,#fff); flex:0 0 auto}
.pop__who{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.pop__who b{font-weight:600; font-size:13px} .pop__who small{font-size:11px; color:var(--pop-muted,#6B645C); margin-top:2px}
.pop__text{margin:0; font-size:13px; color:var(--pop-ink,#16130F)}
.pop__tag{display:inline-block; margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:4px;
  background:var(--tag-bg,#E8F0EC); color:var(--tag-ink,#0F4436)}
.pop--event{--tag-bg:var(--tag-event-bg,#F6EEDC); --tag-ink:var(--tag-event-ink,#7A5A14)}
.pop--request{--tag-bg:var(--tag-request-bg,#F9EAE6); --tag-ink:var(--tag-request-ink,#8E2B1F)}
.pop--pets{--tag-bg:var(--tag-pets-bg,#E4EEF3); --tag-ink:var(--tag-pets-ink,#1F6B8C)}
.pop--booking{--tag-bg:var(--tag-event-bg,#F6EEDC); --tag-ink:var(--tag-event-ink,#7A5A14)}
@media(max-width:720px){.pop{--pop-w:min(304px, 86vw); font-size:13px; padding:12px 13px 13px} .pop__text{font-size:13px} .pop__who b{font-size:13.5px} .pop__av{width:27px; height:27px; font-size:10px} .scene-pin{width:10px; height:10px; margin:-5px 0 0 -5px}}

/* ---------- stacked deck ---------- */
.stack{position:relative}
.deck{position:sticky; top:var(--deck-top,96px); height:var(--deck-h,600px); margin-bottom:var(--deck-gap,40px);
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden; transform-origin:50% 0; will-change:transform,filter}
.deck--flip .deck__copy{order:2}
.deck__copy{display:flex; flex-direction:column; min-width:0}
.deck__media{position:relative; display:grid; place-items:center; min-width:0; overflow:hidden}
.pv-wrap{width:100%; display:grid; place-items:center; padding:24px}
.deck__label{display:inline-flex; align-items:center; gap:10px}
.deck__list{display:flex; flex-direction:column; gap:8px}
.deck__list li{display:flex; gap:10px; align-items:flex-start} .deck__list li svg{flex:0 0 auto; margin-top:4px}
.deck__foot{margin-top:auto}
@media(max-width:860px){
  .deck{grid-template-columns:1fr; height:auto; position:relative; top:auto; transform:none !important; filter:none !important}
  .deck--flip .deck__copy{order:0} .deck__media{min-height:300px}
}

/* ---------- tiers ---------- */
.tiers{display:grid; gap:24px; align-items:start}
@media(min-width:900px){.tiers{grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px}}
.tier-rail{display:flex; flex-direction:column; gap:8px}
@media(max-width:899px){.tier-rail{flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px} .tier{scroll-snap-align:start; flex:0 0 auto; min-width:220px}}
.tier{display:flex; align-items:center; gap:14px; text-align:left; width:100%; position:relative}
.tier__hw{flex:0 0 auto}
.tier__txt{display:flex; flex-direction:column; min-width:0} .tier__txt small{font-size:12px} .tier__txt b{font-weight:600}
.tier__chip{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:4px}
.tierp{transition:opacity 160ms ease} .tierp:not(.in){opacity:0}
.tierp__list{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px}
@media(max-width:600px){.tierp__list{grid-template-columns:1fr}}
.tierp__list li{display:flex; gap:9px; align-items:flex-start} .tierp__list li svg{flex:0 0 auto; margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid; gap:20px; position:relative; grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.chips{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- faq ---------- */
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto; transition:transform 180ms ease} .faq[open] summary svg{transform:rotate(180deg)}

/* ---------- security ---------- */
.sec-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr))}
.sec svg{margin-bottom:14px}

/* ---------- footer ---------- */
.foot-cols{display:grid; gap:28px 24px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.foot-cols{grid-template-columns:repeat(5,1fr)}}
.foot-cols h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px}
.foot-cols li{margin-bottom:8px; font-size:14px}
.foot-cols a{text-decoration:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
}