/* Ishara · /early-access/ (and its Arabic twin, which may load it too).
 * The steps and the credit note are styled in convert.css; this file adds the
 * coverage figures, the three pillars and the credit cards. */

.ea-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.ea-stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: var(--panel); }
.ea-stat b { font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ea-stat span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.ea-stats-note { margin: 0 0 30px; font-size: 13px; color: var(--faint); }
.ea-pillars .card { display: flex; flex-direction: column; }
.ea-steps-wrap { margin-top: 30px; }
.ea-pillars .card p { flex: 1; }

.ea-credit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.ea-credit-card { padding: 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.ea-credit-card h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); }
.ea-credit-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ea-credit-work { border-color: #8fc3bb; background: linear-gradient(180deg, #f1f9f6, #fff 75%); }
.ea-credit-work .card-icon { background: var(--brand-a); color: #fff; }
.ea-plans { margin: 24px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 72ch; }
.ea-plans a { white-space: nowrap; }

@media (max-width: 900px) {
  .ea-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-credit { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ea-stat { padding: 16px; }
  .ea-stat b { font-size: 27px; }
}