/* =========================================================
   GLOBAL
   ========================================================= */

.wkhp-heading,
.wkhp-heading *,
.wk-card,
.wk-card *,
.wk-coupon-panel,
.wk-coupon-panel *{
    box-sizing:border-box;
    font-family:"Wix Madefor Display","Segoe UI",Arial,sans-serif!important;
}

/* =========================================================
   SECTION HEADING
   VISUAL ONLY — DOES NOT WRAP OR CHANGE CARD STRUCTURE
   ========================================================= */

.wkhp-heading{
    width:100%;

    margin:0;

    padding:0;

    text-align:left;
}

.wkhp-title{
    margin:0!important;

    padding:0!important;

    color:#101828!important;

    font-size:
        clamp(
            38px,
            3.3vw,
            49px
        )!important;

    font-weight:700!important;

    letter-spacing:-1.45px;

    line-height:1.045!important;

    text-align:left!important;
}

.wkhp-subtitle{
    max-width:650px;

    margin:
        10px 0 0!important;

    padding:0!important;

    color:#667085!important;

    font-size:
        clamp(
            15px,
            1.12vw,
            16.8px
        );

    font-weight:500;

    letter-spacing:-.16px;

    line-height:1.52;

    text-align:left;
}


.wk-card{
    --wk-blue:#016EFD;
    --wk-blue-dark:#0058D4;
    --wk-soft:#EDF5FF;

    --wk-orange:#FF3F24;
    --wk-orange-dark:#DF2F18;
    --wk-gold:#FFB316;
    --wk-gold-dark:#DE9400;

    --wk-award:#673DE6;
    --wk-award-dark:#4A2BB7;

    /*
     * GLOBAL MASTER ASSET
     * Change this URL once and every WebKepler review card
     * inherits the new feature/verified icon automatically.
     */
    --wk-verified-icon:
        url("https://webkepler.com/wp-content/uploads/2026/09/blue-verified-icon.svg");

    position:relative;

    width:100%;
    margin:14px 0;

    background:#fff;
    color:#101828;

    border-top:0;
    border-left:1px solid rgba(16,24,40,.05);
    border-right:1px solid rgba(16,24,40,.05);
    border-bottom:1px solid rgba(16,24,40,.05);

    border-radius:14px;

    overflow:visible;

    box-shadow:0 4px 10px rgba(16,24,40,.07);

    transition:box-shadow .22s ease;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.wk-card.wk-card-has-ribbon{
    border-top-left-radius:0;
}

.wk-card.wk-card-no-ribbon{
    border-top-left-radius:14px;
}

.wk-card.wk-card-no-ribbon .wk-card-rank{
    border-radius:14px 0 11px 0;
}

.wk-card:hover,
.wk-card:focus-within{
    box-shadow:0 7px 14px rgba(16,24,40,.12);
}


/* =========================================================
   MAIN
   ========================================================= */

.wk-main{
    display:grid;

    grid-template-columns:
        minmax(190px,1.05fr)
        minmax(350px,1.95fr)
        minmax(210px,1.05fr)
        minmax(220px,1fr);

    align-items:stretch;

    gap:0;

    min-height:184px;

    padding:
        39px
        30px
        11px;
}


/* =========================================================
   AWARD
   ========================================================= */

.wk-award{
    position:absolute;

    top:9px;
    left:-10px;

    z-index:40;

    isolation:isolate;

    height:28px;

    padding:
        0 13px
        0 11px;

    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:7px;

    background:
        var(
            --wk-award,
            #673DE6
        );

    color:#fff;

    font-size:12.8px;
    font-weight:620;

    letter-spacing:-.12px;

    line-height:1;

    white-space:nowrap;

    border-radius:
        0 3px 3px 0;

    box-shadow:
        0 4px 9px
        rgba(16,24,40,.085);
}

.wk-award::before{
    content:"";

    position:absolute;

    z-index:2;

    top:-7px;
    left:0;

    width:10px;
    height:7px;

    /*
     * True wrap / contact shadow:
     * this filled fold starts at the highest connection point.
     * Because the purple tail base continues underneath it,
     * there is no white triangular hole.
     */
    background:
        linear-gradient(
            135deg,
            rgba(16,24,40,.08) 0%,
            var(
                --wk-award-dark,
                #4A2BB7
            ) 58%,
            var(
                --wk-award-dark,
                #4A2BB7
            ) 100%
        );

    clip-path:
        polygon(
            0 100%,
            100% 0,
            100% 100%
        );

    pointer-events:none;
}

.wk-award::after{
    content:"";

    position:absolute;

    z-index:0;

    top:-7px;
    left:-21px;

    width:31px;
    height:28px;

    /*
     * TRUE 3D CONTACT SHADOW
     *
     * Exact seam path:
     *   (31,0)  ->  (21,7)  ->  (21,28)
     *
     * So the shadow begins INSIDE the 45-degree fold,
     * follows that diagonal edge, then becomes the straight
     * vertical contact shadow below it.
     *
     * It is rendered only on the rear-tail layer.
     */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='28' viewBox='0 0 31 28'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-20%25' width='180%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M31 0 L21 7 L21 28' fill='none' stroke='%23101828' stroke-opacity='.179' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' filter='url(%23s)'/%3E%3Cpath d='M31 0 L21 7 L21 28' fill='none' stroke='%23101828' stroke-opacity='.077' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        0 0
        / 31px 28px
        no-repeat,

        var(
            --wk-award,
            #673DE6
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            0 100%,
            9px 50%
        );

    box-shadow:none;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(16,24,40,.10)
        );

    pointer-events:none;
}

/*
 * Keep ribbon text/number above the rear tail and fold.
 * This is structural layering only; it changes no typography.
 */
.wk-award > span{
    position:relative;

    z-index:3;
}

/* =========================================================
   LOGO
   ========================================================= */

.wk-logo{
    display:flex;

    align-items:center;
    justify-content:flex-start;
}

.wk-logo img{
    display:block;

    width:auto;

    max-width:205px;
    max-height:76px;

    object-fit:contain;
}

/* Larger treatment for IONOS */
.wk-logo img.wk-logo-ionos{
    width:235px!important;
    max-width:235px!important;

    height:auto!important;
    max-height:90px!important;
}


/* =========================================================
   FEATURES
   ========================================================= */

.wk-features{
    min-width:0;

    display:flex;

    flex-direction:column;
    justify-content:center;

    gap:13px;

    padding:
        1px
        28px;

    border-left:
        1px solid
        #E7EBF0;
}

.wk-feature{
    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#101828;

    font-size:inherit;
    font-weight:500;

    line-height:1.38;

    letter-spacing:normal;
}

.wk-check{
    width:13px;
    height:13px;

    flex:
        0 0 13px;

    margin-top:4px;

    color:var(--wk-blue);

    background-image:
        var(--wk-verified-icon);

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

/* =========================================================
   RATING
   ========================================================= */

.wk-rating{
    position:relative;

    display:flex;

    flex-direction:column;
    align-items:flex-start;

    margin-top:18px;

    text-align:left;
}

.wk-rating-main{
    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:10px;
}

.wk-rating-label{
    text-align:left;
}

.wk-rating-word{
    color:#475467;

    font-size:14px;
    font-weight:700;
}


/* =========================================================
   STARS
   ========================================================= */

.wk-stars{
    display:flex;

    align-items:center;
    justify-content:flex-start;

    gap:2px;

    margin-top:4px;
}

.wk-star-svg{
    width:18px;
    height:18px;

    display:block;

    fill:var(--wk-gold);
    stroke:var(--wk-gold-dark);

    stroke-width:.65;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(182,113,0,.13)
        );
}

.wk-table-star{
    width:18px!important;
    height:18px!important;

    display:inline-block!important;

    vertical-align:-3px;

    margin-right:4px;
}


/* =========================================================
   SCORE BOX
   ========================================================= */

.wk-score{
    position:relative;

    width:100px;
    height:57px;

    flex:0 0 100px;

    z-index:8000;

    outline:none;
}

.wk-score-card{
    position:absolute;

    top:0;
    left:50%;

    width:100px;
    height:57px;

    transform:
        translateX(-50%);

    overflow:hidden;

    background:#F3F6FA;

    border:0;

    border-radius:10px;

    box-shadow:
        0 2px 5px
        rgba(16,24,40,.035);

    transition:
        width .30s cubic-bezier(.16,1,.3,1) .08s,
        height .30s cubic-bezier(.16,1,.3,1) .08s,
        top .30s cubic-bezier(.16,1,.3,1) .08s,
        border-radius .22s ease .08s,
        box-shadow .25s ease .08s,
        background .20s ease .08s;
}

.wk-score-head{
    position:absolute;

    top:0;
    left:0;

    z-index:10;

    width:100%;
    height:57px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    color:#475467;

    font-size:26px;
    font-weight:700;

    letter-spacing:-1px;

    transition:
        top .30s
        cubic-bezier(.16,1,.3,1)
        .08s;
}


/* =========================================================
   TROPHY
   ========================================================= */

.wk-trophy{
    width:27px;
    height:27px;

    flex:0 0 27px;

    filter:
        drop-shadow(
            0 2px 1px
            rgba(142,93,0,.16)
        );
}

.wk-trophy-main{
    fill:#F5B301;
}

.wk-trophy-dark{
    fill:#D99200;
}

.wk-trophy-light{
    fill:#FFD357;
}


/* =========================================================
   SCORE ANIMATION
   ========================================================= */

@keyframes wkRatingPulse{

    0%{
        transform:scale(1);
    }

    48%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

.wk-score:hover .wk-score-head,
.wk-score:focus-within .wk-score-head{
    animation:
        wkRatingPulse
        .20s
        cubic-bezier(.2,.8,.2,1);
}

.wk-score:hover .wk-score-card,
.wk-score:focus-within .wk-score-card{
    width:248px;
    height:258px;

    top:-39px;

    background:#fff;

    border:0;

    border-radius:13px;

    box-shadow:
        0 20px 46px rgba(15,23,42,.17),
        0 5px 15px rgba(15,23,42,.07);
}

.wk-score:hover .wk-score-head,
.wk-score:focus-within .wk-score-head{
    top:39px;
}


/* =========================================================
   SCORE TITLE
   ========================================================= */

.wk-score-title{
    position:absolute;

    top:10px;

    left:14px;
    right:14px;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(-5px);

    text-align:center;

    transition:
        opacity .17s ease .22s,
        transform .17s ease .22s;
}

.wk-score-title strong{
    display:block;

    color:#101828;

    font-size:11px;
    font-weight:650;
}

.wk-score:hover .wk-score-title,
.wk-score:focus-within .wk-score-title{
    opacity:1;

    visibility:visible;

    transform:none;
}


/* =========================================================
   SCORE DETAILS
   ========================================================= */

.wk-score-details{
    position:absolute;

    top:101px;
    bottom:10px;

    left:13px;
    right:13px;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(7px);

    transition:
        opacity .19s ease .25s,
        transform .22s ease .25s;
}

.wk-score:hover .wk-score-details,
.wk-score:focus-within .wk-score-details{
    opacity:1;

    visibility:visible;

    transform:none;
}

.wk-factor{
    display:grid;

    grid-template-columns:
        27px
        1fr
        auto;

    align-items:center;

    gap:6px;

    height:22px;

    flex:0 0 22px;

    border-bottom:
        1px solid
        rgba(16,24,40,.055);

    color:#475467;

    font-size:9.8px;
    font-weight:500;
}

.wk-factor:last-of-type{
    border-bottom:0;
}

.wk-factor-icon{
    width:19px;
    height:19px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:6px;

    background:var(--wk-soft);

    color:var(--wk-blue);
}

.wk-factor-icon svg{
    width:12.5px;
    height:12.5px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.9;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.wk-factor-score{
    color:#101828;

    font-size:10.5px;
    font-weight:800;
}


/* =========================================================
   VISIT BUTTON IN SCORE POPUP
   ========================================================= */

.wk-visit{
    width:138px;
    height:31px;

    flex:
        0 0 31px;

    margin-top:auto;
    margin-left:auto;
    margin-right:auto;

    padding:
        0 12px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:0;

    border-radius:999px;

    background:var(--wk-orange);

    color:#fff!important;

    text-decoration:none;

    font-size:10.5px;
    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 4px 9px
        rgba(1,110,253,.16);

    transition:
        background .16s ease,
        transform .16s ease;
}

.wk-visit:hover{
    background:var(--wk-orange-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   REVIEW LINK
   ========================================================= */

.wk-review-link{
    width:fit-content;

    margin:0;

    color:var(--wk-blue);

    font-size:15px;
    font-weight:600;

    text-decoration:none;
}

.wk-review-link:hover{
    color:var(--wk-orange);
}

/* =========================================================
   PRICE
   ========================================================= */

.wk-offer{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:28px;

    border-left:
        1px solid
        #E7EBF0;

    text-align:center;
}

.wk-price{
    display:flex;

    align-items:baseline;
    justify-content:center;

    gap:4px;

    margin-bottom:13px;
}

.wk-currency,
.wk-period{
    color:#475467;

    font-size:15px;
    font-weight:500;
}

.wk-price-value{
    color:#050505;

    font-size:35px;

    line-height:1;

    font-weight:700;

    letter-spacing:-1.1px;
}


/* =========================================================
   MAIN BUTTONS
   ========================================================= */

.wk-claim,
.wk-coupon-trigger{
    width:100%;
    max-width:255px;

    height:44px;
    min-height:44px;

    padding:
        0 15px;

    border-radius:24px;

    font-size:14.5px;
    font-weight:700;
}

.wk-claim{
    margin:
        0 auto;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    background:var(--wk-blue);

    color:#fff!important;

    text-decoration:none;

    box-shadow:
        0 6px 14px
        rgba(1,110,253,.15);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.wk-claim:hover{
    background:var(--wk-orange);

    transform:
        translateY(-1px);
}

.wk-arrow{
    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   COUPON BUTTON
   ========================================================= */

.wk-coupon{
    position:relative;

    width:100%;
    max-width:255px;

    margin:
        9px auto 0;

    z-index:100;
}

.wk-coupon-trigger{
    appearance:none;

    border:0;

    cursor:pointer;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    background:
        rgba(1,110,253,.055);

    color:#303846;

    transition:
        background .18s ease,
        transform .18s ease;
}

.wk-coupon-trigger:hover{
    background:
        rgba(1,110,253,.10);

    transform:
        translateY(-1px);
}

.wk-coupon-count{
    min-width:33px;
    height:25px;

    padding:
        0 7px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:var(--wk-blue);

    color:#fff;

    font-size:12.5px;
    font-weight:800;
}


/* =========================================================
   COUPON POPUP
   MOVED TO BODY BY MASTER JS
   ========================================================= */

.wk-coupon-panel{
    --wk-blue:#016EFD;
    --wk-blue-dark:#0058D4;
    --wk-soft:#EDF5FF;

    position:fixed!important;

    left:0;
    top:0;

    z-index:2147483000!important;

    width:300px;

    max-width:
        calc(100vw - 24px);

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    overflow:visible!important;

    display:block;

    padding:
        10px
        10px
        6px;

    margin:0!important;

    background:#fff;

    border:
        1px solid
        rgba(16,24,40,.075);

    border-radius:15px;

    box-shadow:
        0 28px 75px rgba(15,23,42,.19),
        0 8px 24px rgba(15,23,42,.08);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateX(8px)
        scale(.985);

    transform-origin:
        right bottom;

    transition:
        opacity .18s ease,
        transform .23s cubic-bezier(.16,1,.3,1),
        visibility 0s linear .65s;

    text-align:left;
}

.wk-coupon-panel.wk-panel-open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(0)
        scale(1);

    transition:
        opacity .18s ease,
        transform .23s cubic-bezier(.16,1,.3,1),
        visibility 0s;
}


/* Invisible mouse bridge */

.wk-coupon-panel::before{
    content:"";

    position:absolute;

    right:-20px;
    top:0;

    width:20px;
    height:100%;

    background:transparent;

    pointer-events:auto;
}


/* Visible pointer to Get Coupons */

.wk-coupon-panel::after{
    content:"";

    position:absolute;

    right:-13px;

    top:
        var(
            --wk-arrow-y,
            80%
        );

    width:14px;
    height:20px;

    background:#fff;

    clip-path:
        polygon(
            0 0,
            100% 50%,
            0 100%
        );

    transform:
        translateY(-50%);

    filter:
        drop-shadow(
            2px 0 1px
            rgba(16,24,40,.10)
        );

    pointer-events:none;
}


/* Mobile/above mode */

.wk-coupon-panel.wk-panel-above::before{
    left:0;
    right:0;

    top:auto;
    bottom:-20px;

    width:100%;
    height:20px;
}

.wk-coupon-panel.wk-panel-above::after{
    right:50%;

    top:auto;
    bottom:-12px;

    width:20px;
    height:14px;

    transform:
        translateX(50%);

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 100%
        );
}


/* =========================================================
   COUPON HEADER
   ========================================================= */

.wk-coupon-head{
    padding:
        6px
        8px
        10px;

    margin:0;

    border-bottom:
        1px solid
        rgba(16,24,40,.055);
}

.wk-coupon-head strong{
    display:block;

    color:#101828;

    font-size:16px;
    font-weight:650;
}

.wk-coupon-head span{
    display:block;

    margin-top:3px;

    color:#667085;

    font-size:10.8px;
    font-weight:500;
}


/* =========================================================
   COUPON ROW
   NEUTRAL / CLEAN
   ========================================================= */

.wk-coupon-item{
    position:relative;

    width:100%;

    min-height:54px;

    margin:
        4px 0;

    padding:
        10px 11px;

    display:grid;

    grid-template-columns:
        30px
        minmax(0,1fr);

    align-items:center;

    gap:10px;

    border:0;

    border-radius:11px;

    cursor:pointer;

    background:transparent;

    color:#101828!important;

    text-decoration:none!important;

    text-align:left;

    transition:
        background .16s ease;
}

.wk-coupon-item:last-child{
    margin-bottom:0!important;
}

.wk-coupon-item:hover,
.wk-coupon-item:focus-visible{
    background:#F6F8FA;

    outline:0;
}


/* =========================================================
   COUPON ICON
   ========================================================= */

.wk-ticket{
    width:29px;
    height:29px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:8px;

    background:transparent;

    color:var(--wk-blue);
}

.wk-ticket svg{
    display:none!important;
}

.wk-ticket::before{
    content:"";

    display:block;

    width:21px;
    height:21px;

    background:
        center / contain
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016EFD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5V9a3 3 0 0 0 0 6v1.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5V15a3 3 0 0 0 0-6V7.5Z'/%3E%3Cpath d='m9 9 6 6'/%3E%3Ccircle cx='9' cy='14.8' r='.75' fill='%23016EFD' stroke='none'/%3E%3Ccircle cx='15' cy='9.2' r='.75' fill='%23016EFD' stroke='none'/%3E%3C/svg%3E");
}

.wk-coupon-info strong{
    display:block;

    color:#101828;

    font-size:12.7px;
    font-weight:650;

    line-height:1.35;
}

.wk-coupon-info span{
    display:block;

    margin-top:2px;

    color:#667085;

    font-size:10.2px;
    font-weight:500;
}


/* =========================================================
   SHOW PLANS
   ========================================================= */

.wk-toggle{
    min-height:55px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-top:
        1px solid
        rgba(16,24,40,.045);
}

.wk-toggle button{
    appearance:none;

    border:0;

    background:transparent;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px 19px;

    color:#475467;

    font-size:15px;
    font-weight:700;
}

.wk-toggle button:hover{
    color:var(--wk-blue);
}

.wk-chevron{
    width:9px;
    height:9px;

    border-right:
        1.8px solid
        currentColor;

    border-bottom:
        1.8px solid
        currentColor;

    transform:
        rotate(45deg);

    transition:
        transform .24s ease;
}

.wk-card.wk-plans-open
.wk-chevron{
    transform:
        rotate(225deg);
}


/* =========================================================
   TABLE OPEN/CLOSE
   ========================================================= */

.wk-plans{
    display:grid;

    grid-template-rows:0fr;

    opacity:0;

    background:#fff;

    transition:
        grid-template-rows .42s
        cubic-bezier(.4,0,.2,1),
        opacity .34s ease;
}

.wk-plans-inner{
    min-height:0;

    overflow:hidden;
}

.wk-card.wk-plans-open
.wk-plans{
    grid-template-rows:1fr;

    opacity:1;
}


/* =========================================================
   TABLE
   ========================================================= */

.wk-table-wrap{
    width:100%;

    background:#fff;

    overflow:visible;
}

.wk-table{
    width:100%;

    table-layout:fixed;

    border-collapse:separate;

    border-spacing:0;

    background:#fff;

    color:#344054;

    font-size:13.8px;
}

.wk-table col:nth-child(1){width:29%}
.wk-table col:nth-child(2){width:9%}
.wk-table col:nth-child(3){width:8%}
.wk-table col:nth-child(4){width:8%}
.wk-table col:nth-child(5){width:8%}
.wk-table col:nth-child(6){width:10%}
.wk-table col:nth-child(7){width:10%}
.wk-table col:nth-child(8){width:18%}

.wk-table thead{
    background:
        rgba(249,250,251,.48);
}

.wk-table th{
    height:58px;

    padding:
        11px 18px;

    border:0;

    border-top:
        1px solid
        rgba(234,236,240,.48);

    border-bottom:
        1px solid
        rgba(234,236,240,.52);

    background:transparent;

    color:#667085;

    font-size:12.7px;
    font-weight:600;

    text-align:center;

    vertical-align:middle;

    white-space:nowrap;
}

.wk-table td{
    height:78px;

    padding:
        14px 18px;

    border:0;

    border-bottom:
        1px solid
        rgba(234,236,240,.45);

    background:#fff;

    font-weight:500;

    vertical-align:middle;
}

.wk-table tbody tr:hover td{
    background:
        rgba(249,250,251,.32);
}

.wk-plan-name{
    color:var(--wk-blue);

    font-size:14.4px;
    font-weight:700;

    line-height:1.35;

    text-decoration:none;
}

.wk-plan-name:hover{
    color:var(--wk-orange);
}

.wk-table td.wk-plan-price{
    color:#101828;

    font-size:15.5px;
    font-weight:650;
}

.wk-plan-score{
    display:flex;

    align-items:center;

    gap:4px;

    color:#101828;

    font-size:14.4px;
    font-weight:700;

    white-space:nowrap;
}

.wk-plan-btn{
    width:100%;

    max-width:144px;

    height:38px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border:
        1.4px solid
        var(--wk-blue);

    border-radius:23px;

    background:#fff;

    color:var(--wk-blue)!important;

    font-size:13.2px;
    font-weight:700;

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease;
}

.wk-plan-btn:hover{
    background:var(--wk-blue);

    color:#fff!important;
}

.wk-table th:last-child,
.wk-table td:last-child{
    text-align:center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* =========================================================
   WEBKEPLER IDENTITY — FINAL CLEAN MASTER
   ========================================================= */


.wk-award-number{
    width:21px;
    height:21px;

    flex:
        0 0 21px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:
        var(
            --wk-award,
            #673DE6
        );

    font-size:11px;
    font-weight:700;

    line-height:1;
}



.wk-provider-identity{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-right:25px;
}

.wk-provider-identity .wk-logo{
    justify-content:flex-start;
}

.wk-verified-icon{
    /*
     * Legacy markup compatibility.
     * Existing provider-card HTML can keep its old <img>;
     * the Master hides it and paints the global icon on
     * .wk-check instead.
     */
    display:none!important;

    width:0!important;
    height:0!important;
}

.wk-feature-copy{
    display:block;

    min-width:0;
}

.wk-feature-title{
    display:block;

    color:#101828;

    font-size:15.8px;
    font-weight:500;

    letter-spacing:-.12px;

    line-height:1.34;
}

.wk-feature-description{
    display:block;

    margin-top:2px;

    color:#667085;

    font-size:10.7px;
    font-weight:500;

    letter-spacing:-.04px;

    line-height:1.36;
}

.wk-review-summary{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        3px
        24px;

    background:transparent;
}

.wk-review-summary .wk-offer-label{
    margin:
        0 0 4px;

    color:#98A2B3;

    font-size:10.5px;
    font-weight:600;

    letter-spacing:.18px;

    line-height:1.2;
}

.wk-review-summary .wk-price{
    justify-content:flex-start;

    margin:
        0 0 11px;
}

.wk-review-summary .wk-price-value{
    font-size:39px;
}

.wk-review-summary .wk-review-note{
    margin:
        5px 0 0!important;

    color:#667085;

    font-size:11.2px;
    font-weight:500;

    letter-spacing:-.04px;

    line-height:1.35;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .wk-main{
        grid-template-columns:
            minmax(190px,.9fr)
            minmax(0,1.5fr);

        row-gap:24px;

        min-height:0;

        padding:
            44px
            30px
            11px;
    }

    .wk-provider-identity{
        padding-right:24px;
    }

    .wk-features{
        padding-right:0;
    }

    .wk-review-summary{
        padding:
            18px 24px 0 0;

        border-top:
            1px solid
            #E7EBF0;
    }

    .wk-offer{
        padding:
            18px 0 0 25px;

        border-left:
            1px solid
            #E7EBF0;

        border-top:
            1px solid
            #E7EBF0;
    }

}


@media(max-width:720px){

    .wkhp-title{
        font-size:
            clamp(
                29px,
                8.6vw,
                37px
            )!important;

        letter-spacing:-1px;
    }

    .wkhp-subtitle{
        font-size:14px;
    }

    .wk-main{
        grid-template-columns:1fr;

        padding:
            47px
            21px
            20px;

        text-align:left;
    }

    .wk-provider-identity,
    .wk-features,
    .wk-review-summary,
    .wk-offer{
        width:100%;

        padding:
            0 0 20px;

        border-left:0;

        border-top:0;

        border-bottom:
            1px solid
            #E7EBF0;
    }

    .wk-features,
    .wk-review-summary,
    .wk-offer{
        padding-top:20px;
    }

    .wk-offer{
        padding-bottom:0;

        border-bottom:0;

        text-align:center;
    }

    .wk-provider-identity .wk-logo{
        justify-content:flex-start;
    }

    .wk-logo img.wk-logo-ionos{
        width:220px!important;
        max-width:90%!important;
    }

    .wk-review-summary .wk-price-value{
        font-size:37px;
    }

    .wk-claim,
    .wk-coupon{
        max-width:280px;
    }

    .wk-coupon{
        margin-top:9px;
    }

    .wk-award{
        left:-6px;

        height:28px;

        padding:
            0 12px
            0 10px;

        font-size:12.4px;
    }

    .wk-table-wrap{
        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }

    .wk-table{
        min-width:940px;
    }

}


/* =========================================================
   PERFORMANCE — HIDDEN CONTENT RENDERING
   ========================================================= */

@supports (content-visibility:hidden){

    /*
     * Preserve the smooth closing animation:
     * keep the table renderable while .wk-plans-closing is active,
     * then skip its rendering only after the transition finishes.
     */
    .wk-card:not(.wk-plans-open):not(.wk-plans-closing)
    .wk-plans-inner{
        content-visibility:hidden;
    }

    .wk-card.wk-plans-open .wk-plans-inner,
    .wk-card.wk-plans-closing .wk-plans-inner{
        content-visibility:visible;
    }

    /*
     * Coupon popup rendering remains deferred while closed.
     */
    .wk-coupon-panel:not(.wk-panel-open):not(.wk-panel-measuring){
        content-visibility:hidden;
    }

    .wk-coupon-panel.wk-panel-open,
    .wk-coupon-panel.wk-panel-measuring{
        content-visibility:visible;
    }

}

/* =========================================================
   RANK TABS — REVIEW CARDS #2+
   Visual dimensions copied from the approved WebKepler
   comparison master; namespace changed only to avoid CSS
   collisions with comparison components.
   ========================================================= */
.wk-card-rank{
    position:absolute;
    z-index:41;
    top:0;
    left:0;

    /*
     * REVIEW RANK — STRONGER 1.5× SCALE
     * Keeps the approved comparison-rank geometry while giving
     * review-card rankings more visual authority. The dimensions
     * remain inside the Master Review Card's existing top spacing,
     * so no content or layout measurements need to change.
     */
    width:35px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    /* Provider-specific color inherited from the card. */
    background:var(--wk-award,#673DE6);

    border-radius:14px 0 11px 0;

    pointer-events:none;
    user-select:none;
}

.wk-card-rank span{
    width:21px;
    height:21px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#FFFFFF;
    color:var(--wk-award,#673DE6);

    font-size:11px;
    font-weight:700;
    line-height:1;
}