/* Best Friends Hockey Club: one look for the whole site, taken from the logo.
   Black, neon lime #B8FF00, hot pink #E6458C, purple #6E00B5, deep purple #2A0150, white. */
:root{
  --bg:#050507;--panel:#121117;--panel2:#1B1922;--line:#2C2934;--line2:#423D4E;
  --text:#F6F5F0;--mute:#A9A4B5;--lime:#B8FF00;--lime2:#D3FF5C;--pink:#E6458C;--purple:#6E00B5;--deep:#2A0150;
  --err:#FF7A9A;
  --display:"Big Shoulders Display","Barlow Condensed",Impact,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,-apple-system,sans-serif;
  --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.45}
a{color:var(--text)}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0;color:#fff}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.wrap.wide{max-width:1080px}
.center{text-align:center}
.muted{color:var(--mute)} .small{font-size:15px}
.err{color:var(--err);font-weight:600;margin:10px 0 0}
.okmsg{color:var(--lime);font-weight:600;margin:10px 0 0}
.btn.small{font-size:16px;padding:8px 14px;min-height:40px;border-radius:12px;box-shadow:none}
.hint{font-size:14px;color:var(--mute);margin-top:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header */
.bar{background:rgba(5,5,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar .wrap{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px}
.bar a.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.bar img{width:42px;height:42px;object-fit:contain}
.bar b{display:block;font-family:var(--display);font-weight:900;font-size:21px;text-transform:uppercase;line-height:1;color:#fff}
.bar small{display:block;font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.bar .sp{flex:1}
.bar a.toplink{font-family:var(--cond);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--text);border:2px solid var(--line2);border-radius:999px;padding:6px 14px;white-space:nowrap}
.bar a.toplink:hover{border-color:var(--text)}
main{padding:20px 0 56px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:19px;padding:13px 22px;border:0;border-radius:14px;background:var(--lime);color:#000;cursor:pointer;text-decoration:none;min-height:52px;transition:transform .08s,background .15s}
.btn:hover{background:var(--lime2)}
.btn:active{transform:scale(.98)}
.btn.big{width:100%;font-size:24px;padding:17px 22px;min-height:64px;box-shadow:0 10px 30px rgba(184,255,0,.18)}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--text)}
.btn.quiet{background:transparent;color:var(--soft,#D6D2DE);padding:8px 2px;min-height:0;font-size:16px;box-shadow:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.btn.quiet:hover{background:transparent;color:var(--text)}
.btn[disabled]{opacity:.5;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
#app > .btn.big{margin-top:18px}
#app > .err + .btn.big{margin-top:10px}

/* Cards and forms */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.card h2{font-size:28px;font-weight:900;margin-bottom:10px}
.card h3{font-size:22px;font-weight:800;margin-bottom:6px}
label.f{display:block;font-weight:600;font-size:15px;margin:14px 0 6px;color:#E4E1EA}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],select,textarea{width:100%;font:inherit;font-size:17px;padding:12px 13px;border:2px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text)}
input::placeholder,textarea::placeholder{color:#6F6A7B}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(246,245,240,.18);border-color:var(--text)}
.bad{border-color:var(--err)!important}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:420px){.row3{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.chip{flex:0 0 auto;font:inherit;font-weight:600;font-size:16px;padding:9px 15px;border:2px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--text);cursor:pointer}
.chip:hover{border-color:var(--line2)}
a.chip{text-decoration:none;display:inline-flex;align-items:center}
.chip.on{background:var(--text);border-color:var(--text);color:#000}
.chip small{display:block;font-size:12px;font-weight:500;opacity:.75}
.chip.day{border-radius:14px;text-align:center;min-width:74px;padding:8px 10px}
details summary{cursor:pointer;font-family:var(--cond);font-weight:800;font-size:18px;text-transform:uppercase;color:#fff;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:" +";color:var(--mute)}
details[open] summary::after{content:" \2212"}
details.more{margin:14px 0}
details.more summary{font-size:16px;color:var(--soft,#D6D2DE)}
details.more summary::after{content:""}

/* Panda */
.panda{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:#000 url(/panda.png) center 46%/86% no-repeat;border:2px solid var(--line2)}
.bubble{display:flex;gap:12px;align-items:flex-start;margin:4px 0 16px}
.bubble p{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:12px 14px;font-size:17px}
.bubble p b{color:var(--text)}

/* Booking steps */
.progress{display:flex;gap:6px;margin:2px 0 8px}
.progress span{flex:1;height:6px;border-radius:6px;background:var(--line)}
.progress span.on{background:var(--pink)}
.progresswrap{position:sticky;top:61px;z-index:5;background:var(--bg);margin:0 -16px;padding:10px 16px 8px;border-bottom:1px solid var(--line)}
.progresswrap .progress{margin:0 0 6px}
.steps{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.steps li{flex:1;text-align:center;font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.steps li.done{color:var(--soft,#D6D2DE)}
.steps li.now{color:var(--text)}
.count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.count > span{font-family:var(--cond);font-weight:800;font-size:20px;text-transform:uppercase;color:#fff}
.stepper{display:flex;align-items:center;gap:14px}
.stepper .n{font-family:var(--display);font-weight:900;font-size:34px;min-width:28px;text-align:center;color:var(--text);line-height:1}
.round{width:44px;height:44px;border-radius:50%;border:2px solid var(--line2);background:var(--panel2);color:#fff;font-size:24px;font-weight:700;cursor:pointer;line-height:1}
.round:hover{border-color:var(--text)}
.steplabel{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.q{font-size:clamp(42px,12vw,60px);font-weight:900;margin:12px 0 6px}
.lede{color:var(--mute);margin:0 0 18px;font-size:17px}
.back{margin:-4px 0 0}
.member{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.member .head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.member .head h3{font-size:24px}
.member > label.f:first-child,.member .head + div label.f{margin-top:6px}
.pair{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}
.suggest{margin-top:14px;padding:11px 13px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);font-weight:600}
.suggest b{color:var(--text)}
.suggest.dim{background:transparent;border-color:var(--line);color:var(--mute);font-weight:500}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;padding:16px;border:2px solid var(--line);border-radius:16px;background:var(--panel);cursor:pointer;width:100%;color:var(--text)}
.opt:hover{border-color:var(--line2)}
.opt.on{border-color:var(--text);background:var(--panel2)}
.opt .dot{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid var(--line2)}
.opt.on .dot{border:7px solid var(--text)}
.opt b{display:block;font-family:var(--cond);font-weight:800;font-size:22px;text-transform:uppercase;color:#fff;line-height:1.05}
.opt span{display:block;color:var(--mute);font-size:15px;margin-top:2px}
.opt.minor{padding:12px 16px;border-width:1px}
.opt.minor b{font-size:17px}
.opt.minor span{font-size:14px}
.check{display:flex;gap:12px;align-items:center;padding:13px;border:2px solid var(--line);border-radius:14px;margin-bottom:8px;cursor:pointer;background:var(--panel2)}
.check.on{border-color:var(--text);background:var(--panel2)}
.check input{width:22px;height:22px;accent-color:var(--text)}
.check b{display:block;color:#fff} .check span{display:block;color:var(--mute);font-size:15px}
.totalbar{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 4px;padding:14px 4px 0;border-top:1px solid var(--line)}
.totalbar span{color:var(--mute);font-weight:600}
.totalbar b{font-family:var(--display);font-weight:900;font-size:36px;color:var(--text);line-height:1}
.review{list-style:none;padding:0;margin:0}
.review li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.review li:first-child{border-top:0}
.review li span:first-child{color:var(--mute)}
.review li span:last-child{text-align:right;font-weight:600}
.fine{font-size:14px;color:var(--mute);text-align:center;margin:12px 0 0}

/* The official BFHC member card */
.mcard{position:relative;border-radius:26px;padding:22px 22px 34px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#43087F 0%,#22013F 45%,#000 100%);border:2px solid rgba(184,255,0,.55);box-shadow:0 18px 44px rgba(110,0,181,.35);overflow:hidden;margin:0 auto 14px;max-width:520px;text-align:left}
.mcard::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,var(--lime) 0 62%,var(--pink) 62% 81%,var(--purple) 81%)}
.mcard::after{content:"";position:absolute;right:-74px;top:-74px;width:240px;height:240px;border-radius:50%;border:28px solid rgba(230,69,140,.12)}
/* The card catches the light (cardshine.js): a sheen sweeps across once, then follows tilt or a finger. */
.mcard.shine{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;touch-action:pan-y}
.mcard.shine.tilting{transition:transform .08s linear}
.mcard .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,18%),rgba(255,255,255,.20),rgba(255,255,255,0) 42%),
    linear-gradient(115deg,transparent 28%,rgba(184,255,0,.10) 40%,rgba(230,69,140,.12) 50%,rgba(110,0,181,.14) 60%,transparent 72%);
  background-size:100% 100%,240% 100%;background-position:0 0,calc(var(--gx,30%) * 1.4) 0;opacity:.9}
.mcard .glare::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 48%,rgba(184,255,0,.22) 52%,transparent 64%);transform:translateX(-120%);animation:sheen 1.6s .5s cubic-bezier(.3,.6,.2,1) 1 forwards}
@keyframes sheen{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.mcard.shine{transform:none;transition:none}.mcard .glare{display:none}}
/* The official club logo, big, at the top of the card. */
.mcard .top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.mcard .top .clublogo{width:clamp(88px,26vw,112px);height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.mcard .top b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(22px,6.4vw,27px);text-transform:uppercase;line-height:1}
.mcard .top small{display:inline-block;margin-top:8px;font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--lime);color:#000;padding:2px 8px;border-radius:5px}
.mcard .mid{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:22px;position:relative;z-index:1}
.mcard .who{font-family:var(--display);font-weight:900;font-size:clamp(34px,10vw,44px);text-transform:uppercase;line-height:.95;overflow-wrap:anywhere}
.mcard .no{margin-top:14px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#C9C2D6}
.mcard .no b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(34px,9.5vw,42px);letter-spacing:.06em;color:var(--lime);line-height:1;margin-top:2px}
.mcard .since{font-size:14px;color:#C9C2D6;margin-top:6px}
.mcard .qr{background:#fff;border-radius:12px;padding:7px;width:clamp(92px,27vw,112px);height:clamp(92px,27vw,112px);flex:0 0 auto}
.mcard .qr svg{width:100%;height:100%;display:block}

/* My Skate Locker */
.pairline{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.pairline:first-of-type{border-top:0}
.pairline span{color:var(--mute);text-align:right}
.pill{display:inline-block;font-family:var(--cond);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.04em;background:var(--lime);color:#000;padding:4px 12px;border-radius:8px;margin:6px 0 12px}
.pill.grey{background:var(--panel2);color:var(--mute)}
.track{list-style:none;padding:0;margin:0 0 12px;display:flex;gap:6px}
.track li{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--mute);padding-top:10px;border-top:6px solid var(--line);line-height:1.2}
.track li.done{border-color:var(--pink);color:var(--text)}
.track li.now{border-color:var(--lime);color:#fff}
.kicker{font-family:var(--cond);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.big{font-size:19px;margin:0 0 6px}
.addr{font-size:20px;font-weight:700;margin:0;color:#fff}
.notes{white-space:pre-line;margin:8px 0 0}
.amount{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;color:var(--text);margin:2px 0 6px}
.paybtn{color:#fff} .paybtn.venmo{background:#0070D6} .paybtn.paypal{background:#FFC439;color:#111} .paybtn.cashapp{background:#00D64F;color:#111}
.zelle{margin-top:12px;padding:10px 12px;border:2px dashed var(--line2);border-radius:12px}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;max-height:420px;overflow:auto}
.msg{max-width:86%;padding:10px 12px;border-radius:16px;white-space:pre-line;font-size:16px}
.msg small{display:block;font-size:12px;color:var(--mute);margin-top:4px}
.msg.sam{background:var(--panel2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:#2A2333;align-self:flex-end;border-bottom-right-radius:4px}
.hist{padding:9px 0;border-top:1px solid var(--line);font-size:16px}
.loading{color:var(--mute);text-align:center;padding:40px 0}
footer{text-align:center;color:var(--mute);font-size:15px;padding:0 16px 40px}
footer a{color:var(--mute)}
@media (prefers-reduced-motion:no-preference){.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.3)}@keyframes pop{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:none;opacity:1}}}

/* ---------- Homepage, FIRE and team pages ---------- */
.hero{position:relative;overflow:hidden;padding:30px 0 44px;background:radial-gradient(55% 70% at 78% 45%,rgba(110,0,181,.5),transparent 70%),radial-gradient(40% 50% at 85% 60%,rgba(230,69,140,.18),transparent 70%),var(--bg)}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero .kick{font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 12px}
.hero h1{font-size:clamp(58px,10.5vw,112px);font-weight:900;line-height:.86}
.hero h1 span{display:block;color:var(--lime)}
.hero .tagline{font-family:var(--display);font-weight:900;font-size:clamp(28px,4.4vw,42px);text-transform:uppercase;line-height:.95;color:var(--pink);margin:0}
.hero .lead,.hero .sub{font-size:20px;color:#DCD8E4;margin:16px 0 24px;max-width:28em}
.hero .cta .btn.big{max-width:440px}
.hero .cta .btns{margin-top:12px}
.hero .fine{text-align:left;margin-top:12px}
.hero .art{display:flex;justify-content:center}
.hero .art img{width:min(100%,420px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
@media(max-width:760px){
  .hero{padding:16px 0 34px;text-align:center;background:radial-gradient(70% 38% at 50% 18%,rgba(110,0,181,.55),transparent 75%),var(--bg)}
  .hero .grid{grid-template-columns:1fr;gap:4px}
  .hero .art{order:-1}
  .hero .art img{width:min(56vw,220px)}
  .hero .kick{font-size:14px;margin-bottom:8px}
  .hero .lead,.hero .sub{margin-left:auto;margin-right:auto;font-size:19px}
  .hero .cta .btn.big{max-width:none}
  .hero .cta .btns{justify-content:center}
  .hero .fine{text-align:center}
}
.sec{padding:52px 0}
.sec.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2.head{font-size:clamp(38px,6.5vw,60px);font-weight:900;margin-bottom:8px}
.sec .sub{font-size:18px;color:var(--mute);margin:0 0 24px;max-width:36em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tile .big{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:.95;text-transform:uppercase;color:var(--lime);margin:0 0 8px}
.tile:nth-child(2) .big{color:var(--pink)}
.tile:nth-child(3) .big{color:#fff}
.tile p{margin:0;color:var(--mute)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}.tile .big{font-size:32px}}
.sam .grid{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center}
.sam img{width:100%;height:auto;border-radius:var(--r);border:2px solid var(--line)}
.sam h2{font-size:clamp(38px,6vw,56px);font-weight:900;margin-bottom:10px}
.sam h2 span{color:var(--lime)}
.sam p{color:#D3CFDC;margin:10px 0;max-width:36em}
.sam .cta{margin-top:22px}
.sam .cta .btn.big{max-width:440px}
.stars{color:var(--lime);letter-spacing:4px;font-size:20px}
@media(max-width:760px){.sam .grid{grid-template-columns:1fr}.sam img{max-width:300px;margin:0 auto;display:block}}
.cuts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
.cut{border-radius:var(--r);padding:20px;background:var(--panel2);border:2px solid var(--line)}
.cut.fire{border-color:rgba(230,69,140,.6)}
.cut h3{font-size:30px;font-weight:900;margin-bottom:6px}
.cut .feel{font-family:var(--cond);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--lime)}
.cut.fire .feel{color:var(--pink)}
.cut p{margin:8px 0 0;color:#D3CFDC}
@media(max-width:640px){.cuts{grid-template-columns:1fr}}
.how{list-style:none;padding:0;margin:0;counter-reset:s}
.how li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.how li:first-child{border-top:0}
.how li::before{counter-increment:s;content:counter(s);flex:0 0 34px;height:34px;border-radius:50%;background:var(--lime);color:#000;font-family:var(--display);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.how b{display:block;font-family:var(--cond);font-weight:800;font-size:21px;text-transform:uppercase;line-height:1.1;color:#fff}
.faq{max-width:760px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:10px}
.faq details summary{font-size:19px;text-transform:none;font-family:var(--body);font-weight:700;letter-spacing:0}
.faq details p{margin:10px 0 0;color:#D3CFDC}
.final{text-align:center;background:radial-gradient(70% 90% at 50% 100%,rgba(110,0,181,.55),transparent 75%),var(--bg);border-top:1px solid var(--line)}
.final h2{font-size:clamp(44px,8vw,72px);font-weight:900}
.final p{color:#D3CFDC;font-size:19px;margin:10px auto 22px;max-width:30em}
.final .btn.big{max-width:440px}
.final h2 + .btn{margin-top:22px}
.final .quietlink{display:block;margin-top:14px;color:#fff;font-weight:600}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(5,5,7,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.stickybar .btn.big{min-height:56px;font-size:21px;padding:12px 18px;box-shadow:none}
@media(min-width:861px){.stickybar{display:none!important}}
/* Where the sticky Book bar can show (phones), leave room under the footer so its last line (Admin) is never covered. */
@media(max-width:860px){body:has(.stickybar) .sfoot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}
.page h1{font-size:clamp(48px,9vw,88px);font-weight:900;line-height:.9}

/* ---------- Booking result and the locker's next-action card ---------- */
.result{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);font-size:19px;line-height:1.35}
.result b{color:var(--text)}
.card.next{padding:20px 18px;border-color:var(--line2)}
/* Ready, the first time they see it: a glint sweeps the card like light off a fresh edge, and sparks fall. */
.card.next{position:relative;overflow:hidden}
.card.next.celebrate{animation:readyglow 2.4s ease-out 1}
.card.next.celebrate::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 49%,rgba(184,255,0,.35) 52%,transparent 62%);transform:translateX(-120%);animation:sheen 1.2s .25s cubic-bezier(.3,.6,.2,1) 1 forwards}
.card.next.celebrate .nexttitle{animation:readytitle 1.2s .2s cubic-bezier(.2,.9,.3,1.3) 1 both}
@keyframes readyglow{0%{box-shadow:0 0 0 0 rgba(184,255,0,0)}25%{box-shadow:0 0 0 3px rgba(184,255,0,.85),0 0 44px rgba(184,255,0,.45)}100%{box-shadow:0 0 0 0 rgba(184,255,0,0)}}
@keyframes readytitle{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
.sparks{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;opacity:0;animation-name:spark;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:both}
@keyframes spark{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),340px) rotate(var(--r,180deg))}}
@media (prefers-reduced-motion:reduce){.card.next.celebrate,.card.next.celebrate::after,.card.next.celebrate .nexttitle{animation:none}.sparks{display:none}}
.nexttitle{font-size:clamp(34px,9vw,44px)!important;font-weight:900;margin:2px 0 12px!important;line-height:.95}
.card.next .big{font-size:19px;margin:0 0 8px}
.card.next .addr{margin:0 0 4px}
.card.next .notes{margin:0 0 8px;color:#D6D2DE}
.card.next .muted{margin:0 0 14px}
.card.next .btn.big{margin-top:6px}
.card.next .btns{margin-top:10px}
.pill.wait{background:transparent;color:var(--text);border:2px solid var(--pink);padding:2px 10px}
.track.quiet{margin:18px 0 8px}
.track.quiet li{font-size:12px;border-top-width:4px;padding-top:8px}
.quietcard{background:transparent;border-style:dashed}
.payline{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.payline b{font-family:var(--display);font-size:28px}
.saved{margin:4px 0 12px}

/* Welcome back (homepage, for a phone that already has a locker) */
.welcome{margin-top:14px;padding:14px 16px 6px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);text-align:left;max-width:440px}
.welcome .wb{font-family:var(--display);font-weight:900;font-size:28px;text-transform:uppercase;line-height:1;margin:0 0 8px}
.welcome .saved{margin:0 0 6px}
.welcome .btns{margin-top:4px;align-items:center}
/* Locker status card: the panda sits inside the one card, next to where things stand */
.nexthead{display:flex;gap:12px;align-items:center;margin:0 0 8px}
.nexthead .panda{width:48px;height:48px}
.nexthead .pill{margin:4px 0 0}
.card.next .plan{margin:0 0 12px}
.card.next .plan li span:last-child{color:#fff}
.card.next .relax{font-size:17px;font-weight:600;color:var(--text);margin:0 0 6px}
/* Getting back to your locker, on the confirmation page */
.keep ul{margin:0 0 12px;padding-left:20px}
.keep li{margin:4px 0}
/* Tour (/tour): calm, centered chapters. Each one is a label, a headline, one line, then phone screens
   (swipe on a phone, a row on a computer). The customer story ends at Book a sharpening; "How the shop runs" follows. */
.tsec{padding:56px 0 48px;text-align:center}
.tsec.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tsec .label{font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:0 0 8px}
.tsec h2{font-size:clamp(40px,9vw,64px);font-weight:900;margin:0 auto 12px;max-width:12em;text-wrap:balance}
.tsec .say{font-size:19px;color:#D6D2DE;margin:0 auto 28px;max-width:26em;text-wrap:balance}
.strip{list-style:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px max(16px,calc(50% - 120px)) 12px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:0 0 240px;width:240px;min-width:0;scroll-snap-align:center}
.strip figure{margin:0}
.strip .ph{border:2px solid var(--line2);border-radius:26px;background:#000;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.strip img{display:block;width:100%;max-width:100%;height:auto;border-radius:20px}
.strip figcaption{font-size:16px;font-weight:600;color:#fff;margin:14px auto 0;max-width:220px;line-height:1.3;text-wrap:balance}
.tsec .swipe{font-size:14px;color:var(--mute);margin:6px 0 0}
.tsec .tbtn{display:inline-flex;width:auto;max-width:440px;margin-top:26px}
.final h2 .lime{display:block;color:var(--lime)}
.curious{margin:36px auto 0;padding-top:26px;border-top:1px solid var(--line);max-width:440px}
.curious p{font-size:18px;color:#fff;font-weight:600;margin:0 0 12px}
.runs{background:radial-gradient(70% 30% at 50% 0%,rgba(110,0,181,.4),transparent 75%),var(--bg);border-top:1px solid var(--line)}
.reveal{padding:34px 0 10px;border-top:1px solid var(--line);margin-top:24px}
.reveal h3{font-size:clamp(30px,7vw,44px);font-weight:900;margin:0 auto 10px;max-width:12em;text-wrap:balance}
.reveal p{font-size:18px;color:#D6D2DE;margin:0 auto 24px;max-width:26em;text-wrap:balance}
.flowbox{margin:34px auto 0;padding:24px 18px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);max-width:640px}
.flow{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.flow li{font-family:var(--cond);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:#fff}
.flow li:last-child{border-color:var(--pink)}
.flowbox p{margin:0;color:#fff;font-weight:600;font-size:18px}
.tourpage .demo{font-size:14px;color:var(--mute);margin:18px 0 0}
.invite{text-align:center;padding:60px 0 56px;border-top:1px solid var(--line)}
.invite h2{font-size:clamp(30px,6vw,44px);font-weight:900;text-wrap:balance}
.invite h2 span{display:block;color:var(--pink);margin-top:4px}
.invite p{margin:16px 0 0;color:var(--mute);font-size:17px}
.invite a{color:#fff;font-weight:600}
.hero .fine a{color:#fff;font-weight:600}
@media (min-width:900px){
  .strip{overflow:visible;justify-content:center;flex-wrap:wrap;margin:0;padding:4px 0 0;gap:26px}
  .strip li{flex:0 0 228px;width:228px}
  .tsec .swipe{display:none}
}
/* Behind the counter: text beside its screens only when there's clearly room; the text never shrinks below 340px. */
@media (min-width:1100px){
  .reveal{display:flex;align-items:center;gap:56px;text-align:left;padding:40px 0 20px;max-width:1000px;margin-left:auto;margin-right:auto}
  .reveal .rtext{flex:1 1 340px;min-width:340px}
  .reveal .strip{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start}
  .reveal:nth-of-type(odd){flex-direction:row-reverse}
  .reveal h3,.reveal p{margin-left:0}
  .reveal figcaption{text-align:center}
}
/* Footer: a quiet way in to Sam's admin (Google sign-in, only his Gmail gets in) */
/* Drop-off: "I dropped off my skates" with a photo */
.card.next .dropbtn{margin-top:10px}
.dropthumb{display:block;width:120px;height:120px;object-fit:cover;border-radius:14px;border:2px solid var(--line2);margin:4px 0 12px}
.droppreview{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:14px;margin-top:12px;background:#000}
/* Locker: finish your skater profile, right under where things stand */
.card.todo{border-color:var(--pink)}
.card.todo h3{margin:0 0 6px}
.card.todo p{margin:0 0 4px}
/* Tour, version 3: the experience first, one journey in four moments, then behind the counter */
.tourpage .tbook{white-space:nowrap}
.thero{padding:28px 0 40px;background:radial-gradient(55% 70% at 80% 40%,rgba(110,0,181,.45),transparent 70%),var(--bg)}
.thero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.thero .tcopy{text-align:center}
.thero .tlogo{width:84px;height:auto;display:block;margin:0 auto 10px}
.thero .kick{font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 10px}
.thero h1{font-size:clamp(46px,10vw,88px);font-weight:900;line-height:.88;text-wrap:balance}
.thero h1 span{display:block;color:var(--lime)}
.thero .lead{font-size:19px;color:#DCD8E4;margin:16px auto 22px;max-width:28em;text-wrap:balance}
.thero .btn.big{max-width:440px}
.tart{position:relative;width:250px;margin:0 auto;padding-bottom:40px}
.tart .ph{border:2px solid var(--line2);border-radius:28px;background:#000;padding:6px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.tart .ph img{display:block;width:100%;height:auto;border-radius:21px}
.tart .tcard{position:absolute;left:-46px;bottom:0;width:210px;height:auto;border-radius:16px;transform:rotate(-6deg);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.tsec h2{font-size:clamp(36px,8vw,56px);font-weight:900;margin:0 auto 18px;text-wrap:balance}
.pick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 26px;max-width:640px}
.pickbtn{flex:1 1 220px;text-align:left;background:var(--panel2);color:#fff;border:2px solid var(--line2);border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit}
.pickbtn b{display:block;font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.pickbtn span{display:block;color:var(--mute);font-size:15px;margin-top:4px}
.pickbtn[aria-pressed="true"]{border-color:#fff;background:#fff;color:#000}
.pickbtn[aria-pressed="true"] span{color:#333}
.pickbtn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.moments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.moment{text-align:center;max-width:300px;margin:0 auto;width:100%}
.moment .label{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:0 0 6px}
.moment h3{font-size:30px;font-weight:900;margin:0 0 14px;text-wrap:balance}
.moment > .ph{width:240px;margin:0 auto;border:2px solid var(--line2);border-radius:26px;background:#000;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.moment > .ph img{display:block;width:100%;height:auto;border-radius:20px}
.moment > p{font-size:16px;color:#D6D2DE;margin:14px auto 8px;max-width:22em;text-wrap:balance}
.seemore{margin-top:4px}
.seemore summary{display:inline-block;cursor:pointer;font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-bottom:2px solid var(--line2);padding:2px 0;list-style:none}
.seemore summary::-webkit-details-marker{display:none}
.seemore[open] summary{border-color:var(--pink)}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.minis figure{margin:0}
.minis .ph{border:2px solid var(--line2);border-radius:16px;background:#000;padding:4px}
.minis img{display:block;width:100%;height:auto;border-radius:12px}
.minis figcaption{font-size:13px;color:var(--mute);margin-top:6px;line-height:1.25}
.demo{margin:34px auto 6px;padding:26px 0 6px;border-top:1px solid var(--line)}
.demo h3{font-size:clamp(28px,6vw,40px);font-weight:900;margin:0 auto 8px;text-wrap:balance}
.demogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:820px;margin:0 auto;text-align:left}
.dlabel{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.dcard{background:#F6F5F0;color:#111;border:2px solid #111;border-radius:14px;padding:14px 16px;font-family:var(--body)}
.dcard b{font-size:19px}
.dmuted{color:#555;font-size:15px;margin-top:6px}
.dbtn{margin-top:12px;font-family:var(--display);font-weight:900;font-size:18px;text-transform:uppercase;background:var(--lime);color:#000;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
.dbtn:focus-visible{outline:3px solid #000;outline-offset:2px}
.dtext{margin-top:10px;font-size:14px;color:#333;background:#fff;border:1px dashed #999;border-radius:8px;padding:8px 10px}
.demolocker .card.next{margin:0}
.tourpage .demo-note{font-size:14px;color:var(--mute);margin:18px 0 0}
@media (min-width:900px){
  .thero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .thero .tcopy{text-align:left}
  .thero .tlogo{margin:0 0 12px}
  .thero .lead{margin-left:0}
  .tart{width:280px}
  .tart .tcard{width:240px;left:-90px}
  .demogrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
@media (min-width:1000px){
  .moments{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;align-items:start}
  .moment > .ph{width:100%;max-width:230px}
  .moment h3{font-size:26px}
}
@media (max-width:440px){ .tourpage .bar .brand small{display:none} .tourpage .tbook{font-size:14px;padding:8px 12px} }

/* Add to Home Screen card in the locker */
.hscard{border-color:rgba(184,255,0,.35);background:linear-gradient(160deg,#1B1130 0%,var(--panel) 60%)}
.hshead{display:flex;gap:16px;align-items:center}
.hsapp{flex:0 0 auto;width:76px;text-align:center}
.hsapp img{width:66px;height:66px;border-radius:15px;display:block;margin:0 auto;box-shadow:0 8px 20px rgba(0,0,0,.55)}
.hsapp span{display:block;margin-top:5px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.hscard h3{font-size:26px;margin:2px 0 6px}
.hscard #hsinstall{width:100%;margin-top:4px}
.hsq{font-weight:700;font-size:19px;color:#fff;margin:16px 0 8px}
.hsoss{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.hsos{font:700 18px var(--body);padding:12px 10px;border-radius:14px;border:2px solid var(--line2);background:transparent;color:#fff;cursor:pointer}
.hsos.on{background:#fff;color:#000;border-color:#fff}
.hsbody .hssteps{margin-top:4px}
.hssteps{list-style:none;margin:16px 0 6px;padding:0;display:grid;gap:12px;counter-reset:hs}
.hssteps li{display:flex;gap:12px;align-items:flex-start;counter-increment:hs}
.hssteps li::before{content:counter(hs);flex:0 0 28px;height:28px;border-radius:50%;background:var(--lime);color:#000;font:800 16px/28px var(--cond);text-align:center}
.hssteps b{display:flex;align-items:center;gap:8px;font-size:17px;line-height:28px}
.hssteps small{display:block;color:var(--mute);font-size:14px;line-height:1.35}
.hsico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#2A2732;color:#4DA3FF}
.hsbtns{display:flex;align-items:center;gap:16px;margin-top:14px}
.hsbtns .linkbtn{background:none;border:0;color:var(--mute);font:600 15px var(--body);text-decoration:underline;cursor:pointer;padding:0}
.hsnudge{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(160deg,#1B1130 0%,var(--panel2) 70%);border:1px solid rgba(184,255,0,.35);border-radius:16px;padding:14px;margin:12px 0 4px}
.hsnudge b{display:block;font-size:17px;color:#fff}
.hsnudge .hstext{display:block;color:var(--mute);font-size:15px;margin:2px 0 10px}
.hsnudge .btn{white-space:nowrap}

/* Rewards: the punch card on the member card and in the locker, friend invites, savings lines */
.mcard .punchrow{display:flex;gap:6px;margin-top:10px}
.mcard .punchrow span{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#000}
.mcard .punchrow span.on{background:var(--lime);border-color:var(--lime)}
.mcard .punchrow span.star{border-color:var(--pink);color:var(--pink)}
.mcard .punchrow span.star.on{background:var(--pink);color:#fff}
.rewards{background:radial-gradient(120% 140% at 100% 0%,#2A0150 0%,var(--panel) 60%);border-color:rgba(230,69,140,.4)}
.rewards h3{font-size:26px;margin:4px 0 12px}
.stamps{display:flex;gap:10px;margin:4px 0 10px;flex-wrap:wrap}
.perkline{margin:10px 0 0;color:var(--pink);font-weight:700}
.stamp{width:52px;height:52px;border-radius:50%;border:2px dashed var(--line2);display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03)}
.stamp b{font:800 16px var(--cond);color:var(--mute)}
.stamp.on{border:2px solid var(--lime);background:#0E0C12;box-shadow:0 0 14px rgba(184,255,0,.35)}
.stamp.on img{width:40px;height:40px;transform:rotate(-12deg)}
.stamp.free{border:2px solid var(--pink)}
.stamp.free b{color:var(--pink);font-size:15px;letter-spacing:.06em}
.stamp.free.on{background:var(--pink);box-shadow:0 0 18px rgba(230,69,140,.6)}
.stamp.free.on b{color:#fff}
.stamps.small .stamp{width:40px;height:40px}
.stamps.small .stamp.on img{width:30px;height:30px}
.rewardsplit{height:1px;background:var(--line);margin:18px 0 14px}
.refcode{display:inline-flex;align-items:baseline;gap:10px;background:#0E0C12;border:1px solid var(--line2);border-radius:12px;padding:8px 14px;margin:4px 0 10px}
.refcode span{font:800 13px var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.refcode b{font:900 30px var(--display);letter-spacing:.08em;color:var(--lime)}
.saving{color:var(--lime);font-weight:600;font-size:15px;margin:8px 0 0}
.saving.big{font-size:17px;text-align:center;margin:4px 0 10px}
.totalbar .saving{display:block;font-size:13px;margin:0}
.refbanner{display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap;background:rgba(184,255,0,.1);border:1px solid rgba(184,255,0,.45);color:#fff;border-radius:16px;padding:8px 16px;margin:0 0 14px;font-size:16px}
.refbanner span{color:var(--lime)}
.refbanner b{color:var(--lime)}
.afterlove{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--mute);line-height:1.4}
.consent input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--lime)}
.consent b{color:#fff}
.consent a{color:var(--mute)}
.prefs{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.prefs h3{font-size:20px;margin-bottom:6px}
.prefrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.prefrow b{min-width:110px}
/* Pay by card or Apple Pay: white, so lime stays the one main button on the screen */
.btn.paycard{background:#fff;color:#000;box-shadow:0 8px 24px rgba(255,255,255,.12)}
.btn.paycard:hover{background:#F0EEF4}

/* <picture> wrappers (WebP with a PNG fallback) stay out of the layout. */
picture{display:contents}picture source{display:none}

/* Homepage: how it works, join the club, questions */
.how3{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.how3 li{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.how3 .n{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--lime);color:#000;font:900 26px/44px var(--display);text-align:center}
.how3 li:nth-child(2) .n{background:var(--pink);color:#fff}
.how3 li:nth-child(3) .n{background:#fff}
.how3 b{display:block;font-family:var(--display);font-weight:900;font-size:28px;line-height:.95;text-transform:uppercase;color:#fff;margin:2px 0 8px}
.how3 p{margin:0;color:var(--mute)}
@media(max-width:860px){.how3{grid-template-columns:1fr}}
.joinsec .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.joinsec .kick{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 10px}
.joinsec h2{font-size:clamp(40px,6.5vw,60px);font-weight:900;line-height:.92}
.joinsec h2 span{display:block;color:var(--lime)}
.joinsec .mcard.sample{transform:rotate(-2deg);margin:0 auto}
.joinsec .mcard.sample .who{color:#fff}
.perks3{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.perks3 li{color:#D3CFDC;padding-left:26px;position:relative}
.perks3 li::before{content:"★";position:absolute;left:0;top:0;color:var(--lime)}
.perks3 b{color:#fff}
.joinsec .cta{margin-top:20px}
.joinsec .cta .btn.big{max-width:440px}
.joinsec .fine{text-align:left}
.joinsec .cardside{display:flex;flex-direction:column;align-items:center;gap:14px}
/* The club photo (Sam and a friend with the club tee), with the sample card tucked over its lower edge. */
.joinsec .clubshot img{display:block;width:min(340px,72vw);height:auto;border-radius:22px;border:2px solid var(--line);transform:rotate(2.5deg);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.joinsec .clubshot + .mcard.sample{position:relative;z-index:2;margin-top:-96px;width:min(440px,100%)}
.clubpulse{margin:0;font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#D3CFDC;text-align:center}
.clubpulse::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);margin-right:8px;vertical-align:2px;box-shadow:0 0 0 4px rgba(230,69,140,.22)}
.clublede{margin:12px 0 0;color:#D3CFDC;font-size:18px;max-width:52ch}
.ways3{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ways3 li{display:flex;gap:12px;align-items:flex-start;background:rgba(18,17,23,.72);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ways3 .wi{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fff;color:#000;font:900 18px/30px var(--display);text-align:center}
.ways3 li:nth-child(2) .wi{background:var(--pink);color:#fff}
.ways3 li:nth-child(3) .wi{background:var(--purple);color:#fff}
.ways3 b{display:block;color:#fff;font-size:17px}
.ways3 span{color:#C9C4D4}
.ways3 .wlink{display:inline-block;margin-top:4px;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.joinsec .grid{grid-template-columns:minmax(0,1fr);gap:24px}.joinsec .fine{text-align:center}}
.faq{display:grid;gap:8px;max-width:780px;margin-top:16px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:700;font-size:18px;color:#fff;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font:900 26px var(--display);color:var(--lime)}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 16px;color:#D3CFDC}
.faq a{color:#fff;font-weight:600}
.joinsec{background:radial-gradient(60% 80% at 20% 40%,rgba(110,0,181,.38),transparent 70%),var(--bg);border-bottom:1px solid var(--line)}

/* Homepage: why sharp matters (the confidence story) */
#how h2.head span{display:block;color:var(--lime)}
/* Join free and Request a mobile visit are white outlines (Book a sharpening is the one lime button); full width on phones. */
.joinsec .cta .btn.ghost,.sam .cta .btn.ghost{min-width:240px}
@media(max-width:760px){.joinsec .cta .btn.ghost,.sam .cta .btn.ghost{width:100%}}

.mcard .cardhol{display:inline-block;margin-top:10px;background:var(--lime);color:#000;font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:3px 10px}

/* Find your hollow (hollowfinder.js), on /join and /hollow */
.hfind{margin:22px -4px 6px;padding:18px 16px;border:1px solid rgba(184,255,0,.35);border-radius:18px;background:linear-gradient(160deg,#1B1130 0%,var(--panel) 65%)}
.hfind .hkick{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 6px}
.hfind h2{font-size:30px}
.hfind .chips{display:flex;flex-wrap:wrap;gap:8px}
.hresult{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.hresult .wait{color:var(--mute);font-size:15px;margin:0}
.hresult .lbl{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.hresult .big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 6px}
.hresult .big b{font-family:var(--display);font-weight:900;font-size:64px;line-height:.9;color:var(--lime)}
.hresult .big span{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;color:#fff}
.hresult p{margin:6px 0 0;color:#D3CFDC;font-size:15px}
.hpick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.hpick button{background:#16121C;border:2px solid var(--line2);border-radius:16px;color:#fff;padding:12px;text-align:left;cursor:pointer;font:inherit}
.hpick button b{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:.9;color:var(--lime);margin-top:4px}
.hpick button span{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#C9C2D6}
.hpick button.on{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime) inset}
.hfind .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Locker: My skate sharpening, the hockey passport (one block per pair; Show is full screen). */
.passes{display:grid;gap:12px;margin:12px 0 4px}
.pass{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:14px}
.passwho{font-family:var(--display);font-weight:900;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:6px;overflow-wrap:anywhere}
.pass .hline>span:last-child{color:#fff;font-weight:700;overflow-wrap:anywhere}
.pass .hline.unset>span:last-child,.passshow .psline.unset b{color:var(--mute);font-weight:600}
.pass .btns{margin-top:12px;gap:8px;flex-wrap:wrap}
.pass .btns .btn.small{width:auto}
.pass [role=status]:empty{display:none}
.passshow{position:fixed;inset:0;z-index:90;background:#fff;color:#000;overflow:auto;padding:28px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.passshow .pskick{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.passshow .pswho{font-family:var(--display);font-weight:900;font-size:clamp(32px,9vw,52px);line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.passshow .psline{border-top:2px solid #E4E1EA;padding-top:10px}
.passshow .psline span{display:block;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#5A5566}
.passshow .psline b{display:block;font-size:clamp(26px,7.5vw,40px);line-height:1.15;overflow-wrap:anywhere}
.passshow .btn{margin-top:auto;align-self:stretch;max-width:520px}
.mcard .cardteams{margin-top:8px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}

/* Locker: Your hollow (each skater's hollow and the shop's recommendation) */
.hrows{margin:12px 0 4px;display:grid;gap:12px}
.hrow{border-top:1px solid var(--line);padding-top:12px}
.hrow:first-child{border-top:0;padding-top:0}
.hrow>b{display:block;font-size:17px;color:#fff;margin-bottom:4px}
.hline{display:flex;justify-content:space-between;gap:12px;font-size:15px;margin-top:4px}
.hline .k{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex:0 0 auto;padding-top:2px}
.hline>span:last-child{text-align:right;color:#E4E1EA}
.hline.rec>span:last-child{color:var(--lime);font-weight:700}
.hline .recmiss{color:#F2B8CF!important;font-weight:600!important}

.suggest .tiplbl{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}

/* A short note at the bottom of the screen (reminders on or off). */
.stoast{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;max-width:520px;margin:0 auto;background:#141218;color:#fff;border-radius:14px;padding:12px 14px;font-weight:600;box-shadow:0 0 0 2px var(--lime),0 10px 30px rgba(0,0,0,.45)}
.remindacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 2px}
.remindacts .btn.small{width:auto}

/* Footer (homepage, tour, FIRE, team, privacy): the brand on the left, links in three short labeled columns, a thin bottom line. */
/* One short footer on every public page (simplify plan, phase 1, 2026-11-04): the menu again, privacy, a way to text,
   one quiet line. Sam's Admin button stays at the end of that line. */
.sfoot{border-top:1px solid var(--line);color:var(--mute);padding:26px 0 22px;font-size:14px;text-align:left;margin-top:8px}
.sfoot .sflinks{display:flex;flex-wrap:wrap;gap:6px 20px}
.sfoot .sflinks a{color:#D3CFDC;text-decoration:none;font-weight:600;font-size:15px;padding:6px 0}
.sfoot .sflinks a:hover{color:#fff;text-decoration:underline}
.sfoot .sfmeta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.sfoot a.staff{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;color:#D3CFDC;font-size:14px;font-weight:600;text-decoration:none}
.sfoot a.staff:hover{color:#fff;border-color:#fff}
@media(max-width:560px){.sfoot .sflinks{gap:2px 18px}}

/* Homepage: BFHC Hockey, Sam's free game (site/hockey/). A quiet band above the footer: a real screenshot that opens the game, and a ghost button, so lime stays on Book a sharpening. */
/* The Skate Locker's More fold (simplify plan, phase 1): the member card, rewards, Home Screen, history and My info. */
details.more{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
details.more>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;flex-direction:column;gap:3px;min-height:48px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary b{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;line-height:1;color:#fff}
details.more>summary b::after{content:" +";color:var(--pink)}
details.more[open]>summary b::after{content:" \2212"}
details.more>summary span{color:var(--mute);font-size:14px}
details.more>summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:var(--r)}
details.more[open]{padding-bottom:4px}
details.more>:not(summary){margin-left:12px;margin-right:12px}
details.more>.card{background:rgba(255,255,255,.02)}
details.more>.mcard{margin-left:auto;margin-right:auto;width:calc(100% - 24px)}
/* The homepage's two doors below the questions (simplify plan, phase 1): Hockey and the Arcade. The whole card is the link. */
.doors{background:var(--panel);border-top:1px solid var(--line)}
.doors .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.door{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:rgba(18,17,23,.72);color:#fff;text-decoration:none;transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--text);transform:translateY(-2px)}
.door:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.door img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 30%}
.door .dtxt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.door .kick{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0}
.door h2{font-size:clamp(30px,4vw,40px);font-weight:900;line-height:.95;margin:0}
.door h2 span{color:var(--lime)}
.door p{margin:0;color:#C9C4D4}
.door .btn{margin-top:auto;align-self:flex-start;width:auto;min-width:200px}
@media(max-width:760px){.doors .wrap{grid-template-columns:minmax(0,1fr);gap:16px}.door .btn{align-self:stretch}}
.playsec{background:var(--panel);border-top:1px solid var(--line)}
.playsec .wrap{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:22px 36px;align-items:center}
.playsec .playshot{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.45);transition:border-color .15s,transform .15s}
.playsec .playshot:hover{border-color:var(--text);transform:translateY(-2px)}
.playsec .playshot img{display:block;width:100%;height:auto}
.playsec .kick{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 8px}
.playsec h2{font-size:clamp(30px,4.6vw,44px);font-weight:900}
.playsec h2 span{display:block;color:var(--pink)}
.playsec .ptxt{color:var(--mute);margin:10px 0 18px;max-width:36em}
.playsec .btn{white-space:nowrap}
@media(max-width:760px){.playsec .wrap{grid-template-columns:minmax(0,1fr)}.playsec .btn{width:100%}}

/* Team websites (homepage): the two club teams' logos and a quiet invitation to ask Sam for one. */
/* The club's teams as round badges (teamstrip.js fills them in from the league list): the homepage's 3 on 3 section and /3v3/ */
.tstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px 10px;align-items:start}
.tbadge{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;color:var(--mute);text-decoration:none;text-align:center;font-family:var(--cond);font-weight:800;font-size:14px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;transition:color .15s,transform .15s}
.tbadge:hover,.tbadge:focus-visible{color:var(--text);transform:translateY(-2px)}
.tbadge .tb-ring{width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:#0B0B10;box-shadow:0 0 0 3px #000,0 0 0 5px var(--tc,var(--line2));font:900 26px/1 var(--display);letter-spacing:.02em}
.tbadge .tb-ring img{width:80%;height:80%;object-fit:contain;display:block}
.tbadge .tb-nm{overflow-wrap:anywhere}
.tbadge.you .tb-ring{background:transparent;box-shadow:none;border:2px dashed var(--line2);color:var(--text);font:400 34px/1 var(--body)}
.tbadge.you:hover .tb-ring{border-color:var(--text)}

/* The member card, one tap from the top of the homepage (under Book a sharpening). */
.hero .cardbtn,.shopsec .cardbtn{display:block;width:100%;max-width:440px;margin-top:10px;text-align:center}
.bar a.toplink.hq{margin-right:8px;border-color:rgba(184,255,0,.55)}
@media(max-width:420px){.bar a.toplink{padding-left:12px;padding-right:12px}.bar a.toplink.hq{margin-right:6px}.bar a.toplink.hq .long{display:none}}

/* The homepage is the Skate Shop first (Sam, 2026-10-29: "make it clearer that we are sharpening first, and resource
   for an idea for how to improve the 3v3 experience 2nd"): Book a sharpening leads the hero, and 3 on 3 is one
   section near the end (#threes): three paths, one tap each, beside every club team's badge. */
.v3sec{border-top:1px solid var(--line)}
.v3sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 40px;align-items:center}
.v3sec .kick{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 8px}
.v3sec h2{font-size:clamp(34px,5vw,52px);font-weight:900;line-height:.95}
.v3sec h2 span{display:block;color:#B794FF}
.v3sec .ptxt{color:var(--mute);margin:10px 0 18px;max-width:36em}
.v3sec .tstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
.paths{display:grid;gap:10px;margin-top:6px;max-width:520px}
.path{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line2);border-radius:16px;background:rgba(18,17,23,.78);color:#fff;text-decoration:none;text-align:left;transition:border-color .15s,transform .15s}
.path:hover,.path:focus-visible{border-color:#fff;transform:translateY(-1px)}
.path .pi{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:#1C1A24}
.path .pt{flex:1;min-width:0}
.path b{display:block;font-family:var(--display);font-weight:900;font-size:24px;line-height:1;text-transform:uppercase}
.path small{display:block;color:#C9C4D4;font-size:15px;margin-top:3px}
.path::after{content:"\203A";font-size:28px;line-height:1;color:var(--mute)}
.path:nth-child(1) .pi{background:rgba(230,69,140,.22)}
.path:nth-child(2) .pi{background:rgba(110,0,181,.38)}
.path:nth-child(3) .pi{background:rgba(255,255,255,.12)}
.shopsec .kick{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 10px}
.shopsec h2.head span{display:block;color:var(--lime)}
.shopsec .sub{color:#D3CFDC;margin-bottom:20px}
.shopsec .cta .btn.big{max-width:440px}
.shopsec .fine{text-align:left;margin-top:12px}
.shopsec .how3{margin-top:26px}
#shop,#how,#join,#mobile,#faq,#threes{scroll-margin-top:84px}
#home .hero h1{font-size:clamp(56px,6.2vw,82px);line-height:.9}
@media(max-width:760px){
  #home .hero h1{font-size:clamp(46px,12.5vw,58px)}
  #home .hero .art img{width:min(36vw,140px)}
  #home .hero .sub{font-size:17px;margin:12px auto 16px}
  .v3sec .wrap{grid-template-columns:minmax(0,1fr)}
  .path{padding:10px 12px;gap:12px}
  .path b{font-size:21px}
  .path small{font-size:14px}
  .shopsec{text-align:center}
  .shopsec .sub{margin-left:auto;margin-right:auto}
  .shopsec .cta .btn.big,.shopsec .cardbtn{max-width:none}
  .shopsec .fine{text-align:center}
  .shopsec .how3{text-align:left}
  .shopsec .welcome{margin-left:auto;margin-right:auto}
}

/* My teams in the Skate Locker's club card (one identity across teams): each team in its color, the spot, two links. */
.myteams{display:grid;gap:8px;margin:4px 0 12px}
.myteams .k{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.mtrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--tc,var(--purple));border-radius:12px;background:rgba(255,255,255,.03)}
.mtrow .mtn b{display:block;font-family:var(--display);font-weight:900;font-size:22px;line-height:1;text-transform:uppercase}
.mtrow .mtn small{display:block;color:var(--mute);margin-top:3px}
.mtrow .btns{margin:0}

/* Who we are, right under the sharpening hero (Sam, 2026-10-29: the three statements "explain our purpose, our
   culture, and our work"): the three lines, one sentence, and the way to What we're building. */
.whysec{border-top:1px solid var(--line);background:radial-gradient(60% 90% at 100% 0%,rgba(230,69,140,.10),transparent 60%)}
.whysec .kick{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:0 0 12px}
.whysec .three{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.whysec .three li{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.6vw,46px);line-height:.95;color:#fff}
.whysec .three li:nth-child(2){color:var(--pink)}
.whysec .three li:nth-child(3){color:#B794FF}
.whysec .whyline{color:#D3CFDC;font-size:18px;max-width:40em;margin:0 0 18px}
#why{scroll-margin-top:84px}
@media(max-width:760px){.whysec{text-align:center}.whysec .whyline{margin-left:auto;margin-right:auto}.whysec .btn{width:100%}}

/* The passport grouped by skater: household, then each skater, then their pairs (2026-10-30). */
.skaterhead{margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line2)}
.passes>.skaterhead:first-child{margin-top:4px;padding-top:0;border-top:0}
.skaterhead h4{margin:0 0 2px;font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skaterhead .youtag{font-family:var(--cond);font-size:12px;letter-spacing:.12em;border:1px solid var(--line2);border-radius:999px;padding:2px 8px;color:#C9C2D6}
.skaterhead .hline.rec{margin-top:6px}
.passes .addpair{justify-self:start;margin:2px 0 6px}

/* Main navigation (Sam, 2026-10-30: Teams in the main navigation; the Skate Shop and Teams as separate places). */
.bar .topnav{display:flex;gap:2px;margin-right:8px}
.bar .topnav a{font-family:var(--cond);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--text);padding:6px 10px;border-radius:999px;white-space:nowrap}
.bar .topnav a:hover{background:rgba(255,255,255,.08)}
.bar .topnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--pink);border-radius:999px 999px 6px 6px}
@media(max-width:420px){.bar .brand small{display:none}.bar .topnav{margin-right:4px}.bar .topnav a{padding:6px 7px;font-size:15px}
  .bar:has(.hq:not([hidden])) .brand div{display:none}}
@media(max-width:350px){.bar .brand div{display:none}}

/* Log In, or My BFHC (account.js). Join Free left the header in the simplify plan's phase 1 (booking or joining from the
   homepage makes a member). Log In is a plain link, My BFHC a pill. */
.acct{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.acct a{font-family:var(--cond);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--text);white-space:nowrap;border-radius:999px;line-height:1.2}
.acct a.acct-in{padding:8px 10px}
.acct a.acct-in:hover{background:rgba(255,255,255,.08)}
.acct a.acct-me{border:2px solid var(--line2);padding:6px 14px}
.acct a.acct-me:hover{border-color:var(--text)}
.acct a.acct-me{border-color:rgba(255,255,255,.55)}
.acct a:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media(max-width:420px){
  .acct{gap:2px}
  .acct a{font-size:15px}
  .acct a.acct-in{padding:8px 7px}
  .acct a.acct-me{padding:6px 10px}
  /* A phone: the panda alone takes you home, and the header tightens so the menu and Log In (or My BFHC) fit. */
  .bar:has(.acct:not([hidden])) .brand div{display:none}
  .bar:has(.acct:not([hidden])) .wrap{gap:6px}
  .bar:has(.acct:not([hidden])) .topnav{margin-right:0}
  .bar:has(.acct:not([hidden])) .topnav a{padding:6px 5px}
  .acct a.acct-in{padding:8px 5px}
}
@media(max-width:374px){
  .bar:has(.acct:not([hidden])) .topnav a,.acct a{font-size:14px;letter-spacing:.02em}
  .bar:has(.acct:not([hidden])) img{width:36px;height:36px}
}