/* v6.2 — mobile UX + progressive learning architecture */
.audience-start{margin-top:28px}
.audience-title{font-weight:800;margin:0 0 12px}
.audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.audience-grid a{display:flex;flex-direction:column;gap:7px;min-height:124px;padding:18px;border:1px solid rgba(103,198,255,.32);border-radius:18px;background:rgba(255,255,255,.035);text-decoration:none}
.audience-grid strong{font-size:17px;color:var(--paper,#f4efe5)}
.audience-grid span{font-size:14px;line-height:1.45;color:var(--muted,#bac5cf)}
.audience-grid b{margin-top:auto;color:var(--cyan,#6bd1ff);font-size:13px}
.learning-hero{max-width:900px;margin:0 auto 38px}
.learning-hero .lead{font-size:clamp(18px,2.2vw,24px);line-height:1.55}
.learning-promise{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-left:3px solid var(--cyan,#6bd1ff);background:rgba(103,198,255,.055);border-radius:0 14px 14px 0}
.learning-promise span{color:var(--muted,#bac5cf);line-height:1.5}
.learning-map{max-width:1000px;margin:0 auto}
.section-heading{max-width:760px;margin-bottom:22px}
.lesson-list{display:grid;gap:14px}
.lesson-card{display:grid;grid-template-columns:68px 1fr;gap:18px;padding:22px;border:1px solid rgba(103,198,255,.25);border-radius:18px;background:rgba(255,255,255,.035);text-decoration:none}
.lesson-card:hover,.lesson-card:focus-visible{border-color:rgba(103,198,255,.7);background:rgba(103,198,255,.075)}
.lesson-no{font-size:30px;font-weight:900;color:var(--cyan,#6bd1ff);line-height:1}
.lesson-card small{font-weight:800;letter-spacing:.08em;color:var(--cyan,#6bd1ff)}
.lesson-card h3{margin:6px 0 8px;font-size:clamp(20px,2.5vw,28px)}
.lesson-card p{margin:0 0 10px;line-height:1.55;color:var(--muted,#bac5cf)}
.lesson-card b{font-size:14px;color:var(--cyan,#6bd1ff)}
.synthesis-card{max-width:1000px;margin:34px auto;padding:26px;border:1px solid rgba(155,120,255,.4);border-radius:20px;background:rgba(125,90,210,.08)}
.synthesis-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.synthesis-links a,.next-lesson,.back-to-path{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid rgba(103,198,255,.35);border-radius:12px;text-decoration:none}
.lesson-orientation{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12)}
.lesson-progress{display:flex;justify-content:space-between;gap:12px;color:var(--cyan,#6bd1ff);font-size:12px;font-weight:800;letter-spacing:.08em}
.lesson-orientation h1{font-size:clamp(28px,5vw,46px);line-height:1.08;margin:12px 0}
.lesson-outcomes{max-width:800px;line-height:1.55}
.learning-checkpoint{margin:34px 0;padding:22px;border:1px solid rgba(103,198,255,.3);border-radius:18px;background:rgba(103,198,255,.05)}
.learning-checkpoint h2{font-size:clamp(22px,4vw,32px)}
.question-card{position:relative}
.question-card:after{content:"→";position:absolute;right:20px;bottom:18px;color:var(--cyan,#6bd1ff);font-weight:900}
.question-card p{padding-right:28px}

/* Make data-heavy content safe on narrow screens without shrinking the entire page. */
.page-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-content img,.page-content svg{max-width:100%;height:auto}
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .page-content,.page-intro,.sitebar-inner{min-width:0!important}
  .audience-grid{grid-template-columns:1fr}
  .audience-grid a{min-height:0;padding:16px}
  .question-card,.route-card,.explainer-card,.lesson-card{min-height:44px}
  .question-card{padding:20px!important}
  .question-card h2,.question-card h3{font-size:clamp(22px,6vw,29px)!important;line-height:1.12!important}
  .question-card p{font-size:16px!important;line-height:1.48!important}
  .lesson-card{grid-template-columns:46px 1fr;gap:12px;padding:18px}
  .lesson-no{font-size:23px}
  .lesson-card h3{font-size:21px;line-height:1.18}
  .lesson-card p{font-size:15px;line-height:1.5}
  .learning-hero .lead{font-size:18px}
  .synthesis-links{display:grid}
  .synthesis-links a,.next-lesson,.back-to-path{width:100%;box-sizing:border-box}
  .lesson-progress{font-size:11px}
  .lesson-orientation h1{font-size:30px!important;line-height:1.1!important}
  .editorial-guide{grid-template-columns:1fr!important}
  .page-content h2{overflow-wrap:anywhere}
  .page-content a:not(.brand){touch-action:manipulation}
}
@media(max-width:380px){
  .lesson-card{grid-template-columns:1fr}
  .lesson-no{font-size:18px}
  .question-card{padding:18px!important}
}

/* v6.2.1 — narrative wayfinding for long mobile pages */
.page-roadmap{max-width:980px;margin:22px auto 34px;padding:18px 20px;border:1px solid rgba(103,198,255,.25);border-radius:18px;background:rgba(103,198,255,.035)}
.page-roadmap ol{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.page-roadmap li{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-left:2px solid rgba(103,198,255,.35)}
.page-roadmap a{font-weight:800;text-decoration:none;color:var(--paper,#f4efe5)}
.page-roadmap span{font-size:13px;line-height:1.4;color:var(--muted,#bac5cf)}
.section-bridge,.research-bridge{max-width:850px;margin:10px 0 22px;padding:12px 15px;border-left:3px solid var(--cyan,#6bd1ff);background:rgba(103,198,255,.045);border-radius:0 12px 12px 0;color:var(--muted,#bac5cf);line-height:1.55}
.chapter-divider{margin:44px 0 20px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.chapter-divider h2{margin-bottom:6px}.chapter-divider p{color:var(--muted,#bac5cf);max-width:760px}
@media(max-width:760px){
 .page-roadmap{margin:18px 0 26px;padding:16px}.page-roadmap ol{grid-template-columns:1fr;gap:4px}.page-roadmap li{padding:9px 10px}
 .section-bridge,.research-bridge{font-size:15px;margin:8px 0 20px;padding:11px 13px}
 .chapter-divider{margin-top:34px}
}
/* v6.2.3 mobile QA hardening */
@media(max-width:430px){
  body{overflow-wrap:break-word}
  .page-content{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .audience-grid a,.lesson-card,.synthesis-card,.learning-checkpoint{box-sizing:border-box;max-width:100%}
  .lesson-progress{flex-wrap:wrap;row-gap:4px}
  .learning-promise{padding:15px 16px}
  .learning-checkpoint{padding:17px;margin:26px 0}
  .learning-checkpoint p{font-size:16px;line-height:1.55}
  .synthesis-card{padding:18px;margin:28px 0}
  .question-card:after{right:16px;bottom:15px}
  .econ-ladder{grid-template-columns:1fr!important}
}
@media(max-width:340px){
  .lesson-orientation h1{font-size:27px!important}
  .audience-grid strong{font-size:16px}
  .lesson-card h3{font-size:20px}
}