/* Phone typography: one scale for every public page and every website layout, loaded last.
   Before this, phones showed page titles at 28 or 30px, section headings anywhere from 24 to 31px
   (form headings larger than the page title), card titles from 14 to 23px, reading text at 12 to
   13.5px and labels at up to 16px. Hindi needs extra line height for the marks above and below the
   letters, so every heading gets at least 1.25.
   Scale: page title 28, home name 34, section 23, panel 21, card 18, reading text 15 to 16,
   helper text 13, labels and kickers 13. Long-form article text keeps rich-article.css. */
@media (max-width:640px){
  /* Headings: room for Devanagari marks, balanced line breaks, long words wrap instead of overflowing. */
  body[class] main :is(h1,h2,h3,h4){line-height:1.3;letter-spacing:0;overflow-wrap:break-word;text-wrap:balance}

  /* Page title in every inner-page hero. */
  body[class] main :is(.page-hero,.modern-hero) h1{font-size:28px;line-height:1.25}
  /* The leader's name on the home hero stays the largest text on the site. */
  body[class] main :is(.hero,.cb-hero,.cm-hero,.jsb-hero,.po-hero) h1{font-size:34px;line-height:1.15}
  body[class] main :is(.hero,.cb-hero,.cm-hero,.jsb-hero,.po-hero) h2{font-size:19px;line-height:1.4}
  body[class] main .hero .slogan{font-size:17px;line-height:1.45}
  body[class] main .hero .eyebrow{font-size:14px;line-height:1.4}

  /* Section headings, then smaller headings inside forms and side panels, so the page title leads. */
  body[class] main h2:not(:is(.hero,.cb-hero,.cm-hero,.jsb-hero,.po-hero,.modern-richtext,.rich-content) h2){font-size:23px;line-height:1.3}
  body[class] main :is(.contact-form-card,.tracking-panel,.genz-form-card,.contact-panel,.modern-card,aside) h2:not(:is(.modern-richtext,.rich-content) h2){font-size:21px}

  /* Card and list titles. */
  body[class] main h3:not(:is(.modern-richtext,.rich-content) h3){font-size:18px;line-height:1.35}
  body[class] main .feature-strip h3{font-size:15.5px}

  /* Intro under each page title. */
  body[class] main :is(.page-hero,.modern-hero) p:not([class*="kicker"]):not(.breadcrumbs),
  body[class] main .modern-hero-lead{font-size:16px;line-height:1.6}

  /* Reading text in cards and notes: never below 15px on a phone. */
  body[class] main :is(.pc-head,.initiative-card,.news-card-modern-body,.initiative-modern-body,.genz-benefit,.meeting-first-note,.feature-strip,.news-card,.outreach-card) p,
  body[class] main .yuva-grievance-link{font-size:15px;line-height:1.6}
  body[class] main .modern-mini p{font-size:14.5px;line-height:1.55}

  /* Form labels and the consent line. */
  body[class] main .contact-form-grid>label,
  body[class] main .contact-form-grid>fieldset>legend{font-size:15px}
  body[class] main .consent-check span{font-size:14px;line-height:1.5}

  /* Helper text, meta lines, links and steps: small but readable. */
  body[class] main :is(label,.contact-form-grid,.voice-row,.yuva-quick-row,.contact-submit) small,
  body[class] main .yuva-quick-note{font-size:13px;line-height:1.45}
  body[class] main :is(.news-meta,.modern-breadcrumbs,.breadcrumbs,.gallery-meta) :is(span,a),
  body[class] main :is(.modern-breadcrumbs,.breadcrumbs){font-size:13px}
  body[class] main :is(.read-more,.modern-section-link,.help-track-link){font-size:14.5px}
  body[class] main .help-steps li{font-size:13.5px}
  /* Second lines under action cards (People Connect, Contact office actions) and short notes. */
  body[class] main :is(a,span,div)>small{font-size:13px;line-height:1.4}
  body[class] main .modern-anchor-nav .toc-sub{font-size:13.5px}

  /* Kickers and chips sit above headings: small, firm and never louder than the heading. */
  body[class] main :is(.section-kicker,.help-kicker,.office-kicker,.modern-kicker,.pc-kicker){font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.02em}
  body[class] main .modern-chip{font-size:13px}

  /* JanSampark Bold layout: its pills, kickers, buttons and news dates ran at 9 to 12px. */
  body[class] main :is(.jsb-kicker,.jsb-party-pill span){font-size:13px;line-height:1.35}
  body[class] main .jsb-btn{font-size:14.5px}
  body[class] main .jsb-title-row>a{font-size:14px}
  body[class] main .jsb-news-grid article small{font-size:12.5px;letter-spacing:.03em}
}