/* ClearlyNamed site header and footer, shared by the home page and the guides. Every rule is scoped to .top or .foot. */
.top, .foot { --c-paper:#fff; --c-ink:#18181b; --c-mute:#5f5f66; --c-line:#e3e3df; --c-accent:#3d52d5; --c-accent-ink:#2a3bb0; }
@media (prefers-color-scheme:dark) {
  .top, .foot { --c-paper:#1f1f23; --c-ink:#f1f1f3; --c-mute:#a7a7af; --c-line:#33333a; --c-accent:#8e9cff; --c-accent-ink:#b7c0ff; }
}
.top { background:var(--c-paper); border-bottom:1px solid var(--c-line); }
.top .in, .foot .in { max-width:1080px; margin:auto; padding:10px 22px; display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; }
.top .brand { display:flex; align-items:center; gap:9px; color:var(--c-ink); font-weight:750; font-size:18px; text-decoration:none; letter-spacing:-.01em; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:15px; }
.top nav a { color:var(--c-ink); text-decoration:none; }
.top nav a:hover { color:var(--c-accent); }
.top .btn { display:inline-block; padding:8px 14px; border-radius:10px; background:var(--c-accent); color:#fff; font-weight:650; text-decoration:none; }
.top .btn:hover { background:var(--c-accent-ink); color:#fff; }
@media (prefers-color-scheme:dark) { .top .btn, .top .btn:hover { color:#141416; } }
.foot { margin-top:56px; border-top:1px solid var(--c-line); background:var(--c-paper); font-size:14px; color:var(--c-mute); }
.foot .in { align-items:flex-start; justify-content:space-between; padding:28px 22px; }
.foot h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-ink); margin:0 0 8px; }
.foot ul { list-style:none; padding:0; margin:0; }
.foot li { margin:4px 0; }
.foot a { color:var(--c-mute); text-decoration:none; }
.foot a:hover { color:var(--c-accent); text-decoration:underline; }
.foot .legal { flex-basis:100%; margin:0; border-top:1px solid var(--c-line); padding-top:14px; }
@media (max-width:600px) {
  .top .in { padding:10px 18px; gap:8px 12px; }
  .top nav { gap:12px; font-size:14px; }
  .top .btn { padding:6px 10px; }
}