/*
 * The five models: one column, two from 640 px (reading across both), three from 1024 (reading across two): every row
 * full. A card stands on its picture under a dark layer, its count at the top, its words and drills at the foot; it
 * lifts on a real pointer, its picture leaning in, its arrow stepping on.
 */

.pmd { padding-block: 0 var(--section); }
.pmd-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .pmd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pmd-grid > li.wide { grid-column: span 2; } }
@media (min-width: 1024px) { .pmd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pmd-grid > li { display: grid; }
.pmd-card { position: relative; display: grid; align-content: space-between; gap: 48px; min-height: 380px; padding: 22px; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; color: var(--white); background: var(--night-card-bottom); border: 1px solid var(--edge); box-shadow: var(--shadow-tile);
  transition: translate var(--d-default) var(--ease-out), box-shadow var(--d-enter) var(--ease-out); }
.pmd-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-media) var(--ease-out); }
.pmd-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night-shade-top), transparent 30%, var(--night-shade-bottom) 72%); }
.pmd-card:active { scale: 0.99; }
.pmd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pmd-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--white-12); border: 1px solid var(--white-18); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.pmd-ico .i { width: 24px; height: 24px; }
.pmd-count { display: grid; justify-items: end; gap: 2px; padding: 6px 12px; border-radius: 14px; background: var(--white-12); border: 1px solid var(--white-18); font-size: var(--text-callout); font-weight: 800; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.pmd-count small { color: var(--white-70); font-size: var(--text-label); font-weight: 600; }
.pmd-t { display: grid; gap: 8px; max-width: 34rem; }
.pmd-t b { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; }
.pmd-t > span:not(.pmd-drills):not(.pmd-go) { color: var(--white-70); font-size: var(--text-callout); line-height: var(--lh-callout); }
.pmd-drills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pmd-drills i { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--white-10); border: 1px solid var(--white-15); font-size: var(--text-label); line-height: var(--lh-label); font-style: normal; font-weight: 600; }
.pmd-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--text-headline); font-weight: 700; }
.pmd-go .i { width: 17px; height: 17px; transition: translate var(--d-default) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pmd-card:hover { translate: 0 -3px; box-shadow: var(--shadow-tile-hover); }
  .pmd-card:hover img { scale: 1.05; }
  .pmd-card:hover .pmd-go .i { translate: -4px 0; }
}
/*
 * The hub's start: the level test on a dark card (its six levels as bars rising from the start to the end, each with
 * its number and name), the two ways beside it from 1024 px. The bars are the test's ladder; nothing moves but the
 * entrance.
 */

.pst { padding-block: 0 var(--section); }
.pst-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .pst-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.pst-test { display: grid; justify-items: start; gap: 14px; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-card); color: var(--white); background: linear-gradient(160deg, var(--night-card-top), var(--night-card-bottom)); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); }
.pst-kick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--white-12); border: 1px solid var(--white-18); font-size: var(--text-label); font-weight: 800; }
.pst-kick .i { width: 16px; height: 16px; }
.pst-title { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; }
.pst-test > p { max-width: 36rem; color: var(--white-70); font-size: var(--text-callout); line-height: var(--lh-callout); }
.pst-levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 8px; width: 100%; margin-block: 8px 6px; }
.pst-levels li { display: grid; gap: 6px; align-content: end; min-width: 0; }
.pst-levels span { height: calc(24px + var(--h) * 92px); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); opacity: calc(0.45 + var(--h) * 0.55); animation: pst-rise 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); transform-origin: 50% 100%; }
@keyframes pst-rise { from { scale: 1 0.3; opacity: 0; } }
.pst-levels small { color: var(--white-60); font-size: var(--text-label); font-weight: 700; }
.pst-levels b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label); line-height: var(--lh-label); font-weight: 700; }
@media (max-width: 639px) { .pst-levels b { display: none; } }

.pst-ways { display: grid; gap: 16px; }
.pst-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; align-content: center; padding: clamp(16px, 2vw, 22px); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.pst-wico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.pst-wico .i { width: 24px; height: 24px; }
.pst-wt { display: grid; gap: 2px; }
.pst-wt b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.pst-wt > span { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.pst-count { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-muted); font-size: var(--text-label); font-weight: 800; white-space: nowrap; }
.pst-way ul { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pst-way li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-footnote); font-weight: 600; }
.pst-way li .i { width: 15px; height: 15px; color: var(--success); }
@keyframes pst-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pst-levels span { animation-name: pst-fade; } }