/* ============================================================
   Wiiji site — shared design system
   Solarpunk field-station console. Forest palette + CRT scanlines
   + wire-glow, extending LHS lhs_branding. Used by every page.
   ============================================================ */

@font-face { font-family:'Orbitron'; src:url('fonts/Orbitron.woff2') format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Atkinson'; src:url('fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Atkinson'; src:url('fonts/AtkinsonHyperlegibleNext-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('fonts/plexmono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root{
  --bg:#0F1A10; --bg-2:#16241a; --panel:#1F2D27; --panel-2:#26382e;
  --forest:#344E41; --moss:#3A5A40; --leaf:#588157; --sage:#A3B18A;
  --parch:#DAD7CD; --amber:#C47A3D; --amber-bright:#E39B54;
  --wire:rgba(88,129,87,.45); --border:rgba(163,177,138,.20); --border-med:rgba(163,177,138,.34);
  --glow-soft:0 0 12px rgba(88,129,87,.20), 0 0 30px rgba(88,129,87,.08);
  --glow-med:0 0 18px rgba(88,129,87,.30), 0 0 44px rgba(88,129,87,.12);
  --glow-amber:0 0 16px rgba(196,122,61,.35), 0 0 40px rgba(196,122,61,.15);
  --text-glow:0 0 8px rgba(163,177,138,.5), 0 0 18px rgba(88,129,87,.35);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--parch); font-family:'Atkinson',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;}
body::before{content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(88,129,87,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(88,129,87,.035) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);}
body::after{content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(88,129,87,.035) 2px 3px);}
main,header,footer{position:relative; z-index:1}

h1,h2,h3,.orb{font-family:'Orbitron',sans-serif; color:var(--parch); letter-spacing:.02em; font-weight:700; line-height:1.14}
a{color:var(--sage); text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
.eyebrow{font-family:'PlexMono',monospace; font-size:12.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--sage); font-weight:500}
.mono{font-family:'PlexMono',monospace}
.amber{color:var(--amber-bright)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:'Orbitron',sans-serif; font-size:13.5px; letter-spacing:.06em;
  padding:13px 24px; border-radius:6px; border:1px solid transparent; cursor:pointer; text-transform:uppercase;
  transition:box-shadow .3s, transform .15s, background .2s, border-color .2s}
.btn-go{background:var(--amber); color:#1c1206; border-color:var(--amber)}
.btn-go:hover{box-shadow:var(--glow-amber); transform:translateY(-1px); background:var(--amber-bright)}
.btn-ghost{background:transparent; color:var(--parch); border-color:var(--border-med)}
.btn-ghost:hover{border-color:var(--wire); color:#fff; box-shadow:var(--glow-soft)}
.btn:focus-visible{outline:2px solid var(--sage); outline-offset:3px}

/* nav (identical on every page) */
header#top{position:sticky; top:0; z-index:20; background:rgba(15,26,16,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-med); box-shadow:0 1px 20px rgba(88,129,87,.10)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-family:'Orbitron',sans-serif; font-weight:700; font-size:20px; letter-spacing:.16em; color:var(--parch); text-shadow:var(--text-glow); display:flex; align-items:center; gap:.5em}
.brand small{font-family:'PlexMono',monospace; font-size:11px; letter-spacing:.18em; color:var(--sage); text-shadow:none; font-weight:500}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--leaf); box-shadow:0 0 10px var(--leaf); animation:pulse 3.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1; box-shadow:0 0 16px var(--leaf)}}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--parch); transition:color .2s, text-shadow .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--amber-bright); text-shadow:0 0 10px rgba(196,122,61,.4)}
.nav-links .btn{padding:9px 18px}
.nav-links .btn:hover{color:#1c1206}

/* mobile nav — hamburger toggle (button injected by site.js) */
.nav-toggle{display:none; background:transparent; border:1px solid var(--border-med); color:var(--parch);
  border-radius:6px; width:44px; height:40px; font-size:19px; line-height:1; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle:hover{border-color:var(--wire); box-shadow:var(--glow-soft)}
@media(max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(15,26,16,.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-med);
    box-shadow:0 12px 24px rgba(0,0,0,.35); padding:6px 24px 16px; display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 2px; border-bottom:1px solid var(--border); font-size:13px}
  .nav-links a:last-child{border-bottom:none}
  .nav-links .btn{margin-top:14px; justify-content:center; padding:13px 18px}
}

/* home hero — collapse to one column on mobile */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
@media(max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:32px} }

/* interior page header */
.page-hero{padding:58px 0 34px; border-bottom:1px solid rgba(88,129,87,.10); background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.page-hero h1{font-size:clamp(30px,4.4vw,46px); margin:.3em 0 .25em}
.page-hero p{color:var(--sage); font-size:19px; max-width:56ch; margin:0}
.crumb{font-family:'PlexMono',monospace; font-size:12px; letter-spacing:.06em; color:var(--sage)}
.crumb a{color:var(--sage)} .crumb a:hover{color:var(--amber-bright)}

/* sections */
section{padding:64px 0; border-top:1px solid rgba(88,129,87,.10)}
section.plain{border-top:none}
.sec-head{max-width:62ch; margin-bottom:38px}
.sec-head h2{font-size:clamp(24px,3.2vw,33px); margin:.3em 0}
.sec-head p{color:var(--sage); font-size:18px}

/* prose */
.prose p{margin:0 0 1.1em; max-width:68ch}
.prose h2{font-size:26px; margin:1.4em 0 .5em}
.prose h3{font-size:19px; margin:1.4em 0 .4em; color:var(--parch)}
.prose b,.prose strong{color:var(--sage); font-weight:400}
.prose ul{padding-left:0; list-style:none; max-width:68ch}
.prose ul li{padding:6px 0 6px 26px; position:relative}
.prose ul li::before{content:'▸'; position:absolute; left:2px; color:var(--leaf); text-shadow:0 0 8px rgba(88,129,87,.6)}
.lead{font-size:20px; color:var(--parch); max-width:60ch}

/* generic card grid */
.grid{display:grid; gap:22px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr} }
.card{border:1px solid var(--border); border-radius:12px; padding:26px 24px; background:var(--panel); position:relative;
  transition:box-shadow .3s, border-color .3s, transform .3s}
.card:hover{box-shadow:var(--glow-med); border-color:var(--wire); transform:translateY(-3px)}
.card .k{font-family:'PlexMono',monospace; font-size:12px; letter-spacing:.2em; color:var(--amber)}
.card h3{font-size:19px; margin:12px 0 8px}
.card p{color:var(--sage); font-size:15.5px; margin:0}
.card .art{font-family:'PlexMono',monospace; font-size:12.5px; color:var(--leaf); margin-top:16px; padding-top:14px; border-top:1px dashed var(--border)}

/* them-vs-us */
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch}
@media(max-width:760px){ .vs{grid-template-columns:1fr} .vs .vs-mid{display:none} }
.vs-card{border:1px solid var(--border); border-radius:10px; padding:24px; background:var(--panel)}
.vs-card h3{font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px}
.vs-card ul{list-style:none; margin:0; padding:0}
.vs-card li{padding:7px 0 7px 26px; position:relative; font-size:15.5px}
.vs-card.them{opacity:.72} .vs-card.them h3{color:#b9857a}
.vs-card.them li::before{content:'✕'; position:absolute; left:0; color:#b9857a}
.vs-card.us{border-color:var(--border-med); box-shadow:var(--glow-soft)} .vs-card.us h3{color:var(--amber-bright)}
.vs-card.us li::before{content:'▸'; position:absolute; left:2px; color:var(--leaf); text-shadow:0 0 8px rgba(88,129,87,.6)}
.vs-mid{display:flex; align-items:center; font-family:'Orbitron',sans-serif; color:var(--sage); font-size:13px; letter-spacing:.2em}

/* pricing tiers */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){ .tiers{grid-template-columns:1fr} }
.tier{border:1px solid var(--border); border-radius:12px; padding:28px 24px; background:var(--panel); display:flex; flex-direction:column; position:relative}
.tier.feat{border-color:var(--amber); box-shadow:var(--glow-amber)}
.tier .name{font-family:'Orbitron',sans-serif; letter-spacing:.06em; font-size:15px; color:var(--parch); text-transform:uppercase}
.tier .price{font-family:'Orbitron',sans-serif; font-size:34px; margin:14px 0 2px; color:var(--parch)}
.tier .price small{font-family:'PlexMono',monospace; font-size:13px; color:var(--sage); letter-spacing:.02em}
.tier.feat .price{color:var(--amber-bright); text-shadow:0 0 16px rgba(196,122,61,.3)}
.tier .who{color:var(--sage); font-size:14.5px; min-height:42px}
.tier ul{list-style:none; padding:0; margin:16px 0 22px}
.tier li{padding:6px 0 6px 22px; position:relative; font-size:14.5px}
.tier li::before{content:'·'; position:absolute; left:6px; color:var(--leaf); font-size:20px; line-height:1}
.tier .btn{margin-top:auto; justify-content:center}
.tier .tag{position:absolute; top:-11px; right:18px; background:var(--amber); color:#1c1206; font-family:'PlexMono',monospace; font-size:10.5px; letter-spacing:.14em; padding:3px 10px; border-radius:999px; text-transform:uppercase}

/* data table */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--panel)}
table.data{border-collapse:collapse; width:100%; min-width:520px}
table.data th{background:var(--bg-2); color:var(--sage); font-family:'PlexMono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-med)}
table.data td{padding:14px 18px; border-bottom:1px solid var(--border); font-size:15px; color:var(--parch); vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:rgba(88,129,87,.06)}
table.data .num{font-family:'Orbitron',sans-serif; color:var(--amber-bright)}

/* uptime tiles */
.uptime{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){ .uptime{grid-template-columns:1fr} }
.up-tile{border:1px solid var(--border); border-radius:10px; padding:18px 20px; background:var(--bg-2); display:flex; align-items:center; justify-content:space-between}
.up-tile .lab{font-family:'PlexMono',monospace; font-size:12px; letter-spacing:.1em; color:var(--sage); text-transform:uppercase}
.up-tile .lab b{display:block; color:var(--parch); font-family:'Orbitron',sans-serif; letter-spacing:.04em; margin-top:4px; text-transform:none; font-size:14px}
.up-tile .val{font-family:'Orbitron',sans-serif; font-size:24px}
.up-tile .val.live{color:var(--leaf); text-shadow:0 0 12px rgba(88,129,87,.5)}
.up-tile .val .u{font-size:11px; color:var(--sage); font-family:'PlexMono',monospace; display:block; text-align:right; letter-spacing:.06em}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:12px}
.chip{border:1px solid var(--border-med); border-radius:999px; padding:9px 18px; font-size:14px; color:var(--parch); background:var(--panel); transition:box-shadow .25s, border-color .25s, color .2s}
.chip:hover{box-shadow:var(--glow-soft); border-color:var(--wire); color:var(--amber-bright)}
.chip.gen{border-style:dashed; color:var(--sage)}

/* FAQ (details/summary, no JS) */
.faq details{border:1px solid var(--border); border-radius:10px; background:var(--panel); margin-bottom:12px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:18px 22px; font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:.02em; color:var(--parch); display:flex; justify-content:space-between; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--amber-bright); font-family:'PlexMono',monospace; font-size:20px}
.faq details[open] summary::after{content:'−'}
.faq details[open] summary{color:var(--amber-bright); box-shadow:inset 0 -1px 0 var(--border)}
.faq .body{padding:4px 22px 20px; color:var(--sage); font-size:15.5px}

/* form */
.field{margin-bottom:18px}
.field label{display:block; font-family:'PlexMono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; background:var(--bg-2); border:1px solid var(--border-med); border-radius:6px; color:var(--parch); font-family:'Atkinson',sans-serif; font-size:16px; padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--wire); box-shadow:0 0 0 3px rgba(88,129,87,.18)}
.field input::placeholder,.field textarea::placeholder{color:rgba(163,177,138,.5)}

/* CTA band */
.cta{text-align:center; background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.cta h2{font-size:clamp(26px,3.6vw,38px); text-shadow:0 0 20px rgba(88,129,87,.25)}
.cta p{color:var(--sage); font-size:18px; max-width:52ch; margin:14px auto 26px}
.cta .btn-go{padding:15px 34px; font-size:14.5px}

/* footer */
footer#bottom{border-top:1px solid var(--border-med); padding:44px 0 30px; box-shadow:0 -2px 24px rgba(88,129,87,.08)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-col h4{font-family:'PlexMono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin:0 0 14px}
.foot-col a{display:block; color:var(--parch); font-size:14.5px; padding:4px 0; transition:color .2s}
.foot-col a:hover{color:var(--amber-bright)}
.foot-col p{color:var(--sage); font-size:14px; margin:0}
.foot-bar{border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'PlexMono',monospace; font-size:12px; color:var(--sage); letter-spacing:.05em}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; scroll-behavior:auto !important; transition-duration:.01ms !important} }