/* ==========================================================================
   Searcora — LinkedIn activation page
   Page-specific styles. Loads AFTER styles.css + legal.css and reuses tokens.
   ========================================================================== */

/* Hero trust points grid -------------------------------------------------- */
.ln-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.ln-trust li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  font-size: 0.88rem; color: #d4dbea;
}
.ln-trust li svg { color: var(--blue); flex: none; margin-top: 2px; }

/* Plan pricing card: duration -> price rows ------------------------------- */
.plan-card ul.dur-list { display: grid; gap: 0; margin: 0 0 22px; }
.dur-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.dur-row:last-child { border-bottom: none; }
.dur-row .dur { color: #d4dbea; }
.dur-row .price { font-weight: 700; color: #fff; font-size: 1.05rem; }
.section--grey .dur-row { border-color: var(--border-dark); }
.section--grey .dur-row .dur { color: #3a4255; }
.section--grey .dur-row .price { color: var(--navy); }

.plan-best { display: grid; gap: 8px; margin: 0 0 22px; }
.plan-best li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.plan-best li svg { color: var(--blue); flex: none; margin-top: 3px; }
.section--grey .plan-best li { color: #5b657a; }

/* Comparison table -------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.compare {
  width: 100%; border-collapse: collapse; min-width: 720px;
  background: var(--card); font-size: 0.92rem;
}
.compare th, .compare td {
  padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare thead th {
  background: rgba(67,97,238,0.12); color: #fff; font-weight: 700;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody tr:hover { background: rgba(255,255,255,0.03); }
.compare td.plan-name { color: #fff; font-weight: 600; }
.compare td { color: var(--muted); }
.compare .btn { padding: 9px 16px; font-size: 0.85rem; }

/* Process steps (6) — reuse .step look in a flexible grid ----------------- */
.ln-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .ln-trust { grid-template-columns: repeat(2, 1fr); }
  .ln-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ln-trust { grid-template-columns: 1fr; }
  .ln-steps { grid-template-columns: 1fr; }
}