/* Features page · lower half in the V5 look (2026-09-29): command stations,
   tools, every feature in one accordion, and a final free-trial card.
   Builds on styles.css (theme tokens) and v5.css (--v5-*, .v5-h2, .v5-btn, .rv). */

.fx { overflow-x: clip; }
.fx section { position: relative; }
.fx-head { max-width: 820px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.fx-head .v5-h2 { margin: 12px 0 14px; }
.fx-head .v5-lead { margin: 0 auto; text-align: center; }

/* ---------- Command stations & protocols ---------- */
.fx-compat { padding: clamp(96px, 12vw, 150px) 0 0; scroll-margin-top: 80px; }
.fx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 860px; margin: 0 auto 26px; }
.fx-stat { padding: 24px 18px 22px; border-radius: 26px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); }
.fx-stat b {
    display: block; font-size: clamp(34px, 4.2vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -0.04em;
    background: linear-gradient(95deg, var(--v5-amber) 10%, var(--v5-amber-2) 60%, #fde68a);
    -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em;
}
.fx-stat span { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.fx-stat small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.fx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; margin: 0 auto; }
.fx-chip {
    padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--text-secondary);
    background: var(--v5-glass); border: 1px solid var(--border);
}
.fx-chip.is-key { color: var(--text-primary); font-weight: 800; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .42); }
.fx-link {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 28px auto 0;
    font-size: 15px; font-weight: 800; color: var(--v5-amber); text-decoration: none;
}
[data-theme="light"] .fx-link { color: #b45309; }
.fx-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.fx-link:hover svg { transform: translateX(3px); }

/* ---------- Tools ---------- */
.fx-tools { padding: clamp(96px, 12vw, 150px) 0 0; }
.fx-tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 0 auto; }
.fx-tool {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; border-radius: 22px;
    background: var(--bg-card); border: 1px solid var(--border); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.fx-tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fx-tool-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px; color: #d97706; background: rgba(245, 158, 11, .13); }
.fx-tool:nth-child(5n+2) .fx-tool-ic { color: #2563eb; background: rgba(59, 130, 246, .13); }
.fx-tool:nth-child(5n+3) .fx-tool-ic { color: #059669; background: rgba(16, 185, 129, .13); }
.fx-tool:nth-child(5n+4) .fx-tool-ic { color: #7c3aed; background: rgba(139, 92, 246, .13); }
.fx-tool:nth-child(5n+5) .fx-tool-ic { color: #db2777; background: rgba(236, 72, 153, .12); }
.fx-tool-ic svg { width: 22px; height: 22px; }
.fx-tool strong { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--text-primary); }
.fx-tool-tag { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }

/* ---------- Every feature ---------- */
.fx-all { padding: clamp(96px, 12vw, 150px) 0 0; scroll-margin-top: 80px; }
.fx-acc { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.fx-group { border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border); transition: box-shadow .25s ease, border-color .25s ease; }
.fx-group[open] { border-color: var(--border-light); box-shadow: var(--shadow-md); }
.fx-group summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; list-style: none; cursor: pointer; }
.fx-group summary::-webkit-details-marker { display: none; }
.fx-group summary::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    font-size: 20px; font-weight: 400; line-height: 1; color: var(--text-muted); background: var(--bg-elevated); transition: transform .25s ease, color .25s ease;
}
.fx-group[open] summary::after { transform: rotate(45deg); color: var(--v5-amber); }
.fx-g-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #d97706; background: rgba(245, 158, 11, .12); }
.fx-g-ic svg { width: 20px; height: 20px; }
.fx-group.is-pro .fx-g-ic { color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 6px 16px rgba(139, 92, 246, .35); }
.fx-g-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: var(--text-primary); }
.fx-g-title .eco-badge {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
    font-size: 11px; font-weight: 800; color: var(--text-secondary); background: var(--bg-elevated);
}
.fx-g-count { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--text-muted); background: var(--bg-elevated); }
.fx-g-body { padding: 2px 22px 22px 72px; }
.fx-g-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.fx-g-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; margin: 0; padding: 0; list-style: none; }
.fx-g-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.fx-g-list li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center / 10px no-repeat, rgba(16, 185, 129, .14);
}
.fx-group.is-pro .fx-g-list { grid-template-columns: 1fr; }
.fx-g-list strong { color: var(--text-primary); }
.fx .tier-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.fx .tier-free { color: #047857; background: rgba(16, 185, 129, .14); }
.fx .tier-standard { color: #1d4ed8; background: rgba(59, 130, 246, .13); }
.fx .tier-pro { color: #7c3aed; background: rgba(139, 92, 246, .14); }
[data-theme="dark"] .fx .tier-free { color: #34d399; }
[data-theme="dark"] .fx .tier-standard { color: #93c5fd; }
[data-theme="dark"] .fx .tier-pro { color: #c4b5fd; }

/* ---------- Final: try everything ---------- */
.fx-final { padding: clamp(96px, 12vw, 150px) 0 clamp(96px, 12vw, 150px); }
.fx-final-card {
    max-width: 1060px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) var(--v5-gap); border-radius: 36px; text-align: center;
    background: radial-gradient(60% 90% at 50% 0%, rgba(245, 158, 11, .22), transparent 70%), var(--bg-card);
    border: 1px solid rgba(245, 158, 11, .25);
}
.fx-final-card .v5-h2 { margin: 0 0 30px; }
.fx-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.fx-cta .v5-btn { min-height: 56px; padding: 0 30px; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) { .fx-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .fx-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fx-tool { padding: 14px 14px 16px; }
    .fx-g-body { padding: 0 16px 18px; }
    .fx-g-list { grid-template-columns: 1fr; }
    .fx-group summary { gap: 12px; padding: 12px 14px; }
    .fx-g-title { font-size: 16px; }
}
@media (max-width: 560px) {
    .fx-stats { gap: 8px; }
    .fx-stat { padding: 16px 8px; border-radius: 20px; }
    .fx-stat span { font-size: 13px; }
    .fx-stat small { display: none; }
    .fx-chip { padding: 7px 11px; font-size: 12.5px; }
    .fx-g-count { display: none; }
    .fx-cta .v5-btn { width: 100%; max-width: 340px; justify-content: center; }
}