/* layr, on the web. The same palette the app uses, from src/theme.js. */
:root{
  --base:#111114; --surface:#1C1C1F; --surface2:#27272A; --line:#2E2E32;
  --ink:#F4F4F5; --muted:#A1A1AA; --caption:#8E8E9A;
  --accent:#7C3AED; --accent-dim:#4C1D95; --accent-text:#A78BFA;
  --gut:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--base);color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:720px}

/* chrome */
header{padding:28px 0;position:sticky;top:0;background:rgba(17,17,20,0.86);
  backdrop-filter:saturate(140%) blur(14px);z-index:10;border-bottom:1px solid transparent}
header.on{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}

/*
  THE LOGO IS A 44px TARGET THAT LOOKS LIKE A 26px MARK.

  Justin: "we need to be able to click on the logo in the top right to get back
  to the home page." The link was already there and already worked, which the
  DOM confirmed. What it was not was HITTABLE: 26 by 26, which is small with a
  mouse and under Apple's own 44pt minimum on a phone, so tapping it mostly
  misses and that is indistinguishable from it not being a link.

  Padding grows the target, the negative margin takes the growth back out of the
  layout so nothing moves, and the hover says it is a link before you commit to
  pressing it.
*/
.bar .home{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-9px;
  border-radius:10px;
  transition:opacity .2s ease;
}
.bar .home:hover{opacity:.65}
.bar .home:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bar nav{display:flex;gap:22px;align-items:center}
.bar nav a{
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;
  /*
    EVERY link reserves the underline, selected or not. Justin: "privacy and
    terms need to stay on the same horizontal line when clicked. Because of the
    purple underline, the selected item becomes taller making the nav items
    bounce."

    Giving the padding and the border only to the selected one made it 5px
    taller than its neighbour, so the row shifted every time you changed page.
    Transparent here, coloured when current: the box never changes size and the
    only thing that moves is the colour.
  */
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.bar nav a:hover{color:var(--ink)}

/*
  WHICH PAGE YOU ARE ON, in the nav. Justin: "we need to show a selected state in
  the nav bar. The user needs to see their selection in the nav bar (top right)
  too."

  Two legal pages that look identical apart from their body text need the nav to
  say which one you opened, otherwise the only way to tell is to read a heading
  that may be scrolled off. White rather than muted, with a rule under it in the
  accent, so it is obvious at a glance and still quiet enough for a nav.

  aria-current carries the same fact to a screen reader, which cannot see the
  underline.
*/
.bar nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}

/* type */
h1{font-size:clamp(38px,7vw,64px);line-height:1.05;letter-spacing:-0.02em;
  font-weight:800;margin:0 0 20px}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.2;letter-spacing:-0.01em;
  font-weight:700;margin:64px 0 12px}
h3{font-size:17px;font-weight:700;margin:28px 0 6px}
p{margin:0 0 16px;color:#D7D7DC}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin-bottom:34px;max-width:620px}
.tag{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(16px,2.4vw,20px);
  color:var(--accent-text);letter-spacing:0.02em;margin:0 0 12px}
a{color:var(--accent-text)}
strong{color:var(--ink)}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--surface2);
  padding:2px 7px;border-radius:5px;color:var(--accent-text)}

/* bits */
.hero{padding:72px 0 24px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;
  border:1px solid var(--accent)}
.btn:hover{background:#6d28d9}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:28px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{margin:0 0 6px}
.card p{margin:0;font-size:15px;color:var(--caption)}

.steps{counter-reset:s;margin:28px 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:52px;margin:0 0 22px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--surface2);color:var(--accent-text);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.steps b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
.steps span{color:var(--caption);font-size:15px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.chip{background:var(--surface2);border-radius:99px;padding:7px 15px;font-size:13px;
  font-weight:500;color:var(--ink)}
.chip.on{background:var(--accent)}

/* legal pages */
.legal{padding:52px 0 96px}
.legal h2{font-size:21px;margin:46px 0 10px}
.legal h3{font-size:16px;margin:24px 0 4px}
.legal p,.legal li{color:#C9C9D1;font-size:15.5px}
.legal ul{padding-left:22px;margin:0 0 16px}
.legal li{margin:6px 0}
.meta{color:var(--caption);font-size:14px;border-left:2px solid var(--accent-dim);
  padding-left:16px;margin:0 0 40px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 44px}
.toc p{margin:0 0 8px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--caption);font-weight:700}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:3px 0;font-size:14.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:16px 20px;margin:20px 0}
.note p{margin:0;font-size:15px}

footer{border-top:1px solid var(--line);padding:36px 0 60px;margin-top:72px}
footer .bar{align-items:flex-start}
footer p{color:var(--caption);font-size:14px;margin:0}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:640px){
  .bar nav{gap:16px}
  .hero{padding:44px 0 16px}
  h2{margin-top:46px}
}