/* FUNNEL, ONE LOOK (2026-09-28). join, setup and welcome all load this file so they cannot drift from each
   other or from the index. Tokens and type match index.html exactly: Inter heavy headings, ONE gold
   (--gold-grad for gold words and the primary pill, --gold for hairlines and marks), pill buttons, the
   locker room photograph. If the index's look changes, change it here too. */
html,body{overflow-x:clip}
:root{
  --ink:#0B0C0E;--surface:#141719;--surface-2:#191D20;
  --paper:#F4F1EA;--mute:#B7BCC4;--dim:#8A9099;--hair:rgba(244,241,234,.12);--bad:#E5484D;
  --gold:#CBA25A;
  --gold-grad:linear-gradient(92deg,#E7C386 0%,#CBA25A 55%,#A87E3D 100%);
  --fb:'Inter',system-ui,sans-serif;--fd:'Sora',system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--ink);color:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* the photograph, dimmed hard so it is atmosphere behind a form, not a picture competing with it */
.fx-bg{position:fixed;inset:0;z-index:0;background:url('hero-sport-locker.jpg') 38% 30%/cover no-repeat;opacity:.55}
.fx-scrim{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,12,14,.86) 0%,rgba(11,12,14,.74) 30%,rgba(11,12,14,.95) 62%,#0B0C0E 100%)}

.fx{position:relative;z-index:1;min-height:100svh;max-width:480px;margin:0 auto;padding:calc(var(--safe-t) + 14px) 22px calc(24px + var(--safe-b));display:flex;flex-direction:column}
.fx-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.fx-brand{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.fx-brand img{height:40px;width:auto}
.fx-toplink{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;font-size:14px;color:var(--mute)}
.fx-toplink:hover{color:#fff}
.fx-back{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:-10px;background:none;border:0;color:var(--mute);cursor:pointer}
.fx-back svg{width:22px;height:22px}
.fx-back[hidden]{display:none}
.fx-main{flex:1;display:flex;flex-direction:column;padding-top:clamp(28px,9vh,90px)}

/* type */
.eyebrow{font-weight:500;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:#9CA1A9;margin-bottom:14px}
.h1{font-weight:800;font-size:clamp(38px,11vw,56px);line-height:1;letter-spacing:-.04em;color:#fff}
.h2{font-weight:800;font-size:clamp(28px,8vw,38px);line-height:1.04;letter-spacing:-.035em;color:#fff}
.h3{font-weight:700;font-size:18px;letter-spacing:-.01em;color:#fff}
/* gold words: the gradient clipped to the glyphs. -webkit-text-fill-color must pair with background-clip or
   iOS renders the word invisible; the padding pair gives an italic's last stroke room inside the clip. */
.g{font-style:italic;padding-right:.08em;margin-right:-.08em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gt{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:16.5px;color:#C9CCD2;line-height:1.55;margin-top:14px;max-width:40ch}
.lab{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:22px 0 9px}
.lab small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
.fine{font-size:13px;color:var(--dim);line-height:1.5;margin-top:14px}
/* the app's price screen: Restore purchases, Terms, Privacy on one centred line, each a 44pt target */
#payAppLinks.paylinks{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;line-height:1}
#payAppLinks.paylinks[hidden]{display:none}
/* ID-scoped (2026-09-30): the later ".fine a" rule (inline-block, margin -14px) outranked a class rule and lifted Terms and
   Privacy 14px above Restore purchases on the phone. Every item is the same 44pt flex box, so they share one line. */
#payAppLinks > button,#payAppLinks > a,#payAppLinks > span{-webkit-appearance:none;appearance:none;margin:0;padding:0;display:inline-flex;align-items:center;
  min-height:44px;background:none;border:0;font:inherit;line-height:1;letter-spacing:inherit;color:var(--mute,#B7BCC4);cursor:pointer;text-decoration:none;white-space:nowrap}
.fine b{color:var(--mute);font-weight:600}
/* inline links in fine print (Terms, Privacy): a 44pt tap target without moving the line, padding out and margin back */
.fine a{display:inline-block;padding:14px 4px;margin:-14px -4px}

/* buttons: pills, same as the index */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--gold-grad);color:#16130B;font-weight:600;font-size:17px;cursor:pointer;box-shadow:0 16px 34px -14px rgba(0,0,0,.7);transition:transform .15s,opacity .15s}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn .arw{font-size:19px;line-height:1}
.btn2{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 24px;border:1.5px solid rgba(244,241,234,.24);border-radius:999px;background:none;color:var(--paper);font-weight:600;font-size:16px;cursor:pointer}
.btn2:hover{border-color:var(--gold)}
.linkbtn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:6px;background:none;border:0;color:var(--mute);font-weight:600;font-size:15px;cursor:pointer}
.linkbtn:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* fields */
.fields{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.fld,.sel-f{width:100%;min-height:54px;background:rgba(20,23,25,.92);border:1px solid var(--hair);border-radius:14px;color:var(--paper);font-family:var(--fb);font-size:16px;padding:0 16px;outline:none;-webkit-appearance:none;appearance:none}
.fld::placeholder{color:#6F757E}
.fld:focus,.sel-f:focus{border-color:rgba(203,162,90,.6)}
.fld.bad,.sel-f.bad{border-color:rgba(229,72,77,.7)}
textarea.fld{min-height:96px;padding:14px 16px;line-height:1.5;resize:none}
.hint{font-size:13px;color:var(--dim);margin-top:-2px;padding-left:4px}
.err{color:#FF8A8D;font-size:14px;line-height:1.45;margin-top:12px}
.err:empty{display:none}
.err.calm{color:var(--mute)}
/* the age confirmation on setup's pay step (16+, parent or guardian under 18) */
.agechk{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:rgba(20,23,25,.92);font-size:14px;line-height:1.45;color:var(--mute);cursor:pointer}
.agechk[hidden]{display:none}
.agechk input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--gold)}
.agechk a{color:var(--paper);text-decoration:underline}   /* a redirect, not a failure (setup's already-a-member / timed-out / deleting lines) */
.sel-wrap{position:relative}
.sel-wrap::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pair{display:flex;gap:10px}
.pair>*{flex:1;min-width:0}
.unitf{position:relative}
.unitf .fld{padding-right:46px}
.unitf span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px;pointer-events:none}

/* choices */
.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;align-items:center;gap:12px;min-height:54px;width:100%;text-align:left;background:rgba(20,23,25,.92);border:1px solid var(--hair);border-radius:14px;padding:12px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.choice.sel{border-color:var(--gold);background:rgba(203,162,90,.09)}
.choice__t{font-weight:600;font-size:15.5px}
.choice__s{font-size:13px;color:var(--dim);margin-top:1px}
.choice__ck{margin-left:auto;flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:#16130B}
.choice.sel .choice__ck{background:var(--gold-grad);border-color:transparent}
.choice.sel .choice__ck::after{content:"\2713";font-size:12px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;border:1px solid var(--hair);background:rgba(20,23,25,.92);border-radius:999px;padding:0 16px;font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.chip.sel{border-color:transparent;background:var(--gold-grad);color:#16130B}
.seg{display:flex;gap:8px}
.seg button{flex:1;min-height:50px;border:1px solid var(--hair);background:rgba(20,23,25,.92);color:var(--mute);border-radius:999px;font-weight:600;font-size:15px;cursor:pointer}
.seg button.sel{border-color:var(--gold);color:#fff;background:rgba(203,162,90,.09)}

/* the card: price, code, download */
.card{margin-top:22px;padding:18px;border:1px solid var(--hair);border-radius:18px;background:rgba(20,23,25,.92)}
.card+.card{margin-top:12px}
.card__k{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.card__v{margin-top:6px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff}
.card__s{margin-top:6px;font-size:14px;color:var(--mute);line-height:1.5}
.bigcode{margin-top:8px;font-weight:800;font-size:54px;letter-spacing:.28em;line-height:1;padding-left:.1em}

.progress{display:flex;gap:6px;margin-left:auto}
.progress i{width:26px;height:4px;border-radius:2px;background:rgba(244,241,234,.14)}
.progress i.on{background:var(--gold-grad)}

.ctrl{position:sticky;bottom:0;z-index:5;margin:22px -22px 0;padding:14px 22px calc(8px + var(--safe-b));background:linear-gradient(0deg,#0B0C0E 72%,rgba(11,12,14,0))}

.fx-screen{display:none}
.fx-screen.on{display:block;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* MORE BELOW: the same bobbing gold chevron as the index, floating just above the sticky button bar while part of
   the screen is still underneath it. A real button (44pt), so tapping it scrolls. */
.more-cue{position:absolute;left:50%;top:-40px;margin-left:-22px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--gold);cursor:pointer;animation:bob 2.2s ease-in-out infinite}
.more-cue svg{width:26px;height:26px}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}

/* the price on join, pinned with the Continue button: a label and a big number, no card */
.price{text-align:center;margin-bottom:16px}
.price__k{font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.price__v{margin-top:4px;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;color:#fff}
.price__v span{font-size:20px;font-weight:600;letter-spacing:0;color:var(--mute)}

/* fields with a leading icon (join): the icon sits inside the field's left padding */
.ifld{position:relative;display:block}
.ifld svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--dim);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ifld .fld{padding-left:48px}
.ifld:focus-within svg{stroke:var(--gold)}

/* the 4-digit code: four boxes over one transparent input */
.code{position:relative;margin-top:6px;width:max-content}
.code__boxes{display:flex;gap:12px}
.code__boxes span{display:grid;place-items:center;width:68px;height:64px;border:1px solid var(--hair);border-radius:14px;background:rgba(20,23,25,.92);font-weight:700;font-size:24px;color:#4E545C;transition:border-color .15s}
.code__boxes span.has{color:#fff}
.code__boxes span.at{border-color:var(--gold)}
.code.bad .code__boxes span{border-color:rgba(229,72,77,.7)}
.code__in{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:.01;font-size:16px;border:0;background:none;color:transparent;caret-color:transparent}
@media(max-width:340px){.code__boxes{gap:8px}.code__boxes span{width:60px;height:58px}}

/* join: the one-line way back for a signup already in progress */
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-height:44px;margin-top:6px;font-size:14px;color:var(--mute)}
.resume b{font-weight:600;color:var(--gold)}
.resume[hidden]{display:none}