/* =============================================================================
   Free sample lesson page — scoped component styles (loaded only on /free-sample/).
   Uses the existing design-system tokens; styles.css stays unchanged.
   ============================================================================= */
.sample-lesson { max-width: 820px; margin-inline: auto; }
.sl-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-brand); background:var(--c-brand-soft); padding:5px 11px; border-radius:999px; margin-bottom:var(--s-3); }
.sl-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.5rem 0; }
.sl-step { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--c-line); border-radius:var(--r-md); padding:1rem 1.1rem; background:#fff; }
.sl-step .sl-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--c-brand-soft); color:var(--c-brand-dark); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.sl-step p { margin:0; font-size:.95rem; line-height:1.5; }

.sample-quiz { max-width:760px; margin-inline:auto; }
.sq-item { border:1px solid var(--c-line); border-radius:var(--r-lg); padding:1.25rem 1.4rem; margin-bottom:1rem; background:#fff; box-shadow:var(--sh-md); }
.sq-q { font-weight:700; font-size:1.02rem; margin:0 0 .9rem; color:var(--c-ink); }
.sq-q .sq-n { color:var(--c-muted); font-weight:600; margin-right:.4rem; }
.sq-opts { display:flex; flex-direction:column; gap:.55rem; }
.sq-opt { text-align:left; font:inherit; font-size:.95rem; color:var(--c-ink); background:#fff; border:1.5px solid var(--c-line); border-radius:var(--r-md); padding:.7rem 1rem; cursor:pointer; transition:border-color .15s, background .15s; }
.sq-opt:hover:not([disabled]) { border-color:var(--c-brand); background:var(--c-brand-soft); }
.sq-opt[disabled] { cursor:default; }
.sq-opt.is-correct { border-color:#2e8b57; background:#E6F5EC; color:#0f5a32; font-weight:600; }
.sq-opt.is-wrong { border-color:#d64545; background:#FCEBEB; color:#8a1f1f; }
.sq-fb { margin-top:.85rem; padding:.75rem 1rem; border-radius:var(--r-md); font-size:.92rem; line-height:1.55; }
.sq-fb.ok { background:#E6F5EC; color:#0f5a32; }
.sq-fb.no { background:#FCEBEB; color:#8a1f1f; }
.sq-score { margin-top:1.25rem; text-align:center; font-size:1rem; color:var(--c-ink); background:var(--c-brand-soft); border-radius:var(--r-md); padding:1rem 1.25rem; }

.sl-modules { list-style:none; padding:0; margin:1.25rem 0 0; max-width:560px; }
.sl-modules li { display:flex; align-items:center; gap:12px; padding:.7rem .25rem; border-bottom:1px solid var(--c-line); font-size:.98rem; }
.sl-modules li:last-child { border-bottom:0; }
.sl-modules .sl-mnum { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#fff; border:1.5px solid var(--c-line); color:var(--c-muted); font-weight:700; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.sl-modules .is-previewed { color:var(--c-brand-dark); font-weight:600; }
.sl-modules .is-previewed .sl-mnum { background:var(--c-brand-soft); border-color:var(--c-brand); color:var(--c-brand-dark); }
.sl-previewed-tag { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-brand); margin-left:auto; }