.guide { max-width:800px; padding-block:56px 72px; }
.guide-intro { margin-bottom:32px; }
.guide h1 { font-size:clamp(2.2rem,4.5vw,3.5rem); max-width:760px; }
.guide h2 { font-size:clamp(1.6rem,3vw,2rem); letter-spacing:-.035em; }
.guide p { margin-top:18px; }
.guide .eyebrow { margin-top:0; margin-bottom:14px; }
.guide .guide-lede { font-size:1.25rem; line-height:1.55; margin-top:24px; }
.guide a:not(.button),.guide-home { text-decoration:underline; text-underline-offset:4px; }
.guide-jump { display:inline-block; padding-block:12px; margin-top:8px; color:var(--indigo-dark); font-weight:600; }
.guide-note { background:var(--lavender); padding:20px 24px; border-radius:12px; }
.guide-note p:first-child { margin-top:0; }
.guide-step { padding-block:36px; border-bottom:1px solid var(--line); }
.example { margin:22px 0; padding:20px 24px; border-left:3px solid var(--indigo); background:white; font-size:1.4rem; line-height:1.5; }
.example p { margin:0; }
.word-row { font-size:1.3rem; font-weight:500; }
.guide-audio { margin-block:18px; padding:18px 20px; background:white; border:1px solid var(--line); border-radius:12px; }
.guide-audio figcaption { font-weight:600; margin-bottom:12px; }
.guide-audio figcaption span { display:block; font-size:.8rem; font-weight:400; color:var(--muted); }
.guide-audio audio { display:block; width:100%; max-width:440px; }
.guide-audio audio:focus-visible { outline:3px solid var(--indigo); outline-offset:4px; border-radius:8px; }
.guide-audio .audio-fallback { display:inline-block; font-size:.8rem; padding-block:10px; color:var(--indigo-dark); }
.guide-list { list-style:decimal; padding-left:24px; margin-block:18px; }
.guide-list li { padding-left:6px; margin-top:14px; }
.guide-next { margin-top:40px; padding:32px; border-radius:16px; background:var(--lavender); }
.guide-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:24px; }
.guide-actions>a:not(.button) { padding-block:12px; }
.guide-related { margin-top:32px; }
.guide-related p { color:var(--muted); margin-bottom:8px; }
.guide-related a { display:inline-block; padding-block:8px; color:var(--indigo-dark); }
.guide-home { padding-block:12px; font-size:.9rem; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:20px; list-style:none; padding:0; margin:32px 0; }
.library-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:white; }
.library-card h2,.library-card h3 { margin:0; font-size:1.4rem; }
.library-jump { display:flex; flex-wrap:wrap; gap:8px 20px; margin:24px 0 0; }
.library-jump a { padding-block:8px; color:var(--indigo-dark); }
.library-card p:last-child { color:var(--muted); }
.listening-check { margin:24px 0; padding:22px; border:1px solid var(--line); border-radius:12px; }
.listening-check h3 { margin:0; }
.listening-check button { min-height:44px; margin:8px 8px 0 0; padding:8px 14px; border:1px solid var(--indigo); border-radius:8px; background:white; color:var(--indigo-dark); font:inherit; cursor:pointer; }
.listening-check button:focus-visible,.lesson-complete:focus-visible { outline:3px solid var(--indigo); outline-offset:3px; }
.quiz-answers { margin-top:12px; }
.lesson-complete { margin-top:16px; cursor:pointer; }
.audio-error { color:var(--muted); }
@media(max-width:640px) {
  .guide { padding-block:32px 48px; }
  .guide-nav { gap:12px; }
  .guide-nav .brand { font-size:1.25rem; }
  .guide-nav .brand img { width:28px; height:28px; }
  .guide-home { font-size:.8rem; }
  .guide .guide-lede { font-size:1.1rem; }
  .guide-step { padding-block:30px; }
  .guide-next { padding:24px 20px; }
  .guide-note,.example { padding:18px 20px; }
}
