/* Shared proportions for the read-along and voice-idea cards. Subgrid keeps
   their copy and demo rows aligned even when the descriptions wrap differently. */
.reading-features{align-items:stretch;row-gap:24px}
.reading-features .reading-feature{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:24px;max-height:none;padding:32px 28px}
.reading-features .readalong-demo,.reading-features .voice-idea-demo{display:flex;flex-direction:column;min-width:0;margin:0;padding:20px 24px 18px;border:1px solid #d5d7c7;border-radius:20px;background:#fffaf2;box-shadow:0 7px 18px #193e3c08}
.reading-features .readalong-book,.reading-features .voice-demo-heading{min-height:44px}
.reading-features .readalong-book{display:flex;align-items:center;font-size:.64rem;letter-spacing:.1em}
.reading-features .voice-demo-toggle{min-height:44px}
.reading-features .readalong-text,.reading-features .voice-demo-scene{flex:1}
.reading-features .readalong-note,.reading-features .voice-idea-demo figcaption{margin-top:12px;font-size:.68rem;line-height:1.5;color:#697669;text-align:left}
@media(min-width:761px){
  .reading-features{grid-template-rows:auto auto}
  .reading-features .reading-feature{grid-row:span 2;grid-template-rows:subgrid}
}
@media(max-width:1100px){
  .reading-features .reading-feature{padding:28px}
  .reading-features .readalong-demo,.reading-features .voice-idea-demo{padding:18px}
}
@media(max-width:480px){
  .reading-features .reading-feature{padding:27px 24px;gap:22px}
  .reading-features .readalong-demo,.reading-features .voice-idea-demo{padding:16px 13px}
  .reading-features .readalong-book{font-size:.6rem}
}