/* Interaction-only refinements. Layout, palette, typography and imagery stay
   in each page's existing homepage-derived stylesheet. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #2e9bee;
  outline-offset: 4px;
}

section[id] {
  scroll-margin-top: 110px;
}

/* The page-specific entrance previously overrode the shared final state,
   leaving every revealed About element displaced by 18px. */
.about-page .reveal.in {
  transform: none;
}

.about-button svg {
  transition: transform 200ms ease;
}
.about-button:focus-visible svg {
  transform: translateX(3px);
}
@media (hover: hover) and (pointer: fine) {
  .about-button:hover svg {
    transform: translateX(3px);
  }
}

/* Native details keeps its keyboard/touch behavior; only the answer entrance
   is animated, without a height animation or layout-shifting hover treatment. */
#faq details[open] > p {
  animation: nh-answer-in 220ms ease-out both;
}
@keyframes nh-answer-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .about-page .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .about-button,
  .about-button svg,
  .sol-btn,
  .sol-tile-cta svg,
  #faq summary svg {
    transition: none;
  }
  .about-button:hover,
  .about-button:hover svg,
  .about-button:focus-visible svg,
  .sol-btn:hover,
  .sol-tile:hover .sol-tile-cta svg,
  .sol-tile:focus-within .sol-tile-cta svg {
    transform: none;
  }
  #faq details[open] > p {
    animation: none;
  }
}