/* Feature pages (seo/feature + seo/feature-blocks) on top of home.css: only what the homepage has no class for. */

/* Hero + breadcrumb */
.fx-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.fx-hero .lede { margin-bottom: 1.8rem; }
.fx-crumb ol { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .5rem; font: 500 .78rem/1.4 var(--f-mono); color: var(--subtle); }
.fx-crumb li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.fx-crumb a { color: var(--muted); text-decoration: none; }
.fx-crumb a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.fx-crumb [aria-current] { color: var(--text); }

/* Section rhythm: tiles stack with the board gap, headed groups get breathing room. */
.fx-sec { padding-block: 8px; }
.fx-sec .head { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.fx-h { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }
.tile p + p { margin-top: .2rem; }

/* Prose tile: heading column left, body column right (stacks on narrow screens). */
.fx-prose { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.fx-prose.fx-solo { grid-template-columns: minmax(0, 1fr); }
.fx-prose-head, .fx-prose-body { display: flex; flex-direction: column; gap: .9rem; }
.fx-prose-head h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }
.fx-prose-body h2 { font-size: 1.4rem; }
.fx-prose-body h3 { margin-top: .5rem; }
.fx-prose-body > :first-child { margin-top: 0; }
.fx-prose p { font-size: 1.05rem; }
@media (max-width: 900px) { .fx-prose { grid-template-columns: minmax(0, 1fr); } }
/* Stacked: heading on top (shared row, or several body nodes); a long full-width body flows in two columns. */
.fx-prose.fx-stack { grid-template-columns: minmax(0, 1fr); }
.fx-prose.fx-cols .fx-prose-body { display: block; columns: 2; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.fx-prose.fx-cols .fx-prose-body > * { break-inside: avoid; margin-bottom: .9rem; }
.fx-prose.fx-cols .fx-prose-body > h3 { break-after: avoid; }
@media (max-width: 900px) { .fx-prose.fx-cols .fx-prose-body { columns: 1; } }

/* Flow card beside the opening prose: steps run top to bottom. */
.fx-steps.fx-vert { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; flex: 1 1 auto; }
.fx-steps.fx-vert li { grid-template-columns: 2rem 1fr; align-items: center; padding: .75rem .9rem; }

/* Two text-only splits side by side: points sit under the copy. */
.fx-plain.fx-compact { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
.fx-plain.fx-compact .fx-points { margin-top: auto; }
.fx-prose .mini-list { margin: 0; gap: .55rem; font-size: 1rem; }
.fx-prose .mini-list li { align-items: flex-start; }
.fx-prose .mini-list svg { margin-top: .3em; }
.fx-prose ol { margin: 0; padding-left: 1.3rem; color: var(--muted); display: grid; gap: .4rem; }
.fx-prose blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.fx-prose cite { display: block; margin-top: .4rem; font: 500 .75rem/1 var(--f-mono); color: var(--subtle); }

/* Flow: numbered steps on the dark tile, the active step lit like .rule.on */
.fx-flow { gap: .8rem; }
.fx-flow h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }
.fx-steps { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .5rem; }
.fx-steps li { display: grid; gap: .45rem; padding: .9rem; border-radius: var(--r-in); background: rgba(255,255,255,.07); font-weight: 600; font-size: .95rem; }
.fx-steps .n { font: 500 .72rem/1 var(--f-mono); color: #8FA6A9; }
.fx-steps li.on { background: #fff; color: #15191B; }
.fx-steps li.on .n { color: var(--accent); }
@media (max-width: 900px) { .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fx-steps { grid-template-columns: minmax(0, 1fr); } }

/* Split tiles: alternate the screenshot side; text-only splits put the points beside the copy. */
.tile.split.fx-rev .shot { order: -1; }
.fx-plain { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.fx-plain .copy { display: flex; flex-direction: column; gap: .7rem; }
.fx-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fx-points li { display: flex; gap: .7rem; align-items: flex-start; padding: .95rem 1.05rem; border-radius: var(--r-in); background: var(--tile-3); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: .95rem; }
.fx-points svg { color: var(--ok); margin-top: .2em; }
.split .mini-list li { align-items: flex-start; }
.split .mini-list svg { margin-top: .3em; }
@media (max-width: 900px) { .fx-plain { grid-template-columns: minmax(0, 1fr); } .tile.split.fx-rev .shot { order: 0; } }

/* Bento icon chip */
.fx-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: var(--accent-soft); color: var(--accent-ink); }

/* Related cards are whole-tile links */
.fx-rel { text-decoration: none; color: inherit; min-height: 11rem; }
.fx-rel h3 { font-size: 1.1rem; }
.fx-related { padding-bottom: 1.5rem; }

/* FAQ + closing CTA spacing */
.fx-faq { padding-bottom: 2rem; }
.fx-cta { padding-block: 1rem clamp(3rem, 2rem + 3vw, 5rem); }

/* /features hub: stacked and inline "Explore" link groups, unpublished index rows, key-value panels on dark tiles. */
.fx-col { display: grid; justify-items: start; margin-top: auto; }
.fx-col .go { margin-top: 0; min-height: 38px; }
.go.fx-soon { color: var(--subtle); font-weight: 600; }
.fx-row { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: auto; }
.fx-row .go { margin-top: 0; }
.fx-shot { margin-top: 16px; }
.fx-start { justify-content: flex-start; margin-top: auto; }
.tile.dark .invoice.fx-ink { background: var(--ink-2); color: #fff; }
.tile.dark .invoice.fx-ink div + div { border-top: 1px solid rgba(255,255,255,.08); padding-top: .4rem; }