/* Feature pages (/features, /features/{slug}) — app/views/features/.
   Loaded after home-site.css, so the .wp palette and components are
   available; everything here is .fx-scoped. Drawings are CSS/SVG. */

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.fx-crumbs { padding: 14px 0 0; font-size: 13px; color: var(--wp-faint); background: var(--wp-paper); }
.fx-crumbs a { color: var(--wp-muted); text-decoration: none; }
.fx-crumbs a:hover { color: var(--wp-red-deep); text-decoration: underline; }
.fx-crumbs span { margin: 0 6px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.fx-hero { padding-top: clamp(28px, 4vw, 56px); }
.fx-hero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.fx-plan { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--wp-muted); }
.fx-plan svg { color: var(--wp-green); }
.fx-stage { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 3vw, 32px); border-radius: 24px; background: linear-gradient(160deg, #fff 0%, var(--wp-sand) 100%); border: 1px solid var(--wp-line); box-shadow: var(--wp-shadow-lg); min-height: 280px; justify-content: center; }

/* ── Points ───────────────────────────────────────────────────────────── */
.fx-points-section { background: #fff; }
.fx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fx-point { padding: 24px; border-radius: var(--wp-radius); background: var(--wp-paper); border: 1px solid var(--wp-line); }
.fx-point-n { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--wp-red-deep); margin-bottom: 10px; }
.fx .fx-point h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.fx-point p { font-size: 15px; line-height: 1.55; color: var(--wp-muted); }

/* ── Steps ────────────────────────────────────────────────────────────── */
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.fx-steps li { position: relative; padding: 26px 24px; border-radius: var(--wp-radius); background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-shadow); }
.fx-step-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wp-red); color: #fff; font-weight: 900; margin-bottom: 14px; }
.fx .fx-steps h3 { font-size: 18px; margin-bottom: 6px; }
.fx-steps p { font-size: 15px; line-height: 1.55; color: var(--wp-muted); }

/* ── Related / hub cards ──────────────────────────────────────────────── */
.fx-related { background: #fff; padding-top: clamp(40px, 6vw, 72px); }
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fx-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--wp-line); background: var(--wp-paper); text-decoration: none; color: var(--wp-text); transition: border-color .15s, transform .15s; }
.fx .fx-tile { color: var(--wp-text); }
.fx-tile:hover { border-color: var(--wp-red); transform: translateY(-2px); text-decoration: none; }
.fx-tile-ico { color: var(--wp-red-deep); }
.fx-tile b { font-size: 16px; }
.fx-tile small { font-size: 12.5px; color: var(--wp-faint); }
.fx-all { text-align: center; margin-top: 26px; font-weight: 700; }
.fx-final-note { margin-top: 18px !important; font-size: 13px; opacity: .7; }

/* Hub */
.fx-hub-hero { text-align: center; }
.fx-hub-hero .wp-kicker, .fx-hub-hero .wp-ctas { justify-content: center; }
.fx-hub-hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.fx-hub-hero h1::after { margin-left: auto; margin-right: auto; }
.fx-hub-hero .wp-lede { margin-left: auto; margin-right: auto; max-width: 62ch; }
.fx-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.fx-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); color: var(--wp-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.fx .fx-jump a { color: var(--wp-text); }
.fx-jump a:hover { border-color: var(--wp-red); text-decoration: none; }
.fx-jump a span { font-size: 12px; color: var(--wp-faint); }
.fx-group { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: 70px; }
.fx-group--alt { background: #fff; }
.fx-group-head { max-width: 720px; margin-bottom: 30px; }
.fx .fx-group-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 10px; }
.fx-group-head p { font-size: 17px; line-height: 1.55; color: var(--wp-muted); }
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fx-hcard { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 16px; background: var(--wp-paper); border: 1px solid var(--wp-line); text-decoration: none; color: var(--wp-text); position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fx-group--alt .fx-hcard { background: var(--wp-paper); }
.fx .fx-hcard { color: var(--wp-text); }
.fx-hcard:hover { border-color: var(--wp-red); transform: translateY(-2px); box-shadow: var(--wp-shadow); text-decoration: none; }
.fx-hcard-ico { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--wp-line); color: var(--c, var(--wp-red-deep)); }
.fx-hcard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 8px; }
.fx-hcard-body b { font-size: 16px; }
.fx-hcard-body span { font-size: 14px; line-height: 1.45; color: var(--wp-muted); }
.fx-plan-tag { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fx-hcard-body { padding-right: 92px; }
.fx-plan-tag--free { background: #e8f8ef; color: #17784a; }
.fx-plan-tag--basic { background: #eef2ff; color: #3b4fb8; }
.fx-plan-tag--premium { background: var(--wp-red-soft); color: var(--wp-red-deep); }

/* ── Drawing pieces ───────────────────────────────────────────────────── */
.fx-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.fx-avatar { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e5484d, #f2b33d); color: #fff; font-size: 12px; font-weight: 800; }
.fx-avatar--b { background: linear-gradient(135deg, #3b4fb8, #1f9d5f); }
.fx-lines { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.fx-lines i { display: block; height: 8px; border-radius: 4px; background: #ece3dc; width: 100%; }
.fx-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--wp-line); font-size: 13px; font-weight: 700; color: var(--wp-muted); box-shadow: var(--wp-shadow); }
.fx-chip--ok { color: #17784a; }
.fx-btn { display: inline-block; padding: 10px 18px; border-radius: 10px; background: var(--wp-red); color: #fff; font-weight: 800; font-size: 14px; }

.fx-mail { background: #fff; border-radius: 16px; border: 1px solid var(--wp-line); overflow: hidden; box-shadow: var(--wp-shadow); }
.fx-mail-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--wp-sand); }
.fx-mail-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9cbc2; }
.fx-mail-body { padding: 18px 20px 22px; }
.fx-mail-body h4 { font-size: 18px; margin: 4px 0 8px; }
.fx-mail-body p { font-size: 14px; line-height: 1.5; color: var(--wp-muted); margin-bottom: 12px; }
.fx-mail-from { font-size: 12.5px !important; }
.fx-pick { display: flex; gap: 6px; margin: 4px 0 16px; }
.fx-pick .fx-stars svg:not(:first-child) { display: none; }
.fx-field { font-size: 13px !important; padding: 6px 10px; border-radius: 8px; background: var(--wp-paper); margin-bottom: 6px !important; font-family: ui-monospace, Menlo, monospace; }
.fx-field--hl { background: var(--wp-red-soft); color: var(--wp-red-deep) !important; font-weight: 700; }
.fx-sign { font-size: 13px !important; margin: 10px 0 !important; color: var(--wp-text) !important; }
.fx-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--wp-line); background: var(--wp-paper); font-size: 12px; }
.fx-badge span { color: var(--wp-muted); }

.fx-review { background: #fff; border-radius: 16px; border: 1px solid var(--wp-line); padding: 16px 18px; box-shadow: var(--wp-shadow); }
.fx-review--b { margin-left: 28px; opacity: .85; }
.fx-review-top { display: flex; align-items: center; gap: 10px; }
.fx-review-top > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.fx-review p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
.fx-verified { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #e8f8ef; color: #17784a; font-size: 12px; font-weight: 800; }

.fx-poster { align-self: center; width: min(260px, 100%); text-align: center; background: #fff; border-radius: 18px; padding: 22px; border: 1px solid var(--wp-line); box-shadow: var(--wp-shadow); }
.fx-poster-name { font-weight: 800; font-size: 13px; color: var(--wp-red-deep); letter-spacing: .06em; text-transform: uppercase; }
.fx .fx-poster h4 { font-size: 20px; margin: 6px 0 14px; }
.fx-qr { display: inline-flex; flex-direction: column; padding: 10px; background: #fff; border: 2px solid var(--wp-ink); border-radius: 10px; }
.fx-qr span { display: flex; }
.fx-qr i { width: 8px; height: 8px; }
.fx-qr i.on { background: var(--wp-ink); }
.fx-poster-sub { margin-top: 12px !important; font-size: 13px; color: var(--wp-muted); font-weight: 700; }

.fx-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.fx-flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; text-align: center; padding: 14px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-shadow); font-size: 12.5px; }
.fx-flow-step b { font-size: 12.5px; line-height: 1.25; }
.fx-flow-step small { font-size: 11.5px; color: var(--wp-faint); }
.fx-flow-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c, var(--wp-red)); color: #fff; font-weight: 900; font-size: 18px; }
.fx-flow-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wp-red-soft); color: var(--wp-red-deep); }
.fx-flow-step--end .fx-flow-ico { background: #e8f8ef; color: #17784a; }
.fx-flow-arrow { color: var(--wp-faint); }

.fx-widget { background: #fff; border-radius: 18px; border: 1px solid var(--wp-line); padding: 18px; box-shadow: var(--wp-shadow); }
.fx-widget-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.fx-widget-head p { font-size: 12.5px; color: var(--wp-faint); margin-top: 2px; }
.fx-score { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; }
.fx-widget-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fx-mini { padding: 12px; border-radius: 12px; background: var(--wp-paper); border: 1px solid var(--wp-line); font-size: 12.5px; line-height: 1.45; }
.fx-mini-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fx-mini-top .fx-avatar { width: 26px; height: 26px; font-size: 10px; }
.fx-loc { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--wp-red-deep); }

.fx-serp { background: #fff; border-radius: 14px; border: 1px solid var(--wp-line); padding: 16px 18px; box-shadow: var(--wp-shadow); }
.fx-serp--dim { opacity: .55; box-shadow: none; }
.fx-serp-url { font-size: 12.5px; color: #3c7a3a; }
.fx .fx-serp h4 { font-size: 18px; color: #1a0dab; margin: 4px 0 6px; font-weight: 600; letter-spacing: 0; }
.fx-serp-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wp-muted); }

.fx-summary { background: var(--wp-ink); color: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--wp-shadow-lg); }
.fx-summary-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f2b33d; }
.fx-summary-t { margin-top: 12px !important; font-size: 16px; line-height: 1.6; }
.fx-summary-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.6); }
.fx-summary-foot .fx-score { font-size: 20px; color: #fff; }

.fx-card { align-self: center; width: min(380px, 100%); aspect-ratio: 1200 / 630; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #17110f, #362a2d); color: #fff; box-shadow: var(--wp-shadow-lg); }
.fx-card p { font-size: 18px; font-weight: 800; line-height: 1.3; }
.fx-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.7); }
.fx-card-foot b { color: #f2b33d; }

.fx-award { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 220px; padding: 26px 18px; border-radius: 22px; background: linear-gradient(160deg, #fff7e3, #fde3e4); border: 2px solid #f2b33d; text-align: center; box-shadow: var(--wp-shadow-lg); }
.fx-award-ico { color: #c28a12; }
.fx-award b { font-size: 26px; font-weight: 900; }
.fx-award small { font-size: 12.5px; color: var(--wp-muted); }
.fx-award-score { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 900; }

.fx-import { background: #fff; border-radius: 18px; border: 1px solid var(--wp-line); padding: 18px; box-shadow: var(--wp-shadow); }
.fx-import-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wp-faint); margin-bottom: 12px !important; }
.fx-import-row { display: grid; grid-template-columns: 24px minmax(0, 7fr) minmax(0, 9fr) 36px; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font-size: 14px; }
.fx-import-row.is-hl { background: var(--wp-red-soft); }
.fx-import-site { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--wp-red); color: #fff; font-weight: 900; font-size: 12px; }
.fx-import-bar { height: 8px; border-radius: 4px; background: #f0e7e0; overflow: hidden; }
.fx-import-bar i { display: block; height: 100%; background: var(--wp-red); border-radius: 4px; }
.fx-import-n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

.fx-thread { display: flex; flex-direction: column; gap: 10px; }
.fx-reply { margin-left: 28px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--wp-line); border-left: 3px solid var(--wp-red); font-size: 14px; line-height: 1.5; }
.fx-reply p + p { margin-top: 6px; }
.fx-reply--back { margin-left: 56px; border-left-color: var(--wp-line); }
.fx-reply--ai { border-style: dashed; border-left-style: solid; }
.fx-biz { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--wp-ink); color: #fff; font-size: 10.5px; font-weight: 800; }
.fx-ai-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #3b4fb8; margin-bottom: 6px !important; }

.fx-sent { background: #fff; border-radius: 18px; border: 1px solid var(--wp-line); padding: 20px; box-shadow: var(--wp-shadow); }
.fx-sent-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 16px; }
.fx-sent-bar .p, .fx-dot--p { background: #1f9d5f; }
.fx-sent-bar .m, .fx-dot--m { background: #f2b33d; }
.fx-sent-bar .n, .fx-dot--n { background: #e5484d; }
.fx-sent-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--wp-line); font-size: 14px; }
.fx-sent-row span:last-child { margin-left: auto; font-weight: 800; }
.fx-dot { width: 10px; height: 10px; border-radius: 50%; }

.fx-notif { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--wp-line); box-shadow: var(--wp-shadow); font-size: 14px; }
.fx-notif p { color: var(--wp-muted); margin-top: 3px; font-size: 13.5px; }
.fx-notif small { margin-left: auto; color: var(--wp-faint); font-size: 12px; }
.fx-notif-ico { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--wp-red-soft); color: var(--wp-red-deep); }
.fx-notif > div { flex: 1; min-width: 0; }
.fx-notif--dim { opacity: .5; box-shadow: none; }

.fx-bench { background: #fff; border-radius: 18px; border: 1px solid var(--wp-line); padding: 18px; box-shadow: var(--wp-shadow); }
.fx-bench-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr) 40px; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; font-size: 14px; }
.fx-bench-row.is-me { background: var(--wp-red-soft); }
.fx-bench-bar { height: 10px; border-radius: 5px; background: #f0e7e0; overflow: hidden; }
.fx-bench-bar i { display: block; height: 100%; background: #c9b6ad; }
.fx-bench-row.is-me .fx-bench-bar i { background: var(--wp-red); }
.fx-bench-row span:last-child { text-align: right; font-weight: 800; }

.fx-team { background: #fff; border-radius: 18px; border: 1px solid var(--wp-line); padding: 10px 18px; box-shadow: var(--wp-shadow); }
.fx-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14.5px; }
.fx-team-row + .fx-team-row { border-top: 1px solid var(--wp-line); }
.fx-role { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--wp-sand); font-size: 12px; font-weight: 800; color: var(--wp-muted); }

.fx-code { margin: 0; padding: 20px; border-radius: 16px; background: var(--wp-ink); color: #f5e9e2; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; box-shadow: var(--wp-shadow-lg); }
.fx-code .c { color: #9a8a8c; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .fx-points, .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .fx-hero .wp-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fx-points, .fx-steps { grid-template-columns: 1fr; }
    .fx-widget-row { grid-template-columns: 1fr; }
    .fx-widget-row .fx-mini:nth-child(n+2) { display: none; }
    .fx-flow-arrow { transform: rotate(90deg); }
    .fx-flow { flex-direction: column; }
    .fx-flow-step { width: 100%; max-width: 260px; flex-direction: row; text-align: left; }
    .fx-cards { grid-template-columns: 1fr; }
    .fx-review--b, .fx-reply { margin-left: 14px; }
    .fx-reply--back { margin-left: 28px; }
}