/* ============================================================
   Neighborhood Swing — book now page
   Same building blocks as the leagues and gift card pages: dark
   mesh plate up top, black stage, cream texture below, Archivo
   600 with the width axis varied. Every class starts with "b-"
   so nothing collides with site.css.
   ============================================================ */

.b-scope{line-height:1.5}
.b-scope p{margin:0}
.b-scope h1,.b-scope h2,.b-scope h3{margin:0;font-weight:600;text-wrap:balance}
.b-scope p,.b-scope li,.b-scope summary{text-wrap:pretty}
.b-wrap{max-width:1152px;margin-inline:auto;padding-inline:max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px))}
.b-sec{scroll-margin-top:calc(var(--navh) + 16px)}

/* ---------------- dark stage ---------------- */
.b-hero{
  background:url("../img/dark-top.jpg") top center / 100% calc(408 * var(--px)) no-repeat, #000;
  color:var(--cream-ink);
  padding:clamp(20px, calc(34 * var(--px)), 36px) 0 clamp(56px, calc(100 * var(--px)), 100px);
}
.b-hero > .b-wrap{display:grid;gap:22px}
.b-head{display:grid;justify-items:center;gap:6px;text-align:center}
.b-title{font-size:clamp(26px, calc(50 * var(--px)), 52px);font-stretch:125%;line-height:1;color:var(--cream-ink)}
.b-kick{font-size:clamp(15px, calc(24 * var(--px)), 25px);font-style:italic;font-stretch:92%;color:var(--green);line-height:1.1}

/* price + guarantee */
.b-top{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);gap:18px;align-items:stretch}
.b-price{border:2px solid var(--cream-ink);border-radius:18px;background:#000;padding:28px 30px;display:grid;gap:20px;align-content:start}
.b-amt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.b-amt b{font-size:clamp(58px, 7vw, 86px);font-weight:600;font-stretch:110%;line-height:.9;font-variant-numeric:tabular-nums}
.b-amt span{font-size:20px;color:#D6D8CE;font-stretch:104%}
.b-amt small{display:block;width:100%;font-size:16px;font-style:italic;font-stretch:92%;color:#9CC377}
.b-member{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  margin-top:-6px;padding:12px 16px;border-radius:10px;background:var(--cream);color:var(--ink);
  font-size:16px;font-stretch:104%;line-height:1.3;transition:background .15s}
.b-member b{color:var(--green);font-weight:600}
.b-member svg{width:18px;height:18px;flex:0 0 auto;color:var(--green);transition:transform .15s}
.b-member:hover{background:#F1F4E4}
.b-member:hover svg{transform:translateX(3px)}
.b-member:focus-visible{outline:2px solid var(--cream-ink);outline-offset:3px}
.b-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));border-top:1px solid #4A4A42}
.b-rules li{padding:14px 10px 14px 0;border-bottom:1px solid #4A4A42;display:grid;gap:2px;align-content:start}
.b-rules li:nth-child(odd){padding-right:18px}
.b-rules li:nth-child(even){padding-left:18px;border-left:1px solid #4A4A42}
.b-rules b{white-space:nowrap;font-size:clamp(20px, 2.1vw, 25px);font-weight:600;font-stretch:110%;line-height:1.1;color:var(--cream-ink)}
.b-rules span{font-size:14.5px;color:#D6D8CE}

.b-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;text-decoration:none;white-space:nowrap;
  font-size:clamp(17px, 1.8vw, 20px);font-stretch:112%;letter-spacing:.04em;line-height:1.2;
  padding:18px 16px;border-radius:10px;color:var(--cream-ink);background:var(--green);border:2px solid var(--green);
  transition:background .15s,border-color .15s;
}
.b-btn:hover{background:var(--green-lift);border-color:var(--green-lift)}
.b-btn:focus-visible{outline:2px solid var(--cream-ink);outline-offset:3px}
.b-btn svg{width:18px;height:18px;flex:0 0 auto}
.b-btn-lg{font-size:clamp(22px, 2.4vw, 28px);padding:26px 20px;border-radius:12px;letter-spacing:.05em;box-shadow:0 6px 22px rgba(93,135,59,.35)}
.b-btn-lg svg{width:24px;height:24px}
.b-btn-note{text-align:center;font-size:14px;color:#D6D8CE;margin-top:-8px!important}

.b-guar{border-radius:18px;background:var(--card1-a);padding:28px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.b-guar-tag{justify-self:center;align-self:center;background:var(--cream);color:var(--ink);font-size:13px;font-stretch:108%;letter-spacing:.06em;padding:6px 14px;border-radius:999px}
.b-guar h2{font-size:clamp(26px, 3vw, 36px);font-stretch:116%;line-height:1.05;color:var(--cream-ink)}
.b-guar p{font-size:17px;color:#EDF2E5;max-width:34ch;align-self:center}
.b-guar p b{color:var(--cream-ink);font-weight:600}
.b-seal{width:62px;height:62px;align-self:center;color:var(--cream-ink)}

/* section headings on black */
.b-h2{font-size:clamp(25px, calc(54 * var(--px)), 56px);font-stretch:103%;line-height:1;color:var(--cream-ink);text-align:center}
.b-sub{text-align:center;font-size:clamp(15px, 1.8vw, 20px);font-stretch:104%;color:#D6D8CE;max-width:60ch;justify-self:center}
.b-divider{height:1px;background:#2A2A26;margin-block:clamp(18px, 3.5vw, 40px)}

/* what every booking includes */
.b-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}
.b-feats li{border:2px solid #4A4A42;border-radius:16px;padding:22px 18px;display:grid;gap:8px;align-content:start}
.b-feats li.hi{border-color:var(--green);background:#0C0F09}
.b-ic{width:34px;height:34px;color:#9CC377}
.b-feats b{font-size:clamp(18px, 1.8vw, 21px);font-weight:600;font-stretch:110%;line-height:1.15;color:var(--cream-ink)}
.b-feats span{font-size:15px;color:#D6D8CE;line-height:1.45}

/* ways to play (same greens as the home page cards) */
.b-ways{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}
.b-way{border-radius:18px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--cream-ink);transition:transform .15s,filter .15s}
.b-way.w1{background:#516937}
.b-way.w2{background:#5D873B}
.b-way.w3{background:#6D8551}
.b-way.w4{background:#7C945F}
.b-way h3{font-size:clamp(20px, 2vw, 25px);font-stretch:118%;line-height:1.05;letter-spacing:.01em}
.b-way p{font-size:15.5px;line-height:1.45;color:var(--cream-ink)}
.b-go{margin-top:auto;padding-top:6px;font-size:15px;font-stretch:106%;color:var(--cream-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.b-way:hover{transform:translateY(-2px);filter:brightness(1.06)}
.b-way:focus-visible{outline:2px solid var(--cream-ink);outline-offset:3px}

/* how it works */
.b-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:18px}
.b-steps li{border-top:3px solid var(--green);padding-top:16px;display:grid;gap:8px;align-content:start}
.b-steps .n{font-size:clamp(34px, 3.6vw, 44px);font-stretch:118%;line-height:1;color:var(--green)}
.b-steps strong{font-size:20px;font-weight:600;font-stretch:110%;color:var(--cream-ink)}
.b-steps p{font-size:16px;color:#D6D8CE;line-height:1.45}
.b-steps p b{color:var(--cream-ink);font-weight:600}

/* black into the cream texture */
.b-fade{
  height:clamp(90px, calc(260 * var(--px)), 260px);
  background:linear-gradient(180deg,#000 0,rgba(0,0,0,0) 100%), url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);
}

/* ---------------- cream details ---------------- */
.b-details{background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);color:var(--ink);font-size:17px}
.b-details .b-wrap{display:grid;gap:clamp(56px, 7vw, 88px);padding-block:8px 64px}
.b-details section{display:grid;gap:16px;align-content:start;min-width:0}
.b-eyebrow{font-size:15px;font-style:italic;font-stretch:92%;color:var(--green);text-transform:uppercase;letter-spacing:.02em}
.b-details h2{font-size:clamp(28px, 3.6vw, 42px);font-stretch:112%;line-height:1.05}
.b-lede{max-width:62ch;font-stretch:102%;color:#4A473B}
.b-lede b{color:var(--ink);font-weight:600}

/* how long to book */
.b-guide{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px}
.b-guide div{border:2px solid #D9D8C8;border-radius:12px;padding:16px;display:grid;gap:4px;background:rgba(255,255,240,.6)}
.b-guide div.key{background:var(--green);border-color:var(--green);color:var(--cream-ink)}
.b-guide span{font-size:13px;font-style:italic;font-stretch:92%;color:var(--green);text-transform:uppercase;letter-spacing:.03em}
.b-guide .key span{color:#E3ECD6}
.b-guide b{font-size:clamp(22px, 2.4vw, 28px);font-weight:600;font-stretch:112%;line-height:1.1}
.b-guide small{font-size:14px;color:#5A574B}
.b-guide .key small{color:#EDF2E5}
.b-note{font-size:15px;color:#5A574B;max-width:70ch}

/* house notes */
.b-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 48px;border-top:1px solid #D9D8C8}
.b-list li{padding:14px 0;border-bottom:1px solid #D9D8C8;display:grid;grid-template-columns:9px minmax(0, 1fr);column-gap:12px;color:#4A473B;font-stretch:102%}
.b-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:8px}
.b-list b{color:var(--ink);font-weight:600}

/* FAQ */
.b-faq{border-top:1px solid #D9D8C8;max-width:860px}
.b-faq details{border-bottom:1px solid #D9D8C8}
.b-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:16px 0;font-size:18px;font-stretch:106%}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-3px) rotate(45deg);transition:transform .15s ease}
.b-faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.b-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.b-faq p{padding:0 0 18px;max-width:64ch;color:#4A473B;font-stretch:102%}
.b-faq a{color:var(--green)}

/* member nudge + closing */
.b-cta{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);gap:24px;padding:30px;border:2px solid var(--ink);border-radius:14px;align-items:center;scroll-margin-top:calc(var(--navh) + 16px)}
.b-cta h2{font-size:clamp(26px, 3.4vw, 38px);font-stretch:118%;line-height:1}
.b-cta p{margin-top:10px!important;color:#4A473B;font-stretch:102%}
.b-cta p a{color:var(--ink);text-decoration:none}
.b-cta p a:hover{color:var(--green)}
.b-cta-btns{display:grid;gap:12px}
.b-btn.alt{background:var(--ink);border-color:var(--ink)}
.b-btn.alt:hover{background:#4A4637;border-color:#4A4637}

.b-details + .ftr{padding-top:calc(120 * var(--px))}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .b-top{grid-template-columns:minmax(0, 1fr);max-width:620px;margin-inline:auto;width:100%}
  .b-feats,.b-ways{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .b-steps{grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px 18px}
  .b-guide{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .b-list,.b-cta{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:520px){
  .b-hero > .b-wrap{gap:16px}
  .b-title{font-size:24px}
  .b-kick{font-size:14px}
  .b-price,.b-guar{padding:22px 18px}
  .b-amt b{font-size:56px}
  .b-amt span{font-size:17px}
  .b-amt small{font-size:14.5px}
  .b-member{font-size:14.5px;padding:11px 13px}
  .b-rules b{font-size:17px;white-space:normal}
  .b-rules span{font-size:13px}
  .b-rules li:nth-child(odd){padding-right:10px}
  .b-rules li:nth-child(even){padding-left:12px}
  .b-btn{font-size:16px;padding:16px 12px}
  .b-btn-lg{font-size:21px;padding:22px 14px}
  .b-btn-lg svg{width:21px;height:21px}
  .b-guar h2{font-size:24px}
  .b-guar p{font-size:15px}
  .b-seal{width:50px;height:50px}
  .b-feats{gap:10px}
  .b-feats li{padding:16px 14px}
  .b-ic{width:28px;height:28px}
  .b-feats b{font-size:16.5px}
  .b-feats span{font-size:13.5px}
  .b-steps{grid-template-columns:minmax(0, 1fr)}
  .b-ways{grid-template-columns:minmax(0, 1fr);gap:10px}
  .b-way{padding:18px 16px}
  .b-way h3{font-size:20px}
  .b-way p{font-size:14.5px}
  .b-steps strong{font-size:18px}
  .b-steps p{font-size:15px}
  .b-details{font-size:16px}
  .b-guide{gap:8px}
  .b-guide div{padding:12px}
  .b-guide b{font-size:20px}
  .b-guide small{font-size:13px}
  .b-faq summary{font-size:16px}
  .b-cta{padding:22px}
}
@media (prefers-reduced-motion:reduce){.b-faq summary::after,.b-way{transition:none}.b-way:hover{transform:none}}