/* Shared header and footer for every page. Each page keeps its own styles for everything else. */
@font-face{font-family:'TT Commons Pro';src:url('/assets/tt-commons-pro-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
html{font-variation-settings:"slnt" 0,"wdth" 100}
:root{--ground:#e7e5ef;--ink:#1a1a1a;--ink-2:#3a3550;--muted:#6b6880;--line:#e3e2ec;--btn:#252538;--purple:#6d4fd8;--sans:"TT Commons Pro",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* header: sticky, hides while scrolling down and comes back when scrolling up (js/site.js) */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;transition:transform .3s ease;background:rgba(231,229,239,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--sans);line-height:1.5}
header.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
.nav{display:flex;align-items:center;gap:24px;padding-block:12px}
.nav img{height:30px;width:auto;display:block}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-weight:600;font-size:15px;color:var(--ink-2)}
.nav ul a{text-decoration:none;color:inherit}
.nav ul a:hover{color:var(--ink)}
.nav ul a.ai-link{background:linear-gradient(90deg,#ede9fe,#dbeafe);color:var(--purple);border-radius:999px;padding:5px 12px;margin:-5px 0}
.nav ul a.ai-link:hover{color:#4c33b8}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:#fff;text-decoration:none;border-radius:14px;font-weight:600;padding:11px 18px;font-size:15px;border:0;font-family:var(--sans)}
.btn:hover{background:#34344d}
.btn.light{background:#fff;color:var(--btn)}
/* footer */
footer{font-family:var(--sans)}
footer .wrap{padding-block:56px 40px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;font-size:14px;color:var(--muted);line-height:1.5}
footer img{height:24px;opacity:.75}
footer h4{margin:0 0 10px;color:var(--ink);font-size:14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:inherit}
footer .note{margin:12px 0 0;font-size:13px}
@media (max-width:820px){.nav ul{display:none}.nav .btn{margin-left:auto}}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1}}