/*
 * 4BIZapp website: one type scale for the whole page (set wb0, 2026-10-14). Loaded last, after style.css and
 * responsive.css. The template set many sizes by hand (paragraphs as 24px headings, 13px lists, 20px thin tables);
 * everything text-sized now comes from the few sizes below, and phones get the same scale one step smaller.
 *
 *   --fs-hero  page title          --fs-h2  section headline     --fs-h3  sub-headline / card title
 *   --fs-lead  intro under a title  --fs-body  all reading text    --fs-small  notes, tables   --fs-tiny  fine print
 */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/nunito/nunito-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/nunito/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/nunito/nunito-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/nunito/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/nunito/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/nunito/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/nunito/nunito-latin-900-normal.woff2) format('woff2'); }

:root {
    --fs-hero: 52px; --fs-h2: 36px; --fs-h3: 22px; --fs-lead: 20px; --fs-body: 18px; --fs-small: 15px; --fs-tiny: 13px;
    --c-text: #2b3440; --c-muted: #5f6b76; --c-brand: #0478a4; --c-head: #14212b;
}
@media (max-width: 991px) { :root { --fs-hero: 42px; --fs-h2: 30px; --fs-h3: 20px; --fs-lead: 18px; --fs-body: 17px; } }
@media (max-width: 575px) { :root { --fs-hero: 34px; --fs-h2: 26px; --fs-h3: 19px; --fs-lead: 17px; --fs-body: 16px; --fs-small: 14px; } }

body { font-family: 'Nunito', sans-serif; font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--c-text); }
strong, b { font-weight: 800; font-size: inherit; }
i, em { font-size: inherit; }

/* Section headings: a small brand-colored label, one headline, one intro line */
.site-heading { margin-bottom: 40px; }
.site-heading .area-title { font-size: var(--fs-small); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); line-height: 1.4; margin: 0 0 10px; }
.site-heading .devider { margin: 0 auto 18px; }
.site-heading h2:not(.area-title), .site-heading h3:not(.area-title) { font-size: var(--fs-h2); max-width: 860px; margin-left: auto; margin-right: auto; font-weight: 800; line-height: 1.22; color: var(--c-head); margin: 0 0 14px; text-transform: none; }
.site-heading h2:not(.area-title) strong, .site-heading h3:not(.area-title) strong { font-weight: 900; }
.site-heading h4 { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; color: var(--c-muted); margin: 0; }

/* The page title */
.banner-area .info h2, .banner-area .info h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.banner-area .info h3 { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; }
.banner-area h3 strong { font-weight: 800; }
.banner-area h6, .banner-area h6 i { font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); }

/* Reading text: the template wrote paragraphs as h4, so every h4 outside a heading or card reads as body text */
[id^="section"] h4:not(.mb-0):not(.widget-title), #pricing h4, #privacy h4, #terms h4, #connect-help h4 { font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--c-text); margin: 0 0 14px; }
[id^="section"] p, #pricing p, #privacy p, #terms p, #connect-help p { font-size: var(--fs-body); line-height: 1.65; }
/* A bold run that starts a pricing paragraph is a sub-heading there ("How It Works") */
#pricing h4 > strong:only-child { display: block; font-size: var(--fs-h3); margin-top: 26px; color: var(--c-head); }
#pricing h3:not(.site-heading h3), #pricing h5, #privacy h5, #terms h5, #connect-help h5 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.35; color: var(--c-head); margin: 28px 0 10px; }
#pricing h5 { font-size: var(--fs-body); font-weight: 600; color: var(--c-muted); margin-top: 18px; }

/* Lists: same size and weight as the text around them */
ul.list li, [id^="section"] li, #pricing li, #privacy li, #connect-help li, .fx-tile li { font-size: var(--fs-body); font-weight: 400 !important; line-height: 1.55; }
.fx-tile li { font-size: var(--fs-small); }

/* Cards (What it replaces / Major systems) */
.fx-tile h4 { font-size: var(--fs-h3); font-weight: 800; color: var(--c-brand); }
.fx-tile p { font-size: var(--fs-small); }
.fx-tile .fx-was, .fx-tile a.fx-more { font-size: var(--fs-tiny); }
.fx-one { font-size: var(--fs-lead); }

/* Calculator */
.fx-calc label { font-size: var(--fs-small); font-weight: 700; }
.fx-calc select, .fx-calc input { height: 44px; font-size: var(--fs-small); line-height: 1.3; }
.fx-calc .fx-own span, .fx-result .fx-row { font-size: var(--fs-small); }
.fx-result .fx-row span:first-child { font-weight: 400; }
.fx-result .fx-save { font-size: 30px; }
#savings .fx-result .fx-sub, #savings .fx-calc .fx-note, #savings .fx-fine, #replaces .fx-tile .fx-was { font-size: var(--fs-tiny); }

/* Tables */
table.pricing-table, table.pricing-table td, table.pricing-table th { font-size: var(--fs-small) !important; line-height: 1.45; }
table.pricing-table td { font-weight: 400; color: var(--c-text); }
table.pricing-table th { font-weight: 800; color: var(--c-head); }
table.pricing-table strong { font-weight: 800; }

/* FAQ */
.faq-area .card-header h4 { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }
.faq-area .card-body p { font-size: var(--fs-small); line-height: 1.6; }

/* Navigation and buttons */
nav.navbar #navbar-menu .nav > li > a { font-size: var(--fs-small); font-weight: 700; }
.fx-btns a, .contact-area button, .btn { font-size: var(--fs-small); }

/* Contact forms */
#contact h4.area-title { font-size: var(--fs-h3); font-weight: 800; }
.contact-area p, .contact-area input, .contact-area textarea { font-size: var(--fs-small); }

/* Footer */
footer, footer p, footer a, footer .content { font-size: var(--fs-small); }
footer h4.widget-title { font-size: var(--fs-h3); }
footer .footer-bottom p, footer .footer-bottom a { font-size: var(--fs-tiny); }

/* Cookie choice (set wb0) */
.ck-bar { position: fixed; left: 16px; bottom: 16px; z-index: 10000; width: calc(100% - 32px); max-width: 440px; background: #0b3d52; color: #fff;
          border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ck-bar[hidden] { display: none; }
.ck-bar p { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); line-height: 1.5; color: #fff; }
.ck-bar a { color: #9fdcf5; text-decoration: underline; }
.ck-bar .ck-btns { display: flex; gap: 10px; }
.ck-bar button { border: 2px solid #fff; border-radius: 24px; padding: 8px 22px; font: inherit; font-size: var(--fs-small); font-weight: 800; cursor: pointer; background: #fff; color: #0b3d52; }
.ck-bar button.ck-no { background: transparent; color: #fff; }