/* The free course. Built on the blog's post styles; this is what it adds. */
.course-progress{font-size:var(--t-sm);font-weight:700;color:var(--soft);min-height:1.4em;margin:8px 0 0}
.course-list{max-width:760px;margin:0 auto;padding:0 var(--gutter) 70px}
.course-list ol{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.course-list a{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;text-decoration:none;color:var(--ink)}
.course-list a:hover{border-color:var(--ink)}
.course-list b{display:block;font-size:var(--t-md)}
.course-list small{display:block;font-size:var(--t-sm);line-height:1.5;color:var(--soft);margin-top:3px}
.course-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-weight:800;font-size:var(--t-sm)}
.course-list .is-done .course-n{background:var(--acid)}
.course-tick{font-style:normal;font-size:var(--t-micro);font-weight:800;letter-spacing:.08em;color:var(--good)}
.lesson-lede{font-size:var(--t-md);line-height:1.6;color:var(--soft);margin:12px 0 0}
.lesson-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0}
.way{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.way-tool{border-color:var(--ink)}
.way p{font-size:var(--t-base);line-height:1.6;margin:8px 0 0}
.way .nav-cta{display:inline-block;text-decoration:none;margin-top:6px}
.lesson-now{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:20px 24px;margin:0 0 30px}
.lesson-now h2{font-size:var(--t-h4);margin:0 0 8px;color:#fff}
.lesson-now ol{margin:0;padding-left:20px;line-height:1.8}
.lesson-answers h2{font-size:var(--t-h4)}
.lesson-answers details{border-top:1px solid var(--line);padding:12px 0}
.lesson-answers summary{font-weight:700;cursor:pointer}
.lesson-answers p{margin:8px 0 0;line-height:1.6;color:#3d443e}
.lesson-done{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:30px 0 26px}
.lesson-done .nav-cta[aria-pressed="true"]{background:var(--good)}
.lesson-done-note{font-size:var(--t-sm);color:var(--soft)}
.lesson-done-note .linklike{font-weight:700;margin-left:4px;background:none;padding:0;border-bottom:2px solid var(--acid);color:var(--ink)}
.lesson-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px;font-size:var(--t-sm);font-weight:700}
.lesson-nav a{color:var(--ink)}
.lesson-nav a:last-child{text-align:right}
@media (max-width:700px){.lesson-ways{grid-template-columns:1fr}.lesson-nav{flex-direction:column}.lesson-nav a:last-child{text-align:left}}
/* The header button is a link here, and the nav link colour would win over it. */
.top nav a.nav-cta{color:#fff}
@media (max-width:560px){.top nav a.nav-cta{font-size:var(--t-xs)}}