/* features.css — /features hub and /features/{slug} pages. Sits on top of
   home.css (band system, bento, pricing cards); only page-specific bits here. */

.feat-hero .home-container { max-width: 52rem; }
.feat-h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
}
/* Icon panel stands in for a screenshot until one exists */
.feat-icon-panel {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4rem, 12vw, 7rem);
    border: 1px solid var(--border-color);
}
.feat-icon-panel--crimson { background: var(--et-cat-crimson-container); color: var(--et-cat-crimson); }
.feat-icon-panel--blue    { background: var(--et-cat-blue-container);    color: var(--et-cat-blue); }
.feat-icon-panel--green   { background: var(--et-cat-green-container);   color: var(--et-cat-green); }
.feat-icon-panel--violet  { background: var(--et-cat-violet-container);  color: var(--et-cat-violet); }
.feat-icon-panel--amber   { background: var(--et-cat-amber-container);   color: var(--et-cat-amber); }
.feat-icon-panel--teal    { background: var(--et-cat-teal-container);    color: var(--et-cat-teal); }
.feat-icon-panel--sky     { background: var(--et-cat-cyan-container);    color: var(--et-cat-cyan); }

.feat-prose { max-width: 46rem; }
.feat-prose h2 { margin: 2rem 0 0.5rem; }
.feat-prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); margin: 0 0 1rem; }

.feat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feat-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--et-surface-container-lowest);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}
.feat-table th, .feat-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.feat-table th { font-weight: 700; color: var(--et-on-surface); background: var(--et-surface-container-low); }
.feat-table td:last-child { font-weight: 600; color: var(--et-on-surface); }

.feat-tiers { max-width: 52rem; margin: 0 auto; }

.feat-faq { max-width: 46rem; }
.feat-faq-item {
    border-top: 1px solid var(--border-color);
    padding: 0.875rem 0;
}
.feat-faq-item:last-child { border-bottom: 1px solid var(--border-color); }
.feat-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.feat-faq-item summary::-webkit-details-marker { display: none; }
.feat-faq-item summary::after { content: '+'; font-size: 1.25rem; color: var(--text-muted); }
.feat-faq-item[open] summary::after { content: '\2013'; }
.feat-faq-item summary h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--et-on-surface); }
.feat-faq-item p { margin: 0.75rem 0 0; line-height: 1.65; color: var(--text-secondary); }

@media (min-width: 48rem) {
    .feat-tiers { grid-template-columns: repeat(2, 1fr); }
}