/* TESORIN — site-wide small-text readability
   Loaded after page styles; footer.css separately owns footer presentation. */

:root {
  --readable-muted: #6f6a62;
  --readable-label: 12px;
  --readable-meta: 14px;
  --readable-small: 15px;
}

/* Shared helper copy */
.hero-meta {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--readable-muted) !important;
}

/* Uppercase labels that previously rendered at 10–11px */
.legal-card .tag,
.split-cell .tag,
.price-card .lbl,
.saving,
.spread .meta,
.bc-label,
.faq-nav .small,
thead th {
  font-size: var(--readable-label) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: .11em !important;
}

.legal-card .tag,
.split-cell .tag {
  color: var(--lilac-deep) !important;
}

/* Metadata, helper copy and secondary descriptions */
.legal-meta,
.detail-note,
.official-note,
.success-main .note,
tbody td .meta {
  font-size: var(--readable-meta) !important;
  line-height: 1.65 !important;
  color: var(--readable-muted) !important;
}

.about-pronounce,
.about-note,
.price-note,
.plan-name,
.price-card .sub,
.bc-sub,
.bc-flag-side .country {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.bc-sub,
.bc-flag-side .country {
  color: var(--readable-muted) !important;
}

/* Dense product examples and comparison content */
.feature-nav-inner {
  font-size: 14.5px;
}

.border-card,
.price-card {
  font-size: var(--readable-small);
}

.bc-row {
  font-size: 14.5px;
  line-height: 1.5;
}

table {
  font-size: var(--readable-small);
  line-height: 1.6;
}

/* Utility pages */
.faq-nav a {
  font-size: var(--readable-small);
  line-height: 1.45;
}

.official-link .detail {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--readable-muted);
}

@media (max-width: 560px) {
  .legal-card .tag,
  .split-cell .tag,
  .price-card .lbl,
  .saving,
  .spread .meta,
  .bc-label,
  .faq-nav .small,
  thead th {
    font-size: 12px !important;
  }

  .hero-meta,
  .legal-meta,
  .detail-note,
  .official-note,
  .success-main .note,
  tbody td .meta {
    font-size: 14px !important;
  }

  .official-link .detail {
    font-size: 14px;
  }
}
