/* Displays page specific styles - keep minimal and complementary to base.css */

.hero-displays {
  background: var(--metal-sheen);
}
.hero-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr; align-items: center;
}
.hero-copy { display: grid; gap: var(--space-4); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media { max-width: 720px; margin-inline: auto; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero-media { max-width: 100%; }
}

/* In-page navigation */
.toc-nav {
  position: sticky; top: 0; z-index: 40; /* sits below sticky header z:50 */
  background: var(--color-surface); border-block: 1px solid var(--color-border);
}
.toc-inner { display: flex; align-items: center; justify-content: flex-start; }
.toc-list { display: flex; flex-wrap: nowrap; gap: var(--space-4); overflow-x: auto; padding-block: var(--space-3); }
.toc-link { color: var(--gray-700); font-weight: 600; white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.toc-link:hover { text-decoration: none; color: var(--color-primary); }
.toc-link.is-active { color: #fff; background: var(--color-navy); border-color: var(--color-navy); }

/* Feature cards */
.features-grid { --grid-min: 18rem; }
.features-grid { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)); gap: var(--space-6); }
.display-card ul { margin-top: var(--space-4); padding-left: 1.1rem; }
.display-card li { list-style: disc; color: var(--gray-700); }

/* Benefits */
.benefits-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }

/* Options grid */
.options-grid { --grid-min: 15rem; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)); gap: var(--space-6); margin-top: var(--space-6); }

/* Case studies */
.case-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.case-item { display: grid; gap: var(--space-6); }
.case-media { order: -1; }
.case-copy ul { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); list-style: none; padding: 0; }

@media (min-width: 960px) {
  .case-item { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .case-media { order: 0; }
}

/* Trends */
.trends-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

/* Choose steps */
.choose-steps { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-left: 1.25rem; }
.choose-steps li { padding-left: 0.25rem; }

/* Interactive grid */
.interactive-grid { --grid-min: 16rem; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr)); gap: var(--space-6); }

/* Maintenance */
.maintenance-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6); margin-top: var(--space-4); }