/* /feature-comparison/ — GeoShred apps feature matrix.
   Full-grid table: every cell ruled so each mark lines up under its
   app column. Body font for feature text (eurostile-extended is too
   wide to read at table sizes). */

.fc-page {
  background: var(--mf-fold-light);
  color: var(--mf-text-primary);
  min-height: calc(100vh - var(--mf-header-height));
}

.fc-inner {
  max-width: var(--mf-container-width);
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.fc-title {
  font-family: var(--mf-font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mf-text-white);
}

.fc-subtitle {
  font-family: var(--mf-font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--mf-text-meta);
  margin-top: 0.5rem;
}

/* ---------- Legend ---------- */

.fc-legend {
  margin: 1.4rem 0 2rem;
  padding: 0.85rem 1.2rem;
  background: var(--mf-bg-alt);
  border-left: 4px solid var(--mf-accent-orange);
  font-family: var(--mf-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mf-text-meta);
}

.fc-legend .fc-key-yes { color: var(--mf-accent-teal); font-weight: 700; }
.fc-legend .fc-key-no  { color: var(--mf-text-muted); font-weight: 700; }

/* ---------- Table ---------- */

.fc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mf-font-body);
  min-width: 720px;
}

/* Every cell ruled — this is what gives the grid its "table vibe" */
.fc-table th,
.fc-table td {
  border: 1px solid var(--mf-border-medium);
}

/* Header */
.fc-table thead th {
  position: sticky;
  top: 0;
  background: var(--mf-bg-alt2);
  color: var(--mf-text-white);
  vertical-align: top;
  padding: 12px 10px;
  z-index: 1;
}

.fc-table thead th.fc-feature-head {
  vertical-align: bottom;
  text-align: left;
  font-family: var(--mf-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 44%;
}

.fc-app-head {
  text-align: center;
  width: 14%;
}

.fc-app-head img {
  width: 46px;
  height: 46px;
  margin: 0 auto 6px;
  border-radius: 10px;
}

.fc-app-head .fc-app-name {
  display: block;
  font-family: var(--mf-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
  /* Two-line height for every app so the header cells are uniform and
     the icons line up — "GeoShred Pro" is one line, the rest wrap. */
  min-height: 2.5em;
  text-transform: uppercase;
}

/* Body — feature label cell */
.fc-table tbody th {
  text-align: left;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--mf-text-primary);
  padding: 11px 14px;
}

/* Body — mark cells */
.fc-table tbody td {
  text-align: center;
  padding: 11px 10px;
  font-size: 1.1rem;
  line-height: 1;
}

.fc-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.fc-table tbody tr:hover {
  background: rgba(128, 203, 196, 0.07);
}

/* Marks */
.fc-yes { color: var(--mf-accent-teal); font-weight: 700; }
.fc-no  { color: var(--mf-text-muted); }

@media (max-width: 600px) {
  .fc-inner { padding: 36px 14px 72px; }
  .fc-table tbody th { font-size: 0.88rem; padding: 10px 10px; }
  .fc-app-head img { width: 38px; height: 38px; }
}