:root {
    --app-border-radius : 8px;
}

.readiness-page {
    background : white;
}

.readiness-check-app,
.readiness-noscript,
.readiness-error {
    max-width     : var(--var-content-width);
    margin-inline : auto;
}

.readiness-loading,
.readiness-error,
.readiness-noscript {
    padding          : var(--var-panel-padding);
    background-color : var(--color-grey-light-bright);
    border           : 1px solid var(--color-grey-light);
    border-radius    : 8px;
}

.readiness-hero {
    display       : block;
    margin-bottom : 4rem;
}

.readiness-hero-copy {
    padding       : 4rem;
    max-width     : 65ch;
    margin-inline : auto;
    /*background-color : var(--color-grey-light-bright);*/
    /*color            : white;*/
    /*border-radius    : var(--var-panel-border-radius);*/
}

.readiness-hero-copy h1 {
    max-width             : 12ch;
    margin-top            : 2rem;
    margin-bottom         : 2rem;
    color                 : var(--color-itp-blue);
    font                  : var(--font-h1);
    font-feature-settings : var(--font-features);
}

.readiness-hero-copy p {
    margin-top  : 4rem;
    line-height : 1.75;
    /*max-width   : none;*/
    /*line-height : 1.75;*/
    /*font-size   : 1.6rem;*/
}

.readiness-subtitle {
    color       : var(--color-grey-dark-dim);
    /*font                  : var(--font-h3);*/
    /*font-feature-settings : var(--font-features);*/
    line-height : 1.35;
}

.readiness-kicker {
    margin-bottom         : 1rem;
    color                 : var(--color-grey-dark-bright);
    /*color                 : var(--color-blue-light);*/
    font                  : var(--font-mono);
    font-size             : 1.3rem;
    font-weight           : 700;
    text-transform        : uppercase;
    letter-spacing        : 0;
    font-feature-settings : var(--font-features);
}

.readiness-body {
    color     : var(--color-grey-black);
    font-size : 1.6rem;
}

.readiness-intro-list {
    color        : var(--color-grey-black);
    display      : grid;
    gap          : 1rem;
    margin-block : 4rem;
    padding-left : 0;
    list-style   : none;
    font-size    : 1.6rem;

}

.readiness-intro-list li {
    position     : relative;
    padding-left : 4rem;
    /*line-height  : 1.6;*/
}

.readiness-intro-list li::before {
    content          : "";
    position         : absolute;
    left             : 1.2rem;
    top              : 0.4em;
    width            : 0.8rem;
    height           : 0.8rem;
    border-radius    : 50%;
    background-color : var(--color-itp-blue);
}

.readiness-note {
    margin-top       : 2rem;
    font             : var(--font-mono);
    font-size        : 1.4rem;
    color            : var(--color-grey-black);
    background-color : var(--color-grey-light-bright);
    border           : 1px solid var(--color-itp-blue);
    border-radius    : var(--app-border-radius);
    padding-inline   : 2rem;
    padding-block    : 1.2rem;
}

.readiness-primary-button,
.readiness-secondary-button {
    height                : 64px;
    border-radius         : 999px;
    padding-inline        : 4rem;
    border                : 0;
    font                  : var(--font-button);
    font-feature-settings : var(--font-features);
}

.readiness-primary-button {
    margin-top       : 4rem;
    color            : black;
    background-color : var(--color-itp-green);
}

.readiness-secondary-button {
    color            : var(--color-grey-dark);
    background-color : var(--color-grey-light);
}

.readiness-primary-button:hover,
.readiness-secondary-button:not(:disabled):hover {
    cursor : pointer;
}

/*.readiness-primary-button:focus-visible,*/
/*.readiness-secondary-button:focus-visible,*/
/*.readiness-answer input:focus-visible + span,*/
/*.readiness-demo-close-btn:focus-visible,*/
/*.readiness-demo-form input:focus-visible,*/
/*.readiness-demo-form textarea:focus-visible {*/
/*    outline        : 3px solid var(--color-itp-green);*/
/*    outline-offset : 3px;*/
/*}*/

.readiness-secondary-button:disabled {
    cursor  : not-allowed;
    opacity : 0.65;
}

.readiness-assessment {
    scroll-margin-top : calc(var(--var-navbar-height) + var(--var-panel-gap) * 2);
    margin-bottom     : var(--var-panel-gap);
}

.readiness-assessment-header {
    padding       : 1rem;
    color         : var(--color-grey-black);
    margin-bottom : var(--var-panel-gap);
}

.readiness-assessment-header h2,
.readiness-results h2,
.readiness-risk-areas h2,
.readiness-panorama-help h2,
.readiness-cta h2 {
    font                  : var(--font-h2);
    font-feature-settings : var(--font-features);
}

.readiness-layout {
    /*width: fit-content;*/
    /*margin-inline: auto;*/
    display               : grid;
    grid-template-columns : minmax(0, 1fr) minmax(280px, 380px);
    gap                   : var(--var-panel-gap);
    align-items           : start;

    /*p {*/
    /*    max-width : none;*/
    /*}*/
}

.readiness-form {
    display : grid;
    gap     : var(--var-panel-gap);
}

.readiness-category {
    display          : grid;
    /*gap              : 2rem;*/
    /*padding          : 2rem;*/
    background-color : var(--color-grey-light-bright);
    border           : 1px solid var(--color-grey-light);
    border-radius    : var(--app-border-radius);
}

.readiness-category-header {
    padding       : 3rem;
    display       : grid;
    gap           : 1rem;
    /*padding-bottom : 1rem;*/
    border-bottom : 1px solid var(--color-grey-light);
    margin-bottom : 2rem;

    h3 {
        color       : var(--color-itp-blue);
        font-weight : 700;
        /*font                  : var(--font-h3);*/
        /*font-feature-settings : var(--font-features);*/
    }

    p {
        font-size   : 1.6rem;
        line-height : 1.75;
        color       : var(--color-grey-black);

    }
}

.readiness-question {
    margin-inline    : 2rem;
    margin-bottom    : 2rem;
    display          : grid;
    gap              : 1.5rem;
    padding          : 2rem;
    border           : 1px solid var(--color-grey-light);
    border-radius    : 8px;
    background-color : white;

    .readiness-question-number {
        color                 : var(--color-itp-blue);
        font                  : var(--font-mono);
        font-size             : 1.2rem;
        text-transform        : uppercase;
        letter-spacing        : 0;
        font-feature-settings : var(--font-features);
    }

    .readiness-question-legend {
        color                 : var(--color-grey-dark);
        font                  : var(--font-body);
        font-feature-settings : var(--font-features);
        font-size             : 1.8rem;
        font-weight           : 500;
        line-height           : 1.75;
        margin-bottom         : 1rem;
    }
}

.readiness-answer-list {
    display   : grid;
    gap       : 1rem;
    color     : var(--color-grey-black);
    font-size : 1.6rem;
}

.readiness-answer {
    /*height                : 48px;*/
    align-items           : center;
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : 1rem;
    padding-inline        : 1.6rem;
    padding-block         : 1.2rem;
    border                : 1px solid var(--color-grey-light);
    border-radius         : 8px;
    /*background-color      : var(--color-grey-light-bright);*/
}

.readiness-answer:hover {
    cursor       : pointer;
    border-color : var(--color-blue-light);
}

.readiness-answer input {
    width        : 1.8rem;
    height       : 1.8rem;
    accent-color : var(--color-itp-blue);
}

.readiness-answer span {
    line-height : 1.45;
}

.readiness-answer:has(input:checked) {
    border-color     : var(--color-itp-blue);
    background-color : var(--color-blue-light-bright);
}

.readiness-live-results {
    --top            : calc(var(--var-navbar-height) + var(--var-panel-gap) * 2);

    position         : sticky;
    top              : var(--top);
    height           : min(840px, calc(100dvh - var(--top) - var(--var-panel-gap)));
    display          : flex;
    flex-direction   : column;
    min-height       : 0;
    border           : 1px solid var(--color-grey-light);
    border-radius    : 8px;
    background-color : white;
    box-shadow       : 0 12px 32px -28px rgba(0, 0, 0, 0.45);

    .readiness-progress {
        padding       : 2rem;
        display       : grid;
        gap           : 1rem;
        margin-bottom : 1rem;
        border-bottom : 1px solid var(--color-grey-light);

        span {
            color       : var(--color-grey-dark-dim);
            font-weight : 700;
        }
    }

    .readiness-progress-track {
        height           : 1rem;
        overflow         : hidden;
        border-radius    : 999px;
        background-color : var(--color-grey-light);
    }

    .readiness-progress-bar {
        height           : 100%;
        width            : 0;
        border-radius    : inherit;
        background-color : var(--color-itp-blue);
    }
}

.readiness-score-bar-track {
    height           : 1rem;
    overflow         : hidden;
    border-radius    : 999px;
    background-color : var(--color-grey-light);
}

.readiness-score-bar-fill {
    height           : 100%;
    width            : 0;
    border-radius    : inherit;
    background-color : var(--color-itp-blue);
}

#readiness-live-results-inner {
    padding        : 2rem;
    display        : flex;
    flex           : 1;
    flex-direction : column;
    min-height     : 0;
}

.readiness-score-summary {
    display     : flex;
    align-items : baseline;
    gap         : 0.5rem;
    color       : var(--color-itp-blue);

    span {
        font-size   : 8rem;
        font-weight : 800;
        line-height : 0.9;
    }

    strong {
        font-weight : 500;
    }
}

.readiness-score-level {
    margin-top            : 1rem;
    font                  : var(--font-h3);
    font-feature-settings : var(--font-features);
    color                 : var(--color-grey-black);
    font-weight           : 800;
}

.readiness-score-note {
    padding-inline   : 1.2rem;
    padding-block    : 1rem;
    background-color : var(--color-grey-light-bright);
    border           : 1px solid var(--color-itp-blue);
    border-radius    : 4px;
    margin-top       : 1rem;
    color            : var(--color-grey-black);
    font             : var(--font-mono);
    font-size        : 1.2rem;
    line-height      : 1.75;
}

.readiness-mini-bars {
    display         : flex;
    flex            : 1;
    flex-direction  : column;
    justify-content : flex-end;
    /*display    : grid;*/
    gap             : 3rem;
    margin-top      : 4rem;
    margin-bottom   : 1rem;
}

.readiness-score-bar {
    display : grid;
    gap     : 0.8rem;

    small {
        font-size : 1.4rem;
    }
}

.readiness-score-bar-label {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) auto;
    gap                   : 1rem;
    align-items           : baseline;
    font-size             : 1.6rem;
}

.readiness-score-bar-label span {
    color       : var(--color-grey-black);
    font-weight : 600;
}

.readiness-score-bar small {
    color       : var(--color-grey-dark);
    line-height : 1.35;

}

.readiness-results {
    display      : grid;
    gap          : var(--var-panel-gap);
    margin-block : 4rem 8rem;
}

.readiness-results:empty {
    display : none;
}

.readiness-results-grid {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) minmax(280px, 0.75fr);
    gap                   : var(--var-panel-gap);
}

.readiness-result-main,
.readiness-breakdown,
.readiness-risk-areas,
.readiness-panorama-help,
.readiness-cta {
    padding       : 4rem;
    border-radius : 8px;
}

.readiness-breakdown,
.readiness-risk-areas,
.readiness-panorama-help,
.readiness-cta {
    border           : 1px solid var(--color-grey-light);
    background-color : var(--color-grey-light-bright);
}

.readiness-breakdown {
    display : grid;
    gap     : 2rem;

    h2 {
        color : var(--color-grey-black);
    }
}

.readiness-result-main {
    display          : flex;
    gap              : 2rem;
    flex-direction   : column;
    justify-content  : space-between;
    background-color : var(--color-grey-black);
    color            : white;

    .readiness-kicker {
        color  : var(--color-blue-light);
        margin : 0;
    }

    .readiness-final-score {
        margin-top : 2rem;
        color      : var();
        /*font                  : var(--font-h1);*/
        /*font-feature-settings : var(--font-features);*/
    }

    h3 {
        /*margin-top : 1.5rem;*/
        color : var(--color-itp-green);
    }

    .readiness-body {
        color      : var(--color-grey-light-bright);
        margin-top : 2rem;
    }

    .readiness-body:last-of-type {
    }
}

.readiness-result-main p,
.readiness-risk-areas p,
.readiness-panorama-help p,
.readiness-cta p {
    font-size   : 1.6rem;
    line-height : 1.75;
}

.readiness-risk-areas {

    color : var(--color-grey-black);

    h2 {
        color : var(--color-itp-blue);
    }

    p {
        margin-top : 2rem;
        max-width  : none;
    }
}

.readiness-risk-grid {
    display               : grid;
    grid-template-columns : repeat(2, minmax(0, 1fr));
    grid-auto-rows        : auto;
    gap                   : var(--var-panel-gap);
    margin-top            : 2rem;
}

.readiness-risk-item {
    display            : grid;
    grid-row           : span 6;
    grid-template-rows : subgrid;
    row-gap            : 1rem;
    padding            : 2rem;
    border             : 1px solid var(--color-grey-light);
    border-radius      : 8px;
    background-color   : white;

    .risk-item-purpose {
        /*width            : fit-content;*/
        /*justify-self     : center;*/

        /*padding-inline   : 1.2rem;*/
        /*padding-block    : 1rem;*/
        /*background-color : var(--color-grey-light-bright);*/
        /*border           : 1px solid var(--color-itp-blue);*/
        /*border-radius    : 4px;*/
        margin      : 0;
        color       : var(--color-itp-blue);
        font        : var(--font-mono);
        font-weight : 500;
        font-size   : 1.2rem;
        line-height : 1.75;
    }

    h3 {
        color       : var(--color-grey-black);
        font-weight : 800;
        margin      : 0;
    }

    h4 {
        color       : var(--color-grey-black);
        font-size   : 2rem;
        font-weight : 500;
        margin      : 0;
        padding-top : 2rem;
    }

    p {
        margin : 0;
    }
}

.readiness-panorama-help {
    color : var(--color-grey-black);

    h2 {
        color : var(--color-itp-blue);
    }

    p {
        margin-top : 2rem;
        max-width  : none;
    }

    ul {
        font-size             : 1.6rem;
        display               : grid;
        grid-template-columns : repeat(2, minmax(0, 1fr));
        gap                   : 1rem 2rem;
        margin-top            : 2rem;
        padding-left          : 0;
        list-style            : none;
    }

    li {
        position     : relative;
        padding-left : 2rem;
        line-height  : 1.5;
    }

    li::before {
        content          : "";
        position         : absolute;
        left             : 0;
        top              : 0.55em;
        width            : 0.7rem;
        height           : 0.7rem;
        border-radius    : 50%;
        background-color : var(--color-itp-blue);
    }
}

.readiness-cta {
    display            : grid;
    grid-template-rows : minmax(0, 1fr) auto;
    gap                : 4rem;
    align-items        : center;
    background-color   : var(--color-grey-light);
    color              : var(--color-grey-black);

    h2 {
        color : var(--color-itp-blue);
    }

    .readiness-cta-body {
        max-width             : none;
        margin-top            : 2rem;
        font                  : var(--font-body);
        font-feature-settings : var(--font-features);
        /*color                 : var(--color-blue-light-bright);*/
        line-height           : 1.75;
    }

    .readiness-privacy {
        /*max-width        : none;*/
        width            : fit-content;
        justify-self     : center;

        padding-inline   : 1.2rem;
        padding-block    : 1rem;
        background-color : var(--color-grey-light-bright);
        border           : 1px solid var(--color-itp-blue);
        border-radius    : 4px;
        /*margin-top       : 1rem;*/
        color            : var(--color-grey-black);
        font             : var(--font-mono);
        font-size        : 1.2rem;
        line-height      : 1.75;

        /*color      : var(--color-blue-light-bright);*/
    }
}

.readiness-cta-actions {
    display        : flex;
    flex-direction : column;
    gap            : 2rem;
    justify-self   : center;

    .readiness-primary-button {
        margin           : 0;
        color            : white;
        background-color : var(--color-itp-blue);
    }
}

.readiness-demo-popup-bg {
    display         : none;
    z-index         : 3;
    position        : fixed;
    inset           : 0;
    justify-content : center;
    align-items     : flex-start;
    overflow-y      : auto;
    padding         : 2rem;
}

.readiness-demo-popup-bg-visible {
    display         : flex;
    backdrop-filter : blur(8px) grayscale(20%) hue-rotate(348deg) brightness(0.6);
}

.readiness-demo-popup,
.readiness-demo-feedback {
    width            : var(--var-popup-width);
    margin-block     : auto;
    padding          : var(--var-panel-padding);
    border-radius    : 8px;
    background-color : white;
    box-shadow       : 0 2px 24px 0 rgba(0, 0, 0, 0.2);
}

.readiness-demo-popup-hidden,
.readiness-demo-feedback {
    display : none;
}

.readiness-demo-feedback-visible {
    display        : flex;
    flex-direction : column;
    gap            : 2rem;
}

.readiness-demo-header {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) auto;
    gap                   : 2rem;
    align-items           : start;
    margin-bottom         : 3rem;
}

.readiness-demo-header h2 {
    font                  : var(--font-h2);
    font-feature-settings : var(--font-features);
}

.readiness-demo-close-btn {
    width            : 48px;
    height           : 48px;
    display          : grid;
    place-items      : center;
    border           : 0;
    border-radius    : 50%;
    background-color : transparent;
}

.readiness-demo-close-btn:hover {
    cursor           : pointer;
    background-color : var(--color-grey-light);
}

.readiness-demo-form {
    display : grid;
    gap     : 1.6rem;
}

.readiness-demo-form label {
    display : grid;
    gap     : 0.7rem;
}

.readiness-demo-form label span {
    color       : var(--color-grey-dark-dim);
    font-weight : 700;
}

.readiness-demo-form input,
.readiness-demo-form textarea {
    width                 : 100%;
    border                : 1px solid transparent;
    border-radius         : 8px;
    padding               : 1.5rem;
    background-color      : var(--color-grey-light-bright);
    font                  : var(--font-small);
    font-feature-settings : var(--font-features);
}

.readiness-demo-form textarea {
    min-height : 18rem;
    resize     : vertical;
}

.readiness-demo-form input:hover,
.readiness-demo-form textarea:hover {
    border-color : var(--color-grey-light);
}

.readiness-demo-honeypot {
    position : absolute;
    left     : -9999px;
    width    : 1px;
    height   : 1px;
    opacity  : 0;
}

@media (max-width : 1020px) {
    .readiness-layout,
    .readiness-results-grid,
    .readiness-cta {
        grid-template-columns : 1fr;
    }

    .readiness-breakdown {
        display : none;
    }

    .readiness-live-results {
        position : static;
    }

    .readiness-cta-actions {
        justify-content : flex-start;
    }
}

@media (max-width : 760px) {

    .readiness-hero-copy h1 {
        font                  : var(--font-h2);
        font-feature-settings : var(--font-features);
    }

    .readiness-assessment-header h2,
    .readiness-results h2,
    .readiness-risk-areas h2,
    .readiness-panorama-help h2,
    .readiness-cta h2 {
        font                  : var(--font-h3);
        font-feature-settings : var(--font-features);
    }

    .readiness-subtitle {
        font                  : var(--font-h4);
        font-feature-settings : var(--font-features);
    }

    .readiness-risk-grid,
    .readiness-panorama-help ul {
        grid-template-columns : 1fr;
    }

    .readiness-results {
        margin-block : 1rem 2rem;
    }

    .readiness-category-header {
        padding       : 2rem;
        margin-bottom : 1rem;
    }

    .readiness-question {
        margin-inline : 1rem;
        margin-bottom : 1rem;
    }

    .readiness-category,
    .readiness-question,
    .readiness-result-main,
    .readiness-breakdown,
    .readiness-risk-areas,
    .readiness-panorama-help,
    .readiness-cta,
    .readiness-demo-popup,
    .readiness-demo-feedback {
        /*padding : 2rem;*/
    }
}