{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --ink:#0f172a; --muted:#475569; --brand:#16a34a; --card:#f8fafc; --border:#e2e8f0; --bg:#ffffff } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} img{max-width:100%;height:auto} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:860px;margin-inline:auto;padding:20px} .hero{background:#ffffff} .hero img{border-radius:12px;border:1px solid var(--border)} .title{font-size:36px;line-height:1.1;margin:14px 0 6px;font-weight:800} .subtitle{color:var(--muted);font-size:16px;margin:0 0 14px} .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px} .btn{appearance:none;border:1px solid var(--border);background:#111827;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:14px} .btn.secondary{background:#ffffff;color:#0f172a} .btn.brand{background:var(--brand)} .note{font-size:12px;color:var(--muted)} .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px} h2{font-size:22px;margin:18px 0 10px} h3{font-size:18px;margin:16px 0 8px} ol,ul{margin:8px 0 14px} li{margin:8px 0} .block{margin:18px 0} .tag{display:inline-block;background:#dcfce7;border:1px solid #86efac;color:#065f46;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700} .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:900px){.grid{grid-template-columns:1fr}} .divider{height:1px;background:var(--border);margin:16px 0} .quote{border-left:5px solid var(--brand);padding:10px 14px;background:#f1f5f9;border-radius:8px} .foot{color:var(--muted);font-size:13px;margin-top:18px} :root{ --ink:#0f172a; --muted:#475569; --brand:#16a34a; --card:#f8fafc; --border:#e2e8f0; --bg:#ffffff } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} img{max-width:100%;height:auto} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:860px;margin-inline:auto;padding:20px} .hero img{border-radius:12px;border:1px solid var(--border)} .title{font-size:36px;line-height:1.1;margin:14px 0 6px;font-weight:800} .subtitle{color:var(--muted);font-size:16px;margin:0 0 14px} .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px} .btn{appearance:none;border:1px solid var(--border);background:#111827;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:14px} .btn.secondary{background:#ffffff;color:#0f172a} .btn.brand{background:var(--brand)} .note{font-size:12px;color:var(--muted)} .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px} h2{font-size:22px;margin:18px 0 10px} h3{font-size:18px;margin:16px 0 8px} ol,ul{margin:8px 0 14px} li{margin:8px 0} .block{margin:18px 0} .tag{display:inline-block;background:#dcfce7;border:1px solid #86efac;color:#065f46;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700} .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:900px){.grid{grid-template-columns:1fr}} .divider{height:1px;background:var(--border);margin:16px 0} .quote{border-left:5px solid var(--brand);padding:10px 14px;background:#f1f5f9;border-radius:8px} .foot{color:var(--muted);font-size:13px;margin-top:18px;text-align:center} :root{ --ink:#0f172a; --muted:#475569; --brand:#16a34a; --card:#f8fafc; --border:#e2e8f0; --bg:#ffffff } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} img{max-width:100%;height:auto} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:860px;margin-inline:auto;padding:20px} .hero img{border-radius:12px;border:1px solid var(--border);width:40%;display:block;margin:0 auto} .title{font-size:36px;line-height:1.1;margin:14px 0 6px;font-weight:800;text-align:center} .subtitle{color:var(--muted);font-size:16px;margin:0 0 14px;text-align:center} .toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:14px 0 6px} .btn{appearance:none;border:1px solid var(--border);background:#111827;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:14px} .btn.secondary{background:#ffffff;color:#0f172a} .btn.brand{background:var(--brand)} .note{font-size:12px;color:var(--muted);text-align:center} .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px} h2{font-size:22px;margin:18px 0 10px} h3{font-size:18px;margin:16px 0 8px} ol,ul{margin:8px 0 14px} li{margin:8px 0} .block{margin:18px 0} .tag{display:inline-block;background:#dcfce7;border:1px solid #86efac;color:#065f46;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700} .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:900px){.grid{grid-template-columns:1fr}.hero img{width:70%;}} .divider{height:1px;background:var(--border);margin:16px 0} .quote{border-left:5px solid var(--brand);padding:10px 14px;background:#f1f5f9;border-radius:8px} .foot{color:var(--muted);font-size:13px;margin-top:18px;text-align:center} :root { --brand: #16a34a; --ink: #0f172a; --muted: #475569; --border: #e2e8f0; --bg: #ffffff; --card: #f8fafc; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; } .container { max-width: 880px; margin: 0 auto; padding: 20px; } header.hero { text-align: center; padding: 40px 20px; } header.hero img { width: 45%; border-radius: 12px; border: 1px solid var(--border); } .title { font-size: 36px; font-weight: 800; margin-top: 20px; } .subtitle { font-size: 18px; color: var(--muted); margin: 10px auto 20px; max-width: 60ch; } .toolbar { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .btn { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 14px; } .btn.secondary { background: #111827; } .note { font-size: 13px; color: var(--muted); } h2, h3 { color: var(--ink); } .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; } ol, ul { margin-left: 20px; } footer { text-align: center; padding: 30px 20px; color: var(--muted); border-top: 1px solid var(--border); font-size: 14px; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .divider { height: 1px; background: var(--border); margin: 20px 0; } .btn { background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 14px; } /* Lighter style for Email button */ #emailBtn { background: #e2e8f0; /* light gray */ color: #0f172a; /* dark navy text */ border: 1px solid #cbd5e1; } #emailBtn:hover { background: #f1f5f9; } .btn.secondary { background: #111827; color: #fff; }