/* ============================================================
   Neighborhood Swing — home page FAQ
   Sits on the cream texture between WAYS TO PLAY and the closing
   line, sized off the same --px scale as the rest of the home page,
   with a floor so it stays readable on a phone.
   ============================================================ */
.hfaq{
  background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);
  color:var(--ink);
  padding:0 0 calc(170 * var(--px));
  scroll-margin-top:var(--navh);
}
.hfaq__h2{
  margin:0;font-size:max(28px, calc(54 * var(--px)));font-stretch:103%;line-height:1;color:var(--ink);
}
.hfaq__intro{
  margin:max(10px, calc(24 * var(--px))) 0 0;
  font-size:max(16px, calc(30 * var(--px)));font-stretch:105%;line-height:1.35;color:var(--green);
}
.hfaq__list{margin-top:max(20px, calc(56 * var(--px)));border-top:2px solid var(--ink)}
.hfaq__list details{border-bottom:1px solid #D9D8C8}
.hfaq__list summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:max(15px, calc(30 * var(--px))) 0;
  font-size:max(17px, calc(32 * var(--px)));font-stretch:106%;line-height:1.25;
}
.hfaq__list summary::-webkit-details-marker{display:none}
.hfaq__list summary::after{
  content:"";flex:0 0 auto;width:max(9px, calc(16 * var(--px)));height:max(9px, calc(16 * var(--px)));
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-3px) rotate(45deg);transition:transform .15s ease;margin-right:4px;
}
.hfaq__list details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.hfaq__list summary:hover{color:var(--green)}
.hfaq__list summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.hfaq__list p{
  margin:0;padding:0 0 max(18px, calc(32 * var(--px)));max-width:62ch;
  font-size:max(15.5px, calc(27 * var(--px)));font-stretch:102%;line-height:1.5;color:#4A473B;
}
.hfaq__list a{color:var(--green)}
@media (prefers-reduced-motion:reduce){.hfaq__list summary::after{transition:none}}

/* ============================================================
   Home page: leagues + gift cards (in place of the old
   COMING SOON marquee) and clickable WAYS TO PLAY cards.
   ============================================================ */
.hx{background:#000;padding:calc(110 * var(--px)) 0 0}
.hx__grid{
  max-width:1152px;margin-inline:auto;padding-inline:max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;
}
.hx__card{
  border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;
  color:var(--cream-ink);border:2px solid var(--cream-ink);background:#000;text-align:left;line-height:1.45;
  transition:transform .15s,border-color .15s;
}
.hx__card--gc{background:var(--card1-a);border-color:var(--card1-a)}
.hx__card:hover{transform:translateY(-2px)}
.hx__card:focus-visible{outline:2px solid var(--cream-ink);outline-offset:3px}
.hx__eyebrow{margin:0;font-size:15px;font-style:italic;font-stretch:92%;letter-spacing:.04em;color:#9CC377}
.hx__card--gc .hx__eyebrow{color:#E3ECD6}
.hx__h{margin:0;font-weight:600;font-size:clamp(26px, 3vw, 38px);font-stretch:118%;line-height:1.02}
.hx__p{margin:0;font-size:17px;font-stretch:104%;color:#D6D8CE}
.hx__card--gc .hx__p{color:#EDF2E5}
.hx__facts{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.hx__facts li{border:1.5px solid #4A4A42;border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.hx__facts b{font-weight:600;font-size:clamp(28px, 3vw, 36px);font-stretch:110%;line-height:1}
.hx__facts span{font-size:14px;color:#D6D8CE;line-height:1.3}
.hx__amts{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px}
.hx__amts li{background:rgba(0,0,0,.22);border-radius:10px;padding:12px 4px;text-align:center;font-size:clamp(20px, 2.2vw, 28px);font-stretch:110%;font-variant-numeric:tabular-nums}
.hx__note{margin:0;font-size:15px;font-style:italic;font-stretch:92%;color:#9CC377}
.hx__card--gc .hx__note{color:#E3ECD6}
.hx__btn{
  margin-top:auto;display:block;text-align:center;padding:15px 12px;border-radius:8px;
  font-size:16px;font-stretch:110%;letter-spacing:.04em;background:var(--green);color:var(--cream-ink);
}
.hx__card--gc .hx__btn{background:var(--cream);color:var(--ink)}
.hx__card:hover .hx__btn{background:var(--green-lift)}
.hx__card--gc:hover .hx__btn{background:var(--cream-ink)}

/* the four WAYS TO PLAY cards are links now */
a.card{display:block;text-decoration:none;color:var(--cream-ink);transition:transform .15s,filter .15s}
a.card:hover{transform:translateY(-3px);filter:brightness(1.05)}
a.card:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.card__go{
  display:inline-block;margin-top:calc(24 * var(--px));
  font-size:max(15px, calc(25 * var(--px)));font-stretch:110%;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;
}

/* walk-in hour link in the plans block */
.m-walkin a{color:inherit;text-decoration:underline;text-decoration-color:rgba(251,251,236,.4);text-underline-offset:4px}
.m-walkin a:hover{text-decoration-color:var(--cream-ink)}

@media (max-width:760px){
  .hx__grid{grid-template-columns:minmax(0, 1fr);max-width:560px}
}
@media (max-width:520px){
  .hx{padding-top:56px}
  .hx__card{padding:24px 18px;gap:12px}
  .hx__h{font-size:25px}
  .hx__p{font-size:15.5px}
  .hx__amts li{font-size:19px;padding:10px 2px}
  .hx__btn{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.hx__card,a.card{transition:none}.hx__card:hover,a.card:hover{transform:none}}
.hx__grid--one{grid-template-columns:minmax(0, 1fr);max-width:640px}
/* with the plans gone, the gift card block is the last thing over the photograph:
   fade the photo into black like the plans block did, and cover its bottom edge */
.hx{background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 calc(240 * var(--px)));padding:calc(190 * var(--px)) 0 calc(170 * var(--px))}
.turf:has(.hx){padding-bottom:0}
@media (max-width:520px){.hx{padding:56px 0 64px}}
/* the photograph now ends right after WHAT DO WE OFFER?, so fade its
   bottom edge into black instead of stopping on a hard line */
.turf{position:relative}
.turf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(380 * var(--px));
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 85%);pointer-events:none}
.turf > *{position:relative;z-index:1}