/* The Features and Account checks pages (features.ejs, checks.ejs). Loaded after style.css and home.css: reuses the site's tokens and
   the landing bar/footer, adds the comparison sheet and the check lists. */

.fx { --plus: var(--accent-2); --plus-tint: rgba(94, 234, 223, 0.07); --plus-tint-strong: rgba(94, 234, 223, 0.14); max-width: 920px; margin: 0 auto; padding: 0 20px 80px; box-sizing: border-box; }

.fx-hero { padding: 52px 0 24px; }
.fx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plus); margin: 0 0 14px; }
.fx h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.fx h1 em { font-style: normal; color: var(--plus); }
.fx-lede { max-width: 58ch; margin: 0; color: var(--text-dim); font-size: 17px; line-height: 1.55; }

.fx-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 0; }
.fx-chip { font: inherit; font-weight: 600; font-size: 13px; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.fx-chip:hover { color: var(--text); border-color: var(--text-dim); }
.fx-chip[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.fx-chip:focus-visible { outline: 2px solid var(--plus); outline-offset: 2px; }

/* Account checks band */
.fx-checks { margin-top: 36px; }
.fx-checks h2 { font-size: clamp(22px, 3.6vw, 30px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 8px; text-wrap: balance; }
.fx-opt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plus); border: 1px solid var(--plus); border-radius: 999px; padding: 2px 10px; margin-left: 10px; vertical-align: 4px; white-space: nowrap; }
.fx-checks .fx-sub { margin: 0 0 18px; color: var(--text-dim); max-width: 64ch; line-height: 1.55; }
.fx-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-platform { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); color: inherit; text-decoration: none; min-width: 0; }
.fx-platform:hover { border-color: var(--accent); text-decoration: none; }
.fx-platform:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-pname { font-weight: 700; font-size: 16px; color: var(--text); }
.fx-pcount { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--plus); }
.fx-pex { font-size: 13px; color: var(--text-dim); }
.fx-more { display: inline-flex; margin-top: 16px; font-weight: 600; font-size: 14px; color: var(--accent); }
@media (max-width: 760px) { .fx-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The comparison sheet */
.fx-sheet { margin-top: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); overflow: clip; }
.fx-cols { --c: 112px; display: grid; grid-template-columns: minmax(0, 1fr) var(--c) var(--c); }
.fx-head { position: sticky; top: 64px; z-index: 20; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.fx-head .fx-cell { padding: 18px 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.fx-head .fx-lead { align-items: flex-start; text-align: left; padding-left: 22px; }
.fx-head .fx-lead span { font-size: 13px; color: var(--text-dim); }
.fx-plan { font-weight: 700; font-size: 18px; }
.fx-price { font-size: 13px; color: var(--text-dim); }
.fx-head .fx-plus-col { background: var(--plus-tint-strong); }
.fx-head .fx-plus-col .fx-plan { color: var(--plus); }
.fx-group-title { grid-column: 1 / -1; margin: 0; padding: 22px 22px 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.fx-group + .fx-group .fx-group-title { border-top: 1px solid var(--border); }
.fx-row { border-top: 1px solid var(--border); }
.fx-group-title + .fx-row, .fx-cols:has(> .fx-group-title) + .fx-row { border-top: 0; }
.fx-row .fx-cell { padding: 14px 12px; display: flex; align-items: center; justify-content: center; }
.fx-row .fx-label { justify-content: flex-start; padding-left: 22px; flex-direction: column; align-items: flex-start; gap: 2px; }
.fx-row .fx-label strong { font-weight: 600; font-size: 15px; }
.fx-row .fx-label span { font-size: 13px; color: var(--text-dim); max-width: 52ch; }
.fx-row .fx-plus-col { background: var(--plus-tint); }
.fx-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--plus); border: 1px solid var(--plus); border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; }
.fx-yes, .fx-no { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; }
.fx-yes { background: rgba(87, 242, 135, 0.16); color: var(--good); }
.fx-plus-col .fx-yes { background: rgba(94, 234, 223, 0.2); color: var(--plus); }
.fx-no { color: #6b6d78; }
.fx-yes svg, .fx-no svg { width: 15px; height: 15px; }
.fx-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border-top: 1px solid var(--border); }
.fx-cta p { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 52ch; line-height: 1.5; }
.fx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-foot { margin-top: 22px; font-size: 13px; color: var(--text-dim); }

/* Account checks page */
.fx-crumb { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.fx-crumb a { color: var(--accent); }
.fx-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.fx-how div { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); padding: 14px 16px; }
.fx-how strong { display: block; font-size: 15px; margin-bottom: 2px; }
.fx-how span { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 680px) { .fx-how { grid-template-columns: 1fr; } }
.fx-optional { margin: 22px 0 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--plus); border-radius: 12px; background: rgba(94, 234, 223, 0.07); max-width: 72ch; }
.fx-optional strong { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plus); border: 1px solid var(--plus); border-radius: 999px; padding: 2px 9px; white-space: nowrap; margin-top: 1px; }
.fx-optional span { font-size: 14px; line-height: 1.5; }
.fx-jump { position: sticky; top: 64px; z-index: 20; background: var(--bg); padding: 12px 0; margin-top: 18px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fx-jump::-webkit-scrollbar { display: none; }
.fx-jump a { white-space: nowrap; font-weight: 600; font-size: 13px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
.fx-jump a:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
.fx-plat { padding: 36px 0 8px; scroll-margin-top: 130px; }
.fx-plat h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fx-plat h2 small { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plus); }
.fx-intro { margin: 8px 0 0; color: var(--text-dim); max-width: 64ch; line-height: 1.5; }
.fx-list { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); overflow: clip; }
.fx-check { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 20px; padding: 14px 20px; border-top: 1px solid var(--border); }
.fx-check:first-child { border-top: 0; }
.fx-check strong { font-weight: 600; }
.fx-check span { color: var(--text-dim); font-size: 14px; }
@media (max-width: 600px) { .fx-check { grid-template-columns: 1fr; padding: 13px 14px; } }
.fx-note { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); padding-left: 12px; border-left: 2px solid var(--plus); max-width: 72ch; line-height: 1.5; }
.fx-alts { margin-top: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); padding: 22px; }
.fx-alts h2 { font-size: 20px; margin: 0 0 8px; }
.fx-alts p { margin: 0 0 8px; color: var(--text-dim); max-width: 68ch; line-height: 1.55; }
.fx-alts p:last-child { margin: 0; }
.fx-back { display: inline-block; margin-top: 28px; font-weight: 600; font-size: 14px; color: var(--accent); }

@media (max-width: 560px) {
  .fx-cols { --c: 64px; }
  .fx-head .fx-cell { padding: 14px 6px; }
  .fx-head .fx-lead { padding-left: 14px; }
  .fx-head .fx-lead span, .fx-price { display: none; }
  .fx-group-title { padding: 18px 14px 8px; }
  .fx-row .fx-label { padding-left: 14px; }
  .fx-row .fx-label span { font-size: 12px; }
  .fx-cta { grid-template-columns: 1fr; padding: 18px 14px; }
  .fx-hero { padding-top: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fx-chip { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
}