/*
Theme Name: Sydney Child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/

/* Global design tokens: reuse these variables throughout the child theme. */
:root {
    --site-color-text: #59677f;
    --site-color-heading: #17233d;
    --site-color-accent: #4d7dff;
    --site-color-border: #dfe5ef;
    --site-color-surface: #ffffff;
    --site-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --site-font-size-base: 16px;
    --site-font-style: normal;
    --site-font-weight-medium: 600;
}

body {
    color: var(--site-color-text);
    font-family: var(--site-font-family);
    font-size: var(--site-font-size-base);
    font-style: var(--site-font-style);
}

/* Header */
.custom-site-header {
    background: var(--site-color-surface);
    border-bottom: 1px solid #edf0f4;
}

.custom-navbar {
    min-height: 84px;
    padding: 0;
}

.custom-header-container {
    max-width: 1404px;
    min-height: 84px;
    padding-right: 18px;
    padding-left: 18px;
}

.custom-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 54px;
}
.custom-brand img {
    height: 60px;
}

.custom-brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.custom-brand .custom-logo {
    display: block;
    width: auto;
    max-width: 200px;
    max-height: 36px;
}
.site-header.float-header {
    background-color: #ffffffe6;
}
.custom-site-title {
    color: var(--site-color-heading);
    font-size: 20px;
    font-style: var(--site-font-style);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.custom-navbar .navbar-collapse {
    align-items: center;
}

.custom-primary-menu {
    gap: 35px;
    align-items: center;
}

.custom-primary-menu .menu-item {
    position: relative;
}

.custom-primary-menu .menu-item > a {
    color: var(--site-color-text);
    display: block;
    font-size: 15px;
    font-style: var(--site-font-style);
    font-weight: var(--site-font-weight-medium);
    line-height: 84px;
    text-decoration: none;
    transition: color .2s ease;
}

.custom-primary-menu .menu-item > a:hover,
.custom-primary-menu .current-menu-item > a,
.custom-primary-menu .current-menu-ancestor > a {
    color: var(--site-color-accent);
}

.custom-primary-menu .sub-menu {
    background: var(--site-color-surface);
    border: 1px solid var(--site-color-border);
    border-radius: 8px;
    box-shadow: 0 12px 25px rgb(23 35 61 / 12%);
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 210px;
    opacity: 0;
    padding: 8px 0;
    position: absolute;
    top: calc(100% - 10px);
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    visibility: hidden;
    z-index: 1000;
}

.custom-primary-menu .menu-item:hover > .sub-menu,
.custom-primary-menu .menu-item:focus-within > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.custom-primary-menu .sub-menu a {
    color: var(--site-color-text);
    display: block;
    font-size: 14px;
    font-weight: var(--site-font-weight-medium);
    padding: 8px 16px;
    text-decoration: none;
}

.custom-primary-menu .sub-menu a:hover {
    color: var(--site-color-accent);
}

.custom-header-actions {
    align-items: center;
    display: flex;
    gap: 26px;
    margin-left: auto;
}

.custom-currency-picker { align-items: center; border: 1px solid var(--site-color-border); border-radius: 7px; color: var(--site-color-text); display: inline-flex; gap: 6px; height: 38px; padding: 0 8px; }.custom-currency-picker svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }.custom-currency-picker select { appearance: none; background: transparent; border: 0; color: var(--site-color-heading); cursor: pointer; font-family: var(--site-font-family); font-size: 12px; font-style: var(--site-font-style); font-weight: 700; outline: 0; padding: 0 2px; width: 43px; }

.custom-search-link {
    align-items: center;
    color: var(--site-color-text);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.custom-search-link:hover {
    color: var(--site-color-accent);
}

.custom-search-link svg,
.custom-calculators-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.custom-search-link svg {
    height: 22px;
    width: 22px;
}

.custom-calculators-btn {
    align-items: center;
    border: 1px solid var(--site-color-border);
    border-radius: 9px;
    color: var(--site-color-heading);
    display: inline-flex;
    font-size: 14px;
    font-style: var(--site-font-style);
    font-weight: 700;
    gap: 15px;
    min-height: 50px;
    padding: 10px 18px;
    text-decoration: none;
    white-space: nowrap;
}

.custom-calculators-btn:hover,
.custom-calculators-btn:focus {
    background: var(--site-color-heading);
    border-color: var(--site-color-heading);
    color: var(--site-color-surface);
}

.custom-calculators-btn svg {
    height: 18px;
    width: 18px;
}

.custom-navbar-toggler {
    border-color: var(--site-color-border);
}

@media (max-width: 991.98px) {
    .custom-navbar {
        min-height: 70px;
    }

    .custom-header-container {
        min-height: 70px;
    }

    .custom-brand {
        margin-right: 0;
    }

    .custom-navbar .navbar-collapse {
        background: var(--site-color-surface);
        border-top: 1px solid #edf0f4;
        margin: 12px -18px 0;
        padding: 12px 18px 20px;
    }

    .custom-primary-menu {
        gap: 0;
    }

    .custom-primary-menu .menu-item > a {
        line-height: 1.3;
        padding: 12px 0;
    }

    .custom-primary-menu .sub-menu {
        box-shadow: none;
        display: none;
        margin-left: 12px;
        opacity: 1;
        position: static;
        transform: none;
        visibility: visible;
    }

    .custom-primary-menu .menu-item:hover > .sub-menu,
    .custom-primary-menu .menu-item:focus-within > .sub-menu {
        display: block;
    }

    .custom-header-actions {
        gap: 18px;
        margin: 14px 0 0;
    }

    .custom-currency-picker { margin-right: auto; }
}

@media (max-width: 575.98px) {
    .custom-brand .custom-logo {
        max-width: 160px;
        max-height: 30px;
    }

    .custom-calculators-btn {
        font-size: 13px;
        gap: 10px;
        min-height: 44px;
        padding: 8px 12px;
    }
}

/* Calculator home page */
.page-template-tpl-home .page-wrap,
.page-template-tpl-home .content-wrapper { max-width: none; padding: 0; width: 100%; }
.page-template-tpl-home .content-wrapper > .row { margin: 0; }
.calculator-home-page { padding: 0; }
.calculator-hero { background: radial-gradient(circle at 77% 48%, rgb(226 232 255 / 36%), transparent 18%), linear-gradient(110deg, #f5f8ff 0%, #fff 45%, #fbf9ff 100%); min-height: 770px; overflow: hidden; position: relative; }
.calculator-hero-container { max-width: 1404px; min-height: 770px; padding-bottom: 64px; padding-top: 119px; position: relative; }
.calculator-hero-copy { max-width: 720px; }
.calculator-eyebrow { align-items: center; color: #5872a8; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-style: var(--site-font-style); font-weight: 600; gap: 10px; letter-spacing: .07em; margin: 0 0 35px; text-transform: uppercase; }
.calculator-eyebrow span { background: var(--site-color-accent); border: 5px solid #dce8ff; border-radius: 50%; height: 20px; width: 20px; }
.calculator-hero h1 { color: var(--site-color-heading); font-size: clamp(54px, 5vw, 88px); font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.065em; line-height: 1.06; margin: 0; max-width: 620px; }
.calculator-hero h1 em { color: #2e67f2; display: block; font-style: var(--site-font-style); }
.calculator-hero-description { color: #657895; font-size: 18px; font-style: var(--site-font-style); line-height: 1.7; margin: 30px 0 38px; max-width: 660px; }
.calculator-search-form { align-items: center; background: var(--site-color-surface); border: 1px solid #cad8ee; border-radius: 9px; box-shadow: 0 18px 35px rgb(55 82 138 / 11%); display: flex; height: 78px; max-width: 715px; padding: 0 20px; }
.calculator-search-form svg { fill: none; flex: 0 0 auto; height: 26px; margin-right: 18px; stroke: #2e67f2; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 26px; }
.calculator-search-form input { background: transparent; border: 0; box-shadow: none; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); height: 100%; outline: 0; padding: 0; width: 100%; }
.calculator-search-form input::placeholder { color: #9aaac4; opacity: 1; }
.calculator-benefits { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; margin: 23px 0 0; padding: 0; }
.calculator-benefits li { color: #7185a2; font-size: 14px; font-style: var(--site-font-style); }
.calculator-benefits li::before { color: #41bc8e; content: '✓'; font-size: 18px; font-weight: 700; margin-right: 10px; }
.calculator-hero-visual { height: 470px; margin: -24px auto 0; max-width: 500px; position: relative; }
.calculator-orbit { border: 1px solid #d7e1ff; border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.calculator-orbit-outer { height: 422px; width: 422px; }
.calculator-orbit-inner { border-color: #e5dafe; height: 270px; width: 270px; }
.calculator-time-card { background: rgb(255 255 255 / 94%); border: 1px solid #e2e7f0; box-shadow: 0 20px 40px rgb(57 78 129 / 10%); left: 61%; min-width: 205px; padding: 24px 26px; position: absolute; top: 49%; transform: translate(-50%, -50%); }
.calculator-time-card span, .calculator-time-card small { color: #6880a1; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); letter-spacing: .03em; }
.calculator-time-card strong { color: var(--site-color-heading); display: block; font-size: 31px; font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.045em; margin: 18px 0 5px; }
.calculator-live-status { bottom: 55px; color: #a1afc8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); letter-spacing: .03em; margin: 0; position: absolute; right: 18px; text-transform: uppercase; }
.calculator-live-status b { background: #35bd87; border-radius: 50%; display: inline-block; height: 6px; margin: 0 8px 1px 22px; width: 6px; }
.calculator-live-label { color: #35bd87; }
@media (max-width: 991.98px) { .calculator-hero, .calculator-hero-container { min-height: 0; } .calculator-hero-container { padding-bottom: 85px; padding-top: 80px; } .calculator-hero-visual { margin-top: 15px; } .calculator-live-status { bottom: 28px; } }
@media (max-width: 575.98px) { .calculator-hero-container { padding: 58px 24px 80px; } .calculator-eyebrow { font-size: 10px; margin-bottom: 24px; } .calculator-hero h1 { font-size: 50px; } .calculator-hero-description, .calculator-search-form input { font-size: 16px; } .calculator-search-form { height: 64px; padding: 0 15px; } .calculator-search-form svg { height: 22px; margin-right: 12px; width: 22px; } .calculator-benefits { gap: 9px 18px; } .calculator-hero-visual { height: 320px; transform: scale(.74); } .calculator-live-status { font-size: 10px; right: 24px; } }

/* Popular calculators */
.popular-calculators { background: var(--site-color-surface); padding: 111px 0 92px; }
.popular-calculators-container { max-width: 1404px; }
.popular-calculators-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 46px; }
.popular-calculators-eyebrow { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 19px; text-transform: uppercase; }
.popular-calculators h2 { color: var(--site-color-heading); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }
.popular-calculators-heading > div > p:last-child { color: #7185a1; font-size: 17px; font-style: var(--site-font-style); margin: 13px 0 0; }
.popular-calculators-all, .popular-calculator-link { align-items: center; color: #2e67f2; display: inline-flex; font-size: 15px; font-style: var(--site-font-style); font-weight: 700; gap: 13px; text-decoration: none; }
.popular-calculators-all:hover, .popular-calculator-link:hover { color: var(--site-color-heading); }
.popular-calculators-all svg, .popular-calculator-link svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.popular-calculator-card { border: 1px solid #e1e8f3; border-radius: 10px; display: flex; flex-direction: column; height: 100%; min-height: 265px; padding: 29px 23px 28px; position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.popular-calculator-card:hover { border-color: #c9d9fb; box-shadow: 0 14px 32px rgb(51 89 162 / 10%); transform: translateY(-3px); }
.popular-calculator-number { color: #a7b8d1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; position: absolute; right: 21px; top: 28px; }
.popular-calculator-icon { align-items: center; background: #edf3ff; border-radius: 9px; color: #2e67f2; display: inline-flex; height: 46px; justify-content: center; width: 46px; }
.popular-calculator-icon svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 24px; }
.popular-calculator-card-content { margin-top: 37px; }
.popular-calculator-card h3, .popular-calculator-card h2 { color: var(--site-color-heading); font-size: 18px; font-style: var(--site-font-style); font-weight: 650; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 13px; }
.popular-calculator-card p { color: #7185a1; font-size: 15px; font-style: var(--site-font-style); line-height: 1.45; margin: 0; max-width: 245px; }
.popular-calculator-link { font-size: 14px; margin-top: auto; padding-top: 22px; }
.all-calculators-page .page-wrap, .all-calculators-page .content-wrapper { max-width: none; padding: 0; width: 100%; }.all-calculators-page .content-wrapper > .row { margin: 0; }.all-calculators { background: var(--site-color-surface); padding: 88px 0 0; }.all-calculators-container { max-width: 1404px; }.all-calculators-heading { margin-bottom: 47px; }.all-calculators-heading p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 18px; text-transform: uppercase; }.all-calculators-heading h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 48px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: -.06em; line-height: 1.05; margin: 0; }.all-calculators-heading span { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 17px; font-style: var(--site-font-style); margin-top: 14px; }
.calculator-search-page .page-wrap, .calculator-search-page .content-wrapper { max-width: none; padding: 0; width: 100%; }.calculator-search-page .content-wrapper > .row { margin: 0; }.calculator-search-results { background: var(--site-color-surface); min-height: 560px; padding: 88px 0 110px; }.calculator-search-results-container { max-width: 1404px; }.calculator-search-results-heading { margin-bottom: 47px; }.calculator-search-results-heading p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 18px; text-transform: uppercase; }.calculator-search-results-heading h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 48px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: -.06em; line-height: 1.05; margin: 0; }.calculator-search-results-heading span { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 17px; font-style: var(--site-font-style); margin-top: 14px; }.calculator-search-pagination { margin-top: 42px; }.calculator-search-pagination .nav-links { display: flex; gap: 8px; }.calculator-search-pagination a, .calculator-search-pagination .current { border: 1px solid #dbe4f1; border-radius: 6px; color: var(--site-color-heading); font-size: 14px; padding: 9px 13px; text-decoration: none; }.calculator-search-pagination .current { background: var(--site-color-accent); border-color: var(--site-color-accent); color: #fff; }.calculator-search-empty { padding: 28px 0; }.calculator-search-empty h2 { color: var(--site-color-heading); font-size: 28px; margin: 0 0 13px; }.calculator-search-empty p { color: #7185a1; font-size: 16px; margin: 0 0 22px; }

/* Contact page */
.contact-page .page-wrap, .contact-page .content-wrapper { max-width: none; padding: 0; width: 100%; }.contact-page .content-wrapper > .row { margin: 0; }.contact-page-container { max-width: 1404px; }.contact-page-hero { background: #f6f8fc; padding: 91px 0 88px; }.contact-page-hero p, .contact-page-copy > p, .contact-page-form-head > p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 19px; text-transform: uppercase; }.contact-page-hero h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: clamp(52px, 5vw, 76px); font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.065em; line-height: .98; margin: 0; }.contact-page-hero span { color: var(--site-color-text); display: block; font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); font-weight: var(--site-font-weight-medium); line-height: 1.65; margin-top: 24px; max-width: 665px; }.contact-page-content { background: var(--site-color-surface); padding: 90px 0 105px; }.contact-page-copy { padding: 19px 30px 0 0; }.contact-page-copy h2, .contact-page-form-head h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 38px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }.contact-page-copy > span { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 17px; font-style: var(--site-font-style); line-height: 1.6; margin-top: 19px; max-width: 485px; }.contact-page-details { border-top: 1px solid #e2e9f3; margin-top: 40px; max-width: 470px; }.contact-page-details > div { align-items: flex-start; border-bottom: 1px solid #e2e9f3; display: flex; gap: 15px; padding: 19px 0; }.contact-page-details i { align-items: center; background: #edf3ff; border-radius: 8px; color: var(--site-color-accent); display: inline-flex; flex: 0 0 auto; height: 39px; justify-content: center; width: 39px; }.contact-page-details svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 19px; }.contact-page-details p { margin: 0; }.contact-page-details strong { color: var(--site-color-heading); display: block; font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); font-weight: 700; }.contact-page-details small { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); line-height: 1.5; margin-top: 5px; }.contact-page-form { border: 1px solid #e0e7f1; border-radius: 10px; padding: 39px; }.contact-page-form-head { border-bottom: 1px solid #e7ecf4; margin-bottom: 28px; padding-bottom: 25px; }.contact-page-form-head > p { margin-bottom: 12px; }.contact-page-form-head h2 { font-size: 28px; font-weight: 650; }.contact-page-form .wpcf7 form > p { color: var(--site-color-text); font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); font-weight: 700; line-height: 1.45; margin: 0 0 18px; }.contact-page-form .wpcf7 input:not([type="submit"]), .contact-page-form .wpcf7 textarea, .contact-page-form .wpcf7 select { background: #fff; border: 1px solid #cfdbed; border-radius: 7px; box-shadow: none; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); font-weight: 500; margin-top: 8px; max-width: 100%; outline: 0; padding: 13px 14px; width: 100%; }.contact-page-form .wpcf7 textarea { height: 138px; resize: vertical; }.contact-page-form .wpcf7 input:focus, .contact-page-form .wpcf7 textarea:focus, .contact-page-form .wpcf7 select:focus { border-color: var(--site-color-accent); box-shadow: 0 0 0 3px rgb(46 103 242 / 10%); }.contact-page-form .wpcf7 input[type="submit"] { background: var(--site-color-accent); border: 1px solid var(--site-color-accent); border-radius: 7px; color: #fff; cursor: pointer; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); font-weight: 700; min-height: 51px; padding: 0 23px; }.contact-page-form .wpcf7 input[type="submit"]:hover { background: #2155d4; border-color: #2155d4; }.contact-page-form .wpcf7-response-output { border-color: #49c092 !important; color: #4a698d; font-family: var(--site-font-family); font-size: 14px; margin: 22px 0 0 !important; padding: 12px !important; }.contact-page-form .wpcf7-not-valid-tip { color: #d85353; font-size: 13px; font-weight: 500; margin-top: 5px; }.contact-page-note { background: #f5f7fc; padding: 30px 0; }.contact-page-note p { color: #657895; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); line-height: 1.65; margin: 0; max-width: 1000px; }.contact-page-note strong { color: var(--site-color-heading); }
@media (max-width: 575.98px) { .contact-page-container { padding-left: 24px; padding-right: 24px; }.contact-page-hero { padding: 62px 0; }.contact-page-hero h1 { font-size: 50px; }.contact-page-hero span { font-size: 16px; }.contact-page-content { padding: 56px 0 68px; }.contact-page-copy { padding: 0; }.contact-page-copy h2 { font-size: 34px; }.contact-page-form { padding: 25px 22px; }.contact-page-form-head h2 { font-size: 26px; } }

/* About page */
.about-page .page-wrap, .about-page .content-wrapper { max-width: none; padding: 0; width: 100%; }.about-page .content-wrapper > .row { margin: 0; }.about-page-container { max-width: 1404px; }.about-page-hero { background: #f6f8fc; padding: 94px 0 96px; }.about-page-hero > .container > p, .about-page-story-copy > p, .about-page-values-heading > p, .about-page-cta p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 19px; text-transform: uppercase; }.about-page-hero h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: clamp(52px, 5vw, 76px); font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.065em; line-height: .98; margin: 0; max-width: 930px; }.about-page-hero > .container > span { color: var(--site-color-text); display: block; font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); font-weight: var(--site-font-weight-medium); line-height: 1.65; margin-top: 25px; max-width: 670px; }.about-page-story { background: var(--site-color-surface); padding: 105px 0; }.about-page-story-copy { max-width: 550px; }.about-page-story-copy h2, .about-page-values h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }.about-page-story-copy > span { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 17px; font-style: var(--site-font-style); line-height: 1.65; margin-top: 19px; }.about-page-stat-card { background: #112442; border-radius: 10px; color: #fff; padding: 40px; }.about-page-stat-card > p { color: #8eb4ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .07em; margin: 0 0 27px; text-transform: uppercase; }.about-page-stat-card > div { border-top: 1px solid rgb(255 255 255 / 14%); display: grid; gap: 17px; grid-template-columns: 120px 1fr; padding: 22px 0; }.about-page-stat-card > div:last-child { padding-bottom: 0; }.about-page-stat-card strong { color: #fff; font-family: var(--site-font-family); font-size: 22px; letter-spacing: -.035em; }.about-page-stat-card span { color: #b3c4df; font-family: var(--site-font-family); font-size: 15px; line-height: 1.5; }.about-page-values { background: #f5f7fc; padding: 102px 0 110px; }.about-page-values-heading { margin-bottom: 45px; }.about-page-value { background: #fff; border: 1px solid #e1e8f3; border-radius: 10px; height: 100%; padding: 31px; }.about-page-value i { align-items: center; background: #edf3ff; border-radius: 9px; color: var(--site-color-accent); display: inline-flex; height: 48px; justify-content: center; width: 48px; }.about-page-value svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 24px; }.about-page-value h3 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 19px; font-style: var(--site-font-style); font-weight: 700; letter-spacing: -.025em; margin: 26px 0 12px; }.about-page-value p { color: #7185a1; font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); line-height: 1.55; margin: 0; }.about-page-cta { align-items: center; background: #112442; border-radius: 10px; color: #fff; display: flex; justify-content: space-between; margin: 92px auto; max-width: 1404px; padding: 51px 60px; }.about-page-cta p { color: #8eb4ff; margin-bottom: 17px; }.about-page-cta h2 { color: #fff; font-family: var(--site-font-family); font-size: 39px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }.about-page-cta span { color: #b3c4df; display: block; font-family: var(--site-font-family); font-size: 16px; line-height: 1.55; margin-top: 14px; }.about-page-cta a { align-items: center; background: var(--site-color-accent); border-radius: 7px; color: #fff; display: inline-flex; font-family: var(--site-font-family); font-size: 14px; font-weight: 700; gap: 12px; padding: 16px 19px; text-decoration: none; }.about-page-cta a:hover { background: #2155d4; color: #fff; }.about-page-cta svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
@media (max-width: 575.98px) { .about-page-container { padding-left: 24px; padding-right: 24px; }.about-page-hero { padding: 64px 0; }.about-page-hero h1 { font-size: 50px; }.about-page-hero > .container > span { font-size: 16px; }.about-page-story { padding: 67px 0; }.about-page-story-copy h2, .about-page-values h2 { font-size: 34px; }.about-page-stat-card { padding: 28px 24px; }.about-page-stat-card > div { gap: 8px; grid-template-columns: 1fr; }.about-page-values { padding: 68px 0; }.about-page-cta { align-items: flex-start; border-radius: 0; flex-direction: column; gap: 26px; margin: 0; padding: 52px 24px; }.about-page-cta h2 { font-size: 34px; } }

/* Privacy policy and legal pages */
.policy-page .page-wrap, .policy-page .content-wrapper { max-width: none; padding: 0; width: 100%; }.policy-page .content-wrapper > .row { margin: 0; }.policy-page-container { max-width: 1404px; }.policy-page-hero { background: #f6f8fc; padding: 87px 0 81px; }.policy-page-hero p, .policy-page-nav > p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 19px; text-transform: uppercase; }.policy-page-hero h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: clamp(52px, 5vw, 72px); font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.065em; line-height: .98; margin: 0; }.policy-page-hero span { color: var(--site-color-text); display: block; font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); font-weight: var(--site-font-weight-medium); line-height: 1.65; margin-top: 24px; max-width: 685px; }.policy-page-hero small { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 13px; margin-top: 21px; }.policy-page-content { background: var(--site-color-surface); padding: 82px 0 110px; }.policy-page-layout { display: grid; gap: 90px; grid-template-columns: 245px minmax(0, 780px); }.policy-page-nav { align-self: start; border-left: 1px solid #dbe4ef; display: flex; flex-direction: column; gap: 14px; padding-left: 22px; position: sticky; top: 28px; }.policy-page-nav > p { margin-bottom: 3px; }.policy-page-nav a { color: #7185a1; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); line-height: 1.3; text-decoration: none; }.policy-page-nav a:hover { color: var(--site-color-accent); }.policy-page-copy > p { color: #536d91; font-family: var(--site-font-family); font-size: 19px; font-style: var(--site-font-style); line-height: 1.65; margin: 0 0 45px; }.policy-page-copy section { border-top: 1px solid #e1e8f2; padding: 36px 0 8px; }.policy-page-copy h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 27px; font-style: var(--site-font-style); font-weight: 650; letter-spacing: -.04em; line-height: 1.15; margin: 0 0 18px; }.policy-page-copy section p { color: #7185a1; font-family: var(--site-font-family); font-size: 16px; font-style: var(--site-font-style); line-height: 1.7; margin: 0 0 17px; }.policy-page-contact-link { align-items: center; color: var(--site-color-accent); display: inline-flex; font-family: var(--site-font-family); font-size: 14px; font-weight: 700; gap: 12px; margin: 2px 0 20px; text-decoration: none; }.policy-page-contact-link:hover { color: var(--site-color-heading); }.policy-page-contact-link svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
@media (max-width: 991.98px) { .policy-page-layout { gap: 45px; grid-template-columns: 190px minmax(0, 1fr); } } @media (max-width: 767.98px) { .policy-page-layout { display: block; }.policy-page-nav { display: none; } } @media (max-width: 575.98px) { .policy-page-container { padding-left: 24px; padding-right: 24px; }.policy-page-hero { padding: 63px 0; }.policy-page-hero h1 { font-size: 50px; }.policy-page-hero span { font-size: 16px; }.policy-page-content { padding: 58px 0 70px; }.policy-page-copy > p { font-size: 17px; margin-bottom: 36px; }.policy-page-copy section { padding-top: 29px; }.policy-page-copy h2 { font-size: 25px; }.policy-page-copy section p { font-size: 15px; } }

/* Legal-page typography follows the global heading and content color tokens. */
.policy-page h1, .policy-page h2, .policy-page h3, .policy-page h4, .policy-page h5, .policy-page h6 { color: var(--site-color-heading); }.policy-page, .policy-page p, .policy-page span, .policy-page small, .policy-page li, .policy-page .policy-page-nav a { color: var(--site-color-text); }.policy-page a { color: var(--site-color-text); }.policy-page .policy-page-nav a:hover, .policy-page .policy-page-contact-link:hover { color: var(--site-color-heading); }.policy-page .policy-page-hero > p, .policy-page .policy-page-nav > p { color: var(--site-color-text); }
@media (max-width: 575.98px) { .popular-calculators { padding: 66px 0; } .popular-calculators-container { padding-left: 24px; padding-right: 24px; } .popular-calculators-heading { align-items: start; flex-direction: column; gap: 22px; margin-bottom: 30px; } .popular-calculators h2 { font-size: 34px; } .popular-calculators-heading > div > p:last-child { font-size: 16px; } .popular-calculator-card { min-height: 250px; } }

/* All calculator categories */
.calculator-categories { background: #f5f7fc; padding: 106px 0 104px; }
.calculator-categories-container { max-width: 1404px; }
.calculator-categories-heading { margin-bottom: 47px; }
.calculator-categories-heading p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 19px; text-transform: uppercase; }
.calculator-categories h2 { color: var(--site-color-heading); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }
.calculator-categories-heading > span { color: #7185a1; display: block; font-size: 17px; font-style: var(--site-font-style); margin-top: 14px; }
.calculator-category-card { align-items: center; background: var(--site-color-surface); border: 1px solid #e1e8f3; border-radius: 9px; color: inherit; display: flex; gap: 19px; min-height: 103px; padding: 18px 20px; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.calculator-category-card:hover { border-color: #c9d9fb; box-shadow: 0 12px 25px rgb(51 89 162 / 9%); color: inherit; transform: translateY(-2px); }
.calculator-category-icon { color: #2e67f2; flex: 0 0 20px; }
.calculator-category-icon svg, .calculator-category-arrow { fill: none; height: 23px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 23px; }
.calculator-category-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.calculator-category-copy strong { color: #516987; font-size: 16px; font-style: var(--site-font-style); font-weight: 700; line-height: 1.1; }
.calculator-category-copy small { color: #7185a1; font-size: 13px; font-style: var(--site-font-style); line-height: 1.28; }
.calculator-category-arrow { color: #2e67f2; flex: 0 0 20px; height: 20px; width: 20px; }
@media (max-width: 575.98px) { .calculator-categories { padding: 66px 0; } .calculator-categories-container { padding-left: 24px; padding-right: 24px; } .calculator-categories h2 { font-size: 34px; } .calculator-categories-heading > span { font-size: 16px; } }

/* Featured mortgage calculator */
.featured-mortgage { background: var(--site-color-surface); padding: 116px 0; }
.featured-mortgage-container { max-width: 1404px; }
.featured-mortgage-copy { max-width: 470px; }
.featured-mortgage-copy > p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 22px; text-transform: uppercase; }
.featured-mortgage-copy h2 { color: var(--site-color-heading); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }
.featured-mortgage-copy > span { color: #657895; display: block; font-size: 17px; line-height: 1.55; margin-top: 18px; max-width: 450px; }
.featured-mortgage-note { border-top: 1px solid #e2e8f2; display: flex; gap: 20px; margin-top: 60px; padding-top: 21px; }
.featured-mortgage-note > b { color: #2e67f2; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; font-weight: 500; }
.featured-mortgage-note div { display: flex; flex-direction: column; gap: 8px; }
.featured-mortgage-note strong { color: var(--site-color-heading); font-size: 16px; font-weight: 700; }.featured-mortgage-note small { color: #7185a1; font-size: 14px; }
.mortgage-calculator-widget { border: 1px solid #e1e8f3; border-radius: 10px; box-shadow: 0 20px 45px rgb(48 75 125 / 9%); display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.mortgage-calculator-form { background: var(--site-color-surface); padding: 31px; }.mortgage-form-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 27px; }.mortgage-form-head strong, .mortgage-form-head span { align-items: center; color: var(--site-color-heading); display: inline-flex; font-size: 15px; font-weight: 700; gap: 10px; }.mortgage-form-head span { color: #7082a0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-weight: 400; }.mortgage-form-head svg { fill: none; height: 18px; stroke: #2e67f2; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.mortgage-calculator-form label { color: #516987; display: block; font-size: 13px; font-weight: 700; margin-bottom: 18px; }.mortgage-input-wrap { align-items: center; border: 1px solid #cfdbed; border-radius: 6px; display: flex; height: 52px; margin-top: 9px; padding: 0 14px; }.mortgage-input-wrap input, .mortgage-calculator-form select { border: 0; box-shadow: none; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 14px; font-weight: 700; outline: 0; padding: 0; width: 100%; }.mortgage-calculator-form select { border: 1px solid #cfdbed; border-radius: 6px; height: 52px; margin-top: 9px; padding: 0 14px; }.mortgage-input-wrap i { color: #8497b4; font-size: 14px; font-style: var(--site-font-style); margin: 0 5px; }
.mortgage-form-buttons { display: flex; gap: 12px; margin-top: 27px; }.mortgage-form-buttons button { align-items: center; background: #2e67f2; border: 1px solid #2e67f2; border-radius: 7px; color: #fff; display: inline-flex; font-family: var(--site-font-family); font-size: 14px; font-weight: 700; gap: 13px; min-height: 49px; padding: 0 19px; }.mortgage-form-buttons button svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }.mortgage-form-buttons button:last-child { background: #fff; border-color: #cfdbed; color: var(--site-color-heading); }
.mortgage-calculator-result { background: #10213f; color: #dce7fb; padding: 33px 32px; }.mortgage-result-top { align-items: center; color: #9caed1; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; justify-content: space-between; letter-spacing: .06em; text-transform: uppercase; }.mortgage-result-top small { font-size: 11px; }.mortgage-calculator-result > p { align-items: baseline; display: flex; gap: 11px; margin: 27px 0 41px; }.mortgage-calculator-result > p strong { color: #fff; font-size: 43px; font-weight: 750; letter-spacing: -.06em; line-height: 1; }.mortgage-calculator-result > p span { color: #9caed1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }.mortgage-calculator-result ul { border-bottom: 1px solid rgb(255 255 255 / 12%); border-top: 1px solid rgb(255 255 255 / 12%); list-style: none; margin: 0; padding: 26px 0; }.mortgage-calculator-result li { align-items: center; display: flex; font-size: 13px; justify-content: space-between; margin-bottom: 17px; }.mortgage-calculator-result li:last-child { margin-bottom: 0; }.mortgage-calculator-result li span { align-items: center; color: #a6b8d5; display: flex; gap: 10px; }.mortgage-calculator-result li i { background: #5a8bff; border-radius: 50%; height: 8px; width: 8px; }.mortgage-calculator-result li:nth-child(2) i { background: #a58aff; }.mortgage-calculator-result li:nth-child(3) i { background: #8799b9; }.mortgage-calculator-result li b { color: #fff; font-size: 13px; }.mortgage-result-bar { background: #8496b4; border-radius: 8px; height: 9px; margin: 32px 0 59px; overflow: hidden; }.mortgage-result-bar b { background: #5a8bff; display: block; height: 100%; width: 55%; }.mortgage-result-foot { color: #8296bb; display: flex; font-size: 11px; justify-content: space-between; line-height: 1.3; }.mortgage-result-foot span { max-width: 105px; }.mortgage-result-foot span:last-child { color: #b9a8ff; text-align: right; }.mortgage-result-foot em { border: 1px solid #907aff; border-radius: 3px; font-size: 9px; font-style: var(--site-font-style); margin-left: 5px; padding: 2px 4px; text-transform: uppercase; }
@media (max-width: 991.98px) { .mortgage-calculator-widget { grid-template-columns: 1fr 1fr; } }.featured-mortgage-copy { margin: 0 auto; } @media (max-width: 767.98px) { .featured-mortgage { padding: 70px 0; }.featured-mortgage-container { padding-left: 24px; padding-right: 24px; }.featured-mortgage-copy h2 { font-size: 34px; }.featured-mortgage-note { margin-top: 38px; }.mortgage-calculator-widget { grid-template-columns: 1fr; }.mortgage-calculator-result { min-height: 420px; }.mortgage-calculator-form { padding: 25px; } }

/* AI explanation callout */
.ai-explanation-section { background: #f4f1ff; padding: 81px 0; }
.ai-explanation-container { max-width: 1300px; }
.ai-explanation-copy { align-items: center; display: flex; gap: 28px; }
.ai-explanation-icon { align-items: center; background: #e2d7ff; border-radius: 11px; color: #7654ff; display: inline-flex; flex: 0 0 59px; height: 59px; justify-content: center; width: 59px; }
.ai-explanation-icon svg, .ai-explanation-card-head svg { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 30px; }
.ai-explanation-copy p { color: #7654ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: .08em; margin: 0 0 21px; text-transform: uppercase; }
.ai-explanation-copy h2 { color: var(--site-color-heading); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }
.ai-explanation-copy > div > span { color: #667c9e; display: block; font-size: 17px; font-style: var(--site-font-style); line-height: 1.55; margin-top: 17px; max-width: 685px; }
.ai-explanation-card { background: rgb(255 255 255 / 95%); border: 1px solid #ddd4ff; border-radius: 9px; box-shadow: 0 18px 37px rgb(103 75 193 / 8%); padding: 22px 23px; }
.ai-explanation-card-head { align-items: center; display: flex; justify-content: space-between; }.ai-explanation-card-head > span { align-items: center; color: #7654ff; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; gap: 8px; letter-spacing: .04em; }.ai-explanation-card-head svg { height: 17px; width: 17px; }.ai-explanation-card-head em { border: 1px solid #a18bff; border-radius: 3px; color: #886aff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-style: var(--site-font-style); padding: 3px 5px; text-transform: uppercase; }
.ai-explanation-card > p { color: #597296; font-size: 15px; font-style: var(--site-font-style); line-height: 1.55; margin: 25px 0 21px; }.ai-explanation-card > p strong { color: var(--site-color-heading); font-weight: 800; }.ai-explanation-card a { align-items: center; color: #7654ff; display: inline-flex; font-size: 14px; font-style: var(--site-font-style); font-weight: 700; gap: 12px; text-decoration: none; }.ai-explanation-card a:hover { color: var(--site-color-heading); }.ai-explanation-card a svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
@media (max-width: 767.98px) { .ai-explanation-section { padding: 65px 0; }.ai-explanation-container { padding-left: 24px; padding-right: 24px; }.ai-explanation-copy { align-items: flex-start; gap: 17px; }.ai-explanation-icon { flex-basis: 48px; height: 48px; width: 48px; }.ai-explanation-icon svg { height: 25px; width: 25px; }.ai-explanation-copy h2 { font-size: 34px; }.ai-explanation-copy > div > span { font-size: 16px; }.ai-explanation-card { padding: 20px; } }

/* Clean, isolated layout for the AI callout. */
.ai-explanation-section { background: #f5f2ff; padding: 82px 0; }
.ai-explanation-container { max-width: 1404px; }
.ai-explanation-layout { align-items: center; display: grid; gap: 72px; grid-template-columns: minmax(0, 1.45fr) minmax(380px, .85fr); }
.ai-explanation-copy { align-items: flex-start; display: flex; gap: 28px; }
.ai-explanation-content { padding-top: 2px; }
.ai-explanation-icon { background: #e4daff; border-radius: 11px; flex: 0 0 59px; height: 59px; }
.ai-explanation-eyebrow { color: #7654ff !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size: 12px !important; font-style: var(--site-font-style); font-weight: 600 !important; letter-spacing: .08em; line-height: 1.2 !important; margin: 0 0 21px !important; text-transform: uppercase; }
.ai-explanation-section h2#ai-explanation-title { color: #112442 !important; font-family: var(--site-font-family) !important; font-size: clamp(32px, 2.2vw, 42px) !important; font-style: var(--site-font-style); font-weight: 500 !important; letter-spacing: -.055em !important; line-height: 1.1 !important; margin: 0 !important; }
.ai-explanation-description { color: #667c9e !important; font-family: var(--site-font-family) !important; font-size: 17px !important; font-style: var(--site-font-style); font-weight: 400 !important; line-height: 1.55 !important; margin: 17px 0 0 !important; max-width: 690px; }
.ai-explanation-card { background: #fff; border: 1px solid #ddd4ff; border-radius: 9px; box-shadow: 0 17px 36px rgb(91 67 178 / 8%); box-sizing: border-box; margin: 0; padding: 23px 24px; width: 100%; }
.ai-explanation-card > p { color: #597296 !important; font-family: var(--site-font-family) !important; font-size: 15px !important; font-style: var(--site-font-style); font-weight: 400 !important; line-height: 1.55 !important; margin: 25px 0 21px !important; }
@media (max-width: 991.98px) { .ai-explanation-layout { gap: 36px; grid-template-columns: 1fr; } .ai-explanation-card { max-width: 620px; } }
@media (max-width: 575.98px) { .ai-explanation-section { padding: 62px 0; } .ai-explanation-container { padding-left: 24px; padding-right: 24px; } .ai-explanation-layout { gap: 30px; } .ai-explanation-copy { gap: 16px; } .ai-explanation-icon { flex-basis: 46px; height: 46px; width: 46px; } .ai-explanation-icon svg { height: 24px; width: 24px; } .ai-explanation-eyebrow { font-size: 10px !important; margin-bottom: 16px !important; } .ai-explanation-section h2#ai-explanation-title { font-size: 32px !important; } .ai-explanation-description { font-size: 16px !important; } .ai-explanation-card { padding: 20px; } }

/* Reference-matched AI explanation proportions. */
@media (min-width: 992px) {
    .ai-explanation-section {
        min-height: 343px;
        padding: 77px 0;
    }

    .ai-explanation-container {
        max-width: 1296px;
        padding-left: 0;
        padding-right: 0;
    }

    .ai-explanation-layout {
        column-gap: 68px;
        grid-template-columns: minmax(0, 736px) minmax(0, 492px);
        justify-content: space-between;
    }

    .ai-explanation-copy {
        gap: 27px;
    }

    .ai-explanation-icon {
        flex-basis: 56px;
        height: 56px;
        width: 56px;
    }

    .ai-explanation-icon svg {
        height: 29px;
        width: 29px;
    }

    .ai-explanation-eyebrow {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    .ai-explanation-section h2#ai-explanation-title {
        font-size: 40px !important;
    }

    .ai-explanation-description {
        font-size: 16px !important;
        line-height: 1.55 !important;
        margin-top: 17px !important;
        max-width: 670px;
    }

    .ai-explanation-card {
        border-radius: 8px;
        min-height: 188px;
        padding: 21px 22px;
    }

    .ai-explanation-card > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin: 22px 0 20px !important;
    }

    .ai-explanation-card a {
        font-size: 13px;
    }
}

/* Trust standards */
.trust-standards { background: var(--site-color-surface); padding: 114px 0 120px; }
.trust-standards-container { max-width: 1404px; }
.trust-standards-heading { margin-bottom: 47px; }
.trust-standards-heading > p { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; line-height: 1.2; margin: 0 0 20px; text-transform: uppercase; }
.trust-standards h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }
.trust-standards-heading > span { color: #7185a1; display: block; font-family: var(--site-font-family); font-size: 17px; font-style: var(--site-font-style); line-height: 1.55; margin-top: 14px; }
.trust-standard { border-top: 1px solid #e3e9f2; min-height: 175px; padding-top: 24px; }
.trust-standard-icon { color: #2e67f2; display: inline-flex; height: 26px; margin-bottom: 29px; width: 26px; }.trust-standard-icon svg { fill: none; height: 26px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 26px; }
.trust-standard h3 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 13px; }.trust-standard p { color: #7185a1; font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); line-height: 1.48; margin: 0; max-width: 270px; }
@media (max-width: 575.98px) { .trust-standards { padding: 68px 0; }.trust-standards-container { padding-left: 24px; padding-right: 24px; }.trust-standards h2 { font-size: 34px; }.trust-standards-heading > span { font-size: 16px; }.trust-standards-heading { margin-bottom: 32px; }.trust-standard { min-height: 0; }.trust-standard-icon { margin-bottom: 22px; } }

/* Newsletter and FAQ */
.newsletter-faq-section { background: var(--site-color-surface); padding: 0 0 112px; }.newsletter-faq-container { max-width: 1404px; }
.newsletter-callout { background: #112442; border-radius: 10px; color: #fff; padding: 51px 60px; }.newsletter-callout p, .faq-heading p { color: #8eb4ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .08em; line-height: 1.2; margin: 0 0 20px; text-transform: uppercase; }.newsletter-callout h2, .faq-heading h2 { color: inherit; font-family: var(--site-font-family); font-size: 40px; font-style: var(--site-font-style); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; margin: 0; }.newsletter-callout > .row > div > span { color: #afc1e0; display: block; font-family: var(--site-font-family); font-size: 16px; font-style: var(--site-font-style); line-height: 1.55; margin-top: 16px; }
.newsletter-form > div { display: flex; gap: 10px; }.newsletter-form input { background: #1b3155; border: 1px solid #3a5279; border-radius: 7px; box-shadow: none; color: #fff; font-family: var(--site-font-family); font-size: 14px; height: 50px; outline: 0; padding: 0 16px; width: 100%; }.newsletter-form input::placeholder { color: #9cb0d0; opacity: 1; }.newsletter-form button { align-items: center; background: #2e67f2; border: 1px solid #2e67f2; border-radius: 7px; color: #fff; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-family: var(--site-font-family); font-size: 14px; font-weight: 700; gap: 12px; height: 50px; padding: 0 19px; }.newsletter-form button:hover { background: #2155d4; border-color: #2155d4; }.newsletter-form button svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }.newsletter-form small { color: #8198be; display: block; font-size: 12px; margin-top: 10px; }
.faq-layout { margin-top: 103px; }.faq-heading p { color: #5a78ab; }.faq-heading h2 { color: var(--site-color-heading); }.faq-accordion { border-top: 1px solid #e2e8f2; }.faq-accordion .accordion-item { background: transparent; border: 0; border-bottom: 1px solid #e2e8f2; border-radius: 0; }.faq-accordion .accordion-button { background: transparent; box-shadow: none; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 16px; font-style: var(--site-font-style); font-weight: 700; padding: 23px 0; }.faq-accordion .accordion-button::after { background-image: none; border-bottom: 2px solid #2e67f2; border-right: 2px solid #2e67f2; height: 8px; margin-right: 7px; transform: rotate(45deg); width: 8px; }.faq-accordion .accordion-button:not(.collapsed)::after { transform: rotate(225deg); }.faq-accordion .accordion-body { color: #7185a1; font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); line-height: 1.6; padding: 0 45px 23px 0; }
@media (max-width: 991.98px) { .newsletter-callout { padding: 42px; }.newsletter-form { margin-top: 8px; }.faq-layout { margin-top: 70px; } } @media (max-width: 575.98px) { .newsletter-faq-section { padding-bottom: 68px; }.newsletter-faq-container { padding-left: 24px; padding-right: 24px; }.newsletter-callout { padding: 30px 24px; }.newsletter-callout h2, .faq-heading h2 { font-size: 34px; }.newsletter-form > div { flex-direction: column; }.newsletter-form button { justify-content: center; width: 100%; }.faq-layout { margin-top: 60px; }.faq-accordion { margin-top: -12px; } }

/* Footer */
.custom-site-footer { background: #f5f7fc; color: #7185a1; padding: 72px 0 27px; }.custom-footer-container { max-width: 1404px; }.custom-footer-top { padding-bottom: 65px; }.custom-footer-brand .custom-logo-link { display: inline-flex; line-height: 1; }.custom-footer-brand .custom-logo { display: block; height: auto; max-height: 30px; max-width: 200px; width: auto; }.custom-footer-site-title { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 20px; font-style: var(--site-font-style); font-weight: 800; letter-spacing: .08em; line-height: 1; text-decoration: none; text-transform: uppercase; }.custom-footer-brand p { color: #7185a1; font-family: var(--site-font-family); font-size: 16px; font-style: var(--site-font-style); line-height: 1.5; margin: 26px 0 0; max-width: 270px; }.custom-footer-nav h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); font-weight: 700; line-height: 1.2; margin: 5px 0 24px; }.custom-footer-nav ul { list-style: none; margin: 0; padding: 0; }.custom-footer-nav li { line-height: 1.3; margin-bottom: 17px; }.custom-footer-nav a, .custom-footer-bottom a { color: #7185a1; font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); text-decoration: none; }.custom-footer-nav a:hover, .custom-footer-bottom a:hover { color: #2e67f2; }.custom-footer-bottom { align-items: center; border-top: 1px solid #e1e8f2; display: flex; justify-content: space-between; padding-top: 24px; }.custom-footer-bottom p { color: #8194b0; font-family: var(--site-font-family); font-size: 13px; font-style: var(--site-font-style); margin: 0; }.custom-footer-bottom nav { display: flex; gap: 29px; }.custom-footer-bottom a { color: #8194b0; font-size: 13px; }
@media (max-width: 767.98px) { .custom-site-footer { padding: 60px 0 24px; }.custom-footer-container { padding-left: 24px; padding-right: 24px; }.custom-footer-top { padding-bottom: 42px; }.custom-footer-bottom { align-items: flex-start; flex-direction: column; gap: 17px; }.custom-footer-bottom nav { flex-wrap: wrap; gap: 12px 22px; } }

/* Full mortgage calculator */
.page-template-tpl-mortgage-calculator .page-wrap, .page-template-tpl-mortgage-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-mortgage-calculator .content-wrapper > .row { margin: 0; }.mortgage-page { font-family: var(--site-font-family); font-size: var(--site-font-size-base); font-style: var(--site-font-style); padding: 0; }.mortgage-page-container { max-width: 1404px; }
.page-template-tpl-loan-calculator .page-wrap, .page-template-tpl-loan-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-loan-calculator .content-wrapper > .row { margin: 0; }.loan-summary-chart span:nth-child(2) { background: #a58aff; }
.page-template-tpl-compound-interest-calculator .page-wrap, .page-template-tpl-compound-interest-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-compound-interest-calculator .content-wrapper > .row { margin: 0; }.compound-summary-chart span:nth-child(2) { background: #49c092; }.compound-interest-page .mortgage-summary li:nth-child(3) i { background: #49c092; }
.page-template-tpl-investment-calculator .page-wrap, .page-template-tpl-investment-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-investment-calculator .content-wrapper > .row { margin: 0; }.investment-summary-chart span:nth-child(2), .investment-page .mortgage-summary li:nth-child(3) i { background: #49c092; }
.page-template-tpl-retirement-calculator .page-wrap, .page-template-tpl-retirement-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-retirement-calculator .content-wrapper > .row { margin: 0; }.retirement-summary-chart span:nth-child(2), .retirement-page .mortgage-summary li:nth-child(3) i { background: #49c092; }
.page-template-tpl-savings-calculator .page-wrap, .page-template-tpl-savings-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-savings-calculator .content-wrapper > .row { margin: 0; }.savings-summary-chart span:nth-child(2), .savings-page .mortgage-summary li:nth-child(3) i { background: #49c092; }
.page-template-tpl-credit-card-payoff-calculator .page-wrap, .page-template-tpl-credit-card-payoff-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-credit-card-payoff-calculator .content-wrapper > .row { margin: 0; }.credit-card-summary-chart span:nth-child(2), .credit-card-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-debt-payoff-calculator .page-wrap, .page-template-tpl-debt-payoff-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-debt-payoff-calculator .content-wrapper > .row { margin: 0; }.debt-summary-chart span:nth-child(2), .debt-payoff-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.debt-fields > p { color: var(--site-color-heading); font-size: 14px; font-weight: 700; margin: 0 0 8px; }.debt-fields > p:not(:first-child) { border-top: 1px solid #e7ecf4; margin-top: 18px; padding-top: 18px; }
.page-template-tpl-salary-calculator .page-wrap, .page-template-tpl-salary-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-salary-calculator .content-wrapper > .row { margin: 0; }.salary-summary-chart span:nth-child(2), .salary-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.salary-summary-chart span:nth-child(3), .salary-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-take-home-pay-calculator .page-wrap, .page-template-tpl-take-home-pay-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-take-home-pay-calculator .content-wrapper > .row { margin: 0; }.take-home-summary-chart span:nth-child(2), .take-home-pay-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.take-home-summary-chart span:nth-child(3), .take-home-pay-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }.take-home-summary-chart span:nth-child(4), .take-home-pay-page .mortgage-summary li:nth-child(4) i { background: #8c9dbb; }
.page-template-tpl-hourly-to-salary-calculator .page-wrap, .page-template-tpl-hourly-to-salary-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-hourly-to-salary-calculator .content-wrapper > .row { margin: 0; }.hourly-summary-chart span:nth-child(2), .hourly-salary-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }
.page-template-tpl-salary-to-hourly-calculator .page-wrap, .page-template-tpl-salary-to-hourly-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-salary-to-hourly-calculator .content-wrapper > .row { margin: 0; }.salary-hourly-summary-chart span:nth-child(2), .salary-hourly-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.salary-hourly-summary-chart span:nth-child(3), .salary-hourly-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-overtime-calculator .page-wrap, .page-template-tpl-overtime-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-overtime-calculator .content-wrapper > .row { margin: 0; }.overtime-summary-chart span:nth-child(2), .overtime-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.overtime-summary-chart span:nth-child(3), .overtime-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-commission-calculator .page-wrap, .page-template-tpl-commission-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-commission-calculator .content-wrapper > .row { margin: 0; }.commission-summary-chart span:nth-child(2), .commission-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.commission-summary-chart span:nth-child(3), .commission-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-mortgage-affordability-calculator .page-wrap, .page-template-tpl-mortgage-affordability-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-mortgage-affordability-calculator .content-wrapper > .row { margin: 0; }.affordability-summary-chart span:nth-child(2), .affordability-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.affordability-summary-chart span:nth-child(3), .affordability-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-rent-vs-buy-calculator .page-wrap, .page-template-tpl-rent-vs-buy-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-rent-vs-buy-calculator .content-wrapper > .row { margin: 0; }.rent-buy-summary-chart span:nth-child(2), .rent-buy-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-closing-cost-calculator .page-wrap, .page-template-tpl-closing-cost-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-closing-cost-calculator .content-wrapper > .row { margin: 0; }.closing-summary-chart span:nth-child(2), .closing-cost-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.closing-summary-chart span:nth-child(3), .closing-cost-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }.closing-summary-chart span:nth-child(4), .closing-cost-page .mortgage-summary li:nth-child(4) i { background: #8c9dbb; }
.page-template-tpl-property-tax-calculator .page-wrap, .page-template-tpl-property-tax-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-property-tax-calculator .content-wrapper > .row { margin: 0; }.property-tax-summary-chart span:nth-child(2), .property-tax-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-home-equity-calculator .page-wrap, .page-template-tpl-home-equity-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-home-equity-calculator .content-wrapper > .row { margin: 0; }.home-equity-summary-chart span:nth-child(2), .home-equity-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.home-equity-summary-chart span:nth-child(3), .home-equity-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }
.page-template-tpl-profit-margin-calculator .page-wrap, .page-template-tpl-profit-margin-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-profit-margin-calculator .content-wrapper > .row { margin: 0; }.profit-summary-chart span:nth-child(2), .profit-margin-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.profit-summary-chart span:nth-child(3), .profit-margin-page .mortgage-summary li:nth-child(3) i { background: #6fc6e9; }.profit-summary-chart span:nth-child(4), .profit-margin-page .mortgage-summary li:nth-child(4) i { background: #8c9dbb; }
.page-template-tpl-markup-calculator .page-wrap, .page-template-tpl-markup-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-markup-calculator .content-wrapper > .row { margin: 0; }.markup-summary-chart span:nth-child(2), .markup-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.markup-summary-chart span:nth-child(3), .markup-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }
.page-template-tpl-roi-calculator .page-wrap, .page-template-tpl-roi-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-roi-calculator .content-wrapper > .row { margin: 0; }.roi-summary-chart span:nth-child(2), .roi-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.roi-summary-chart span:nth-child(3), .roi-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }
.page-template-tpl-break-even-calculator .page-wrap, .page-template-tpl-break-even-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-break-even-calculator .content-wrapper > .row { margin: 0; }.break-even-summary-chart span:nth-child(2), .break-even-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }.break-even-summary-chart span:nth-child(3), .break-even-page .mortgage-summary li:nth-child(3) i { background: #49c092; }.break-even-page .mortgage-summary li:nth-child(4) i { background: #8c9dbb; }
.page-template-tpl-discount-calculator .page-wrap, .page-template-tpl-discount-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-discount-calculator .content-wrapper > .row { margin: 0; }.discount-summary-chart span:nth-child(2), .discount-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.discount-summary-chart span:nth-child(3), .discount-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }
.page-template-tpl-sales-tax-calculator .page-wrap, .page-template-tpl-sales-tax-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-sales-tax-calculator .content-wrapper > .row { margin: 0; }.sales-tax-summary-chart span:nth-child(2), .sales-tax-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.sales-tax-summary-chart span:nth-child(3), .sales-tax-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }
.page-template-tpl-percentage-calculator .page-wrap, .page-template-tpl-percentage-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-percentage-calculator .content-wrapper > .row { margin: 0; }.percentage-summary-chart span:nth-child(2), .percentage-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-age-calculator .page-wrap, .page-template-tpl-age-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-age-calculator .content-wrapper > .row { margin: 0; }.age-summary-chart span:nth-child(2), .age-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-date-difference-calculator .page-wrap, .page-template-tpl-date-difference-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-date-difference-calculator .content-wrapper > .row { margin: 0; }.date-difference-summary-chart span:nth-child(2), .date-difference-page .mortgage-summary li:nth-child(2) i { background: #a58aff; }
.page-template-tpl-bmi-calculator .page-wrap, .page-template-tpl-bmi-calculator .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-bmi-calculator .content-wrapper > .row { margin: 0; }.bmi-summary-chart span:nth-child(2), .bmi-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.bmi-summary-chart span:nth-child(3), .bmi-page .mortgage-summary li:nth-child(3) i { background: #a58aff; }.bmi-summary-chart span:nth-child(4) { background: #8c9dbb; }
.page-template-tpl-unit-converter .page-wrap, .page-template-tpl-unit-converter .content-wrapper { max-width: none; padding: 0; width: 100%; }.page-template-tpl-unit-converter .content-wrapper > .row { margin: 0; }.unit-summary-chart span:nth-child(2), .unit-converter-page .mortgage-summary li:nth-child(2) i { background: #49c092; }.unit-swap-button { align-items: center; background: #f5f7fc; border: 1px solid #cfdbed; border-radius: 7px; color: var(--site-color-accent); cursor: pointer; display: inline-flex; font-family: var(--site-font-family); font-size: 13px; font-style: var(--site-font-style); font-weight: 700; gap: 8px; padding: 10px 14px; }.unit-swap-button span { font-size: 20px; line-height: .7; }.unit-swap-button:hover { background: #eaf0ff; }
.mortgage-page-hero { background: #f6f8fc; min-height: 472px; padding: 125px 0 84px; }.mortgage-breadcrumbs { align-items: center; display: flex; gap: 13px; margin: 25px 0 50px; }.mortgage-breadcrumbs a, .mortgage-breadcrumbs span, .mortgage-breadcrumbs b { color: var(--site-color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 400; text-decoration: none; }.mortgage-breadcrumbs a:hover { color: var(--site-color-accent); }.mortgage-breadcrumbs b { color: var(--site-color-heading); font-weight: 600; }.mortgage-page-eyebrow { color: #5a78ab; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-style: var(--site-font-style); font-weight: 600; letter-spacing: .07em; margin: 0 0 29px; text-transform: uppercase; }.mortgage-page-hero h1 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: clamp(54px, 5vw, 80px); font-style: var(--site-font-style); font-weight: 750; letter-spacing: -.07em; line-height: .98; margin: 0; }.mortgage-page-hero > .container > p:last-child { color: var(--site-color-text); font-family: var(--site-font-family); font-size: 18px; font-style: var(--site-font-style); font-weight: var(--site-font-weight-medium); line-height: 1.7; margin: 25px 0 0; max-width: 790px; }
.mortgage-tool-section { background: var(--site-color-surface); padding: 72px 0 100px; }.mortgage-tool { max-width: 100%; }.mortgage-tool-form { background: var(--site-color-surface); border: 1px solid #e0e7f1; border-radius: 10px; padding: 31px; }.mortgage-tool-form-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 28px; }.mortgage-tool-form-title h2, .mortgage-schedule-header h2, .mortgage-disclaimer h2 { color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 23px; font-style: var(--site-font-style); font-weight: 700; letter-spacing: -.035em; margin: 0; }.mortgage-tool-form-title button { background: transparent; border: 0; color: var(--site-color-accent); cursor: pointer; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); font-weight: 700; padding: 4px; }.mortgage-tool-form label { color: var(--site-color-text); display: block; font-family: var(--site-font-family); font-size: 13px; font-style: var(--site-font-style); font-weight: 700; }.mortgage-field { align-items: center; border: 1px solid #cfdbed; border-radius: 7px; display: flex; height: 52px; margin-top: 9px; padding: 0 14px; }.mortgage-field input { border: 0; box-shadow: none; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); font-weight: 700; outline: 0; width: 100%; }.mortgage-field b { color: #8497b4; font-size: 14px; font-weight: 600; margin: 0 7px 0 0; }.mortgage-field input + b { margin: 0 0 0 7px; }.mortgage-tool-form select { background: var(--site-color-surface); border: 1px solid #cfdbed; border-radius: 7px; color: var(--site-color-heading); font-family: var(--site-font-family); font-size: 15px; font-style: var(--site-font-style); font-weight: 700; height: 52px; margin-top: 9px; padding: 0 14px; width: 100%; }.mortgage-tool-form label small { color: #8092ad; display: block; font-size: 11px; font-weight: 400; margin-top: 6px; }.mortgage-calculate-button { align-items: center; background: var(--site-color-accent); border: 1px solid var(--site-color-accent); border-radius: 7px; color: #fff; cursor: pointer; display: inline-flex; font-family: var(--site-font-family); font-size: 14px; font-style: var(--site-font-style); font-weight: 700; gap: 12px; margin-top: 28px; min-height: 51px; padding: 0 21px; }.mortgage-calculate-button:hover { background: #2155d4; }.mortgage-calculate-button svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.mortgage-summary { background: #112442; border-radius: 10px; color: #fff; min-height: 100%; padding: 34px; }.mortgage-summary > p { color: #a7b9d8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; letter-spacing: .06em; margin: 0; text-transform: uppercase; }.mortgage-summary h2 { color: #fff; font-size: 48px; font-weight: 750; letter-spacing: -.06em; line-height: 1; margin: 24px 0 6px; }.mortgage-summary > span { color: #9db0d0; font-size: 13px; }.mortgage-summary-chart { background: #293e61; border-radius: 9px; display: flex; height: 10px; margin: 35px 0 27px; overflow: hidden; }.mortgage-summary-chart span:nth-child(1) { background: #5a8bff; }.mortgage-summary-chart span:nth-child(2) { background: #a58aff; }.mortgage-summary-chart span:nth-child(3) { background: #6fc6e9; }.mortgage-summary-chart span:nth-child(4) { background: #8c9dbb; }.mortgage-summary ul { border-bottom: 1px solid rgb(255 255 255 / 12%); border-top: 1px solid rgb(255 255 255 / 12%); list-style: none; margin: 0; padding: 20px 0; }.mortgage-summary li { align-items: center; display: flex; font-size: 14px; justify-content: space-between; margin: 13px 0; }.mortgage-summary li span { align-items: center; color: #adbed8; display: flex; gap: 10px; }.mortgage-summary li i { background: #5a8bff; border-radius: 50%; height: 8px; width: 8px; }.mortgage-summary li:nth-child(2) i { background: #a58aff; }.mortgage-summary li:nth-child(3) i { background: #6fc6e9; }.mortgage-summary li:nth-child(4) i { background: #8c9dbb; }.mortgage-summary li b { font-size: 14px; }.mortgage-summary-meta { display: flex; gap: 28px; margin-top: 25px; }.mortgage-summary-meta span { color: #9db0d0; display: flex; flex-direction: column; font-size: 12px; gap: 7px; }.mortgage-summary-meta strong { color: #fff; font-size: 16px; }
.mortgage-payoff-card { align-items: center; background: #f5f7fc; border: 1px solid #e2e8f2; border-radius: 10px; display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr) 1.55fr; margin-top: 28px; padding: 25px 29px; }.mortgage-payoff-card p { color: #7185a1; font-size: 13px; margin: 0 0 8px; }.mortgage-payoff-card strong { color: var(--site-color-heading); font-size: 18px; }.mortgage-payoff-card > span { color: #7185a1; font-size: 12px; line-height: 1.45; }
.mortgage-schedule-header { align-items: end; display: flex; justify-content: space-between; margin: 73px 0 25px; }.mortgage-schedule-header p { color: #7185a1; font-size: 15px; margin: 10px 0 0; }.mortgage-download-button { background: #fff; border: 1px solid #cfdbed; border-radius: 7px; color: var(--site-color-heading); cursor: pointer; font-family: var(--site-font-family); font-size: 13px; font-weight: 700; padding: 11px 15px; }.mortgage-schedule-wrap { border: 1px solid #e0e7f1; border-radius: 9px; }.mortgage-schedule { border-collapse: collapse; margin: 0; min-width: 700px; width: 100%; }.mortgage-schedule th { background: #f5f7fc; color: #657895; font-size: 13px; font-weight: 700; padding: 16px 20px; text-align: left; }.mortgage-schedule td { border-top: 1px solid #e7ecf4; color: #516987; font-size: 14px; padding: 16px 20px; }.mortgage-schedule td:first-child { color: var(--site-color-heading); font-weight: 700; }.mortgage-disclaimer { background: #f5f7fc; padding: 66px 0; }.mortgage-disclaimer p { color: #657895; font-size: 16px; line-height: 1.65; margin: 16px 0 0; max-width: 820px; }
@media (max-width: 991.98px) { .mortgage-summary { min-height: 0; }.mortgage-payoff-card { grid-template-columns: repeat(2, 1fr); }.mortgage-payoff-card > span { grid-column: span 2; } } @media (max-width: 575.98px) { .mortgage-page-container { padding-left: 24px; padding-right: 24px; }.mortgage-page-hero { min-height: 0; padding: 54px 0 66px; }.mortgage-breadcrumbs { flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }.mortgage-page-eyebrow { font-size: 11px; margin-bottom: 20px; }.mortgage-page-hero h1 { font-size: 52px; }.mortgage-page-hero > .container > p:last-child { font-size: 16px; }.mortgage-tool-section { padding: 48px 0 70px; }.mortgage-tool-form, .mortgage-summary { padding: 24px; }.mortgage-summary h2 { font-size: 42px; }.mortgage-summary-meta { flex-direction: column; gap: 15px; }.mortgage-payoff-card { grid-template-columns: 1fr; padding: 22px; }.mortgage-payoff-card > span { grid-column: auto; }.mortgage-schedule-header { align-items: start; flex-direction: column; gap: 18px; margin-top: 55px; }.mortgage-disclaimer { padding: 54px 0; } }

@media (max-width: 400px) { .custom-brand img { height: 45px; } .all-calculators { padding: 0; } }