/* ==========================================================================
   ROUND 3.4 / HEADLINE CORRECTION
   No crossing lines. Controlled rhythm. Reliable narrow-screen fitting.
   ========================================================================== */

/* The headline must remain visible even when JavaScript does not execute. */
.refined-hero-line > span {
  opacity: 1 !important;
  transform: translateY(0) !important;
  clip-path: inset(-10% -8% -16% -8%) !important;
}

.refined-hero-lower {
  opacity: 1;
  transform: none;
}

.refined-xray {
  opacity: 1;
  transform: translate(0, 7px) rotate(.18deg);
}

/* A little more breathing room makes the block feel controlled, not cramped. */
.refined-hero-display {
  line-height: .86;
}

/* Let OUTGROWN expand without beginning in a damaged-looking state. */
.refined-hero-line--outgrown strong {
  letter-spacing: -.075em;
}

.hero--ready .refined-hero-line--outgrown strong {
  letter-spacing: -.045em;
}

/* Remove the accidental orange rule beneath and between the words. */
.refined-signal-phrase::after,
.hero--ready .refined-signal-phrase::after {
  content: none !important;
  display: none !important;
}

/* Remove the architectural rule that could cross the headline at some widths. */
.refined-hero-grid::before {
  content: none !important;
  display: none !important;
}

/* The commercial conclusion should read as a clean, confident phrase. */
.refined-hero-line--signal {
  font-size: .72em;
}

.refined-signal-phrase {
  gap: .12em;
  padding: 0 .05em 0 0;
  white-space: nowrap;
}

.refined-signal-word {
  display: inline-block;
  flex: 0 0 auto;
}

/* The plus is punctuation, not another animation event. */
.refined-signal-plus,
.hero--ready .refined-signal-plus {
  width: .50em;
  height: .50em;
  transform: none !important;
  transition: none !important;
}

/* Browser-native entrance enhancement. Unsupported browsers simply show the
   completed, fully readable headline rather than hiding it. */
@supports (selector(@starting-style)) {
  @starting-style {
    .hero--ready .refined-hero-line > span {
      opacity: 0;
      transform: translateY(92%);
      clip-path: inset(0 0 100% 0);
    }

    .hero--ready .refined-hero-lower {
      opacity: 0;
      transform: translateY(18px);
    }

    .hero--ready .refined-xray {
      opacity: 0;
      transform: translate(24px, 12px) rotate(.55deg);
    }
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .refined-hero-line--signal {
    font-size: .69em;
  }
}

@media (max-width: 760px) {
  .refined-hero-display {
    line-height: .90;
  }

  .refined-hero-line--signal {
    font-size: .63em;
  }

  .refined-signal-phrase {
    gap: .105em;
  }
}

@media (max-width: 390px) {
  .refined-hero-line--signal {
    font-size: .615em;
  }
}

/* At genuinely narrow widths, split deliberately instead of shrinking or
   clipping SOLD. The second line remains one protected "+ SOLD." unit. */
@media (max-width: 350px) {
  .refined-hero-line--signal {
    width: 100%;
    font-size: .68em;
    line-height: .90;
  }

  .refined-signal-phrase {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    column-gap: .12em;
    row-gap: .025em;
    white-space: normal;
  }

  .refined-signal-word--presented {
    grid-column: 1 / -1;
  }

  .refined-signal-plus {
    grid-column: 1;
  }

  .refined-signal-word--sold {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .refined-hero-line > span,
  .refined-hero-line--outgrown strong,
  .refined-hero-lower,
  .refined-xray {
    transition: none !important;
  }
}


/* Round 3.5: replace pseudo-drawn plus with a real glyph for reliability */
.refined-signal-plus,
.hero--ready .refined-signal-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: .42em;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: baseline;
  transform: translateY(-.02em) !important;
}

.refined-signal-plus::before,
.refined-signal-plus::after {
  content: none !important;
  display: none !important;
}

.refined-signal-word--sold {
  margin-left: .01em;
}

@media (max-width: 350px) {
  .refined-signal-plus,
  .hero--ready .refined-signal-plus {
    justify-content: flex-start;
    min-width: .36em;
  }
}