/* Detailed Features page styles */
:root {
  --toc-width: 280px;
}

.features-hero {
  /* Extra top padding to clear fixed navbar */
  padding: 120px 0 40px;
  /* High-contrast background for strong separation */
  background: linear-gradient(135deg, #002F4B 0%, #007FA3 100%);
  color: #fff;
}
.page-title { font-size: 2.2rem; margin-bottom: .4rem; color: #fff; }
.page-subtitle { color: rgba(255,255,255,0.92); max-width: 900px; }

.search-wrap { position: relative; margin-top: 18px; max-width: 640px; }
.search-wrap input { width: 100%; padding: 12px 40px 12px 14px; border: 1px solid rgba(255,255,255,.25); background: #fff; color: #1b2a34; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.search-wrap i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #4b6977; }

.detailed-features { display: grid; grid-template-columns: var(--toc-width) 1fr; gap: 28px; align-items: start; }
.toc { position: sticky; top: 100px; max-height: calc(100vh - 120px); padding-bottom: 24px; }
.toc-link { display: block; padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; color: var(--dark-gray); text-decoration: none; border: 1px solid transparent; }
.toc-link.active, .toc-link:hover { background: #f1f7fb; border-color: #d9eef6; }
.toc-link i { width: 18px; margin-right: 8px; }
.toc-cta { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn-small { padding: 8px 12px; font-size: .9rem; }

.content { padding-bottom: 50px; }
.feature-article { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 24px; margin-bottom: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.feature-article h2 { margin: 0 0 8px; font-size: 1.6rem; }
.feature-article .lead { color: var(--medium-gray); margin: 0 0 14px; }
/* Add clearer spacing between sub-sections */
.feature-article h3 { margin: 18px 0 6px; }
.feature-article .cols > div ul + h3,
.feature-article .cols > div ol + h3,
.feature-article .cols > div p + h3 { margin-top: 22px; }
.feature-article .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-article ul { padding-left: 18px; }
.feature-article ul, .feature-article ol { margin: 0 0 8px; }
.feature-article ol { padding-left: 18px; }
.learn-more a { color: #007fa3; text-decoration: underline; }

.faq { margin-top: 12px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq-list { margin-top: 10px; display: grid; gap: 10px; }
.faq-item h4 { margin: 0 0 4px; font-size: 1rem; }
.faq-item p { margin: 0; color: var(--medium-gray); }

/* Responsive */
@media (max-width: 1024px) {
  :root { --toc-width: 240px; }
}
@media (max-width: 820px) {
  .detailed-features { grid-template-columns: 1fr; }
  .toc { position: static; order: -1; }
  .feature-article .cols { grid-template-columns: 1fr; }
}