/* Zspez shared design tokens · one file for every Zspez site (served same-origin at /_z/).
   Source: zspez.ai v2/v3 judged values. Orange is for action, focus and one emphasis mark only. */
@font-face{font-family:Inter;src:url(InterVariable-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  /* color */
  --z-bg:#0b0b0c; --z-surface:#141416; --z-surface-2:#1b1b1e; --z-tile:#232327;
  --z-line:rgba(255,255,255,.10); --z-line-2:rgba(255,255,255,.14); --z-field-line:rgba(255,255,255,.34);
  --z-ink:#ffffff; --z-ink-2:#e4e4e8; --z-body:#b4b4bb; --z-dim:#9e9e9e; --z-head-grey:#9e9e9e; --z-sample:#a9a9b0;
  --z-acc:#fd6d01; --z-acc-ink:#140700; --z-acc-soft:rgba(253,109,1,.13); --z-acc-hover:#ffb27a; --z-err:#ff8a7a; --z-ok:#7fd8a6;
  /* type: 12-step scale (display 128/104/72/64/48 + 34/24/19/16/14/12/11.5), min 11.5 */
  --z-font:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --z-t-128:128px; --z-t-104:104px; --z-t-72:72px; --z-t-64:64px; --z-t-48:48px; --z-t-34:34px; --z-t-24:24px; --z-t-19:19px; --z-t-16:16px; --z-t-14:14px; --z-t-12:12px; --z-t-11:11.5px;
  /* layout */
  --z-max:1440px; --z-pad:64px; --z-pad-m:20px; --z-col:91px; --z-gutter:20px; --z-r-tile:8px; --z-r-ctl:14px; --z-r-card:20px;
  /* motion */
  --z-ease:cubic-bezier(.16,1,.3,1); --z-dur:.7s; --z-stagger:.1s; --z-stroke:1.8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--z-bg);color:var(--z-ink);font-family:var(--z-font);font-feature-settings:"cv11" 1,"calt" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{text-wrap:balance;margin:0} p,li,dd{text-wrap:pretty} p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--z-acc);outline-offset:3px;border-radius:8px}
.z-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Part-of-Zspez bar / link */
.z-part{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--z-t-14);font-weight:560;color:var(--z-body)}
.z-part img{width:20px;height:20px}.z-part b{color:var(--z-ink);font-weight:650}
@media (hover:hover) and (pointer:fine){.z-part:hover b{color:var(--z-acc-hover)}}

/* product mark tile: 30x30, 8px radius, white line glyph */
.z-tile{width:30px;height:30px;border-radius:var(--z-r-tile);background:var(--z-tile);border:1px solid var(--z-line-2);display:grid;place-items:center;flex:none}
.z-tile svg{width:18px;height:18px;fill:none;stroke:var(--z-ink);stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round}

/* status badge: Live · Live demo · Early access · In use internally · Coming soon */
.z-badge{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:var(--z-t-11);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--z-body);padding:8px 12px;border-radius:999px;border:1px solid var(--z-line-2)}
.z-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}

/* buttons: hover animates a pseudo-element's opacity only */
.z-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--z-r-ctl);border:0;background:var(--z-acc);color:var(--z-acc-ink);font:650 16px/1 var(--z-font);letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 34px -10px rgba(253,109,1,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .5s var(--z-ease)}
.z-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s var(--z-ease);z-index:-1}
@media (hover:hover) and (pointer:fine){.z-btn:hover::after{opacity:1}}.z-btn:active{transform:translateY(1px)}
.z-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round}
.z-btn .z-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:z-rot .8s linear infinite}
.z-btn[aria-busy=true]{cursor:progress}.z-btn[aria-busy=true] .z-ic{display:none}.z-btn[aria-busy=true] .z-spin{display:block}
@keyframes z-rot{to{transform:rotate(360deg)}}
.z-btn-ghost{background:transparent;color:var(--z-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.z-btn-ghost::after{background:rgba(255,255,255,.06)}

/* NEXT Zmerge F10: .z-rv moved to site.css (coming-soon only); product sites use .rv/.stg from product.css */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}.z-btn .z-spin{animation:none;border-right-color:currentColor;opacity:.6}.js .z-lead[open],.z-done{animation:none!important}}
.z-btn[aria-busy=true]::after{opacity:0!important;transition:none!important}
/* NEXT engine parity: Linux WebKit doesn't auto-apply Inter's optical size axis (Chromium and Mac Safari do),
   so headings set ~4% wider there and line counts flip. Pin opsz to what auto sizing picks at these sizes. */
h1,h2,.big{font-variation-settings:"opsz" 32}
.lead,.intro{font-variation-settings:"opsz" 19}.host,.card p,.proof p{font-variation-settings:"opsz" 16}
@media (max-width:767px){.lead,.intro{font-variation-settings:"opsz" 16}}
