/* Pip Academy.
 *
 * Loaded after pip.css, which owns the palette, the type, the header, the
 * buttons and the footer. Nothing here redefines any of those: this is the
 * layout of a course map and of a lesson, in the same paper-and-orange
 * language as the rest of Pip.
 *
 * Reading is the product, so the lesson column is set at a measure you can
 * read for fifteen minutes without losing your place, and the progress
 * decoration is kept quiet enough to ignore.
 */

.learn-page {
    background:
        radial-gradient(circle at 88% 4%, rgba(209, 242, 246, .55), transparent 30%),
        var(--paper);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.learn-header { border-bottom-color: rgba(37, 33, 30, .1); }

.learn-page a:focus-visible,
.learn-page button:focus-visible,
.learn-page input:focus-visible {
    outline: 3px solid rgba(240, 84, 63, .45);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- the map: hero --------------------------------------------------------- */

.learn-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 56px;
    align-items: center;
    padding: 150px max(24px, calc((100vw - 1240px) / 2)) 60px;
}

.learn-hero h1 { font-size: clamp(46px, 5.6vw, 82px); }

.learn-lede {
    max-width: 640px;
    margin: 26px 0 0;
    color: #5c554d;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.6;
}

.learn-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }

.learn-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 0;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    list-style: none;
}

.learn-facts li { display: inline-flex; align-items: center; gap: 8px; }
.learn-facts span { color: var(--green); font-weight: 800; }

.learn-empty-note {
    max-width: 560px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    margin: 28px 0 0;
    background: rgba(255, 255, 255, .7);
    color: #5c554d;
    font-size: 15px;
    line-height: 1.6;
}

.learn-hero-visual { position: relative; display: grid; place-items: center; }

.learn-hero-visual img {
    position: relative;
    z-index: 1;
    width: min(340px, 100%);
    height: auto;
}

/* The Pip Academy lockup, which is wide where the chicks are square. It gets
   more width than they do and no orbit behind it: that glow is a circle, and
   under a 4:3 mark it would show as a pool narrower than the thing it lights. */
.learn-hero-visual.is-logo img { width: min(440px, 100%); }

.learn-orbit {
    position: absolute;
    width: min(340px, 84%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(226, 245, 248, .55) 62%, transparent 70%);
}

/* --- the map: where you are ------------------------------------------------ */

.learn-standing {
    padding: 34px max(24px, calc((100vw - 1240px) / 2)) 14px;
}

.learn-standing-head { margin-bottom: 18px; }
.learn-standing-head h2 { font-size: clamp(28px, 3vw, 38px); }

.learn-standing-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
}

.learn-level,
.learn-tally {
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
}

.learn-level-name {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 680;
    letter-spacing: -.04em;
}

.learn-level-points { margin: 4px 0 16px; color: var(--muted); font-size: 14px; }
.learn-level-points strong { color: var(--ink); font-size: 17px; }

.learn-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece7e0;
}

.learn-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--orange), #ff9344);
    transition: width .4s ease;
}

.learn-level-next { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }

.learn-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
.learn-tally div { display: flex; flex-direction: column; gap: 6px; }
.learn-tally dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.learn-tally dd { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 660; letter-spacing: -.04em; }

.learn-standing-note {
    max-width: 720px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.learn-standing-note a { color: var(--ink); text-underline-offset: 4px; }
.learn-standing-nojs { color: #7a5b42; }

/* --- the map: tracks ------------------------------------------------------- */

.learn-tracks { padding: 40px max(24px, calc((100vw - 1240px) / 2)) 20px; }

.learn-section-head { max-width: 720px; margin-bottom: 34px; }
.learn-section-head h2 { font-size: clamp(34px, 4vw, 56px); }
.learn-section-head p { margin: 18px 0 0; color: #5c554d; font-size: 17px; line-height: 1.6; }
.learn-section-head-light p { color: #c9c1b7; }

.learn-track {
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.learn-track-head { max-width: 760px; margin-bottom: 20px; }

.learn-track-number {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.learn-track-head h3 {
    margin: 0;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 640;
    letter-spacing: -.05em;
}

.learn-track-subtitle {
    margin: 6px 0 0;
    color: #8a8177;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 2vw, 23px);
}

.learn-track-meta { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.learn-track-empty {
    padding: 16px 20px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.learn-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.learn-module-card {
    display: grid;
    height: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 20px 20px 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.learn-module-card:hover {
    border-color: rgba(240, 84, 63, .4);
    box-shadow: 0 16px 34px rgba(37, 33, 30, .09);
    transform: translateY(-2px);
}

.learn-module-card.is-done { border-color: rgba(24, 117, 79, .35); background: rgba(240, 250, 245, .82); }

.learn-module-number {
    color: var(--muted);
    font-size: 13px;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.learn-module-body { display: block; }

.learn-module-title {
    display: block;
    font-size: 17px;
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.25;
}

.learn-module-summary {
    display: block;
    margin-top: 7px;
    color: #625b53;
    font-size: 14px;
    line-height: 1.55;
}

.learn-module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 640;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.learn-module-card.is-done .learn-module-state { color: var(--green); }

.learn-module-tick {
    min-width: 20px;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    text-align: right;
}

/* --- the map: points and levels -------------------------------------------- */

.learn-how {
    padding: 56px max(24px, calc((100vw - 1240px) / 2));
    margin-top: 40px;
    background: var(--night);
    color: #f4f0ea;
}

.learn-how .learn-section-head h2 { color: #fdfbf8; }

.learn-how-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.learn-points-list,
.learn-levels {
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    margin: 0;
    background: rgba(255, 255, 255, .05);
}

.learn-points-list div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.learn-points-list div:last-child { border-bottom: 0; }
.learn-points-list dt { color: #d8d2ca; font-size: 15px; }
.learn-points-list dd { margin: 0; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; }

.learn-levels { list-style: none; counter-reset: level; }

.learn-levels li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.learn-levels li:last-child { border-bottom: 0; }
.learn-level-word { font-size: 16px; font-weight: 700; }
.learn-level-at { color: #a9a29a; font-size: 13px; font-variant-numeric: tabular-nums; }

.learn-level-you {
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: auto;
    background: var(--orange);
    color: white;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.learn-levels li.is-current .learn-level-word { color: #ffd7c9; }

.learn-how-note { max-width: 720px; margin: 26px 0 0; color: #b8b1a8; font-size: 14px; line-height: 1.6; }

/* --- the map: close -------------------------------------------------------- */

.learn-close {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    padding: 54px max(24px, calc((100vw - 1240px) / 2));
}

.learn-close img { width: 150px; height: auto; }
.learn-close h2 { font-size: clamp(28px, 3.2vw, 44px); }
.learn-close p:last-of-type { margin: 12px 0 0; color: #5c554d; font-size: 16px; }
.learn-close-actions { margin-left: auto; }

.learn-support { padding: 0 max(24px, calc((100vw - 1240px) / 2)) 44px; }
.learn-support .pip-support-note { margin: 0; color: var(--muted); font-size: 13.5px; }
.learn-support .pip-support-note a { color: var(--ink); text-underline-offset: 4px; }

/* --- a lesson -------------------------------------------------------------- */

.module-page { background: var(--paper); }

.module-crumbs { padding: 122px max(24px, calc((100vw - 880px) / 2)) 0; }

.module-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

.module-crumbs li + li::before { margin-right: 10px; content: "/"; opacity: .5; }
.module-crumbs a { color: var(--muted); text-underline-offset: 4px; }
.module-crumbs a:hover { color: var(--ink); }

.module { padding: 22px max(24px, calc((100vw - 880px) / 2)) 0; }

.module-head { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.module-head h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; }

.module-summary {
    max-width: 640px;
    margin: 20px 0 0;
    color: #5c554d;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.6;
}

.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 640;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.module-objectives {
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    margin: 30px 0 0;
    background: var(--blue);
}

.module-objectives h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.module-objectives ul { padding-left: 20px; margin: 0; }
.module-objectives li { margin: 8px 0; font-size: 16px; line-height: 1.55; }

.module-section {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 18px;
    padding: 34px 0;
    border-bottom: 1px solid #ece7e0;
}

.module-section-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; }

.module-section-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
}

.module-section-tick { min-height: 16px; color: var(--green); font-size: 14px; font-weight: 800; }

.module-section.is-read .module-section-number { border-color: rgba(24, 117, 79, .4); color: var(--green); }

.module-section h2 {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.8vw, 33px);
    font-weight: 640;
    letter-spacing: -.045em;
    line-height: 1.15;
}

.module-section p {
    margin: 0 0 15px;
    color: #34302c;
    font-size: 17.5px;
    line-height: 1.68;
}

.module-list { padding-left: 22px; margin: 0 0 15px; }
.module-list li { margin: 10px 0; color: #34302c; font-size: 17px; line-height: 1.6; }

.module-aside {
    padding: 16px 20px;
    border-left: 3px solid var(--line);
    border-radius: 0 14px 14px 0;
    margin: 20px 0;
    background: var(--cream);
}

.module-aside p { margin: 0; font-size: 15.5px; line-height: 1.6; }

.module-aside-kind {
    margin: 0 0 6px !important;
    color: var(--muted);
    font-size: 11.5px !important;
    font-weight: 780;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.module-aside-note { border-left-color: #7cb8c4; background: var(--blue); }
.module-aside-note .module-aside-kind { color: #35707c; }
.module-aside-warning { border-left-color: var(--orange); background: #fdeeeb; }
.module-aside-warning .module-aside-kind { color: var(--orange-dark); }
.module-aside-jargon { border-left-color: var(--green); background: #eef7f2; }
.module-aside-jargon .module-aside-kind { color: var(--green); }

.module-section-sources { margin: 14px 0 0 !important; color: var(--muted); font-size: 13px !important; line-height: 1.55 !important; }
.module-section-sources a { color: var(--muted); text-underline-offset: 3px; }
.module-section-sources a:hover { color: var(--ink); }

/* --- the closing check ----------------------------------------------------- */

.module-check {
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    margin: 36px 0 0;
    background: rgba(255, 255, 255, .86);
}

.module-check-head h2 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 36px); }
.module-check-head p { margin: 14px 0 0; color: #5c554d; font-size: 15.5px; line-height: 1.6; }

.module-check-status {
    min-height: 0;
    margin: 16px 0 0;
    color: var(--green);
    font-size: 15px;
    font-weight: 640;
}

.module-check-status:empty { margin: 0; }

.module-questions { padding: 0; margin: 22px 0 0; counter-reset: question; list-style: none; }

.module-question {
    padding: 20px 0;
    border-top: 1px solid #ece7e0;
}

.module-question fieldset { padding: 0; border: 0; margin: 0; }

.module-question legend {
    padding: 0;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 620;
    line-height: 1.45;
}

.module-question-number { color: var(--muted); font-variant-numeric: tabular-nums; }

.module-option { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.module-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--orange); flex: none; }
.module-option label { font-size: 16px; line-height: 1.5; cursor: pointer; }

.module-why {
    padding: 12px 16px;
    border-radius: 12px;
    margin: 12px 0 0;
    background: var(--cream);
    font-size: 15px;
    line-height: 1.6;
}

.module-why-verdict { font-weight: 760; }
.module-question.is-right .module-why { background: #eef7f2; }
.module-question.is-right .module-why-verdict { color: var(--green); }
.module-question.is-not-yet .module-why { background: #fdf3ea; }
.module-question.is-not-yet .module-why-verdict { color: #a5622a; }

.module-check-actions { margin-top: 22px; }

/* --- sources and the way onward -------------------------------------------- */

.module-sources { padding: 34px 0 0; }
.module-sources h2 { font-size: clamp(22px, 2.4vw, 28px); }
.module-sources ol { padding-left: 20px; margin: 18px 0 0; }
.module-sources li { margin: 12px 0; font-size: 15.5px; line-height: 1.55; }
.module-sources a { text-underline-offset: 4px; }
.module-source-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }

.module-foot { padding: 30px 0 50px; }

.module-read-form { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.module-read-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.module-next-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }

.module-next-nav a {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.module-next-nav a:hover {
    border-color: rgba(240, 84, 63, .4);
    box-shadow: 0 16px 34px rgba(37, 33, 30, .09);
    transform: translateY(-2px);
}

.module-nav-kicker {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 780;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.module-nav-title { display: block; margin-top: 8px; font-size: 18px; font-weight: 660; letter-spacing: -.03em; }
.module-nav-hint { display: block; margin-top: 8px; color: #625b53; font-size: 14px; line-height: 1.55; }
.module-next { border-color: rgba(240, 84, 63, .28) !important; }

/* --- a lesson that is not there -------------------------------------------- */

.learn-missing {
    max-width: 720px;
    padding: 160px 24px 60px;
    margin: 0 auto;
    text-align: center;
}

.learn-missing img { width: 150px; height: auto; }
.learn-missing .eyebrow { justify-content: center; margin-top: 18px; }
.learn-missing h1 { font-size: clamp(34px, 5vw, 58px); }
.learn-missing p { margin: 20px 0 0; color: #5c554d; font-size: 17px; line-height: 1.6; }
.learn-missing-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.learn-missing-list { padding-top: 34px; margin-top: 40px; border-top: 1px solid var(--line); text-align: left; }
.learn-missing-list h2 { font-size: 22px; }
.learn-missing-list ol { padding-left: 20px; margin: 16px 0 0; }
.learn-missing-list li { margin: 9px 0; font-size: 16px; }
.learn-missing-list span { color: var(--muted); font-size: 13px; }

/* --- small screens --------------------------------------------------------- */

@media (max-width: 900px) {
    .learn-hero { grid-template-columns: minmax(0, 1fr); padding-top: 128px; }
    .learn-hero-visual { order: -1; }
    .learn-hero-visual img { width: min(220px, 60%); }
    .learn-hero-visual.is-logo img { width: min(300px, 82%); }
    .learn-standing-body { grid-template-columns: minmax(0, 1fr); }
    .learn-how-grid { grid-template-columns: minmax(0, 1fr); }
    .learn-close-actions { margin-left: 0; }
}

@media (max-width: 700px) {
    .site-header.learn-header { position: static; width: 100%; padding: 14px 20px; transform: none; flex-wrap: wrap; gap: 12px; }
    .learn-header nav { flex-wrap: wrap; gap: 14px 18px; }
    .learn-hero { padding-top: 34px; }
    .module-crumbs { padding-top: 26px; }
    .learn-missing { padding-top: 40px; }
    .learn-tally { grid-template-columns: minmax(0, 1fr); }
    .module-section { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .module-section-mark { flex-direction: row; gap: 10px; align-items: center; }
    .module-check { padding: 22px 18px; }
    .learn-modules { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .learn-module-card,
    .module-next-nav a,
    .learn-bar span { transition: none; }
    .learn-module-card:hover,
    .module-next-nav a:hover { transform: none; }
}

/* Scrolling.
 *
 * The lessons settle in as you reach them, on the same soft ease-out the rest
 * of the Pip flow uses: public/assets/css/pip-reveal.css, hooked on
 * [data-reveal] in the three academy templates. Without it the page simply
 * appeared, which is what made a long lesson feel abrupt on the way down.
 *
 * Anchor jumps ease too. Every one of them inside a lesson - the check, the
 * sources, the next lesson, a track on the map - used to snap, which is a
 * harder cut than anything else on the page. scroll-padding-top keeps a
 * heading clear of the header, which sits over the top of the page at 84px
 * rather than pushing content down.
 *
 * Both are motion, so both are off for a reader who asked for less of it. That
 * is the same promise pip-reveal.css already makes. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* The cast.
 *
 * One set of characters, each standing for something rather than decorating:
 * a teacher at a blackboard opens the fundamentals, a detective the survey of
 * what exists, a writer at a typewriter the practice track, a strategist on a
 * stack of books the strategy track, and the one holding an apple the
 * performance track. The progress panel shows the character for the level you
 * are at, so the word has a face. The lesson check gets Socrates, because that
 * is what the check is.
 *
 * They are cut out on transparency, so they sit on the page rather than in a
 * card: no rounding, no panel, no border. object-fit is contain because the
 * whole character matters - cover would slice a deerstalker or a mortarboard
 * off the top. A soft drop-shadow follows the shape rather than a box, which
 * is the only reason they read as objects on the paper instead of stickers.
 * Sizes are set in the markup as well as here so nothing shifts while they
 * load. */
.learn-track-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 18px;
    align-items: center;
}

.learn-track-art {
    grid-row: 1 / 4;
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(37, 33, 30, .22));
}

.learn-level { position: relative; }

.learn-level-art {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(37, 33, 30, .20));
}

.learn-level-name,
.learn-level-points,
.learn-level-next { padding-right: 88px; }

.module-check { position: relative; }

.module-check-art {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(37, 33, 30, .18));
}

.module-check-head { padding-right: 84px; }

@media (max-width: 720px) {
    .learn-track-art { width: 64px; height: 64px; }
    .learn-level-art { width: 56px; height: 56px; top: 8px; right: 10px; }
    .learn-level-name,
    .learn-level-points,
    .learn-level-next { padding-right: 64px; }
    .module-check-art { width: 52px; height: 52px; top: 10px; right: 12px; }
    .module-check-head { padding-right: 62px; }
}