:root { --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --accent:#22c55e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
header { background:var(--card); border-bottom:1px solid #334155; }
nav { max-width:960px; margin:0 auto; padding:1rem 1.25rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
nav .brand { font-weight:700; font-size:1.2rem; margin-right:auto; color:var(--accent); text-decoration:none; }
nav a { color:var(--text); text-decoration:none; }
nav a:hover, nav a.active { color:var(--accent); }
/* Highlight the current page: set <body data-page="..."> on each page */
body[data-page="home"] nav a[data-page="home"],
body[data-page="meraki"] nav a[data-page="meraki"],
body[data-page="licensing"] nav a[data-page="licensing"],
body[data-page="contact"] nav a[data-page="contact"] { color:var(--accent); }
main { max-width:960px; margin:0 auto; padding:2rem 1.25rem; }
h1 { font-size:2.4rem; margin:.2rem 0 .6rem; }
h2 { margin-top:2rem; }
p, li { color:var(--muted); }
.hero { padding:2rem 0; }
.btn { display:inline-block; background:var(--accent); color:#052e16; padding:.7rem 1.3rem; border-radius:8px; font-weight:700; text-decoration:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.card { background:var(--card); border-radius:10px; padding:1.1rem 1.25rem; }
.card h3 { margin-top:0; color:var(--text); }
table { width:100%; border-collapse:collapse; margin-top:1rem; }
th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid #334155; color:var(--muted); }
th { color:var(--text); }
form { display:grid; gap:.8rem; max-width:480px; }
input, textarea { width:100%; padding:.65rem; border-radius:8px; border:1px solid #334155; background:var(--card); color:var(--text); font:inherit; }
footer { max-width:960px; margin:0 auto; padding:2rem 1.25rem; color:var(--muted); font-size:.85rem; border-top:1px solid #334155; }

/* Links in page content: readable on the dark background */
main a:not(.btn), footer a { color:var(--accent); }
main a:not(.btn):hover, footer a:hover { color:var(--text); }
footer p { color:var(--muted); margin:.3rem 0; }
footer nav.footer-links { display:flex; gap:1.25rem; margin:.6rem 0 0; padding:0; max-width:none; }
th[scope="row"] { color:var(--text); font-weight:600; }

/* Accessibility helpers */
.visually-hidden { 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 { position:absolute; left:12px; top:-100px; z-index:100; background:var(--accent); color:#052e16; padding:.7rem 1.1rem; border-radius:8px; font-weight:700; text-decoration:none; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.btn:focus-visible, .skip-link:focus-visible { outline-color:var(--text); }
main:focus { outline:none; }
nav a[aria-current="page"] { color:var(--accent); }
.updated { font-size:.9rem; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }