:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --type-display: clamp(34px, 4vw, 52px);
  --type-h1: clamp(36px, 4.5vw, 52px);
  --type-h2: clamp(28px, 3.5vw, 40px);
  --type-h3: 1.25rem;
  --type-lead: 1.125rem;
  --type-body: 1rem;
  --type-ui: 0.9375rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --weight-body: 400;
  --weight-medium: 550;
  --weight-ui: 680;
  --weight-heading: 730;
  --leading-display: 1.12;
  --leading-h1: 1.16;
  --leading-h2: 1.22;
  --leading-h3: 1.4;
  --leading-body: 1.75;
  --leading-small: 1.65;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  text-wrap: balance;
}

h1,
.hero h1 {
  font-size: var(--type-h1);
  font-weight: var(--weight-heading);
  line-height: var(--leading-h1);
  letter-spacing: -0.025em;
}

h2,
.section h2,
.cta h2 {
  font-size: var(--type-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-h2);
  letter-spacing: -0.02em;
}

h3,
.card h3,
.step h3 {
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: var(--leading-h3);
  letter-spacing: -0.01em;
}

.lead,
.section-lead,
.article .lead {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}

.article p,
.article li,
.card p,
.step p,
.faq p,
.pricecard li,
.download-box p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.navlinks,
.navcta,
.primary,
.secondary,
.download-btn,
.actions a {
  font-size: var(--type-ui);
  font-weight: var(--weight-ui);
  line-height: 1.4;
}

.eyebrow {
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.micro,
.topline,
.bar,
.badge,
.trial-badge,
.site-footer__bottom {
  font-size: var(--type-caption);
  line-height: 1.6;
}

.a .hero h1 {
  font-size: var(--type-display);
  font-weight: 750;
  line-height: var(--leading-display);
  letter-spacing: -0.025em;
}

.a .lead,
.a .section-lead {
  font-size: var(--type-lead);
}

.a .card p,
.a .pricecard li,
.a .download-box p {
  font-size: var(--type-body);
}

.a .free-modules-tier-copy {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.a .free-modules-tier-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.a .free-modules-badge {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.a .free-modules-tier.is-free h3 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.a .free-modules-number strong {
  font-size: 30px;
  line-height: 1.15;
}

.a .free-modules-number span {
  font-size: 13px;
  line-height: 1.5;
}

.a .free-modules-categories span {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.a .free-modules-clients {
  font-size: 14px;
  line-height: 1.65;
}

.article-link span,
.related a {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

.site-footer,
.site-footer__brand-tagline,
.site-footer__section-title,
.site-footer__links {
  font-size: var(--type-small);
  line-height: var(--leading-small);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  :root {
    --type-h3: 1.125rem;
    --type-lead: 1.0625rem;
  }

  .a .hero h1 {
    font-size: 34px;
  }

  .a .free-modules-number strong {
    font-size: 28px;
  }

  h1,
  .hero h1 {
    font-size: 36px;
  }

  h2,
  .section h2,
  .cta h2 {
    font-size: 28px;
  }

  .a h1 .title-line,
  .a h1 .title-accent {
    white-space: normal;
  }
}