.jc-compare {
    background: #fff;
    color: #192e38;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    padding-bottom: 80px
}

.jc-compare * {
    box-sizing: border-box
}

.jcmp-intro {
    text-align: center;
    padding: 95px 24px 50px
}

.jcmp-eyebrow {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #46778d
}

.jcmp-intro h1 {
    font-size: clamp(38px, 5vw, 70px);
    line-height: 1.1;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 24px 0
}

.jcmp-intro h1 em {
    font-family: Georgia, serif;
    color: #648591;
    font-weight: 400
}

.jcmp-intro>p:last-child {
    color: #637780;
    line-height: 1.7
}

.jcmp-wrap {
    max-width: 1200px;
    width: calc(100% - 48px);
    margin: auto;
    --jcmp-top: 50px
}

.jcmp-selectors,
.jcmp-products,
.jcmp-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px
}

.jcmp-selectors {
    position: sticky;
    top: var(--jcmp-top);
    z-index: 20;
    padding: 15px 0;
    background: #fffffff5;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #dce5e9
}

.jcmp-selectors label {
    display: block;
    font-size: 11px;
    color: #637780;
    margin-bottom: 8px
}

.jcmp-selectors select {
    width: 100%;
    min-width: 0;
    padding: 12px 30px 12px 12px;
    border: 1px solid #ccd9df;
    border-radius: 6px;
    background: #fff;
    color: #192e38;
    font: inherit;
    font-size: 16px
}

.jcmp-products {
    text-align: center;
    padding: 30px 0
}

.jcmp-image {
    height: 330px;
    display: grid;
    place-items: center;
    color: #637780
}

.jcmp-image picture {
    display: block;
    width: 100%;
    height: 100%
}

.jcmp-image img {
    width: 90%;
    height: 90%;
    object-fit: contain
}

.jcmp-products h2 {
    font-size: 26px;
    font-weight: 500;
    margin: 18px 0 8px
}

.jcmp-products p {
    color: #637780;
    font-size: 14px
}

.jcmp-link {
    color: #007eae;
    font-size: 13px;
    text-decoration: none
}

.jcmp-note {
    text-align: center;
    color: #637780;
    font-size: 12px;
    padding: 10px 20px
}

.jcmp-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 36px 0
}

.jcmp-table caption {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 28px;
    padding: 26px 0;
    color: #192e38;
    caption-side: top;
    font-weight: 300
}

.jcmp-table th {
    font-size: 14px;
    font-weight: 500;
    padding: 15px 10px;
    background: #f3f6f7;
    text-align: center
}

.jcmp-table td {
    padding: 22px 18px;
    border-bottom: 1px solid #e4eaed;
    vertical-align: top;
    text-align: center;
    overflow-wrap: anywhere
}

.jcmp-label {
    display: block;
    color: #637780;
    font-size: 12px;
    margin-bottom: 9px
}

.jcmp-value {
    display: block;
    font-size: 16px;
    line-height: 1.6
}

.jcmp-choices {
    text-align: center;
    padding: 24px 0
}

.jcmp-choices p {
    font-size: 20px
}

.jcmp-button {
    border: 0;
    border-radius: 28px;
    background: #007eae;
    color: white;
    padding: 16px 22px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s
}

.jcmp-button:hover {
    background: #102d54
}

.jc-compare :is(button, select, a):focus-visible {
    outline: 2px solid #008acc;
    outline-offset: 4px
}

.jcmp-status {
    text-align: center;
    font-size: 14px;
    color: #46778d;
    line-height: 1.6
}

@media(max-width:767px) {
    .jcmp-wrap {
        width: calc(100% - 28px)
    }

    .jcmp-selectors,
    .jcmp-products,
    .jcmp-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .jcmp-intro {
        padding: 45px 20px 25px
    }

    .jcmp-image {
        height: 160px
    }

    .jcmp-products h2 {
        font-size: 22px
    }

    .jcmp-table td {
        padding: 18px 8px
    }

    .jcmp-table caption {
        font-size: 25px
    }

    .jcmp-value {
        font-size: 14px
    }

    .jcmp-button {
        width: 100%;
        padding: 14px 9px;
        font-size: 13px
    }

    .jcmp-selectors select {
        padding-left: 8px
    }

    .jcmp-choices p {
        font-size: 18px
    }
}

@media(prefers-reduced-motion:reduce) {
    .jcmp-button {
        transition: none
    }
}

.jcmp-selectors select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23192e38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}