/* ============================================================
   Neighborhood Swing — membership plans
   Used on the home page (plans section) and on memberships.html.
   Every class starts with "m-" so nothing here collides with
   site.css. Colors come from the :root block in site.css.
   ============================================================ */

.m-scope{line-height:1.5}
.m-scope p{margin:0}
.m-scope h1,.m-scope h2,.m-scope h3{margin:0;font-weight:600;text-wrap:balance}
.m-scope p,.m-scope li,.m-scope summary{text-wrap:pretty}

/* ---------------- the plans stage (black) ---------------- */
.m-stage{
  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;gap:28px;color:var(--cream-ink);
}
.m-head{display:grid;justify-items:center;gap:12px;text-align:center}
.m-title{font-size:clamp(30px, calc(72 * var(--px)), 76px);font-stretch:125%;line-height:1;color:var(--cream-ink)}
/* the home page heading sits with WHAT DO WE OFFER? and WAYS TO PLAY, so it is a step smaller */
.m-title--sec{font-size:clamp(26px, calc(62 * var(--px)), 64px)}
.m-kick{font-size:clamp(18px, calc(42 * var(--px)), 42px);font-style:italic;font-stretch:92%;color:var(--green);line-height:1}

.m-promo{justify-self:center;display:grid;justify-items:center;gap:8px;background:var(--cream);color:var(--ink);border-radius:12px;padding:14px 26px;text-align:center}
.m-promo-top{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px;font-size:clamp(17px, 2.3vw, 26px);font-stretch:112%;line-height:1.1}
.m-promo-top b{font-weight:600;color:var(--green)}
.m-promo-top small{font-size:.8em;font-stretch:104%;color:#5A574B}
.m-promo-lock{font-size:clamp(14px, 1.7vw, 19px);font-style:italic;font-stretch:96%;color:#4F6F33}
.m-incl{text-align:center;font-size:clamp(16px, 2.4vw, 28px);font-style:italic;font-stretch:92%;color:var(--green);line-height:1.3}
.m-incl span{color:var(--cream-ink)}

/* billing toggle */
.m-toggle{justify-self:center;display:inline-flex;gap:4px;padding:5px;border:1.5px solid #4A4A42;border-radius:12px}
.m-toggle button{font:inherit;font-size:15px;font-stretch:108%;color:#D6D8CE;background:transparent;border:0;border-radius:8px;padding:10px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline}
.m-toggle button small{font-size:12px;color:#9CC377}
.m-toggle button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.m-toggle button[aria-pressed="true"] small{color:var(--green)}
.m-toggle button:focus-visible{outline:2px solid #9CC377;outline-offset:2px}

/* plan cards */
.m-cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;align-items:stretch}
.m-card{border-radius:18px;padding:26px 22px;display:flex;flex-direction:column;gap:22px;min-width:0;border:2px solid #4A4A42;background:#000}
.m-card.club{border-color:var(--cream-ink)}
.m-card.unl{background:var(--card1-a);border-color:var(--card1-a)}
.m-card-top{text-align:center;display:grid;gap:8px}
.m-card h3{font-size:34px;font-stretch:118%;line-height:1;color:var(--cream-ink)}
.m-tagline{text-wrap:balance;font-size:17px;font-stretch:104%;color:#D6D8CE}
.unl .m-tagline{color:#EDF2E5}

.m-price{display:grid;gap:4px;padding-block:16px;border-top:1px solid #4A4A42;border-bottom:1px solid #4A4A42}
.unl .m-price{border-color:#8FA676}
.m-was{font-size:17px;color:#A9AB9F;text-decoration:line-through;min-height:1.5em}
.unl .m-was{color:#B9C7A8}
.m-amt{font-size:52px;font-stretch:110%;line-height:1;font-variant-numeric:tabular-nums}
.m-amt small{font-size:17px;color:#D6D8CE;font-stretch:100%}
.unl .m-amt small{color:#EDF2E5}
.m-sub{font-size:15px;font-stretch:102%;color:#D6D8CE;min-height:1.5em}
.unl .m-sub{color:#EDF2E5}

.m-feats{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:18px;font-stretch:104%;line-height:1.35}
.m-feats > li{display:grid;grid-template-columns:9px minmax(0, 1fr);column-gap:12px}
.m-feats > li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:8px}
.unl .m-feats > li::before{background:var(--cream-ink)}
.m-rate{display:block;font-size:15px;color:#9CC377;margin-top:2px}
.m-rate s{color:#A9AB9F;margin-left:6px}
.m-note{margin-top:6px!important;font-size:15px;line-height:1.45;color:#D6D8CE}
.unl .m-note{color:#EDF2E5}
.m-feats details{min-width:0}
.m-feats summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;border-bottom:1px dashed currentColor}
.m-feats summary::-webkit-details-marker{display:none}
.m-feats summary::after{content:"";width:7px;height:7px;border-right:2px solid #9CC377;border-bottom:2px solid #9CC377;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.unl .m-feats summary::after{border-color:var(--cream-ink)}
.m-feats details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.m-feats summary:focus-visible{outline:2px solid #9CC377;outline-offset:3px;border-radius:2px}

.m-join{margin-top:auto;display:block;white-space:nowrap;text-align:center;text-decoration:none;font-size:15.5px;font-stretch:106%;letter-spacing:.02em;line-height:1.2;padding:15px 14px;border-radius:8px;color:var(--cream-ink);border:2px solid var(--green);background:transparent;transition:background .15s}
.m-join:hover{background:var(--green)}
.club .m-join{background:var(--green)}
.club .m-join:hover{background:var(--green-lift)}
.unl .m-join{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.unl .m-join:hover{background:var(--cream-ink)}
.m-join:focus-visible{outline:2px solid var(--cream-ink);outline-offset:3px}

.m-walkin{text-align:center;font-size:17px;color:#D6D8CE}
.m-walkin b{color:var(--cream-ink);font-weight:600}
.m-more{justify-self:center;text-align:center;margin-top:-6px;font-size:16px;font-stretch:110%;color:#9CC377;text-decoration:underline;text-decoration-color:rgba(156,195,119,.5);text-underline-offset:5px;text-decoration-thickness:1px}
.m-more:hover{color:var(--cream-ink);text-decoration-color:var(--cream-ink)}

/* ---------------- home page placement ----------------
   Sits inside the turf block, between WHAT DO WE OFFER? and the
   COMING SOON marquee. Solid black so the bottom edge of the
   photograph never shows behind the cards; the top fades in so the
   turf dissolves into it rather than stopping on a line. */
.mem{background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 calc(240 * var(--px)));padding-top:calc(190 * var(--px));scroll-margin-top:var(--navh)}

/* ---------------- memberships page ---------------- */
.m-hero{
  background:url("../img/dark-top.jpg") top center / 100% calc(408 * var(--px)) no-repeat, #000;
  padding:clamp(40px, calc(90 * var(--px)), 90px) 0 clamp(56px, calc(110 * var(--px)), 110px);
}
/* black into the cream texture, the same fade the home page uses into WAYS TO PLAY */
.m-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);
}
.m-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))}

.m-explain{background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);color:var(--ink);font-size:17px}
.m-explain .m-wrap{padding-block:24px 64px;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:48px}
.m-explain section{display:grid;gap:14px;align-content:start;min-width:0;scroll-margin-top:calc(var(--navh) + 16px)}
.m-eyebrow{font-size:15px;font-style:italic;font-stretch:92%;color:var(--green);text-transform:uppercase;letter-spacing:.02em}
.m-explain h2{font-size:clamp(26px, 3.4vw, 38px);font-stretch:112%;line-height:1.05}
.m-explain p{max-width:60ch;font-stretch:102%;color:#4A473B}
.m-explain p b{color:var(--ink);font-weight:600}
.m-ladder{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:6px;align-items:end;margin-top:6px}
.m-rung{display:grid;gap:6px;text-align:center}
.m-bar{background:#E7EDDC;border-radius:6px 6px 0 0;display:flex;align-items:end;justify-content:center;padding-bottom:6px;color:var(--green);font-size:14px;font-variant-numeric:tabular-nums}
.m-rung:last-child .m-bar{background:var(--green);color:var(--cream-ink)}
.m-lvl{font-size:12px;color:#5A574B;text-transform:uppercase;letter-spacing:.04em}
.m-tag{font-size:13px;color:#5A574B!important}
.m-steps{list-style:none;margin:0;padding:0;border-top:1px solid #D9D8C8}
.m-steps li{display:grid;grid-template-columns:40px minmax(0, 1fr);gap:12px;padding:14px 0;border-bottom:1px solid #D9D8C8}
.m-steps .n{font-size:26px;font-stretch:118%;color:var(--green);line-height:1}
.m-steps strong{display:block;font-weight:600}
.m-steps span{font-size:15px;color:#4A473B;font-stretch:102%}

.m-contact{background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);color:var(--ink);font-size:17px}
.m-contact .m-wrap{padding-block:0 24px}
.m-contact-box{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)}
.m-contact h2{font-size:clamp(26px, 3.4vw, 38px);font-stretch:118%;line-height:1}
.m-contact p{margin-top:10px!important;color:#4A473B;font-stretch:102%}
.m-contact dl{margin:0;display:grid;gap:12px}
.m-contact dt{font-size:13px;font-style:italic;font-stretch:92%;color:var(--green);text-transform:uppercase}
.m-contact dd{margin:2px 0 0;font-stretch:106%;overflow-wrap:anywhere}
.m-contact dd a{text-decoration:none}
.m-contact dd a:hover{color:var(--green)}

/* ---------------- responsive ---------------- */
@media (min-width:961px) and (max-width:1200px){
  .m-join{font-size:13.5px;font-stretch:104%;padding-left:8px;padding-right:8px}
  .m-card{padding:24px 18px}
}
@media (max-width:960px){
  .m-cards{grid-template-columns:minmax(0, 1fr);max-width:520px;margin-inline:auto;width:100%}
  .m-explain .m-wrap,.m-contact-box{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:520px){
  .m-stage{gap:20px}
  .m-head{gap:8px}
  .m-title{font-size:28px}
  .m-title--sec{font-size:25px}
  .m-kick{font-size:16px}
  .m-promo{width:100%;padding:12px 14px}
  .m-promo-top{gap:4px 10px;font-size:15.5px}
  .m-promo-lock{font-size:13px}
  .m-incl{font-size:14px}
  .m-toggle{width:100%}
  .m-toggle button{flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 4px;font-size:13.5px;line-height:1.2}
  .m-toggle button small{font-size:11.5px}
  .m-card{padding:22px 18px;gap:20px}
  .m-card h3{font-size:26px}
  .m-tagline{font-size:14px}
  .m-amt{font-size:40px}
  .m-amt small{font-size:15px}
  .m-feats{font-size:15px;gap:12px}
  .m-feats > li::before{width:8px;height:8px;margin-top:6px}
  .m-feats > li{grid-template-columns:8px minmax(0, 1fr)}
  .m-note,.m-rate,.m-sub{font-size:13.5px}
  .m-was{font-size:14px}
  .m-join{font-size:14px;padding:14px 10px}
}
@media (max-width:360px){
  .m-join{font-size:13px;font-stretch:102%;letter-spacing:0}
  .m-walkin{font-size:14px}
  .m-more{font-size:14px}
  .m-explain,.m-contact{font-size:16px}
  .m-explain .m-wrap{padding-block:16px 48px;gap:40px}
  .m-ladder{gap:4px}
  .m-bar{font-size:12px}
  .m-lvl{font-size:10.5px;letter-spacing:0}
  .m-contact-box{padding:22px}
}
@media (prefers-reduced-motion:no-preference){
  .m-amt,.m-sub,.m-was,.m-rate{transition:opacity .16s ease}
  .swapping .m-amt,.swapping .m-sub,.swapping .m-was,.swapping .m-rate{opacity:.25}
}
@media (prefers-reduced-motion:reduce){.m-feats summary::after{transition:none}}

/* ---------------- meet your coach (memberships page) ---------------- */
.m-coach{background:url("../img/cream-tex.jpg") top center / 100% auto repeat-y, var(--cream);color:var(--ink);font-size:17px}
.m-coach .m-wrap{padding-block:0 64px}
.m-coach-box{display:grid;grid-template-columns:minmax(0, 340px) minmax(0, 1fr);gap:44px;align-items:center;scroll-margin-top:calc(var(--navh) + 16px)}
.m-coach-img{width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:16px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--green)}
.m-coach-txt{display:grid;gap:14px;min-width:0}
.m-coach h2{font-size:clamp(26px, 3.4vw, 38px);font-stretch:112%;line-height:1.05}
.m-coach-txt > p{max-width:62ch;font-stretch:102%;color:#4A473B}
.m-creds{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.m-creds li{border:2px solid #D9D8C8;border-radius:12px;padding:12px 14px;display:grid;gap:2px;background:rgba(255,255,240,.6)}
.m-creds b{font-weight:600;font-stretch:108%;color:var(--ink)}
.m-creds span{font-size:14px;color:#5A574B;line-height:1.35}
.m-coach-spec b{color:var(--ink);font-weight:600}
.m-coach-quote{margin:4px 0 0;padding:4px 0 4px 18px;border-left:4px solid var(--green);font-size:19px;font-style:italic;font-stretch:96%;color:var(--ink);max-width:60ch}
.m-coach-quote cite{display:block;margin-top:6px;font-size:14px;font-style:normal;color:var(--green)}
@media (max-width:960px){
  .m-coach-box{grid-template-columns:minmax(0, 1fr);gap:28px}
  .m-coach-img{max-width:300px;justify-self:center}
}
@media (max-width:520px){
  .m-coach{font-size:16px}
  .m-coach .m-wrap{padding-block:0 48px}
  .m-coach-img{max-width:240px;box-shadow:7px 7px 0 var(--green)}
  .m-creds{grid-template-columns:minmax(0, 1fr)}
  .m-coach-quote{font-size:17px}
}

/* ---------------- compact top on the memberships page ----------------
   Scoped to .m-hero so the plans section on the home page is unchanged.
   Same type and colours, about half the height, so the plan cards
   show on the first screen. */
.m-hero{padding-top:clamp(20px, calc(34 * var(--px)), 36px)}
.m-hero .m-stage{gap:14px}
.m-hero .m-head{gap:6px}
.m-hero .m-title{font-size:clamp(26px, calc(46 * var(--px)), 48px)}
.m-hero .m-kick{font-size:clamp(15px, calc(22 * var(--px)), 23px)}
.m-hero .m-promo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;padding:9px 20px;border-radius:10px}
.m-hero .m-promo-top{font-size:clamp(15px, 1.6vw, 18px);gap:4px 10px}
.m-hero .m-promo-lock{font-size:clamp(13px, 1.3vw, 15px)}
.m-hero .m-incl{font-size:clamp(13px, 1.4vw, 17px)}
.m-hero .m-toggle{margin-top:2px}
.m-hero .m-cards{margin-top:6px}
@media (max-width:520px){
  .m-hero .m-stage{gap:10px}
  .m-hero .m-title{font-size:24px}
  .m-hero .m-kick{font-size:14px}
  .m-hero .m-promo{padding:7px 12px;gap:2px 8px}
  .m-hero .m-promo-top span{display:none}
  .m-hero .m-promo-top{font-size:15px}
  .m-hero .m-promo-lock{font-size:12.5px}
  .m-hero .m-incl{font-size:11.5px;letter-spacing:-.01em}
  .m-hero .m-toggle button{padding:6px 4px}
}
.m-hero .m-stage{gap:12px}
@media (max-width:520px){
  .m-hero{padding-top:16px}
  .m-hero .m-stage{gap:8px}
  .m-hero .m-head{gap:4px}
  .m-hero .m-title{font-size:23px}
  .m-hero .m-kick{font-size:13px}
  .m-hero .m-promo{padding:6px 10px;row-gap:0}
  .m-hero .m-promo-top{font-size:14px}
  .m-hero .m-promo-lock{font-size:12px}
  .m-hero .m-toggle{padding:3px;margin-top:0}
  .m-hero .m-toggle button{padding:4px 2px;font-size:12.5px;line-height:1.15}
  .m-hero .m-toggle button small{font-size:10.5px}
  .m-hero .m-cards{margin-top:4px}
}