/* =====================================================================
   Pug IT Solution — pricing page
   ---------------------------------------------------------------------
   Price cards, the comparison table and the small print of
   pages/pricing.html. Every rule is scoped under .pricing-page, the
   page's <main>.
   ===================================================================== */
.pricing-page .price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(26, 26, 34, 0.6), rgba(10, 10, 14, 0.86));
}
.pricing-page .price-card__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pricing-page .price-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.pricing-page .price-card__amount small {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
}
/* "From" sits above the figure rather than fighting it for the baseline */
.pricing-page .price-card__from {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* The sentence that says where the ceiling is, right under the figure */
.pricing-page .price-card__range {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gold-bright);
}

.pricing-page .compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.pricing-page .compare th,
.pricing-page .compare td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.pricing-page .compare thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.pricing-page .compare tbody th { font-weight: 600; color: var(--text); }
.pricing-page .compare td { color: var(--text-dim); }
.pricing-page .compare tbody tr:last-child th,
.pricing-page .compare tbody tr:last-child td { border-bottom: 0; }
.pricing-page .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(14, 14, 19, 0.72); }

/* The small print that has to be read, so it is legible rather than hidden */
.pricing-page .fineprint {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: rgba(201, 162, 39, 0.035);
}
.pricing-page .fineprint h3 { font-size: 17px; font-weight: 600; }
.pricing-page .fineprint p { font-size: 14.5px; line-height: 1.68; color: var(--text-dim); }