/* Content and links remain available when enhancement is unavailable. */
[hidden] { display: none !important; }
.reveal { opacity: 1; transform: none; }
.sp-faq-a, .sp-faq-row.is-open .sp-faq-a { max-height: none; overflow: visible; }
.sp-header:not([data-nav-ready]) .sp-menu-btn { display: none; }
@media (max-width: 1100px) {
  .sp-header:not([data-nav-ready]) .sp-mobile-nav { display: flex; }
}
.sp-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--siili-green); color: var(--siili-black);
  font-weight: 800; transform: translateY(-160%);
}
.sp-skip-link:focus { transform: translateY(0); }
body :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--siili-green); outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--siili-black);
}
main:focus { outline: none; }
main, section[id], article[id] { scroll-margin-top: 100px; }
.sp-nav { gap: 22px; }
.sp-hero { min-height: 620px; padding: 48px 0 80px; }
.sp-hero-inner { padding-top: 32px; }
.sp-hero-title { font-size: clamp(34px, 6vw, 76px); line-height: .98; max-width: 900px; }
.sp-hero-lede + .sp-hero-lede { font-size: 16px; color: var(--siili-green); margin-bottom: 24px; }
@media (max-width: 720px) {
  .sp-hero { min-height: auto; padding: 24px 0 36px; }
  .sp-hero-inner { padding-top: 12px; }
  .sp-hero-title { font-size: clamp(32px, 9.5vw, 54px); }
}
.sp-form-help { color: var(--siili-grey-700); font-size: 14px; line-height: 1.6; }
.sp-form-help a { color: inherit; }
.sp-kl-content, .sp-kl-sidebar, .sp-kampanja-text, .sp-kampanja-image,
.sp-valmennus-text, .sp-valmennus-form { min-width: 0; }
.sp-guide-table--compact { table-layout: fixed; }
.sp-guide-table--compact :is(th, td) { overflow-wrap: anywhere; }
.sp-kl-content :is(p, li), .sp-guide-article a { overflow-wrap: anywhere; }
.sp-kl-content a:not(.sp-btn), .sp-faq-a a {
  color: var(--siili-green); text-decoration: underline; text-underline-offset: 3px;
}
.sp-valmennus-text h2, .sp-benefit-title, .sp-guide-cta h2 {
  hyphens: auto; overflow-wrap: anywhere;
}
.sp-valmennus-form .sp-field label .opt { color: var(--siili-grey-700); }
.sp-kampanja-note { color: rgba(255, 255, 255, .74); }
.sp-footer-col h2 {
  font-family: var(--font-headline); font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--siili-green); margin: 0 0 18px;
}
.sp-feature h2 {
  font-family: var(--font-headline); font-size: 18px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--siili-green); margin: 0 0 8px;
}
@media (max-width: 900px) {
  .sp-kampanja-inner, .sp-valmennus-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sp-kl-grid { padding: 0 20px; grid-template-columns: minmax(0, 1fr); }
  .sp-tier-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-kl-hero h1, .sp-guide-hero h1 { font-size: clamp(32px, 9.5vw, 48px); }
  .sp-kampanja-text h2 { font-size: clamp(30px, 8.6vw, 48px); }
}
@media (max-width: 360px) {
  .sp-board-header h2, .sp-section-head h2 { font-size: 28px; }
  .sp-hero-title { font-size: 30px; }
  .sp-kl-content h2, .sp-guide-article h2, .sp-guide-cta h2,
  .sp-valmennus-text h2, .sp-benefit-title {
    hyphens: auto; overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sp-btn, .sp-faq-toggle, .sp-faq-a, .reveal, .sp-benefit, .sp-board-card {
    transition: none; transform: none;
  }
}