:root {
  --fg:#141414; --mut:#5c5c58; --line:#e6e5df; --acc:#185fa5; --acc-d:#0c447c;
  --bg:#ffffff; --panel:#f7f7f4; --amber-bg:#faeeda; --amber-fg:#633806;
}
* { box-sizing:border-box; }
html,body { max-width:100%; overflow-x:hidden; }
body {
  margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.badge {
  display:block; text-align:center; background:var(--amber-bg); color:var(--amber-fg);
  font-size:13px; padding:8px 16px; overflow-wrap:anywhere;
}
.hero { max-width:820px; margin:0 auto; padding:48px 20px 24px; }
.mark { font-weight:600; letter-spacing:1px; color:var(--acc); font-size:15px; }
h1 { font-size:30px; line-height:1.2; margin:10px 0 14px; overflow-wrap:anywhere; }
.lead { font-size:19px; color:var(--fg); margin:0 0 8px; }
.sub { color:var(--mut); margin:0; }
main { max-width:820px; margin:0 auto; padding:8px 20px 40px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:28px 0; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card h2 { font-size:16px; margin:0 0 6px; color:var(--acc-d); }
.card p { margin:0; color:var(--mut); font-size:15px; }
section.context, section.contact { border-top:1px solid var(--line); padding-top:20px; margin-top:8px; }
section h2 { font-size:18px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.92em; }
a { color:var(--acc); }
footer { border-top:1px solid var(--line); }
footer p { max-width:820px; margin:0 auto; padding:0 20px; color:var(--mut); font-size:13px; }
.copy { padding-top:18px; }
.powered { text-align:center; font-size:12px; opacity:.65; padding-top:6px; padding-bottom:34px; }
@media (min-width:640px){ .hero{ padding-top:64px; } h1{ font-size:36px; } }