/* XCypher shared styles: tokens, fonts, header/nav, footer, utilities */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:italic;font-display:swap;src:url(fonts/barlow-condensed-800-italic.woff2) format('woff2')}
@font-face{font-family:'Anton';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Teko';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/teko-700.woff2) format('woff2')}

:root{
 --gold:#E8B330;--gold-hi:#F6CD5B;--gold-lo:#B8861B;--gold-ink:#111;
 --ink:#070707;--ink-2:#0c0c0c;--ink-3:#121212;--line:#222;
 --text:#f2f2f2;--muted:#bdbdbd;--muted-2:#a9a9a9;
 --silver:#d9dde2;--crimson:#e0344f;--blue:#2f8cff;--volt:#c8ff3d;
 --focus:#E8B330;
 --font-body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font:16px/1.6 var(--font-body)}
img{max-width:100%}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#111;font:700 15px/1 var(--font-body);padding:12px 16px;border-radius:8px;text-decoration:none}
.skip:focus,.skip:focus-visible{top:12px;outline:3px solid #fff;outline-offset:2px}

/* shared header + nav: dark on every page, standalone X icon only */
.site-header{background:#070707;border-bottom:1px solid #1c1c1c;color:#f2f2f2;position:relative;z-index:20}
.site-nav{max-width:1280px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.site-nav .brand{display:inline-flex;align-items:center;border-radius:10px;flex:none}
.site-nav .brand img{width:46px;height:auto;display:block}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0;padding:0}
.site-nav ul a{display:inline-block;font:600 15px/1 var(--font-body);color:#d0d0d0;text-decoration:none;padding:11px 14px;border-radius:999px;border:1.5px solid transparent}
.site-nav ul a:hover{color:#fff;border-color:#3a3a3a}
.site-nav ul a[aria-current="page"]{color:#111;background:var(--gold);border-color:var(--gold)}
.site-header :focus-visible{outline-color:var(--gold)}
@media(max-width:600px){
 .site-nav{padding:10px 14px;gap:8px}
 .site-nav .brand img{width:38px}
 .site-nav ul{gap:4px}
 .site-nav ul a{font-size:14px;padding:10px 11px}
}

/* shared footer */
.site-footer{background:#070707;color:#a9a9a9;border-top:1px solid #1c1c1c;font:14px/1.6 var(--font-body)}
.site-footer p{max-width:1280px;margin:0 auto;padding:32px;text-align:center}

/* small "Example" label for product-UI example data */
.example-tag{display:inline-block;font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;border:1px solid currentColor;flex:none}

/* early access "coming soon" panel (no form, no backend) */
.soon{display:grid;gap:10px;justify-items:start}
.soon .soon-btn{font:700 16px/1 var(--font-body);padding:16px 26px;border-radius:999px;border:2px dashed currentColor;background:transparent;color:inherit;cursor:not-allowed}
.soon .soon-note{font-size:14px;margin:0}

/* motion */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Wordmark brand band: end of main, never with the X icon */
.brand-band{background:#0d0e11;color:#c3c6cd;border-top:1px solid #23252b}
.brand-band .wrapb{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:56px 32px;flex-wrap:wrap}
.brand-band img{width:240px;height:auto;display:block}
.brand-band p{margin:0;font-size:16px;max-width:420px;line-height:1.55}
@media(max-width:600px){.brand-band .wrapb{padding:44px 20px}.brand-band img{width:200px}}