/* Community Munitions Network public site. Colors and type from the CMN design system. */
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#0A1424;--bg-band:#0C182B;--surface:#13223A;--border:#22385A;--border-strong:#3A5680;
  --fg:#EAF1FB;--fg-muted:#8FA3BF;--accent:#4D7CF6;--accent-fg:#FFFFFF;--highlight:#2CC8E8;
  --brass:#C9A45C;--success:#5FD3A0;--danger:#FF8A80;
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--highlight)}a:hover{color:var(--fg)}
:focus-visible{outline:3px solid var(--highlight);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--fg-muted)}
.eyebrow{margin:0;font-family:var(--display);font-size:13px;line-height:18px;font-weight:500;letter-spacing:.32em;color:var(--highlight);text-transform:uppercase}
h1,h2,h3{margin:0}
.h2{font-family:var(--display);font-size:clamp(32px,4vw,44px);line-height:1.14;font-weight:600}
.h3{font-size:18px;line-height:26px;font-weight:600}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--fg);padding:8px 12px;border-radius:6px;z-index:20}
.skip:focus{left:8px}

/* Header: clear at the top, frosted once the page scrolls. The small shield shows once a
   quarter of the hero logo is out of sight (app.js sets the classes). */
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.site-header.scrolled{background:rgba(10,20,36,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--border)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.navmark{display:flex;align-items:center;min-height:44px;opacity:0;transform:translateY(-6px) scale(.85);pointer-events:none;transition:opacity .22s,transform .22s}
.navmark img{height:40px;width:auto;display:block}
.show-mark .navmark{opacity:1;transform:none;pointer-events:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:14px;font-weight:600}
.nav a{color:var(--fg-muted);text-decoration:none}
.nav a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--accent-fg)!important;font-weight:600;text-decoration:none;border:0;font:inherit;font-weight:600;cursor:pointer}
.btn-lg{min-height:48px;padding:0 28px}
.btn-glow{box-shadow:0 0 32px rgba(44,200,232,.35)}
.edge{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(160deg,rgba(44,200,232,.55),rgba(34,56,90,.9) 40%,rgba(34,56,90,.9)) border-box}
.btn-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;color:var(--fg);font-weight:600;text-decoration:none}

/* Hero */
.hero{position:relative;overflow:hidden;margin-top:-73px;padding-top:73px}
.grid-bg{background-image:linear-gradient(rgba(77,124,246,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(77,124,246,.08) 1px,transparent 1px);background-size:40px 40px}
.fade{-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%)}
.layer{position:absolute;inset:0}
.glow{position:absolute;left:50%;top:120px;width:900px;height:900px;margin-left:-450px;border-radius:50%;background:radial-gradient(circle,rgba(44,200,232,.2) 0%,rgba(77,124,246,.1) 35%,rgba(10,20,36,0) 70%)}
.mesh{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;max-width:1040px;margin:0 auto;padding:72px 24px 96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px}
.brand .shield{height:200px;width:auto;filter:drop-shadow(0 0 32px rgba(44,200,232,.35))}
.brand .rule{width:2px;height:150px;background:linear-gradient(var(--brass),rgba(201,164,92,0))}
.brand .wordmark{height:150px;width:auto}
.hero h1{font-family:var(--display);font-size:clamp(40px,6.4vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.02em;max-width:920px}
.lead{font-size:20px;line-height:30px;max-width:640px}
.hero .eyebrow{margin-top:8px}
.hero .note{font-size:14px;line-height:22px;color:var(--fg-muted)}
@media (max-width:640px){.brand .shield{height:128px}.brand .rule{display:none}.brand .wordmark{height:96px}.hero-inner{padding-top:48px}}

/* Ticker */
.ticker{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--bg-band)}
.track{display:flex;width:max-content;animation:ticker 40s linear infinite;font-family:var(--display);font-size:13px;line-height:18px;letter-spacing:.32em;color:var(--fg-muted);padding:18px 0}
.track span.set{display:flex;gap:48px;padding-right:48px;white-space:nowrap}
.track b{color:var(--brass);font-weight:400}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.node{animation:pulse 4s ease-in-out infinite}.node.d2{animation-delay:1.3s}.node.d3{animation-delay:2.6s}
.floaty{animation:floaty 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.node,.track,.floaty{animation:none}html{scroll-behavior:auto}}

/* Sections */
.section{border-top:1px solid var(--border);position:relative}
.section.band{background:var(--bg-band)}
.section .wrap{position:relative;padding-top:96px;padding-bottom:96px}
#top-sentinel{height:1px;margin-bottom:-1px}
.stack{display:flex;flex-direction:column;gap:16px;max-width:720px}
.gap48{display:flex;flex-direction:column;gap:48px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.icon{width:44px;height:44px;border-radius:12px;background:rgba(44,200,232,.1);border:1px solid rgba(44,200,232,.3);display:flex;align-items:center;justify-content:center}
.tag{font-family:var(--mono);font-size:14px;line-height:20px;font-weight:500;color:var(--brass)}

/* Waitlist */
.join{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.join .copy{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:16px}
.panel{display:flex;flex-direction:column;justify-content:center;flex:1 1 360px;min-width:0;border-radius:16px;padding:32px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px rgba(0,0,0,.35)}
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;line-height:20px;font-weight:600}
.field input,.field select{height:44px;padding:0 12px;background:var(--bg);color:var(--fg);border:1px solid var(--border-strong);border-radius:6px;font:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.small{font-size:14px;line-height:22px}
.status{min-height:22px}
.status.err{color:var(--danger)}
.done h2{color:var(--success)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--brass);border-radius:2px}

/* Figures */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.section .wrap.figures{padding-top:72px;padding-bottom:72px}
.eyebrow.muted{color:var(--fg-muted);font-size:12px}
.num{font-family:var(--display);font-size:72px;line-height:1;font-weight:700;letter-spacing:-.02em;background:linear-gradient(120deg,#2CC8E8,#4D7CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig{display:flex;flex-direction:column;gap:8px}

/* How it works */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.step{border-radius:16px;padding:24px 28px;display:flex;gap:20px;align-items:flex-start}
.step .tag{line-height:26px}
.ledger{border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px;font-family:var(--mono);font-size:14px;line-height:20px}
.ledger .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ledger .hd{color:var(--fg-muted);letter-spacing:.12em}
.pill{display:inline-flex;align-items:center;gap:6px;color:var(--success);border:1px solid rgba(95,211,160,.4);border-radius:999px;padding:2px 10px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
.ledger hr{border:0;border-top:1px solid var(--border);margin:0;width:100%}
.ledger dl{display:grid;grid-template-columns:120px 1fr;gap:12px;margin:0}
.ledger dt{color:var(--fg-muted)}.ledger dd{margin:0}
.ledger .cap{font-family:var(--body);color:var(--fg-muted)}

/* Privacy, partners */
.split{display:flex;flex-wrap:wrap;gap:48px}
.split>*{flex:1 1 420px;min-width:0}
.partners-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg-band)}
.site-footer .wrap{padding-top:56px;padding-bottom:32px;display:flex;flex-direction:column;gap:40px}
.foot{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.foot .brandcol{flex:1 1 280px;display:flex;flex-direction:column;gap:16px}
.foot .brandcol img{height:56px;width:auto;align-self:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:56px;font-size:14px;line-height:22px}
.foot nav div{display:flex;flex-direction:column;gap:10px}
.foot nav span{font-family:var(--display);font-size:12px;letter-spacing:.24em;color:var(--fg)}
.foot nav a{color:var(--fg-muted);text-decoration:none}
.foot nav a:hover{color:var(--fg)}
.copyright{border-top:1px solid var(--border);padding-top:20px;font-size:14px;line-height:22px;color:var(--fg-muted)}

/* Plain document pages (privacy notice, 404) */
.doc{max-width:760px;margin:0 auto;padding:64px 24px 96px;display:flex;flex-direction:column;gap:20px}
.doc h1{font-family:var(--display);font-size:clamp(32px,4vw,44px);line-height:1.14;font-weight:600}
.doc h2{font-family:var(--display);font-size:22px;line-height:28px;font-weight:600;margin-top:16px}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc-header .navmark{opacity:1;transform:none;pointer-events:auto}
@media (max-width:640px){.nav{gap:16px}.nav a:not(.btn){display:none}.site-header .wrap{flex-wrap:nowrap}}