/* صفحه‌یِ امکانات: رویِ landing.css سوار است (رنگ‌ها، فونت، سربرگ، فوتر، .grow)؛ فقط چیدمانِ بخش‌ها این‌جاست */
.fx-hero{padding-block:40px 8px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.fx-hero h1{margin:0; font-size:clamp(28px,3.4vw,42px); line-height:1.4; font-weight:900; letter-spacing:-.6px}
.fx-hero .lead{max-width:72ch}

.fx-toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.fx-toc a{padding:5px 14px; border-radius:20px; background:var(--sheet); border:1px solid var(--line); color:var(--ink-2); font-size:14px; font-weight:600}
.fx-toc a:hover{border-color:var(--hi); color:var(--hi)}

.fx{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding-block:40px; border-top:1px solid var(--line); scroll-margin-top:76px}
.fx:first-of-type{margin-top:28px}
.fx.alt .fx-text{order:2}
.fx.solo{grid-template-columns:1fr}
.fx.solo .fx-text{max-width:860px}
.fx-text{min-width:0}
.fx-n{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-weight:900; font-size:15px; margin-bottom:6px}
.fx h2{margin:0 0 10px; font-size:clamp(21px,2.1vw,27px); line-height:1.5; font-weight:900; letter-spacing:-.3px}
.fx p{color:var(--ink-2); font-size:16px; line-height:2; margin:0 0 10px}
.fx ul{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.fx ul.cols{display:grid; grid-template-columns:1fr 1fr; gap:6px 24px}
.fx li{position:relative; padding-inline-start:22px; color:var(--ink-2); font-size:15.5px; line-height:1.9}
.fx li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--ok); font-weight:900}
.fx li b{color:var(--ink)}

.fx-shot{margin:0; min-width:0}
.fx-shot img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 24px 50px -30px rgba(20,30,55,.5)}
.fx-shot figcaption{margin-top:8px; text-align:center; color:var(--muted); font-size:13px}

.fx-roles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
.fx-roles div{background:var(--sheet); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink-2); font-size:15px; line-height:1.9}
.fx-roles b{display:block; color:var(--ink); font-size:16.5px; margin-bottom:2px}

main > .wrap:last-child .grow{margin-block:24px 8px}

@media (max-width:900px){
  .fx{grid-template-columns:1fr; gap:18px}
  .fx.alt .fx-text{order:0}
  .fx-roles,.fx ul.cols{grid-template-columns:1fr}
}