/* Progression page — minimal, page-scoped styles. Avoid duplicating base.css. */

.progression-hero {
  background: radial-gradient(1200px 600px at 15% 10%, rgba(80,80,120,.25), transparent), linear-gradient(180deg, rgba(10,10,18,.9), rgba(10,10,18,.6));
  padding: clamp(2rem, 3vw, 3rem) 0;
}
.progression-hero .container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
.hero-content h1 { margin: 0 0 .5rem; }
.hero-content .subtitle { color: var(--text-muted, #cfd3db); margin: 0 0 1rem; max-width: 60ch; }
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-media img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

.toc { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(20,20,30,.35); backdrop-filter: blur(6px); }
.toc .container { overflow-x: auto; }
.toc-list { display: grid; grid-auto-flow: column; gap: 1rem; padding: .75rem 0; list-style: none; margin: 0; }
.toc-list a { white-space: nowrap; color: var(--link, #8fb3ff); text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }

.section { padding: clamp(2rem, 4vw, 3rem) 0; }
.section.alt { background: rgba(18,18,24,.5); }
.section .section-header { margin-bottom: 1rem; }
.section-figure { margin: 1.25rem 0 0; }
.section-figure img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }

.grid { display: grid; gap: clamp(.75rem, 2vw, 1rem); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 720px) { .progression-hero .container { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }

.card { background: rgba(24,24,34,.7); border: 1px solid rgba(255,255,255,.06); padding: 1rem; border-radius: 10px; }
.card h3 { margin-top: 0; }

.key-points { padding-left: 1.1rem; }
.numbered { padding-left: 1.25rem; }

.note { color: var(--text-muted, #cfd3db); font-size: .95rem; margin-top: .75rem; }

/* XP tool */
.xp-tool { margin-top: 1.25rem; background: rgba(24,24,34,.7); border: 1px solid rgba(255,255,255,.06); padding: 1rem; border-radius: 10px; }
.xp-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; }
.xp-form .form-row { display: flex; flex-direction: column; gap: .35rem; }
.xp-form input { background: rgba(12,12,18,.8); color: #e8ebf1; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .6rem .7rem; }
.xp-result { margin-top: .75rem; display: grid; gap: .5rem; }
.progressbar { width: 100%; height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.progressbar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6da8ff, #9a6dff); transition: width .4s ease; }
@media (max-width: 720px) { .xp-form { grid-template-columns: 1fr; } }

/* FAQ */
.faq-item { background: rgba(24,24,34,.7); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: .75rem 1rem; }
.faq-item + .faq-item { margin-top: .5rem; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-cta { margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* Breadcrumbs */
.breadcrumbs { border-top: 1px solid rgba(255,255,255,.06); background: rgba(14,14,20,.7); }
.breadcrumbs ol { list-style: none; display: flex; gap: .5rem; padding: .5rem 0; margin: 0; }
.breadcrumbs a { color: var(--link, #8fb3ff); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }