/* iLEAP skill microsite — see docs/adr/0010 §7.
   Brand tokens taken from https://ileap.global/styles.css:
   hero/brand blue #006c9e; slate text #0f172a / #2d3748 / #64748b;
   backgrounds #fff / #fafafa / #f8fafc; system font stack; radius 6-16. */
:root {
  --blue:#006c9e;          /* iLEAP hero/brand blue */
  --blue-dark:#005277;
  --blue-accent:#3b82f6;
  --ink:#0f172a;           /* headings / dark text */
  --body:#2d3748;          /* body text */
  --muted:#64748b;         /* secondary text / links */
  --bg:#fafafa; --bg-soft:#f8fafc; --white:#fff;
  --line:#e2e8f0;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --radius:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;
  color:var(--body); background:var(--bg); line-height:1.6; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

.preview-banner { background:var(--ink); color:#fff; text-align:center;
  font-size:13px; font-weight:600; padding:7px 12px; }
.preview-banner a { color:#fff; text-decoration:underline; }
.preview-banner a:hover { color:#dceefa; }

.topbar { background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.topbar .logo { height:38px; width:auto; display:block; }

.hero { background:var(--blue); color:#fff; padding:60px 0 54px; text-align:center; }
.hero h1 { font-size:38px; letter-spacing:-.02em; }
.hero .tagline { font-size:18px; max-width:660px; margin:14px auto 28px; color:#dceefa; }
.cta { display:inline-block; background:#fff; color:var(--blue); font-weight:700;
  padding:13px 26px; border-radius:8px; text-decoration:none; box-shadow:var(--shadow); }
.cta:hover { background:var(--bg-soft); }

.content { padding:48px 20px 24px; }
.content h2 { color:var(--ink); font-size:24px; margin:36px 0 12px; }
.content h3 { color:var(--ink); font-size:18px; margin:24px 0 10px; }
.content p { margin:10px 0; }
.content ol { margin:12px 0 12px 22px; }
.content ol li { margin:6px 0; }
.content a { color:var(--blue); }

.muted { color:var(--muted); font-size:14px; }

.demos { margin-top:24px; }
.demo { background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin:20px 0; }
.demo .prompt { background:var(--bg-soft); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  white-space:pre-wrap; color:var(--body); margin:8px 0 14px; }
.demo iframe { width:100%; height:560px; border:1px solid var(--line); border-radius:8px;
  background:#fff; }
.downloads { font-size:15px; }

.footer { border-top:1px solid var(--line); margin-top:40px; padding:28px 0 48px;
  color:var(--muted); font-size:14px; }
.footer a { color:var(--blue); }
.footer .mission { color:var(--body); font-weight:600; margin-bottom:8px; }
.footer .fine { font-size:12px; color:var(--muted); margin-top:10px; }