/* =========================================================
   MAGISTVAPK.NET
   HOMEPAGE
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    background: #ffffff;
    color: #171717;

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

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

img,
svg {
    max-width: 100%;
}


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

.site-main {
    width: 100%;
    background: #ffffff;
}

.page-anchor {
    scroll-margin-top: 110px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid #f0f0f0;
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero__container {
    width:
        min(
            1060px,
            calc(100% - 40px)
        );

    min-height: 565px;

    margin: 0 auto;

    display: flex;

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


/* =========================================================
   HERO CONTENT
========================================================= */

.hero__content {
    width: 100%;

    max-width: 820px;

    padding:
        72px 0
        64px;

    text-align: center;
}


/* =========================================================
   HERO BADGE
========================================================= */

.hero__badge {
    min-height: 31px;

    padding:
        0 13px;

    display: inline-flex;

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

    gap: 7px;

    border-radius: 999px;

    background: #fff0ea;

    color: #ad310d;

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

.hero__badge i {
    color: #ad310d;
    font-size: 10px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero__title {
    margin:
        22px 0
        0;

    padding:
        6px 4px
        10px;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            50px,
            5.3vw,
            72px
        );

    line-height: 1.14;

    font-weight: 800;

    letter-spacing:
        -.025em;

    background:
        linear-gradient(
            105deg,
            #111111 0%,
            #111111 48%,
            #9f2f0c 72%,
            #f4511e 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color: transparent;

    overflow: visible;
}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero__subtitle {
    max-width: 680px;

    margin:
        23px auto
        0;

    color: #161616;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            25px,
            2.45vw,
            34px
        );

    line-height: 1.25;

    font-weight: 700;

    letter-spacing:
        -.025em;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero__description {
    max-width: 670px;

    margin:
        18px auto
        0;

    color: #595959;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 500;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero__actions {
    margin-top: 28px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 11px;
}

.hero-btn {
    min-height: 54px;

    padding:
        0 22px;

    display: inline-flex;

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

    gap: 10px;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

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

.hero-btn:hover {
    transform: translateY(-2px);
}

.hero-btn__icon {
    width: 29px;
    height: 29px;

    flex:
        0 0 29px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    font-size: 12px;
}


/* Primary */

.hero-btn--primary {
    min-width: 200px;

    background: #f4511e;

    color: #ffffff;

    box-shadow:
        0 10px 24px
        rgba(244,81,30,.19);
}

.hero-btn--primary:hover {
    box-shadow:
        0 15px 30px
        rgba(244,81,30,.28);
}

.hero-btn--primary
.hero-btn__icon {
    background:
        rgba(255,255,255,.16);

    color: #ffffff;
}

.hero-btn--primary
.hero-btn__icon i {
    color: #ffffff;
}


/* Secondary */

.hero-btn--secondary {
    min-width: 205px;

    border:
        1px solid #dddddd;

    background: #ffffff;

    color: #202020;
}

.hero-btn--secondary:hover {
    border-color: #b93610;

    background: #fffaf8;
}

.hero-btn--secondary
.hero-btn__icon {
    background: #b93610;

    color: #ffffff;
}

.hero-btn--secondary
.hero-btn__icon i {
    color: #ffffff;
}


/* =========================================================
   HERO SECURITY STRIP
========================================================= */

.hero-security {
    width: 100%;

    max-width: 520px;

    margin:
        34px auto
        0;

    text-align: left;
}


/* Heading */

.hero-security__title {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;
}

.hero-security__shield {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: #9bd84b;

    color: #ffffff;

    font-size: 14px;
}

.hero-security__shield i {
    color: #ffffff;
}

.hero-security__title strong {
    color: #242424;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;
}


/* Security items */

.hero-security__items {
    margin-top: 13px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        12px
        22px;
}

.security-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #2b2b2b;

    font-size: 12px;

    font-weight: 500;
}

.security-item__icon {
    width: 22px;
    height: 22px;

    display: grid;

    place-items: center;

    border-radius: 5px;

    color: #ffffff;

    font-size: 11px;
}

.security-item__icon i {
    color: #ffffff;
}

.security-item__icon--blue {
    background: #4285e8;
}

.security-item__icon--green {
    background: #25b869;
}

.security-item__icon--red {
    background: #ba2737;
}


/* =========================================================
   SECTION 2
========================================================= */

.magis-features {
    width: 100%;

    padding:
        70px 0
        80px;

    background: #ffffff;
}

.magis-features__container {
    width:
        min(
            980px,
            calc(100% - 40px)
        );

    margin: 0 auto;
}


/* =========================================================
   SECTION INTRO
========================================================= */

.magis-features__intro {
    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

.magis-features__intro h2 {
    margin: 0;

    color: #202020;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            28px,
            3vw,
            38px
        );

    line-height: 1.2;

    font-weight: 700;

    letter-spacing:
        -.025em;
}

.magis-features__intro p {
    margin:
        22px auto
        0;

    color: #343434;

    font-size: 15px;

    line-height: 1.85;

    font-weight: 500;
}

.magis-main-link {
    color: #f4511e;

    font-weight: 800;

    text-decoration: none;
}

.magis-main-link:hover {
    color: #a9320d;

    text-decoration: underline;
}


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

.magis-features__heading {
    margin-top: 62px;

    text-align: center;
}

.magis-features__heading h2 {
    margin: 0;

    color: #202020;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            28px,
            3vw,
            38px
        );

    line-height: 1.2;

    font-weight: 700;

    letter-spacing:
        -.03em;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.magis-features__grid {
    margin-top: 35px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        24px
        28px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.magis-feature-card {
    min-width: 0;

    min-height: 100px;

    display: grid;

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

    overflow: hidden;

    border-radius: 15px;

    background: #ff4517;

    box-shadow:
        0 9px 22px
        rgba(255,69,23,.12);
}


/* Icon side */

.magis-feature-card__icon {
    min-width: 0;

    display: grid;

    place-items: center;

    background: #555452;
}

.magis-feature-card__icon svg {
    width: 58px;
    height: 58px;

    overflow: visible;
}


/* Text side */

.magis-feature-card__text {
    min-width: 0;

    padding:
        18px 22px;

    display: flex;

    align-items: center;
}

.magis-feature-card__text strong {
    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 800;
}


/* =========================================================
   SVG ICON STYLING
========================================================= */

.icon-fill {
    fill: #ff7540;
}

.icon-inner {
    fill: #fff7ef;
}

.icon-stroke {
    fill: none;

    stroke: #ff8a22;

    stroke-width: 3;

    stroke-linecap: round;
}

.icon-knob {
    fill: #476dff;
}


.folder-back {
    fill: #ffd83f;

    stroke: #3f3f3f;

    stroke-width: 2;
}

.folder-front {
    fill: #ff9440;

    stroke: #3f3f3f;

    stroke-width: 2;
}

.download-circle {
    fill: #f7f7f7;

    stroke: #444444;

    stroke-width: 2;
}

.download-line {
    fill: none;

    stroke: #303030;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.device-outline,
.phone-outline,
.phone-detail,
.screen-outline {
    fill: none;

    stroke: #ffa31a;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.play-fill {
    fill: #ff9a1f;
}

.hand-fill {
    fill: #ff9a1f;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .hero__container {
        width: 1120px;

        min-height: 600px;
    }

    .hero__content {
        max-width: 850px;
    }

    .magis-features__container {
        width: 1040px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .hero__container {
        width:
            calc(100% - 46px);

        min-height: 550px;
    }

    .hero__content {
        max-width: 780px;
    }

    .hero__title {
        font-size:
            clamp(
                47px,
                5.5vw,
                64px
            );

        line-height: 1.14;
    }

    .hero__subtitle {
        font-size:
            clamp(
                24px,
                3vw,
                31px
            );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero__container {
        width:
            calc(100% - 34px);

        min-height: auto;
    }

    .hero__content {
        max-width: 670px;

        padding:
            66px 0
            57px;
    }

    .hero__title {
        font-size:
            clamp(
                45px,
                8vw,
                58px
            );

        line-height: 1.15;
    }

    .hero__subtitle {
        max-width: 590px;

        font-size:
            clamp(
                23px,
                4.6vw,
                29px
            );
    }

    .hero__description {
        max-width: 600px;
    }


    /* Security */

    .hero-security {
        max-width: 470px;
    }


    /* Section 2 */

    .magis-features {
        padding:
            60px 0
            68px;
    }

    .magis-features__container {
        width:
            calc(100% - 34px);
    }

    .magis-features__intro p {
        max-width: 720px;

        font-size: 14px;
    }

    .magis-features__heading {
        margin-top: 52px;
    }

    .magis-features__grid {
        gap: 18px;
    }

    .magis-feature-card {
        min-height: 88px;

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

    .magis-feature-card__icon svg {
        width: 48px;
        height: 48px;
    }

    .magis-feature-card__text {
        padding:
            15px
            17px;
    }

    .magis-feature-card__text strong {
        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .hero__container {
        width:
            calc(100% - 28px);
    }

    .hero__content {
        padding:
            53px 0
            46px;
    }

    .hero__badge {
        min-height: 29px;

        padding:
            0 11px;

        font-size: 10px;
    }

    .hero__title {
        margin-top: 18px;

        padding:
            4px 2px
            7px;

        font-size:
            clamp(
                38px,
                10.5vw,
                47px
            );

        line-height: 1.16;

        letter-spacing:
            -.02em;
    }

    .hero__subtitle {
        margin-top: 18px;

        font-size:
            clamp(
                21px,
                6.2vw,
                26px
            );

        line-height: 1.3;
    }

    .hero__description {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* Buttons */

    .hero__actions {
        width: 100%;

        margin-top: 24px;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 9px;
    }

    .hero-btn {
        width: 100%;

        min-width: 0;

        min-height: 52px;
    }


    /* Security */

    .hero-security {
        max-width: 100%;

        margin-top: 28px;

        padding:
            0 3px;
    }

    .hero-security__title strong {
        font-size: 16px;
    }

    .hero-security__shield {
        width: 28px;
        height: 28px;

        font-size: 13px;
    }

    .hero-security__items {
        margin-top: 12px;

        display: grid;

        grid-template-columns:
            repeat(3, auto);

        justify-content: start;

        gap: 12px;
    }

    .security-item {
        gap: 5px;

        font-size: 10px;
    }

    .security-item__icon {
        width: 20px;
        height: 20px;

        font-size: 10px;
    }


    /* =====================================================
       SECTION 2 MOBILE
    ====================================================== */

    .magis-features {
        padding:
            48px 0
            56px;
    }

    .magis-features__container {
        width:
            calc(100% - 28px);
    }

    .magis-features__intro h2 {
        font-size: 25px;
    }

    .magis-features__intro p {
        margin-top: 16px;

        font-size: 13px;

        line-height: 1.75;
    }

    .magis-features__heading {
        margin-top: 42px;
    }

    .magis-features__heading h2 {
        font-size: 25px;
    }

    .magis-features__grid {
        margin-top: 25px;

        grid-template-columns:
            1fr;

        gap: 12px;
    }

    .magis-feature-card {
        min-height: 74px;

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

        border-radius: 12px;
    }

    .magis-feature-card__icon svg {
        width: 42px;
        height: 42px;
    }

    .magis-feature-card__text {
        padding:
            13px
            16px;
    }

    .magis-feature-card__text strong {
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .hero__container {
        width:
            calc(100% - 22px);
    }

    .hero__title {
        font-size: 36px;
    }

    .hero__subtitle {
        font-size: 20px;
    }

    .hero__description {
        font-size: 13px;
    }


    /* Security stack on tiny screens */

    .hero-security__items {
        grid-template-columns:
            1fr;

        gap: 8px;
    }

    .security-item {
        font-size: 11px;
    }


    /* Section 2 */

    .magis-features__container {
        width:
            calc(100% - 22px);
    }

    .magis-feature-card {
        min-height: 68px;

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

    .magis-feature-card__icon svg {
        width: 38px;
        height: 38px;
    }

    .magis-feature-card__text strong {
        font-size: 12px;
    }

}
/* =========================================================
   SECURITY VERIFIED - FINAL POLISH
   Paste at the very bottom of style.css
========================================================= */

.hero-security {
    width: 100%;
    max-width: 560px;

    margin: 34px auto 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* =========================================================
   CENTERED SECURITY TITLE
========================================================= */

.hero-security__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0 auto 13px;

    text-align: center;
}


.hero-security__shield {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #91d943;

    color: #ffffff;

    box-shadow:
        0 5px 12px
        rgba(145, 217, 67, .20);
}


.hero-security__shield i {
    color: #ffffff;
    font-size: 14px;
}


.hero-security__title strong {
    color: #202020;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 18px;
    line-height: 1.25;

    font-weight: 700;
}


/* =========================================================
   ONE COMMON BOX FOR ALL 3 ITEMS
========================================================= */

.hero-security__items {
    width: 100%;

    margin: 0 !important;

    padding: 12px 16px;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    align-items: center;

    gap: 0 !important;

    border:
        1px solid #ececec;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .055);
}


/* =========================================================
   SECURITY ITEM
========================================================= */

.security-item {
    position: relative;

    min-width: 0;

    padding:
        4px 13px;

    display: flex !important;

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

    gap: 7px;

    color: #303030;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 600;

    text-align: center;
}


/* Small separator between items */

.security-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 1px;
    height: 26px;

    transform:
        translateY(-50%);

    background: #e8e8e8;
}


/* =========================================================
   SMALL SECURITY ICONS
========================================================= */

.security-item__icon {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    color: #ffffff;

    font-size: 10px;
}


.security-item__icon i {
    color: #ffffff;
}


.security-item__icon--blue {
    background: #4285e8;
}


.security-item__icon--green {
    background: #21b86a;
}


.security-item__icon--red {
    background: #be2d3d;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

    .hero-security {
        max-width: 500px;
    }

    .hero-security__items {
        padding:
            11px 8px;
    }

    .security-item {
        padding:
            4px 8px;

        gap: 5px;

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
   Still 3 horizontal items — same sequence
========================================================= */

@media (max-width: 480px) {

    .hero-security {
        max-width: 100%;

        margin-top: 28px;
    }

    .hero-security__title {
        margin-bottom: 11px;
    }

    .hero-security__title strong {
        font-size: 16px;
    }

    .hero-security__shield {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .hero-security__items {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        padding:
            10px 4px;

        border-radius: 12px;
    }


    .security-item {
        min-width: 0;

        padding:
            4px 5px;

        flex-direction: column;

        gap: 5px;

        font-size: 9px;

        line-height: 1.2;
    }


    .security-item span:last-child {
        display: block;

        width: 100%;

        overflow-wrap: break-word;
    }


    .security-item__icon {
        width: 21px;
        height: 21px;

        flex-basis: 21px;

        font-size: 9px;
    }


    .security-item:not(:last-child)::after {
        height: 34px;
    }

}








/* =========================================================
   SECTION 3
   CONTENIDO DESTACADO
========================================================= */

.content-showcase {
    position: relative;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    padding:
        88px 0
        82px;

    background:
        linear-gradient(
            125deg,
            #ff961d 0%,
            #ff7719 40%,
            #ff5816 100%
        );
}


/* =========================================================
   SOFT WHITE FOG
========================================================= */

.content-showcase::before,
.content-showcase::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: -5%;

    width: 110%;

    height: 105px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 8% 50%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.72) 22%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 29% 35%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.56) 24%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at 52% 55%,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.50) 25%,
            transparent 61%
        ),
        radial-gradient(
            ellipse at 75% 35%,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.57) 24%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at 96% 50%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.70) 22%,
            transparent 58%
        );

    filter:
        blur(9px);

    opacity: .96;

    will-change: transform;
}


/* Top fog */

.content-showcase::before {
    top: -47px;

    animation:
        magisFogTop 9s
        ease-in-out
        infinite alternate;
}


/* Bottom fog */

.content-showcase::after {
    bottom: -54px;

    transform:
        rotate(180deg);

    animation:
        magisFogBottom 11s
        ease-in-out
        infinite alternate;
}


/* Very subtle movement */

@keyframes magisFogTop {

    0% {
        transform:
            translate3d(-8px,0,0)
            scaleX(1.01);
    }

    100% {
        transform:
            translate3d(10px,3px,0)
            scaleX(1.03);
    }

}


@keyframes magisFogBottom {

    0% {
        transform:
            rotate(180deg)
            translate3d(-7px,0,0)
            scaleX(1.02);
    }

    100% {
        transform:
            rotate(180deg)
            translate3d(9px,2px,0)
            scaleX(1.04);
    }

}


/* =========================================================
   DECORATIVE CURVES
========================================================= */

.content-showcase__arc {
    position: absolute;

    z-index: 1;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


.content-showcase__arc--top {
    width: 300px;
    height: 300px;

    top: -190px;
    right: -135px;

    border:
        2px solid
        rgba(255,255,255,.58);
}


.content-showcase__arc--bottom {
    width: 300px;
    height: 300px;

    left: -170px;
    bottom: -205px;

    border:
        2px solid
        rgba(255,255,255,.46);
}


/* =========================================================
   CONTAINER
========================================================= */

.content-showcase__container {
    position: relative;

    z-index: 10;

    width:
        min(
            1180px,
            calc(100% - 44px)
        );

    margin:
        0 auto;
}


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

.content-showcase__header {
    max-width: 880px;

    margin:
        0 auto
        27px;

    text-align: center;
}


/* Badge */

.content-showcase__badge {
    min-height: 34px;

    padding:
        0 16px;

    display: inline-flex;

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

    gap: 7px;

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius: 999px;

    background:
        rgba(255,255,255,.96);

    color: #ed5019;

    box-shadow:
        0 7px 18px
        rgba(118,35,7,.12);

    font-size: 12px;

    line-height: 1;

    font-weight: 800;
}


.content-showcase__badge i {
    color: #ef531d;
}


/* Main Heading */

.content-showcase__header h2 {
    margin:
        17px 0
        0;

    color: #ffffff;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            36px,
            3.55vw,
            47px
        );

    line-height: 1.12;

    font-weight: 800;

    letter-spacing:
        -.035em;
}


.content-showcase__header h2 span {
    color: #17202c;
}


/* Description */

.content-showcase__header p {
    max-width: 760px;

    margin:
        12px auto
        0;

    color:
        rgba(255,255,255,.96);

    font-size: 13px;

    line-height: 1.6;

    font-weight: 500;
}


/* =========================================================
   CARD GRID
========================================================= */

.content-showcase__grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    align-items: stretch;

    gap: 16px;
}


/* =========================================================
   CARD
========================================================= */

.showcase-card {
    min-width: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(255,255,255,.94);

    border-radius: 17px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 14px 30px
        rgba(139,43,7,.13);
}


/* =========================================================
   CARD ILLUSTRATION
========================================================= */

.showcase-card__visual {
    height: 140px;

    padding:
        8px 14px
        0;

    display: flex;

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

    overflow: hidden;
}


.showcase-illustration {
    display: block;

    width: 100%;

    max-width: 220px;

    height: 132px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.showcase-card__body {
    flex: 1;

    padding:
        1px 18px
        17px;

    display: flex;

    flex-direction: column;

    text-align: center;
}


.showcase-card__body h3 {
    margin: 0;

    min-height: 47px;

    display: flex;

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

    color: #151c29;

    font-family:
        "Sora",
        sans-serif;

    font-size: 17px;

    line-height: 1.28;

    font-weight: 750;

    letter-spacing:
        -.02em;
}


.showcase-card__body > p {
    max-width: 305px;

    margin:
        5px auto
        0;

    color: #59606d;

    font-size: 12px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   CARD INFORMATION STRIP
   NO ARROWS
========================================================= */

.showcase-card__detail {
    width: 100%;

    min-height: 54px;

    margin-top: 16px;

    padding:
        8px 11px;

    display: grid;

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

    align-items: center;

    gap: 9px;

    border-radius: 13px;

    background:
        #fff2eb;

    color: #454b55;

    text-align: left;
}


.showcase-detail__icon {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: #ffffff;

    color: #f4511e;

    box-shadow:
        0 3px 9px
        rgba(218,74,18,.09);

    font-size: 14px;
}


.showcase-card__detail > span:last-child {
    min-width: 0;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 600;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (hover:hover) {

    .showcase-card {
        transition:
            transform .22s ease,
            box-shadow .22s ease;
    }


    .showcase-card:hover {
        transform:
            translateY(-4px);

        box-shadow:
            0 19px 37px
            rgba(133,41,7,.18);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .content-showcase {
        padding:
            82px 0
            76px;
    }


    .content-showcase__container {
        width:
            calc(100% - 36px);
    }


    .content-showcase__grid {
        gap: 13px;
    }


    .showcase-card__body {
        padding:
            1px 15px
            15px;
    }


    .showcase-card__body h3 {
        font-size: 15px;
    }


    .showcase-card__detail > span:last-child {
        font-size: 9px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .content-showcase {
        padding:
            80px 0
            75px;
    }


    .content-showcase__container {
        width:
            calc(100% - 30px);
    }


    .content-showcase__header {
        max-width: 720px;

        margin-bottom: 24px;
    }


    .content-showcase__header h2 {
        font-size:
            clamp(
                31px,
                5vw,
                40px
            );
    }


    .content-showcase__header p {
        max-width: 640px;

        font-size: 12px;
    }


    .content-showcase__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .showcase-card:last-child {
        grid-column:
            1 / -1;

        width:
            min(
                100%,
                calc(50% - 7px)
            );

        justify-self: center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .content-showcase {
        padding:
            73px 0
            70px;
    }


    .content-showcase::before,
    .content-showcase::after {
        height: 82px;

        filter:
            blur(8px);
    }


    .content-showcase::before {
        top: -39px;
    }


    .content-showcase::after {
        bottom: -43px;
    }


    .content-showcase__container {
        width:
            calc(100% - 24px);
    }


    .content-showcase__header {
        margin-bottom: 21px;
    }


    .content-showcase__badge {
        min-height: 31px;

        padding:
            0 13px;

        font-size: 10px;
    }


    .content-showcase__header h2 {
        margin-top: 14px;

        font-size:
            clamp(
                27px,
                8vw,
                34px
            );

        line-height: 1.15;
    }


    .showcase-desktop-break {
        display: none;
    }


    .content-showcase__header p {
        margin-top: 10px;

        font-size: 11px;

        line-height: 1.6;
    }


    .content-showcase__grid {
        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .showcase-card:last-child {
        grid-column: auto;

        width: 100%;
    }


    .showcase-card {
        border-radius: 16px;
    }


    .showcase-card__visual {
        height: 134px;
    }


    .showcase-illustration {
        max-width: 210px;

        height: 127px;
    }


    .showcase-card__body {
        padding:
            0 16px
            16px;
    }


    .showcase-card__body h3 {
        min-height: 0;

        font-size: 16px;
    }


    .showcase-card__body > p {
        margin-top: 7px;

        font-size: 12px;
    }


    .showcase-card__detail {
        min-height: 52px;

        margin-top: 14px;
    }


    .showcase-card__detail > span:last-child {
        font-size: 10px;
    }


    /* Less movement on smaller devices */

    .content-showcase::before,
    .content-showcase::after {
        animation-duration: 13s;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .content-showcase__container {
        width:
            calc(100% - 20px);
    }


    .content-showcase__header h2 {
        font-size: 26px;
    }


    .showcase-card__visual {
        height: 126px;
    }


    .showcase-illustration {
        max-width: 195px;

        height: 120px;
    }


    .showcase-card__body h3 {
        font-size: 15px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .content-showcase::before,
    .content-showcase::after {
        animation: none;
    }


    .showcase-card {
        transition: none;
    }

}
/* =========================================================
   SECTION 3 - STRONGER TOP FOG
   Hides the visible section border
========================================================= */

.content-showcase::before {
    top: -72px !important;

    height: 165px !important;

    opacity: 1 !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 22%,
            rgba(255,255,255,.98) 38%,
            rgba(255,255,255,.88) 50%,
            rgba(255,255,255,.55) 66%,
            rgba(255,255,255,.18) 82%,
            transparent 100%
        ),

        radial-gradient(
            ellipse at 12% 58%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.82) 32%,
            transparent 68%
        ),

        radial-gradient(
            ellipse at 38% 48%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.78) 34%,
            transparent 70%
        ),

        radial-gradient(
            ellipse at 66% 52%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.80) 34%,
            transparent 70%
        ),

        radial-gradient(
            ellipse at 92% 58%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.84) 32%,
            transparent 68%
        ) !important;

    filter:
        blur(11px) !important;
}


/* Mobile fog remains strong but compact */

@media (max-width: 680px) {

    .content-showcase::before {
        top: -62px !important;

        height: 145px !important;

        filter:
            blur(10px) !important;
    }

}









/* =========================================================
   SECTION 4
   APK DOWNLOADS
========================================================= */

.apk-downloads {
    position: relative;

    width: 100%;

    padding:
        72px 0
        78px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.apk-downloads__container {
    width:
        min(
            1180px,
            calc(100% - 44px)
        );

    margin:
        0 auto;
}


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

.apk-downloads__header {
    max-width: 800px;

    margin:
        0 auto
        34px;

    text-align: center;
}


.apk-downloads__badge {
    min-height: 35px;

    padding:
        0 16px;

    display: inline-flex;

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

    gap: 8px;

    border-radius: 999px;

    background: #fff2ed;

    color: #ed4c16;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;
}


.apk-downloads__badge i {
    font-size: 12px;
}


.apk-downloads__header h2 {
    margin:
        17px 0
        0;

    color: #151c29;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            35px,
            3.8vw,
            48px
        );

    line-height: 1.13;

    font-weight: 800;

    letter-spacing:
        -.035em;
}


.apk-downloads__header h2 span {
    color: #f4511e;
}


.apk-downloads__header p {
    max-width: 650px;

    margin:
        12px auto
        0;

    color: #667085;

    font-size: 14px;

    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   DOWNLOAD GRID
========================================================= */

.apk-downloads__grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 14px;
}


/* =========================================================
   DOWNLOAD CARD
========================================================= */

.apk-download-card {
    min-width: 0;

    padding: 18px;

    display: flex;

    flex-direction: column;

    border:
        1px solid #eceef1;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(20,24,32,.055);
}


/* =========================================================
   TOP LABEL
========================================================= */

.apk-download-card__top {
    min-height: 31px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;
}


.apk-device-label {
    min-height: 30px;

    padding:
        0 11px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    border-radius: 999px;

    background: #fff2ed;

    color: #e94914;

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;
}


.apk-device-label i {
    font-size: 11px;
}


.apk-recommended {
    padding:
        6px 8px;

    border-radius: 999px;

    background: #eefaf2;

    color: #18964b;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.apk-download-card__content {
    padding:
        22px 1px
        18px;
}


.apk-download-card__content h3 {
    margin: 0;

    color: #151c29;

    font-family:
        "Sora",
        sans-serif;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 750;

    letter-spacing:
        -.025em;
}


.apk-download-card__content p {
    min-height: 42px;

    margin:
        8px 0
        0;

    color: #687386;

    font-size: 12px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   FILE DETAILS
========================================================= */

.apk-file-info {
    margin-top: auto;

    padding:
        11px 12px;

    display: grid;

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

    align-items: center;

    gap: 9px;

    border-radius: 12px;

    background: #fff5f1;
}


.apk-file-info > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.apk-file-info__label {
    color: #8a8f99;

    font-size: 9px;

    font-weight: 600;
}


.apk-file-info strong {
    overflow: hidden;

    color: #252b36;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.apk-file-info__divider {
    width: 1px;
    height: 27px;

    display: block;

    background: #f0dcd4;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.apk-download-button {
    min-height: 47px;

    margin-top: 12px;

    padding:
        0 14px;

    display: flex;

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

    gap: 9px;

    border-radius: 12px;

    background: #f4511e;

    color: #ffffff;

    box-shadow:
        0 8px 18px
        rgba(244,81,30,.18);

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

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


.apk-download-button i {
    color: #ffffff;

    font-size: 12px;
}


@media (hover:hover) {

    .apk-download-button:hover {
        transform:
            translateY(-2px);

        background: #dc4316;

        box-shadow:
            0 12px 24px
            rgba(244,81,30,.24);
    }


    .apk-download-card {
        transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease;
    }


    .apk-download-card:hover {
        transform:
            translateY(-4px);

        border-color: #f2d7cd;

        box-shadow:
            0 17px 34px
            rgba(20,24,32,.08);
    }

}


/* =========================================================
   VERSION HELPER
========================================================= */

.apk-version-helper {
    margin-top: 24px;

    padding:
        21px 23px;

    display: grid;

    grid-template-columns:
        minmax(220px, .85fr)
        minmax(0,1.8fr)
        auto;

    align-items: center;

    gap: 24px;

    border:
        1px solid #eceef1;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 27px
        rgba(20,24,32,.045);
}


/* Intro */

.apk-version-helper__eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #f4511e;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.apk-version-helper__intro h3 {
    margin: 0;

    color: #171d29;

    font-family:
        "Sora",
        sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 750;
}


/* Options */

.apk-version-helper__options {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 10px;
}


.apk-helper-option {
    min-width: 0;

    padding:
        11px 12px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border-radius: 12px;

    background: #fafafa;
}


.apk-helper-option__icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #fff0ea;

    color: #f4511e;

    font-size: 14px;
}


.apk-helper-option strong {
    display: block;

    color: #202631;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 800;
}


.apk-helper-option p {
    margin:
        3px 0
        0;

    color: #747b88;

    font-size: 9px;

    line-height: 1.45;

    font-weight: 500;
}


/* Installation guide */

.apk-install-guide {
    min-height: 43px;

    padding:
        0 15px;

    display: inline-flex;

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

    gap: 9px;

    border:
        1px solid #f4511e;

    border-radius: 11px;

    color: #e84916;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

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


.apk-install-guide:hover {
    background: #f4511e;

    color: #ffffff;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .apk-downloads__container {
        width:
            calc(100% - 36px);
    }


    .apk-downloads__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .apk-version-helper {
        grid-template-columns:
            1fr
            2fr;
    }


    .apk-install-guide {
        grid-column:
            1 / -1;

        justify-self: center;

        min-width: 200px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .apk-downloads {
        padding:
            60px 0
            64px;
    }


    .apk-downloads__container {
        width:
            calc(100% - 28px);
    }


    .apk-downloads__header {
        margin-bottom: 27px;
    }


    .apk-downloads__header h2 {
        font-size:
            clamp(
                30px,
                7vw,
                39px
            );
    }


    .apk-version-helper {
        grid-template-columns:
            1fr;
    }


    .apk-version-helper__options {
        grid-template-columns:
            1fr
            1fr;
    }


    .apk-install-guide {
        grid-column: auto;

        justify-self: stretch;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .apk-downloads {
        padding:
            52px 0
            56px;
    }


    .apk-downloads__container {
        width:
            calc(100% - 22px);
    }


    .apk-downloads__badge {
        min-height: 32px;

        font-size: 10px;
    }


    .apk-downloads__header h2 {
        margin-top: 14px;

        font-size: 29px;
    }


    .apk-downloads__header p {
        font-size: 12px;
    }


    .apk-downloads__grid {
        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .apk-download-card {
        padding: 16px;

        border-radius: 16px;
    }


    .apk-download-card__content {
        padding:
            18px 1px
            15px;
    }


    .apk-download-card__content h3 {
        font-size: 18px;
    }


    .apk-download-card__content p {
        min-height: 0;
    }


    .apk-version-helper {
        margin-top: 17px;

        padding: 17px;

        gap: 16px;

        border-radius: 16px;
    }


    .apk-version-helper__options {
        grid-template-columns:
            1fr;
    }

}





/* =========================================================
   MAGISTVAPK.NET
   SECTION 5 — FAQ
   FULL RESPONSIVE / ISOLATED VERSION

   Classes:
   mtvfaq-*

   Desktop  : 1200px+
   Laptop   : 992px–1199px
   Tablet   : 701px–991px
   Mobile   : 481px–700px
   Small    : <=480px
========================================================= */


/* =========================================================
   RESET ONLY INSIDE FAQ SECTION
========================================================= */

.mtvfaq,
.mtvfaq *,
.mtvfaq *::before,
.mtvfaq *::after {
    box-sizing: border-box;
}


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

.mtvfaq {
    position: relative;
    width: 100%;
    overflow: hidden;

    padding:
        30px 20px
        32px;

    background: #ffffff;

    scroll-margin-top: 100px;
}


/* =========================================================
   CONTAINER
========================================================= */

.mtvfaq__container {
    width: min(1180px, 100%);
    margin: 0 auto;
}


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

.mtvfaq__header {
    width: 100%;
    max-width: 720px;

    margin:
        0 auto
        20px;

    text-align: center;
}


/* Badge */

.mtvfaq__badge {
    min-height: 27px;

    padding:
        0 12px;

    display: inline-flex;

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

    gap: 6px;

    margin-bottom: 8px;

    border:
        1px solid #ffe0d3;

    border-radius: 999px;

    background: #fff2ec;

    color: #f4511e;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .025em;
}


.mtvfaq__badge i {
    color: #f4511e;
    font-size: 9px;
}


/* Main heading */

.mtvfaq__header h2 {
    margin:
        0 0
        8px;

    color: #111823;

    font-family:
        "Sora",
        sans-serif;

    font-size:
        clamp(
            34px,
            3.3vw,
            42px
        );

    line-height: 1.04;

    font-weight: 800;

    letter-spacing:
        -.04em;
}


.mtvfaq__header h2 span {
    color: #f4511e;
}


/* Description */

.mtvfaq__header p {
    max-width: 650px;

    margin:
        0 auto;

    color: #667085;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   MAIN TWO-COLUMN GRID
========================================================= */

.mtvfaq__grid {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 36px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.mtvfaq__visual {
    position: relative;

    width: 100%;
    height: 305px;

    display: flex;

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

    overflow: visible;

    isolation: isolate;
}


/* Orange background ambience */

.mtvfaq__glow {
    position: absolute;

    z-index: 0;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 245px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,126,38,.25) 0%,
            rgba(255,163,91,.14) 46%,
            rgba(255,218,193,.08) 62%,
            rgba(255,255,255,0) 75%
        );

    pointer-events: none;
}


/* Phone image */

.mtvfaq__phone {
    position: relative;

    z-index: 2;

    display: block;

    width: auto;
    height: auto;

    max-width: 230px;
    max-height: 295px;

    margin:
        0 auto;

    object-fit: contain;

    border-radius: 20px;

    filter:
        drop-shadow(
            0 16px 23px
            rgba(15,23,42,.13)
        );
}


/* =========================================================
   FAQ LIST
========================================================= */

.mtvfaq__list {
    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.mtvfaq__item {
    width: 100%;

    display: block;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border:
        1px solid #ece8e5;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 13px
        rgba(15,23,42,.04);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.mtvfaq__item[open] {
    border-color: #ffd1be;

    background:
        linear-gradient(
            110deg,
            #fffaf8 0%,
            #fff5f0 100%
        );

    box-shadow:
        0 7px 19px
        rgba(244,81,30,.065);
}


/* =========================================================
   REMOVE NATIVE DETAILS TRIANGLE
========================================================= */

.mtvfaq__question {
    list-style: none !important;
}


.mtvfaq__question::-webkit-details-marker {
    display: none !important;
}


.mtvfaq__question::marker {
    content: "" !important;
    font-size: 0 !important;
}


/* =========================================================
   QUESTION ROW
========================================================= */

.mtvfaq__question {
    width: 100%;

    min-height: 45px;

    padding:
        6px 12px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    outline: none;
}


/* Keyboard focus */

.mtvfaq__question:focus-visible {
    outline:
        2px solid
        rgba(244,81,30,.4);

    outline-offset: -2px;
}


/* =========================================================
   QUESTION ICON
========================================================= */

.mtvfaq__icon {
    width: 32px;
    height: 32px;

    flex:
        0 0 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #fff0e9;

    color: #f4511e;

    font-size: 11px;
}


.mtvfaq__icon i {
    color: #f4511e;
}


/* =========================================================
   QUESTION TITLE
========================================================= */

.mtvfaq__title {
    min-width: 0;

    display: block;

    color: #141a25;

    font-family:
        "Sora",
        sans-serif;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 700;

    text-align: left;
}


/* =========================================================
   PLUS / MINUS
========================================================= */

.mtvfaq__toggle {
    position: relative;

    width: 18px;
    height: 18px;

    display: block;

    justify-self: end;
}


.mtvfaq__toggle::before,
.mtvfaq__toggle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50px;

    background: #f4511e;

    transform:
        translate(
            -50%,
            -50%
        );

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


.mtvfaq__toggle::before {
    width: 13px;
    height: 2px;
}


.mtvfaq__toggle::after {
    width: 2px;
    height: 13px;
}


.mtvfaq__item[open]
.mtvfaq__toggle::after {
    opacity: 0;
}


/* =========================================================
   ANSWER
========================================================= */

.mtvfaq__answer {
    display: block;
    width: 100%;
}


.mtvfaq__answer p {
    max-width: 720px;

    margin: 0;

    padding:
        0 38px
        12px
        54px;

    color: #616b79;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 10px;

    line-height: 1.58;

    font-weight: 500;

    text-align: left;
}


/* =========================================================
   BOTTOM HELP PANEL
========================================================= */

.mtvfaq__help {
    width: 100%;

    margin-top: 16px;

    padding:
        11px 14px;

    display: flex;

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

    gap: 16px;

    border:
        1px solid #f1d7ca;

    border-radius: 13px;

    background:
        linear-gradient(
            100deg,
            #fff9f6 0%,
            #fff2ec 100%
        );
}


/* =========================================================
   HELP COPY
========================================================= */

.mtvfaq__help-copy {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}


.mtvfaq__help-icon {
    width: 37px;
    height: 37px;

    flex:
        0 0 37px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #f4511e;

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        0 5px 13px
        rgba(244,81,30,.15);
}


.mtvfaq__help-icon i {
    color: #ffffff;
}


.mtvfaq__help-copy h3 {
    margin:
        0 0
        3px;

    color: #151b25;

    font-family:
        "Sora",
        sans-serif;

    font-size: 12px;

    line-height: 1.25;

    font-weight: 750;
}


.mtvfaq__help-copy p {
    max-width: 470px;

    margin: 0;

    color: #687181;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    line-height: 1.42;
}


/* =========================================================
   HELP ACTION BUTTONS
========================================================= */

.mtvfaq__actions {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 8px;
}


.mtvfaq__btn {
    min-height: 35px;

    padding:
        0 12px;

    display: inline-flex;

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

    gap: 6px;

    border-radius: 8px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

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


/* Primary */

.mtvfaq__btn--primary {
    border:
        1px solid #f4511e;

    background: #f4511e;

    color: #ffffff;

    box-shadow:
        0 5px 12px
        rgba(244,81,30,.15);
}


/* Secondary */

.mtvfaq__btn--secondary {
    border:
        1px solid #f4511e;

    background: #ffffff;

    color: #f4511e;
}


/* Hover only on real hover devices */

@media (hover:hover) {

    .mtvfaq__item:hover {
        border-color: #f3d1c3;

        box-shadow:
            0 7px 18px
            rgba(15,23,42,.06);
    }


    .mtvfaq__btn:hover {
        transform:
            translateY(-1px);
    }


    .mtvfaq__btn--primary:hover {
        background: #dc4317;
    }


    .mtvfaq__btn--secondary:hover {
        background: #fff3ed;
    }

}


/* =========================================================
   LARGE DESKTOP
   1280px+
========================================================= */

@media (min-width: 1280px) {

    .mtvfaq {
        padding:
            28px 24px
            30px;
    }


    .mtvfaq__container {
        max-width: 1180px;
    }


    .mtvfaq__grid {
        grid-template-columns:
            320px
            minmax(0,1fr);

        gap: 40px;
    }


    .mtvfaq__visual {
        height: 310px;
    }


    .mtvfaq__phone {
        max-width: 238px;
        max-height: 302px;
    }

}


/* =========================================================
   LAPTOP
   992px — 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .mtvfaq {
        padding:
            26px 18px
            28px;
    }


    .mtvfaq__container {
        max-width: 1040px;
    }


    .mtvfaq__header {
        margin-bottom: 18px;
    }


    .mtvfaq__header h2 {
        font-size: 36px;
    }


    .mtvfaq__grid {
        grid-template-columns:
            275px
            minmax(0,1fr);

        gap: 26px;
    }


    .mtvfaq__visual {
        height: 290px;
    }


    .mtvfaq__glow {
        width: 220px;
        height: 220px;
    }


    .mtvfaq__phone {
        max-width: 205px;
        max-height: 278px;
    }


    .mtvfaq__question {
        min-height: 44px;
    }


    .mtvfaq__title {
        font-size: 11.5px;
    }


    .mtvfaq__help-copy p {
        max-width: 380px;
    }

}


/* =========================================================
   TABLET
   701px — 991px
========================================================= */

@media (min-width: 701px) and (max-width: 991px) {

    .mtvfaq {
        padding:
            48px 20px
            52px;
    }


    .mtvfaq__container {
        max-width: 760px;
    }


    .mtvfaq__header {
        max-width: 650px;

        margin-bottom: 25px;
    }


    .mtvfaq__header h2 {
        font-size:
            clamp(
                32px,
                5vw,
                38px
            );
    }


    .mtvfaq__header p {
        font-size: 11px;
    }


    /* Stack */

    .mtvfaq__grid {
        display: flex;

        flex-direction: column;

        gap: 24px;
    }


    /* Phone */

    .mtvfaq__visual {
        order: 1;

        width: 100%;
        height: 285px;
    }


    .mtvfaq__glow {
        width: 225px;
        height: 225px;
    }


    .mtvfaq__phone {
        max-width: 210px;
        max-height: 275px;
    }


    /* FAQs */

    .mtvfaq__list {
        order: 2;

        width: 100%;

        gap: 8px;
    }


    .mtvfaq__question {
        min-height: 56px;

        padding:
            8px 13px;

        grid-template-columns:
            36px
            minmax(0,1fr)
            19px;
    }


    .mtvfaq__icon {
        width: 36px;
        height: 36px;

        font-size: 12px;
    }


    .mtvfaq__title {
        font-size: 12.5px;
    }


    .mtvfaq__answer p {
        padding:
            0 15px
            15px
            59px;

        font-size: 10.5px;
    }


    /* Bottom */

    .mtvfaq__help {
        margin-top: 20px;

        padding:
            14px 16px;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;
    }


    .mtvfaq__actions {
        width: 100%;

        justify-content: flex-start;
    }


    .mtvfaq__btn {
        min-height: 40px;

        font-size: 9px;
    }

}


/* =========================================================
   MOBILE
   481px — 700px
========================================================= */

@media (min-width: 481px) and (max-width: 700px) {

    .mtvfaq {
        padding:
            42px 14px
            48px;
    }


    .mtvfaq__container {
        width: 100%;
    }


    /* Header */

    .mtvfaq__header {
        max-width: 390px;

        margin-bottom: 22px;
    }


    .mtvfaq__badge {
        min-height: 28px;

        padding:
            0 11px;

        font-size: 8.5px;
    }


    .mtvfaq__header h2 {
        font-size:
            clamp(
                29px,
                7vw,
                34px
            );

        line-height: 1.08;
    }


    .mtvfaq__header p {
        max-width: 360px;

        font-size: 10px;

        line-height: 1.55;
    }


    /* Stack */

    .mtvfaq__grid {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }


    /* Phone */

    .mtvfaq__visual {
        order: 1;

        width: 100%;

        height: 230px;
    }


    .mtvfaq__glow {
        width: 195px;
        height: 195px;
    }


    .mtvfaq__phone {
        max-width: 170px;
        max-height: 220px;
    }


    /* FAQs */

    .mtvfaq__list {
        order: 2;

        width: 100%;

        gap: 8px;
    }


    .mtvfaq__item {
        border-radius: 13px;
    }


    .mtvfaq__question {
        min-height: 56px;

        padding:
            8px 11px;

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

        gap: 9px;
    }


    .mtvfaq__icon {
        width: 35px;
        height: 35px;

        font-size: 11px;
    }


    .mtvfaq__title {
        font-size: 11.5px;

        line-height: 1.38;
    }


    .mtvfaq__answer p {
        padding:
            0 13px
            14px
            55px;

        font-size: 10px;

        line-height: 1.6;
    }


    /* Help */

    .mtvfaq__help {
        margin-top: 17px;

        padding: 14px;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

        border-radius: 14px;
    }


    .mtvfaq__help-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 14px;
    }


    .mtvfaq__help-copy h3 {
        font-size: 13px;
    }


    .mtvfaq__help-copy p {
        font-size: 9px;

        line-height: 1.5;
    }


    /* Buttons */

    .mtvfaq__actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 8px;
    }


    .mtvfaq__btn {
        width: 100%;

        min-height: 42px;

        padding:
            0 10px;

        font-size: 9px;

        white-space: normal;

        text-align: center;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

    .mtvfaq {
        padding:
            38px 11px
            44px;
    }


    .mtvfaq__container {
        width: 100%;
    }


    /* Header */

    .mtvfaq__header {
        max-width: 350px;

        margin-bottom: 20px;
    }


    .mtvfaq__badge {
        min-height: 27px;

        padding:
            0 10px;

        margin-bottom: 9px;

        font-size: 8px;
    }


    .mtvfaq__header h2 {
        font-size:
            clamp(
                27px,
                8.5vw,
                32px
            );

        line-height: 1.08;
    }


    .mtvfaq__header p {
        max-width: 330px;

        font-size: 9.5px;

        line-height: 1.55;
    }


    /* Stack */

    .mtvfaq__grid {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 18px;
    }


    /* Image */

    .mtvfaq__visual {
        order: 1;

        width: 100%;

        height: 210px;
    }


    .mtvfaq__glow {
        width: 180px;
        height: 180px;
    }


    .mtvfaq__phone {
        max-width: 155px;
        max-height: 200px;

        border-radius: 16px;
    }


    /* FAQ list */

    .mtvfaq__list {
        order: 2;

        width: 100%;

        gap: 7px;
    }


    .mtvfaq__item {
        border-radius: 12px;
    }


    .mtvfaq__question {
        min-height: 54px;

        padding:
            7px 10px;

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

        gap: 8px;
    }


    .mtvfaq__icon {
        width: 33px;
        height: 33px;

        font-size: 10px;
    }


    .mtvfaq__title {
        font-size: 10.5px;

        line-height: 1.38;
    }


    .mtvfaq__toggle {
        width: 17px;
        height: 17px;
    }


    .mtvfaq__toggle::before {
        width: 12px;
    }


    .mtvfaq__toggle::after {
        height: 12px;
    }


    .mtvfaq__answer p {
        padding:
            0 11px
            13px
            51px;

        font-size: 9.5px;

        line-height: 1.58;
    }


    /* Help */

    .mtvfaq__help {
        margin-top: 15px;

        padding: 13px;

        flex-direction: column;

        align-items: stretch;

        gap: 13px;

        border-radius: 13px;
    }


    .mtvfaq__help-copy {
        align-items: flex-start;

        gap: 9px;
    }


    .mtvfaq__help-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 13px;
    }


    .mtvfaq__help-copy h3 {
        font-size: 12px;

        line-height: 1.3;
    }


    .mtvfaq__help-copy p {
        font-size: 8.5px;

        line-height: 1.5;
    }


    /* Buttons stack vertically */

    .mtvfaq__actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 8px;
    }


    .mtvfaq__btn {
        width: 100%;

        min-height: 42px;

        padding:
            0 12px;

        font-size: 9px;

        white-space: normal;

        text-align: center;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   <= 360px
========================================================= */

@media (max-width: 360px) {

    .mtvfaq {
        padding-left: 9px;
        padding-right: 9px;
    }


    .mtvfaq__header h2 {
        font-size: 26px;
    }


    .mtvfaq__visual {
        height: 195px;
    }


    .mtvfaq__glow {
        width: 165px;
        height: 165px;
    }


    .mtvfaq__phone {
        max-width: 145px;
        max-height: 188px;
    }


    .mtvfaq__question {
        grid-template-columns:
            31px
            minmax(0,1fr)
            17px;

        padding:
            7px 8px;

        gap: 7px;
    }


    .mtvfaq__icon {
        width: 31px;
        height: 31px;
    }


    .mtvfaq__title {
        font-size: 10px;
    }


    .mtvfaq__answer p {
        padding:
            0 9px
            12px
            46px;

        font-size: 9px;
    }

}


/* =========================================================
   ACCESSIBILITY
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mtvfaq *,
    .mtvfaq *::before,
    .mtvfaq *::after {
        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}








/* =========================================================
   MAGISTVAPK.NET
   HOMEPAGE LONG-FORM ARTICLE
   DESKTOP + TABLET + MOBILE
========================================================= */

.magisartx,
.magisartx *,
.magisartx *::before,
.magisartx *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   SECTION
========================================================= */

.magisartx {
    width: 100% !important;
    margin: 0 !important;

    padding:
        54px 20px
        66px !important;

    overflow: visible !important;

    background: #ffffff !important;
}


/* =========================================================
   ARTICLE WIDTH
========================================================= */

.magisartx__inner {
    width: min(900px, 100%) !important;

    margin: 0 auto !important;

    padding: 0 !important;
}


/* =========================================================
   HEADINGS
========================================================= */

.magisartx h2,
.magisartx h3 {
    width: 100% !important;

    max-width: 820px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    text-align: center !important;

    font-family:
        "Sora",
        sans-serif !important;

    font-weight: 800 !important;

    letter-spacing:
        -.028em !important;

    color: #161a21 !important;
}


/* Black → Orange gradient */

@supports ((-webkit-background-clip:text) or (background-clip:text)) {

    .magisartx h2,
    .magisartx h3 {

        background:
            linear-gradient(
                90deg,
                #111318 0%,
                #22252c 38%,
                #d94717 72%,
                #f4511e 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;
    }

}


/* =========================================================
   H2
========================================================= */

.magisartx h2 {
    margin-top:
        44px !important;

    margin-bottom:
        15px !important;

    font-size:
        clamp(
            25px,
            2.6vw,
            32px
        ) !important;

    line-height:
        1.18 !important;
}


.magisartx h2:first-child {
    margin-top:
        0 !important;
}


/* Small divider */

.magisartx h2:not(:first-child)::before {
    content: "" !important;

    display: block !important;

    width: 42px !important;

    height: 2px !important;

    margin:
        0 auto
        17px !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            90deg,
            #1a1d23,
            #f4511e
        ) !important;
}


/* =========================================================
   H3
========================================================= */

.magisartx h3 {
    margin-top:
        28px !important;

    margin-bottom:
        11px !important;

    font-size:
        clamp(
            19px,
            1.9vw,
            23px
        ) !important;

    line-height:
        1.24 !important;
}


/* =========================================================
   BODY TEXT
========================================================= */

.magisartx p {
    width: 100% !important;

    margin:
        0 0
        16px !important;

    padding: 0 !important;

    color:
        #555d69 !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        15.5px !important;

    line-height:
        1.76 !important;

    font-weight:
        500 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;
}


/* =========================================================
   STRONG
========================================================= */

.magisartx strong {
    font-weight:
        800 !important;

    color:
        inherit !important;
}


/* =========================================================
   LINKS
========================================================= */

.magisartx a,
.magisartx a:visited,
.magisartx .magisartx__link {
    color:
        #f4511e !important;

    font-weight:
        750 !important;

    text-decoration:
        underline !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        3px !important;
}


.magisartx a strong {
    color:
        #f4511e !important;
}


@media (hover:hover) {

    .magisartx a:hover {
        color:
            #d94315 !important;
    }

}


/* =========================================================
   LISTS
========================================================= */

.magisartx ul {
    width: 100% !important;

    margin:
        4px 0
        20px !important;

    padding: 0 !important;

    list-style:
        none !important;
}


.magisartx li {
    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 0
        9px !important;

    padding:
        0 0 0
        27px !important;

    color:
        #555d69 !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        15px !important;

    line-height:
        1.68 !important;

    font-weight:
        500 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere !important;
}


/* Orange bullet */

.magisartx li::before {
    content: "" !important;

    position:
        absolute !important;

    left:
        4px !important;

    top:
        .68em !important;

    width:
        7px !important;

    height:
        7px !important;

    border-radius:
        50% !important;

    background:
        #f4511e !important;

    box-shadow:
        0 0 0
        3px
        rgba(244,81,30,.10) !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px) {

    .magisartx {
        padding:
            58px 24px
            72px !important;
    }

    .magisartx__inner {
        width:
            min(920px,100%) !important;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (min-width:701px) and (max-width:991px) {

    .magisartx {
        padding:
            48px 22px
            60px !important;
    }


    .magisartx__inner {
        width:
            min(760px,100%) !important;
    }


    .magisartx h2 {
        margin-top:
            39px !important;

        font-size:
            clamp(
                24px,
                3.8vw,
                29px
            ) !important;
    }


    .magisartx h3 {
        margin-top:
            25px !important;

        font-size:
            clamp(
                18px,
                2.8vw,
                21px
            ) !important;
    }


    .magisartx p {
        font-size:
            15px !important;

        line-height:
            1.74 !important;
    }


    .magisartx li {
        font-size:
            14.5px !important;

        line-height:
            1.66 !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

    .magisartx {
        width:
            100% !important;

        padding:
            38px 14px
            48px !important;

        background:
            #ffffff !important;

        overflow:
            visible !important;
    }


    .magisartx__inner {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;
    }


    .magisartx h2,
    .magisartx h3 {
        width:
            100% !important;

        max-width:
            100% !important;

        text-align:
            center !important;
    }


    /* MOBILE H2 */

    .magisartx h2 {
        margin-top:
            34px !important;

        margin-bottom:
            13px !important;

        font-size:
            clamp(
                22px,
                6.3vw,
                26px
            ) !important;

        line-height:
            1.20 !important;

        letter-spacing:
            -.023em !important;
    }


    .magisartx h2:first-child {
        margin-top:
            0 !important;
    }


    .magisartx h2:not(:first-child)::before {
        width:
            36px !important;

        height:
            2px !important;

        margin-bottom:
            14px !important;
    }


    /* MOBILE H3 */

    .magisartx h3 {
        margin-top:
            23px !important;

        margin-bottom:
            10px !important;

        font-size:
            clamp(
                17px,
                5vw,
                20px
            ) !important;

        line-height:
            1.25 !important;

        letter-spacing:
            -.018em !important;
    }


    /* MOBILE BODY */

    .magisartx p {
        width:
            100% !important;

        margin-bottom:
            14px !important;

        font-size:
            14px !important;

        line-height:
            1.70 !important;

        text-align:
            left !important;
    }


    .magisartx ul {
        margin:
            3px 0
            18px !important;
    }


    .magisartx li {
        margin-bottom:
            8px !important;

        padding-left:
            23px !important;

        font-size:
            13.8px !important;

        line-height:
            1.62 !important;
    }


    .magisartx li::before {
        left:
            3px !important;

        top:
            .66em !important;

        width:
            6px !important;

        height:
            6px !important;

        box-shadow:
            0 0 0
            3px
            rgba(244,81,30,.09) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px) {

    .magisartx {
        padding:
            34px 11px
            44px !important;
    }


    .magisartx h2 {
        font-size:
            21px !important;
    }


    .magisartx h3 {
        font-size:
            17px !important;
    }


    .magisartx p {
        font-size:
            13.6px !important;

        line-height:
            1.68 !important;
    }


    .magisartx li {
        font-size:
            13.4px !important;
    }

}
/* =========================================================
   MAGISTVAPK.NET
   FINAL ARTICLE MOBILE FIX
   MUST BE LAST CSS IN style.css
========================================================= */


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    /* Support BOTH current and previous article classes */

    .magisartx,
    .magis-copy-article {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding:
            38px 16px
            50px !important;

        background: #ffffff !important;

        overflow: visible !important;
    }


    .magisartx__inner,
    .magis-copy-article__inner {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }


    /* =====================================================
       ALL HEADINGS
    ====================================================== */

    .magisartx h2,
    .magisartx h3,
    .magis-copy-article h2,
    .magis-copy-article h3 {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: auto !important;

        margin-right: auto !important;

        padding: 0 !important;

        font-family:
            "Sora",
            sans-serif !important;

        font-weight: 800 !important;

        text-align: center !important;

        letter-spacing:
            -.025em !important;

        color: #15181e !important;

        background:
            linear-gradient(
                90deg,
                #111318 0%,
                #20232a 38%,
                #d94717 72%,
                #f4511e 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;
    }


    /* =====================================================
       H2
    ====================================================== */

    .magisartx h2,
    .magis-copy-article h2 {
        margin-top:
            34px !important;

        margin-bottom:
            14px !important;

        font-size:
            24px !important;

        line-height:
            1.22 !important;
    }


    .magisartx h2:first-child,
    .magis-copy-article h2:first-child {
        margin-top:
            0 !important;
    }


    /* Divider */

    .magisartx h2:not(:first-child)::before,
    .magis-copy-article h2:not(:first-child)::before {
        content: "" !important;

        display: block !important;

        width: 38px !important;

        height: 2px !important;

        margin:
            0 auto
            15px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                #171a20,
                #f4511e
            ) !important;

        -webkit-text-fill-color:
            initial !important;
    }


    /* =====================================================
       H3
    ====================================================== */

    .magisartx h3,
    .magis-copy-article h3 {
        margin-top:
            24px !important;

        margin-bottom:
            10px !important;

        font-size:
            18px !important;

        line-height:
            1.28 !important;
    }


    /* =====================================================
       PARAGRAPHS
    ====================================================== */

    .magisartx p,
    .magis-copy-article p {
        width: 100% !important;

        max-width: 100% !important;

        margin:
            0 0
            15px !important;

        padding: 0 !important;

        color:
            #555d69 !important;

        background:
            none !important;

        -webkit-text-fill-color:
            #555d69 !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            14px !important;

        line-height:
            1.72 !important;

        font-weight:
            500 !important;

        letter-spacing:
            0 !important;

        text-align:
            left !important;

        overflow-wrap:
            anywhere !important;
    }


    /* =====================================================
       STRONG
    ====================================================== */

    .magisartx p strong,
    .magis-copy-article p strong,
    .magisartx li strong,
    .magis-copy-article li strong {
        color:
            #222832 !important;

        -webkit-text-fill-color:
            #222832 !important;

        font-weight:
            800 !important;
    }


    /* =====================================================
       LINKS — FORCE ORANGE
    ====================================================== */

    .magisartx a,
    .magisartx a:visited,
    .magis-copy-article a,
    .magis-copy-article a:visited {
        color:
            #f4511e !important;

        -webkit-text-fill-color:
            #f4511e !important;

        font-size:
            inherit !important;

        font-weight:
            800 !important;

        line-height:
            inherit !important;

        text-decoration:
            underline !important;

        text-decoration-thickness:
            1px !important;

        text-underline-offset:
            3px !important;
    }


    .magisartx a strong,
    .magis-copy-article a strong {
        color:
            #f4511e !important;

        -webkit-text-fill-color:
            #f4511e !important;
    }


    /* =====================================================
       LISTS
    ====================================================== */

    .magisartx ul,
    .magis-copy-article ul {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            4px 0
            19px !important;

        padding:
            0 !important;

        list-style:
            none !important;
    }


    .magisartx li,
    .magis-copy-article li {
        position:
            relative !important;

        width:
            100% !important;

        margin:
            0 0
            8px !important;

        padding:
            0 0 0
            23px !important;

        color:
            #555d69 !important;

        background:
            none !important;

        -webkit-text-fill-color:
            #555d69 !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            13.8px !important;

        line-height:
            1.65 !important;

        font-weight:
            500 !important;

        text-align:
            left !important;
    }


    .magisartx li::before,
    .magis-copy-article li::before {
        content: "" !important;

        position:
            absolute !important;

        left:
            3px !important;

        top:
            .67em !important;

        width:
            6px !important;

        height:
            6px !important;

        border-radius:
            50% !important;

        background:
            #f4511e !important;

        box-shadow:
            0 0 0
            3px
            rgba(244,81,30,.10) !important;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media screen and (max-width: 480px) {

    .magisartx,
    .magis-copy-article {
        padding:
            34px 13px
            46px !important;
    }


    .magisartx h2,
    .magis-copy-article h2 {
        margin-top:
            31px !important;

        margin-bottom:
            13px !important;

        font-size:
            22px !important;

        line-height:
            1.23 !important;
    }


    .magisartx h3,
    .magis-copy-article h3 {
        margin-top:
            22px !important;

        margin-bottom:
            9px !important;

        font-size:
            17px !important;

        line-height:
            1.27 !important;
    }


    .magisartx p,
    .magis-copy-article p {
        margin-bottom:
            14px !important;

        font-size:
            13.5px !important;

        line-height:
            1.7 !important;
    }


    .magisartx li,
    .magis-copy-article li {
        font-size:
            13.2px !important;

        line-height:
            1.62 !important;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   360px and below
========================================================= */

@media screen and (max-width: 360px) {

    .magisartx,
    .magis-copy-article {
        padding-left:
            11px !important;

        padding-right:
            11px !important;
    }


    .magisartx h2,
    .magis-copy-article h2 {
        font-size:
            21px !important;
    }


    .magisartx h3,
    .magis-copy-article h3 {
        font-size:
            16.5px !important;
    }


    .magisartx p,
    .magis-copy-article p {
        font-size:
            13.2px !important;
    }


    .magisartx li,
    .magis-copy-article li {
        font-size:
            13px !important;
    }

}