/* Banner placements (PPM-372). A slot exists in the DOM only when it has a banner. */
.jh-slot {
    position: relative;
    display: block;
    max-width: 960px;
    margin: 16px auto;
    box-sizing: border-box;
}
.jh-slot__link {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.jh-slot__link:focus-visible {
    outline: 3px solid #3b8197;
    outline-offset: 2px;
}
.jh-slot__img {
    display: block;
    width: 100%;
    height: auto;
}
.jh-slot__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font: 700 18px/28px Arial, sans-serif;
    cursor: pointer;
    padding: 0;
}
.jh-slot__close:hover,
.jh-slot__close:focus-visible {
    background: rgba(0, 0, 0, .7);
}

/* TOP00 sits between the language/currency bar and the logo row (TZ 1.2:
   над логотипом и навигацией). The bar is position:fixed, 40px high, and the
   logo row compensates it with margin-top: 40px; with TOP00 present the banner
   takes that offset over. Closing the banner gives it back. */
.jh-slot--TOP00 {
    width: calc(100% - 24px);
    margin: 12px auto;
}
.page-header > .jh-slot--TOP00 {
    margin-top: 52px;
}
/* On a phone the logo row is the menu overlay, fixed at the top under the
   bar: it keeps its own offset. */
@media (min-width: 768px) {
    .page-header:has(> .jh-slot--TOP00) .header__logo-cont,
    body.jh-has-top .header__logo-cont {
        margin-top: 0;
    }
}
/* The top right corner of the MeduzaVPN banner carries its copy: where the
   page has room the close button stands beside the banner (960 + 2 x 34px,
   plus a classic scrollbar), else it shrinks into the corner, clear of the text. */
.jh-slot--TOP00 .jh-slot__close {
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    font-size: 15px;
    line-height: 24px;
}
@media (min-width: 1060px) {
    .jh-slot--TOP00 .jh-slot__close {
        top: 0;
        right: -34px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        background: rgba(29, 37, 48, .1);
        color: #1d2530;
    }
    .jh-slot--TOP00 .jh-slot__close:hover,
    .jh-slot--TOP00 .jh-slot__close:focus-visible {
        background: rgba(29, 37, 48, .2);
    }
}

/* MeduzaVPN TOP00 (templates/meduza-top00.php): marketing's 960x200 design.
   Every size is a multiple of --u, 1/960 of the banner's own width, so the
   desktop layout scales down with the page instead of overflowing it; a narrow
   banner switches to the 2:1 layout below (--u there is 1/351). */
@font-face {
    font-family: "JH Unbounded";
    src: url("../fonts/unbounded/unbounded-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "JH Unbounded";
    src: url("../fonts/unbounded/unbounded-blond.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
.jh-mz-box {
    container-type: inline-size;
}
/* Every size below rests on container units: a browser without them gets no
   banner rather than a collapsed one. */
@supports not (container-type: inline-size) {
    .jh-slot--html {
        display: none !important;
    }
}
.jh-mz {
    --u: calc(100cqw / 960);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: calc(200 * var(--u));
    border: 1px solid #39415e;
    border-radius: 12px;
    box-sizing: border-box;
    background: radial-gradient(ellipse at 12% 80%, #222849 0%, transparent 40%),
        radial-gradient(ellipse at 87% 2%, #39264f 0%, transparent 55%),
        linear-gradient(115deg, #101a2e, #0b1120 60%, #161829);
    color: #fff;
    font-family: Arial, sans-serif;
    line-height: normal;
    text-align: left;
}
.jh-mz:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(#6c80bc0a 1px, transparent 1px), linear-gradient(90deg, #6c80bc0a 1px, transparent 1px);
    background-size: calc(48 * var(--u)) calc(48 * var(--u));
    mask-image: linear-gradient(90deg, #000, transparent 65%);
}
.jh-mz__glow {
    position: absolute;
    left: calc(-90 * var(--u));
    top: calc(-110 * var(--u));
    width: calc(350 * var(--u));
    height: calc(350 * var(--u));
    border-radius: 50%;
    border: 1px solid #8592ec16;
    box-shadow: 0 0 0 calc(30 * var(--u)) #8592ec05, 0 0 0 calc(60 * var(--u)) #8592ec04;
    pointer-events: none;
}
.jh-mz__art {
    position: absolute;
    z-index: -1;
    left: calc(422 * var(--u));
    top: calc(-43 * var(--u));
    width: calc(300 * var(--u));
    height: calc(300 * var(--u));
    opacity: .62;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent 0%, #000 37%, #000 84%, transparent 100%);
}
.jh-mz__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px #9a77ff50);
    transform-origin: 73% 28%;
    animation: jh-mz-swim 12s cubic-bezier(.45, 0, .55, 1) infinite alternate, jh-mz-sway 4.8s ease-in-out infinite;
}
@keyframes jh-mz-swim {
    from { transform: translate3d(-9px, 10px, 0) rotate(-2deg); }
    to { transform: translate3d(10px, -10px, 0) rotate(1deg); }
}
@keyframes jh-mz-sway {
    0%, 100% { rotate: -2deg; scale: 1 1; }
    25% { rotate: 0deg; scale: 1.025 .975; }
    50% { rotate: 2deg; scale: .99 1.02; }
    75% { rotate: 0deg; scale: 1.015 .985; }
}
.jh-mz__logo {
    position: absolute;
    left: calc(27 * var(--u));
    top: calc(27 * var(--u));
    width: calc(144 * var(--u));
    height: calc(144 * var(--u));
    border-radius: calc(39 * var(--u));
    overflow: hidden;
    box-shadow: 0 calc(18 * var(--u)) calc(35 * var(--u)) #03051170, 0 0 calc(36 * var(--u)) #7065ef18;
    transform: rotate(-5deg);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.jh-mz__logo img {
    display: block;
    width: 100%;
    height: 100%;
}
.jh-slot__link:hover .jh-mz__logo {
    transform: rotate(0deg) translateY(-2px);
}
.jh-mz__brand {
    position: absolute;
    left: calc(203 * var(--u));
    top: calc(24 * var(--u));
    font: 300 calc(29 * var(--u)) / calc(35 * var(--u)) "JH Unbounded", Arial, sans-serif;
    letter-spacing: calc(-1 * var(--u));
    color: #f1effa;
}
.jh-mz__eyebrow {
    position: absolute;
    right: calc(23 * var(--u));
    top: calc(24 * var(--u));
    width: calc(219 * var(--u));
    height: calc(18 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    font-size: calc(13 * var(--u));
    font-weight: 600;
    letter-spacing: calc(1.2 * var(--u));
    color: #cbb4ec;
    white-space: nowrap;
}
.jh-mz__eyebrow-icon {
    flex: none;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    color: #bc9ee7;
}
/* The banner sets its labels in capitals whatever case a translation comes in
   (the page's lang picks the right capitals, Turkish İ included); a speed keeps
   its unit's own case (Mbps). */
.jh-mz__eyebrow,
.jh-mz__headline,
.jh-mz__offer:not(.jh-mz__offer--speed),
.jh-mz__badge,
.jh-mz__cta-text {
    text-transform: uppercase;
}
.jh-mz__slide {
    position: absolute;
    inset: 0;
}
.jh-mz__slide[hidden] {
    display: none;
}
.jh-mz__message {
    position: absolute;
    left: calc(202 * var(--u));
    bottom: calc(24 * var(--u));
    width: calc(465 * var(--u));
}
.jh-mz__headline {
    margin: 0;
    font: 600 calc(32 * var(--u)) / 1.1 "JH Unbounded", Arial, sans-serif;
    letter-spacing: calc(-1.5 * var(--u));
    color: #fff;
}
.jh-mz__headline span {
    display: block;
}
.jh-mz__headline .jh-mz__tint {
    color: #d5b6fa;
}
.jh-mz__support {
    margin: calc(9 * var(--u)) 0 0;
    font-size: calc(19 * var(--u));
    line-height: calc(24 * var(--u));
    color: #dce3f3;
    white-space: nowrap;
    overflow: hidden;
}
.jh-mz__action {
    position: absolute;
    top: calc(50 * var(--u));
    bottom: calc(24 * var(--u));
    right: calc(23 * var(--u));
    width: calc(241 * var(--u));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: calc(22 * var(--u));
    border-left: 1px solid #a89bce30;
}
.jh-mz__offer {
    flex: none;
    font: 600 calc(25 * var(--u)) / calc(34 * var(--u)) "JH Unbounded", Arial, sans-serif;
    letter-spacing: calc(-1 * var(--u));
    color: #e0c3ff;
    white-space: nowrap;
    overflow: hidden;
}
.jh-mz__offer--speed {
    font-size: calc(20 * var(--u));
    letter-spacing: calc(-.8 * var(--u));
}
.jh-mz__badge {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    margin-top: calc(4 * var(--u));
    font-size: calc(14 * var(--u));
    font-weight: 600;
    line-height: calc(28 * var(--u));
    letter-spacing: calc(.6 * var(--u));
    color: #dce3f3;
    white-space: nowrap;
}
.jh-mz__badge-icon {
    flex: none;
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
    color: #a6b8df;
}
.jh-mz__cta {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8 * var(--u));
    margin-top: auto;
    padding: 0 calc(17 * var(--u));
    min-height: calc(49 * var(--u));
    box-sizing: border-box;
    border: 1px solid #dbc0ff66;
    border-radius: calc(14 * var(--u));
    background: linear-gradient(110deg, #8660c8, #ac85df);
    box-shadow: 0 5px 22px #ac79f526, inset 0 1px #ffffff25;
    font-size: calc(14 * var(--u));
    font-weight: 700;
    letter-spacing: calc(.3 * var(--u));
    color: #fff;
    transition: filter .25s, box-shadow .25s;
}
/* A long translation takes a second line at a space (the button has the height
   for it); a word longer than the button shrinks (data-jh-fit) instead of
   breaking in the middle. */
.jh-mz__cta-text {
    min-width: 0;
    line-height: 1.1;
}
.jh-mz__cta-icon {
    flex: none;
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
    transition: transform .3s;
}
.jh-slot__link:hover .jh-mz__cta {
    filter: brightness(1.1);
    box-shadow: 0 5px 26px #ac79f542;
}
.jh-slot__link:hover .jh-mz__cta-icon {
    transform: translateX(3px);
}
.jh-mz__steps {
    position: absolute;
    left: calc(203 * var(--u));
    bottom: calc(9 * var(--u));
    display: flex;
    gap: 5px;
}
.jh-mz__steps i {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 4px;
    background: #59627f;
    transition: background .5s, width .5s;
}
.jh-mz__steps i.is-active {
    width: 30px;
    background: #bba0e9;
}
/* 2:1 on narrow screens (TZ 1.4): logo and wordmark on top, the offer and the
   button in a right column. */
@container (max-width: 719px) {
    .jh-mz {
        --u: calc(100cqw / 351);
        height: calc(175.5 * var(--u));
    }
    .jh-mz__glow {
        left: calc(-70 * var(--u));
        top: calc(-80 * var(--u));
        width: calc(200 * var(--u));
        height: calc(200 * var(--u));
    }
    .jh-mz__art {
        left: calc(150 * var(--u));
        top: calc(-36 * var(--u));
        width: calc(190 * var(--u));
        height: calc(190 * var(--u));
        opacity: .45;
    }
    .jh-mz__logo {
        left: calc(14 * var(--u));
        top: calc(14 * var(--u));
        width: calc(44 * var(--u));
        height: calc(44 * var(--u));
        border-radius: calc(12 * var(--u));
    }
    .jh-mz__brand {
        left: calc(68 * var(--u));
        top: calc(15 * var(--u));
        font-size: calc(18 * var(--u));
        line-height: calc(22 * var(--u));
        letter-spacing: calc(-.6 * var(--u));
    }
    .jh-mz__eyebrow {
        left: calc(68 * var(--u));
        right: auto;
        top: calc(39 * var(--u));
        width: auto;
        height: calc(14 * var(--u));
        gap: calc(4 * var(--u));
        font-size: calc(9.5 * var(--u));
        letter-spacing: calc(.8 * var(--u));
    }
    .jh-mz__eyebrow-icon {
        width: calc(12 * var(--u));
        height: calc(12 * var(--u));
    }
    .jh-mz__message {
        left: calc(14 * var(--u));
        top: calc(72 * var(--u));
        bottom: auto;
        width: calc(186 * var(--u));
    }
    .jh-mz__headline {
        font-size: calc(18 * var(--u));
        letter-spacing: calc(-.7 * var(--u));
    }
    .jh-mz__support {
        margin-top: calc(6 * var(--u));
        font-size: calc(11.5 * var(--u));
        line-height: calc(15 * var(--u));
        white-space: normal;
    }
    .jh-mz__action {
        top: calc(72 * var(--u));
        bottom: calc(20 * var(--u));
        right: calc(14 * var(--u));
        width: calc(132 * var(--u));
        padding-left: calc(12 * var(--u));
    }
    .jh-mz__offer {
        font-size: calc(13.5 * var(--u));
        line-height: calc(16 * var(--u));
        letter-spacing: calc(-.4 * var(--u));
        white-space: normal;
    }
    .jh-mz__offer--speed {
        font-size: calc(12.5 * var(--u));
    }
    .jh-mz__badge {
        gap: calc(4 * var(--u));
        margin-top: calc(2 * var(--u));
        font-size: calc(10 * var(--u));
        line-height: calc(16 * var(--u));
        letter-spacing: calc(.3 * var(--u));
    }
    .jh-mz__badge-icon {
        width: calc(12 * var(--u));
        height: calc(12 * var(--u));
    }
    .jh-mz__cta {
        min-height: calc(30 * var(--u));
        padding: calc(3 * var(--u)) calc(9 * var(--u));
        gap: calc(4 * var(--u));
        border-radius: calc(9 * var(--u));
        font-size: calc(10.5 * var(--u));
        letter-spacing: 0;
    }
    .jh-mz__cta-icon {
        width: calc(13 * var(--u));
        height: calc(13 * var(--u));
    }
    .jh-mz__steps {
        left: calc(14 * var(--u));
        bottom: calc(10 * var(--u));
    }
}
@media (prefers-reduced-motion: reduce) {
    .jh-mz__art img {
        animation: none;
    }
    .jh-mz__logo,
    .jh-mz__cta,
    .jh-mz__cta-icon,
    .jh-mz__steps i {
        transition: none;
    }
    .jh-slot__link:hover .jh-mz__logo {
        transform: rotate(-5deg);
    }
}

.jh-slot--HDR01 {
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* The strip is too low for a close button over the creative: it would cover
   the CTA (TZ 1.3), so the button sits beside it. */
.jh-slot--HDR01 .jh-slot__link {
    flex: 1;
    min-width: 0;
}
.jh-slot--HDR01 .jh-slot__close {
    position: static;
    flex: none;
    background: rgba(29, 37, 48, .1);
    color: #1d2530;
}
.jh-slot--HDR01 .jh-slot__close:hover,
.jh-slot--HDR01 .jh-slot__close:focus-visible {
    background: rgba(29, 37, 48, .2);
}

/* HOME01: a slide of the existing hero carousel. */
.home-promo__slide--jh .jh-slot__link {
    border-radius: 16px;
}
.home-promo__jh-img {
    display: block;
    width: 100%;
    height: auto;
}

/* VPS01: the MeduzaVPN card inside the VPN group, same footprint as a tile. */
.jh-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    min-height: 128px;
    padding: 14px 16px;
    border: 1.5px solid #b9a7dd;
    border-radius: 10px;
    background: linear-gradient(160deg, #f1ecfb 0%, #ffffff 70%);
    color: #1d2530;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.jh-card:hover,
.jh-card:focus-visible {
    border-color: #65479a;
    box-shadow: 0 4px 16px rgba(101, 71, 154, .18);
    text-decoration: none;
    color: #1d2530;
}
.jh-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.jh-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.jh-card__title {
    font-weight: 700;
    font-size: 16px;
}
.jh-card__badge {
    font-size: 11px;
    font-weight: 600;
    color: #65479a;
    background: rgba(101, 71, 154, .12);
    border-radius: 4px;
    padding: 1px 6px;
}
.jh-card__text {
    font-size: 12.5px;
    line-height: 1.4;
    color: #4a5563;
}
.jh-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}
.jh-card__note {
    font-size: 12px;
    color: #4a5563;
}
.jh-card__cta {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #3b8197;
    border-radius: 6px;
    padding: 4px 12px;
}
/* The MeduzaVPN card (templates/meduza-card.php, VPS01 and NAV01): marketing's
   design (PPM-380), 438x130 with one 12px inset on every edge, the jellyfish of
   TOP00 swimming behind the copy and the logo in the bottom corner. Narrower
   than 400px (a phone, the menu's dropdown) it takes marketing's narrow type. */
@font-face {
    font-family: "JH Russo One";
    src: url("../fonts/russo-one/russo-one.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
a.jh-card--meduza-card {
    --jh-card-inset: 12px;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    gap: 0;
    min-height: 130px;
    padding: var(--jh-card-inset);
    border: 1px solid #8f6ccb;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(ellipse at 12% 80%, #222849 0%, transparent 40%),
        radial-gradient(ellipse at 87% 2%, #39264f 0%, transparent 55%),
        linear-gradient(115deg, #101a2e, #0b1120 60%, #161829);
    color: #fff;
    font-family: Geologica, Arial, sans-serif;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: border-color .2s, box-shadow .2s;
}
a.jh-card--meduza-card:hover,
a.jh-card--meduza-card:focus-visible {
    border-color: #bea0ed;
    box-shadow: 0 5px 20px #593b8730;
    color: #fff;
}
a.jh-card--meduza-card:focus-visible {
    outline: 3px solid #a58ade;
    outline-offset: 4px;
}
.jh-card--meduza-card .jh-card__jelly {
    position: absolute;
    z-index: 0;
    top: -12px;
    right: 37px;
    width: 218px;
    height: 218px;
    opacity: .45;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
    animation: jh-mzc-swim 12s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.jh-card--meduza-card .jh-card__jelly img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    transform-origin: 73% 28%;
    animation: jh-mzc-sway 4.8s ease-in-out infinite;
}
.jh-card--meduza-card .jh-card__head {
    position: relative;
    z-index: 1;
    gap: 4px 9px;
    margin-top: 8px;
}
.jh-card--meduza-card .jh-card__title {
    font-size: 22px;
    line-height: 27px;
    font-weight: 700;
    letter-spacing: -1px;
}
.jh-card--meduza-card .jh-card__badge-frame {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
/* the frame is a 1px ring of the badge's own shimmering gradient */
.jh-card--meduza-card .jh-card__badge-frame:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(105deg, #b5a0ff 0%, #f0ceff 23%, #b4f4ef 43%, #f5eeff 52%, #c5a2ff 66%, #b5a0ff 100%);
    background-size: 250% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: jh-mzc-shimmer 6s ease-in-out infinite;
}
.jh-card--meduza-card .jh-card__badge {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #d9c7ff;
    font-family: "JH Russo One", Geologica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .45px;
    text-transform: uppercase;
    transform: skewX(-9deg);
    transform-origin: left center;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .jh-card--meduza-card .jh-card__badge {
        background: linear-gradient(105deg, #b5a0ff 0%, #f0ceff 23%, #b4f4ef 43%, #f5eeff 52%, #c5a2ff 66%, #b5a0ff 100%);
        background-size: 250% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: jh-mzc-shimmer 6s ease-in-out infinite;
    }
}
.jh-card--meduza-card .jh-card__text {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 80px);
    margin-top: 8px;
    color: #e1d9ef;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
}
.jh-card--meduza-card .jh-card__note {
    position: relative;
    top: -3px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 80px);
    margin-top: auto;
    padding-top: 1px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}
.jh-card--meduza-card .jh-card__note svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}
.jh-card--meduza-card .jh-card__icon {
    position: absolute;
    z-index: 2;
    right: var(--jh-card-inset);
    bottom: var(--jh-card-inset);
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #d9c6ff38, 0 5px 15px #08051140;
}
@container (max-width: 400px) {
    .jh-card--meduza-card .jh-card__head {
        gap: 4px 6px;
    }
    .jh-card--meduza-card .jh-card__title {
        font-size: 18px;
        letter-spacing: -.6px;
    }
    .jh-card--meduza-card .jh-card__badge-frame {
        padding: 2px 7px;
    }
    .jh-card--meduza-card .jh-card__badge {
        font-size: 11px;
        letter-spacing: .1px;
    }
    .jh-card--meduza-card .jh-card__text {
        margin-top: 4px;
    }
    .jh-card--meduza-card .jh-card__note {
        padding-top: 4px;
    }
    .jh-card--meduza-card .jh-card__jelly {
        right: 2px;
    }
}
@keyframes jh-mzc-swim {
    from { transform: translate(-14px, 14px); }
    to { transform: translate(12px, -10px); }
}
@keyframes jh-mzc-sway {
    0%, 100% { transform: rotate(-3deg) scale(1, 1); }
    25% { transform: rotate(0deg) scale(1.025, .975); }
    50% { transform: rotate(3deg) scale(.99, 1.02); }
    75% { transform: rotate(0deg) scale(1.015, .985); }
}
@keyframes jh-mzc-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .jh-card--meduza-card,
    .jh-card--meduza-card *,
    .jh-card--meduza-card *:before {
        animation: none !important;
        transition: none !important;
    }
}
/* Two tiles of the group wide (groups.css) and as high, so it shares the row
   with AmneziaWG 2.0, its outline standing 1px out of the row on every side:
   the card's 438x130 beside the tile's 213x128. */
.select-groups > .jh-vps01 {
    position: relative;
    width: calc(66.666% - 4px);
    height: 128px;
    display: flex;
}
.select-groups > .jh-vps01 > .jh-card,
.dc-c__vps01 > .jh-card {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin: -1px;
}
/* digitalcloud.pro paints its VPN protocols itself (constructor.js): the same
   card stands in a row of its own above them. */
.dc-c__vps01 {
    display: flex;
    max-width: 440px;
    min-height: 128px;
    margin: 1px 1px 14px;
}
/* Alone in its row below 1024px: as high as its text needs, never shorter than a tile. */
@media (max-width: 1023px) {
    .select-groups > .jh-vps01 {
        width: 100%;
        height: auto;
        min-height: 128px;
    }
}
.groups-software .select-groups .jh-vps01 {
    order: -2;
}
.groups-software .select-groups .jh-vpn-pinned {
    order: -1;
}
.jh-vpn-more {
    flex: 1 1 100%;
    order: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
    padding: 10px 14px;
    border: 1px solid #d5dce3;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    color: #1d2530;
    cursor: pointer;
    text-align: left;
}
.jh-vpn-more:hover {
    border-color: #3b8197;
}
.jh-vpn-more__arrow {
    transition: transform .15s;
}
.jh-vpn-more[aria-expanded="true"] .jh-vpn-more__arrow {
    transform: rotate(180deg);
}
.groups-software .select-groups .select-group.jh-vpn-rest {
    order: 1;
}
.groups-software .select-groups .select-group.jh-vpn-rest.jh-collapsed {
    display: none !important;
}

/* NAV01: promo card at the end of the VPN dropdown of the header menu. The
   menu styles every li/a of the dropdown (45px rows, centred 17px links), so
   the card resets them. */
.header__menu-list li.jh-nav-promo {
    display: block;
    height: auto;
    padding: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 1.35;
    text-transform: none;
    background: #faf8fe;
}
.header__menu-list li.jh-nav-promo:before {
    content: none;
}
.header__menu-list li.jh-nav-promo > a.jh-card,
.header__menu-list li.jh-nav-promo > a.jh-card:hover {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 280px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    text-decoration: none;
    color: #1d2530;
}
/* The same card as VPS01 in the configurator, narrower: marketing's narrow type. */
.header__menu-list li.jh-nav-promo > a.jh-card--meduza-card,
.header__menu-list li.jh-nav-promo > a.jh-card--meduza-card:hover {
    width: 320px;
    min-height: 130px;
    padding: var(--jh-card-inset);
    border-radius: 12px;
    color: #fff;
}
/* Centred under its item like the theme's dropdowns, the card's list would run
   off the left edge of a narrower screen, where the VPN item stands close to
   it: there the list hangs from the item's left edge instead. */
@media (min-width: 768px) and (max-width: 1199px) {
    .header__menu-list .jh-nav-promo-list {
        left: 0;
        transform: none;
    }
}
/* The phone menu (jhst.css, below 768px) sizes a dropdown by its items, and the
   card has no width of its own to give (it is a size container, for its narrow
   type): its list takes the menu's width. */
@media (max-width: 767px) {
    .header__menu-list .jh-nav-promo-list {
        width: auto;
        align-self: stretch;
    }
    .header__menu-list li.jh-nav-promo {
        margin: 6px 12px 0;
        border-radius: 10px;
    }
    .header__menu-list li.jh-nav-promo > a.jh-card,
    .header__menu-list li.jh-nav-promo > a.jh-card:hover {
        width: auto;
        max-width: 438px;
        margin: 0 auto;
    }
}

/* BLOG01: a native card of the feed, same box as a post card (360x240 image). */
.jh-card--BLOG01 {
    height: 100%;
    padding: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e6e1f2;
    border-radius: 12px;
    background: #fff;
}
.jh-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.jh-card--BLOG01 .jh-card__head,
.jh-card--BLOG01 .jh-card__text,
.jh-card--BLOG01 .jh-card__foot {
    padding: 0 18px;
}
.jh-card--BLOG01 .jh-card__head {
    padding-top: 14px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
}
.jh-card--BLOG01 .jh-card__title {
    font-size: 19px;
    line-height: 1.3;
}
.jh-card--BLOG01 .jh-card__text {
    margin-top: 8px;
    font-size: 14px;
}
.jh-card--BLOG01 .jh-card__foot {
    padding-bottom: 16px;
    margin-top: 12px;
}

/* ACCOUNT02: a card among the setup and security recommendations. */
.jh-card--ACCOUNT02 {
    margin-top: 14px;
    min-height: 0;
}

/* Guides (R29, SUPPORT01/02). */
.jh-guide {
    padding: 32px 0 56px;
}
.jh-guide .container {
    max-width: 960px;
}
.jh-guide__back {
    display: inline-block;
    margin-bottom: 18px;
    font-weight: 600;
    color: #3b8197;
}
.jh-guide__title {
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 14px;
}
.jh-guide__intro {
    font-size: 17px;
    line-height: 1.55;
    color: #3a4552;
    max-width: 72ch;
}
.jh-guide__h2 {
    font-size: 22px;
    line-height: 1.3;
    margin: 32px 0 12px;
}
.jh-guide__steps {
    padding-left: 22px;
    margin: 0 0 20px;
}
.jh-guide__steps > li,
.jh-guide__text {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.55;
    color: #3a4552;
    max-width: 72ch;
}
.jh-guide__apps {
    list-style: disc;
    padding-left: 20px;
    margin: 6px 0 0;
}
.jh-guide__apps li {
    margin: 2px 0;
    list-style: disc;
}
.jh-guide__pay {
    display: inline-block;
    margin-top: 4px;
    padding: 11px 22px;
    border-radius: 8px;
    background: linear-gradient(110deg, #8660c8, #ac85df);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}
.jh-guide__pay:hover,
.jh-guide__pay:focus-visible {
    filter: brightness(1.08);
    text-decoration: none;
}
.jh-guide__list {
    padding-left: 20px;
    line-height: 2;
}

@media (max-width: 767px) {
    .jh-slot {
        margin: 10px 12px;
    }
    /* Under the header of the simple theme (justvps.pro), whose flags hang
       below it on a narrow phone. */
    body > header + .jh-slot--TOP00 {
        margin-top: 24px;
    }
    .page-header > .jh-slot--TOP00 {
        margin-top: 50px;
    }
    .jh-guide__title {
        font-size: 26px;
    }
}