/* Exact owner-approved ScoreCraft imagery. Do not regenerate or substitute these assets. */
.sprite{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color:var(--navy);
}

/* Above-the-fold / early-page imagery loads immediately. */
.sprite-hero{background-image:url('/assets/cinematic_golf_strategy_map.png')}
.sprite-about{background-image:url('/assets/golden_hour_golf_shot_analytics.png');aspect-ratio:4/3;min-height:440px}

/* Focus-card photography is deferred until the cards approach the viewport. */
.sprite-focus-chain.is-loaded{background-image:url('/assets/focus-chain.png')}
.sprite-focus-big.is-loaded{background-image:url('/assets/focus-big.png')}
.sprite-focus-risk.is-loaded{background-image:url('/assets/focus-risk.png')}
.sprite-focus-putt.is-loaded{background-image:url('/assets/focus-putt.png')}

.sprite-hero,.sprite-about,.sprite-focus-chain,.sprite-focus-big,.sprite-focus-risk,.sprite-focus-putt{
  background-position:center;
  background-size:cover;
}

@media(max-width:760px){
  .sprite-about{min-height:320px}

  /* Collapsed grid/flex children must be allowed to shrink to the viewport. */
  .hero-grid > *,
  .split-section > *,
  .method-grid > *,
  .focus-grid > *,
  .signup-grid > *,
  .row-heading > *{
    min-width:0;
    max-width:100%;
  }

  .hero-copy,
  .strategy-board,
  .about-visual,
  .section-heading,
  .method-grid article,
  .focus-card,
  .signup-form{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  /* Keep the hero headline inside a 390px-class viewport without clipping. */
  h1{
    font-size:clamp(42px,12vw,58px);
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }

  h2,h3,p{
    max-width:100%;
    overflow-wrap:break-word;
  }

  /* Feature rows can wrap instead of establishing an intrinsic page width. */
  .hero-points{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    max-width:100%;
  }

  .hero-points span{
    min-width:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
    line-height:1.3;
  }

  .strategy-image,
  .sprite{
    width:100%;
    max-width:100%;
  }

  /* Final safeguard: mobile content must never create a sideways page scroll. */
  html,body{
    max-width:100%;
    overflow-x:clip;
  }
}