@font-face { font-family: "RiaHeroNumbers"; src: url("/assets/support-report/fonts/fredoka.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }

.hero-copy h1 {
  color: var(--pink);
  font-size: 50px;
  line-height: 1.2;
  white-space: normal;
}

.home-hero { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: start; min-height: 500px; padding-top: 30px; padding-bottom: 28px; }
.hero-lead { line-height: 1.6; text-wrap: balance; }
.chrome-install-action { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.chrome-install-action .secondary-link { border-color: #e8a6c8; background: #fff2f9; }
.hero-more-actions { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.feature-link-intro { font-size: 14px; font-weight: 700; white-space: nowrap; }
.feature-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 24px; border: 1px solid var(--pink); border-radius: 999px; background: var(--pink); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; }
.feature-link:hover { border-color: var(--pink-dark); background: var(--pink-dark); }
.feature-link:focus-visible { outline: 3px solid #e8a6c8; outline-offset: 3px; }
.home-cta-arrow { flex: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--pink); animation: home-cta-nudge 1.1s ease-in-out infinite alternate; }
@keyframes home-cta-nudge { from { transform: translateX(-3px); } to { transform: translateX(3px); } }

.hero-visual {
  border: 0;
  background: transparent;
  position: relative;
  aspect-ratio: 1.18;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}

.feature-scatter { position: absolute; display: block; scale: 1; transition: scale .2s ease; }
.feature-scatter > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px #54374014); }
.feature-scatter:hover, .feature-scatter:focus-visible { scale: 1.035; }
.feature-scatter:focus-visible { outline: 3px solid #e83f8c; outline-offset: 3px; border-radius: 8px; }
.scatter-stamps { left: 2%; top: 0; width: 35%; height: 45%; transform: rotate(-5deg); }
.scatter-theme { right: 2%; top: 2%; width: 31%; height: 38%; transform: rotate(8deg); }
.scatter-quest { left: 0; bottom: 0; width: 37%; height: 48%; transform: rotate(-5deg); }
.scatter-catchup { left: 34%; bottom: 3%; width: 24%; height: 29%; transform: rotate(-5deg); }
.scatter-album { right: 0; bottom: 0; width: 43%; height: 43%; transform: rotate(5deg); }
.scatter-camera { left: 35%; top: 30%; width: 31%; height: 32%; z-index: 2; transform: rotate(-7deg); }
.scatter-guild { left: 37%; top: 1%; width: 25%; height: 29%; transform: rotate(4deg); }
.scatter-stamps > .burst-stamp { position: absolute; width: 27%; height: 27%; z-index: 1; filter: drop-shadow(0 2px 3px #8d355e30); }
.burst-heart { left: 37%; top: 37%; transform: rotate(10deg); }
.burst-clap { left: 9%; top: 24%; transform: rotate(-17deg); }
.burst-moon { left: 65%; top: 37%; transform: rotate(-14deg); }
.quest-caption { position: absolute; left: 19.1%; top: 26%; width: 65%; display: grid; justify-items: center; gap: 4px; text-align: center; color: #c62772; pointer-events: none; }
.quest-ornament { position: relative; display: block; width: 76%; height: 8px; }
.quest-ornament::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #c8913c 15%, #c8913c 85%, transparent); }
.quest-ornament::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border: 1px solid #b9802e; background: #e9ba62; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 2px #ffedc9; }
.quest-clear-mark { display: block; width: 100%; height: auto; object-fit: contain; }
.quest-bits { display: inline-flex; align-items: center; justify-content: center; gap: 0; translate: -5% 0; color: #9147ff; font-family: "RiaHeroNumbers", "Arial Rounded MT Bold", sans-serif; font-size: 34px; font-weight: 600; line-height: 1; }
.quest-bits b { font-weight: inherit; }
.quest-bits img { display: block; width: 30px; height: 38px; object-fit: contain; }

.hero-banner-image { object-fit: contain; }

.feature-icon {
  color: #7c174a;
  stroke-width: 2.4;
}

@media (max-width: 1100px) {
  .home-hero { column-gap: 28px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-lead { font-size: 19px; }
  .quest-caption { gap: 4px; }
  .quest-bits { font-size: 26px; }
  .quest-bits img { width: 24px; height: 30px; }
}

@media (max-width: 860px) {
  .hero-copy h1 { font-size: 42px; }
  .home-hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 26px; }
  .hero-visual { max-width: 280px; }
  .quest-bits { font-size: 22px; }
  .quest-bits img { width: 19px; height: 24px; }
}

@media (max-width: 560px) {
  .hero-copy h1 { font-size: 25px; }
  .home-header { flex-wrap: wrap; gap: 4px 16px; }
  .home-header nav { width: 100%; margin-left: 0; justify-content: flex-end; }
  .home-hero { gap: 18px; padding-top: 20px; padding-bottom: 22px; }
  .hero-lead { margin: 14px 0 20px; font-size: 17px; }
  .hero-visual { max-width: 210px; }
  .hero-more-actions { gap: 8px; }
  .feature-link { width: auto; min-height: 36px; padding: 0 18px; }
  .quest-caption { gap: 3px; }
  .quest-bits { font-size: 18px; }
  .quest-bits img { width: 15px; height: 20px; }
  .quest-ornament { height: 3px; }
  .quest-ornament::after { width: 4px; height: 4px; box-shadow: 0 0 0 1px #ffedc9; }
  .chrome-install-action { width: 100%; }
  .chrome-install-action .secondary-link { flex: 1; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cta-arrow { animation: none; }
  .feature-scatter { transition: none; }
}