/* VPR shared stylesheet for content pages — tokens mirror index.html */
:root{
  --bg:#ffffff;--bg-2:#f2f2f2;--surface:#f7f7f7;
  --ink:#0a0a0a;--ink-2:#3a3a3a;--muted:#737373;--line:#e4e4e4;
  --venom:#c9a24a;--venom-deep:#8a6a1f;--venom-ink:#0a0a0a;
  --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;letter-spacing:0;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
/* type: tracking + leading scale with size — tight on display, near 0 on body */
h1,h2,h3{text-wrap:balance;font-family:var(--font-display);font-optical-sizing:auto;font-weight:800}
h1{font-size:var(--text-2xl);font-variation-settings:'opsz' 96;letter-spacing:-0.035em;line-height:1.02}
h2{font-size:var(--text-xl);margin-top:var(--s12);letter-spacing:-0.025em;line-height:1.1}
h3{font-size:var(--text-lg);margin-top:var(--s8);letter-spacing:-0.015em;line-height:1.2}
a,button{-webkit-tap-highlight-color:transparent}
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}
/* translucent chrome; the edge is a soft blur mask shown only once content scrolls underneath */
.top{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--bg) 72%,transparent);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);border-top:1px solid color-mix(in oklch,white 45%,transparent)}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none;opacity:0;transition:opacity 220ms ease-out;background:linear-gradient(to bottom,color-mix(in oklch,var(--bg) 55%,transparent),transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,black,transparent);mask-image:linear-gradient(to bottom,black,transparent)}
.top.scrolled::after{opacity:1}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem;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:auto;height:34px}
.nav{display:none;gap:var(--s6);font-size:var(--text-sm)}
.nav a{text-decoration:none;color:var(--ink);font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;min-height:44px;transition:color 160ms ease-out,opacity 160ms ease-out}
.nav a:active,footer .links a:active,.crumbs a:active{opacity:.55;transition-duration:0ms}
.subnav{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding:var(--s3) var(--gutter);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;scroll-snap-align:start;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:0 var(--s3);min-height:36px;display:inline-flex;align-items:center;background:var(--surface);transition:transform 180ms cubic-bezier(.2,.7,.2,1)}
.subnav a:active{transform:scale(.96);transition-duration:50ms}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(min-width:820px){.subnav{display:none}}
.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;transition:transform 180ms cubic-bezier(.2,.7,.2,1),background 160ms ease-out}
.btn:active{transform:scale(.97);transition-duration:50ms}
@media(hover:hover){.btn:hover{background:var(--ink-2)}.btn.venom:hover{background:var(--ink-2)}}
.btn.venom{background:var(--ink);color:var(--bg)}
.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:-.015em;line-height:1.2;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);min-height:44px;align-items:center;transition:opacity 160ms ease-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary:active{opacity:.6;transition-duration:0ms}
/* the marker rotates from the trigger (anchored origin), same path open and closed */
.faq summary::after{content:"+";color:var(--venom-deep);font-weight:400;display:inline-block;transition:transform 220ms cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-2)}
.faq details[open] > *:not(summary){animation:faqIn 220ms cubic-bezier(.2,.7,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.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)}
/* on the black CTA card the button inverts: white with black text */
.cta .btn,.cta .btn.venom{background:var(--bg);color:var(--ink)}
@media(hover:hover){.cta .btn:hover,.cta .btn.venom:hover{background:var(--bg-2)}}
.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)}
.form .row:has(input[aria-invalid="true"]){box-shadow:0 0 0 2px var(--ink),0 0 0 4px oklch(0.7 0.18 25)}
.form[aria-busy="true"] .btn{opacity:.7}
.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;display:inline-flex;align-items:center;min-height:44px}
.fine{font-size:.72rem;line-height:1.5;letter-spacing:.01em}
@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)}}
/* reduced motion: gentler, not none */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.subnav a{transition:opacity 120ms ease}
  .btn:active,.subnav a:active{transform:none;opacity:.7}
  .faq summary::after{transition:none}
  .faq details[open] > *:not(summary){animation:faqFade 160ms ease}
  @keyframes faqFade{from{opacity:0}to{opacity:1}}
  .top::after{transition:none}
}
/* reduced transparency: frost the glass */
@media(prefers-reduced-transparency:reduce){
  .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
  .top::after{display:none}
}
/* more contrast: near-solid surfaces, defined borders */
@media(prefers-contrast:more){
  :root{--muted:oklch(0.40 0.02 120);--line:oklch(0.70 0.02 100);--venom-deep:#6b5117}
  .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--ink)}
  .top::after{display:none}
  .card,.form .row,.subnav a,th,td{border-color:var(--ink)}
}

/* ─── submission form ─── */
.sub{display:grid;gap:var(--s8);max-width:640px;margin-top:var(--s12)}
.sub .blk{border:0;padding:0;margin:0;display:grid;gap:var(--s4)}
.sub legend{padding:0;margin-bottom:var(--s2)}
.sub .f{display:grid;gap:var(--s2);position:relative}
.sub .f>span{font-weight:600;font-size:var(--text-base);line-height:1.3}
.sub .f>span i{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:var(--text-sm);margin-top:2px}
.sub input[type=text],.sub input[type=email],.sub input[type=tel]{width:100%;min-height:48px;padding:0 var(--s4);font:inherit;font-size:max(16px,1rem);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);outline:0;transition:border-color 120ms ease,box-shadow 120ms ease}
.sub input:focus-visible{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in oklch,var(--ink) 12%,transparent)}
.sub input[aria-invalid="true"]{border-color:oklch(0.62 0.2 25);box-shadow:0 0 0 3px oklch(0.62 0.2 25/.18)}
.sub .two{display:grid;gap:var(--s4)}
.sub .count{position:absolute;right:var(--s3);bottom:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);pointer-events:none}
.sub .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.sub .seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;transition:background 120ms ease,color 120ms ease,transform 50ms ease}
.sub .seg label:active{transform:scale(.97)}
.sub .seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sub .seg label:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sub .seg label:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in oklch,var(--ink) 12%,transparent)}
.sub .seg.bad label{border-color:oklch(0.62 0.2 25)}
.sub .drop{display:grid;justify-items:center;gap:var(--s1);padding:var(--s8) var(--s4);text-align:center;background:var(--surface);border:1.5px dashed color-mix(in oklch,var(--ink) 30%,transparent);border-radius:var(--r-lg);cursor:pointer;transition:border-color 120ms ease,background 120ms ease}
.sub .drop:hover,.sub .drop.over{border-color:var(--ink);background:var(--bg-2)}
.sub .drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sub .drop b{font-weight:600}.sub .drop small{color:var(--muted);font-size:var(--text-sm)}
.sub .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sub .thumbs:empty{display:none}
.sub .th{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.sub .th img{width:100%;height:100%;object-fit:cover;display:block}
.sub .th button{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sub .th small{position:absolute;left:6px;bottom:6px;font-family:var(--font-mono);font-size:.62rem;padding:2px 6px;border-radius:999px;background:color-mix(in oklch,var(--ink) 75%,transparent);color:var(--bg)}
.sub .hint{font-size:var(--text-sm);color:var(--muted)}
.sub .hint.err{color:oklch(0.55 0.2 25);min-height:0}.sub .hint.err:empty{display:none}
.sub .chk{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;font-size:var(--text-sm);color:var(--ink-2);line-height:1.45}
.sub .chk input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink)}
.sub .chk.bad{color:oklch(0.55 0.2 25)}
.sub .act{display:grid;gap:var(--s3)}
.sub .msg{font-size:var(--text-sm);min-height:1.4em}
.sub .msg.ok{color:var(--venom-deep)}.sub .msg.err{color:oklch(0.55 0.2 25)}
.sub .bar{height:4px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.sub .bar i{display:block;height:100%;width:0;background:var(--venom);transition:width 160ms ease}
.sub[aria-busy="true"] .btn{opacity:.75}
.done{margin-top:var(--s12);max-width:640px;display:grid;gap:var(--s4)}
.sub[hidden],.done[hidden]{display:none}
.done h2{font-size:var(--text-2xl)}
@media (min-width:640px){.sub .two{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.sub .seg label,.sub .drop,.sub .bar i{transition:none}}

/* ─── registration ─── */
.steps-nav{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s10);max-width:640px;padding:0}
.steps-nav li{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:var(--s3);border-top:2px solid var(--line)}
.steps-nav li b{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--bg-2);color:var(--ink);font-family:var(--font-display);font-size:.75rem}
.steps-nav li.on{color:var(--ink);border-top-color:var(--ink)}.steps-nav li.on b{background:var(--ink);color:var(--bg)}
.steps-nav li.ok{border-top-color:var(--venom)}.steps-nav li.ok b{background:var(--venom);color:var(--venom-ink)}
.steps-nav[hidden]{display:none}
.gate{max-width:640px;margin-top:var(--s10);display:grid;gap:var(--s4)}.gate[hidden]{display:none}.gate h2{font-size:var(--text-2xl)}
.sub .seg.two-up{grid-template-columns:1fr 1fr}
.sub .total{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--text-sm);color:var(--ink-2)}
.sub .total b{font-family:var(--font-mono);font-weight:500;color:var(--ink);text-align:right}
.sub .total .sum{padding-top:var(--s2);border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.sub .total b.sum{font-size:var(--text-lg);font-family:var(--font-display);font-weight:800}
.sub .chks{display:grid;gap:var(--s3)}
.sub .chk.req{padding-top:var(--s3);border-top:1px solid var(--line)}
.pay{display:grid;gap:var(--s4);max-width:640px;margin-top:var(--s8)}.pay[hidden]{display:none}
.pay .card{display:grid;gap:var(--s2)}
.refbig{font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.06em;color:var(--ink);font-weight:500;user-select:all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0;font-size:var(--text-base)}
.kv dt{color:var(--muted);font-size:var(--text-sm);padding-top:2px}.kv dd{margin:0;font-family:var(--font-mono);font-weight:500;color:var(--ink);user-select:all;word-break:break-word}
.sub.proof{margin-top:var(--s2);gap:var(--s6)}