/* Type scale for pages with body.type-scale (the homepage for now).
   Sizes come from the --fs-* tokens in tokens.css, which also hold the phone sizes.
   Link this file after site.css. The .type-scale prefix keeps pages without the class unchanged,
   so the shared stylesheets can move to the tokens page by page.
   Exceptions on purpose: the Download button, buttons, the pricing calculator (.pgcb-info-box,
   .pgcb-price, order table), the NEW / FREE badges and the legal line. */

body.type-scale {
    font-size: var(--fs-body);
}

/* Headings */
.type-scale .jumbotron-headline {
    font-size: var(--fs-display);
}

.type-scale .section-top-headline {
    font-size: var(--fs-h2);
}

.type-scale .section-top-detail {
    font-size: var(--fs-h3);
}

/* Item titles: FAQ questions, "Have more questions?", product names (cards set theirs in site.css) */
.type-scale .faq-content h3,
.type-scale #products h3 {
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-feature-title);
}

/* Lead: hero subheadline and the intro paragraph under a section title */
.type-scale .jumbotron .jumbotron-subheadline,
.type-scale .type-lead,
.type-scale #buy .lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.type-scale .jumbotron .jumbotron-subheadline {
    font-weight: 300;
}

.type-scale .type-lead {
    font-weight: 400;
}

/* Body text */
.type-scale .general-editor-info p,
.type-scale .download-call-to-action p,
.type-scale .wp-plugin-banner,
.type-scale .normal,
.type-scale .feature-content--description,
.type-scale .smaller:not(.buy-choose-payment-model),
.type-scale .buy-aditional-info p,
.type-scale .faq-content p,
.type-scale .media-heading,
.type-scale .team-member .name,
.type-scale blockquote,
.type-scale blockquote p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.type-scale .topics li {
    font-size: var(--fs-body);
}

.type-scale .media-heading,
.type-scale .download-call-to-action p,
.type-scale .general-editor-info p {
    font-weight: 400;
}

/* Small text */
.type-scale .footer-links,
.type-scale #buy .smallest {
    font-size: var(--fs-small);
}

/* News items sit in narrow quarter-width columns */
.type-scale .news-item p {
    font-size: var(--fs-small);
    line-height: 1.5;
}

.type-scale .navbar-default .navbar-nav > li > a {
    font-weight: 400;
}

/* Labels: small uppercase eyebrows, dates, roles and column headers */
.type-scale .available-in,
.type-scale .news-item small,
.type-scale .team-member .job,
.type-scale .buy-aditional-info h4,
.type-scale .footer-links--header {
    font-size: var(--fs-label);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.type-scale .buy-aditional-info h4,
.type-scale .footer-links--header {
    font-weight: 700;
}

/* Product pages with the tw layout (Tailwind Visual Editor, Shop Builder for WooCommerce) */
.type-scale h2.section-top-headline {
    font-size: var(--fs-h2);
}

.type-scale .tw-step-section-name {
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: var(--lh-heading);
}

.type-scale .pgtc-steps h3:not(.tw-step-section-name) {
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-feature-title);
}

.type-scale .tw-step p,
.type-scale .pgtc-step-desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.type-scale .tw-step p.tw-note {
    font-size: var(--fs-small);
}

/* Product pages with the pgtc layout (WordPress Plugin, Theme Converter) */
body.type-scale.pgtc {
    font-size: var(--fs-body);
}

.type-scale .pgtc-header h1 {
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1.15;
}

.type-scale .pgtc-header .pgtc-desc {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.type-scale.pgtc h2 {
    font-size: var(--fs-h2);
}

.type-scale.pgtc h3 {
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-feature-title);
}

.type-scale .pgtc-step-content p,
.type-scale .pgtc-step-content li,
.type-scale .pgtc-info-box {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.type-scale .pgtc-step-content .pgtc-note {
    font-size: var(--fs-small);
}

/* FAQ questions written as a p inside the h3 */
.type-scale .faq-content h3 p {
    font-size: inherit;
    line-height: inherit;
}