*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
:root{
--bg:#0A0A0B; --bg-raised:#131316; --bg-sunken:#000000; --border:#242428; --border-soft:#19191C;
--ink:#F2F2F3; --ink-dim:#9C9CA3; --ink-faint:#8A8A92; --accent:#5468FF; --accent-btn:#4A5EE5; --accent-light:#7C8CFF; --good:#3DD68C;
--radius:8px; --radius-lg:14px;
--font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--header-h:64px;
}
section,article{scroll-margin-top:calc(var(--header-h) + 14px);}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; padding-top:var(--header-h);}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; text-wrap:balance; color:var(--ink); margin:0;}
h1{font-size:clamp(1.9rem,3.4vw+1rem,2.9rem); line-height:1.12;}
h2{font-size:clamp(1.4rem,1.6vw+1rem,1.7rem); line-height:1.2;}
h3{font-size:1.1rem; line-height:1.3; font-weight:600;}
.lede{font-size:1.02rem; color:var(--ink-dim); max-width:42ch;}
.accent-word{color:var(--accent);}
button{font:inherit;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem);}
.wrap--narrow{max-width:760px;}
.section{padding-block:clamp(2.6rem,5vw,4rem);}
.section-head{display:flex; flex-direction:column; gap:.6rem; margin-bottom:2.4rem; max-width:44rem;}
/* ============ HEADER ============ */
.site-header{position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100; display:flex; align-items:center;
background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft);}
.header-inner{width:100%; max-width:1120px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.wordmark{display:inline-flex; align-items:baseline; gap:.02em; font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; text-decoration:none; color:var(--ink);}
.wordmark .wm-tag{font-family:var(--font-mono); font-weight:500; color:var(--accent); font-size:.9em;}
.site-nav{display:none; align-items:center; gap:1.9rem;}
@media(min-width:840px){ .site-nav{display:flex;} }
.site-nav a{font-size:.88rem; font-weight:500; color:var(--ink-dim); text-decoration:none; transition:color .15s ease;}
.site-nav a:hover{color:var(--ink);}
.header-actions{display:flex; align-items:center; gap:.7rem;}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); cursor:pointer;}
@media(min-width:840px){ .nav-toggle{display:none;} }
.mobile-panel{position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border);
display:flex; flex-direction:column; padding:.5rem clamp(1.25rem,4vw,2.5rem) 1rem;
opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
.mobile-panel.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-panel a{padding:.8rem 0; border-top:1px solid var(--border-soft); color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:500;}
.mobile-panel a:first-child{border-top:none;}
@media(min-width:840px){ .mobile-panel{display:none;} }
/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.15rem; border-radius:999px; font-weight:600; font-size:.92rem;
text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:filter .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap; font-family:var(--font-body);}
.btn--primary{background:var(--accent-btn); color:#fff;}
.btn--primary:hover{filter:brightness(1.12);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn--ghost:hover{border-color:var(--ink-faint);}
.btn--sm{padding:.62rem 1.1rem; font-size:.84rem;}
.btn--block{width:100%;}
/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--border-soft); padding-block:2.6rem; background:var(--bg-sunken);}
.footer-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;}
.footer-links{display:flex; flex-wrap:wrap; gap:1.6rem;}
.footer-links a{color:var(--ink-dim); text-decoration:none; font-size:.87rem;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border-soft); font-size:.78rem; color:var(--ink-faint);}
/* ============ COOKIE BANNER ============ */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:110; max-width:30rem; margin-inline:auto;
background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 30px 60px -30px rgba(0,0,0,.65); padding:1.1rem 1.2rem;
display:flex; flex-direction:column; gap:.9rem; transform:translateY(140%); transition:transform .3s ease;}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner p{margin:0; font-size:.84rem; color:var(--ink-dim);}
.cookie-banner a{color:var(--accent-light); text-decoration:underline; white-space:nowrap;}
.js [data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.js [data-reveal].in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;} .js [data-reveal]{opacity:1; transform:none;} }
/* ============ PROSE (legal pages) ============ */
.prose{padding-block:3rem 5.5rem;}
.updated{display:inline-block; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); background:var(--bg-raised); border:1px solid var(--border); padding:.4rem .8rem; border-radius:999px; margin:1.1rem 0 2.4rem;}
.prose h2{font-size:1.12rem; margin:2.2rem 0 .8rem;}
.prose h2:first-of-type{margin-top:0;}
.prose p{color:var(--ink-dim); margin:0 0 1rem; font-size:.98rem;}
.prose ul{color:var(--ink-dim); margin:0 0 1rem; padding-left:1.2rem; font-size:.98rem;}
.prose li{margin-bottom:.5rem;}
.prose strong{color:var(--ink);}
.prose a{color:var(--accent-light); text-decoration:underline;}
/* ============ BLOG INDEX ============ */
.blog-hero{padding-block:3.2rem 1rem;}
.blog-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); padding-block:1rem 5rem;}
.blog-card{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; text-decoration:none; display:flex; flex-direction:column; gap:.7rem; transition:border-color .2s ease, transform .2s ease;}
.blog-card:hover{border-color:var(--ink-faint); transform:translateY(-2px);}
.blog-card h3{font-size:1.05rem; line-height:1.35;}
.blog-card p{color:var(--ink-dim); font-size:.88rem; margin:0; line-height:1.55;}
.blog-card .meta{display:flex; gap:.9rem; align-items:center; font-size:.76rem; color:var(--ink-faint); margin-top:auto; padding-top:.5rem; font-family:var(--font-mono);}
.blog-card .readmore{display:flex; align-items:center; gap:.35rem; font-weight:600; font-size:.84rem; color:var(--ink);}
.blog-card:hover .readmore{color:var(--accent);}
/* ============ BLOG POST ============ */
.post-header{padding-block:3rem 0;}
.post-meta{display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; font-size:.8rem; color:var(--ink-faint); margin-top:1rem; font-family:var(--font-mono);}
.post-body{padding-block:2rem 1rem;}
.post-body p{color:var(--ink-dim); font-size:1.02rem; margin:0 0 1.2rem; line-height:1.75;}
.post-body h2{margin-top:2.4rem; margin-bottom:.9rem; font-size:1.35rem;}
.post-body h3{margin-top:1.7rem; margin-bottom:.6rem; font-size:1.05rem;}
.post-body ul,.post-body ol{color:var(--ink-dim); font-size:1.02rem; line-height:1.75; padding-left:1.3rem; margin:0 0 1.2rem;}
.post-body li{margin-bottom:.5rem;}
.post-body strong{color:var(--ink);}
.post-body blockquote{margin:1.6rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:2px solid var(--accent); color:var(--ink); font-size:1.05rem; font-style:italic;}
.cta-box{margin-top:2.6rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem clamp(1.3rem,4vw,2.2rem); display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;}
.cta-box h3{font-size:1.15rem;}
.cta-box p{color:var(--ink-dim); margin:0; font-size:.92rem;}
.post-nav{padding-block:2.4rem 4rem; border-top:1px solid var(--border-soft); margin-top:1rem;}
.post-nav-title{font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem;}
.post-nav-links{display:flex; flex-direction:column; gap:.6rem;}
.post-nav-links a{display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem; transition:color .15s ease;}
.post-nav-links a:hover{color:var(--accent);}