/* Anti-Spam v2 tokens, dark only. Ported from docs/design/system-v2/tokens/*.css. Fonts are self-hosted in /fonts. */
@font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* == colors == */
:root{
color-scheme:dark;
/* Ion cyan — the one brand accent */
--cyan-50:#ecfaff;--cyan-100:#d2f3ff;--cyan-200:#a9e9ff;--cyan-300:#7ee0ff;--cyan-400:#5ad8ff;--cyan-500:#2fc3ef;--cyan-600:#1aa0cc;--cyan-700:#147ca0;--cyan-800:#105a74;--cyan-900:#0b3a4b;--cyan-950:#06212b;
/* Void — blue-black neutrals, darkest first */
--void-0:#040508;--void-50:#07090d;--void-100:#0b0e14;--void-200:#10141c;--void-300:#151a24;--void-400:#1c2230;--void-500:#272f40;--void-600:#3b4558;--void-700:#5f6a7c;--void-800:#8c97a8;--void-900:#bcc5d1;--void-950:#e8edf3;
/* Status */
--coral-300:#ffa0a8;--coral-400:#ff6b78;--coral-500:#f2475a;--coral-600:#c93246;
--mint-300:#93f1c9;--mint-400:#4fe3a5;--mint-500:#25c487;--mint-600:#169a68;
--amber-300:#ffd37e;--amber-400:#ffb547;--amber-500:#f09a1a;
--violet-400:#a594ff;

/* Surfaces */
--bg:var(--void-50);--bg-marketing:var(--void-0);--surface:var(--void-100);--surface-raised:var(--void-200);--surface-sunken:#090b10;--surface-hover:var(--void-300);--surface-code:#05070a;--surface-inverse:var(--void-950);
--surface-glass:rgba(16,20,28,.62);--surface-overlay:rgba(13,16,23,.78);
/* Text */
--text:#d3dae4;--text-strong:#f4f7fb;--text-muted:#98a3b4;--text-subtle:#8190a4;--text-inverse:#05070a;--text-code:#d3dae4;--text-link:var(--cyan-300);--text-link-hover:var(--cyan-100);
/* Borders — white at low alpha */
--border:rgba(255,255,255,.08);--border-subtle:rgba(255,255,255,.05);--border-strong:rgba(255,255,255,.14);--border-input:rgba(255,255,255,.16);--border-focus:var(--cyan-400);
/* Actions */
--primary:var(--cyan-400);--primary-hover:var(--cyan-300);--primary-press:var(--cyan-500);--primary-soft:rgba(90,216,255,.10);--primary-soft-border:rgba(90,216,255,.28);--on-primary:#03141c;
--danger:var(--coral-400);--danger-hover:var(--coral-300);--danger-soft:rgba(255,107,120,.10);--danger-border:rgba(255,107,120,.30);--danger-text:var(--coral-300);--on-danger:#1c0509;
--success:var(--mint-400);--success-soft:rgba(79,227,165,.10);--success-border:rgba(79,227,165,.28);--success-text:var(--mint-300);--success-strong:var(--mint-300);
--warn:var(--amber-400);--warn-soft:rgba(255,181,71,.10);--warn-border:rgba(255,181,71,.30);--warn-text:var(--amber-300);
--info-soft:var(--primary-soft);--info-border:var(--primary-soft-border);--info-text:var(--cyan-200);
/* Verdicts — coral = spam, mint = clean, amber = limited. Never decorative. */
--spam:var(--coral-400);--spam-soft:var(--danger-soft);--clean:var(--mint-400);--clean-soft:var(--success-soft);--limited:var(--amber-400);
/* Solid 2px cyan: at least 3:1 against every surface (WCAG 1.4.11, 2.4.13). Never a translucent ring. */
--focus-ring:0 0 0 2px var(--border-focus);
}

/* == typography == */
:root{
--font-display:"Space Grotesk","Geist",ui-sans-serif,system-ui,sans-serif;
--font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--text-2xs:.75rem;   /* 12 */
--text-xs:.8125rem;  /* 13 */
--text-sm:.875rem;   /* 14 */
--text-md:.9375rem;  /* 15 */
--text-base:1rem;    /* 16 */
--text-lg:1.125rem;  /* 18 */
--text-xl:1.375rem;  /* 22 */
--text-2xl:1.875rem; /* 30 */
--text-3xl:2.5rem;   /* 40 */
--text-4xl:3.25rem;  /* 52 */
--text-5xl:4.5rem;   /* 72 */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--leading-tight:1.05;--leading-snug:1.2;--leading-normal:1.55;--leading-relaxed:1.7;
--tracking-display:-.04em;--tracking-heading:-.025em;--tracking-normal:0;--tracking-caps:.12em;
/* One number style (handoff v2 section 2.5): stat values, plan amounts, the ring value, site card figures */
--type-figure:var(--weight-regular) 2rem/1 var(--font-display);
--type-figure-sm:var(--weight-regular) 1.5rem/1 var(--font-display);
--type-hero:var(--weight-medium) var(--text-5xl)/1 var(--font-display);
--type-display:var(--weight-medium) var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-medium) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h2:var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-display);
--type-body:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
--type-label:var(--weight-medium) var(--text-sm)/1.4 var(--font-sans);
--type-eyebrow:var(--weight-medium) var(--text-2xs)/1.3 var(--font-mono);
--type-code:var(--weight-regular) .8125rem/1.65 var(--font-mono);
}

/* == spacing == */
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--container:1160px;--container-narrow:720px;--container-app:1160px;--header-h:64px;
--control-h-sm:30px;--control-h-md:38px;--control-h-lg:48px;
--gutter:clamp(16px,4vw,32px);/* @kind spacing */
--bp-sm:640px;--bp-md:900px;
}

/* == effects == */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:22px;--radius-pill:999px;
/* Elevation on dark: deep black shadows + a 1px top highlight. Borders do most of the separation. */
--shadow-xs:0 1px 2px rgba(0,0,0,.45);
--shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px -2px rgba(0,0,0,.45);
--shadow-md:0 2px 4px rgba(0,0,0,.35),0 12px 28px -6px rgba(0,0,0,.6);
--shadow-lg:0 4px 8px rgba(0,0,0,.35),0 24px 56px -12px rgba(0,0,0,.7);
--shadow-xl:0 8px 16px rgba(0,0,0,.4),0 40px 90px -20px rgba(0,0,0,.8);
--shadow-primary:0 0 0 1px rgba(90,216,255,.6),0 6px 20px -6px rgba(90,216,255,.55),inset 0 1px 0 rgba(255,255,255,.4);
--shadow-glow:0 0 0 1px rgba(90,216,255,.35),0 0 36px -6px rgba(90,216,255,.35);
--shadow-inset:inset 0 1px 2px rgba(0,0,0,.5);
--highlight-top:inset 0 1px 0 rgba(255,255,255,.05);/* @kind shadow */
--ease-out:cubic-bezier(.2,.8,.2,1);/* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--ease-spring:cubic-bezier(.34,1.3,.64,1);/* @kind other */
--dur-fast:120ms;/* @kind other */
--dur-base:180ms;/* @kind other */
--dur-slow:280ms;/* @kind other */
--dur-slower:520ms;/* @kind other */
--blur-glass:saturate(150%) blur(18px);/* @kind other */
--backdrop:rgba(2,3,6,.66);/* @kind color */
--hud-color:rgba(255,255,255,.28);/* @kind color */
--mesh-hero:radial-gradient(60% 50% at 70% 0%,rgba(90,216,255,.09),transparent 70%);/* @kind other */
--grid-lines:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);/* @kind other */
--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");/* @kind other */
}

/* == base == */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:var(--type-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 35%,transparent);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
code,kbd,pre{font-family:var(--font-mono)}
:not(pre)>code{font-size:.86em;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-xs);padding:.1em .38em;color:var(--text-strong)}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--border-strong);border-bottom-width:2px;background:var(--surface-raised);font-size:11px;color:var(--text-muted)}
::selection{background:rgba(90,216,255,.28);color:#fff}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
.as-num{font-variant-numeric:tabular-nums}
.as-muted{color:var(--text-muted)}
.as-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-subtle)}
.as-display{font-family:var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-strong)}
.as-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Atmosphere — marketing and hero panels only */
.as-mesh{background:var(--mesh-hero),var(--bg-marketing)}
.as-grid-bg{background-image:var(--grid-lines);background-size:48px 48px}
.as-grain{position:relative;isolation:isolate}
.as-grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.035;pointer-events:none;z-index:-1}
.as-glass{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg),var(--highlight-top)}
/* HUD corner brackets — key panels only (one or two per screen) */
.as-hud{position:relative}
.as-hud::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;z-index:1;
background:linear-gradient(var(--hud-color),var(--hud-color)) 0 0/9px 1px,linear-gradient(var(--hud-color),var(--hud-color)) 0 0/1px 9px,linear-gradient(var(--hud-color),var(--hud-color)) 100% 0/9px 1px,linear-gradient(var(--hud-color),var(--hud-color)) 100% 0/1px 9px,linear-gradient(var(--hud-color),var(--hud-color)) 0 100%/9px 1px,linear-gradient(var(--hud-color),var(--hud-color)) 0 100%/1px 9px,linear-gradient(var(--hud-color),var(--hud-color)) 100% 100%/9px 1px,linear-gradient(var(--hud-color),var(--hud-color)) 100% 100%/1px 9px;background-repeat:no-repeat}
/* Motion */
@keyframes as-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes as-fade-in{from{opacity:0}to{opacity:1}}
@keyframes as-scale-in{from{opacity:0;transform:scale(.97) translateY(4px)}to{opacity:1;transform:none}}
@keyframes as-slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes as-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes as-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes as-spin{to{transform:rotate(360deg)}}
@keyframes as-pulse{0%{box-shadow:0 0 0 0 rgba(90,216,255,.45)}100%{box-shadow:0 0 0 9px rgba(90,216,255,0)}}
@keyframes as-pulse-mint{0%{box-shadow:0 0 0 0 rgba(79,227,165,.5)}100%{box-shadow:0 0 0 8px rgba(79,227,165,0)}}
@keyframes as-scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes as-blink{50%{opacity:0}}
.as-reveal{animation:as-fade-up var(--dur-slower) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}

/* == additions for the EJS app == */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
main:focus{outline:none}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;padding:10px 16px;background:var(--surface-raised);color:var(--text-strong);border:1px solid var(--primary);border-radius:var(--radius-md);text-decoration:none;font:var(--type-label)}
.skip-link:focus{left:12px;top:12px}
.as-small{font-size:var(--text-xs)}
.as-lead{font-size:var(--text-lg);line-height:1.6;color:var(--text-muted)}