:root{
  --bg:#0a0c0f; --panel:#11141a; --card:#141821; --line:#232935;
  --ink:#e7eaee; --dim:#8d96a3; --faint:#7d8797; --live:#3fb950;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
nav{
  display:flex; align-items:center; gap:16px; padding:0 26px; min-height:62px;
  flex-wrap:wrap; row-gap:0;
  border-bottom:1px solid var(--line); background:rgba(17,20,26,.72);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto;
  color:var(--ink); text-decoration:none}
.brand img{width:24px; height:24px; border-radius:6px; display:block}
.brand span{font-size:12px; font-weight:600; letter-spacing:.26em}
.spacer{flex:1}
.navlink{color:var(--dim); text-decoration:none; font-size:13px}
.navlink:hover{color:var(--ink)}
.navuser{color:var(--faint); font-size:13px;
  max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
button{font:inherit; cursor:pointer; border-radius:7px; transition:all .15s}
button.ghost{
  background:transparent; color:var(--dim); border:1px solid var(--line);
  padding:7px 15px; font-size:13px;
}
button.ghost:hover{color:var(--ink); border-color:#39424f; background:#161a22}
button.primary{
  background:var(--ink); color:#0a0c0f; border:1px solid var(--ink);
  padding:12px 24px; font-size:14.5px; font-weight:500;
}
button.primary:hover{background:#fff; border-color:#fff}

/* body is a flex column, and a stretched flex item's cross size is floored by
   its own min-content width — so one unshrinkable descendant (the admin
   table, the guide's nowrap chip strip) widened <main> to max-content and
   scrolled the whole page sideways, heading and footer with it. A definite
   width:100% resolves against the body box instead and cannot be floored. */
nav,main,footer{width:100%; min-width:0; max-width:100%}
main{flex:1}
.hero{position:relative; overflow:hidden; padding:78px 26px 60px; isolation:isolate}

/* Invented street map (see dashboard/tools/make-mapbg.py). Texture only —
   never contrast enough to fight the type sitting on it. */
.herobg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.mapbg{
  width:100%; height:100%; display:block; pointer-events:none; border:0;
  -webkit-mask-image:radial-gradient(128% 118% at 52% 42%, #000 52%, transparent 94%);
  mask-image:radial-gradient(128% 118% at 52% 42%, #000 52%, transparent 94%);
}
/* Scrim: the type has to stay readable whatever the map does underneath. */
.herobg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 80% at 15% 48%,
      rgba(10,12,15,.96) 0%, rgba(10,12,15,.88) 52%, rgba(10,12,15,.64) 76%,
      rgba(10,12,15,.14) 92%, transparent 100%),
    linear-gradient(to bottom, rgba(10,12,15,.18) 0%, rgba(10,12,15,0) 32%, rgba(10,12,15,.52) 82%, var(--bg) 100%);
}

.hero-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center;
}
.hero-copy{text-align:left; padding-top:6px}
.hero-side{min-width:0}
.hero-foot{grid-column:1 / -1; text-align:left; margin-top:6px}
@media (max-width:940px){
  .hero{padding:64px 22px 52px}
  .hero-inner{grid-template-columns:1fr; gap:34px}
  .hero-copy,.hero-foot{text-align:center}
  .mapbg{-webkit-mask-image:radial-gradient(150% 82% at 50% 30%, #000 38%, transparent 88%);
         mask-image:radial-gradient(150% 82% at 50% 30%, #000 38%, transparent 88%)}
  .herobg::after{background:
    linear-gradient(to bottom,
      rgba(10,12,15,.55) 0%, rgba(10,12,15,.82) 14%, rgba(10,12,15,.82) 60%,
      rgba(10,12,15,.42) 78%, var(--bg) 100%)}
}
.eyebrow{
  margin:0 0 20px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--live);
}
h1{
  margin:0 0 22px; font-size:52px; line-height:1.08; letter-spacing:-.025em;
  font-weight:600;
}
.lede{margin:0 0 30px; max-width:560px; font-size:17.5px; color:var(--dim)}
@media (max-width:940px){ .lede{margin-left:auto; margin-right:auto} }
.actions{display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap}
.link{color:var(--dim); text-decoration:none; font-size:14.5px; border-bottom:1px solid var(--line)}
.link:hover{color:var(--ink)}
.note{margin:22px 0 0; font-size:13.5px; color:var(--faint); min-height:20px}
.note.err{color:#e5837c}

.cards{
  max-width:1060px; margin:0 auto; padding:20px 26px 84px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
}
.cards article{
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:26px 24px;
}
.cards h3{margin:0 0 10px; font-size:16px; font-weight:600; letter-spacing:-.005em}
.cards p{margin:0; font-size:14.5px; color:var(--dim); line-height:1.7}

.how{max-width:760px; margin:0 auto; padding:0 26px 96px}
.how h2{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  margin:0 0 26px; font-weight:600}
.how ol{margin:0; padding:0; list-style:none; counter-reset:step}
.how li{
  counter-increment:step; position:relative; padding:0 0 26px 46px;
  color:var(--dim); font-size:15.5px;
}
.how li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:28px; height:28px; border-radius:50%; background:var(--card);
  border:1px solid var(--line); color:var(--faint);
  display:grid; place-items:center; font-size:12.5px;
}
.how li b{color:var(--ink); font-weight:500}
.fine{
  margin:12px 0 0; padding:16px 18px; background:#12161d; border:1px solid var(--line);
  border-left:2px solid #7a6320; border-radius:7px;
  font-size:13px; color:var(--faint); line-height:1.65;
}
footer{
  border-top:1px solid var(--line); padding:24px 26px; display:flex; gap:14px;
  flex-wrap:wrap; row-gap:8px; align-items:center;
  font-size:12.5px; color:var(--faint);
}
footer .dim{color:#414954}
@media (max-width:600px){
  h1{font-size:38px}
  .hero{padding:52px 20px 44px}
}

/* auth card */
.authcard{
  max-width:400px; margin:0 0 0 auto; text-align:left;
  backdrop-filter:blur(3px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px;
}
.tabs{display:flex; gap:4px; background:#0d1117; border:1px solid var(--line);
  border-radius:8px; padding:4px; margin-bottom:20px}
.tab{
  flex:1; background:none; border:none; color:var(--dim); padding:8px;
  font-size:13.5px; border-radius:6px;
}
.tab.on{background:#232935; color:var(--ink)}
.authcard label{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.authcard label span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.authcard input{
  background:#0a0d12; border:1px solid var(--line); border-radius:7px;
  padding:11px 13px; color:var(--ink); font:inherit; font-size:15px;
}
.authcard input:focus{outline:none; border-color:#3a4557}
.authcard .primary{width:100%; margin-top:4px; padding:12px}
button.wide{width:100%; padding:11px; font-size:14px}
.links{margin:16px 0 0; text-align:center; font-size:13px}
.links a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
.links a:hover{color:var(--ink)}
.lede-sub{margin:26px 0 0; font-size:14px}
.note{margin:16px 0 0; font-size:13px; color:var(--faint); min-height:18px; text-align:center; line-height:1.6}
.note.err{color:#e5837c}
.note.ok{color:#5fbf75}
.authcard code{
  display:inline-block; margin-top:6px; background:#0a0d12; border:1px solid var(--line);
  border-radius:4px; padding:3px 7px; font-size:11.5px; color:var(--dim); word-break:break-all;
}

/* Terms acceptance. The checkbox label breaks the .authcard label rule
   (column layout, uppercase caption), so it opts out explicitly. */
.agree:not([hidden]){
  display:flex !important; flex-direction:row !important; align-items:flex-start;
  gap:10px; margin:2px 0 16px; cursor:pointer;
}
.agree input{
  width:16px; height:16px; flex:0 0 auto; margin-top:2px; padding:0;
  accent-color:var(--live, #3fb950);
}
.agree span{
  font-size:12.5px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--dim); line-height:1.55;
}
.agree a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.agree a:hover{border-color:var(--dim)}
.accept-h{margin:0 0 10px; font-size:16px; color:var(--ink)}
.accept-p{margin:0 0 16px; font-size:13.5px; color:var(--dim); line-height:1.65}

@media (max-width:940px){ .authcard{margin:0 auto} }

/* ---------- mobile ----------
   Everything below narrows the shared shell. The ordering matters: 760 is the
   tablet/phone boundary, 560 is where the nav genuinely runs out of room and
   has to start dropping links, 400 is small phones. */

/* iOS Safari zooms the page whenever a focused input's text is under 16px, and
   never zooms back out. Every form on the site was hitting it. */
@media (max-width:760px){
  input,select,textarea,.authcard input{font-size:16px}
  /* Tap targets: a 13px link with no padding is ~18px tall, well under the
     44px Apple and 48px Material both ask for. Padding only, so the nav's
     min-height still governs its own height. */
  nav .navlink{padding:10px 0}
}

@media (max-width:760px){
  nav{gap:14px; padding:0 20px}
  .hero{padding:56px 20px 46px}
  .cards{padding:16px 20px 64px; gap:14px}
  .cards article{padding:22px 20px}
  .how{padding:0 20px 72px}
  footer{padding:20px 20px}
}

/* Narrow phones: the nav was wrapping "My events" and the button onto second
   lines. The events link needs a sign-in anyway, so it is the one to drop. */
@media (max-width:560px){
  nav{gap:10px; padding:0 16px}
  nav .navlink[href="/events"]{display:none}
  nav button{white-space:nowrap}
  .brand span{font-size:11px; letter-spacing:.18em}
  /* Signed in, the nav carries brand + 2 links + address + Sign out, which
     overflowed off the right edge. The button already says you are signed in. */
  nav .navuser{display:none}
  /* The tagline gets its own line rather than squeezing the links off-screen. */
  footer .dim{flex:1 1 100%; order:3}
  footer .spacer{display:none}
}

/* Small phones. The nav is measured, not guessed: at 320px the brand, two
   links and the button come to ~298px inside 12px padding, so it stays on one
   line. flex-wrap above is the safety net if a longer label ever appears. */
@media (max-width:400px){
  h1{font-size:32px}
  .hero{padding:44px 16px 38px}
  .cards{padding:12px 16px 56px}
  .how{padding:0 16px 60px}
  .authcard{padding:20px 18px}
  footer{padding:18px 16px; gap:10px}
  nav{gap:8px; padding:0 12px}
  .brand img{width:20px; height:20px}
  .brand span{font-size:10px; letter-spacing:.14em}
  .navlink{font-size:12.5px}
  button.ghost{padding:6px 11px; font-size:12.5px}
}

/* Page-wide map ground, used on every page except /dashboard — which has a
   real Leaflet map, and a decorative fake one behind it would be worse than
   confusing. Held at .30 opacity: measured, --dim stays 5.55:1 over the
   brightest road, comfortably past AA. The homepage hero uses the same file
   far more assertively, because its copy sits in a scrimmed column. */
.pagebg{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.pagebg object{
  width:100%; height:100%; display:block; border:0; pointer-events:none; opacity:.40;
  -webkit-mask-image:radial-gradient(150% 128% at 50% 8%, #000 48%, transparent 98%);
  mask-image:radial-gradient(150% 128% at 50% 8%, #000 48%, transparent 98%);
}
/* Only .20 — measured. Anything heavier and the map may as well not be here;
   anything lighter and --faint drops under AA on the brightest road. */
.pagebg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(10,12,15,.14) 0%, rgba(10,12,15,.20) 46%, rgba(10,12,15,.34) 100%),
    rgba(10,12,15,.20);
}

/* Route into the GroupTrack comparison from the homepage — it is the page most
   likely to be someone's entry point from search, so it needs a way in from
   the one they land on. */
.compare-link{margin:0 0 22px; font-size:14.5px; color:var(--faint)}