.kalaam-demonstration {padding-bottom:64px;}
.sample-hero {max-width:1120px;margin:0 auto;padding:48px 28px 54px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.sample-intro h1 {font-size:clamp(34px,4vw,52px);line-height:1.15;letter-spacing:-1.2px;color:var(--teal-dark);margin:16px 0 22px;}
.sample-intro p {font-size:18px;line-height:1.65;}
.sample-intro .hero-word {font-family:me_quran,serif;font-size:50px;line-height:2;color:var(--teal-dark);margin:6px 0;}
.sample-intro .hero-meaning {font-weight:600;font-size:21px;}
.text-link {display:inline-block;margin-top:10px;color:var(--teal-dark);font-weight:600;text-underline-offset:5px;}
.memory-picture {margin:0;}
.memory-picture img {display:block;width:100%;height:auto;border-radius:14px;}
.memory-picture figcaption {font-size:13px;line-height:1.8;color:var(--muted);margin-top:12px;}
.memory-picture figcaption [lang=ar] {font-family:me_quran,serif;font-size:18px;}
.sample-step {max-width:1000px;margin:0 auto;padding:44px 28px;border-top:1px solid var(--line);scroll-margin-top:88px;}
.step-label {font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--teal);}
.sample-step h2,.sample-next h2 {font-size:clamp(27px,3vw,36px);line-height:1.3;letter-spacing:-.6px;color:var(--teal-dark);margin:12px 0 18px;}
.sample-step p,.sample-next p {font-size:17px;line-height:1.8;}
.word-breakdown {padding:14px 20px 20px;background:#fff;border:1px solid var(--line);border-radius:20px;margin:26px 0;}
.word-breakdown .whole-word {font-family:me_quran,serif;font-size:50px;line-height:2;text-align:center;color:var(--teal-dark);margin:0 0 18px;}
.word-pieces {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
.word-piece {display:flex;flex-direction:column;align-items:center;justify-content:start;padding:10px 8px;border-radius:12px;background:#e3f1fa;text-align:center;}
.word-piece:nth-child(even) {background:#f8eadf;}
.piece-arabic {font-family:me_quran,serif;font-size:36px;line-height:2.2;color:#283944;}
.piece-meaning {font-size:15px;font-weight:600;line-height:1.5;}
.word-breakdown .translation {font-size:18px;text-align:center;font-weight:600;color:var(--teal-dark);margin:22px 0 0;}
.sample-step .source-note {font-size:13px;line-height:1.8;color:var(--muted);}
.source-note a {text-underline-offset:3px;}
.quick-check {padding:22px 26px;margin:28px 0 0;background:#edf5f8;border-radius:18px;}
.quick-check h3 {font-size:21px;line-height:1.4;color:var(--teal-dark);margin:0 0 10px;}
.quick-check p {margin:8px 0;}
.quick-check summary {cursor:pointer;color:var(--teal-dark);font-weight:600;padding:12px 0;min-height:44px;}
.quick-check details[open] summary {border-bottom:1px solid var(--line);}
.quick-check details p {padding-top:10px;}
table {border-collapse:separate;border-spacing:0;width:100%;margin:28px 0 20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white;table-layout:fixed;font-size:15px;line-height:1.65;}
caption {text-align:left;font-weight:600;margin-bottom:12px;color:var(--teal-dark);}
th,td {text-align:left;vertical-align:top;padding:18px;border-bottom:1px solid var(--line);}
thead th {background:#edf5f8;color:var(--teal-dark);}
thead th:first-child {width:20%;}
th[scope=row] {font-weight:600;color:var(--teal-dark);}
td:last-child,thead th:last-child {background:#e3f1fa;}
tbody tr:last-child>* {border-bottom:none;}
.sample-next {max-width:960px;margin:20px auto 0;padding:36px 42px;border-radius:24px;background:#e3f1fa;}
.sample-next .button {margin:12px 0;}
.sample-next .access-note {font-size:15px;margin-top:20px;}
.sample-next .teacher-note {font-size:13px;color:var(--muted);}
@media(max-width:700px){
.sample-hero{grid-template-columns:1fr;padding:28px 22px 34px;gap:24px;}
.sample-intro h1{font-size:36px;margin:12px 0 16px;}
.sample-intro p{font-size:16px;}
.sample-intro .hero-word{font-size:43px;}
.sample-intro .hero-meaning{font-size:19px;}
.memory-picture{max-width:440px;justify-self:center;}
.sample-step{padding:34px 22px;}
.sample-step p,.sample-next p{font-size:16px;}
.word-breakdown{padding:12px 10px 18px;}
.word-breakdown .whole-word{font-size:39px;}
.word-pieces{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.word-piece{padding:6px;}
.piece-arabic{font-size:33px;}
.piece-meaning{font-size:14px;}
.quick-check{padding:20px;}
table{font-size:14px;table-layout:auto;}
caption{margin-bottom:12px;}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
tbody{display:block;}
tr{display:grid;grid-template-columns:1fr 1fr;}
th[scope=row]{grid-column:1/-1;padding:14px 14px 8px;background:#fff;border-bottom:0;}
td{display:block;padding:8px 14px 18px;overflow-wrap:break-word;}
td:before{display:block;font-size:12px;line-height:1.5;font-weight:600;color:var(--teal-dark);margin-bottom:8px;}
td:nth-child(2):before{content:"Grammar-first study";}
td:nth-child(3):before{content:"With Kalaam";}
.sample-next{margin:18px 16px 0;padding:28px 22px;border-radius:18px;}
}