@layer pages {
    .pv2-ddx-page {
        color: var(--pv2-body);
        background: var(--pv2-white);
    }

    .pv2-ddx-page h2,
    .pv2-ddx-page h3,
    .pv2-ddx-page h4 {
        text-wrap: balance;
    }

    .pv2-ddx-hero,
    .pv2-ddx-dark {
        color: #c5d2df;
        background: var(--pv2-navy);
    }

    .pv2-ddx-hero__grid {
        min-height: 700px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
        gap: clamp(3rem, 7vw, 5.5rem);
        align-items: center;
        padding-block: clamp(5rem, 8vw, 7rem);
    }

    .pv2-ddx-hero__copy {
        min-width: 0;
    }

    .pv2-ddx-hero .pv2-eyebrow,
    .pv2-ddx-dark .pv2-eyebrow {
        color: #83adff;
    }

    .pv2-ddx-hero h1 {
        max-width: 14ch;
        margin: 0;
        color: var(--pv2-white);
        font-size: clamp(3.05rem, 5.3vw, 4.9rem);
        line-height: 1.02;
        letter-spacing: -.055em;
    }

    .pv2-ddx-hero__lead {
        max-width: 46rem;
        margin: 1.75rem 0 0;
        font-size: clamp(1.15rem, 1.8vw, 1.35rem);
        line-height: 1.55;
    }

    .pv2-ddx-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: 2rem;
    }

    .pv2-ddx-button--outline {
        border-color: #7890a8;
        background: transparent;
        color: var(--pv2-white);
    }

    .pv2-ddx-button--outline:hover {
        border-color: var(--pv2-white);
        background: rgb(255 255 255 / 8%);
    }

    .pv2-ddx-lens {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #395065;
        border-left: 1px solid #395065;
    }

    .pv2-ddx-lens div {
        min-height: 112px;
        padding: 1.25rem;
        border-right: 1px solid #395065;
        border-bottom: 1px solid #395065;
    }

    .pv2-ddx-lens span,
    .pv2-ddx-path b,
    .pv2-ddx-three-grid b,
    .pv2-ddx-prep b {
        display: block;
        color: #83adff;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .1em;
    }

    .pv2-ddx-lens strong {
        display: block;
        margin-top: .45rem;
        color: var(--pv2-white);
        font-size: 1.05rem;
    }

    .pv2-ddx-definition {
        background: var(--pv2-white);
    }

    .pv2-ddx-definition__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: clamp(3rem, 7vw, 5rem);
        align-items: start;
    }

    .pv2-ddx-definition blockquote {
        margin: 0;
        color: var(--pv2-navy);
        font-size: clamp(2rem, 3.2vw, 2.8rem);
        line-height: 1.2;
        letter-spacing: -.035em;
    }

    .pv2-ddx-definition aside {
        padding-left: 1.5rem;
        border-left: 4px solid var(--pv2-cobalt);
    }

    .pv2-ddx-definition aside p:first-of-type {
        margin-top: 0;
    }

    .pv2-ddx-section {
        background: var(--pv2-white);
    }

    .pv2-ddx-section--off {
        background: var(--pv2-off-white);
    }

    .pv2-ddx-section-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: clamp(2rem, 7vw, 5rem);
        align-items: start;
        margin-bottom: 3.5rem;
    }

    .pv2-ddx-section-head h2,
    .pv2-ddx-two-column h2,
    .pv2-ddx-cta h2,
    .pv2-ddx-entry h2 {
        max-width: 18ch;
        margin: 0;
        color: var(--pv2-navy);
        font-size: clamp(2.1rem, 3.5vw, 3.2rem);
        line-height: 1.08;
        letter-spacing: -.045em;
    }

    .pv2-ddx-section-head > p {
        max-width: 42rem;
        margin: .25rem 0 0;
        font-size: 1.05rem;
    }

    .pv2-ddx-three-grid,
    .pv2-ddx-four-grid,
    .pv2-ddx-dimension-grid,
    .pv2-ddx-path,
    .pv2-ddx-prep {
        display: grid;
        border-top: 1px solid var(--pv2-border);
    }

    .pv2-ddx-three-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pv2-ddx-three-grid article,
    .pv2-ddx-four-grid article {
        min-width: 0;
        padding: 1.75rem 1.75rem .7rem 0;
        border-bottom: 1px solid var(--pv2-border);
    }

    .pv2-ddx-three-grid article + article,
    .pv2-ddx-four-grid article + article {
        padding-left: 1.75rem;
        border-left: 1px solid var(--pv2-border);
    }

    .pv2-ddx-three-grid h3,
    .pv2-ddx-four-grid h3,
    .pv2-ddx-dimension-grid h3 {
        margin: .75rem 0 .5rem;
        color: var(--pv2-navy);
        font-size: 1.2rem;
        line-height: 1.35;
    }

    .pv2-ddx-three-grid p,
    .pv2-ddx-four-grid p,
    .pv2-ddx-dimension-grid p,
    .pv2-ddx-path p,
    .pv2-ddx-signal-list p,
    .pv2-ddx-roadmap-list span,
    .pv2-ddx-prep p,
    .pv2-ddx-articles p {
        margin: 0;
    }

    .pv2-ddx-two-column {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: clamp(3rem, 7vw, 5.5rem);
        align-items: start;
    }

    .pv2-ddx-two-column--roadmap {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }

    .pv2-ddx-two-column > div:first-child > p:last-child {
        margin-top: 1.25rem;
    }

    .pv2-ddx-signal-list,
    .pv2-ddx-roadmap-list {
        border-top: 1px solid var(--pv2-border);
    }

    .pv2-ddx-signal-list article {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 1rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--pv2-border);
    }

    .pv2-ddx-signal-list article > span {
        color: var(--pv2-cobalt);
        font-weight: 800;
    }

    .pv2-ddx-signal-list strong {
        display: block;
        margin-bottom: .3rem;
        color: var(--pv2-navy);
    }

    .pv2-ddx-dimension-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 1px solid var(--pv2-border);
    }

    .pv2-ddx-dimension-grid article {
        min-height: 218px;
        padding: 1.75rem;
        border-right: 1px solid var(--pv2-border);
        border-bottom: 1px solid var(--pv2-border);
    }

    .pv2-ddx-dimension-grid article > span {
        color: var(--pv2-cobalt);
        font-size: .8rem;
        font-weight: 800;
    }

    .pv2-ddx-dimension-grid h3 {
        margin-top: 1.35rem;
        font-size: 1.35rem;
    }

    .pv2-ddx-dark h2,
    .pv2-ddx-dark h3 {
        color: var(--pv2-white);
    }

    .pv2-ddx-dark .pv2-ddx-section-head > p {
        color: #c5d2df;
    }

    .pv2-ddx-path {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-top-color: #395065;
    }

    .pv2-ddx-path article {
        min-width: 0;
        padding: 1.75rem 1.5rem .75rem 0;
    }

    .pv2-ddx-path article + article {
        padding-left: 1.5rem;
        border-left: 1px solid #395065;
    }

    .pv2-ddx-path h3 {
        margin: .8rem 0 .4rem;
        font-size: 1.12rem;
    }

    .pv2-ddx-roadmap-list article {
        display: grid;
        grid-template-columns: minmax(140px, .45fr) 1fr;
        gap: 1.5rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--pv2-border);
    }

    .pv2-ddx-roadmap-list strong {
        color: var(--pv2-navy);
    }

    .pv2-ddx-four-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pv2-ddx-four-grid h3 {
        margin-top: 0;
    }

    .pv2-ddx-faq {
        max-width: 920px;
        margin-left: auto;
    }

    .pv2-ddx-faq details {
        border-top: 1px solid var(--pv2-border);
    }

    .pv2-ddx-faq details:last-child {
        border-bottom: 1px solid var(--pv2-border);
    }

    .pv2-ddx-faq summary {
        min-height: 66px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        cursor: pointer;
        color: var(--pv2-navy);
        font-weight: 700;
        list-style: none;
    }

    .pv2-ddx-faq summary::-webkit-details-marker {
        display: none;
    }

    .pv2-ddx-faq summary::after {
        color: var(--pv2-cobalt);
        content: "+";
        font-size: 1.6rem;
    }

    .pv2-ddx-faq details[open] summary::after {
        content: "−";
    }

    .pv2-ddx-faq details p {
        max-width: 52rem;
        margin: 0;
        padding: 0 2.75rem 1.5rem 0;
    }

    .pv2-ddx-cta {
        padding-block: clamp(4rem, 8vw, 6rem);
    }

    .pv2-ddx-cta h2 {
        color: var(--pv2-white);
    }

    .pv2-ddx-cta p {
        max-width: 42rem;
        margin: 1.25rem 0 0;
    }

    .pv2-ddx-cta__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
        gap: 4rem;
        align-items: end;
    }

    .pv2-ddx-cta__grid > .pv2-button {
        justify-self: end;
    }

    .pv2-ddx-entry {
        display: grid;
        grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
        gap: clamp(3rem, 7vw, 5.5rem);
        align-items: start;
    }

    .pv2-ddx-entry h2 {
        max-width: 15ch;
    }

    .pv2-ddx-entry .pv2-button {
        margin-top: 1.5rem;
    }

    .pv2-ddx-prep {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pv2-ddx-prep article {
        min-width: 0;
        padding: 1.6rem 1.5rem .7rem 0;
    }

    .pv2-ddx-prep article + article {
        padding-left: 1.5rem;
        border-left: 1px solid var(--pv2-border);
    }

    .pv2-ddx-prep strong {
        display: block;
        margin: .6rem 0 .35rem;
        color: var(--pv2-navy);
        font-size: 1.1rem;
    }

    .pv2-ddx-articles {
        grid-column: 1 / -1;
        margin-top: 4rem;
        padding-top: 2.5rem;
        border-top: 1px solid var(--pv2-border);
    }

    .pv2-ddx-articles h3 {
        max-width: 20ch;
        margin: 0;
        color: var(--pv2-navy);
        font-size: clamp(1.7rem, 2.5vw, 2.35rem);
        line-height: 1.1;
    }

    .pv2-ddx-articles__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .pv2-ddx-articles__list > article {
        min-width: 0;
        padding-top: 1.25rem;
        border-top: 1px solid var(--pv2-border);
    }

    .pv2-ddx-article__meta {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1rem;
        margin-bottom: .6rem;
        color: var(--pv2-muted);
        font-size: .76rem;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .pv2-ddx-article__meta span {
        color: var(--pv2-cobalt);
    }

    .pv2-ddx-articles h4 {
        margin: 0 0 .5rem;
        color: var(--pv2-navy);
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .pv2-ddx-articles .pv2-text-link {
        margin-top: .75rem;
    }

    @media (max-width: 1023px) {
        .pv2-ddx-hero__grid,
        .pv2-ddx-definition__grid,
        .pv2-ddx-two-column,
        .pv2-ddx-two-column--roadmap,
        .pv2-ddx-cta__grid,
        .pv2-ddx-entry {
            grid-template-columns: 1fr;
        }

        .pv2-ddx-hero__grid {
            min-height: auto;
        }

        .pv2-ddx-three-grid,
        .pv2-ddx-four-grid,
        .pv2-ddx-dimension-grid,
        .pv2-ddx-path,
        .pv2-ddx-articles__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .pv2-ddx-three-grid article:nth-child(odd),
        .pv2-ddx-four-grid article:nth-child(odd),
        .pv2-ddx-path article:nth-child(odd) {
            padding-left: 0;
            border-left: 0;
        }

        .pv2-ddx-three-grid article:nth-child(even),
        .pv2-ddx-four-grid article:nth-child(even),
        .pv2-ddx-path article:nth-child(even) {
            padding-left: 1.5rem;
            border-left: 1px solid var(--pv2-border);
        }

        .pv2-ddx-path article:nth-child(even) {
            border-left-color: #395065;
        }

        .pv2-ddx-cta__grid > .pv2-button {
            justify-self: start;
        }
    }

    @media (max-width: 639px) {
        .pv2-ddx-hero h1 {
            font-size: 2.7rem;
        }

        .pv2-ddx-actions {
            display: grid;
        }

        .pv2-ddx-actions .pv2-button {
            width: 100%;
        }

        .pv2-ddx-section-head {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-bottom: 2.25rem;
        }

        .pv2-ddx-lens,
        .pv2-ddx-three-grid,
        .pv2-ddx-four-grid,
        .pv2-ddx-dimension-grid,
        .pv2-ddx-path,
        .pv2-ddx-prep,
        .pv2-ddx-articles__list {
            grid-template-columns: 1fr;
        }

        .pv2-ddx-three-grid article,
        .pv2-ddx-three-grid article + article,
        .pv2-ddx-four-grid article,
        .pv2-ddx-four-grid article + article,
        .pv2-ddx-path article,
        .pv2-ddx-path article + article,
        .pv2-ddx-prep article,
        .pv2-ddx-prep article + article {
            padding: 1.35rem 0;
            border-left: 0;
        }

        .pv2-ddx-path article + article,
        .pv2-ddx-prep article + article {
            border-top: 1px solid #395065;
        }

        .pv2-ddx-prep article + article {
            border-top-color: var(--pv2-border);
        }

        .pv2-ddx-dimension-grid article {
            min-height: auto;
            padding: 1.35rem;
        }

        .pv2-ddx-roadmap-list article {
            grid-template-columns: 1fr;
            gap: .3rem;
        }

        .pv2-ddx-faq summary {
            min-height: 72px;
        }

        .pv2-ddx-definition aside {
            padding-left: 1rem;
        }

        .pv2-ddx-articles {
            margin-top: 2.5rem;
        }
    }
}