/* Home page, phones only: keep the headings, the actions and the first few items; drop repeated explanation.
   Nothing is removed from the page itself, so desktop, search and screen readers are unaffected. */
@media (max-width: 600px) {
  /* hero: verse, translation, two buttons. The intro paragraph repeats what the tab bar already says. */
  .hero .verse + .lede { display: none; }
  .hero .verse + .cta { margin-top: 1.4rem; }

  /* start: titles and links only */
  .start .wrap { padding-block: 2rem; gap: 0.8rem; }
  .start .sub, .steps p { display: none; }
  .steps li { align-items: center; padding: 0.9rem 0; }
  .steps h3 { font-size: 1.2rem; }

  /* lineage: every link stays; only the intro text and footnote go */
  .tree .wrap { padding-block: 2.2rem; }
  .tree .head p, .tree .note { display: none; }
  .path { margin-top: 1.4rem; }

  /* library: three items per row and the "All" link; the Wazaif button is for large screens (the Read page has it on phones) */
  .sechead .wazaif { display: none; }
  .library .wrap, .audio .wrap, .visit .wrap { padding-block: 2.2rem; }
  .index { margin-top: 1rem; }
  .row { padding-block: 1rem; gap: 0.5rem; }
  .row li:nth-child(n+4):not(:last-child) { display: none; }

  /* audio: year dropdown, three tracks; collections live on the audio page */
  .audio .sub, .coll { display: none; }
  .audio .wrap { gap: 1.4rem; }
  .yearpick { margin-top: 1rem; max-width: none; }
  .tracks li:nth-child(n+4) { display: none; }

  /* visit */
  .visit .sub { display: none; }
  .visit .wrap { gap: 1rem; }
  .app { margin-top: 1rem; }
  .list a { padding: 0.9rem 0; }
}