/* Highlights use the home page's cards and the existing fansite-kit palette. */
.highlights-grid .card-title a { color: inherit; text-decoration: none; }
.highlights-grid .card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.highlights-grid .card-title a:focus-visible,
.features-jump a:focus-visible { outline: 2px solid var(--text-main); outline-offset: 5px; border-radius: 3px; }
.highlights-grid .highlight-shot { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.features-intro { padding-top: 144px; padding-bottom: 56px; }
.features-intro h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; margin-bottom: 24px; letter-spacing: -0.035em; }
.features-intro .section-paragraph { margin-bottom: 0; }
.features-jump { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; }
.features-jump a { color: var(--text-main); text-underline-offset: 5px; }
.feature-details { max-width: 780px; margin-top: 40px; }
.feature-detail { scroll-margin-top: 100px; }
.feature-detail + .feature-detail { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border-color); }
.feature-detail h3 { font-size: 1.375rem; line-height: 1.3; margin-bottom: 12px; }
.feature-detail p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.75; }
.feature-detail a { color: var(--text-main); text-underline-offset: 3px; }
@media (max-width: 768px) {
  .features-intro { padding-top: 108px; padding-bottom: 40px; }
  .highlights-grid .bento-content { padding: 28px; }
}