/* Arcade Sandbox blog — shared styles. Static, zero-JS, tuned for reading + SEO. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}
:root {
  --bg:#07060f; --panel:#12101f; --line:#2a2545; --neon:#ff3ec8; --cyan:#3ee7ff;
  --gold:#ffe066; --text:#e8e6f5; --dim:#8b86a8; --green:#4ade80;
  --arcade:'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.75 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }

/* header */
.bhead { display:flex; align-items:center; gap:18px; padding:16px 20px; border-bottom:1px solid var(--line);
  max-width:1080px; margin:0 auto; }
.blogo { font-family:var(--arcade); font-size:12px; letter-spacing:1px; white-space:nowrap; }
.blogo .a1 { color:var(--neon); } .blogo .a2 { color:var(--cyan); }
.bhead nav { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:14px; }
.bhead nav a { color:var(--dim); }
.bhead nav a:hover { color:var(--cyan); text-decoration:none; }
.bcta { background:var(--neon); color:#000 !important; font-weight:700; border-radius:9px;
  padding:9px 16px; font-size:13px; white-space:nowrap; box-shadow:0 0 18px rgba(255,62,200,.35); }
.bcta:hover { text-decoration:none; box-shadow:0 0 28px rgba(255,62,200,.55); }

/* article shell */
main { max-width:720px; margin:0 auto; padding:36px 20px 24px; }
.eyebrow { font-family:var(--arcade); font-size:10px; color:var(--gold); letter-spacing:1px;
  text-transform:uppercase; margin:0 0 14px; }
h1 { font-size:clamp(28px, 5.4vw, 40px); line-height:1.18; margin:0 0 14px; letter-spacing:-.5px; }
.lede { font-size:19px; color:var(--dim); margin:0 0 8px; }
.byline { font-size:13px; color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:10px; }
article h2 { font-size:24px; margin:38px 0 10px; line-height:1.3; }
article h3 { font-size:19px; margin:28px 0 8px; }
article p, article li { color:#cfcbe4; }
article li { margin:6px 0; }
article strong { color:var(--text); }
article hr { border:none; border-top:1px solid var(--line); margin:34px 0; }
blockquote { margin:20px 0; padding:2px 18px; border-left:3px solid var(--neon); color:var(--dim); font-style:italic; }
code { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:.88em; }

/* tables (comparisons) */
table { width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--gold); font-size:13px; text-transform:uppercase; letter-spacing:.5px; }

/* CTA box */
.ctabox { background:var(--panel); border:1px solid var(--neon); border-radius:14px;
  padding:22px 24px; margin:34px 0; box-shadow:0 0 30px rgba(255,62,200,.12); }
.ctabox .k { font-family:var(--arcade); font-size:11px; color:var(--neon); margin:0 0 10px; }
.ctabox p { margin:8px 0 14px; color:#cfcbe4; }
.ctabox .fine { font-size:12.5px; color:var(--dim); margin:10px 0 0; }

/* FAQ */
.faq h3 { margin:22px 0 6px; color:var(--cyan); }
.faq p { margin:0 0 4px; }

/* blog index cards */
.bgrid { display:grid; gap:14px; margin:26px 0; }
.bcard { display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; color:inherit; transition:border-color .15s, transform .15s; }
.bcard:hover { border-color:var(--cyan); transform:translateY(-2px); text-decoration:none; }
.bcard .t { font-size:19px; font-weight:700; color:var(--text); margin:0 0 6px; }
.bcard .d { font-size:14.5px; color:var(--dim); margin:0 0 8px; }
.bcard .m { font-family:var(--arcade); font-size:9px; color:var(--gold); }

/* footer */
.bfoot { border-top:1px solid var(--line); margin-top:44px; }
.bfoot-in { max-width:1080px; margin:0 auto; padding:28px 20px 36px; font-size:13.5px; color:var(--dim); }
.bfoot-in h4 { font-family:var(--arcade); font-size:10px; color:var(--gold); margin:0 0 12px; letter-spacing:1px; }
.bfoot-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:8px 28px; margin-bottom:22px; }
.bfoot-cols a { color:var(--dim); display:block; padding:3px 0; }
.bfoot-cols a:hover { color:var(--cyan); }
.legal { border-top:1px solid var(--line); padding-top:16px; }
.legal a { color:var(--dim); }