/* Features page — minimal, builds on base.css */
.features-hero { position: relative; color: var(--text-on-dark, #fff); background: linear-gradient(180deg, rgba(10,10,14,0.6) 0%, rgba(10,10,14,0.9) 100%); }
.features-hero__media { max-height: 46rem; overflow: hidden; }
.features-hero__media img { width: 100%; height: auto; display: block; object-fit: cover; filter: contrast(1.05) saturate(0.9) brightness(0.9); }
.features-hero__content { margin-top: -8rem; padding-bottom: 1rem; }
.features-hero .eyebrow { letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.features-hero .lead { max-width: 68ch; }

.features-toc ul { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.features-toc a { display: inline-block; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: .5rem; color: inherit; text-decoration: none; backdrop-filter: blur(2px); }
.features-toc a:focus-visible { outline: 2px solid var(--focus, #7aa2ff); outline-offset: 2px; }

.section { padding-block: clamp(2rem, 3vw, 3rem); }
.section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1.1fr .9fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.features-media { margin: 0; }
.features-media img { width: 100%; border-radius: .75rem; }
.features-media figcaption { font-size: .9rem; opacity: .8; margin-top: .25rem; }

.card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: .75rem; padding: 1rem; }

.check-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.check-list li { padding-left: 1.5rem; position: relative; margin: .35rem 0; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .6rem; height: .6rem; border-radius: 2px; background: linear-gradient(135deg, #7aa2ff, #9f7aff); box-shadow: 0 0 0 2px rgba(255,255,255,0.05); }

.features-search { display: flex; align-items: center; gap: .75rem; }
.features-search input[type="search"] { inline-size: min(28rem, 100%); padding: .6rem .8rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: inherit; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
.feature-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: .75rem; padding: 1rem; transition: transform .2s ease, border-color .2s ease; }
.feature-item:hover { transform: translateY(-2px); border-color: rgba(122,162,255,0.4); }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: 2.25rem; margin: .75rem 0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.6rem; height: 1.6rem; border-radius: .4rem; display: grid; place-items: center; background: linear-gradient(135deg, #9f7aff, #7aa2ff); color: #0b0c10; font-weight: 700; font-size: .9rem; }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(255,255,255,0.08); }
.timeline li { position: relative; padding: .5rem 0 .5rem 1rem; }
.timeline__dot { position: absolute; left: -7px; top: .9rem; width: .7rem; height: .7rem; background: #7aa2ff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(122,162,255,.15); }
.timeline__content h3 { margin: 0 0 .25rem 0; }

.download-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.btn { display: inline-block; padding: .65rem 1rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,0.14); text-decoration: none; color: inherit; background: rgba(255,255,255,0.04); }
.btn:hover { border-color: rgba(122,162,255,0.5); }
.btn-primary { background: linear-gradient(135deg, #7aa2ff, #9f7aff); color: #0b0c10; border: none; }
.btn-ghost { background: transparent; }

.back-to-top { display: inline-block; margin: 1rem 0 2rem; text-decoration: none; opacity: .85; }
.back-to-top:hover { opacity: 1; }

.muted { opacity: .8; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%); border: 0; padding: 0; margin: 0; }
.align-right { text-align: right; }