/* Shared Watch and home hero lettering: bold sans with a clear expressive serif. */
.hero .hero-copy {
  width: min(48%, 650px);
  left: clamp(28px, 6.4vw, 104px);
  padding-right: 12px;
}
.hero .hero-kicker {
  margin-bottom: clamp(17px, 2.2vw, 30px);
  font-size: 9px;
  letter-spacing: .2em;
}
.hero h1 {
  max-width: 100%;
  font-size: clamp(62px, 6.1vw, 94px);
  line-height: .94;
  letter-spacing: -.075em;
  text-transform: none;
}
.hero h1 .mask-line {
  width: max-content;
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
}
.hero h1 .mask-line:nth-child(2) { margin-left: 0 !important; }
.hero h1 .mask-line:nth-child(3) {
  margin-top: .08em;
  padding: .04em .02em .08em;
  color: var(--blue);
  -webkit-text-stroke: 0;
}
.hero h1 .mask-line:nth-child(3) i {
  width: max-content;
  max-width: 100%;
  color: transparent;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: .68em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-transform: none;
  -webkit-text-stroke: 1px var(--blue);
}
.hero .hero-bottom {
  width: min(100%, 540px);
  margin-top: clamp(21px, 2.5vw, 34px);
}
.hero .hero-bottom > p { max-width: 350px; }
.hero .hero-actions { display: flex; align-items: stretch; gap: 12px; }
.hero .hero-actions .button { width: 210px; min-height: 54px; min-width: 0; padding-inline: 16px; gap: 14px; font-size: 10px; }

@media (min-width: 901px) {
  .hero .hero-copy { width: min(47%, 640px); }
  .hero h1 { font-size: clamp(62px, 5.8vw, 91px); }
}

@media (max-width: 900px) {
  .hero .hero-copy {
    width: 100%;
    padding: 24px 22px 0;
  }
  .hero .hero-kicker { margin-bottom: 14px; }
  .hero h1 {
    width: 100%;
    font-size: clamp(48px, 11.2vw, 68px);
    line-height: .98;
    letter-spacing: -.07em;
  }
  .hero h1 .mask-line { width: max-content; max-width: 100%; }
  .hero h1 .mask-line:nth-child(2) { margin-left: 0 !important; }
  .hero h1 .mask-line:nth-child(3) {
    width: max-content;
    margin-top: .04em;
  }
  .hero h1 .mask-line:nth-child(3) i {
    font-size: .68em;
    -webkit-text-stroke-width: .9px;
  }
  .hero .hero-bottom { width: min(100%, 300px); margin: 18px 0 0; }
  .hero .hero-bottom > p { max-width: 300px; font-size: 13px; line-height: 1.6; }
  .hero .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
  .hero .hero-actions .button { width: 100%; min-width: 0; min-height: 54px; padding-inline: 16px; font-size: 11px; }
}

@media (max-width: 480px) {
  .hero .hero-copy { width: 100%; margin-left: -28px; padding-inline: 18px; }
  .hero .hero-bottom { width: min(100%, 300px); }
  .hero h1 { font-size: clamp(46px, 12.1vw, 54px); }
  .hero h1 .mask-line:nth-child(3) i { font-size: .65em; }
  .hero .hero-bottom { margin-top: 16px; }
  .hero .hero-bottom > p { font-size: 12px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .mask-line i { transition: none !important; }
}