/* Load after styles.css. Shared by the legacy copy and the published landing. */
small { font-size: max(12px, .833333em); }

.announcement b,
.brand-symbol,
.hero-pill,
.mascot-card small,
.stage-live,
.stage-step-label,
.stage-step-label > span,
.target-window-bar small,
.target-url strong,
.target-payload > span,
.target-payload i,
.stage-target > p,
.stage-order small,
.stage-order > div b,
.stage-delivery .stage-step-label b,
.stage-delivery p,
.vote-row,
.use-strip-inner > span,
.kicker,
.quality-chip b,
.quality-chip small,
.community-tag,
.scale-summary span,
.scale-summary strong,
.scale-status,
.item-number,
.standards-head,
.standards-foot,
.standards-head b,
.how-row > span,
.row-example b,
.row-example > i,
.api-glyph,
.panel-header,
.panel-header b,
.panel-result,
.message small,
.mcp-tool,
.pricing-card-head b,
.pricing-price > span,
.credit-rates span,
.credit-rates small,
.pricing-includes,
.pricing-volume-label,
.guarantee-example b,
.footer-inner,
.stage-comment small,
.stage-comment p,
.example-status,
.example-tags span,
.calculator-controls label,
.calculator-results small,
.calculator-note {
  font-size: 12px;
}

.pricing-card-head {
  flex-wrap: wrap;
  gap: 12px;
}

.pricing-price {
  max-width: 100%;
  flex-wrap: wrap;
}

/* These labels sit inside scaled illustrations; keep the rendered size >=12px. */
@media (max-width: 1000px) {
  .quality-chip b,
  .quality-chip small { font-size: 14px; }

  .chip-karma { top: 100px; }

  .community-four {
    left: min(var(--signal-x), calc(100% - 72px));
  }
}

@media (max-width: 760px) {
  .announcement,
  .hero-pill,
  .use-strip b,
  .integration-panel pre { font-size: 12px; }

  .quality-chip b,
  .quality-chip small { font-size: 15px; }

  .mascot-card small { font-size: 13px; }

  .hero-pill {
    max-width: 100%;
  }

  .hero-pill span {
    max-width: none;
    white-space: normal;
    text-align: left;
  }

  .pricing-price {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .pricing-price strong small {
    display: block;
    margin: 12px 0 0;
    line-height: 1.4;
    white-space: normal;
  }

  .pricing-price > span { max-width: none; }
}