/* Forward Deployment site: the game's "Field olive" look (unit tray / main menu / R&D) with the glow recipe from src/ui/glow.css:
   ink border + hard lip, radial spotlight fill, pale inner rim, soft inner glow; white text with an even ink outline + drop. */
:root{
  --ink:#1e2230;
  --olt:1.5px 0 0 var(--ink),1.06px 1.06px 0 var(--ink),0 1.5px 0 var(--ink),-1.06px 1.06px 0 var(--ink),-1.5px 0 0 var(--ink),-1.06px -1.06px 0 var(--ink),0 -1.5px 0 var(--ink),1.06px -1.06px 0 var(--ink),1.5px 2.5px 0 var(--ink),1.06px 3.56px 0 var(--ink),0 4px 0 var(--ink),-1.06px 3.56px 0 var(--ink),-1.5px 2.5px 0 var(--ink);
  --olt-sm:.9px 0 0 var(--ink),.64px .64px 0 var(--ink),0 .9px 0 var(--ink),-.64px .64px 0 var(--ink),-.9px 0 0 var(--ink),-.64px -.64px 0 var(--ink),0 -.9px 0 var(--ink),.64px -.64px 0 var(--ink),.9px 1.4px 0 var(--ink),0 2.3px 0 var(--ink),-.9px 1.4px 0 var(--ink);
}
*{box-sizing:border-box}
html{background:#3f4822}
body{margin:0;min-height:100vh;color:#fff;font:500 17px/1.55 "Fredoka","Baloo 2",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(120% 70% at 50% 0%,#8a9550 0%,#5f6a33 50%,#3f4822 100%) fixed;
  box-shadow:inset 0 0 120px 10px rgba(30,34,48,.35)}
a{color:#ffe680}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

/* glow families */
.f-olive{--c0:#a3ad66;--c1:#8a9550;--c2:#5f6a33;--c3:#3f4822;--rim:rgba(247,246,216,.55);--in:rgba(230,232,170,.25)}
.f-slate{--c0:#b0c0dc;--c1:#8b9fc2;--c2:#6c80a6;--c3:#4a5c80;--rim:#c3d1ea;--in:rgba(200,214,240,.55)}
.f-slatedeep{--c0:#7f93b8;--c1:#5d7198;--c2:#3f5176;--c3:#29354f;--rim:rgba(195,209,234,.6);--in:rgba(150,172,214,.28)}
.f-bronze{--c0:#ffd9a8;--c1:#e8a964;--c2:#c27a3a;--c3:#8a4f1e;--rim:#ffe2bd;--in:rgba(255,215,170,.55)}
.f-gold{--c0:#fffbe2;--c1:#ffe680;--c2:#ffc93c;--c3:#e39812;--rim:#fff6c6;--in:rgba(255,246,200,.9)}
.f-cream{--c0:#fff;--c1:#fffbf3;--c2:#f8eedb;--c3:#e9d7b1;--rim:#fff;--in:rgba(255,255,255,.95)}
/* recipe */
.gl{border:3px solid var(--ink);
  background:radial-gradient(var(--sh,72% 66% at 50% 40%),var(--c0) 0%,var(--c1) 30%,var(--c2) 66%,var(--c3) 100%);
  box-shadow:var(--lip,0 4px 0 var(--ink)),inset 0 0 0 var(--rw,2px) var(--rim),inset 0 0 var(--gb,14px) var(--gs,4px) var(--in);
  outline:2px solid var(--ink);outline-offset:-1.75px}

/* header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
header.top a.brand{color:#fff;text-decoration:none;font-weight:600;font-size:19px;text-shadow:var(--olt-sm)}
nav{display:flex;gap:10px}
nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font-weight:500;font-size:15px;text-shadow:var(--olt-sm);--lip:0 3px 0 var(--ink);--gb:8px;--gs:2px}
nav a:hover{filter:brightness(1.08)}

/* hero */
.hero{text-align:center;padding:28px 0 20px}
.hero img.logo{width:min(520px,92%);height:auto;filter:drop-shadow(0 10px 16px rgba(30,34,48,.45))}
.hero p{font-size:clamp(18px,2.6vw,22px);font-weight:500;line-height:1.45;max-width:640px;margin:14px auto 26px;color:#fff;text-shadow:var(--olt)}
.badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:14px;color:#fff;font-weight:500;font-size:17px;letter-spacing:.01em;text-decoration:none;text-shadow:var(--olt-sm);--sh:78% 72% at 50% 36%}

/* feature tiles */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:36px 0 44px}
.features div{border-radius:16px;padding:18px 18px 20px;--sh:110% 70% at 50% 0%}
.features h3{margin:0 0 8px;font-size:21px;font-weight:600;line-height:1.15;color:#fff;text-shadow:var(--olt)}
.features p{margin:0;font-size:15.5px;font-weight:400;color:#eef2fa;text-shadow:0 1px 0 rgba(30,34,48,.6)}

/* document pages (privacy / support): a cream glow panel so long text stays easy to read */
.doc{border-radius:18px;padding:26px 26px 30px;margin:20px 0 44px;color:var(--ink);--sh:120% 90% at 50% 0%;--gb:18px;--gs:6px}
.doc h1{margin:0 0 6px;font-size:32px;font-weight:600;line-height:1.1;color:#fff;text-shadow:var(--olt)}
.doc h2{font-size:20px;font-weight:600;margin:1.6em 0 .4em;color:#4a5530}
.doc p,.doc li{font-weight:400;font-size:16.5px}
.doc a{color:#1b55c6}
.muted{opacity:.7}

footer{border-top:2px solid rgba(30,34,48,.35);padding:20px 0 40px;color:#eef0cf;font-size:14px;font-weight:400;text-shadow:0 1px 0 rgba(30,34,48,.6)}
footer a{color:#eef0cf}

@media (max-width:520px){
  header.top{flex-wrap:wrap}
  .badge{width:100%;justify-content:center}
  .doc{padding:20px 18px 24px}
}