/* ============================================================
   NORTHERN LIGHTS - fan club (/club)
   Loaded after styles.css: reuses its tokens, .btn, .kicker,
   .aurora and .grain. Three views live in one page:
     .gate   what visitors see before joining
     .ob     the full-screen onboarding
     .lobby  the member home
   The member pass (.pass) is shared by all three.
   ============================================================ */

/* --light is the member's chosen color; registering it lets it fade
   between colors instead of snapping. */
@property --light{syntax:'<color>';inherits:true;initial-value:#34e24a}

.clubpage{--light:var(--green);min-height:100svh;transition:--light .8s ease}
.clubpage.is-locked{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* icons are hydrated from data-ic by club.js */
.ic{display:inline-flex;flex-shrink:0}
.ic svg{width:1em;height:1em;display:block}
.ic--inline{vertical-align:-.14em}

.btn--lg{width:100%;padding:17px 28px;font-size:15.5px}
.btn:disabled{opacity:.35;pointer-events:none}
.btn[hidden]{display:none}
.btn.is-busy{pointer-events:none;opacity:.7}

/* ---------- top bar ---------- */
.clubnav{position:fixed;top:0;left:0;right:0;z-index:1300;display:flex;align-items:center;gap:20px;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(18px,4vw,40px) 18px;
  background:linear-gradient(to bottom,rgba(7,7,8,.88),rgba(7,7,8,0))}
/* members scroll long pages of text under it, so it gets a more solid backing */
.is-member .clubnav{background:linear-gradient(to bottom,rgba(7,7,8,.97) 62%,rgba(7,7,8,0))}
.clubnav__brand{display:flex;align-items:center;gap:11px;margin-right:auto;font-family:var(--font-cond);font-weight:600;letter-spacing:.22em;font-size:12px}
.clubnav__brand img{width:26px;height:26px;filter:invert(1);opacity:.95}
.clubnav__link{font-family:var(--font-cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:8px 0;transition:color .2s}
.clubnav__link:hover{color:var(--white)}
.clubnav__ico{display:inline-flex;align-items:center;gap:7px}   /* edit pass, membership, sign out: icon + word */
.clubnav__ico .ic{display:inline-flex}
.clubnav__ico svg{width:16px;height:16px}

/* ============================================================
   THE PASS - a backstage laminate. Sized in cqw so one piece of
   markup works at any width; .passwrap sets the width.
   ============================================================ */
.passwrap{position:relative;width:var(--pass-w,260px);flex-shrink:0;container-type:inline-size;
  transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pass{position:relative;aspect-ratio:5/7.8;display:flex;flex-direction:column;padding:5.5cqw;border-radius:7cqw;overflow:hidden;overflow:clip;
  background:linear-gradient(165deg,#1b1b21 0%,#0e0e12 55%,#08080a 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 70px -24px var(--light),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease-out}
.pass::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.6cqw;background:var(--light)}
.pass__slot{align-self:center;width:22cqw;height:4.6cqw;border-radius:99px;background:#040405;margin-bottom:4.4cqw;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.09)}
.pass__head{display:flex;align-items:center;gap:2.6cqw;font-family:var(--font-cond);font-weight:600;font-size:3.5cqw;letter-spacing:.22em;line-height:1;text-transform:uppercase;white-space:nowrap}
.pass__head img{width:7cqw;height:7cqw;filter:invert(1)}
.pass__head span:last-child{margin-left:auto;color:var(--light)}
/* clip, not hidden: the zoomed photos overflow their frames, and a hidden box can still be scrolled by focus or scrollIntoView */
.pass__photo{position:relative;flex:1;min-height:0;margin-top:4cqw;border-radius:3.5cqw;overflow:hidden;overflow:clip;background:#0a0a0c}
.pass__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);transform-origin:var(--fx,50%) var(--fy,50%);transform:scale(var(--z,1));
  filter:grayscale(1) contrast(1.1);transition:opacity .5s}
.pass__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,8,10,0) 40%,rgba(8,8,10,.92)),
             linear-gradient(to top,color-mix(in srgb,var(--light) 26%,transparent),transparent 55%)}
.pass__access{position:absolute;left:4cqw;bottom:3cqw;z-index:2;font-family:var(--font-display);font-size:13cqw;line-height:.88;
  text-transform:uppercase;letter-spacing:.01em;color:var(--light)}
.pass__name{margin-top:4cqw;font-family:var(--font-display);font-size:11cqw;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass__name.is-empty{color:rgba(255,255,255,.2)}
.pass__meta{margin-top:1cqw;min-height:1.5em;font-family:var(--font-cond);font-size:3.6cqw;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass__foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:3.6cqw;padding-top:3.4cqw;
  border-top:1px dashed rgba(255,255,255,.18);font-family:var(--font-cond);font-size:3cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.pass__foot b{display:block;margin-top:.6cqw;font-family:var(--font-display);font-weight:400;font-size:6.4cqw;letter-spacing:.06em;color:var(--white)}
.pass__bars{width:24cqw;height:8.4cqw;opacity:.75;
  background:repeating-linear-gradient(90deg,#f4f4f1 0 .5cqw,transparent .5cqw 1.4cqw,#f4f4f1 1.4cqw 2.4cqw,transparent 2.4cqw 2.9cqw,#f4f4f1 2.9cqw 3.3cqw,transparent 3.3cqw 4.6cqw)}
.pass__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(115deg,transparent 26%,color-mix(in srgb,var(--light) 55%,transparent) 41%,rgba(40,224,192,.32) 48%,rgba(160,107,255,.4) 56%,transparent 72%);
  background-size:260% 260%;background-position:var(--sx,22%) var(--sy,22%);
  animation:passSheen 7s ease-in-out infinite}
.pass.is-tilting .pass__sheen{animation:none;transition:background-position .25s ease-out}
@keyframes passSheen{0%,100%{background-position:15% 20%}50%{background-position:85% 80%}}
.pass__stamp{position:absolute;right:6cqw;top:25cqw;z-index:3;padding:.4cqw 3cqw;border:.8cqw solid var(--light);border-radius:2cqw;
  font-family:var(--font-display);font-size:8cqw;letter-spacing:.08em;line-height:1.25;text-transform:uppercase;color:var(--light);
  background:rgba(8,8,10,.62);transform:rotate(-12deg) scale(2.6);opacity:0;pointer-events:none}
.pass.is-active .pass__stamp{animation:passStamp .45s cubic-bezier(.2,1.4,.4,1) var(--stamp-delay,.2s) forwards}
@keyframes passStamp{to{opacity:.94;transform:rotate(-12deg) scale(1)}}

/* lanyard + drop-in, used when the pass goes live */
.passwrap__strap{position:absolute;left:50%;bottom:calc(100% - 9cqw);width:7cqw;height:70vh;margin-left:-3.5cqw;border-radius:1cqw;opacity:0;
  background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.35)),var(--light)}
.passwrap.is-hung{transform-origin:50% -60vh;animation:passSwing 2.8s cubic-bezier(.3,.6,.3,1) both}
.passwrap.is-hung .passwrap__strap{opacity:.9}
@keyframes passSwing{0%{transform:translateY(-120vh) rotate(7deg)}34%{transform:translateY(0) rotate(-4deg)}
  56%{transform:rotate(2.6deg)}76%{transform:rotate(-1.2deg)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .pass__sheen,.passwrap.is-hung{animation:none}
  .pass,.passwrap{transition:none}
  .pass.is-active .pass__stamp{animation-duration:.01s;animation-delay:0s}
}

/* ============================================================
   GATE
   ============================================================ */
.ghero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(96px + env(safe-area-inset-top,0px)) var(--pad) 64px}
.ghero__bg{position:absolute;inset:0;background-size:cover;background-position:38% 30%;filter:grayscale(1) contrast(1.05);opacity:.55}
.ghero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,7,8,.72) 0%,rgba(7,7,8,.35) 42%,var(--bg) 100%)}
.ghero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,90px);align-items:center}
.ghero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ghero__title{font-family:var(--font-display);font-size:clamp(68px,13vw,176px);line-height:.93;letter-spacing:.005em;text-transform:uppercase}
.ghero__lede{max-width:30em;font-size:clamp(16px,2vw,19px);color:rgba(244,244,241,.82)}
.ghero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:6px}
.ghero__cta .btn--lg{width:auto;min-width:240px}
.ghero__signin{background:none;border:0;cursor:pointer;padding:10px 0;font-family:var(--font-body);font-size:14.5px;color:var(--muted)}
.ghero__signin b{color:var(--white);border-bottom:1px solid var(--green)}
.ghero__fine{font-family:var(--font-cond);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.ghero__pass{display:flex;justify-content:center;--pass-w:clamp(230px,24vw,320px)}
.ghero__pass .passwrap{transform:rotate(5deg)}

.gsec{max-width:var(--maxw);margin:0 auto;padding:var(--space-section) var(--pad) 0}
.gsec--narrow{max-width:860px}
.gsec__head{margin-bottom:var(--space-head)}
.gsec__title{margin-top:10px;font-family:var(--font-display);font-size:clamp(42px,7.4vw,96px);line-height:.92;text-transform:uppercase;letter-spacing:.01em}

.perks{border-top:1px solid var(--line)}
.perk{display:grid;grid-template-columns:56px 1fr 46px;gap:8px 18px;align-items:center;padding:clamp(18px,2.6vw,28px) 0;border-bottom:1px solid var(--line)}
.perk__n{font-family:var(--font-cond);font-weight:500;font-size:12px;letter-spacing:.24em;color:var(--muted-2)}
.perk__title{font-family:var(--font-display);font-size:clamp(27px,4.6vw,46px);line-height:1;text-transform:uppercase;letter-spacing:.01em;transition:color .25s}
.perk__text{margin-top:6px;max-width:54ch;color:var(--muted);font-size:15px}
.perk__ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--green);transition:background .25s,color .25s,border-color .25s}
@media (hover:hover){
  .perk:hover .perk__title{color:var(--green-bright)}
  .perk:hover .perk__ic{background:var(--green);border-color:var(--green);color:#04140a}
}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--font-cond);font-weight:500;font-size:18px;letter-spacing:.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{font-size:15px;color:var(--muted);transition:transform .25s,color .25s}
.faq details[open] summary .ic{transform:rotate(90deg);color:var(--green)}
.faq p{padding:0 0 22px;max-width:60ch;color:var(--muted);font-size:15.5px}

.gclose{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
  padding:var(--space-section) var(--pad) calc(var(--space-section) + 40px)}
.gclose__title{font-family:var(--font-display);font-size:clamp(56px,12vw,150px);line-height:.9;text-transform:uppercase}
.gclose .btn--lg{width:auto;min-width:260px}
.gclose__back{font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding:10px}
.gclose__back:hover{color:var(--white)}

.joinbar{display:none}

/* ============================================================
   LOBBY
   ============================================================ */
.lobby{max-width:var(--maxw);margin:0 auto;padding:calc(104px + env(safe-area-inset-top,0px)) var(--pad) 60px}
.lhead{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,70px);align-items:center;margin-bottom:var(--space-head)}
.lhead__title{margin:12px 0 14px;font-family:var(--font-display);font-size:clamp(46px,8.6vw,112px);line-height:.98;text-transform:uppercase;overflow-wrap:anywhere}
.lhead__title span{color:var(--light)}
.lhead__lede{max-width:34em;color:var(--muted);font-size:16px}
.lhead__pass{--pass-w:clamp(190px,20vw,250px);transform:rotate(4deg);--stamp-delay:.5s}

.ltiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ltile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:var(--r-md);
  border:1px solid var(--line);background:linear-gradient(150deg,var(--panel),var(--panel-2))}
.ltile--ship{border-color:color-mix(in srgb,var(--green) 40%,var(--line));
  background:radial-gradient(120% 90% at 0% 0%,rgba(52,226,74,.14),transparent 60%),linear-gradient(150deg,var(--panel),var(--panel-2))}
.ltile__ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.05);align-items:center;justify-content:center;font-size:20px;color:var(--light)}
.ltile__title{font-family:var(--font-display);font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.01em;margin-top:6px}
.ltile__text{color:var(--muted);font-size:15px}
.ltile .btn{margin-top:auto}
.ltile--ship .btn{margin-top:auto;align-self:stretch}

.ltile--qa .btn{margin-top:auto;align-self:stretch}

.boards{width:100%;margin-top:4px;border-top:1px solid var(--line-soft)}
.boards li{border-bottom:1px solid var(--line-soft)}
.boards a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.boards a:hover b{color:var(--light)}
.ltile--boards .btn{margin-top:8px;align-self:stretch}
.boards b{font-family:var(--font-cond);font-weight:500;font-size:16px;letter-spacing:.03em}
.boards small{display:block;color:var(--muted-2);font-size:13px}
.tag{flex-shrink:0;padding:4px 10px;border-radius:100px;border:1px solid var(--line);font-family:var(--font-cond);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.lbundle{display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:center;margin-top:14px;padding:22px 24px;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--light) 35%,var(--line));
  background:radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--light) 14%,transparent),transparent 60%),linear-gradient(150deg,var(--panel),var(--panel-2))}
.lbundle__title{font-family:var(--font-display);font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.lbundle__text{margin-top:6px;color:var(--muted);font-size:15px}

/* ---- your shows: a running log of ticket stubs ---- */
.lshows{margin-top:14px;padding:22px 24px 24px;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(150deg,var(--panel),var(--panel-2))}
.lshows__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 24px}
.lshows__count{display:flex;align-items:baseline;gap:10px;margin-top:8px;font-family:var(--font-display);font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.lshows__count b{font-weight:400;font-size:54px;color:var(--light)}
.lshows .ltile__text{margin-top:6px}
.stubs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.stub{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;min-width:0;max-width:100%;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--light) 35%,var(--line));background:rgba(255,255,255,.035);
  mask:radial-gradient(7px at 0 50%,transparent 97%,#000),radial-gradient(7px at 100% 50%,transparent 97%,#000);mask-composite:intersect;-webkit-mask-composite:source-in}
.stub__date{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;min-width:58px;padding:9px 10px 8px;
  border-right:1px dashed color-mix(in srgb,var(--light) 45%,var(--line));background:color-mix(in srgb,var(--light) 12%,transparent);color:var(--light)}
.stub__date b{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1}
.stub__date small{margin-top:3px;font-family:var(--font-cond);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.stub__main{min-width:0;padding:9px 14px 9px 12px;line-height:1.25}
.stub__main b{display:block;font-family:var(--font-cond);font-weight:500;font-size:15px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stub__main small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stub--empty{border-style:dashed;border-color:var(--line);opacity:.7}
.stub--empty .stub__date{background:none;border-right-color:var(--line);color:var(--muted-2)}
.stub--sm .stub__date{min-width:50px;padding:7px 8px 6px}
.stub--sm .stub__date b{font-size:20px}
.stub--sm .stub__main{padding:7px 12px 7px 10px}
.stub--sm .stub__main b{font-size:14px}
.stubs--card{margin:8px 0 16px}
.stubs__more{align-self:center;font-family:var(--font-cond);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* the sheet: every show, tick the ones you were at */
.showpick{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.showopt{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;cursor:pointer}
.showopt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.showopt .stub{display:grid;max-width:none;opacity:.55;transition:opacity .2s,border-color .2s}
.showopt input:checked ~ .stub,.showopt.is-custom .stub{opacity:1;border-color:var(--light)}
.showopt__check{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;transition:background .2s,border-color .2s,color .2s}
.showopt__check svg{width:13px;height:13px}
.showopt input:checked ~ .showopt__check{background:var(--light);border-color:var(--light);color:#04140a}
.showopt input:focus-visible ~ .showopt__check{outline:2px solid var(--white);outline-offset:2px}
.showopt__x{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.showopt__x svg{width:11px;height:11px}
.showadd{margin:8px 0 18px;padding-top:4px}
.showadd summary{display:flex;align-items:center;gap:8px;padding:10px 0;cursor:pointer;list-style:none;font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.showadd summary::-webkit-details-marker{display:none}
.showadd summary svg{width:14px;height:14px}
.showadd[open] summary{color:var(--white)}
.showadd form{margin-top:4px}

/* ---- signed polaroids at 6 and 12 months ---- */
.lpola{display:grid;grid-template-columns:1fr auto;gap:18px clamp(20px,4vw,48px);align-items:center;margin-top:14px;padding:22px 24px;border-radius:var(--r-md);
  border:1px solid var(--line);background:linear-gradient(150deg,var(--panel),var(--panel-2))}
.lpola__copy{min-width:0}
.lpola .ltile__ic{margin-bottom:10px}
.lpola__track{position:relative;height:6px;margin:18px 6px 0 0;border-radius:6px;background:rgba(255,255,255,.1)}
.lpola__track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--light);box-shadow:0 0 14px var(--light);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.lpola__track b{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--bg);background:rgba(255,255,255,.35)}
.lpola__marks{display:flex;justify-content:space-between;margin:8px 6px 0 0;font-family:var(--font-cond);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.polas{display:flex;gap:14px;padding:6px 10px 2px 0}
.pola{display:flex;flex-direction:column;gap:8px;width:112px;padding:8px 8px 10px;border-radius:3px;background:#efeee8;color:#2a2a2e;
  box-shadow:0 14px 30px rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));transition:transform .3s,filter .3s}
.pola__pic{display:block;aspect-ratio:1;background-size:cover;background-position:50% 35%;filter:grayscale(1) contrast(1.1) brightness(.45)}
.pola__cap{font-family:var(--font-cond);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:#6b6b70}
.pola.is-earned .pola__pic{filter:grayscale(0) contrast(1.05)}
.pola.is-earned .pola__cap{font-family:'Caveat','Bradley Hand','Segoe Script',cursive;font-size:18px;letter-spacing:0;text-transform:none;color:#1b1b1f}
.pola:not(.is-earned){filter:saturate(.3) brightness(.78)}
@media (hover:hover){.pola:hover{transform:rotate(0deg) translateY(-4px)}}

.lwall{display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:center;margin-top:14px;padding:22px 24px;border-radius:var(--r-md);
  border:1px solid var(--line);background:linear-gradient(150deg,var(--panel),var(--panel-2))}

/* ---------- the members wall ---------- */
.wall{max-width:1100px;margin:0 auto;padding:calc(92px + env(safe-area-inset-top,0px)) var(--pad) 120px}
.wall__crumbs{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-family:var(--font-cond);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wall__crumbs a{color:var(--muted)}.wall__crumbs a:hover{color:var(--white)}.wall__crumbs i{opacity:.4}.wall__crumbs span{color:var(--white)}
.wall__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px 24px;margin-bottom:34px}
.wall__title{margin-top:8px;font-family:var(--font-display);font-size:clamp(46px,9.4vw,96px);line-height:.96;letter-spacing:.01em;text-transform:uppercase}
.wall__lede{margin-top:10px;max-width:46ch;color:var(--muted);font-size:16px;line-height:1.5}
.wallgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:30px 20px}
.wall__item{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.wall__pass{--pass-w:100%;width:100%;--stamp-delay:.1s}
.wall__pass .passwrap__strap{display:none}
.wall__pass .pass{transform:rotate(var(--tilt,0deg));transition:transform .3s ease}
.wall__item:hover .pass{transform:rotate(0deg) translateY(-4px)}
.wall__cap{text-align:center;font-family:var(--font-cond);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.wall__cap b{display:block;color:var(--light);font-weight:600}
.wall__empty{padding:40px 0;color:var(--muted)}
.lmore{margin-top:clamp(40px,6vw,64px)}
.lmore__list{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;border-top:1px solid var(--line)}
.lmore__list li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.lmore__list .ic{font-size:20px;color:var(--muted)}
.lmore__list b{display:block;font-family:var(--font-cond);font-weight:500;font-size:16px;letter-spacing:.03em}
.lmore__list small{color:var(--muted-2);font-size:13px}
.lmore__list .tag{margin-left:auto}


/* ============================================================
   ONBOARDING
   ============================================================ */
.ob{position:fixed;inset:0 0 auto 0;height:100dvh;z-index:5000;display:flex;flex-direction:column;background:var(--bg);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.ob.is-open{opacity:1;visibility:visible}

.ob__aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ob__aurora span{position:absolute;border-radius:50%;filter:blur(80px);width:95vw;height:95vw;max-width:760px;max-height:760px;
  transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.ob__aurora span:first-child{top:-22%;left:-30%;background:radial-gradient(circle,var(--light) 0%,transparent 65%);opacity:.34}
.ob__aurora span:last-child{bottom:-30%;right:-34%;background:radial-gradient(circle,var(--purple) 0%,transparent 65%);opacity:.24}
.ob.is-bloom .ob__aurora span:first-child{opacity:.6;transform:scale(1.35) translate(8%,10%)}
.ob.is-bloom .ob__aurora span:last-child{opacity:.4;transform:scale(1.25) translate(-8%,-8%)}

.ob__top{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px}
.ob__btn{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:rgba(10,10,12,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s}
.ob__btn:hover{border-color:rgba(255,255,255,.4)}
.ob__btn.is-off{opacity:0;pointer-events:none}
.ob__bars{flex:1;display:flex;gap:4px}
.ob__bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.ob__bars b{display:block;height:100%;width:0;border-radius:3px;background:var(--white);transition:width .4s ease}
.ob__bars i.is-done b{width:100%}
.ob__bars i.is-now b{width:100%;background:var(--light)}
.ob__bars i.is-timed b{transition:width .25s linear}
.ob__bars{transition:opacity .4s}
.ob[data-step="done"] .ob__bars,.ob[data-step="bundle"] .ob__bars{opacity:0}   /* finished: the lanyard gets the top of the screen */

.ob__stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}
.ob__passarea{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:0;opacity:0;pointer-events:none;--pass-w:128px;
  transition:height .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.ob[data-pass="sm"] .ob__passarea{height:226px;opacity:1}
.ob[data-pass="lg"] .ob__passarea{height:min(44dvh,350px);opacity:1;--pass-w:calc((min(44dvh,350px) - 30px) / 1.56)}

.ob__panel{position:relative;flex:1;min-height:0;width:100%;max-width:520px;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:6px 22px calc(20px + env(safe-area-inset-bottom,0px))}
.ob__panel::-webkit-scrollbar{display:none}

.step{display:none;flex-direction:column;gap:13px}
.step.is-on{display:flex;animation:stepIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes stepIn{from{opacity:0;transform:translateY(18px)}}
.ob[data-pass="none"] .step:not(.step--video){padding-top:clamp(18px,7dvh,70px)}
.step--fill{flex:1}
.step__end{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:12px}
.step__end[hidden]{display:none}
.step__kicker{font-family:var(--font-cond);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--light)}
.step__title{font-family:var(--font-display);font-size:clamp(38px,10.4vw,58px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.step__text{color:var(--muted);font-size:15.5px}
.step__text b{color:var(--white)}
.step__form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.step__err{color:#ff8f8f;font-size:14px}
.step__err:empty{display:none}
.step__link{align-self:center;background:none;border:0;cursor:pointer;padding:8px;font-family:var(--font-body);font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.step__fine{text-align:center;font-family:var(--font-cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

.field{width:100%;padding:17px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--white);
  font-family:var(--font-body);font-size:17px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field::placeholder{color:var(--muted-2)}
.field:focus{border-color:var(--light);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px color-mix(in srgb,var(--light) 18%,transparent)}

.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code input{width:100%;min-width:0;aspect-ratio:1/1.2;padding:0;text-align:center;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--white);font-family:var(--font-display);font-size:30px;outline:none;caret-color:var(--light);transition:border-color .2s,box-shadow .2s,transform .15s}
.code input:focus{border-color:var(--light);box-shadow:0 0 0 4px color-mix(in srgb,var(--light) 18%,transparent)}
.code input.is-filled{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

/* ---- members ---- */
.members{display:flex;gap:10px;margin:4px -22px 0;padding:4px 22px 10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.members::-webkit-scrollbar{display:none}
.member{position:relative;flex:0 0 clamp(112px,34vw,140px);aspect-ratio:3/4.1;padding:0;border-radius:14px;overflow:hidden;overflow:clip;cursor:pointer;scroll-snap-align:center;
  border:1.5px solid var(--line);background:#0c0c0f;color:var(--white);text-align:left;
  transition:border-color .25s,box-shadow .25s,transform .2s}
.member img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);transform-origin:var(--fx,50%) var(--fy,50%);transform:scale(var(--z,1));
  filter:grayscale(1) contrast(1.08) brightness(.8);transition:filter .4s}
.member::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 48%,rgba(6,6,8,.92))}
.member__name{position:absolute;left:11px;bottom:24px;z-index:2;font-family:var(--font-display);font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.member__role{position:absolute;left:11px;right:8px;bottom:9px;z-index:2;font-family:var(--font-cond);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member__check{position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;border-radius:50%;background:var(--light);color:#04140a;font-size:12px;
  align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.member:active{transform:scale(.97)}
.member--photo img{filter:grayscale(1) contrast(1.08) brightness(.9)}
.member--empty{border-style:dashed;background:rgba(255,255,255,.03)}
.member--empty::after{background:none}
.member__add{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-32px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--light);font-size:20px;display:flex;align-items:center;justify-content:center}
.member--empty .member__name{color:var(--muted)}
.member[aria-pressed="true"]{border-color:var(--light);box-shadow:0 0 0 3px color-mix(in srgb,var(--light) 22%,transparent),0 14px 34px rgba(0,0,0,.5)}
.member[aria-pressed="true"] img{filter:grayscale(0) contrast(1.05) brightness(1)}
.member[aria-pressed="true"] .member__check{transform:none}

/* ---- lights ---- */
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.lightopt{--c:var(--green);display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 6px 16px;border-radius:16px;cursor:pointer;
  border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
  font-family:var(--font-cond);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:border-color .25s,color .25s,background .25s}
.lightopt i{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 55%,#000));
  box-shadow:0 0 0 0 var(--c);transition:box-shadow .4s,transform .3s cubic-bezier(.2,1.5,.4,1)}
.lightopt[aria-pressed="true"]{border-color:var(--c);color:var(--white);background:color-mix(in srgb,var(--c) 9%,transparent)}
.lightopt[aria-pressed="true"] i{box-shadow:0 0 34px 2px var(--c);transform:scale(1.1)}

/* ---- activate ---- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 16px 14px;border-radius:16px;cursor:pointer;text-align:left;
  border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);transition:border-color .25s,background .25s,color .25s}
.plan b{font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1;letter-spacing:.01em;color:var(--white)}
.plan span{font-size:14px}
.plan em{position:absolute;top:-10px;right:12px;padding:3px 9px;border-radius:100px;background:var(--light);color:#04140a;
  font-family:var(--font-cond);font-weight:600;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.plan[aria-pressed="true"]{border-color:var(--light);background:color-mix(in srgb,var(--light) 9%,transparent);color:var(--white)}
.plan[aria-pressed="true"] b{color:var(--light)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.price__amt{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--light)}
.price__per{color:var(--muted);font-size:15px}
.checks{display:flex;flex-direction:column;gap:9px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.4}
.checks .ic{margin-top:2px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--light) 18%,transparent);color:var(--light);font-size:11px;align-items:center;justify-content:center}

/* ---- member bundle ---- */
.bhead{display:flex;align-items:center;gap:14px}
.bhead__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.bhead__pass{--pass-w:92px;margin-right:8px;transform:rotate(6deg)}
.price s{color:var(--white);white-space:nowrap;text-decoration-color:var(--light);text-decoration-thickness:2px}
.ob[data-pass="wide"] .step{padding-top:clamp(6px,2.5dvh,28px)}
.bitems{display:flex;flex-direction:column;gap:10px}
.bitems li{display:flex;align-items:center;gap:12px;line-height:1.3}
.bitems .ic{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--light) 14%,transparent);color:var(--light);font-size:18px;align-items:center;justify-content:center}
.bitems b{display:block;font-size:15.5px}
.bitems small{color:var(--muted);font-size:13px}
.sizes{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:4px}
.sizes__label{flex-basis:100%;font-family:var(--font-cond);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.size{min-width:46px;height:42px;padding:0 12px;border-radius:100px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--white);cursor:pointer;
  font-family:var(--font-cond);font-weight:600;font-size:13.5px;letter-spacing:.08em;transition:border-color .2s,background .2s}
.size[aria-pressed="true"]{border-color:var(--light);background:color-mix(in srgb,var(--light) 18%,transparent)}

/* ---- video steps: full-bleed on phones, a portrait card on desktop ---- */
.step--video.is-on{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;animation-name:vidIn}
@keyframes vidIn{from{opacity:0}}
.vid{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.vid video,.vid__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__poster{background-size:cover;background-position:50% 70%;filter:grayscale(1) contrast(1.1) brightness(.7);transition:opacity .5s}
.vid.is-playing .vid__poster{opacity:0}
.vid__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 20%,transparent 50%,rgba(0,0,0,.88) 100%)}
.vid__play{position:absolute;top:44%;left:50%;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green);color:#04140a;font-size:30px;display:none;align-items:center;justify-content:center;box-shadow:0 0 50px var(--green-glow);
  animation:vidPulse 2.2s ease-in-out infinite}
.vid.needs-tap .vid__play{display:flex}
@keyframes vidPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.vid__soon{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);display:none;padding:8px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.3);
  background:rgba(8,8,10,.6);font-family:var(--font-cond);font-size:12px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.vid.is-empty .vid__soon{display:block}
.vid__cap{position:absolute;left:22px;right:22px;bottom:calc(94px + env(safe-area-inset-bottom,0px))}
.vid__cap .step__kicker{margin-bottom:8px}
.vid__actions{position:absolute;left:22px;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}
.vid__sound{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(8,8,10,.5);color:var(--white);font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vid.is-empty .vid__sound{visibility:hidden}
.vid__skip{background:rgba(8,8,10,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.25)}
.vid__skip.is-ready{background:var(--green);border-color:var(--green);color:#04140a}

/* ---- confirming (back from Stripe) ---- */
.ob[data-step="confirm"] .step__title::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.3em;border-radius:50%;background:var(--light);animation:confirmPulse 1s ease-in-out infinite;vertical-align:.1em}
@keyframes confirmPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.ob[data-step="confirm"] .step:has(#confirmEnd:not([hidden])) .step__title::after{display:none}

/* ---- a written note from the band (stands in for the videos) ---- */
.step--video.step--note.is-on{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;animation-name:stepIn;padding-top:clamp(18px,7dvh,70px)}
.letter{display:flex;flex-direction:column;gap:14px}
.letter__body{display:flex;flex-direction:column;gap:14px;margin-top:4px;font-size:17px;line-height:1.6;color:rgba(244,244,241,.9)}
.letter__sign{margin-top:6px;font-family:'Caveat','Bradley Hand','Segoe Script',cursive;font-size:26px;line-height:1.2;color:var(--light)}
.step--note .step__end{margin-top:auto;padding-top:26px}
@media (min-width:900px){
  .step--video.step--note.is-on{padding-top:0;max-width:520px;margin:0 auto}
  .step--note .step__end{margin-top:22px}
}

/* ---- done ---- */
.step--done{text-align:center;align-items:center}
.step--done .step__end{width:100%}
.ob__motes{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ob__motes i{position:absolute;bottom:-20px;width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:var(--c,var(--light));
  box-shadow:0 0 12px 2px var(--c,var(--light));opacity:0;animation:mote var(--d,4s) ease-out var(--w,0s) forwards}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--x,0),-104dvh)}}

.demochip{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);z-index:6000;pointer-events:none;
  padding:7px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(8,8,10,.86);
  font-family:var(--font-cond);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);white-space:nowrap;
  opacity:0;transition:opacity .4s,transform .4s}
.demochip.is-show{opacity:1;transform:translate(-50%,0)}
.clubpage.is-locked .demochip{bottom:auto;top:calc(13px + env(safe-area-inset-top,0px))}   /* onboarding: stay off the buttons */

@media (prefers-reduced-motion:reduce){
  .step.is-on,.vid__play,.ob__motes i{animation:none}
  .ob,.ob__aurora span,.ob__passarea{transition:none}
}

/* ============================================================
   DESKTOP ONBOARDING - pass on the left, question on the right
   ============================================================ */
@media (min-width:900px){
  .ob__top{padding:20px 28px 10px;max-width:760px;width:100%;margin:0 auto}
  .ob__stage{flex-direction:row;justify-content:center;gap:0;padding:0 40px 30px}
  .ob__passarea{height:auto!important;width:0;--pass-w:310px;transition:width .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;pointer-events:auto}
  .ob[data-pass="sm"] .ob__passarea,.ob[data-pass="lg"] .ob__passarea,.ob[data-pass="wide"] .ob__passarea{width:calc(310px + clamp(50px,7vw,110px));opacity:1;justify-content:flex-start}
  .bhead__pass{display:none}
  .ob[data-pass="wide"] .step{padding-top:0}
  .ob[data-pass="lg"] .ob__passarea{--pass-w:310px}
  .ob__panel{flex:0 1 470px;justify-content:center;overflow:visible;padding:0}
  .ob[data-pass="none"] .step:not(.step--video){padding-top:0}
  .step--fill{flex:0 0 auto}
  .step__end{margin-top:8px}
  .step--done{text-align:left;align-items:flex-start}
  .members{display:grid;grid-template-columns:repeat(3,1fr);margin:4px 0 0;padding:0;overflow:visible}
  .member{flex:none}
  .vid{width:auto;height:min(80dvh,760px);aspect-ratio:9/16;margin-top:34px;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .vid__cap{bottom:92px}
  .vid__actions{bottom:22px}
}

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width:860px){
  .ghero{align-items:flex-start;padding-top:calc(118px + env(safe-area-inset-top,0px));padding-bottom:0}
  .ghero__inner{grid-template-columns:1fr;gap:34px}
  .ghero__cta{width:100%}
  .ghero__cta .btn--lg{width:100%}
  .ghero__pass{--pass-w:min(62vw,250px);margin-bottom:-70px}

  .perk{grid-template-columns:34px 1fr 42px;gap:6px 12px;align-items:start}
  .perk__n{padding-top:8px}
  .perk__ic{width:42px;height:42px;font-size:18px}

  .is-member .clubnav__name{display:none}   /* phones: room for Home, Boards, Q&A */
  .is-member .clubnav__site{display:none}   /* phones: the monogram already goes home */
  .clubnav__wide{display:none}              /* phones: Members is reached from the member home */
  .clubnav__ico span:last-child{display:none}   /* phones: edit pass, membership, sign out as icons alone */
  .clubnav{gap:16px}
  .lhead{grid-template-columns:1fr}
  .lhead__pass{--pass-w:min(56vw,220px);justify-self:center;order:-1;margin-bottom:6px}
  .ltiles,.lmore__list{grid-template-columns:1fr}
  .lbundle,.lwall{grid-template-columns:auto 1fr}
  .lbundle .btn,.lwall .btn{grid-column:1 / -1;margin-top:8px}
  .wallgrid{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .lshows{padding:20px 18px 22px}
  .lshows__head .btn{width:100%}
  .stubs:not(.stubs--card){flex-wrap:nowrap;overflow-x:auto;margin:18px -18px 0;padding:0 18px 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 18px}
  .stubs::-webkit-scrollbar{display:none}
  .stubs:not(.stubs--card) .stub{flex:0 0 auto;max-width:78vw;scroll-snap-align:start}
  .lpola{grid-template-columns:1fr;padding:20px 18px}
  .polas{justify-content:center;padding:14px 0 6px}
  .plan b{font-size:32px}

  .joinbar{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;align-items:center;gap:14px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(9,9,11,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    border-top:1px solid var(--line);transform:translateY(105%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .joinbar.is-in{transform:none}
  .joinbar__txt{display:flex;flex-direction:column;margin-right:auto;line-height:1.25;font-family:var(--font-cond);font-size:13px;letter-spacing:.06em;color:var(--muted)}
  .joinbar__txt b{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--white)}
  .joinbar .btn{padding:13px 34px}
  .demochip{bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* clears the join bar */
  .is-member .demochip{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}