/* Free lead magnet pages: /hiring-roadmap and /hiring-roadmap/thanks.
   Loaded after site.css and uses its tokens (colours, fonts, radius).
   Mobile first. Own lm-* classes so the workshop page can change freely. */

.lm-btn-sun { background: var(--sun); color: var(--ink) !important; box-shadow: 0 6px 18px rgba(0, 49, 92, .22); min-height: 52px; }
.lm-btn-sun:hover { background: #FFD95E; transform: translateY(-1px); }

/* ── Opt-in hero: deep blue band, logo colours along the top ─────────── */
.lm-hero { position: relative; background: var(--deep); color: #DCE7F3; padding: clamp(36px, 6vw, 80px) 0 clamp(44px, 7vw, 88px); overflow: hidden; }
.lm-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--accent) 0 25%, var(--sun) 25% 50%, var(--leaf) 50% 75%, var(--brand) 75%); }
.lm-hero::after { content: ""; position: absolute; inset: -30% -10% auto 45%; height: 120%; background: radial-gradient(closest-side, rgba(0, 118, 219, .45), transparent); pointer-events: none; }
.lm-hero-grid { position: relative; z-index: 1; display: grid; gap: 1.75rem; grid-template-areas: "head" "form" "list"; }
.lm-hero-head { grid-area: head; }
.lm-hero-list { grid-area: list; }
.lm-form-wrap { grid-area: form; }
.site .lm-hero h1 { color: #fff; font-size: clamp(2.2rem, 6.2vw, 3.6rem); line-height: 1.05; margin-bottom: 1rem; }
.lm-hero .lead { color: #DCE7F3; margin: 0; max-width: 34em; }
.lm-hero .check-list { margin: 0; gap: .85rem; }
.lm-hero .check-list li { color: #fff; font-size: 1.04rem; }
.lm-hero .check-list li::before { background-color: var(--leaf-deep); }
.lm-proof { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; }
.site .lm-proof img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 54% 30%; border: 2px solid rgba(255, 255, 255, .85); flex: none; }
.site .lm-proof p { margin: 0; font-size: .98rem; color: #C7D6E8; }

.lm-form { background: var(--paper); color: var(--slate); border-radius: var(--radius-lg); padding: clamp(1.3rem, 4vw, 2rem); box-shadow: var(--shadow-lg); scroll-margin-top: 84px; }
.site .lm-form h2 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--ink); }
.lm-form .btn { width: 100%; }
.site .lm-form input, .site .lm-form select { font-size: 16px; }
.lm-form .micro { margin-bottom: 0; }

@media (min-width: 900px) {
    .lm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "head form" "list form"; column-gap: 4rem; row-gap: 1.75rem; align-items: start; }
    .lm-form-wrap { align-self: center; }
}

/* ── The 7 steps preview ─────────────────────────────────────────────── */
.lm-steps-head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.lm-steps { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: .85rem; max-width: 980px; counter-reset: lmstep; }
.lm-steps li { display: flex; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1.1rem; box-shadow: var(--shadow); }
.lm-step-n { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 1.1rem var(--display); color: var(--ink); background: var(--sun); }
.lm-steps li:nth-child(4n+2) .lm-step-n { background: var(--brand); color: #fff; }
.lm-steps li:nth-child(4n+3) .lm-step-n { background: var(--leaf-deep); color: #fff; }
.lm-steps li:nth-child(4n+4) .lm-step-n { background: var(--accent-text); color: #fff; }
.lm-step-t { font: 700 1.08rem/1.3 var(--display); color: var(--ink); }
@media (min-width: 760px) { .lm-steps { grid-template-columns: 1fr 1fr; } .lm-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); } }
.site .lm-steps-cta { text-align: center; margin: 2.25rem 0 0; }

/* ── Thank-you page ──────────────────────────────────────────────────── */
.lm-thanks-hero { text-align: center; }
.lm-thanks-hero .lead { max-width: 36em; margin-left: auto; margin-right: auto; }
.lm-download { margin: 1.75rem 0 .75rem; }
.lm-download .btn { min-width: min(100%, 320px); }
.lm-download-note { color: var(--muted); }

.lm-video { max-width: 860px; margin: 0 auto; }
.site .lm-video h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); text-align: center; }
.lm-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #001E3A; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 599px) { .lm-video video { aspect-ratio: auto; max-height: 80svh; } }

.lm-offer { background: var(--deep); color: #DCE7F3; position: relative; overflow: hidden; }
.lm-offer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--accent) 0 25%, var(--sun) 25% 50%, var(--leaf) 50% 75%, var(--brand) 75%); }
.lm-offer-grid { display: grid; gap: 2rem; align-items: center; }
.site .lm-offer h2 { color: #fff; }
.lm-offer p { font-size: 1.08rem; }
.lm-offer .check-list li { color: #fff; }
.lm-offer .check-list li::before { background-color: var(--leaf-deep); }
.lm-offer-card { background: var(--paper); color: var(--slate); border-radius: var(--radius-lg); padding: clamp(1.3rem, 4vw, 2rem); box-shadow: var(--shadow-lg); }
.site .lm-offer-card p { margin-bottom: .75rem; }
.lm-offer .lm-price { font: 800 2.1rem/1.1 var(--display); color: var(--ink); }
.lm-price small { font: 600 1rem var(--sans); color: var(--muted); }
.lm-price-was { color: var(--muted); }
.lm-offer-card .btn { width: 100%; margin-top: .5rem; }
.lm-offer-card .micro { margin: .8rem 0 0; }
.lm-test-note { background: var(--sun-tint); color: var(--ink); border-radius: 10px; padding: .75rem 1rem; font-weight: 600; font-size: .95rem; }
@media (min-width: 900px) { .lm-offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 4rem; } }