/* React Native roadmap: a compact, ordered curriculum with four learning stages. */
.pj-rn { gap:32px; max-width:1160px; margin-inline:auto; }
.pj-rn .pj-hero { padding:clamp(26px,5vw,60px); background:#102b46; border-radius:24px; gap:20px; }
.pj-rn .pj-hero > img { left:auto; width:42%; opacity:.16; object-fit:cover; mask-image:linear-gradient(90deg,transparent,#000); }
.pj-rn .pj-hero::after { background:radial-gradient(ellipse at right top,#19657188,transparent 65%); }
.pj-rn .pj-hero h1 { max-width:22ch; font-size:clamp(30px,4vw,48px); line-height:1.15; letter-spacing:-.035em; }
.pj-rn .pj-hero p { max-width:67ch; font-size:15px; line-height:1.8; color:#d2e2ed; }
.pj-rn .pj-chips span { background:#ffffff12; border:1px solid #ffffff24; font-size:10px; letter-spacing:.06em; }
.pj-rn .pj-start { border-radius:12px; background:#b9f3df; color:#123e3b; box-shadow:none; }
.pj-rn .pj-stat { color:#d2e2ed; }
.pj-rn > .pj-lead { padding-top:8px; }
.rn-route { display:grid; gap:28px; }
.rn-stage { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; padding:28px 0; border-top:1px solid #dfe7ef; }
.rn-stage-heading { display:flex; align-items:flex-start; gap:14px; }
.rn-stage-index { flex:none; display:grid; place-items:center; width:42px; height:42px; border:1px solid #cee8de; border-radius:13px; background:#ecf8f2; color:#1a785c; font-size:15px; font-weight:800; }
.rn-eyebrow { display:block; margin:2px 0 8px; color:#537265; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.rn-stage h3 { margin:0; font-size:20px; line-height:1.35; letter-spacing:-.025em; color:#14314d; }
.rn-stage-heading p { margin:10px 0 0; font-size:13px; line-height:1.7; color:#60738b; }
.rn-courses { list-style:none; display:grid; gap:10px; margin:0; padding:0; }
.rn-course { display:flex; align-items:center; gap:15px; min-height:112px; padding:20px; color:#17314e; border:1px solid #dfe7ef; border-radius:16px; background:#fff; text-decoration:none; transition:border-color .15s,box-shadow .15s; }
.rn-course:hover { border-color:#66ad95; box-shadow:0 5px 18px #153e3110; }
.rn-course:focus-visible { outline:3px solid #259a76; outline-offset:4px; }
.rn-number { flex:none; width:18px; text-align:center; color:#778ba0; font-size:12px; font-weight:800; }
.rn-icon { flex:none; width:42px; height:42px; object-fit:contain; border-radius:10px; }
.rn-course-copy { display:flex; flex:1; flex-direction:column; min-width:0; gap:7px; }
.rn-format { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#527668; font-size:10px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.rn-format b { color:#806321; background:#fff3cc; border-radius:4px; padding:3px 5px; font-size:9px; }
.rn-course-copy strong { font-size:16px; line-height:1.45; }
.rn-description { color:#61758c; font-size:12px; line-height:1.65; }
.rn-action { flex:none; color:#218266; font-size:11px; font-weight:800; }
.rn-course[aria-disabled] { opacity:.65; cursor:default; }
.pj-rn .pj-next { border-top:1px solid #dfe7ef; padding-top:30px; }
html[data-theme="dark"] .rn-stage,html[data-theme="dark"] .pj-rn .pj-next { border-color:#2a3b52; }
html[data-theme="dark"] .rn-course { background:#14202f; border-color:#2a3b52; color:#e0eaf5; }
html[data-theme="dark"] .rn-stage h3 { color:#e0eaf5; }
html[data-theme="dark"] .rn-stage-heading p,html[data-theme="dark"] .rn-description { color:#a3b6cd; }
html[data-theme="dark"] .rn-action,html[data-theme="dark"] .rn-format,html[data-theme="dark"] .rn-eyebrow { color:#91d5bc; }
html[data-theme="dark"] .rn-stage-index { background:#193e35; border-color:#35614f; color:#a4e7ca; }
@media(max-width:850px) { .rn-stage { grid-template-columns:1fr; gap:20px; } .rn-stage-heading p { margin-top:5px; } .rn-stage-heading { max-width:520px; } .rn-stage h3 { font-size:22px; } }
@media(max-width:540px) { .pj-rn { gap:24px; } .pj-rn .pj-hero { border-radius:18px; padding:26px 22px; } .pj-rn .pj-hero p { font-size:14px; } .pj-rn .pj-chips span:first-child { flex-basis:100%; width:fit-content; } .pj-rn .pj-hero-foot { gap:14px; } .rn-course { gap:10px; padding:16px 12px; flex-wrap:wrap; } .rn-icon { width:32px; height:32px; } .rn-course-copy { flex-basis:calc(100% - 84px); } .rn-course-copy strong { font-size:15px; } .rn-action { padding-left:70px; } .rn-stage { padding:22px 0; } .rn-route { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .rn-course { transition:none; } }