/* ============================================================
   Onboarding + cold /access — v1.1 Deep Night / Bodoni.
   Isolated: this page loads tokens.css + this file only (NOT sound.css),
   so none of sound.css's global classes collide here.
   ============================================================ */
:root{
  --onb-lift:#1A1E18;
  --sage:var(--forest-soft);
  --cream:var(--bone);
  --cream-dim:rgba(235,227,209,.60);
  --cream-faint:rgba(235,227,209,.36);
  --hair:rgba(235,227,209,.13);
  --hair-2:rgba(235,227,209,.26);
  --oease:var(--ease-glide);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--night);color:var(--cream);font-family:var(--font-sans);font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column}

.shell{position:fixed;inset:0;display:flex;flex-direction:column}
.topbar{height:60px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,44px)}
.mark{font-family:var(--font-display);font-size:15px;letter-spacing:.04em;color:var(--cream-dim)}
.back{background:none;border:0;color:var(--cream-faint);cursor:pointer;font-family:var(--font-label);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .3s var(--oease)}
.back.on{opacity:1;pointer-events:auto}
.back:hover{color:var(--cream)}

/* progress — the court line, a hairline that fills; no numbers */
.court{flex:0 0 auto;height:1px;margin:0 clamp(20px,4vw,44px);position:relative;background:var(--hair)}
.court .line{position:absolute;inset:0 auto 0 0;width:0;background:var(--sage);transition:width .55s var(--oease)}
.court .net{position:absolute;right:0;top:-3px;height:7px;width:1px;background:var(--hair-2)}
.court.hide{opacity:0}

.body{flex:1 1 auto;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;padding:0 clamp(20px,4vw,44px);display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(8px);pointer-events:none;overflow-y:auto;
  transition:opacity .4s ease-out,transform .4s ease-out}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.inner{width:100%;max-width:600px;margin:0 auto;padding:28px 0}

.host{font-family:var(--font-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);
  margin-bottom:18px;min-height:15px}
.q{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4.4vw,36px);line-height:1.18;letter-spacing:-.01em}
.q em{font-style:italic}
.sub{font-size:14.5px;color:var(--cream-dim);margin-top:12px;line-height:1.6;max-width:520px}
.gap{height:28px}

.opts{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.opt{display:flex;align-items:baseline;gap:14px;padding:15px 4px;border:0;border-bottom:1px solid var(--hair);
  background:none;color:var(--cream);text-align:left;cursor:pointer;font-size:16px;font-weight:300;font-family:var(--font-sans);
  transition:padding-left .25s var(--oease),color .2s}
.opt:hover,.opt:focus-visible{padding-left:12px;outline:none;color:var(--sage)}
.opt:focus-visible{box-shadow:inset 2px 0 0 var(--sage)}
.opt .lead{flex:1 1 auto}
.opt .aside{flex:0 0 auto;font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.opt.picked{color:var(--sage)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.chip{border:1px solid var(--hair-2);background:none;color:var(--cream-dim);padding:10px 16px;border-radius:var(--radius-pill);
  cursor:pointer;font-size:14.5px;font-weight:300;font-family:var(--font-sans);transition:all .22s var(--oease)}
.chip:hover,.chip:focus-visible{color:var(--cream);border-color:var(--cream-faint);outline:none}
.chip:focus-visible{box-shadow:0 0 0 2px rgba(110,132,111,.5)}
.chip.on{background:var(--sage);border-color:var(--sage);color:var(--night)}
.chip.sm{font-size:13px;padding:8px 14px}

.pair{opacity:0;max-height:0;overflow:hidden;transition:opacity .45s var(--oease),max-height .45s var(--oease)}
.pair.on{opacity:1;max-height:360px}
.pairLbl{font-family:var(--font-label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:12px}

/* dues — user enters their own number; we state no price. No comps line. */
.money{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:22px;max-width:280px}
.money span{font-family:var(--font-display);font-size:26px;color:var(--cream-faint)}
.money input{flex:1 1 auto;background:none;border:0;color:var(--cream);font-family:var(--font-display);font-size:26px;width:100%}
.money input:focus{outline:none}
.money .per{font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

.field{width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--cream);
  font-family:var(--font-display);font-size:20px;padding:10px 0 12px;line-height:1.45}
.field::placeholder{color:var(--cream-faint);font-style:italic}
.field:focus{outline:none;border-bottom-color:var(--sage)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:22px}
.flab{font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:8px;display:block}
/* "save them a place" — a light, optional capture; reuses .frow/.field/.flab */
.invites{margin-bottom:6px}
.invrow{margin-bottom:22px}
.invrow .frow{margin-bottom:0}
.invlbl{font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.addrow{margin-top:2px;margin-bottom:6px}

.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.go{background:none;border:1px solid var(--cream-faint);color:var(--cream);padding:13px 28px;border-radius:var(--radius-pill);
  cursor:pointer;font-family:var(--font-label);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:all .22s var(--oease)}
.go:hover,.go:focus-visible{background:var(--cream);color:var(--night);border-color:var(--cream);outline:none}
.go[disabled]{opacity:.3;cursor:default}.go[disabled]:hover{background:none;color:var(--cream);border-color:var(--cream-faint)}
.go.solid{background:var(--sage);border-color:var(--sage);color:var(--night)}
.go.solid:hover{background:var(--cream);border-color:var(--cream)}
.skip{background:none;border:0;color:var(--cream-faint);cursor:pointer;font-family:var(--font-label);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
.skip:hover,.skip:focus-visible{color:var(--cream-dim);outline:none;text-decoration:underline;text-underline-offset:3px}

.fork{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-bottom:22px}
.fork button{background:var(--night);border:0;color:var(--cream);cursor:pointer;text-align:left;padding:26px 24px;min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;font-family:var(--font-sans);transition:background .22s var(--oease)}
.fork button:hover,.fork button:focus-visible{background:var(--onb-lift);outline:none}
.fork .t{font-family:var(--font-display);font-size:23px}
.fork .d{font-size:13.5px;color:var(--cream-dim);line-height:1.5}

.note-in{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--sage);margin-top:14px}
.finishing{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:10px}
.finishing .fh{font-family:var(--font-display);font-size:clamp(28px,5vw,40px)}
.finishing .fs{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--cream-dim)}

@media (max-width:560px){
  .topbar{height:52px;padding:0 20px}.court{margin:0 20px}.screen{padding:0 20px}
  .q{font-size:25px}.fork{grid-template-columns:1fr}.fork button{min-height:0;padding:22px}
  .frow{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .screen{transition:none}
}