/* =============================================================================
   Learning pages kit (2026-10-29 site review): /how-bots-learn, /roadmap, /bots.
   Built ONLY on the site.css tokens (--bg, --surface, --line, --ink, --ink-2, --muted, --accent,
   --cyan, --up, --warn, --m-*) so these three pages read as the same site as home and the Arena.
   Status colours: --up = live / done, --cyan = being proven, --warn = being built / late,
   --muted = paused / off. Never use --up/--down for anything that is not a status or P&L.
   ============================================================================= */
.mi .lp{padding-bottom:var(--sp-8)}
.mi .lp-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:640px){.mi .lp-wrap{padding:0 var(--gutter-mobile)}}

/* hero */
.mi .lp-hero{padding-top:var(--sp-7);padding-bottom:var(--sp-6);position:relative}
.mi .lp-hero::before{content:"";position:absolute;inset:0 0 auto;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 70% at 15% 0%,rgba(79,139,255,.16),transparent 70%),radial-gradient(40% 60% at 90% 10%,rgba(34,211,238,.10),transparent 70%)}
.mi .lp-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.mi .lp-hero h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.02em;margin:0 0 16px;max-width:18ch}
.mi .lp-lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2);max-width:60ch;margin:0 0 24px}
.mi .lp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mi .lp-fine{font-size:var(--fs-xs);color:var(--muted);margin:14px 0 0;max-width:70ch;line-height:1.5}

/* sections */
.mi .lp-section{padding-top:var(--sp-7)}
.mi .lp-section>h2,.mi .lp-h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 0 10px}
.mi .lp-sub{color:var(--ink-2);font-size:var(--fs-prose);line-height:var(--lh-prose);max-width:66ch;margin:0 0 24px}
.mi .lp-section a:not([class]),.mi .lp-hero a:not([class]){color:var(--link);font-weight:600}

/* card grid */
.mi .lp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.mi .lp-grid.two{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.mi .lp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 22px;min-width:0;position:relative}
.mi .lp-card h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-snug);margin:0 0 6px}
.mi .lp-card p{color:var(--ink-2);font-size:var(--fs-base);line-height:1.6;margin:6px 0 0}
.mi .lp-card .lp-meta{font-size:var(--fs-xs);color:var(--muted);margin:10px 0 0}
.mi .lp-card.accent{border-color:rgba(79,139,255,.45);background:linear-gradient(180deg,rgba(79,139,255,.08),var(--surface) 60%)}
.mi .lp-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}

/* status pill */
.mi .lp-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid currentColor;line-height:1.3}
.mi .lp-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mi .lp-pill.live{color:var(--up)}
.mi .lp-pill.proving{color:var(--cyan)}
.mi .lp-pill.building{color:var(--warn)}
.mi .lp-pill.off{color:var(--muted)}
.mi .lp-pill.change{color:var(--accent)}
/* outcomes and schedules are not statuses: neutral pills so green/cyan keep their status meaning */
.mi .lp-pill.keep{color:var(--ink-2)}
.mi .lp-pill.cadence{color:var(--ink-2);border-color:var(--line-strong)}
.mi .lp-pill.cadence::before{display:none}

/* bot chips with model colour dot (one colour per AI family, same as the Arena) */
.mi .lp-bots{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.mi .lp-bots a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.mi .lp-bots a:hover{border-color:var(--line-strong);background:rgba(255,255,255,.06)}
.mi .lp-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--m-system)}
.mi .lp-dot.gpt{background:var(--m-gpt)}.mi .lp-dot.claude{background:var(--m-claude)}
.mi .lp-dot.grok{background:var(--m-grok)}.mi .lp-dot.gemini{background:var(--m-gemini)}

/* timeline (roadmap) */
.mi .lp-timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px}
.mi .lp-timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--up),var(--cyan),var(--warn),var(--line))}
.mi .lp-timeline>li{position:relative;padding-left:48px}
.mi .lp-timeline>li::before{content:"";position:absolute;left:8px;top:24px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--muted)}
.mi .lp-timeline>li.live::before{border-color:var(--up)}
.mi .lp-timeline>li.proving::before{border-color:var(--cyan)}
.mi .lp-timeline>li.building::before{border-color:var(--warn)}

/* call-to-action band: Runner + daily email, the same on every learning page */
.mi .lp-cta{margin-top:var(--sp-7);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;
  padding:28px;border-radius:20px;border:1px solid rgba(79,139,255,.35);
  background:radial-gradient(80% 120% at 0% 0%,rgba(79,139,255,.18),transparent 60%),var(--surface)}
.mi .lp-cta h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-tight);margin:0 0 8px}
.mi .lp-cta p{color:var(--ink-2);margin:0 0 16px;line-height:1.6}
.mi .lp-cta .mi-form{margin:0}
.mi .lp-cta .lp-note{font-size:var(--fs-xs);color:var(--muted);margin:10px 0 0;min-height:1.2em}
@media (max-width:820px){.mi .lp-cta{grid-template-columns:1fr;padding:22px}}

/* details: the full technical version stays one tap away */
.mi .lp-details{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);padding:0 20px}
.mi .lp-details>summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.mi .lp-details>summary::-webkit-details-marker{display:none}
.mi .lp-details>summary::after{content:"+";color:var(--cyan);font-size:20px;line-height:1}
.mi .lp-details[open]>summary::after{content:"\2212"}
.mi .lp-details ol,.mi .lp-details ul{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
.mi .lp-details li{margin:8px 0;line-height:1.6}

/* in-page links row at the foot of each learning page */
.mi .lp-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-6)}

/* learning loop diagram (how-bots-learn) */
.mi .lp-loop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center}
.mi .lp-loop svg{width:100%;height:auto;display:block}
.mi .lp-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.mi .lp-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mi .lp-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--cyan);color:var(--cyan);font-weight:800;font-size:13px}
.mi .lp-steps strong{display:block;color:var(--ink);font-size:var(--fs-base)}
.mi .lp-steps span{display:block;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5;margin-top:2px}
@media (max-width:900px){.mi .lp-loop{grid-template-columns:1fr}.mi .lp-loop svg{max-width:460px;margin:0 auto}}
@media (prefers-reduced-motion:no-preference){
  .mi .lp-loop .lp-orbit{transform-origin:240px 240px;animation:lp-spin 24s linear infinite}
  @keyframes lp-spin{to{transform:rotate(360deg)}}
}