/* Fix text-stroke issues on mobile devices */

/* Use text-shadow instead of webkit-text-stroke for better mobile support */
@media (max-width: 768px) {
  .section-number {
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    text-shadow: 
      -2px -2px 0 var(--black),
      2px -2px 0 var(--black),
      -2px 2px 0 var(--black),
      2px 2px 0 var(--black),
      -2px 0 0 var(--black),
      2px 0 0 var(--black),
      0 -2px 0 var(--black),
      0 2px 0 var(--black);
  }

  .card-number {
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    text-shadow: 
      -1.5px -1.5px 0 var(--black),
      1.5px -1.5px 0 var(--black),
      -1.5px 1.5px 0 var(--black),
      1.5px 1.5px 0 var(--black),
      -1.5px 0 0 var(--black),
      1.5px 0 0 var(--black),
      0 -1.5px 0 var(--black),
      0 1.5px 0 var(--black);
  }

  .step-number {
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    text-shadow: 
      -1.5px -1.5px 0 var(--black),
      1.5px -1.5px 0 var(--black),
      -1.5px 1.5px 0 var(--black),
      1.5px 1.5px 0 var(--black),
      -1.5px 0 0 var(--black),
      1.5px 0 0 var(--black),
      0 -1.5px 0 var(--black),
      0 1.5px 0 var(--black);
  }

  .cta-title-accent {
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    text-shadow: 
      -1.5px -1.5px 0 var(--black),
      1.5px -1.5px 0 var(--black),
      -1.5px 1.5px 0 var(--black),
      1.5px 1.5px 0 var(--black),
      -1.5px 0 0 var(--black),
      1.5px 0 0 var(--black),
      0 -1.5px 0 var(--black),
      0 1.5px 0 var(--black);
  }
}

/* Extra small mobile - thinner stroke */
@media (max-width: 480px) {
  .section-number {
    text-shadow: 
      -1px -1px 0 var(--black),
      1px -1px 0 var(--black),
      -1px 1px 0 var(--black),
      1px 1px 0 var(--black),
      -1px 0 0 var(--black),
      1px 0 0 var(--black),
      0 -1px 0 var(--black),
      0 1px 0 var(--black);
  }

  .card-number,
  .step-number,
  .cta-title-accent {
    text-shadow: 
      -1px -1px 0 var(--black),
      1px -1px 0 var(--black),
      -1px 1px 0 var(--black),
      1px 1px 0 var(--black),
      -1px 0 0 var(--black),
      1px 0 0 var(--black),
      0 -1px 0 var(--black),
      0 1px 0 var(--black);
  }
}