/* Features page-specific responsive typography and spacing */

@media (max-width: 768px) {
  /* Header */
  .page-features .page-header { padding: 2.25rem 1rem 1.75rem; }
  .page-features .page-header .container { max-width: none; width: 100%; margin: 0; padding: 0 0; }
  .page-features .page-title { font-size: 2rem; line-height: 1.2; margin-bottom: 0.5rem; }
  .page-features .page-subtitle { font-size: 1rem; line-height: 1.6; max-width: 28ch; }

  /* Feature nav */
  .page-features .feature-navigation { gap: 0.5rem; }
  .page-features .feature-nav-item { font-size: 0.95rem; padding: 0.5rem 0.6rem; }
  .page-features .feature-nav-item .nav-icon { font-size: 1.1rem; }

  /* Main sections */
  .page-features .feature-section h2 { font-size: 1.6rem; line-height: 1.25; }
  .page-features .feature-content p { font-size: 1rem; line-height: 1.7; }
  .page-features .feature-badge { font-size: 0.8rem; padding: 0.25rem 0.5rem; }

  /* Highlights */
  .page-features .highlight-item h4 { font-size: 1.1rem; }
  .page-features .highlight-item p { font-size: 0.95rem; }

  /* Layout stack */
  .page-features .feature-main { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .page-features .visual-placeholder { padding: 1.25rem; }

  /* Organizer steps */
  .page-features .organizer-step .step-number { font-size: 0.95rem; }
  .page-features .organizer-step h4 { font-size: 1.1rem; }
  .page-features .organizer-step p { font-size: 0.95rem; }

  /* Rewards section */
  .page-features .rewards-section h2 { font-size: 1.6rem; }
  .page-features .rewards-info p { font-size: 1rem; }
  .page-features .rewards-benefits .benefit { font-size: 0.95rem; }
}