/* ================= lead-magnet pages =================
   Generated pages (tools/leadmag-gen in the parent repo): /research/ai-vs-human-code-review and
   /review-lessons/silent-success. They link shared.css, experts.css, lessons.css, then this file.
   Only what those lack lives here: long-form sections, the data table, the per-item check line,
   the closing note and P.S. Code blocks and their colours come from lessons.css. */

.lm-prose{min-width:0}
.lm-prose ol{padding-left:24px;margin:0 0 22px}
.lm-prose .lm-sec{scroll-margin-top:100px}
.lm-prose .lm-sec > h2{margin:64px 0 18px}
.lm-prose > .lm-sec:first-child > h2{margin-top:0}
.lm-prose .lm-item + .lm-item{border-top:1px solid var(--ink-15)}
.lm-prose .lm-item + .lm-item > h2{padding-top:48px;margin-top:48px}

/* data table: scrolls inside its own box on a phone, never the page */
.lm-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 18px}
.lm-table table{width:100%;min-width:460px;border-collapse:collapse;font-family:var(--display);font-size:15px;line-height:1.4}
.lm-table th,.lm-table td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--ink-15);vertical-align:top}
.lm-table thead th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);font-weight:500;border-bottom:1px solid var(--ink-40)}
.lm-table tbody th{font-weight:400;color:var(--ink-60);width:52%}
.lm-table td{font-family:var(--mono);font-size:14px;white-space:nowrap}
.lm-table td strong{font-weight:500;background:var(--accent);color:var(--accent-ink);padding:1px 5px;border-radius:3px}
.lm-foot{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-60);margin:0 0 22px}

/* checklist items: the yes/no question, then the code, then who caught it + the lesson link */
.lm-prose .lm-check{font-family:var(--display);font-size:20px;line-height:1.4;letter-spacing:-0.01em;font-weight:500;margin:0 0 16px;padding:4px 0 4px 18px;border-left:3px solid var(--accent)}
.lm-prose .lm-check strong{font-weight:500;color:var(--ink-60)}
.lm-prose .lm-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60);line-height:1.8;margin:-8px 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px}
.lm-prose .lm-meta a.inline{text-transform:none;letter-spacing:0;font-family:var(--display);font-size:15px;font-weight:500}

/* closing: how we did it, then the one offer */
.lm-close{margin-top:64px;padding-top:28px;border-top:1px solid var(--ink)}
.lm-close p{font-size:17px;line-height:1.6;color:var(--ink-60)}
.lm-close p strong{color:var(--ink)}
.lm-close .lm-ps{margin:28px 0 0;padding:22px 24px;border:1px solid var(--ink-15);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:18px;line-height:1.5}
.lm-close .lm-ps a.inline{font-weight:500;border-bottom:2px solid var(--accent)}
.lm-close .lm-ps a.inline:hover{border-bottom-color:var(--ink)}

@media (max-width:620px){
  .lm-prose .lm-sec > h2{margin-top:48px}
  .lm-prose .lm-item + .lm-item > h2{padding-top:36px;margin-top:36px}
  .lm-prose .lm-check{font-size:18px;padding-left:14px}
  .lm-close .lm-ps{padding:18px}
}