/* The learning roadmap uses the feedback page's large type, real photography and short messages. */
.mlr { --mlr-bg:#050506; --mlr-alt:#08090b; --mlr-surface:#131418; --mlr-ink:#f5f5f6; --mlr-muted:#a9adb5; --mlr-line:#2c2e34; --mlr-accent:#ed204f; --mlr-secondary:#3c3d42; color:var(--mlr-ink); background:var(--mlr-bg); font:400 16px/1.7 Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
html[data-meduc-theme="light"] .mlr { --mlr-bg:#fff; --mlr-alt:#f5f5f7; --mlr-surface:#fff; --mlr-ink:#17191e; --mlr-muted:#626771; --mlr-line:#e0e3e7; --mlr-accent:#bd263a; --mlr-secondary:#eceef2; }
.mlr *, .mlr *::before, .mlr *::after { box-sizing:border-box; }
.mlr a { color:inherit; text-decoration:none; }
.mlr a:focus { outline:none; }
.mlr a:focus-visible { outline:2px solid var(--mlr-accent); outline-offset:4px; }
.mlr .mlr-shell { width:min(83.333333%,1440px); margin-inline:auto; }
.mlr .mlr-eyebrow { margin:0 0 16px; color:var(--mlr-accent); font:700 11px/1.5 Inter,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.mlr h1,.mlr h2,.mlr h3 { margin:0; color:var(--mlr-ink); font-family:Anton,Impact,sans-serif; font-weight:400; line-height:1.1; letter-spacing:-.01em; text-wrap:balance; }
.mlr h1>span,.mlr h2>span,.mlr h3>span { display:block; color:var(--mlr-accent); }
.mlr .mlr-button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:48px; padding:12px 24px; border:1px solid transparent; border-radius:8px; background:var(--mlr-accent); color:#fff; font:700 15px/1.35 Inter,Arial,sans-serif; transition:filter .16s; }
.mlr .mlr-button:hover { color:#fff; filter:brightness(1.1); }
.mlr-button>span { font-size:21px; line-height:1; }
.mlr .mlr-button--secondary { background:var(--mlr-secondary); color:var(--mlr-ink); }
.mlr .mlr-button--secondary:hover { color:var(--mlr-ink); }

/* The opening mirrors the feedback page, with a photo instead of a text-heavy guide card. */
.mlr-hero { padding:clamp(56px,6vw,96px) 0 clamp(72px,7vw,112px); }
.mlr-hero-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(40px,5vw,88px); }
.mlr h1 { font-size:clamp(54px,6.2vw,100px); line-height:1.08; }
.mlr .mlr-lead { max-width:520px; margin:26px 0 0; color:var(--mlr-muted); font-size:clamp(16px,1.3vw,19px); line-height:1.65; }
.mlr-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.mlr-hero-picture { position:relative; min-width:0; margin:0; }
.mlr-hero-picture>img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.mlr-hero-badge { position:absolute; bottom:28px; left:-28px; display:flex; flex-direction:column; gap:8px; width:250px; max-width:90%; padding:20px 22px; border-radius:10px; background:#fff; color:#17191e; box-shadow:0 20px 50px #0003; }
.mlr-hero-badge strong { color:#bd263a; font:400 33px/1.1 Anton,Impact,sans-serif; }
.mlr-hero-badge>span { max-width:190px; font:600 13px/1.5 Inter,Arial,sans-serif; }

/* One compact navigation row. Scrolling the page remains natural on phones. */
.mlr-jump { position:sticky; top:var(--mhi-header-h,66px); z-index:20; border-block:1px solid var(--mlr-line); background:var(--mlr-bg); }
.mlr-jump>.mlr-shell { display:flex; gap:32px; overflow-x:auto; scrollbar-width:none; padding-block:2px; }
.mlr-jump>.mlr-shell::-webkit-scrollbar { display:none; }
.mlr-jump a { display:flex; flex:none; align-items:center; gap:10px; min-height:44px; padding:6px 0; font:600 13px/1.5 Inter,Arial,sans-serif; white-space:nowrap; }
.mlr-jump a>span { color:var(--mlr-accent); font-size:11px; }
.mlr-jump a:hover { color:var(--mlr-accent); }
.mlr-paths,.mlr-stage,.mlr-practice { scroll-margin-top:calc(var(--mhi-header-h,66px) + 66px); }
.mlr-section-heading { display:grid; grid-template-columns:1fr minmax(260px,.5fr); align-items:end; gap:55px; padding-block:76px 30px; }
.mlr-section-heading h2,.mlr-outro h2 { font-size:clamp(44px,4.6vw,70px); line-height:1.12; }
.mlr .mlr-section-heading>p { margin:0 0 6px; color:var(--mlr-muted); font-size:15px; line-height:1.8; }

/* Three editorial chapters, alternating photography and a concise profile of the learner. */
.mlr-stage { padding-block:56px 64px; }
.mlr-stage--reverse { background:var(--mlr-alt); }
.mlr-stage-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(40px,6vw,100px); }
.mlr-stage-picture { position:relative; min-width:0; margin:0; overflow:hidden; border-radius:10px; background:var(--mlr-secondary); }
.mlr-stage-picture>img { display:block; width:100%; aspect-ratio:1.15; object-fit:cover; }
.mlr-stage-picture::after { content:""; position:absolute; right:0; bottom:0; left:0; height:40%; background:linear-gradient(transparent,#000b); pointer-events:none; }
.mlr-stage-picture figcaption { position:absolute; right:26px; bottom:23px; left:26px; z-index:1; display:flex; align-items:flex-end; gap:17px; color:#fff; }
.mlr-stage-number { font:400 72px/.95 Anton,Impact,sans-serif; }
.mlr-stage-picture figcaption>span:last-child { padding-bottom:3px; font:700 11px/1.5 Inter,Arial,sans-serif; letter-spacing:.1em; }
.mlr-stage-copy { min-width:0; }
.mlr .mlr-stage-copy>.mlr-eyebrow { font-size:10px; }
.mlr-stage h3 { font-size:clamp(43px,4.5vw,68px); }
.mlr-stage-facts { display:grid; gap:0; margin:25px 0 0; }
.mlr-stage-facts>div { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:start; gap:16px; padding:15px 0; border-bottom:1px solid var(--mlr-line); }
.mlr-stage-facts dt { margin:3px 0 0; color:var(--mlr-muted); font:700 10px/1.5 Inter,Arial,sans-serif; letter-spacing:.06em; }
.mlr-stage-facts dd { margin:0; color:var(--mlr-ink); font-size:15px; line-height:1.7; }
.mlr .mlr-stage-link { display:inline-flex; align-items:center; gap:24px; margin-top:23px; padding-block:6px; color:var(--mlr-accent); font:700 14px/1.4 Inter,Arial,sans-serif; }
.mlr-stage-link>span { font-size:22px; line-height:1; }
.mlr-stage-link:hover { text-decoration:underline; text-underline-offset:5px; }
@media(min-width:901px) { .mlr-stage--reverse .mlr-stage-picture { order:2; } }

/* Practice accompanies all three stages, rather than being a compulsory fourth stage. */
.mlr-practice { position:relative; isolation:isolate; padding-block:90px; overflow:hidden; background:#08090b; text-align:center; }
.mlr-practice-bg { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; }
.mlr-practice::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#050506d9,#14020ae8); }
.mlr .mlr-practice .mlr-eyebrow { color:#ff8ca2; }
.mlr .mlr-practice h2 { color:#fff; font-size:clamp(48px,5.8vw,88px); }
.mlr .mlr-practice h2>span { color:#ff8ca2; }
.mlr .mlr-practice-inner>p:not(.mlr-eyebrow) { max-width:530px; margin:24px auto 0; color:#ffffffe0; font-size:17px; line-height:1.7; }
.mlr-practice-flow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; margin:28px 0 30px; padding:0; list-style:none; color:#fff; font:600 13px/1.5 Inter,Arial,sans-serif; }
.mlr-practice-flow li+li::before { content:"→"; display:inline-block; margin-right:16px; color:#ff8ca2; }
.mlr .mlr-practice .mlr-button { background:#de2334; color:#fff; }
.mlr-outro { padding-block:80px; }
.mlr-outro-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:50px; }
.mlr .mlr-outro-inner>div>p:last-child { max-width:500px; margin:24px 0 0; color:var(--mlr-muted); font-size:16px; }
.mlr-outro-links { display:flex; flex-direction:column; gap:12px; }

@media(max-width:1100px) { .mlr-stage-inner { gap:40px; } .mlr-stage-facts>div { grid-template-columns:1fr; gap:5px; padding-block:12px; } .mlr-stage-facts dt { margin:0; } }
@media(max-width:900px) {
  .mlr-hero-inner { grid-template-columns:1fr; gap:44px; }
  .mlr-hero-picture { max-width:640px; }
  .mlr-hero-picture>img { aspect-ratio:1.25; }
  .mlr-hero-badge { left:16px; bottom:16px; }
  .mlr-section-heading { grid-template-columns:1fr; gap:20px; padding-top:60px; }
  .mlr-stage-inner { grid-template-columns:1fr; gap:32px; }
  .mlr-stage-picture>img { aspect-ratio:1.6; }
  .mlr-stage-facts>div { grid-template-columns:110px minmax(0,1fr); gap:16px; padding-block:15px; }
  .mlr-stage-copy { max-width:650px; }
  .mlr-stage { padding-block:48px 60px; }
  .mlr-outro-inner { grid-template-columns:1fr; gap:28px; }
  .mlr-outro-links { align-items:flex-start; }
}
@media(max-width:650px) {
  .mlr .mlr-shell { width:calc(100% - 32px); }
  .mlr-hero { padding-block:40px 56px; }
  .mlr h1 { font-size:clamp(44px,12vw,60px); }
  .mlr .mlr-eyebrow { font-size:10px; }
  .mlr .mlr-lead { margin-top:22px; font-size:16px; }
  .mlr-hero-actions { margin-top:25px; }
  .mlr-hero-actions .mlr-button { flex:1 1 100%; }
  .mlr-hero-picture>img { aspect-ratio:1.15; }
  .mlr-hero-badge { width:220px; padding:16px 18px; }
  .mlr-hero-badge strong { font-size:28px; }
  .mlr-hero-badge>span { font-size:12px; }
  .mlr-jump>.mlr-shell { gap:24px; }
  .mlr-jump a { min-height:42px; font-size:12px; }
  .mlr-section-heading { padding-block:46px 4px; gap:18px; }
  .mlr-section-heading h2,.mlr-outro h2 { font-size:clamp(39px,10vw,52px); }
  .mlr .mlr-section-heading>p { font-size:14px; }
  .mlr-stage { padding-block:38px 48px; }
  .mlr-stage-inner { gap:28px; }
  .mlr-stage-picture>img { aspect-ratio:1.4; }
  .mlr-stage-picture figcaption { right:20px; bottom:20px; left:20px; gap:14px; }
  .mlr-stage-number { font-size:58px; }
  .mlr-stage-picture figcaption>span:last-child { font-size:10px; }
  .mlr-stage h3 { font-size:clamp(43px,11vw,56px); }
  .mlr-stage-facts { margin-top:20px; }
  .mlr-stage-facts>div { grid-template-columns:96px minmax(0,1fr); gap:14px; padding-block:13px; }
  .mlr-stage-facts dt { font-size:9px; }
  .mlr-stage-facts dd { font-size:14px; }
  .mlr-practice { padding-block:70px; }
  .mlr .mlr-practice h2 { font-size:clamp(40px,10.5vw,58px); }
  .mlr .mlr-practice-inner>p:not(.mlr-eyebrow) { max-width:340px; margin-top:21px; font-size:15px; }
  .mlr-practice-flow { gap:10px; font-size:11px; }
  .mlr-practice-flow li+li::before { margin-right:10px; }
  .mlr-outro { padding-block:55px; }
  .mlr .mlr-outro-inner>div>p:last-child { font-size:15px; }
  .mlr-outro-links { align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) { .mlr .mlr-button { transition:none; } }