/* Payzilla design tokens (single source) and primitives. Dark is primary; light is the toggle.
   Load order: tokens.css, site.css, next.css, v5/system.css, v6/*.css. */
/* Section header tint (next.css .show band) */
:root{--ink:#0E1726;--ink-t:#F2F0EA;--ink-t2:#B6BFCC;--ink-ln:rgba(255,255,255,.16)}
:root[data-theme="dark"]{--ink:#19222F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#19222F}}

/* Colour, type, space, motion. Dark is the base (also the no-JS fallback); light overrides it. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  --bg0:#07090D;   /* page: near-black, a touch blue */
  --bg1:#0C1018;   /* alternate band */
  --bg2:#121824;   /* card / raised */
  --bg3:#192131;   /* chip, code, hover */
  --t1:#F4F5F7;    /* headings, key text */
  --t2:#B7BFCC;    /* body */
  --t3:#8E98AA;    /* captions, labels (AA on every bg) */
  --acc:#8DB2FF;   /* signal blue: ring + dot of the logo */
  --acc-hi:#B8CEFF;
  --on-acc:#07090D;--on-bad:#07090D;
  --acc-soft:rgba(141,178,255,.10);
  --acc-line:rgba(141,178,255,.42);
  --ok:#5FD9A5;   --ok-soft:rgba(95,217,165,.12);
  --warn:#F2BB52; --warn-soft:rgba(242,187,82,.12);
  --bad:#FF9189;  --bad-soft:rgba(255,145,137,.12);
  --ln1:rgba(255,255,255,.07);
  --ln2:rgba(255,255,255,.13);
  --ln3:rgba(255,255,255,.44);   /* control borders: >= 3:1 on bg0 to bg3 */
  --shadow:0 24px 48px -24px rgba(0,0,0,.75);
  --glow:rgba(141,178,255,.09);
  --r1:4px;--r2:8px;--r3:12px;--r4:18px;
  /* new */
  --acc2:#B9A4FF;                       /* violet partner for gradients only, never for text on its own */
  --grad-acc:linear-gradient(135deg,#8DB2FF 0%,#B9A4FF 100%);
  --grad-text:linear-gradient(100deg,#F4F5F7 20%,#8DB2FF 75%,#B9A4FF 100%);
  --grad-aura:radial-gradient(60% 50% at 50% 0%,rgba(141,178,255,.16),transparent 70%);
  --grad-edge:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%);
  --hdr-bg:rgba(7,9,13,.72);
  --elev-1:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.5);
  --elev-2:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -22px rgba(0,0,0,.8);
  --elev-glow:0 0 0 1px var(--acc-line),0 12px 40px -12px rgba(141,178,255,.35);
  --code-bg:#0A0E15;
  /* Signal palette for the Z-route visuals (v6, diagram): blue start, green end, plus status lines. */
  --sig:#8CB0FF;--sig-ok:#5CD6A0;--on-sig:#07090D;
  --sig-rgb:140 176 255;--sig-ok-rgb:92 214 160;--sig-bad-rgb:255 107 107;--sig-warn-rgb:255 196 87;
  --ln-ok:rgb(var(--sig-ok-rgb)/.5);--ln-ok-lo:rgb(var(--sig-ok-rgb)/.4);--ln-ok-mid:rgb(var(--sig-ok-rgb)/.55);--ln-ok-hi:rgb(var(--sig-ok-rgb)/.6);
  --ln-warn:rgb(var(--sig-warn-rgb)/.5);--ln-warn-lo:rgb(var(--sig-warn-rgb)/.4);--ln-warn-hi:rgb(var(--sig-warn-rgb)/.6);
  --ln-bad:rgb(var(--sig-bad-rgb)/.55);
  --aura-blue:rgba(60,110,255,.26);--aura-green:rgba(92,214,160,.12);
  --win-shadow:0 30px 80px rgba(0,0,0,.4),0 0 60px rgba(140,176,255,.1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg0:#F8F8F5;--bg1:#EFEEE9;--bg2:#FFFFFF;--bg3:#F3F2EE;
  --t1:#0B1220;--t2:#364154;--t3:#566176;
  --acc:#1B46C2;--acc-hi:#12358F;--on-acc:#FFFFFF;--on-bad:#FFFFFF;
  --acc-soft:rgba(27,70,194,.07);--acc-line:rgba(27,70,194,.38);
  --ok:#0F6446;--ok-soft:rgba(15,100,70,.09);
  --warn:#7F4F00;--warn-soft:rgba(127,79,0,.10);
  --bad:#AE241C;--bad-soft:rgba(174,36,28,.08);
  --ln1:rgba(11,18,32,.08);--ln2:rgba(11,18,32,.15);--ln3:rgba(11,18,32,.52);
  --shadow:0 20px 40px -24px rgba(11,18,32,.25);
  --glow:rgba(27,70,194,.07);
  --acc2:#6B3FD4;
  --grad-acc:linear-gradient(135deg,#1B46C2 0%,#6B3FD4 100%);
  --grad-text:linear-gradient(100deg,#0B1220 25%,#1B46C2 80%);
  --grad-aura:radial-gradient(60% 50% at 50% 0%,rgba(27,70,194,.10),transparent 70%);
  --grad-edge:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%);
  --hdr-bg:rgba(248,248,245,.80);
  --elev-1:0 1px 2px rgba(11,18,32,.08);
  --elev-2:0 1px 0 #fff inset,0 16px 36px -22px rgba(11,18,32,.28);
  --elev-glow:0 0 0 1px var(--acc-line),0 12px 32px -14px rgba(27,70,194,.30);
  --code-bg:#F1F0EB;
  /* Signal palette, light: >= 4.5:1 as text and >= 3:1 as lines on #F8F8F5 and white. */
  --sig:#2F57D8;--sig-ok:#1A7550;--on-sig:#FFFFFF;
  --sig-rgb:47 87 216;--sig-ok-rgb:26 117 80;--sig-bad-rgb:174 36 28;--sig-warn-rgb:127 79 0;
  --ln-ok:rgb(var(--sig-ok-rgb)/.75);--ln-ok-lo:rgb(var(--sig-ok-rgb)/.75);--ln-ok-mid:rgb(var(--sig-ok-rgb)/.75);--ln-ok-hi:rgb(var(--sig-ok-rgb)/.75);
  --ln-warn:rgb(var(--sig-warn-rgb)/.75);--ln-warn-lo:rgb(var(--sig-warn-rgb)/.75);--ln-warn-hi:rgb(var(--sig-warn-rgb)/.75);
  --ln-bad:rgb(var(--sig-bad-rgb)/.75);
  --aura-blue:rgba(47,87,216,.12);--aura-green:rgba(26,117,80,.08);
  --win-shadow:0 24px 60px -24px rgba(11,18,32,.3),0 0 48px rgba(47,87,216,.06);
  color-scheme:light;
}
/* If the OS prefers dark and the visitor has not chosen light, tokens.css sets its own dark
   values with higher specificity than a bare :root. The two blocks above already repeat the
   same selectors, so v5 values win because this file loads last. */
:root{
  /* Type families (system stack only: no custom font ships) */
  --sans:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:ui-sans-serif,system-ui,-apple-system,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* Fluid type scale (320px to 1440px) */
  --fs-display:clamp(2.75rem,1.35rem + 6vw,6.25rem);
  --fs-h1:clamp(2.375rem,1.4rem + 4.1vw,4.5rem);
  --fs-h2:clamp(1.875rem,1.3rem + 2.5vw,3.25rem);
  --fs-h3:clamp(1.3125rem,1.12rem + .8vw,1.75rem);
  --fs-h4:1.125rem;
  --fs-lead:clamp(1.125rem,1.02rem + .45vw,1.375rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.75rem;
  /* Spacing scale (4px base) and section rhythm */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --sp-sec:clamp(64px,8vw,128px);       /* overrides the old, tighter value */
  --sp-sec-sm:clamp(40px,5vw,72px);
  --grad-start:var(--sig);--grad-end:var(--sig-ok);--pkt:var(--sig);   /* gradient ends and packet glow follow the signal pair */
  --measure:62ch;
  --wrap:1200px;--gut:clamp(20px,4.5vw,48px);
  /* Motion: restrained. Durations and one easing. */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:120ms;--dur-2:200ms;--dur-3:360ms;--dur-4:700ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg0);color:var(--t2);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--t1);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--acc-hi)}
code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--acc);color:var(--on-acc);padding:10px 16px;border-radius:var(--r1);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
::selection{background:var(--acc);color:var(--on-acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--t1);text-decoration:none;line-height:0}
.brand:hover{color:var(--t1)}
.brand-mark{width:34px;height:34px}
.brand-wm{width:73px;height:21px;fill:currentColor}
.m-z{fill:var(--t1)}.m-ring{fill:var(--ring-fill,none);stroke:var(--acc);stroke-width:2.6}.m-dot{fill:var(--acc)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r2);border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:hover{background:var(--acc-hi);border-color:var(--acc-hi);color:var(--on-acc)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--t1);border-color:var(--ln3)}
.btn.ghost:hover{background:var(--acc-soft);border-color:var(--acc);color:var(--t1)}
.btn.sm{min-height:44px;padding:0 14px;font-size:.9375rem;border-radius:var(--r1)}
.btn svg{width:16px;height:16px;flex:none}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r2);border:1px solid var(--ln3);background:transparent;color:var(--t1);cursor:pointer}
.iconbtn:hover{background:var(--acc-soft);border-color:var(--acc)}
.iconbtn svg{width:18px;height:18px}
.theme .sun{display:none}
.theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
.copy{min-height:44px;padding:0 12px;border-radius:var(--r1);border:1px solid var(--ln3);background:transparent;color:var(--t1);font-size:.875rem;font-weight:500;cursor:pointer}
.copy:hover{background:var(--acc-soft);border-color:var(--acc)}
[data-copy]{display:none}
.js [data-copy]{display:inline-block}

/* pills */
.pill{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--ln2);background:var(--bg3);color:var(--t2);font-size:.8125rem;font-weight:500;line-height:1;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.pill.ok::before{background:var(--ok)}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.pill.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.pill.acc{color:var(--acc);background:var(--acc-soft);border-color:transparent}
.pill.prog::before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.pill.pend::before{background:transparent;border:2px dotted currentColor}
.pill.plain::before{display:none}

@media (max-width:359px){.brand-wm{display:none}.brand-mark{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}