/* ==========================================================================
   LearnAI / AI Trailblazers — Energizer card
   Matches the "Human LLM → Human Agent" reference card: forest-green header,
   orange ENERGIZER badge, sectioned body, tan tie-in box. Printable (1 page).
   ========================================================================== */
:root{
  --green:#2f6e51; --green-d:#245740; --green-soft:#eef5f0; --green-line:#cfe3d7;
  --round:#2f8560; --ink:#22302a; --soft:#48564f; --muted:#6b7a72; --line:#d8ddd8;
  --orange:#e08a2b; --orange-d:#b4651a;
  --tan-bg:#fbf1da; --tan-line:#ecd9a4; --tan-ink:#8a6a1e;
  --paper:#fbfaf6;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em;
  color:var(--ink);background:#e9ece7;line-height:1.5;padding:24px 14px 60px;
  -webkit-font-smoothing:antialiased;
}
/* screen-only toolbar */
.bar{max-width:820px;margin:0 auto 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bar h1{font-size:17px;margin:0;font-weight:800}
.bar p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.bar a,.bar button{font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:9px 15px;background:#fff;color:var(--ink)}
.bar button.print{background:var(--green);color:#fff;border-color:var(--green)}

/* the card */
.ecard{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 34px rgba(20,40,30,.10)}
.ehead{background:var(--green);color:#fff;padding:20px 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ehead h1{margin:0;font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.ehead .ehsub{margin:6px 0 0;font-size:12.5px;color:#d7e7dd;font-weight:500}
.ebadge{flex:none;background:var(--orange);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;padding:6px 12px;border-radius:6px;margin-top:3px}

.emeta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;background:var(--green-soft);border-bottom:1px solid var(--green-line);padding:12px 26px}
.emeta .lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.emeta div{font-size:13.5px;color:var(--ink);font-weight:600}

.ebody{padding:22px 26px 24px}
h2.es{font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--green-d);margin:20px 0 7px;padding-left:12px;border-left:4px solid var(--orange);line-height:1.1}
h2.es:first-child{margin-top:0}
.ebody p{margin:6px 0;color:var(--soft);font-size:14.5px}
.ebody strong,.ebody b{color:var(--ink);font-weight:700}
.ebody ol,.ebody ul{margin:6px 0;padding-left:22px;color:var(--soft);font-size:14.5px}
.ebody li{margin:4px 0}
.ebody li::marker{color:var(--green)}

.rules{background:var(--green-soft);border:1px solid var(--green-line);border-radius:10px;padding:12px 16px;margin:8px 0}
.rules .round{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--round);margin:10px 0 4px}
.rules .round:first-child{margin-top:0}
.rules ul{margin:2px 0;list-style:none;padding-left:0}
.rules li{position:relative;padding-left:16px;margin:5px 0;color:var(--ink)}
.rules li::before{content:"•";position:absolute;left:2px;color:var(--green)}
.rules em{color:var(--soft)}

ul.q{list-style:none;padding-left:0}
ul.q li{position:relative;padding-left:22px;margin:6px 0;color:var(--ink)}
ul.q li::before{content:"?";position:absolute;left:0;top:0;color:var(--orange);font-weight:900}

.tiein{background:var(--tan-bg);border:1px solid var(--tan-line);border-radius:10px;padding:12px 16px;margin:18px 0 0}
.tiein p{margin:5px 0;font-size:13.5px;color:#6f5518}
.tiein b{color:var(--tan-ink)}
.tiein .wo b{color:var(--orange-d)}

a.home{color:var(--green-d)}

@media(max-width:600px){
  .emeta{grid-template-columns:1fr 1fr}
  .ehead h1{font-size:22px}
}

/* ---------- PRINT: one clean page ---------- */
@media print{
  @page{size:portrait;margin:11mm}
  body{background:#fff;padding:0}
  .bar{display:none}
  .ecard{box-shadow:none;border:none;border-radius:0;margin:0;max-width:none}
  .ehead,.emeta,.rules,.tiein,.ebadge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h2.es{margin-top:14px}
}