/* Base reset, typography, and nav/button chrome shared verbatim across the
   app pages. Extracted from what was, before this, byte-for-byte identical
   CSS hand-copied into each page's own <style> block — nothing here changed
   how any page renders.

   Deliberately NOT here: page-specific component CSS, :root's color
   tokens (a couple of pages define extra variables the rest don't need),
   and a handful of chrome rules that genuinely differ between pages today
   (.btn-sm sizing, .btn-primary:hover's transform, .nav-user .av's
   overflow) — those stay local until someone decides which value should
   actually win. See the "Extract only what's truly identical" scoping
   note in the commit that added this file. */

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1180px;margin:0 auto;}
.logo img{height:40px;width:auto;}
/* display:contents on desktop keeps .nav-links/.nav-cta acting as direct
   flex children of nav (so justify-content:space-between still spaces
   logo/links/cta exactly as before) — each page's own mobile media query
   turns this into the actual dropdown box, at which point the display:none
   default (hidden until nav.menu-open) applies regardless of whichever
   .nav-cta variant header.js has already set to display:flex inline, since
   a display:none ancestor hides its descendants no matter their own
   display value. That's what lets the mobile menu hide/show the guest vs.
   signed-in CTA correctly without fighting header.js's inline styles. */
.nav-mobile-menu{display:contents;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:12.5px;font-weight:500;color:var(--ink);opacity:0.72;text-transform:uppercase;letter-spacing:0.06em;transition:all .2s;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-links a.active{color:var(--blue);font-weight:600;}
.nav-cta{display:flex;gap:12px;align-items:center;}

.nav-menu-btn{display:none;padding:6px;}
.nav-menu-btn svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;display:block;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;transition:all .25s;border:1px solid transparent;white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.btn-primary{background:var(--blue);color:var(--white);}
.btn-ghost{color:var(--ink);opacity:0.75;font-size:14.5px;font-weight:500;padding:12px 10px;background:none;border:none;cursor:pointer;}
.btn-outline{border:1.5px solid var(--sky-deep);color:var(--blue);background:var(--white);}

.nav-user{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink);}