/* HIRU.INK Final Hero & Mobile Conversion Polish V5
   Scoped overrides only. Existing desktop layout remains locked except hero title alignment. */

/* DESKTOP / TABLET LANDSCAPE: exact 3-line centered hero title */
@media (min-width: 769px) {
  .hero-intro {
    text-align: center !important;
  }

  .hero-intro .eyebrow {
    text-align: center !important;
  }

  .hero-title {
    text-align: center !important;
  }

  .hero-title .title-line {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  .hero-title .title-shirt {
    color: var(--color-primary) !important;
  }
}

/* MOBILE: exact 2-line heading: PREMIUM CUSTOM / T-SHIRT */
@media (max-width: 768px) {
  .hero-intro,
  .hero-title,
  .hero-intro .eyebrow {
    text-align: center !important;
  }

  .hero-title {
    display: block !important;
    font-size: clamp(1.95rem, 8.4vw, 2.28rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.9px !important;
    margin-inline: auto !important;
    max-width: 100% !important;
  }

  .hero-title .title-line {
    display: inline !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .hero-title .title-line:first-child::after {
    content: " ";
  }

  .hero-title .title-shirt {
    display: block !important;
    margin-top: .08em !important;
    color: var(--color-primary) !important;
    white-space: nowrap !important;
  }

  /* Keep the first viewport compact and conversion-focused. */
  .hero-intro {
    margin-bottom: .85rem !important;
  }

  .hero-image-area {
    margin-top: 0 !important;
  }

  /* Tighten lower feature area; removes unnecessary mobile dead space. */
  .feature-strip {
    width: calc(100% - 1rem) !important;
    margin-top: .5rem !important;
    margin-bottom: 2.25rem !important;
    padding: 1.85rem .75rem !important;
    border-radius: 16px !important;
  }

  .feature-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.65rem .75rem !important;
  }

  .feature-icon-wrapper {
    margin-bottom: .65rem !important;
  }

  .feature-text h3 {
    margin-bottom: .35rem !important;
    line-height: 1.25 !important;
  }

  .feature-text p {
    line-height: 1.35 !important;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(1.78rem, 8.2vw, 1.98rem) !important;
  }
}