/* VendBuddy design system, one shared stylesheet (2026-10-13).
   Source of truth for tokens and reusable components. Loaded by every public template through the
   shared head helper (vb_design.js, riding in POSTHOG_SNIPPET) with a content-hash ?v= and a year of
   immutable cache. Rules for pages that opt in sit under body.vb-ds; component classes are .vb-*.
   Tokens are --vb-* so they can never collide with a page's own --bg / --tx custom properties.
   Contrast (checked by test/design-system-1013.test.js): ink 16:1, tx2 7.6:1, tx3 5.4:1 (4.7:1 even on the #eceef3 surface) on white. */
/* same files and ranges every template already declares; here so tool and legal pages that never did get the same type */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --vb-bg:#ffffff; --vb-s1:#f4f4f6; --vb-s3:#eceef3;
  --vb-b1:#e2e3e9; --vb-b2:#d3d6e0;
  --vb-tx:#12142b; --vb-tx2:#4a5168; --vb-tx3:#626a7e;
  --vb-accent:#047857; --vb-accent-ink:#065f46; --vb-accent-soft:rgba(4,120,87,.08); --vb-accent-line:rgba(4,120,87,.28);
  --vb-blue:#0369a1; --vb-blue-soft:rgba(3,105,161,.08);
  --vb-gold:#946005; --vb-gold-soft:rgba(148,96,5,.09);
  --vb-red:#b91c1c; --vb-red-soft:rgba(185,28,28,.07);
  --vb-r1:10px; --vb-r2:14px; --vb-r3:20px;
  --vb-shadow:0 1px 2px rgba(18,20,43,.05),0 10px 28px -12px rgba(18,20,43,.14);
  --vb-ease:cubic-bezier(.2,.8,.2,1);
  --vb-font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --vb-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---- canvas: white, one soft emerald glow behind the opener, nothing else --------------------- */
body.vb-ds{
  background-color:var(--vb-bg) !important;
  background-image:radial-gradient(60rem 26rem at 50% -7rem,rgba(4,120,87,.10),rgba(4,120,87,0) 78%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 40rem !important;
  color:var(--vb-tx);
  font-family:var(--vb-font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.vb-ds::before,body.vb-ds::after{content:none !important;display:none !important}
body.vb-ds :where(h1,h2,h3){font-family:var(--vb-font-display);letter-spacing:-.012em;line-height:1.15}
body.vb-ds :where(h1){line-height:1.1;letter-spacing:-.02em}
body.vb-ds ::selection{background:rgba(4,120,87,.18)}
body.vb-ds :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--vb-accent);outline-offset:2px;border-radius:6px}
body.vb-ds ::placeholder{color:var(--vb-tx3);opacity:1}
/* helper text is readable text: tx2, never paler, 13px floor. :where() keeps the specificity at (0,0,0) so a
   page rule of any weight still wins; the repaint maps the page's own colours instead. */
:where(body.vb-ds) :where(.hint,.fine,.help,.helper,.muted,.note,.qhint,.rs,.sub-note,.caption){color:var(--vb-tx2);font-size:13px}
body.vb-ds :where(figcaption){color:var(--vb-tx2);font-size:14px;line-height:1.5}
/* long reading text */
body.vb-ds :where(article,.vb-read) :where(p,li){line-height:1.7}
body.vb-ds :where(article,.vb-read) :where(p,li) :where(strong,b){color:var(--vb-tx)}

/* ---- layout helpers ------------------------------------------------------------------------- */
.vb-wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);box-sizing:border-box}
.vb-read{max-width:720px;margin-inline:auto}
.vb-sec{padding-block:clamp(56px,8vw,112px)}
.vb-sec--tint{background:var(--vb-s1)}
.vb-sec--tight{padding-block:clamp(36px,5vw,64px)}
.vb-glow{position:relative;isolation:isolate}
.vb-glow::before{content:"";position:absolute;inset:-6rem 0 auto 0;height:34rem;z-index:-1;pointer-events:none;
  background:radial-gradient(52rem 24rem at 50% 6rem,rgba(4,120,87,.09),rgba(4,120,87,0) 72%)}
.vb-eyebrow{display:inline-block;font:600 13px/1.2 var(--vb-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--vb-accent-ink)}

/* ---- type scale (desktop / mobile) ----------------------------------------------------------- */
.vb-h1{font:700 clamp(36px,5.2vw,60px)/1.08 var(--vb-font-display);letter-spacing:-.02em;color:var(--vb-tx);margin:0 0 .4em}
.vb-h2{font:700 clamp(28px,3.4vw,40px)/1.15 var(--vb-font-display);letter-spacing:-.015em;color:var(--vb-tx);margin:0 0 .5em}
.vb-h3{font:600 clamp(20px,2vw,24px)/1.25 var(--vb-font-display);color:var(--vb-tx);margin:0 0 .4em}
.vb-lead{font:400 clamp(17px,1.6vw,20px)/1.6 var(--vb-font-body);color:var(--vb-tx2);max-width:44rem}
.vb-body{font:400 17px/1.65 var(--vb-font-body);color:var(--vb-tx)}
.vb-small{font:400 14px/1.5 var(--vb-font-body);color:var(--vb-tx2)}
.vb-num{font-variant-numeric:tabular-nums}

/* ---- buttons: one primary per view -------------------------------------------------------- */
.vb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;padding:0 24px;
  border-radius:12px;border:1px solid var(--vb-b2);background:var(--vb-bg);color:var(--vb-tx);
  font:600 16px/1 var(--vb-font-display);text-decoration:none;cursor:pointer;
  transition:transform .15s var(--vb-ease),box-shadow .15s var(--vb-ease),background-color .15s,border-color .15s}
.vb-btn:hover{transform:translateY(-1px);border-color:var(--vb-accent);color:var(--vb-accent-ink);text-decoration:none}
.vb-btn:active{transform:scale(.98)}
.vb-btn--primary{background:var(--vb-accent);border-color:var(--vb-accent);color:#fff;box-shadow:0 1px 2px rgba(4,120,87,.25),0 8px 20px -10px rgba(4,120,87,.55)}
.vb-btn--primary:hover{background:var(--vb-accent-ink);border-color:var(--vb-accent-ink);color:#fff}
.vb-btn--block{display:flex;width:100%}

/* ---- surfaces ------------------------------------------------------------------------------- */
.vb-card{background:var(--vb-bg);border:1px solid var(--vb-b1);border-radius:var(--vb-r2);padding:clamp(18px,2.4vw,28px);box-sizing:border-box}
.vb-card--hover{transition:transform .2s var(--vb-ease),box-shadow .2s var(--vb-ease),border-color .2s}
.vb-card--hover:hover{transform:translateY(-2px);box-shadow:var(--vb-shadow);border-color:var(--vb-b2)}
.vb-grid{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.vb-split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:center}

/* ---- "dopamine" components: colour only ever marks meaning ---------------------------------- */
/* stat strip: the number is the anchor */
.vb-stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin:28px 0}
.vb-stat{border:1px solid var(--vb-b1);border-radius:var(--vb-r2);padding:18px 20px;background:var(--vb-bg)}
.vb-stat__n{display:block;font:700 clamp(30px,4vw,44px)/1.05 var(--vb-font-display);letter-spacing:-.02em;color:var(--vb-accent);font-variant-numeric:tabular-nums}
.vb-stat__l{display:block;margin-top:6px;font:500 14px/1.4 var(--vb-font-body);color:var(--vb-tx2)}
.vb-stat--gold .vb-stat__n{color:var(--vb-gold)}
.vb-stat--blue .vb-stat__n{color:var(--vb-blue)}
/* checklist with real ticks */
.vb-checklist{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px}
.vb-checklist>li{position:relative;padding-left:34px;line-height:1.55;color:var(--vb-tx)}
.vb-checklist>li::before{content:"";position:absolute;left:0;top:.12em;width:22px;height:22px;border-radius:50%;
  background:var(--vb-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;
  border:1px solid var(--vb-accent-line)}
.vb-checklist--no>li::before{background-color:var(--vb-red-soft);border-color:rgba(185,28,28,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
/* pull quote */
.vb-pull{margin:36px 0;padding:6px 0 6px 22px;border-left:3px solid var(--vb-accent);font:600 clamp(21px,2.6vw,28px)/1.35 var(--vb-font-display);letter-spacing:-.01em;color:var(--vb-tx)}
.vb-pull cite{display:block;margin-top:10px;font:400 14px/1.4 var(--vb-font-body);color:var(--vb-tx3);font-style:normal}
/* summary box: the "in short" at the end (or top) of a long page */
.vb-summary{margin:36px 0;padding:22px 24px;border:1px solid var(--vb-accent-line);border-radius:var(--vb-r2);background:var(--vb-accent-soft)}
.vb-summary__t{display:block;margin-bottom:8px;font:700 13px/1.2 var(--vb-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--vb-accent-ink)}
.vb-summary :where(p,li){color:var(--vb-tx)}
/* callouts: blue = definition or tool, gold = number worth noticing or caution, red = warning */
.vb-callout{margin:24px 0;padding:16px 18px;border-radius:var(--vb-r1);border:1px solid var(--vb-b1);border-left-width:4px;background:var(--vb-s1);color:var(--vb-tx)}
.vb-callout--info{border-left-color:var(--vb-blue);background:var(--vb-blue-soft)}
.vb-callout--gold{border-left-color:var(--vb-gold);background:var(--vb-gold-soft)}
.vb-callout--warn{border-left-color:var(--vb-red);background:var(--vb-red-soft)}
.vb-callout :where(p){margin:0}
/* inline emphasis */
.vb-em{color:var(--vb-accent-ink);font-weight:700}
.vb-hi{color:var(--vb-gold);font-weight:700;font-variant-numeric:tabular-nums}
.vb-term{color:var(--vb-blue);font-weight:600}
mark.vb-mark{background:linear-gradient(transparent 62%,rgba(4,120,87,.22) 62%);color:inherit;padding:0 .1em}
/* figures */
.vb-fig{margin:32px 0}
.vb-fig img{display:block;width:100%;height:auto;border-radius:var(--vb-r2);border:1px solid var(--vb-b1)}
.vb-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--vb-tx2)}
/* tables */
.vb-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vb-table table{width:100%;border-collapse:collapse;font-size:15px}
.vb-table th{text-align:left;font-weight:600;color:var(--vb-tx);border-bottom:2px solid var(--vb-b2);padding:10px 12px}
.vb-table td{border-bottom:1px solid var(--vb-b1);padding:10px 12px;color:var(--vb-tx)}
.vb-table td.vb-r,.vb-table th.vb-r{text-align:right;font-variant-numeric:tabular-nums}
/* tool and calculator fields: label above, helper under, result dominant */
.vb-field{display:grid;gap:6px;margin-bottom:16px}
.vb-field>label{font:500 15px/1.3 var(--vb-font-body);color:var(--vb-tx)}
.vb-field>.vb-help{font-size:13px;line-height:1.45;color:var(--vb-tx2)}
.vb-result{border:1px solid var(--vb-accent-line);border-radius:var(--vb-r2);background:var(--vb-accent-soft);padding:20px 22px}
.vb-result__n{display:block;font:700 clamp(32px,5vw,48px)/1.05 var(--vb-font-display);color:var(--vb-accent);font-variant-numeric:tabular-nums}

/* ---- scroll reveal (script adds .vb-rv only to elements below the fold, then .vb-in) --------- */
.vb-rv{opacity:0;transform:translate3d(0,14px,0);transition:opacity .55s var(--vb-ease),transform .55s var(--vb-ease);transition-delay:var(--vb-d,0ms)}
.vb-rv.vb-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .vb-rv,.vb-rv.vb-in{opacity:1 !important;transform:none !important;transition:none !important}
  .vb-btn,.vb-card--hover{transition:none}
  .vb-btn:hover,.vb-card--hover:hover{transform:none}
}
@media (max-width:640px){
  .vb-btn{width:100%}
  .vb-stats{grid-template-columns:1fr 1fr}
}

/* ---- long-form reading polish for every article-shaped page (blog, guides, research) -------- */
body.vb-ds article :where(h2){margin-top:2.2em;padding-top:.9em;position:relative}
body.vb-ds article :where(h2)::before{content:"";position:absolute;top:0;left:0;width:36px;height:3px;border-radius:3px;background:var(--vb-accent)}
body.vb-ds article :where(ul,ol) > :where(li)::marker{color:var(--vb-accent);font-weight:700}
body.vb-ds article :where(blockquote){margin:32px 0;padding:4px 0 4px 20px;border-left:3px solid var(--vb-accent);font:600 clamp(19px,2.2vw,24px)/1.4 var(--vb-font-display);color:var(--vb-tx)}
body.vb-ds article :where(a):not([class]){text-decoration-thickness:1px;text-underline-offset:3px}
body.vb-ds article :where(table){border-collapse:collapse}
body.vb-ds article :where(th){background:var(--vb-s1);color:var(--vb-tx);font-weight:600}
body.vb-ds article :where(td,th){border-bottom:1px solid var(--vb-b1)}
body.vb-ds article :where(figure){margin:32px 0}
body.vb-ds article :where(figure) img{border-radius:var(--vb-r2)}
/* the blog filter chips grew 2px when the web font swapped in; reserve the final height up front */
body.vb-ds .journey-filter-btn{min-height:35px;box-sizing:border-box}

/* ---- review-board round 1 (ui-reviewer, 2026-10-14) ------------------------------------------ */
/* balanced headings, no one-word orphans */
body.vb-ds :where(h1,h2,h3){text-wrap:balance}
body.vb-ds :where(p,li){text-wrap:pretty}
/* form controls: a field edge needs 3:1 (WCAG 1.4.11); focus is accent with a soft ring */
body.vb-ds input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
body.vb-ds select,body.vb-ds textarea{border-color:#8a91a5}
body.vb-ds input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):focus,
body.vb-ds select:focus,body.vb-ds textarea:focus{border-color:var(--vb-accent);box-shadow:0 0 0 3px rgba(4,120,87,.18);outline:none}
body.vb-ds input[type=checkbox],body.vb-ds input[type=radio]{accent-color:#047857}
/* disabled buttons read as disabled, not as a washed-out green block */
body.vb-ds button:disabled,body.vb-ds input[type=submit]:disabled{background:var(--vb-s3);border-color:var(--vb-b2);color:var(--vb-tx3);opacity:1;cursor:not-allowed;box-shadow:none}
/* range sliders: a visible track (3:1 for the control, accent thumb) */
body.vb-ds input[type=range]{accent-color:#047857}
body.vb-ds input[type=range]::-webkit-slider-runnable-track{background:#b9bfce}
body.vb-ds input[type=range]::-moz-range-track{background:#b9bfce}
@media (max-width:640px){
  body.vb-ds .journey-filter-btn{min-height:44px}
  body.vb-ds :where(form,.card,.panel,main) :where(select,input[type=text],input[type=email],input[type=tel],input[type=number]){min-height:44px;box-sizing:border-box}
}

/* keyboard focus is the same emerald ring everywhere, including pages whose own rule sets a thin outline */
body.vb-ds :where(a,button,input,select,textarea,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--vb-accent) !important;outline-offset:2px !important}
@media print{
  body.vb-ds{background-image:none !important}
  .vb-rv,.vb-rv.vb-in{opacity:1 !important;transform:none !important}
}

/* ---- the one site footer (vb_design.js siteFooterHtml) ------------------------------------------- */
footer.vbf{display:block;margin:64px 0 0;padding:0;background:#fff;border-top:1px solid var(--vb-b1);text-align:left;color:var(--vb-tx2);font:400 14px/1.5 var(--vb-font-body);box-sizing:border-box}
footer.vbf .vbf-in{max-width:1120px;margin:0 auto;padding:44px clamp(16px,4vw,32px) 36px;box-sizing:border-box}
footer.vbf .vbf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
footer.vbf .vbf-col{display:flex;flex-direction:column;gap:4px}
footer.vbf .vbf-h{font:600 13px/1.2 var(--vb-font-display);color:var(--vb-tx);margin-bottom:8px;letter-spacing:.02em}
footer.vbf a{display:inline-block;color:var(--vb-tx2);text-decoration:none;padding:5px 0;font-size:14px}
footer.vbf a:hover{color:var(--vb-accent);text-decoration:underline}
footer.vbf .vbf-extras{margin-top:28px;padding-top:20px;border-top:1px solid var(--vb-b1);font-size:13px;line-height:1.7;color:var(--vb-tx2)}
footer.vbf .vbf-base{margin-top:24px;padding-top:18px;border-top:1px solid var(--vb-b1);font-size:13px;color:var(--vb-tx3)}
@media (max-width:760px){footer.vbf .vbf-cols{grid-template-columns:1fr 1fr}footer.vbf a{padding:9px 0}}

/* native select chevrons: one consistent arrow (longhand properties so a page's own background shorthand cannot remove it) */
body.vb-ds select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5168' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:38px}
/* article scaffolding sits tight under the lead paragraph */
article .vb-stats{margin:22px 0 14px}
article .vb-summary{margin:14px 0 28px}
article .vb-checklist li a{color:var(--vb-tx);text-decoration:none;border-bottom:1px solid var(--vb-b2)}
article .vb-checklist li a:hover{color:var(--vb-accent);border-bottom-color:var(--vb-accent)}
article .vb-summary .vb-checklist{margin:12px 0 0}
article .vb-stats .vb-stat{padding:14px 18px}

/* ---- review-board round 2 ----------------------------------------------------------------------- */
/* anchor jumps clear the sticky header */
body.vb-ds :where(h2,h3)[id]{scroll-margin-top:88px}
/* footer: tap rows, left-aligned extras, readable strip */
footer.vbf a{min-height:0}
@media (max-width:760px){footer.vbf a{padding-block:12px}}
footer.vbf .vbf-extras>*{margin-left:0;margin-right:0;max-width:none;text-align:left}
footer.vbf .vbf-extras{text-align:left}
footer.vbf .vbf-extras .vb-aff-strip,footer.vbf .vbf-extras .vb-aff-strip *{font-size:13px}