/* Shared variable fonts; each page retains its own sizes and weights. */
@font-face{font-family:Satoshi;src:url('/fonts/satoshi-variable-normal.woff2') format('woff2');font-style:normal;font-weight:300 900;font-display:swap}
@font-face{font-family:Satoshi;src:url('/fonts/satoshi-variable-italic.woff2') format('woff2');font-style:italic;font-weight:300 900;font-display:swap}
body{font-size:1.08rem}
/* Mobile: hero ghosts float behind the headline and copy, not over them. */
@media (max-width:640px){.pr-hero,.art-hero,.blog-hero{isolation:isolate}.pr-hero>.vghost,.art-hero>.vghost,.blog-hero>.vghost{z-index:-1}}
/* Step, index and count numbers sit one notch bolder than body copy, the same on every page. */
.flow-index a i,.flow-num,.rn,.reg-num,.pf-dot,.hc-topic-number,.sc-num,.fcount,.atl-chip span,.atl-note-k{font-weight:600!important}
.iwa-k b{font-weight:700!important}
/* Shopify App Store badge hidden until 2026-11-12. Delete these two lines to bring it back. */
.sf-cols a.sf-shopify{display:none!important}
/* ---- 2026-11-10 UX pass. This file loads before each page's own <style>, so these rules carry !important. ---- */
/* Phones keep the language switch (it used to be hidden with no other way to change language). */
@media (max-width:640px){.topnav .velo-langdd{display:block!important}.topnav .velo-langbtn{display:grid!important}}
/* Keyboard users can jump past the header. */
.skip-link{position:absolute;left:12px;top:-80px;z-index:400;background:var(--velo-ink,#231d2e);color:#fff;padding:12px 18px;border-radius:999px;font-size:16.2px;font-weight:500;text-decoration:none}
.skip-link:focus{top:12px}
/* Interior heroes stop at about two thirds of the screen so the first real section shows. The homepage hero (.hero) is untouched. */
.pr-hero{min-height:64vh!important;min-height:64svh!important}
/* Scroll fade-ins: half the old 0.7s, so a jump link never lands on faint content. */
.reveal{transition-duration:.35s!important}
/* Muted text reaches 4.5:1 on white and on the soft lilac (was 55% ink, 3.7:1). The token keeps its name. */
:root{--ink-55:rgba(35,29,46,.7)!important}
.site-foot .mono,.cmp-table .cmp-group th,.cmp-sub,.cmp-hint{color:rgba(35,29,46,.7)!important}
/* Links in section intros and around guide screenshots took the browser's default blue. */
.lede a,.guide-image-link{color:inherit}
/* The comparison table's "not published" dash was 42% ink. */
.cmp-dash{color:rgba(35,29,46,.62)!important}
/* Menu links are at least 44px tall for touch. */
.dock-pop{overflow-y:auto}
.dock-pop .pop-primary a{display:flex!important;align-items:center;min-height:44px}
.dock-pop .pop-secondary a{display:flex!important;align-items:center;min-height:40px}
.dock-pop .pop-login a{display:inline-block;padding:10px 4px}
/* Posts: the collapsible "On this page" list (markup and script from buzz/scripts/build-blog.py). */
.post-toc{margin:0 0 30px;border:1px solid rgba(35,29,46,.16);border-radius:14px;padding:0 18px}
.post-toc summary{cursor:pointer;padding:14px 0;font-size:16.2px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"";width:8px;height:8px;margin:0 4px 4px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.post-toc[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.post-toc ol{margin:0!important;padding:0 0 14px 1.3em!important}
.post-toc li{font-size:16.2px!important;line-height:1.5!important;margin-bottom:.5em!important}
.art-body h2{scroll-margin-top:24px}
/* Article text on phones: 17px on a 1.65 line, about 40 characters a line (was 20.5px on 36px). */
@media (max-width:640px){.art-body p,.art-body li{font-size:17.28px!important;line-height:1.65!important}}