/* The system design page (11-03): the landing's look (landing.css, algocademy.css) with screenshots of a real lesson
   (assets/, Design a URL Shortener on dev: APP=1 VIEW=1 node /var/lib/algocademy-tests/design-lesson.cjs url-shortener
   desktop <dir>, then cropped), how a lesson works, the five groups of lessons, the mock interview, and what's free. */
.academy-page .sd-hero{grid-template-columns:minmax(0,1fr) minmax(360px,470px)}
.sd-hero h1 .underlined{white-space:nowrap}
.sd-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:28px 0 0}
.cta-actions{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap}
.sd-shot{margin:0}
.sd-shot img{display:block;width:100%;height:auto;border:1px solid #ccd7cb;border-radius:14px;box-shadow:0 24px 60px #172e3622;background:#fff}
.sd-shot figcaption{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}
.sd-tag{font-size:10px;letter-spacing:1.5px;font-weight:650;color:var(--muted);margin:0 0 10px}
.sd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sd-step{display:flex;flex-direction:column;border:1px solid #ccd7cb;border-radius:20px;background:#fff;overflow:hidden}
.sd-step img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-bottom:1px solid var(--line)}
.sd-step>div{padding:24px 26px 26px}
.sd-step h3{font-size:24px;letter-spacing:-.8px;margin:0 0 10px}
.sd-step p{font-size:14px;line-height:1.6;margin:0}
.sd-step .sd-tag{margin-bottom:10px}
.sd-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sd-part{display:flex;gap:22px;align-items:flex-start;border:1px solid #ccd7cb;border-radius:18px;padding:24px;background:#fff}
.sd-part strong{flex:0 0 72px;font-size:48px;letter-spacing:-2px;font-weight:650;line-height:1}
.sd-part h3{font-size:20px;letter-spacing:-.6px;margin:0 0 8px}
.sd-part p{font-size:14px;line-height:1.6;margin:0}
.sd-part .sd-tag{margin-bottom:8px}
.sd-part-free{background:#edf2e5;border-top:5px solid #7b9653}
.sd-part:last-child{grid-column:1/-1}
.sd-all{margin:22px 0 0;text-align:center}
.sd-mock-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:36px;align-items:center;padding:40px;border:1px solid #c8d4bd;border-radius:24px;background:#edf2e5}
.sd-mock-box h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.4px;line-height:1.1;margin:8px 0 0}
.sd-mock-box p{font-size:16px;line-height:1.65;margin:0 0 14px}
.sd-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:860px}
.sd-plan{border:1px solid #ccd7cb;border-radius:18px;padding:24px;background:#fff}
.sd-plan strong{display:block;font-size:48px;letter-spacing:-2px;font-weight:650;line-height:1.05;margin-bottom:6px}
.sd-plan span{font-size:14px;line-height:1.5;color:var(--muted)}
.sd-plan-pro{background:#edf2e5;border-top:5px solid #7b9653}
.sd-pricing{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:860px;margin-top:22px;padding:22px 26px;border:1px solid var(--line);border-radius:16px;background:#fff;box-sizing:border-box}
.sd-pricing p{margin:0;font-size:15px;line-height:1.6}
/* Below 1101px the site's hero stacks and centers its text (algocademy.css): the buttons and the picture follow */
@media(max-width:1100px){.sd-actions{justify-content:center}.sd-hero-shot{max-width:520px;margin:34px auto 0}}
@media(max-width:960px){.sd-steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.sd-parts{grid-template-columns:1fr}.sd-mock-box{grid-template-columns:1fr;gap:16px;padding:30px}}
@media(max-width:520px){.sd-hero h1 .underlined{white-space:normal}.sd-plans{grid-template-columns:1fr}.sd-part{flex-direction:column;gap:10px}.sd-part strong,.sd-plan strong{font-size:40px;flex-basis:auto}.sd-mock-box{padding:24px}}