/* VPR shared stylesheet for content pages — tokens mirror index.html */
:root{
  --bg:oklch(0.955 0.012 95);--bg-2:oklch(0.925 0.016 95);--surface:oklch(0.99 0.006 95);
  --ink:oklch(0.20 0.012 130);--ink-2:oklch(0.30 0.012 130);--muted:oklch(0.50 0.018 120);--line:oklch(0.86 0.014 100);
  --venom:oklch(0.88 0.27 135);--venom-deep:oklch(0.72 0.24 138);--venom-ink:oklch(0.28 0.06 140);
  --font-display:'Bricolage Grotesque','Archivo Black',Impact,sans-serif;--font-body:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --text-sm:clamp(0.83rem,0.78rem + 0.24vw,0.9rem);--text-base:clamp(1rem,0.94rem + 0.3vw,1.125rem);--text-lg:clamp(1.2rem,1.1rem + 0.5vw,1.4rem);--text-xl:clamp(1.5rem,1.3rem + 1vw,2rem);--text-2xl:clamp(2rem,1.6rem + 2vw,3rem);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s6:1.5rem;--s8:2rem;--s12:3rem;--s16:4rem;
  --r-md:12px;--r-lg:24px;--gutter:clamp(1rem,4vw,2.5rem);--max:1180px;--prose:72ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);overflow-x:clip}
body{color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance;font-family:var(--font-display);font-variation-settings:'opsz' 96;letter-spacing:-0.03em;line-height:1.05;font-weight:800}
h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl);margin-top:var(--s12)}h3{font-size:var(--text-lg);margin-top:var(--s8)}
p,ul,ol,table{margin-top:var(--s4)}
ul,ol{padding-left:1.25rem}li{margin-top:var(--s2)}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--venom-deep)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.top{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--bg) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in oklch,var(--line) 60%,transparent)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:1.35rem}
.brand svg{width:30px;height:30px}
.nav{display:none;gap:var(--s6);font-size:var(--text-sm)}
.nav a{text-decoration:none;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s6);border-radius:999px;border:0;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;font:inherit;font-weight:600}
.btn.venom{background:var(--venom);color:var(--venom-ink)}
.btn.sm{min-height:40px;padding:0 var(--s4);font-size:var(--text-sm)}
main{padding:var(--s12) 0 var(--s16)}
.hero{display:grid;gap:var(--s4);max-width:var(--prose)}
.hero .pill{justify-self:start}
.hero .lede{font-size:var(--text-lg);color:var(--ink-2);line-height:1.4}
.prose{max-width:var(--prose)}
.prose strong{font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.grid{display:grid;gap:var(--s4);margin-top:var(--s6)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{text-align:left;padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto;margin-top:var(--s4)}
.faq details{border-top:1px solid var(--line);padding:var(--s4) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:var(--text-lg);font-family:var(--font-display);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::after{content:"+";color:var(--venom-deep);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2)}
.cta{margin-top:var(--s12);background:var(--ink);color:var(--bg);border-radius:var(--r-lg);padding:var(--s8) var(--s6);display:grid;gap:var(--s4)}
.cta h2{margin:0;color:var(--bg)}
.cta p{color:color-mix(in oklch,var(--bg) 75%,transparent);max-width:50ch}
.form{display:grid;gap:var(--s3);max-width:520px}
.form .row{display:flex;gap:var(--s2);background:var(--surface);border-radius:999px;padding:var(--s1)}
.form input{flex:1 1 0;width:0;min-width:0;border:0;background:transparent;padding:0 var(--s4);font-size:max(16px,1rem);color:var(--ink);min-height:44px;border-radius:999px;font:inherit}
.form .msg{font-size:var(--text-sm);min-height:1.4em}
.form .msg.ok{color:var(--venom)}.form .msg.err{color:oklch(0.8 0.15 25)}
.pill{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:var(--s1) var(--s3);border-radius:999px;background:var(--venom);color:var(--venom-ink)}
.crumbs{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s6)}
.crumbs a{text-decoration:none}
footer{padding:var(--s12) 0;color:var(--muted);font-size:var(--text-sm);border-top:1px solid var(--line)}
footer .wrap{display:grid;gap:var(--s4)}
footer .links{display:flex;flex-wrap:wrap;gap:var(--s4)}
footer a{text-decoration:none}
.fine{font-size:.72rem;line-height:1.5}
@media(min-width:820px){.nav{display:flex}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.cta{grid-template-columns:1.2fr 1fr;align-items:center;padding:var(--s12)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}