/* The public site's one header and one footer (WISH-2164), on every public page: the front page, the two apps' pages,
   How it works, About, the FAQ, the blog, Releases, Privacy and the compliance guide. PublicChrome.cs writes the markup
   for the pages drawn in code, and PublicChromeConventionTests holds every hand-written page's copy to it, so a link
   added here is added everywhere or the build says which page forgot.

   Everything in this file is scoped to the header and the footer, its colours included. The compliance guide's pages
   keep their own look (landing.css and compliance.css): only their header and footer come from here, so no rule in
   this file may reach an element outside the two. The rest of the new look is look.css, which the guide does not link.

   Phone first: the links fold into a menu below 1040px, and the menu is a <details>, so it opens with no script at
   all. 44px tap targets, nothing that only shows on hover. Reduced motion is at the bottom. Version-stamped where it
   is linked. */

.j-top, .j-foot { --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --text:#ededed; --soft:#c8c8c8; --muted:#a2a2a2;
  --surface:#19191a; --deep:#0b0b0c; --amber:#ffb300; --amber-2:#ffd66b; --rider:#39bd1f; }
.j-wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
@media (min-width:760px) { .j-wrap { padding:0 28px; } }

/* ---------------------------------------------------------------- buttons: the header's Sign in, and every page's own */
.j-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:14px; font-weight:700; font-size:1rem; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.j-btn-sm { min-height:40px; padding:0 14px; border-radius:11px; font-size:.92rem; }
.j-btn-primary { background:var(--amber, #ffb300); color:#121212; box-shadow:0 10px 30px -8px rgba(255,179,0,.55); }
.j-btn:hover { transform:translateY(-1px); }

/* ---------------------------------------------------------------- the header */
.j-top { position:sticky; top:0; z-index:20; background:rgba(14,14,15,.8); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); color:var(--text); }
.j-top .j-wrap { display:flex; align-items:center; gap:10px; min-height:62px; }
.j-brand { display:flex; align-items:center; gap:10px; margin-right:auto; min-height:44px; text-decoration:none; color:#fff; font-weight:800; font-size:1.08rem; letter-spacing:-.01em; }
.j-brand img { width:30px; height:30px; }
.j-nav { display:none; align-items:center; gap:2px; }
.j-nav a, .j-menu nav a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:10px; color:var(--soft); text-decoration:none; font-size:.95rem; font-weight:500; }
.j-nav a:hover, .j-nav a[aria-current], .j-menu nav a[aria-current] { color:#fff; background:rgba(255,255,255,.06); }
.j-nav a.j-app { color:#fff; font-weight:600; }
.j-dot { width:8px; height:8px; border-radius:50%; background:var(--amber, #ffb300); box-shadow:0 0 10px var(--amber, #ffb300); flex:none; }
.j-dot.rider { background:var(--rider, #39bd1f); box-shadow:0 0 10px var(--rider, #39bd1f); }
/* The phone's menu is a <details>: it opens with no script at all. */
.j-menu { position:relative; }
.j-menu summary { list-style:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line-2); cursor:pointer; }
.j-menu summary::-webkit-details-marker { display:none; }
.j-menu summary span, .j-menu summary span::before, .j-menu summary span::after { display:block; position:relative; width:18px; height:2px; border-radius:2px; background:#fff; }
.j-menu summary span::before, .j-menu summary span::after { content:""; position:absolute; left:0; }
.j-menu summary span::before { top:-6px; }
.j-menu summary span::after { top:6px; }
.j-menu[open] summary span { background:transparent; }
.j-menu[open] summary span::before { top:0; transform:rotate(45deg); }
.j-menu[open] summary span::after { top:0; transform:rotate(-45deg); }
.j-menu nav { position:absolute; right:0; top:54px; display:grid; width:min(86vw, 320px); margin:0; padding:8px; border-radius:18px; background:#1b1b1d; border:1px solid var(--line-2); box-shadow:0 30px 60px rgba(0,0,0,.6); }
.j-menu nav a { display:flex; min-height:48px; padding:0 14px; color:var(--text); }
@media (min-width:1040px) { .j-nav { display:flex; } .j-menu { display:none; } }

/* ---------------------------------------------------------------- the footer */
.j-foot { margin:0; padding:48px 0 36px; border-top:1px solid var(--line); background:var(--deep); color:var(--muted); font-size:.9rem; line-height:1.6; }
.j-foot-grid { display:grid; gap:26px; }
@media (min-width:860px) { .j-foot-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.j-foot h2 { margin:0 0 8px; font-size:.74rem; line-height:1.4; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.j-foot nav { display:grid; align-content:start; }
.j-foot nav a { display:inline-flex; align-items:center; min-height:40px; color:var(--text); text-decoration:none; }
.j-foot .j-about { margin:10px 0 0; max-width:340px; }
.j-foot .socials { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; }
.j-foot .socials a { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--soft); transition:color .2s, border-color .2s, transform .2s; }
.j-foot .socials a:hover { color:var(--amber); border-color:rgba(255,179,0,.5); transform:translateY(-2px); }
.j-legal { margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; line-height:1.55; }
.j-legal a { color:var(--amber); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce) {
  .j-top *, .j-foot * { transition:none !important; }
}