.focus-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr); align-items:center; gap:3rem; }
.focus-intro img { width:100%; height:auto; border-radius:24px; }
.focus-intro h1 { max-width:750px; }
.focus-secondary-link { display:inline-block; margin:1rem 0 0 1.2rem; color:var(--text-secondary); text-underline-offset:4px; }
.focus-feature { display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; padding:2rem; border:1px solid var(--border-color); border-radius:22px; background:var(--bg-card); }
.focus-feature h2 { font-size:1.8rem; margin-block:.7rem; }
.focus-feature p, .focus-feature li { line-height:1.7; }
.focus-feature li { margin-block:.5rem; }
.focus-feature a, .focus-scope a { color:var(--focus-accent); }
.focus-how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:3.5rem 0 2rem; }
.focus-how span { font-size:.72rem; letter-spacing:.1em; color:var(--text-secondary); }
.focus-how h2 { font-size:1.3rem; margin-block:.7rem; }
.focus-how p, .focus-scope { color:var(--text-secondary); font-size:.95rem; line-height:1.7; }
.focus-scope { max-width:850px; margin-block:2rem; }
nav.focus-other { position:static; display:flex; flex-wrap:wrap; gap:2rem; padding-block:2rem; background:transparent; box-shadow:none; border-top:1px solid var(--border-color); }
.focus-other a { color:var(--focus-accent); }
.focus-course-grid { display:grid; gap:1rem; margin-block:1.5rem 2.5rem; }
.focus-course-grid .lesson-card { display:grid; grid-template-columns:80px minmax(0,1fr) auto; align-items:center; gap:1.5rem; padding:1.5rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; color:var(--text-primary); }
.focus-course-grid .lesson-card:hover { border-color:var(--focus-accent); }
.focus-course-grid h3 { font-size:1.15rem; margin:0 0 .5rem; }
.focus-course-grid .lesson-desc { line-height:1.6; color:var(--text-secondary); font-size:.92rem; margin:0 0 .7rem; }
.focus-course-grid .status-badge, .focus-course-grid .stat { color:var(--text-secondary); font-size:.8rem; }
.focus-course-grid .btn-outline { color:var(--focus-accent); font-size:.85rem; }
.focus-landing :focus-visible, .public-course :focus-visible { outline:3px solid var(--focus-accent); outline-offset:4px; }
@media(max-width:768px) { .focus-intro, .focus-feature { grid-template-columns:1fr; gap:1.5rem; } .focus-intro img { max-width:280px; } .focus-feature { padding:1.3rem; } .focus-how { grid-template-columns:1fr; gap:1.5rem; } .focus-secondary-link { margin-left:0; display:block; } .focus-course-grid .lesson-card { grid-template-columns:1fr; gap:.7rem; padding:1.2rem; } }

.focus-hub-paths { scroll-margin-top:110px; }
.focus-hub-paths .focus-section-heading { margin-bottom:1.5rem; }
.focus-hub-paths .focus-section-heading p { color:var(--text-secondary); line-height:1.7; }
.focus-starter { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem; margin-top:2.5rem; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-card); }
.focus-starter h2 { font-size:1.4rem; margin:.7rem 0; }
.focus-starter p { max-width:650px; line-height:1.6; }
.focus-starter .focus-primary { flex-shrink:0; }
@media(max-width:768px) { .focus-starter { flex-direction:column; align-items:flex-start; gap:.5rem; } }