/* hero.css - home landing: hero, embedded CartPole player box, buttons, next-step cards */

.hero{margin:26px 0 10px;padding:0 0 18px}
.hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.hero .eyebrow{font-size:13px;color:var(--green);letter-spacing:.2px}
.hero-title{font-size:clamp(24px,4.4vw,38px);line-height:1.2;margin:0;font-weight:700;letter-spacing:-.4px}
.hero-title span{background:linear-gradient(transparent 58%, var(--hl) 58%);padding:0 .05em}
.hero-sub{font-size:15px;line-height:1.5;color:var(--dim);margin:0;max-width:52ch}

.herobox{margin:14px 0 6px;width:100%}
.herobox .transport{justify-content:center}
.herofig{display:block;width:100%;height:auto;background:#fff;border:1.5px solid var(--rule)}
.taskpill{font-family:var(--mono);font-size:12.5px;border:1.5px solid var(--rule);
  background:var(--fg);color:var(--bg);padding:6px 11px;display:inline-block}

/* white sheet under the landing, so the write-up reads as separate */
.sheet{background:#fff;border-top:2px solid var(--rule)}

.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;line-height:1;
  padding:10px 15px;border:1.5px solid var(--rule);background:var(--panel);color:var(--fg);
  box-shadow:3px 3px 0 var(--rule);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{background:var(--panel);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--rule)}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid:hover{background:var(--fg)}
.btn.ext::after{content:" \2197";color:inherit;opacity:.6}

.nextlinks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.navcard{display:block;border:1.5px solid var(--rule);background:var(--panel);
  box-shadow:4px 4px 0 var(--rule);padding:14px 16px;
  transition:transform .12s ease,box-shadow .12s ease}
.navcard:hover{background:var(--panel);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule)}
.navcard .nl-t{display:block;font-weight:700;color:var(--fg);font-size:15px}
.navcard .nl-arr{color:var(--link)}
.navcard .nl-d{display:block;color:var(--dim);font-size:12.5px;margin-top:5px;line-height:1.45}