/*
 * Shared visual foundation for redesigned Timogix public-site pages.
 * Use the redesign-* classes for new pages. Page-specific classes can
 * share these rules while keeping their unique layouts isolated.
 */

.redesign-page,
.dcaa-page {
    --redesign-navy: #102a43;
    --redesign-blue: #147eb3;
    --redesign-bright-blue: #24acde;
    --redesign-pale-blue: #eaf7fc;
    --redesign-ink: #243b53;
    --redesign-muted: #5f7387;
    --redesign-line: #d8e5ed;
    --redesign-soft: #f5f9fb;
    background: #fff;
    color: var(--redesign-ink);
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
}

/* Notifications detail page */

.notification-page .notification-hero {
    background:
        radial-gradient(circle at 88% 14%, rgba(36, 172, 222, .31), transparent 30%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 60%, #0d5676 100%);
    color: #fff;
    overflow: hidden;
    padding: 75px 0 70px;
    position: relative;
}

.notification-page .notification-hero:after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: '';
    height: 390px;
    position: absolute;
    right: -135px;
    top: -190px;
    width: 390px;
}

.notification-page .notification-hero-layout {
    display: block;
    position: relative;
    z-index: 1;
}

.notification-page .notification-hero-copy {
    max-width: 780px;
    min-width: 0;
}

.notification-page .notification-hero .redesign-kicker {
    color: #73d1ee;
}

.notification-page .notification-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.notification-page .notification-hero-copy > p:not(.notification-hero-note) {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 27px;
}

.notification-page .notification-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin: 17px 0 0;
}

.notification-page .notification-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.notification-page .notification-capability-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.notification-page .notification-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.notification-page .notification-capability-item {
    align-items: center;
    border-right: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 23px 20px;
}

.notification-page .notification-capability-item:first-child {
    border-left: 1px solid var(--redesign-line);
}

.notification-page .notification-capability-item > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 40px;
    font-size: 17px;
    height: 40px;
    justify-content: center;
}

.notification-page .notification-capability-item strong,
.notification-page .notification-capability-item small {
    display: block;
}

.notification-page .notification-capability-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.notification-page .notification-capability-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.notification-page .notification-settings-section {
    scroll-margin-top: 52px;
}

.notification-page .notification-screenshot-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 18px 40px rgba(16, 42, 67, .13);
    margin: 0 auto;
    max-width: 907px;
    overflow: hidden;
}

.notification-page .notification-screenshot-card img {
    display: block;
    height: auto;
    max-width: 905px;
    width: 100%;
}

.notification-page .notification-screenshot-card figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px 12px 11px;
    text-align: center;
}

.notification-page .notification-setting-detail-grid,
.notification-page .notification-reminder-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.notification-page .notification-setting-detail-grid {
    margin-top: 28px;
}

.notification-page .notification-setting-detail-grid article,
.notification-page .notification-reminder-grid article {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    min-width: 0;
}

.notification-page .notification-setting-detail-grid article {
    padding: 24px 24px 23px;
}

.notification-page .notification-setting-detail-grid article > span {
    color: var(--redesign-blue);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    margin-bottom: 11px;
}

.notification-page .notification-setting-detail-grid h3,
.notification-page .notification-reminder-grid h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.notification-page .notification-setting-detail-grid p,
.notification-page .notification-reminder-grid p {
    font-size: 13px;
    line-height: 1.62;
    margin: 0;
}

.notification-page .notification-control-layout {
    align-items: center;
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.notification-page .notification-control-copy h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 17px;
}

.notification-page .notification-control-copy p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0 0 15px;
}

.notification-page .notification-reminder-grid article {
    min-height: 254px;
    padding: 26px 24px 24px;
}

.notification-page .notification-reminder-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    margin-bottom: 17px;
    width: 44px;
}

.notification-page .notification-reminder-grid article > small {
    color: var(--redesign-blue);
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.notification-page .notification-control-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
}

.notification-page .notification-control-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-left: 4px solid var(--redesign-blue);
    border-radius: 0 9px 9px 0;
    box-shadow: 0 16px 34px rgba(16, 42, 67, .09);
    display: flex;
    gap: 17px;
    padding: 27px 26px;
}

.notification-page .notification-control-card > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
}

.notification-page .notification-control-card small,
.notification-page .notification-control-card strong {
    display: block;
}

.notification-page .notification-control-card small {
    color: var(--redesign-blue);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.notification-page .notification-control-card strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 1.4;
    margin-top: 5px;
}

.notification-page .notification-control-card p {
    font-size: 12px;
    line-height: 1.6;
    margin: 9px 0 0;
}

.notification-page .notification-cta .redesign-actions {
    justify-content: center;
}

.notification-page .notification-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .notification-page .notification-hero-layout {
        display: block;
    }

    .notification-page .notification-hero-copy {
        max-width: 800px;
    }

    .notification-page .notification-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notification-page .notification-capability-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .notification-page .notification-capability-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .notification-page .notification-control-layout {
        gap: 42px;
        grid-template-columns: 1fr;
    }

    .notification-page .notification-control-card {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .notification-page .notification-hero {
        padding: 57px 0 55px;
    }

    .notification-page .notification-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .notification-page .notification-hero-copy > p:not(.notification-hero-note) {
        font-size: 17px;
    }

    .notification-page .notification-setting-detail-grid,
    .notification-page .notification-reminder-grid {
        grid-template-columns: 1fr;
    }

    .notification-page .notification-reminder-grid article {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .notification-page .notification-hero h1 {
        font-size: 33px;
    }

    .notification-page .notification-capability-grid {
        grid-template-columns: 1fr;
    }

    .notification-page .notification-capability-item,
    .notification-page .notification-capability-item:first-child,
    .notification-page .notification-capability-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .notification-page .notification-capability-item:last-child {
        border-bottom: 0;
    }

    .notification-page .notification-control-copy h2 {
        font-size: 29px;
    }

    .notification-page .notification-control-card {
        display: block;
        padding: 23px 20px;
    }

    .notification-page .notification-control-card > span {
        margin-bottom: 15px;
    }
}

/* ================================================================
   Time and expense tracking detail page
   ================================================================ */

.expense-page .expense-hero {
    background: linear-gradient(135deg, #082a43 0%, #0b4d70 58%, #116b8e 100%);
    color: #fff;
    overflow: hidden;
    padding: 82px 0 78px;
    position: relative;
}

.expense-page .expense-hero:after {
    background: radial-gradient(circle, rgba(79, 184, 219, .25) 0, rgba(79, 184, 219, 0) 69%);
    content: "";
    height: 680px;
    position: absolute;
    right: -240px;
    top: -290px;
    width: 680px;
}

.expense-page .expense-hero-layout {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 1;
}

.expense-page .expense-hero-copy {
    margin: 0 auto;
    max-width: 800px;
}

.expense-page .expense-hero-copy .redesign-actions {
    justify-content: center;
}

.expense-page .expense-hero h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.08;
    margin: 15px 0 22px;
}

.expense-page .expense-hero-copy > p:not(.expense-hero-note) {
    color: rgba(255, 255, 255, .84);
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 28px;
}

.expense-page .expense-hero .redesign-kicker {
    color: #8ed5eb;
}

.expense-page .expense-hero-note {
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    margin: 17px 0 0;
}

.expense-page .expense-hero-note .fa {
    color: #73d18a;
    margin-right: 6px;
}

.expense-page .expense-summary-card {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    box-shadow: 0 30px 60px rgba(0, 20, 35, .32);
    color: var(--redesign-navy);
    overflow: hidden;
}

.expense-page .expense-summary-heading {
    align-items: center;
    display: flex;
    gap: 14px;
    padding: 24px 25px 17px;
}

.expense-page .expense-summary-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 8px;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 46px;
    font-size: 18px;
    height: 46px;
    justify-content: center;
}

.expense-page .expense-summary-heading small,
.expense-page .expense-summary-heading strong {
    display: block;
}

.expense-page .expense-summary-heading small {
    color: var(--redesign-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.expense-page .expense-summary-heading strong {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.expense-page .expense-summary-status {
    background: #f7fafc;
    border-bottom: 1px solid var(--redesign-line);
    border-top: 1px solid var(--redesign-line);
    color: #64798a;
    font-size: 11px;
    padding: 10px 25px;
}

.expense-page .expense-summary-status span {
    background: #f2a71b;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin-right: 7px;
    width: 8px;
}

.expense-page .expense-summary-items {
    padding: 9px 25px 5px;
}

.expense-page .expense-summary-items > div,
.expense-page .expense-summary-total {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.expense-page .expense-summary-items > div {
    border-bottom: 1px solid #edf2f5;
    color: #526a7d;
    font-size: 13px;
    padding: 13px 0;
}

.expense-page .expense-summary-items .fa {
    color: var(--redesign-blue);
    margin-right: 9px;
    text-align: center;
    width: 15px;
}

.expense-page .expense-summary-items strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
}

.expense-page .expense-summary-total {
    font-size: 14px;
    padding: 11px 25px 16px;
}

.expense-page .expense-summary-total strong {
    color: var(--redesign-blue);
    font-family: 'Lato', sans-serif;
    font-size: 22px;
}

.expense-page .expense-summary-meta {
    background: #eef6fa;
    color: #47677b;
    display: flex;
    font-size: 10px;
    gap: 18px;
    justify-content: space-between;
    padding: 12px 25px;
}

.expense-page .expense-summary-meta .fa {
    color: var(--redesign-blue);
    margin-right: 5px;
}

.expense-page .expense-capability-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.expense-page .expense-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.expense-page .expense-capability-item {
    align-items: center;
    border-left: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-height: 100px;
    padding: 20px 22px;
}

.expense-page .expense-capability-item:last-child {
    border-right: 1px solid var(--redesign-line);
}

.expense-page .expense-capability-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 39px;
    height: 39px;
    justify-content: center;
}

.expense-page .expense-capability-item strong,
.expense-page .expense-capability-item small {
    display: block;
}

.expense-page .expense-capability-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin-bottom: 3px;
}

.expense-page .expense-capability-item small {
    color: var(--redesign-muted);
    font-size: 10px;
    line-height: 1.4;
}

.expense-page .expense-product-frame {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 10px;
    box-shadow: 0 22px 50px rgba(16, 42, 67, .13);
    margin: 40px auto 34px;
    max-width: 1208px;
    overflow: hidden;
}

.expense-page .expense-product-frame img {
    display: block;
    height: auto;
    max-width: 1208px;
    width: 100%;
}

.expense-page .expense-product-frame figcaption {
    border-top: 1px solid var(--redesign-line);
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 11px 14px 12px;
    text-align: center;
}

.expense-page .expense-detail-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.expense-page .expense-detail-card {
    border-top: 3px solid var(--redesign-blue);
    padding: 18px 18px 0;
}

.expense-page .expense-detail-card > span {
    color: var(--redesign-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.expense-page .expense-detail-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 7px 0 8px;
}

.expense-page .expense-detail-card p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}

.expense-page .expense-workflow-layout,
.expense-page .expense-categories-layout,
.expense-page .expense-output-layout {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.expense-page .expense-workflow-copy h2,
.expense-page .expense-categories-copy h2,
.expense-page .expense-output-copy h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.24;
    margin: 0 0 17px;
}

.expense-page .expense-workflow-copy p,
.expense-page .expense-categories-copy > p,
.expense-page .expense-output-copy p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0 0 15px;
}

.expense-page .expense-output-copy-wide {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
}

.expense-page .expense-output-copy-wide p {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
}

.expense-page .expense-output-copy-wide .expense-text-link {
    border: 1px solid var(--redesign-blue);
    border-radius: 4px;
    margin-top: 13px;
    padding: 11px 18px;
}

.expense-page .expense-output-copy-wide .expense-text-link:hover {
    background: var(--redesign-pale-blue);
}

.expense-page .expense-workflow-options {
    position: relative;
}

.expense-page .expense-workflow-options article {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 13px 30px rgba(16, 42, 67, .08);
    display: flex;
    gap: 17px;
    padding: 24px;
}

.expense-page .expense-workflow-options article > span,
.expense-page .expense-review-flow article > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 43px;
    height: 43px;
    justify-content: center;
}

.expense-page .expense-workflow-options small,
.expense-page .expense-review-flow small {
    color: var(--redesign-blue);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.expense-page .expense-workflow-options h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0 7px;
}

.expense-page .expense-workflow-options p {
    font-size: 12px;
    line-height: 1.58;
    margin: 0;
}

.expense-page .expense-workflow-or {
    align-items: center;
    background: var(--redesign-blue);
    border: 4px solid #f5f9fb;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    margin: -5px auto;
    position: relative;
    text-transform: uppercase;
    width: 38px;
    z-index: 2;
}

.expense-page .expense-review-flow {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
    margin-top: 40px;
}

.expense-page .expense-review-flow article {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    min-height: 226px;
    padding: 25px 23px;
}

.expense-page .expense-review-flow article > span {
    margin-bottom: 17px;
}

.expense-page .expense-review-flow h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0 8px;
}

.expense-page .expense-review-flow p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.expense-page .expense-review-arrow {
    color: var(--redesign-blue);
    font-size: 23px;
    text-align: center;
}

.expense-page .expense-check-list {
    list-style: none;
    margin: 23px 0 0;
    padding: 0;
}

.expense-page .expense-check-list li {
    display: flex;
    font-size: 13px;
    gap: 11px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.expense-page .expense-check-list .fa {
    color: #35a653;
    margin-top: 4px;
}

.expense-page .expense-category-frame {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 20px 45px rgba(16, 42, 67, .11);
    margin: 0 auto;
    max-width: 676px;
    overflow: hidden;
}

.expense-page .expense-category-frame img {
    display: block;
    height: auto;
    max-width: 676px;
    width: 100%;
}

.expense-page .expense-category-frame figcaption {
    border-top: 1px solid var(--redesign-line);
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px 12px 11px;
    text-align: center;
}

.expense-page .expense-unit-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(16, 42, 67, .11);
    overflow: hidden;
}

.expense-page .expense-unit-heading {
    align-items: center;
    display: flex;
    gap: 15px;
    padding: 25px 26px 20px;
}

.expense-page .expense-unit-heading > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 8px;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 46px;
    font-size: 19px;
    height: 46px;
    justify-content: center;
}

.expense-page .expense-unit-heading small,
.expense-page .expense-unit-heading strong {
    display: block;
}

.expense-page .expense-unit-heading small,
.expense-page .expense-unit-equation small {
    color: var(--redesign-muted);
    font-size: 10px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.expense-page .expense-unit-heading strong {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin-top: 3px;
}

.expense-page .expense-unit-equation {
    align-items: center;
    background: #f7fafc;
    border-bottom: 1px solid var(--redesign-line);
    border-top: 1px solid var(--redesign-line);
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    padding: 22px 26px;
    text-align: center;
}

.expense-page .expense-unit-equation small,
.expense-page .expense-unit-equation strong {
    display: block;
}

.expense-page .expense-unit-equation strong {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    margin-top: 5px;
}

.expense-page .expense-unit-equation > span {
    color: var(--redesign-blue);
    font-size: 22px;
}

.expense-page .expense-unit-total {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 26px 23px;
}

.expense-page .expense-unit-total span {
    color: var(--redesign-muted);
    font-size: 12px;
}

.expense-page .expense-unit-total strong {
    color: var(--redesign-blue);
    font-family: 'Lato', sans-serif;
    font-size: 24px;
}

.expense-page .expense-output-card {
    background: #eaf2f6;
    border-radius: 11px;
    padding: 30px;
}

.expense-page .expense-output-paper {
    background: #fff;
    border: 1px solid #d7e1e7;
    box-shadow: 0 15px 32px rgba(16, 42, 67, .14);
    padding: 27px 29px 22px;
}

.expense-page .expense-output-paper-title span,
.expense-page .expense-output-paper-title small {
    display: block;
}

.expense-page .expense-output-paper-title span {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.expense-page .expense-output-paper-title small {
    color: var(--redesign-muted);
    font-size: 11px;
    margin-top: 4px;
}

.expense-page .expense-output-paper-meta {
    border-bottom: 2px solid var(--redesign-navy);
    color: #6a7f8f;
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
    gap: 12px;
    justify-content: space-between;
    margin: 17px 0 3px;
    padding-bottom: 9px;
}

.expense-page .expense-output-paper-row,
.expense-page .expense-output-paper-total {
    align-items: center;
    display: flex;
    font-size: 11px;
    justify-content: space-between;
    padding: 9px 4px;
}

.expense-page .expense-output-paper-row {
    border-bottom: 1px solid #e7edf0;
}

.expense-page .expense-output-paper-total {
    font-size: 13px;
    padding-top: 12px;
}

.expense-page .expense-output-pages {
    align-items: center;
    border-top: 1px solid #dce5ea;
    display: flex;
    gap: 5px;
    margin-top: 8px;
    padding-top: 14px;
}

.expense-page .expense-output-pages span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 3px;
    color: var(--redesign-blue);
    display: flex;
    font-size: 9px;
    height: 22px;
    justify-content: center;
    width: 18px;
}

.expense-page .expense-output-pages small {
    color: var(--redesign-muted);
    font-size: 9px;
    margin-left: 5px;
}

.expense-page .expense-text-link,
.expense-page .expense-text-link:visited {
    color: var(--redesign-blue);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 7px;
    text-decoration: none;
}

.expense-page .expense-text-link:hover {
    color: #0d628d;
    text-decoration: none;
}

.expense-page .expense-cta .redesign-actions {
    justify-content: center;
}

@media (max-width: 991px) {
    .expense-page .expense-hero-layout {
        gap: 40px;
        grid-template-columns: 1fr;
    }

    .expense-page .expense-hero-copy {
        max-width: 780px;
    }

    .expense-page .expense-hero-visual {
        margin: 0 auto;
        max-width: 650px;
        width: 100%;
    }

    .expense-page .expense-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expense-page .expense-capability-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .expense-page .expense-capability-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .expense-page .expense-workflow-layout,
    .expense-page .expense-categories-layout,
    .expense-page .expense-output-layout {
        gap: 44px;
    }
}

@media (max-width: 767px) {
    .expense-page .expense-hero {
        padding: 58px 0 56px;
    }

    .expense-page .expense-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .expense-page .expense-hero-copy > p:not(.expense-hero-note) {
        font-size: 17px;
    }

    .expense-page .expense-detail-grid,
    .expense-page .expense-workflow-layout,
    .expense-page .expense-categories-layout,
    .expense-page .expense-output-layout {
        grid-template-columns: 1fr;
    }

    .expense-page .expense-review-flow {
        grid-template-columns: 1fr;
    }

    .expense-page .expense-review-flow article {
        min-height: 0;
    }

    .expense-page .expense-review-arrow {
        transform: rotate(90deg);
    }

    .expense-page .expense-output-card {
        order: 2;
    }
}

@media (max-width: 480px) {
    .expense-page .expense-hero h1 {
        font-size: 33px;
    }

    .expense-page .expense-summary-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .expense-page .expense-capability-grid {
        grid-template-columns: 1fr;
    }

    .expense-page .expense-capability-item,
    .expense-page .expense-capability-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .expense-page .expense-capability-item:last-child {
        border-bottom: 0;
    }

    .expense-page .expense-workflow-copy h2,
    .expense-page .expense-categories-copy h2,
    .expense-page .expense-output-copy h2 {
        font-size: 29px;
    }

    .expense-page .expense-output-card {
        padding: 15px;
    }

    .expense-page .expense-output-paper {
        padding: 22px 18px 18px;
    }
}

.redesign-page *,
.redesign-page *:before,
.redesign-page *:after,
.dcaa-page *,
.dcaa-page *:before,
.dcaa-page *:after {
    box-sizing: border-box;
}

.redesign-page h1,
.redesign-page h2,
.redesign-page h3,
.redesign-page h4,
.dcaa-page h1,
.dcaa-page h2,
.dcaa-page h3,
.dcaa-page h4 {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    text-transform: none;
}

.redesign-page p,
.dcaa-page p {
    color: var(--redesign-muted);
    font-size: 16px;
    line-height: 1.75;
}

.redesign-page a:focus,
.dcaa-page a:focus {
    outline: 3px solid rgba(36, 172, 222, .35);
    outline-offset: 3px;
}

.redesign-container,
.dcaa-container {
    margin: 0 auto;
    max-width: 1240px;
    padding-left: 24px;
    padding-right: 24px;
}

.redesign-kicker,
.dcaa-eyebrow {
    color: var(--redesign-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.redesign-actions,
.dcaa-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.redesign-button,
.dcaa-button {
    border: 1px solid transparent;
    border-radius: 5px;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 15px 22px;
    text-decoration: none;
    transition: all .18s ease;
}

.redesign-button:hover,
.dcaa-button:hover {
    transform: translateY(-1px);
}

.redesign-button-primary,
.redesign-button-primary:visited,
.dcaa-button-primary,
.dcaa-button-primary:visited {
    background: var(--redesign-bright-blue);
    color: #fff;
}

.redesign-button-primary:hover,
.dcaa-button-primary:hover {
    background: #1599c8;
    color: #fff;
}

.redesign-button-outline-light,
.redesign-button-outline-light:visited,
.dcaa-button-secondary,
.dcaa-button-secondary:visited {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.redesign-button-outline-light:hover,
.dcaa-button-secondary:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

.redesign-section,
.dcaa-section {
    padding: 84px 0;
}

.redesign-section-soft,
.dcaa-section-soft {
    background: var(--redesign-soft);
}

.redesign-section-heading,
.dcaa-section-heading {
    margin: 0 auto 42px;
    max-width: 760px;
    text-align: center;
}

.redesign-section-heading h2,
.dcaa-section-heading h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    margin: 0 0 14px;
}

.redesign-section-heading p,
.dcaa-section-heading p {
    margin: 0;
}

.redesign-callout,
.dcaa-guidance-callout {
    background: #fff;
    border-left: 4px solid var(--redesign-bright-blue);
    border-radius: 0 5px 5px 0;
    box-shadow: 0 5px 14px rgba(16, 42, 67, .06);
    margin-top: 24px;
    padding: 15px 17px;
}

.redesign-callout strong,
.dcaa-guidance-callout strong {
    color: var(--redesign-navy);
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.redesign-callout p,
.dcaa-guidance-callout p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.redesign-screen-card,
.dcaa-screen-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 4px;
    box-shadow: 0 16px 35px rgba(16, 42, 67, .13);
    margin: 0;
    overflow: hidden;
}

.redesign-screen-card img,
.dcaa-screen-card img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.redesign-screen-caption,
.dcaa-screen-caption {
    border-top: 1px solid var(--redesign-line);
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    padding: 12px 15px;
}

.redesign-cta,
.dcaa-cta {
    background: linear-gradient(135deg, #0d263b, #174f6c);
    color: #fff;
    padding: 62px 0;
    text-align: center;
}

.redesign-cta h2,
.dcaa-cta h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 12px;
}

.redesign-cta p,
.dcaa-cta p {
    color: #d8ebf5;
    margin: 0 auto 25px;
    max-width: 700px;
}

.redesign-cta .redesign-actions,
.dcaa-cta .dcaa-hero-actions {
    justify-content: center;
}

/* Shared feature-detail navigation */

.feature-detail-nav {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
    box-shadow: 0 3px 12px rgba(16, 42, 67, .06);
    position: relative;
    z-index: 3;
}

.feature-detail-breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    min-height: 56px;
    padding: 0;
}

.feature-detail-breadcrumb li {
    align-items: center;
    display: flex;
    min-width: 0;
}

.feature-detail-breadcrumb li + li:before {
    border-color: #a9bac8;
    border-style: solid;
    border-width: 1px 1px 0 0;
    content: '';
    flex: 0 0 7px;
    height: 7px;
    margin: 0 16px 0 14px;
    transform: rotate(45deg);
    width: 7px;
}

.feature-detail-parent a,
.feature-detail-parent a:visited {
    align-items: center;
    color: var(--redesign-blue);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 9px;
    line-height: 1.3;
    text-decoration: none;
    transition: color .18s ease;
}

.feature-detail-parent a .fa {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    transition: background-color .18s ease;
    width: 30px;
}

.feature-detail-parent a:hover,
.feature-detail-parent a:focus {
    color: #0d628d;
    text-decoration: none;
}

.feature-detail-parent a:hover .fa,
.feature-detail-parent a:focus .fa {
    background: #d9f1fa;
}

.feature-detail-current {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .feature-detail-breadcrumb {
        min-height: 50px;
    }

    .feature-detail-parent a,
    .feature-detail-current {
        font-size: 12px;
    }

    .feature-detail-parent a {
        gap: 7px;
    }

    .feature-detail-parent a .fa {
        border-radius: 5px;
        height: 26px;
        width: 26px;
    }

    .feature-detail-breadcrumb li + li:before {
        margin-left: 11px;
        margin-right: 12px;
    }
}

/* DCAA timekeeping page */

.dcaa-hero {
    background:
        radial-gradient(circle at 91% 18%, rgba(36, 172, 222, .28), transparent 28%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 62%, #0d5676 100%);
    color: #fff;
    padding: 76px 0 62px;
    position: relative;
}

.dcaa-hero:after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    bottom: 0;
    content: '';
    left: 0;
    opacity: .45;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.dcaa-hero-layout {
    display: block;
    position: relative;
    z-index: 1;
}

.dcaa-hero-copy {
    max-width: 900px;
    min-width: 0;
}

.dcaa-hero .dcaa-eyebrow {
    color: #7ed8f4;
}

.dcaa-hero h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 22px;
}

.dcaa-hero-lead {
    color: #d8ebf5 !important;
    font-size: 19px !important;
    line-height: 1.65 !important;
    margin: 0 0 28px;
}

.dcaa-hero-visual {
    margin: 42px auto 0;
    max-width: 1031px;
    min-width: 0;
    position: relative;
}

.dcaa-product-frame {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 9px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .33);
    overflow: hidden;
    padding: 5px;
    transform: none;
}

.dcaa-product-frame img,
.dcaa-workflow-step img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.dcaa-product-frame img {
    border-radius: 5px;
}

.dcaa-evidence-tag {
    align-items: center;
    background: #fff;
    border-radius: 6px;
    bottom: -18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
    color: var(--redesign-navy);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    left: 24px;
    padding: 11px 14px;
    position: absolute;
}

.dcaa-evidence-tag .fa,
.dcaa-check-list .fa {
    color: #2a9d61;
}

.dcaa-program-note {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .07);
    position: relative;
    z-index: 2;
}

.dcaa-program-note-inner {
    align-items: center;
    display: flex;
    gap: 18px;
    padding-bottom: 18px;
    padding-top: 18px;
}

.dcaa-note-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 44px;
    font-size: 20px;
    height: 44px;
    justify-content: center;
}

.dcaa-program-note strong {
    color: var(--redesign-navy);
}

.dcaa-program-note p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.dcaa-control-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.dcaa-control-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
    flex: 1 1 240px;
    padding: 26px 23px 23px;
}

.dcaa-control-number {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    margin-bottom: 18px;
    width: 38px;
}

.dcaa-control-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
}

.dcaa-control-card p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.dcaa-story {
    display: block;
}

.dcaa-story + .dcaa-story {
    border-top: 1px solid var(--redesign-line);
    margin-top: 76px;
    padding-top: 76px;
}

.dcaa-story-copy {
    max-width: 800px;
    min-width: 0;
}

.dcaa-story-visual {
    margin-top: 34px;
    min-width: 0;
    width: 100%;
}

.dcaa-story-label {
    color: var(--redesign-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.dcaa-story h2 {
    font-size: 31px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 17px;
}

.dcaa-story-copy > p {
    margin: 0 0 20px;
}

.dcaa-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dcaa-check-list li {
    color: var(--redesign-ink);
    font-size: 15px;
    line-height: 1.55;
    margin: 12px 0;
    padding-left: 29px;
    position: relative;
}

.dcaa-check-list .fa {
    left: 0;
    position: absolute;
    top: 4px;
}

.dcaa-task-control-stage {
    align-items: center;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 514px);
}

.dcaa-task-control-notes {
    display: grid;
    gap: 15px;
}

.dcaa-task-control-note {
    background: var(--redesign-soft);
    border: 1px solid var(--redesign-line);
    border-radius: 7px;
    padding: 18px 18px 18px 54px;
    position: relative;
}

.dcaa-task-control-note .fa {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-size: 15px;
    height: 30px;
    justify-content: center;
    left: 15px;
    position: absolute;
    top: 17px;
    width: 30px;
}

.dcaa-task-control-note h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px;
}

.dcaa-task-control-note p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.dcaa-task-control-stage .dcaa-screen-card {
    justify-self: end;
    max-width: 514px;
    width: 100%;
}

.dcaa-story-reverse .dcaa-screen-card {
    margin-left: auto;
    margin-right: auto;
    max-width: 1021px;
}

.dcaa-workflow {
    background: linear-gradient(135deg, var(--redesign-navy), #174e6d);
    border-radius: 10px;
    box-shadow: 0 22px 45px rgba(16, 42, 67, .2);
    overflow: hidden;
    padding: 24px;
}

.dcaa-workflow-step + .dcaa-workflow-step {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 28px;
    padding-top: 24px;
}

.dcaa-workflow-step img {
    background: #fff;
    border-radius: 5px;
}

.dcaa-workflow-step:first-child img {
    margin-left: auto;
    margin-right: auto;
    max-width: 1019px;
}

.dcaa-workflow-step-submit img {
    margin-left: auto;
    margin-right: auto;
    max-width: 681px;
}

.dcaa-workflow-step:last-child img {
    margin-left: auto;
    margin-right: auto;
    max-width: 953px;
}

.dcaa-workflow-label {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: .7px;
    margin: 0 0 11px;
    text-transform: uppercase;
}

.dcaa-workflow-number {
    align-items: center;
    background: var(--redesign-bright-blue);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 14px;
    height: 30px;
    justify-content: center;
    letter-spacing: 0;
    width: 30px;
}

.dcaa-cta-reference {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin: 34px auto 0;
    max-width: 960px;
    padding-top: 20px;
}

.dcaa-cta .dcaa-cta-reference p {
    color: #b9d2df;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    max-width: none;
}

.dcaa-cta-reference a {
    color: #7ed8f4;
    font-weight: 700;
    text-decoration: underline;
}

.dcaa-cta-reference a:hover,
.dcaa-cta-reference a:focus {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .dcaa-hero {
        padding-top: 58px;
    }

    .dcaa-hero-copy,
    .dcaa-story-copy {
        max-width: 760px;
    }

    .dcaa-hero-visual {
        margin-top: 36px;
    }
}

@media (max-width: 767px) {
    .redesign-container,
    .dcaa-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dcaa-hero {
        padding: 46px 0 52px;
    }

    .dcaa-hero h1 {
        font-size: 37px;
        letter-spacing: -.4px;
    }

    .dcaa-hero-lead {
        font-size: 17px !important;
    }

    .dcaa-evidence-tag {
        bottom: -16px;
        left: 12px;
    }

    .dcaa-program-note-inner {
        align-items: flex-start;
    }

    .redesign-section,
    .dcaa-section {
        padding: 62px 0;
    }

    .redesign-section-heading,
    .dcaa-section-heading {
        margin-bottom: 32px;
    }

    .redesign-section-heading h2,
    .dcaa-section-heading h2,
    .redesign-cta h2,
    .dcaa-cta h2 {
        font-size: 29px;
    }

    .dcaa-story h2 {
        font-size: 27px;
    }

    .dcaa-story + .dcaa-story {
        margin-top: 58px;
        padding-top: 58px;
    }

    .dcaa-task-control-stage {
        grid-template-columns: 1fr;
    }

    .dcaa-task-control-stage .dcaa-screen-card {
        justify-self: center;
    }
}

@media (max-width: 480px) {
    .dcaa-hero h1 {
        font-size: 32px;
    }

    .redesign-actions,
    .dcaa-hero-actions,
    .redesign-button,
    .dcaa-button {
        display: block;
        text-align: center;
        width: 100%;
    }

    .redesign-button + .redesign-button,
    .dcaa-button + .dcaa-button {
        margin-top: 10px;
    }

    .dcaa-evidence-tag {
        margin-top: 12px;
        position: static;
    }

    .dcaa-program-note-inner {
        gap: 12px;
    }

    .dcaa-note-icon {
        flex-basis: 38px;
        height: 38px;
    }

    .dcaa-workflow {
        padding: 11px;
    }
}

/* Home page */

.home-page .home-hero {
    background:
        radial-gradient(circle at 88% 13%, rgba(36, 172, 222, .28), transparent 27%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 61%, #0d5676 100%);
    color: #fff;
    padding: 118px 0 68px;
    position: relative;
}

.home-page .home-hero:after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    bottom: 0;
    content: '';
    left: 0;
    opacity: .45;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.home-page .home-hero-layout {
    position: relative;
    z-index: 1;
}

.home-page .home-hero-copy {
    max-width: 900px;
}

.home-page .home-hero .redesign-kicker {
    color: #7ed8f4;
}

.home-page .home-hero h1 {
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -.9px;
    line-height: 1.08;
    margin: 0 0 21px;
}

.home-page .home-hero-lead {
    color: #d8ebf5;
    font-size: 19px;
    line-height: 1.65;
    margin: 0 0 27px;
    max-width: 850px;
}

.home-page .home-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    line-height: 1.5;
    margin: 17px 0 0;
}

.home-page .home-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.home-page .home-hero-visual {
    margin: 43px auto 0;
    max-width: 1029px;
}

.home-page .home-product-frame {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .33);
    margin: 0;
    overflow: hidden;
    padding: 5px 5px 0;
}

.home-page .home-product-frame img {
    border-radius: 5px 5px 0 0;
    display: block;
    height: auto;
    max-width: 1019px;
    object-fit: contain;
    width: 100%;
}

.home-page .home-product-frame figcaption {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.5;
    padding: 11px 13px 12px;
}

.home-page .home-value-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .07);
    position: relative;
    z-index: 2;
}

.home-page .home-value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 22px;
    padding-top: 22px;
}

.home-page .home-value-item {
    align-items: center;
    color: var(--redesign-ink);
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 4px 22px;
    text-decoration: none;
}

.home-page .home-value-item + .home-value-item {
    border-left: 1px solid var(--redesign-line);
}

.home-page .home-value-item:hover strong,
.home-page .home-value-item:focus strong {
    color: var(--redesign-blue);
}

.home-page .home-value-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 42px;
    font-size: 18px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.home-page .home-value-item strong,
.home-page .home-value-item small {
    display: block;
}

.home-page .home-value-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 1.35;
    transition: color .18s ease;
}

.home-page .home-value-item small {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.home-page .home-feature-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .home-feature-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 9px 24px rgba(16, 42, 67, .06);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 29px 27px 26px;
}

.home-page .home-feature-number {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    margin-bottom: 19px;
    width: 38px;
}

.home-page .home-feature-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 11px;
}

.home-page .home-feature-card p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 21px;
}

.home-page .home-feature-card > a,
.home-page .home-text-link {
    color: var(--redesign-blue);
    font-size: 14px;
    font-weight: 700;
    margin-top: auto;
    text-decoration: none;
}

.home-page .home-feature-card > a:hover,
.home-page .home-feature-card > a:focus,
.home-page .home-text-link:hover,
.home-page .home-text-link:focus {
    color: #0d658e;
    text-decoration: underline;
}

.home-page .home-workflow-section {
    scroll-margin-top: 52px;
}

.home-page .home-workflow-intro {
    align-items: end;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
    margin-bottom: 45px;
}

.home-page .home-workflow-intro h2,
.home-page .home-pricing-copy h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    margin: 0;
}

.home-page .home-workflow-intro p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.home-page .home-process {
    display: grid;
}

.home-page .home-process-row,
.home-page .home-process-arrow {
    display: grid;
    gap: 34px;
    grid-template-columns: 215px minmax(0, 1fr);
}

.home-page .home-process-row {
    align-items: center;
}

.home-page .home-process-copy {
    padding-left: 5px;
}

.home-page .home-process-title {
    align-items: center;
    display: flex;
    gap: 11px;
}

.home-page .home-process-title > span {
    align-items: center;
    background: var(--redesign-bright-blue);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 32px;
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.home-page .home-process-title h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.home-page .home-process-copy p {
    font-size: 14px;
    line-height: 1.65;
    margin: 10px 0 0 43px;
}

.home-page .home-process-row .redesign-screen-card {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.home-page .home-entry-screen {
    max-width: 1021px;
}

.home-page .home-submit-screen {
    max-width: 683px;
}

.home-page .home-approval-screen {
    max-width: 955px;
}

.home-page .home-process-arrow {
    height: 58px;
}

.home-page .home-process-arrow span {
    grid-column: 2;
    height: 58px;
    justify-self: center;
    position: relative;
    width: 24px;
}

.home-page .home-process-arrow span:before {
    background: var(--redesign-blue);
    content: '';
    height: 38px;
    left: 11px;
    position: absolute;
    top: 5px;
    width: 2px;
}

.home-page .home-process-arrow span:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--redesign-blue);
    bottom: 5px;
    content: '';
    left: 5px;
    position: absolute;
}

.home-page .home-pricing-section {
    background:
        radial-gradient(circle at 12% 90%, rgba(36, 172, 222, .12), transparent 31%),
        #fff;
}

.home-page .home-pricing-layout {
    display: block;
}

.home-page .home-pricing-copy {
    margin: 0 auto 46px;
    max-width: 780px;
    text-align: center;
}

.home-page .home-pricing-copy p {
    margin: 18px 0 0;
}

.home-page .home-pricing-flow {
    align-items: start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 19px 42px rgba(16, 42, 67, .15);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
    padding: 38px 38px 34px;
    text-align: center;
}

.home-page .home-plan-step {
    min-width: 0;
}

.home-page .home-plan-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 25px;
    height: 64px;
    justify-content: center;
    margin: 0 auto 17px;
    width: 64px;
}

.home-page .home-plan-icon-free {
    background: var(--redesign-pale-blue);
    color: var(--redesign-blue);
}

.home-page .home-plan-icon-grow {
    background: var(--redesign-bright-blue);
    color: #fff;
}

.home-page .home-plan-icon-business {
    background: linear-gradient(135deg, var(--redesign-navy), #174e6d);
    color: #fff;
}

.home-page .home-plan-step-label {
    color: var(--redesign-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.home-page .home-plan-step h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 6px 0 8px;
}

.home-page .home-plan-step p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 245px;
}

.home-page .home-plan-step p strong {
    color: var(--redesign-navy);
}

.home-page .home-plan-connector {
    height: 64px;
    position: relative;
}

.home-page .home-plan-connector span {
    border-top: 2px dotted #9fc4d7;
    left: 6px;
    position: relative;
    top: 31px;
    width: calc(100% - 12px);
    display: block;
}

.home-page .home-plan-connector span:after {
    border-right: 2px solid var(--redesign-blue);
    border-top: 2px solid var(--redesign-blue);
    content: '';
    height: 7px;
    position: absolute;
    right: 0;
    top: -5px;
    transform: rotate(45deg);
    width: 7px;
}

.home-page .home-pricing-action {
    align-items: center;
    background: #eaf7fc;
    border: 1px solid #d4eaf4;
    border-radius: 8px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 22px;
    padding: 18px 20px;
}

.home-page .home-pricing-action-copy {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.home-page .home-pricing-action-icon {
    align-items: center;
    background: #fff;
    border: 1px solid var(--redesign-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.home-page .home-pricing-action-copy strong,
.home-page .home-pricing-action-copy small {
    display: block;
}

.home-page .home-pricing-action-copy strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}

.home-page .home-pricing-action-copy small {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.home-page .home-pricing-action .redesign-actions {
    flex: 0 0 auto;
}

.home-page .home-pricing-details-button,
.home-page .home-pricing-details-button:visited {
    background: #fff;
    border-color: var(--redesign-line);
    color: var(--redesign-blue);
}

.home-page .home-pricing-details-button:hover,
.home-page .home-pricing-details-button:focus {
    background: #f7fbfd;
    border-color: var(--redesign-blue);
    color: #0d658e;
}

.home-page .home-government-note {
    background: var(--redesign-soft);
    border-bottom: 1px solid var(--redesign-line);
    border-top: 1px solid var(--redesign-line);
    padding: 18px 0;
}

.home-page .home-government-note-inner {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.home-page .home-government-note-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 12px;
    height: 30px;
    justify-content: center;
}

.home-page .home-government-note p {
    color: var(--redesign-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.home-page .home-government-note strong {
    color: var(--redesign-navy);
}

.home-page .home-government-note a,
.home-page .home-government-note a:visited {
    color: var(--redesign-blue);
    font-weight: 700;
    text-decoration: none;
}

.home-page .home-government-note a:hover,
.home-page .home-government-note a:focus {
    color: #0d658e;
    text-decoration: underline;
}

.home-page .home-cta .redesign-actions {
    justify-content: center;
}

.home-page .home-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .home-page .home-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .home-value-item:nth-child(3) {
        border-left: 0;
    }

    .home-page .home-value-item:nth-child(n+3) {
        border-top: 1px solid var(--redesign-line);
        margin-top: 17px;
        padding-top: 21px;
    }

    .home-page .home-feature-grid {
        gap: 16px;
    }

    .home-page .home-feature-card {
        padding-left: 21px;
        padding-right: 21px;
    }

    .home-page .home-workflow-intro {
        align-items: start;
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .home-page .home-process-row,
    .home-page .home-process-arrow {
        gap: 22px;
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .home-page .home-pricing-flow {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767px) {
    .home-page .home-government-note-inner {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .home-page .home-hero {
        padding: 96px 0 52px;
    }

    .home-page .home-hero h1 {
        font-size: 39px;
        letter-spacing: -.4px;
    }

    .home-page .home-hero-lead {
        font-size: 17px;
    }

    .home-page .home-hero-visual {
        margin-top: 34px;
    }

    .home-page .home-feature-grid {
        grid-template-columns: 1fr;
    }

    .home-page .home-feature-card {
        min-height: 0;
    }

    .home-page .home-workflow-intro h2,
    .home-page .home-pricing-copy h2 {
        font-size: 29px;
    }

    .home-page .home-process-row,
    .home-page .home-process-arrow {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .home-page .home-process-copy {
        padding-left: 0;
    }

    .home-page .home-process-arrow {
        height: 50px;
    }

    .home-page .home-process-arrow span {
        grid-column: 1;
        height: 50px;
    }

    .home-page .home-process-arrow span:before {
        height: 30px;
    }

    .home-page .home-pricing-copy {
        margin-bottom: 34px;
    }

    .home-page .home-pricing-flow {
        gap: 0;
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }

    .home-page .home-plan-connector {
        height: 55px;
    }

    .home-page .home-plan-connector span {
        border-left: 2px dotted #9fc4d7;
        border-top: 0;
        height: 42px;
        left: 50%;
        top: 6px;
        width: 2px;
    }

    .home-page .home-plan-connector span:after {
        border-bottom: 2px solid var(--redesign-blue);
        border-right: 2px solid var(--redesign-blue);
        border-top: 0;
        bottom: 0;
        left: -4px;
        right: auto;
        top: auto;
        transform: rotate(45deg);
    }

    .home-page .home-pricing-action {
        align-items: stretch;
        flex-direction: column;
    }

    .home-page .home-pricing-action .redesign-actions {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .home-page .home-value-grid {
        grid-template-columns: 1fr;
        padding-bottom: 13px;
        padding-top: 13px;
    }

    .home-page .home-value-item,
    .home-page .home-value-item + .home-value-item,
    .home-page .home-value-item:nth-child(n+3) {
        border-left: 0;
        border-top: 1px solid var(--redesign-line);
        margin: 0;
        padding: 14px 4px;
    }

    .home-page .home-value-item:first-child {
        border-top: 0;
    }
}

@media (max-width: 480px) {
    .home-page .home-hero h1 {
        font-size: 34px;
    }

    .home-page .home-product-frame figcaption {
        font-size: 11px;
    }

    .home-page .home-feature-card {
        padding: 24px 21px 23px;
    }

    .home-page .home-pricing-action .redesign-button {
        width: 100%;
    }
}

/* Pricing page */

.pricing-page .pricing-hero {
    background:
        radial-gradient(circle at 88% 14%, rgba(36, 172, 222, .3), transparent 29%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 61%, #0d5676 100%);
    color: #fff;
    padding: 76px 0 70px;
    position: relative;
}

.pricing-page .pricing-hero:after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    bottom: 0;
    content: '';
    left: 0;
    opacity: .45;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.pricing-page .pricing-hero-inner {
    position: relative;
    z-index: 1;
}

.pricing-page .pricing-hero .redesign-kicker {
    color: #7ed8f4;
}

.pricing-page .pricing-hero h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 21px;
    max-width: 920px;
}

.pricing-page .pricing-hero p {
    color: #d8ebf5;
    font-size: 19px;
    line-height: 1.65;
    margin: 0 0 27px;
    max-width: 900px;
}

.pricing-page .pricing-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin-top: 17px;
}

.pricing-page .pricing-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.pricing-page .pricing-plans-section {
    scroll-margin-top: 52px;
}

.pricing-page .pricing-plan-flow {
    align-items: start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 19px 42px rgba(16, 42, 67, .14);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
    padding: 40px 38px 36px;
    text-align: center;
}

.pricing-page .pricing-plan-step {
    min-width: 0;
}

.pricing-page .pricing-plan-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 26px;
    height: 68px;
    justify-content: center;
    margin: 0 auto 17px;
    width: 68px;
}

.pricing-page .pricing-plan-icon-free {
    background: var(--redesign-pale-blue);
    color: var(--redesign-blue);
}

.pricing-page .pricing-plan-icon-grow {
    background: var(--redesign-bright-blue);
    color: #fff;
}

.pricing-page .pricing-plan-icon-business {
    background: linear-gradient(135deg, var(--redesign-navy), #174e6d);
    color: #fff;
}

.pricing-page .pricing-plan-step-label {
    color: var(--redesign-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.pricing-page .pricing-plan-step h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 6px 0 8px;
}

.pricing-page .pricing-plan-step p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 245px;
}

.pricing-page .pricing-plan-price {
    align-items: baseline;
    color: var(--redesign-navy);
    display: flex;
    gap: 7px;
    justify-content: center;
    margin: 2px 0 9px;
}

.pricing-page .pricing-plan-price strong {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    line-height: 1;
}

.pricing-page .pricing-plan-price span {
    color: var(--redesign-muted);
    font-size: 11px;
}

.pricing-page .pricing-plan-connector {
    height: 68px;
    position: relative;
}

.pricing-page .pricing-plan-connector span {
    border-top: 2px dotted #9fc4d7;
    display: block;
    left: 6px;
    position: relative;
    top: 33px;
    width: calc(100% - 12px);
}

.pricing-page .pricing-plan-connector span:after {
    border-right: 2px solid var(--redesign-blue);
    border-top: 2px solid var(--redesign-blue);
    content: '';
    height: 7px;
    position: absolute;
    right: 0;
    top: -5px;
    transform: rotate(45deg);
    width: 7px;
}

.pricing-page .pricing-plan-action {
    align-items: center;
    background: #eaf7fc;
    border: 1px solid #d4eaf4;
    border-radius: 8px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 22px;
    padding: 18px 20px;
}

.pricing-page .pricing-plan-action-copy {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.pricing-page .pricing-plan-action-icon {
    align-items: center;
    background: #fff;
    border: 1px solid var(--redesign-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.pricing-page .pricing-plan-action-copy strong,
.pricing-page .pricing-plan-action-copy small {
    display: block;
}

.pricing-page .pricing-plan-action-copy strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}

.pricing-page .pricing-plan-action-copy small {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.pricing-page .pricing-example-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-page .pricing-example-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 9px 24px rgba(16, 42, 67, .07);
    padding: 27px 24px 25px;
    text-align: center;
}

.pricing-page .pricing-example-card-free {
    border-top: 4px solid var(--redesign-bright-blue);
    padding-top: 24px;
}

.pricing-page .pricing-example-users,
.pricing-page .pricing-example-plan {
    display: block;
}

.pricing-page .pricing-example-users {
    color: var(--redesign-blue);
    font-size: 13px;
    font-weight: 700;
}

.pricing-page .pricing-example-card > strong {
    color: var(--redesign-navy);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 42px;
    line-height: 1;
    margin: 13px 0 8px;
}

.pricing-page .pricing-example-plan {
    color: var(--redesign-muted);
    font-size: 13px;
}

.pricing-page .pricing-active-user-note {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-left: 4px solid var(--redesign-bright-blue);
    border-radius: 0 6px 6px 0;
    display: flex;
    gap: 13px;
    margin-top: 24px;
    padding: 17px 18px;
}

.pricing-page .pricing-active-user-note > span {
    color: var(--redesign-blue);
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1.5;
}

.pricing-page .pricing-active-user-note p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.pricing-page .pricing-active-user-note strong {
    color: var(--redesign-navy);
}

.pricing-page .pricing-feature-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-page .pricing-feature-item {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    padding: 24px 23px 22px 67px;
    position: relative;
}

.pricing-page .pricing-feature-item > .fa {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-size: 17px;
    height: 36px;
    justify-content: center;
    left: 20px;
    position: absolute;
    top: 22px;
    width: 36px;
}

.pricing-page .pricing-feature-item h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 7px;
}

.pricing-page .pricing-feature-item p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.pricing-page .pricing-faq-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-page .pricing-faq-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
    padding: 24px 25px 22px;
}

.pricing-page .pricing-faq-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 9px;
}

.pricing-page .pricing-faq-card p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.pricing-page .pricing-cta .redesign-actions {
    justify-content: center;
}

.pricing-page .pricing-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .pricing-page .pricing-plan-flow {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
        padding-left: 24px;
        padding-right: 24px;
    }

    .pricing-page .pricing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pricing-page .pricing-hero {
        padding: 58px 0 56px;
    }

    .pricing-page .pricing-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .pricing-page .pricing-hero p {
        font-size: 17px;
    }

    .pricing-page .pricing-plan-flow {
        gap: 0;
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }

    .pricing-page .pricing-plan-connector {
        height: 55px;
    }

    .pricing-page .pricing-plan-connector span {
        border-left: 2px dotted #9fc4d7;
        border-top: 0;
        height: 42px;
        left: 50%;
        top: 6px;
        width: 2px;
    }

    .pricing-page .pricing-plan-connector span:after {
        border-bottom: 2px solid var(--redesign-blue);
        border-right: 2px solid var(--redesign-blue);
        border-top: 0;
        bottom: 0;
        left: -4px;
        right: auto;
        top: auto;
        transform: rotate(45deg);
    }

    .pricing-page .pricing-plan-action {
        align-items: stretch;
        flex-direction: column;
    }

    .pricing-page .pricing-plan-action .redesign-button {
        text-align: center;
    }

    .pricing-page .pricing-example-grid,
    .pricing-page .pricing-feature-grid,
    .pricing-page .pricing-faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .pricing-page .pricing-hero h1 {
        font-size: 33px;
    }

    .pricing-page .pricing-plan-action .redesign-button {
        width: 100%;
    }

    .pricing-page .pricing-feature-item {
        padding-left: 62px;
    }

    .pricing-page .pricing-faq-card {
        padding: 21px 20px 20px;
    }
}

/* Features page */

.features-page .features-hero {
    background:
        radial-gradient(circle at 88% 15%, rgba(36, 172, 222, .28), transparent 29%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 62%, #0d5676 100%);
    color: #fff;
    padding: 76px 0 68px;
    position: relative;
}

.features-page .features-hero:after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: '';
    height: 330px;
    position: absolute;
    right: -115px;
    top: -165px;
    width: 330px;
}

.features-page .features-hero-inner {
    position: relative;
    z-index: 1;
}

.features-page .features-hero .redesign-kicker {
    color: #73d1ee;
}

.features-page .features-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.7px;
    line-height: 1.13;
    margin: 0 0 18px;
    max-width: 780px;
}

.features-page .features-hero p {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 27px;
    max-width: 850px;
}

.features-page .features-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin-top: 18px;
}

.features-page .features-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.features-page .features-core-section {
    scroll-margin-top: 52px;
}

.features-page .features-core-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features-page .features-core-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 9px 24px rgba(16, 42, 67, .07);
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 29px 27px 25px;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.features-page .features-core-card:hover {
    border-color: #bad9e8;
    box-shadow: 0 15px 34px rgba(16, 42, 67, .11);
    transform: translateY(-2px);
}

.features-page .features-card-icon,
.features-page .features-specialized-icon,
.features-page .features-pricing-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
}

.features-page .features-card-icon {
    font-size: 21px;
    height: 48px;
    margin-bottom: 19px;
    width: 48px;
}

.features-page .features-core-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
}

.features-page .features-core-card p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
}

.features-page .features-card-link,
.features-page .features-card-link:visited {
    color: var(--redesign-blue);
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
    text-decoration: none;
}

.features-page .features-card-link:hover {
    color: #0d628d;
    text-decoration: none;
}

.features-page .features-card-link span {
    display: inline-block;
    margin-left: 3px;
    transition: transform .18s ease;
}

.features-page .features-card-link:hover span {
    transform: translateX(3px);
}

.features-page .features-card-detail {
    color: var(--redesign-muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: auto;
}

.features-page .features-card-detail .fa {
    color: var(--redesign-blue);
    margin-right: 5px;
}

.features-page .features-support-band {
    background: var(--redesign-pale-blue);
    border: 1px solid #d4eaf4;
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 24px;
    padding: 21px 18px;
}

.features-page .features-support-item {
    align-items: center;
    border-right: 1px solid #c9e1ed;
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 2px 18px;
}

.features-page .features-support-item:last-child {
    border-right: 0;
}

.features-page .features-support-item > .fa {
    color: var(--redesign-blue);
    flex: 0 0 auto;
    font-size: 21px;
}

.features-page .features-support-item strong,
.features-page .features-support-item small {
    display: block;
}

.features-page .features-support-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.features-page .features-support-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.features-page .features-specialized-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features-page .features-specialized-card {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    display: flex;
    gap: 17px;
    min-width: 0;
    padding: 26px 24px 24px;
}

.features-page .features-specialized-icon {
    font-size: 18px;
    height: 42px;
    width: 42px;
}

.features-page .features-specialized-card > div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 185px;
    min-width: 0;
}

.features-page .features-specialized-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 1px 0 9px;
}

.features-page .features-specialized-card p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 17px;
}

.features-page .features-pricing-section {
    background: #fff;
    padding: 58px 0;
}

.features-page .features-pricing-strip {
    align-items: center;
    background: linear-gradient(135deg, #effaff, #e5f4fa);
    border: 1px solid #d0e8f3;
    border-radius: 9px;
    display: grid;
    gap: 22px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 27px 30px;
}

.features-page .features-pricing-icon {
    background: #fff;
    border: 1px solid var(--redesign-blue);
    font-size: 22px;
    height: 55px;
    width: 55px;
}

.features-page .features-pricing-copy .redesign-kicker {
    font-size: 11px;
    margin-bottom: 5px;
}

.features-page .features-pricing-copy h2 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px;
}

.features-page .features-pricing-copy p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    max-width: 790px;
}

.features-page .features-pricing-strip > .redesign-button {
    white-space: nowrap;
}

.features-page .features-cta .redesign-actions {
    justify-content: center;
}

.features-page .features-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .features-page .features-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features-page .features-support-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: 12px;
        padding-top: 12px;
    }

    .features-page .features-support-item {
        border-bottom: 1px solid #c9e1ed;
        padding-bottom: 14px;
        padding-top: 14px;
    }

    .features-page .features-support-item:nth-child(2) {
        border-right: 0;
    }

    .features-page .features-support-item:nth-child(3),
    .features-page .features-support-item:nth-child(4) {
        border-bottom: 0;
    }

    .features-page .features-specialized-grid {
        grid-template-columns: 1fr;
    }

    .features-page .features-specialized-card > div:last-child {
        min-height: 0;
    }

    .features-page .features-pricing-strip {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .features-page .features-pricing-strip > .redesign-button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 767px) {
    .features-page .features-hero {
        padding: 58px 0 56px;
    }

    .features-page .features-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .features-page .features-hero p {
        font-size: 17px;
    }

    .features-page .features-core-grid {
        grid-template-columns: 1fr;
    }

    .features-page .features-core-card {
        min-height: 0;
    }

    .features-page .features-support-band {
        grid-template-columns: 1fr;
    }

    .features-page .features-support-item,
    .features-page .features-support-item:nth-child(2),
    .features-page .features-support-item:nth-child(3) {
        border-bottom: 1px solid #c9e1ed;
        border-right: 0;
    }

    .features-page .features-support-item:last-child {
        border-bottom: 0;
    }

    .features-page .features-pricing-strip {
        align-items: start;
        grid-template-columns: 1fr;
        padding: 25px 23px;
    }

    .features-page .features-pricing-strip > .redesign-button {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .features-page .features-hero h1 {
        font-size: 33px;
    }

    .features-page .features-core-card {
        padding: 25px 22px 23px;
    }

    .features-page .features-specialized-card {
        display: block;
        padding: 24px 22px 22px;
    }

    .features-page .features-specialized-icon {
        margin-bottom: 15px;
    }

    .features-page .features-pricing-strip > .redesign-button {
        text-align: center;
        width: 100%;
    }
}

/* Time tracking detail page */

.time-tracking-page .time-tracking-hero {
    background:
        radial-gradient(circle at 89% 13%, rgba(36, 172, 222, .3), transparent 30%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 60%, #0d5676 100%);
    color: #fff;
    overflow: hidden;
    padding: 72px 0 66px;
    position: relative;
}

.time-tracking-page .time-tracking-hero:after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.time-tracking-page .time-tracking-hero-layout {
    align-items: center;
    display: grid;
    gap: 47px;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    position: relative;
    z-index: 1;
}

.time-tracking-page .time-tracking-hero-copy,
.time-tracking-page .time-tracking-hero-visual {
    min-width: 0;
}

.time-tracking-page .time-tracking-hero .redesign-kicker {
    color: #73d1ee;
}

.time-tracking-page .time-tracking-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.time-tracking-page .time-tracking-hero-copy > p:not(.time-tracking-hero-note) {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 26px;
}

.time-tracking-page .time-tracking-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin: 17px 0 0;
}

.time-tracking-page .time-tracking-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.time-tracking-page .time-tracking-product-frame {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 9px;
    box-shadow: 0 24px 52px rgba(3, 17, 28, .35);
    margin: 0;
    max-width: 1019px;
    overflow: hidden;
    padding: 7px 7px 0;
}

.time-tracking-page .time-tracking-product-frame img {
    display: block;
    height: auto;
    max-width: 1019px;
    width: 100%;
}

.time-tracking-page .time-tracking-product-frame figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 9px 10px 10px;
    text-align: center;
}

.time-tracking-page .time-tracking-capability-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.time-tracking-page .time-tracking-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.time-tracking-page .time-tracking-capability-item {
    align-items: center;
    border-right: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 23px 20px;
}

.time-tracking-page .time-tracking-capability-item:first-child {
    border-left: 1px solid var(--redesign-line);
}

.time-tracking-page .time-tracking-capability-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 40px;
    font-size: 17px;
    height: 40px;
    justify-content: center;
}

.time-tracking-page .time-tracking-capability-item strong,
.time-tracking-page .time-tracking-capability-item small {
    display: block;
}

.time-tracking-page .time-tracking-capability-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.time-tracking-page .time-tracking-capability-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.time-tracking-page .time-tracking-weekly-section {
    scroll-margin-top: 52px;
}

.time-tracking-page .time-tracking-detail-grid,
.time-tracking-page .time-tracking-records-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.time-tracking-page .time-tracking-detail-card,
.time-tracking-page .time-tracking-record-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    box-shadow: 0 9px 24px rgba(16, 42, 67, .07);
    min-width: 0;
}

.time-tracking-page .time-tracking-detail-card {
    border-top: 4px solid var(--redesign-bright-blue);
    padding: 25px 25px 24px;
}

.time-tracking-page .time-tracking-detail-number {
    color: var(--redesign-blue);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 13px;
}

.time-tracking-page .time-tracking-detail-card h3,
.time-tracking-page .time-tracking-record-card h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 9px;
}

.time-tracking-page .time-tracking-detail-card p,
.time-tracking-page .time-tracking-record-card p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}

.time-tracking-page .time-tracking-workflow-layout,
.time-tracking-page .time-tracking-mobile-layout {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.time-tracking-page .time-tracking-workflow-copy h2,
.time-tracking-page .time-tracking-mobile-copy h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 17px;
}

.time-tracking-page .time-tracking-workflow-copy p,
.time-tracking-page .time-tracking-mobile-copy > p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0 0 15px;
}

.time-tracking-page .time-tracking-text-link,
.time-tracking-page .time-tracking-text-link:visited {
    color: var(--redesign-blue);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    text-decoration: none;
}

.time-tracking-page .time-tracking-text-link:hover {
    color: #0d628d;
    text-decoration: none;
}

.time-tracking-page .time-tracking-workflow-steps {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 16px 36px rgba(16, 42, 67, .1);
    padding: 28px 30px;
}

.time-tracking-page .time-tracking-workflow-step {
    align-items: center;
    display: flex;
    gap: 17px;
}

.time-tracking-page .time-tracking-workflow-step > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 48px;
    font-size: 19px;
    height: 48px;
    justify-content: center;
}

.time-tracking-page .time-tracking-workflow-step strong,
.time-tracking-page .time-tracking-workflow-step small {
    display: block;
}

.time-tracking-page .time-tracking-workflow-step strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.time-tracking-page .time-tracking-workflow-step small {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 3px;
}

.time-tracking-page .time-tracking-workflow-connector {
    border-left: 2px dotted #9fc4d7;
    height: 27px;
    margin: 5px 0 5px 23px;
}

.time-tracking-page .time-tracking-mobile-layout {
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
}

.time-tracking-page .time-tracking-phone-figure {
    margin: 0 auto;
    max-width: 390px;
    text-align: center;
}

.time-tracking-page .time-tracking-phone-composite {
    margin: 0 auto;
    max-width: 390px;
    position: relative;
}

.time-tracking-page .time-tracking-phone-frame {
    display: block;
    height: auto;
    max-width: 1697px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.time-tracking-page .time-tracking-phone-screen {
    height: auto;
    left: 24.55%;
    max-width: 500px;
    position: absolute;
    top: 15.2%;
    width: 54.9%;
    z-index: 3;
}

.time-tracking-page .time-tracking-phone-figure figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.5;
    margin: -17px auto 0;
    max-width: 330px;
    position: relative;
    z-index: 4;
}

.time-tracking-page .time-tracking-check-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.time-tracking-page .time-tracking-check-list li {
    align-items: flex-start;
    display: flex;
    font-size: 14px;
    gap: 11px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.time-tracking-page .time-tracking-check-list .fa {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 25px;
    font-size: 11px;
    height: 25px;
    justify-content: center;
}

.time-tracking-page .time-tracking-record-card {
    padding: 27px 25px 25px 72px;
    position: relative;
}

.time-tracking-page .time-tracking-record-card > .fa {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    font-size: 18px;
    height: 40px;
    justify-content: center;
    left: 21px;
    position: absolute;
    top: 24px;
    width: 40px;
}

.time-tracking-page .time-tracking-cta .redesign-actions {
    justify-content: center;
}

.time-tracking-page .time-tracking-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .time-tracking-page .time-tracking-hero-layout {
        gap: 32px;
        grid-template-columns: 1fr;
    }

    .time-tracking-page .time-tracking-hero-copy {
        max-width: 780px;
    }

    .time-tracking-page .time-tracking-product-frame {
        max-width: 820px;
    }

    .time-tracking-page .time-tracking-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-tracking-page .time-tracking-capability-item:nth-child(2) {
        border-right: 1px solid var(--redesign-line);
    }

    .time-tracking-page .time-tracking-capability-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .time-tracking-page .time-tracking-capability-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .time-tracking-page .time-tracking-workflow-layout {
        gap: 42px;
    }

    .time-tracking-page .time-tracking-mobile-layout {
        gap: 45px;
        grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    }

    .time-tracking-page .time-tracking-records-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .time-tracking-page .time-tracking-hero {
        padding: 56px 0 54px;
    }

    .time-tracking-page .time-tracking-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .time-tracking-page .time-tracking-hero-copy > p:not(.time-tracking-hero-note) {
        font-size: 17px;
    }

    .time-tracking-page .time-tracking-detail-grid,
    .time-tracking-page .time-tracking-workflow-layout,
    .time-tracking-page .time-tracking-mobile-layout {
        grid-template-columns: 1fr;
    }

    .time-tracking-page .time-tracking-mobile-visual {
        order: 2;
    }

    .time-tracking-page .time-tracking-mobile-copy {
        order: 1;
    }

    .time-tracking-page .time-tracking-phone-figure {
        max-width: 330px;
    }
}

@media (max-width: 480px) {
    .time-tracking-page .time-tracking-hero h1 {
        font-size: 33px;
    }

    .time-tracking-page .time-tracking-capability-grid {
        grid-template-columns: 1fr;
    }

    .time-tracking-page .time-tracking-capability-item,
    .time-tracking-page .time-tracking-capability-item:first-child,
    .time-tracking-page .time-tracking-capability-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .time-tracking-page .time-tracking-capability-item:last-child {
        border-bottom: 0;
    }

    .time-tracking-page .time-tracking-workflow-copy h2,
    .time-tracking-page .time-tracking-mobile-copy h2 {
        font-size: 29px;
    }

    .time-tracking-page .time-tracking-workflow-steps {
        padding: 24px 20px;
    }

    .time-tracking-page .time-tracking-record-card {
        padding: 72px 21px 22px;
    }

    .time-tracking-page .time-tracking-record-card > .fa {
        left: 21px;
        top: 21px;
    }

    .time-tracking-page .time-tracking-phone-figure {
        max-width: 290px;
    }
}

/* Timesheet approval detail page */

.approval-page .approval-hero {
    background:
        radial-gradient(circle at 89% 14%, rgba(36, 172, 222, .3), transparent 30%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 60%, #0d5676 100%);
    color: #fff;
    overflow: hidden;
    padding: 75px 0 70px;
    position: relative;
}

.approval-page .approval-hero:after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: '';
    height: 380px;
    position: absolute;
    right: -125px;
    top: -190px;
    width: 380px;
}

.approval-page .approval-hero-layout {
    align-items: center;
    display: grid;
    gap: 60px;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
    position: relative;
    z-index: 1;
}

.approval-page .approval-hero-copy,
.approval-page .approval-hero-preview {
    min-width: 0;
}

.approval-page .approval-hero .redesign-kicker {
    color: #73d1ee;
}

.approval-page .approval-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.approval-page .approval-hero-copy > p:not(.approval-hero-note) {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 27px;
}

.approval-page .approval-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin: 17px 0 0;
}

.approval-page .approval-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.approval-page .approval-hero-preview {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 9px;
    box-shadow: 0 24px 52px rgba(3, 17, 28, .35);
    color: var(--redesign-copy);
    padding: 8px;
}

.approval-page .approval-preview-banner {
    align-items: center;
    background: #fff8e2;
    border: 1px solid #f0dfaa;
    border-radius: 6px;
    color: #8d6817;
    display: flex;
    gap: 13px;
    padding: 15px 17px;
}

.approval-page .approval-preview-banner > .fa {
    font-size: 24px;
}

.approval-page .approval-preview-banner strong,
.approval-page .approval-preview-banner small {
    display: block;
}

.approval-page .approval-preview-banner strong {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.approval-page .approval-preview-banner small {
    font-size: 11px;
    margin-top: 2px;
}

.approval-page .approval-preview-grid {
    border: 1px solid var(--redesign-line);
    border-radius: 5px 5px 0 0;
    display: grid;
    grid-template-columns: 1.2fr 1.45fr 1.1fr .65fr;
    margin-top: 8px;
}

.approval-page .approval-preview-grid > div {
    border-right: 1px solid var(--redesign-line);
    min-width: 0;
    padding: 12px 10px;
}

.approval-page .approval-preview-grid > div:last-child {
    border-right: 0;
    text-align: right;
}

.approval-page .approval-preview-grid small,
.approval-page .approval-preview-grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-page .approval-preview-grid small {
    color: var(--redesign-muted);
    font-size: 10px;
}

.approval-page .approval-preview-grid strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    margin-top: 4px;
}

.approval-page .approval-preview-actions {
    align-items: center;
    background: #f7f9fa;
    border: 1px solid var(--redesign-line);
    border-radius: 0 0 5px 5px;
    border-top: 0;
    display: flex;
    gap: 7px;
    justify-content: flex-end;
    padding: 10px;
}

.approval-page .approval-preview-actions > span {
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 10px;
}

.approval-page .approval-preview-view {
    background: #fff;
    border: 1px solid #b9c5cc;
    color: var(--redesign-navy) !important;
}

.approval-page .approval-preview-reject {
    background: #d9534f;
}

.approval-page .approval-preview-approve {
    background: #35a653;
}

.approval-page .approval-benefit-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.approval-page .approval-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.approval-page .approval-benefit-item {
    align-items: center;
    border-right: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 23px 20px;
}

.approval-page .approval-benefit-item:first-child {
    border-left: 1px solid var(--redesign-line);
}

.approval-page .approval-benefit-item > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 40px;
    font-size: 17px;
    height: 40px;
    justify-content: center;
}

.approval-page .approval-benefit-item strong,
.approval-page .approval-benefit-item small {
    display: block;
}

.approval-page .approval-benefit-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.approval-page .approval-benefit-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.approval-page .approval-queue-section {
    scroll-margin-top: 52px;
}

.approval-page .approval-screenshot-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 18px 40px rgba(16, 42, 67, .13);
    margin: 0 auto;
    max-width: 955px;
    overflow: hidden;
}

.approval-page .approval-screenshot-card img {
    display: block;
    height: auto;
    max-width: 953px;
    width: 100%;
}

.approval-page .approval-screenshot-card figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px 12px 11px;
    text-align: center;
}

.approval-page .approval-queue-detail-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

.approval-page .approval-queue-detail-grid article {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    padding: 24px 24px 23px;
}

.approval-page .approval-queue-detail-grid article > span {
    color: var(--redesign-blue);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    margin-bottom: 11px;
}

.approval-page .approval-queue-detail-grid h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.approval-page .approval-queue-detail-grid p {
    font-size: 13px;
    line-height: 1.62;
    margin: 0;
}

.approval-page .approval-scope-layout,
.approval-page .approval-notification-layout {
    align-items: center;
    display: grid;
    gap: 68px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.approval-page .approval-scope-layout {
    gap: 34px;
    grid-template-columns: 1fr;
}

.approval-page .approval-scope-copy {
    max-width: 880px;
}

.approval-page .approval-scope-copy h2,
.approval-page .approval-notification-copy h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 17px;
}

.approval-page .approval-scope-copy p,
.approval-page .approval-notification-copy p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0 0 15px;
}

.approval-page .approval-notification-list {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 16px 36px rgba(16, 42, 67, .1);
}

.approval-page .approval-scope-screenshot {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 16px 36px rgba(16, 42, 67, .1);
    margin: 0 auto;
    max-width: 915px;
    overflow: hidden;
}

.approval-page .approval-scope-screenshot img {
    display: block;
    height: auto;
    max-width: 913px;
    width: 100%;
}

.approval-page .approval-scope-screenshot figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px 12px 11px;
    text-align: center;
}

.approval-page .approval-decision-flow {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) minmax(0, 1.14fr);
}

.approval-page .approval-decision-start,
.approval-page .approval-decision-review {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    display: flex;
    gap: 15px;
    min-height: 180px;
    padding: 25px 22px;
}

.approval-page .approval-decision-start > span,
.approval-page .approval-decision-review > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 42px;
    font-size: 17px;
    height: 42px;
    justify-content: center;
}

.approval-page .approval-decision-flow article small {
    color: var(--redesign-blue);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.approval-page .approval-decision-flow h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0 8px;
}

.approval-page .approval-decision-flow p {
    font-size: 12px;
    line-height: 1.58;
    margin: 0;
}

.approval-page .approval-decision-arrow {
    color: var(--redesign-blue);
    font-size: 24px;
    text-align: center;
}

.approval-page .approval-decision-branches {
    display: grid;
    gap: 12px;
}

.approval-page .approval-decision-outcome {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-left-width: 4px;
    border-radius: 0 7px 7px 0;
    display: flex;
    gap: 12px;
    padding: 16px 17px;
}

.approval-page .approval-decision-outcome > .fa {
    border-radius: 50%;
    color: #fff;
    flex: 0 0 27px;
    font-size: 12px;
    line-height: 27px;
    text-align: center;
}

.approval-page .approval-decision-outcome strong {
    color: var(--redesign-navy);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin-bottom: 4px;
}

.approval-page .approval-decision-flow .approval-decision-outcome small {
    color: var(--redesign-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
}

.approval-page .approval-decision-approved {
    border-left-color: #35a653;
}

.approval-page .approval-decision-approved > .fa {
    background: #35a653;
}

.approval-page .approval-decision-rejected {
    border-left-color: #d9534f;
}

.approval-page .approval-decision-rejected > .fa {
    background: #d9534f;
}

.approval-page .approval-text-link,
.approval-page .approval-text-link:visited {
    color: var(--redesign-blue);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    text-decoration: none;
}

.approval-page .approval-text-link:hover {
    color: #0d628d;
    text-decoration: none;
}

.approval-page .approval-notification-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}

.approval-page .approval-notification-list > div {
    border-bottom: 1px solid var(--redesign-line);
    min-width: 0;
    padding: 22px 20px 20px 43px;
    position: relative;
}

.approval-page .approval-notification-list > div:nth-child(odd) {
    border-right: 1px solid var(--redesign-line);
}

.approval-page .approval-notification-list > div:nth-child(n+3) {
    border-bottom: 0;
}

.approval-page .approval-status-dot {
    border-radius: 50%;
    height: 10px;
    left: 21px;
    position: absolute;
    top: 27px;
    width: 10px;
}

.approval-page .approval-status-submitted { background: #f2a71b; }
.approval-page .approval-status-approved { background: #35a653; }
.approval-page .approval-status-rejected { background: #d9534f; }
.approval-page .approval-status-reopened { background: var(--redesign-blue); }

.approval-page .approval-notification-list strong,
.approval-page .approval-notification-list small {
    display: block;
}

.approval-page .approval-notification-list strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}

.approval-page .approval-notification-list small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 4px;
}

.approval-page .approval-cta .redesign-actions {
    justify-content: center;
}

.approval-page .approval-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .approval-page .approval-hero-layout {
        gap: 34px;
        grid-template-columns: 1fr;
    }

    .approval-page .approval-hero-copy {
        max-width: 800px;
    }

    .approval-page .approval-hero-preview {
        max-width: 680px;
    }

    .approval-page .approval-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approval-page .approval-benefit-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .approval-page .approval-benefit-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .approval-page .approval-scope-layout,
    .approval-page .approval-notification-layout {
        gap: 42px;
    }

    .approval-page .approval-decision-flow {
        grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    }

    .approval-page .approval-decision-branches {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .approval-page .approval-hero {
        padding: 57px 0 55px;
    }

    .approval-page .approval-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .approval-page .approval-hero-copy > p:not(.approval-hero-note) {
        font-size: 17px;
    }

    .approval-page .approval-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approval-page .approval-preview-grid > div:nth-child(2) {
        border-right: 0;
    }

    .approval-page .approval-preview-grid > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .approval-page .approval-queue-detail-grid,
    .approval-page .approval-scope-layout,
    .approval-page .approval-notification-layout {
        grid-template-columns: 1fr;
    }

    .approval-page .approval-decision-flow {
        grid-template-columns: 1fr;
    }

    .approval-page .approval-decision-start,
    .approval-page .approval-decision-review {
        min-height: 0;
    }

    .approval-page .approval-decision-arrow {
        transform: rotate(90deg);
    }

    .approval-page .approval-decision-branches {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .approval-page .approval-hero h1 {
        font-size: 33px;
    }

    .approval-page .approval-benefit-grid {
        grid-template-columns: 1fr;
    }

    .approval-page .approval-benefit-item,
    .approval-page .approval-benefit-item:first-child,
    .approval-page .approval-benefit-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .approval-page .approval-benefit-item:last-child {
        border-bottom: 0;
    }

    .approval-page .approval-preview-actions {
        justify-content: stretch;
    }

    .approval-page .approval-preview-actions > span {
        flex: 1;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
    }

    .approval-page .approval-scope-copy h2,
    .approval-page .approval-notification-copy h2 {
        font-size: 29px;
    }

    .approval-page .approval-decision-branches,
    .approval-page .approval-notification-list {
        grid-template-columns: 1fr;
    }

    .approval-page .approval-notification-list > div,
    .approval-page .approval-notification-list > div:nth-child(odd),
    .approval-page .approval-notification-list > div:nth-child(n+3) {
        border-bottom: 1px solid var(--redesign-line);
        border-right: 0;
    }

    .approval-page .approval-notification-list > div:last-child {
        border-bottom: 0;
    }
}

/* Invoicing detail page */

.invoicing-page .invoicing-hero {
    background:
        radial-gradient(circle at 88% 14%, rgba(36, 172, 222, .31), transparent 30%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 60%, #0d5676 100%);
    color: #fff;
    overflow: hidden;
    padding: 75px 0 70px;
    position: relative;
}

.invoicing-page .invoicing-hero:after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: '';
    height: 390px;
    position: absolute;
    right: -135px;
    top: -190px;
    width: 390px;
}

.invoicing-page .invoicing-hero-layout {
    position: relative;
    z-index: 1;
}

.invoicing-page .invoicing-hero-copy {
    max-width: 820px;
}

.invoicing-page .invoicing-hero .redesign-kicker {
    color: #73d1ee;
}

.invoicing-page .invoicing-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.invoicing-page .invoicing-hero-copy > p:not(.invoicing-hero-note) {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 27px;
}

.invoicing-page .invoicing-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin: 17px 0 0;
}

.invoicing-page .invoicing-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.invoicing-page .invoicing-capability-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.invoicing-page .invoicing-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.invoicing-page .invoicing-capability-item {
    align-items: center;
    border-right: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 23px 20px;
}

.invoicing-page .invoicing-capability-item:first-child {
    border-left: 1px solid var(--redesign-line);
}

.invoicing-page .invoicing-capability-item > span,
.invoicing-page .invoicing-rate-grid article > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    justify-content: center;
}

.invoicing-page .invoicing-capability-item > span {
    flex: 0 0 40px;
    font-size: 17px;
    height: 40px;
}

.invoicing-page .invoicing-capability-item strong,
.invoicing-page .invoicing-capability-item small {
    display: block;
}

.invoicing-page .invoicing-capability-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.invoicing-page .invoicing-capability-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.invoicing-page .invoicing-selection-section {
    scroll-margin-top: 52px;
}

.invoicing-page .invoicing-selection-layout,
.invoicing-page .invoicing-output-layout {
    align-items: center;
    display: grid;
    gap: 68px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoicing-page .invoicing-selection-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
}

.invoicing-page .invoicing-selection-copy h2,
.invoicing-page .invoicing-output-copy h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.24;
    margin: 0 0 17px;
}

.invoicing-page .invoicing-selection-copy > p,
.invoicing-page .invoicing-output-copy > p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0 0 19px;
}

.invoicing-page .invoicing-selection-steps {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.invoicing-page .invoicing-selection-steps article {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    padding: 17px 18px;
}

.invoicing-page .invoicing-selection-steps article > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 38px;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    letter-spacing: .7px;
}

.invoicing-page .invoicing-selection-steps h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}

.invoicing-page .invoicing-selection-steps p {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.invoicing-page .invoicing-selection-copy .invoicing-selection-note {
    background: #f0f9fd;
    border-left: 3px solid var(--redesign-bright-blue);
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.58;
    margin: 18px 0 0;
    padding: 13px 15px;
}

.invoicing-page .invoicing-selection-note .fa {
    color: var(--redesign-blue);
    margin-right: 5px;
}

.invoicing-page .invoicing-selection-frame,
.invoicing-page .invoicing-output-frame {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 18px 40px rgba(16, 42, 67, .13);
    margin: 0 auto;
    overflow: hidden;
}

.invoicing-page .invoicing-selection-frame {
    max-width: 508px;
}

.invoicing-page .invoicing-selection-frame img {
    display: block;
    height: auto;
    max-width: 506px;
    width: 100%;
}

.invoicing-page .invoicing-selection-frame figcaption,
.invoicing-page .invoicing-output-frame figcaption {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px 12px 11px;
    text-align: center;
}

.invoicing-page .invoicing-rate-grid,
.invoicing-page .invoicing-status-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoicing-page .invoicing-rate-grid article,
.invoicing-page .invoicing-status-grid article {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    min-width: 0;
    padding: 27px 25px 25px;
}

.invoicing-page .invoicing-rate-grid article > span {
    font-size: 18px;
    height: 44px;
    margin-bottom: 15px;
    width: 44px;
}

.invoicing-page .invoicing-rate-grid small,
.invoicing-page .invoicing-status-grid small {
    color: var(--redesign-blue);
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.invoicing-page .invoicing-rate-grid h3,
.invoicing-page .invoicing-status-grid h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 9px;
}

.invoicing-page .invoicing-rate-grid p,
.invoicing-page .invoicing-status-grid p {
    font-size: 13px;
    line-height: 1.62;
    margin: 0;
}

.invoicing-page .invoicing-output-layout {
    gap: 76px;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.invoicing-page .invoicing-output-frame {
    max-width: 522px;
}

.invoicing-page .invoicing-output-frame a {
    display: block;
    max-height: 560px;
    overflow: hidden;
}

.invoicing-page .invoicing-output-frame a:focus {
    outline: 3px solid var(--redesign-bright-blue);
    outline-offset: -3px;
}

.invoicing-page .invoicing-output-frame img {
    display: block;
    height: auto;
    max-width: 520px;
    width: 100%;
}

.invoicing-page .invoicing-check-list {
    list-style: none;
    margin: 23px 0 16px;
    padding: 0;
}

.invoicing-page .invoicing-check-list li {
    align-items: flex-start;
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.invoicing-page .invoicing-check-list .fa {
    color: #35a653;
    margin-top: 4px;
}

.invoicing-page .invoicing-text-link,
.invoicing-page .invoicing-related-links a,
.invoicing-page .invoicing-text-link:visited,
.invoicing-page .invoicing-related-links a:visited {
    color: var(--redesign-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.invoicing-page .invoicing-text-link:hover,
.invoicing-page .invoicing-related-links a:hover {
    color: #0d628d;
    text-decoration: none;
}

.invoicing-page .invoicing-status-grid article {
    border-top-width: 4px;
}

.invoicing-page .invoicing-status-grid article > span {
    color: var(--redesign-muted);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.invoicing-page .invoicing-status-draft {
    border-top-color: #f2a71b !important;
}

.invoicing-page .invoicing-status-sent {
    border-top-color: var(--redesign-blue) !important;
}

.invoicing-page .invoicing-status-paid {
    border-top-color: #35a653 !important;
}

.invoicing-page .invoicing-related-links {
    align-items: center;
    background: #eaf7fc;
    border: 1px solid #cfe8f3;
    border-radius: 8px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-top: 28px;
    padding: 23px 25px;
}

.invoicing-page .invoicing-related-links strong,
.invoicing-page .invoicing-related-links small {
    display: block;
}

.invoicing-page .invoicing-related-links strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.invoicing-page .invoicing-related-links small {
    color: var(--redesign-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
}

.invoicing-page .invoicing-related-links > div:last-child {
    display: flex;
    flex: 0 0 auto;
    gap: 22px;
}

.invoicing-page .invoicing-cta .redesign-actions {
    justify-content: center;
}

.invoicing-page .invoicing-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .invoicing-page .invoicing-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoicing-page .invoicing-capability-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .invoicing-page .invoicing-capability-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .invoicing-page .invoicing-selection-layout,
    .invoicing-page .invoicing-output-layout {
        gap: 45px;
        grid-template-columns: 1fr;
    }

    .invoicing-page .invoicing-selection-frame,
    .invoicing-page .invoicing-output-frame {
        width: 100%;
    }

    .invoicing-page .invoicing-output-copy {
        max-width: 760px;
    }

    .invoicing-page .invoicing-related-links {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .invoicing-page .invoicing-hero {
        padding: 57px 0 55px;
    }

    .invoicing-page .invoicing-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .invoicing-page .invoicing-hero-copy > p:not(.invoicing-hero-note) {
        font-size: 17px;
    }

    .invoicing-page .invoicing-rate-grid,
    .invoicing-page .invoicing-status-grid {
        grid-template-columns: 1fr;
    }

    .invoicing-page .invoicing-output-copy {
        order: 1;
    }

    .invoicing-page .invoicing-output-frame {
        order: 2;
    }

    .invoicing-page .invoicing-related-links > div:last-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }
}

@media (max-width: 480px) {
    .invoicing-page .invoicing-hero h1 {
        font-size: 33px;
    }

    .invoicing-page .invoicing-capability-grid {
        grid-template-columns: 1fr;
    }

    .invoicing-page .invoicing-capability-item,
    .invoicing-page .invoicing-capability-item:first-child,
    .invoicing-page .invoicing-capability-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .invoicing-page .invoicing-capability-item:last-child {
        border-bottom: 0;
    }

    .invoicing-page .invoicing-selection-copy h2,
    .invoicing-page .invoicing-output-copy h2 {
        font-size: 29px;
    }

    .invoicing-page .invoicing-selection-steps article {
        gap: 12px;
        padding: 15px;
    }

    .invoicing-page .invoicing-related-links {
        padding: 20px;
    }
}

/* ================================================================
   PTO tracking and accrual detail page
   ================================================================ */

.pto-page .pto-hero {
    background:
        radial-gradient(circle at 88% 15%, rgba(36, 172, 222, .31), transparent 30%),
        linear-gradient(135deg, #0d263b 0%, #123d5c 60%, #0d5676 100%);
    color: #fff;
    overflow: hidden;
    padding: 75px 0 70px;
    position: relative;
}

.pto-page .pto-hero:after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: '';
    height: 390px;
    position: absolute;
    right: -135px;
    top: -190px;
    width: 390px;
}

.pto-page .pto-hero-layout {
    position: relative;
    z-index: 1;
}

.pto-page .pto-hero-copy {
    max-width: 805px;
}

.pto-page .pto-hero .redesign-kicker {
    color: #73d1ee;
}

.pto-page .pto-hero h1 {
    color: #fff;
    font-size: 49px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.1;
    margin: 0 0 20px;
}

.pto-page .pto-hero-copy > p:not(.pto-hero-note) {
    color: #d8ebf5;
    font-size: 18px;
    line-height: 1.68;
    margin: 0 0 27px;
    max-width: 760px;
}

.pto-page .pto-hero-note {
    color: #bfe2ef;
    font-size: 13px;
    margin: 17px 0 0;
}

.pto-page .pto-hero-note .fa {
    color: #69d49a;
    margin-right: 5px;
}

.pto-page .pto-capability-strip {
    background: #fff;
    border-bottom: 1px solid var(--redesign-line);
}

.pto-page .pto-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pto-page .pto-capability-item {
    align-items: center;
    border-right: 1px solid var(--redesign-line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 23px 20px;
}

.pto-page .pto-capability-item:first-child {
    border-left: 1px solid var(--redesign-line);
}

.pto-page .pto-capability-item > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 40px;
    font-size: 17px;
    height: 40px;
    justify-content: center;
}

.pto-page .pto-capability-item strong,
.pto-page .pto-capability-item small {
    display: block;
}

.pto-page .pto-capability-item strong {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

.pto-page .pto-capability-item small {
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
}

.pto-page .pto-global-section,
.pto-page .pto-user-section {
    scroll-margin-top: 52px;
}

.pto-page .pto-global-frame,
.pto-page .pto-user-frame {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    box-shadow: 0 18px 40px rgba(16, 42, 67, .13);
    overflow: hidden;
}

.pto-page .pto-global-frame {
    margin: 0 auto;
    max-width: 1046px;
}

.pto-page .pto-global-frame img,
.pto-page .pto-user-frame img {
    display: block;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    width: 100%;
}

.pto-page .pto-global-frame img {
    max-width: 1044px;
}

.pto-page .pto-global-frame figcaption,
.pto-page .pto-user-frame figcaption {
    border-top: 1px solid var(--redesign-line);
    color: var(--redesign-muted);
    font-size: 11px;
    line-height: 1.5;
    padding: 10px 13px 11px;
    text-align: center;
}

.pto-page .pto-global-detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
}

.pto-page .pto-global-detail-grid article {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 8px;
    min-width: 0;
    padding: 23px 21px 22px;
}

.pto-page .pto-global-detail-grid article > span {
    color: var(--redesign-blue);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    margin-bottom: 10px;
}

.pto-page .pto-global-detail-grid h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.pto-page .pto-global-detail-grid p {
    font-size: 12px;
    line-height: 1.62;
    margin: 0;
}

.pto-page .pto-help-link {
    color: var(--redesign-muted);
    font-size: 13px;
    margin: 24px 0 0;
    text-align: center;
}

.pto-page .pto-help-link .fa {
    color: var(--redesign-blue);
    margin-right: 5px;
}

.pto-page .pto-help-link a,
.pto-page .pto-help-link a:visited {
    color: var(--redesign-blue);
    font-weight: 700;
}

.pto-page .pto-help-link a:hover {
    color: #0d628d;
    text-decoration: none;
}

.pto-page .pto-user-workflow {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1130px;
}

.pto-page .pto-user-step {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-radius: 9px;
    min-width: 0;
    padding: 27px 24px 24px;
}

.pto-page .pto-step-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}

.pto-page .pto-step-heading > span {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 43px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 43px;
    justify-content: center;
}

.pto-page .pto-step-heading small {
    color: var(--redesign-blue);
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .85px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.pto-page .pto-step-heading h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 0;
}

.pto-page .pto-user-step > p {
    font-size: 13px;
    line-height: 1.65;
    margin: 15px 0 20px;
    min-height: 64px;
}

.pto-page .pto-user-frame {
    box-shadow: 0 12px 28px rgba(16, 42, 67, .1);
    margin: 0 auto;
}

.pto-page .pto-user-schedule-frame {
    max-width: 540px;
}

.pto-page .pto-user-schedule-frame img {
    max-width: 538px;
}

.pto-page .pto-user-calculation-frame {
    max-width: 531px;
}

.pto-page .pto-user-calculation-frame img {
    max-width: 529px;
}

.pto-page .pto-policy-note {
    align-items: flex-start;
    background: #eaf7fc;
    border: 1px solid #cfe8f3;
    border-left: 4px solid var(--redesign-blue);
    border-radius: 0 8px 8px 0;
    display: flex;
    gap: 15px;
    margin: 28px auto 0;
    max-width: 900px;
    padding: 20px 22px;
}

.pto-page .pto-policy-note > span {
    color: var(--redesign-blue);
    flex: 0 0 auto;
    font-size: 20px;
}

.pto-page .pto-policy-note strong {
    color: var(--redesign-navy);
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    margin-bottom: 5px;
}

.pto-page .pto-policy-note p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.pto-page .pto-balance-layout {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
}

.pto-page .pto-balance-copy h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 17px;
}

.pto-page .pto-balance-copy > p {
    font-size: 15px;
    line-height: 1.72;
    margin: 0;
}

.pto-page .pto-balance-list {
    list-style: none;
    margin: 23px 0 0;
    padding: 0;
}

.pto-page .pto-balance-list li {
    align-items: flex-start;
    color: var(--redesign-muted);
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 1.58;
    margin-top: 10px;
}

.pto-page .pto-balance-list .fa {
    color: #35a653;
    flex: 0 0 auto;
    margin-top: 4px;
}

.pto-page .pto-balance-list strong {
    color: var(--redesign-ink);
}

.pto-page .pto-balance-card {
    background: #fff;
    border: 1px solid var(--redesign-line);
    border-top: 4px solid var(--redesign-blue);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(16, 42, 67, .11);
    padding: 26px;
}

.pto-page .pto-balance-card > small {
    color: var(--redesign-blue);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 17px;
    text-transform: uppercase;
}

.pto-page .pto-formula-row {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.pto-page .pto-formula-row span {
    color: var(--redesign-navy);
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.pto-page .pto-formula-row strong {
    color: var(--redesign-muted);
    font-size: 11px;
    font-weight: 400;
    text-align: right;
}

.pto-page .pto-formula-operator {
    color: var(--redesign-blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin: 7px 0 7px 9px;
}

.pto-page .pto-formula-total {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-top: 1px solid #cfe8f3;
    color: var(--redesign-navy);
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    justify-content: space-between;
    margin: 20px -26px -26px;
    padding: 20px 26px;
}

.pto-page .pto-formula-total .fa {
    color: var(--redesign-blue);
    font-size: 21px;
}

.pto-page .pto-cta .redesign-actions {
    justify-content: center;
}

.pto-page .pto-cta h2 {
    line-height: 1.2;
}

@media (max-width: 991px) {
    .pto-page .pto-capability-grid,
    .pto-page .pto-global-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pto-page .pto-capability-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--redesign-line);
    }

    .pto-page .pto-capability-item:nth-child(3) {
        border-left: 1px solid var(--redesign-line);
    }

    .pto-page .pto-user-workflow {
        grid-template-columns: 1fr;
    }

    .pto-page .pto-balance-layout {
        gap: 42px;
        grid-template-columns: 1fr;
    }

    .pto-page .pto-balance-card {
        max-width: 650px;
    }
}

@media (max-width: 767px) {
    .pto-page .pto-hero {
        padding: 57px 0 55px;
    }

    .pto-page .pto-hero h1 {
        font-size: 38px;
        letter-spacing: -.4px;
    }

    .pto-page .pto-hero-copy > p:not(.pto-hero-note) {
        font-size: 17px;
    }

    .pto-page .pto-global-detail-grid {
        grid-template-columns: 1fr;
    }

    .pto-page .pto-global-detail-grid article {
        padding: 21px;
    }

    .pto-page .pto-user-step > p {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .pto-page .pto-hero h1 {
        font-size: 33px;
    }

    .pto-page .pto-capability-grid {
        grid-template-columns: 1fr;
    }

    .pto-page .pto-capability-item,
    .pto-page .pto-capability-item:first-child,
    .pto-page .pto-capability-item:nth-child(3) {
        border-bottom: 1px solid var(--redesign-line);
        border-left: 1px solid var(--redesign-line);
        border-right: 1px solid var(--redesign-line);
    }

    .pto-page .pto-capability-item:last-child {
        border-bottom: 0;
    }

    .pto-page .pto-user-step {
        padding: 22px 16px 16px;
    }

    .pto-page .pto-step-heading {
        gap: 11px;
    }

    .pto-page .pto-policy-note {
        display: block;
        padding: 18px;
    }

    .pto-page .pto-policy-note > span {
        display: block;
        margin-bottom: 10px;
    }

    .pto-page .pto-balance-copy h2 {
        font-size: 29px;
    }

    .pto-page .pto-balance-card {
        padding: 22px 18px;
    }

    .pto-page .pto-formula-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .pto-page .pto-formula-row strong {
        text-align: left;
    }

    .pto-page .pto-formula-total {
        margin: 18px -18px -22px;
        padding: 18px;
    }
}

/* ================================================================
   Release schedule and history page
   ================================================================ */

.release-page .release-intro {
    background:
        linear-gradient(90deg, rgba(36, 172, 222, .04) 1px, transparent 1px),
        var(--redesign-soft);
    background-size: 48px 48px;
    border-bottom: 1px solid var(--redesign-line);
    padding: 50px 0 44px;
}

.release-page .release-intro .redesign-kicker {
    margin-bottom: 10px;
}

.release-page .release-intro h1 {
    color: var(--redesign-navy);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.18;
    margin: 0 0 12px;
}

.release-page .release-intro p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    max-width: 760px;
}

.release-page .release-maintenance {
    background: #fff;
    padding: 28px 0 0;
}

.release-page .release-maintenance-note {
    align-items: flex-start;
    background: #f7fbfd;
    border: 1px solid var(--redesign-line);
    border-left: 4px solid var(--redesign-blue);
    border-radius: 0 7px 7px 0;
    display: flex;
    gap: 15px;
    padding: 19px 21px;
}

.release-page .release-maintenance-icon {
    align-items: center;
    background: var(--redesign-pale-blue);
    border-radius: 50%;
    color: var(--redesign-blue);
    display: flex;
    flex: 0 0 38px;
    font-size: 16px;
    height: 38px;
    justify-content: center;
}

.release-page .release-maintenance-note h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}

.release-page .release-maintenance-note p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}

.release-page .release-maintenance-note strong {
    color: var(--redesign-ink);
}

.release-page .release-history-section {
    padding: 52px 0 80px;
}

.release-page .release-history-container {
    max-width: 1080px;
}

.release-page .release-history-heading {
    align-items: flex-end;
    border-bottom: 2px solid var(--redesign-navy);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 18px;
}

.release-page .release-history-heading h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 5px;
}

.release-page .release-history-heading p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.release-page .release-rss-link,
.release-page .release-rss-link:visited {
    align-items: center;
    border: 1px solid var(--redesign-line);
    border-radius: 5px;
    color: var(--redesign-blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    padding: 9px 12px;
    text-decoration: none;
}

.release-page .release-rss-link:hover,
.release-page .release-rss-link:focus {
    background: var(--redesign-pale-blue);
    border-color: #b9d9e8;
    color: #0d628d;
    text-decoration: none;
}

.release-page .release-rss-link .fa {
    color: #e77a18;
    font-size: 14px;
}

.release-page .release-list {
    margin-top: 0;
}

.release-page .release-year {
    border-bottom: 1px solid var(--redesign-line);
    color: var(--redesign-blue);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.1px;
    margin: 36px 0 0;
    padding: 0 0 10px;
}

.release-page .release-year:first-child {
    margin-top: 28px;
}

.release-page .release-entry {
    display: grid;
    gap: 28px;
    grid-template-columns: 118px minmax(0, 1fr);
    padding: 21px 0 22px;
}

.release-page .release-entry + .release-entry {
    border-top: 1px solid #e7eef2;
}

.release-page .release-entry-date {
    color: var(--redesign-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    padding-top: 3px;
    white-space: nowrap;
}

.release-page .release-entry-body {
    min-width: 0;
}

.release-page .release-entry-body h4 {
    color: var(--redesign-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.42;
    margin: 0 0 6px;
}

.release-page .release-entry-content {
    color: var(--redesign-muted);
    font-size: 13px;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.release-page .release-entry-content p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 9px;
}

.release-page .release-entry-content p:last-child {
    margin-bottom: 0;
}

.release-page .release-entry-content ul,
.release-page .release-entry-content ol {
    margin: 8px 0 0;
    padding-left: 22px;
}

.release-page .release-entry-content li + li {
    margin-top: 4px;
}

.release-page .release-entry-content a,
.release-page .release-entry-content a:visited {
    color: var(--redesign-blue);
}

.release-page .release-entry-content a:hover,
.release-page .release-entry-content a:focus {
    color: #0d628d;
}

.release-page .release-entry-content img {
    height: auto;
    max-width: 100%;
}

@media (max-width: 767px) {
    .release-page .release-intro {
        padding: 40px 0 36px;
    }

    .release-page .release-intro h1 {
        font-size: 33px;
    }

    .release-page .release-maintenance-note {
        padding: 17px;
    }

    .release-page .release-history-section {
        padding-bottom: 62px;
        padding-top: 44px;
    }

    .release-page .release-entry {
        gap: 5px;
        grid-template-columns: 1fr;
        padding: 18px 0 19px;
    }

    .release-page .release-entry-date {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .release-page .release-history-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .release-page .release-maintenance-note {
        display: block;
    }

    .release-page .release-maintenance-icon {
        margin-bottom: 11px;
    }
}