/* Features only: shared navigation, footer and homepage styles stay untouched. */
.features-page main { font-family: var(--font); }
.features-page a:focus-visible, .features-page summary:focus-visible {
    outline: 2px solid var(--acc); outline-offset: 5px; border-radius: 2px;
}
.fx-hero {
    display: grid; grid-template-columns: 1fr 1.05fr; align-items: center;
    gap: 64px; padding-top: 148px; padding-bottom: 72px;
}
.fx-eyebrow { color: #b8b8bf; font-size: 10px; font-weight: 600; letter-spacing: .16em; margin-bottom: 20px; }
.fx-hero h1 { font: 700 clamp(40px, 4.6vw, 62px)/1.08 var(--font); letter-spacing: -.04em; margin-bottom: 24px; }
.fx-hero h1 span { color: #d81b38; }
.fx-intro { color: #a3a3ab; font-size: 15px; line-height: 1.8; max-width: 430px; }
.fx-included { display: flex; gap: 8px; align-items: center; margin-top: 22px; font-size: 12px; color: #c5c5cb; }
.fx-included svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fx-explore { display: inline-flex; gap: 20px; align-items: center; margin-top: 30px; font-size: 13px; font-weight: 500; }
.fx-explore span { color: var(--acc); }
.fx-explore:hover { color: #b8b8bf; }
.fx-product {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 18px 12px;
}
.fx-product img {
    display: block;
    width: 100%;
    opacity: .92;
    -webkit-mask-image:
        linear-gradient(90deg, transparent, rgba(0,0,0,.35) 7%, #000 20%, #000 80%, rgba(0,0,0,.35) 93%, transparent),
        linear-gradient(180deg, transparent, rgba(0,0,0,.45) 8%, #000 20%, #000 72%, rgba(0,0,0,.4) 88%, transparent);
    mask-image:
        linear-gradient(90deg, transparent, rgba(0,0,0,.35) 7%, #000 20%, #000 80%, rgba(0,0,0,.35) 93%, transparent),
        linear-gradient(180deg, transparent, rgba(0,0,0,.45) 8%, #000 20%, #000 72%, rgba(0,0,0,.4) 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.fx-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 64px; padding-top: 36px; padding-bottom: 40px; }
.fx-sidebar { align-self: start; position: sticky; top: 104px; }
.fx-nav-label { color: #777780; font-size: 9px; font-weight: 600; letter-spacing: .16em; margin-bottom: 18px; }
.fx-sidebar nav a { display: flex; align-items: center; gap: 14px; padding: 11px 0; font-size: 12px; color: #a5a5ae; }
.fx-sidebar nav a span { font-size: 10px; color: #62626d; font-variant-numeric: tabular-nums; }
.fx-sidebar nav a:hover, .fx-sidebar nav a:focus-visible { color: #fff; }
.fx-sidebar nav a:hover span { color: var(--acc); }
.fx-content { min-width: 0; }
.fx-section { padding-bottom: 54px; margin-bottom: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 104px; }
.fx-section:last-child { margin-bottom: 0; }
.fx-section-heading { display: flex; gap: 18px; margin-bottom: 26px; align-items: baseline; }
.fx-index { flex: 0 0 auto; color: var(--acc); font-size: 11px; font-variant-numeric: tabular-nums; }
.fx-section h2 { font: 600 clamp(23px, 2.4vw, 29px)/1.2 var(--font); letter-spacing: -.025em; }
.fx-section-heading p { color: #94949e; font-size: 13px; line-height: 1.75; margin-top: 10px; max-width: 620px; }
.fx-detail { border-top: 1px solid var(--line); }
.fx-detail:last-of-type { border-bottom: 1px solid var(--line); }
.fx-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; color: #cfcfd5; }
.fx-detail summary::-webkit-details-marker { display: none; }
.fx-detail summary:hover { color: #fff; }
.fx-detail-meta { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; color: #777780; font-size: 11px; font-weight: 400; }
.fx-detail-meta svg { width: 16px; height: 16px; transition: transform .18s ease; }
.fx-detail[open] summary { color: #fff; }
.fx-detail[open] .fx-detail-meta svg { transform: rotate(180deg); }
.fx-rows { margin: 0 0 16px; }
.fx-rows > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.6fr); gap: 24px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.035); }
.fx-rows dt { font-size: 12.5px; font-weight: 500; color: #d2d2d7; line-height: 1.7; }
.fx-rows dd { margin: 0; color: #95959f; font-size: 12.5px; line-height: 1.8; overflow-wrap: anywhere; }
.fx-note { margin-top: 20px; max-width: 680px; color: #85858f; font-size: 12px; line-height: 1.85; }
.fx-loadout > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.fx-loadout h3 { font-size: 12px; font-weight: 500; color: #d2d2d7; }
.fx-loadout ul { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 9px; }
.fx-loadout li { color: #a3a3ad; font-size: 12px; }
.fx-bottom { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: 32px; padding-bottom: 72px; }
.fx-bottom .fx-eyebrow { margin-bottom: 12px; }
.fx-bottom h2 { font: 600 clamp(25px, 3vw, 34px)/1.2 var(--font); letter-spacing: -.03em; }
.fx-bottom p:last-child { margin-top: 12px; color: #95959f; font-size: 13px; }
.fx-bottom .btn { flex: 0 0 auto; }
@media (max-width: 1000px) {
    .fx-hero { gap: 32px; }
    .fx-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; }
    .fx-sidebar nav a { gap: 10px; font-size: 11px; }
}
@media (max-width: 760px) {
    .fx-hero { grid-template-columns: 1fr; padding-top: 110px; padding-bottom: 32px; gap: 34px; }
    .fx-hero h1 { font-size: clamp(38px, 9vw, 54px); }
    .fx-intro { max-width: 100%; font-size: 14px; }
    .fx-product { max-width: 500px; }
    .fx-explore { margin-top: 22px; }
    .fx-layout { display: block; padding-top: 12px; }
    .fx-sidebar { position: static; margin-bottom: 34px; }
    .fx-sidebar nav { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 0; padding: 16px 0; border-block: 1px solid var(--line); }
    .fx-sidebar nav a { font-size: 12px; padding: 9px 0; }
    .fx-nav-label, .fx-sidebar nav a span { display: none; }
    .fx-section { padding-bottom: 32px; margin-bottom: 32px; }
    .fx-section-heading { gap: 12px; }
    .fx-detail summary { font-size: 12px; }
    .fx-detail-meta { gap: 8px; font-size: 10px; }
    .fx-rows > div { grid-template-columns: 1fr; gap: 5px; }
    .fx-loadout > div { grid-template-columns: 1fr; gap: 12px; }
    .fx-bottom { align-items: flex-start; flex-direction: column; padding-top: 10px; padding-bottom: 48px; gap: 24px; }
    .fx-bottom .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fx-detail-meta svg { transition: none; } }