/* Features page minimal enhancements. Assumes base.css defines core layout, container, buttons, and color tokens. */
.page-hero { padding: 3rem 0 2rem; }
.page-hero .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.page-hero .hero-copy .lead { margin: 0.75rem 0 1.25rem; }
.page-hero .hero-media img { width: 100%; height: auto; border-radius: 0.5rem; }

.section { padding: 2.5rem 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.feature-list, .bullets, .numbered { margin-top: 1rem; }
.feature-list li { margin: 0.35rem 0; }
.bullets li { margin: 0.25rem 0; }
.numbered { counter-reset: num; list-style: decimal inside; }

.tips-search { margin-bottom: 1rem; }
.tips-search input[type="search"] { width: 100%; max-width: 28rem; }
.tips-list { display: grid; gap: 0.5rem; }
.tips-list li { padding: 0.75rem 1rem; border: 1px solid var(--surface-3, rgba(255,255,255,0.08)); border-radius: 0.5rem; }
.more-cta { margin-top: 0.75rem; }

.faq details { border: 1px solid var(--surface-3, rgba(255,255,255,0.08)); border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 0.5rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }

.download-links { display: grid; gap: 0.5rem; margin-top: 0.75rem; }

.interactive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.quiz .q { margin: 0.75rem 0; }
.quiz-result { margin-top: 0.75rem; font-weight: 600; }
.poll .poll-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.poll .poll-bars { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.poll .bar { display: grid; grid-template-columns: 10rem 1fr 3rem; align-items: center; gap: 0.5rem; }
.poll .bar::after { content: ""; height: 0.5rem; background: linear-gradient(90deg, #17f1ff, #a100ff); border-radius: 0.25rem; width: var(--pct, 0%); transition: width 240ms ease; }
.poll .bar span { opacity: 0.9; }
.poll .bar .value { text-align: right; font-variant-numeric: tabular-nums; }
.poll-feedback { margin-top: 0.5rem; opacity: 0.9; }

.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }

@media (max-width: 980px) {
  .page-hero .hero-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .interactive-grid { grid-template-columns: 1fr; }
}