/* MooGrid uses the existing ONANY privacy/support layout and shared product shell. */
.moogrid-page .moogrid-hero {
  display: grid;
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 88px 0 100px;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 76px;
  align-items: center;
}

.moogrid-page .moogrid-hero h1 {
  margin: 0 0 30px;
  font-size: clamp(48px, 5.8vw, 76px);
  font-weight: 690;
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.moogrid-page .moogrid-hero h1 em {
  color: var(--onany-indigo);
  font-style: normal;
}

.moogrid-page .moogrid-hero-icon {
  display: block;
  width: min(100%, 290px);
  height: auto;
  justify-self: center;
  border-radius: 24%;
  box-shadow: var(--onany-shadow);
}

.moogrid-page .moogrid-rules h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.moogrid-page .onany-policy-list a {
  color: var(--onany-indigo);
  text-underline-offset: 3px;
}

@media (max-width: 920px) {
  .moogrid-page .moogrid-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 36px;
  }
}

@media (max-width: 720px) {
  .moogrid-page .moogrid-hero {
    width: min(calc(100% - 32px), 560px);
    padding: 48px 0 64px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .moogrid-page .moogrid-hero h1 {
    font-size: clamp(40px, 11vw, 58px);
  }

  .moogrid-page .moogrid-hero-icon {
    width: 148px;
    grid-row: 1;
    justify-self: start;
  }
}