/* ==========================================================
   FFXIVPenumbra.com
   HOMEPAGE
   PREMIUM HERO SYSTEM
   Fonts: Outfit + Roboto
   ========================================================== */


/* ==========================================================
   FONTS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Roboto:wght@400;500;600;700&display=swap');



/* ==========================================================
   HOMEPAGE BASE
   ========================================================== */

.site-main {
    width: 100%;

    overflow: hidden;

    background: #ffffff;
}



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

.home-hero {
    position: relative;

    width: 100%;

    min-height: 640px;

    overflow: hidden;

    background: #ffffff;

    isolation: isolate;
}



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

.home-hero-image {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Keeps:
       - text area clean on the left
       - castle visible in the middle
       - character visible on the right
    */
    object-position: 52% 30%;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;
}



/* ==========================================================
   TEXT SAFETY / IMAGE BLEND
   ========================================================== */

.home-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            #ffffff 0%,

            rgba(255, 255, 255, .995) 17%,

            rgba(255, 255, 255, .94) 29%,

            rgba(255, 255, 255, .76) 39%,

            rgba(255, 255, 255, .38) 49%,

            rgba(255, 255, 255, .10) 59%,

            rgba(255, 255, 255, 0) 68%
        );
}



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

.home-hero-container {
    position: relative;

    z-index: 5;

    width:
        min(1220px, calc(100% - 64px));

    min-height: 640px;

    margin:
        0 auto;
}



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

.home-hero-content {
    position: relative;

    z-index: 10;

    width: 50%;

    max-width: 570px;

    padding:
        62px 0 90px;
}



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

.home-hero-label {
    width: fit-content;

    min-height: 31px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding:
        0 12px;

    border:
        1px solid #d8e8f2;

    border-radius:
        7px;

    background:
        rgba(247, 251, 253, .94);

    color:
        #52647c;

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

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

    box-shadow:
        0 3px 12px
        rgba(15, 73, 111, .035);
}



/* Label Dot */

.home-hero-label-dot {
    width: 7px;

    height: 7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        #22a8c7;

    box-shadow:
        0 0 0 4px
        rgba(34, 168, 199, .10);
}



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

.home-hero-title {
    width: fit-content;

    margin: 0;

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

    font-size:
        clamp(72px, 5.8vw, 92px);

    line-height:
        .88;

    font-weight:
        800;

    letter-spacing:
        -4.8px;
}


.home-hero-title span {
    display: block;
}



/* FFXIV */

.home-title-first {
    color:
        #071a36;
}



/* Penumbra */

.home-title-second {
    padding-bottom:
        7px;

    color:
        #1377c9;

    background:
        none;

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



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

.home-hero-tagline {
    max-width:
        505px;

    margin:
        20px 0 0;

    color:
        #071a36;

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

    font-size:
        clamp(28px, 2.2vw, 34px);

    line-height:
        1.16;

    font-weight:
        700;

    letter-spacing:
        -1.05px;

    text-wrap:
        balance;
}


.home-hero-tagline span {
    color:
        #1377c9;
}



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

.home-hero-description {
    max-width:
        500px;

    margin:
        19px 0 0;

    color:
        #52647c;

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

    font-size:
        16px;

    line-height:
        1.7;

    font-weight:
        400;

    letter-spacing:
        .01px;
}



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

.home-hero-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        27px;
}



/* ==========================================================
   COMMON BUTTON
   ========================================================== */

.home-btn {
    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 18px;

    border-radius:
        8px;

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

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        0;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}



/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.home-btn-primary {
    min-width:
        225px;

    border:
        1px solid #1377c9;

    color:
        #ffffff;

    background:
        #1377c9;

    box-shadow:
        0 8px 20px
        rgba(19, 119, 201, .18);
}


.home-btn-primary:hover {
    transform:
        translateY(-2px);

    border-color:
        #0f69b4;

    background:
        #0f69b4;

    box-shadow:
        0 12px 25px
        rgba(19, 119, 201, .24);
}



/* ==========================================================
   SECONDARY BUTTON
   ========================================================== */

.home-btn-secondary {
    min-width:
        225px;

    border:
        1px solid #d4e0e9;

    color:
        #142a46;

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

    box-shadow:
        none;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


.home-btn-secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        #9ebed3;

    background:
        #ffffff;
}



/* ==========================================================
   HERO BUTTON ICONS
   ========================================================== */

.home-btn-download {
    width:
        20px;

    height:
        20px;
}


.home-btn-copy {
    width:
        19px;

    height:
        19px;
}


.home-btn-arrow {
    width:
        16px;

    height:
        16px;

    margin-left:
        2px;
}



/* ==========================================================
   COPY SUCCESS STATE
   ========================================================== */

.home-btn-secondary.is-copied {
    color:
        #0d729d;

    border-color:
        #95d6e4;

    background:
        #f0fcff;
}



/* ==========================================================
   SECONDARY PATH
   ========================================================== */

.home-hero-secondary-path {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        17px;

    color:
        #78879a;

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

    font-size:
        12.5px;

    line-height:
        1.4;

    font-weight:
        400;
}


.home-hero-secondary-path a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        #1377c9;

    font-weight:
        600;

    transition:
        color 180ms ease,
        gap 180ms ease;
}


.home-hero-secondary-path a:hover {
    gap:
        7px;

    color:
        #0f65aa;
}


.home-hero-secondary-path svg {
    width:
        14px;

    height:
        14px;
}



/* ==========================================================
   BOTTOM BLEND / FADE
   ========================================================== */

.home-hero-fade {
    position:
        absolute;

    z-index:
        4;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        72px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,.28) 52%,
            #ffffff 100%
        );
}



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

@media (min-width: 1450px) {

    .home-hero-container {
        width:
            min(1280px, calc(100% - 72px));
    }


    .home-hero-content {
        max-width:
            590px;

        padding-top:
            68px;
    }


    .home-hero-title {
        font-size:
            94px;
    }

}



/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1280px) {

    .home-hero-container {
        width:
            calc(100% - 48px);
    }


    .home-hero-content {
        width:
            53%;

        max-width:
            560px;
    }


    .home-hero-title {
        font-size:
            clamp(68px, 6vw, 84px);

        letter-spacing:
            -4.3px;
    }


    .home-hero-tagline {
        font-size:
            clamp(27px, 2.4vw, 32px);
    }


    .home-hero-image {
        object-position:
            55% 30%;
    }

}



/* ==========================================================
   SMALL DESKTOP
   ========================================================== */

@media (max-width: 1080px) {

    .home-hero {
        min-height:
            600px;
    }


    .home-hero-container {
        min-height:
            600px;
    }


    .home-hero-content {
        width:
            59%;

        max-width:
            530px;

        padding:
            47px 0 80px;
    }


    .home-hero-title {
        font-size:
            67px;

        letter-spacing:
            -3.8px;
    }


    .home-hero-tagline {
        max-width:
            470px;

        font-size:
            27px;
    }


    .home-hero-description {
        max-width:
            465px;

        font-size:
            15px;
    }


    .home-hero-actions {
        flex-wrap:
            wrap;
    }


    .home-btn-primary,
    .home-btn-secondary {
        min-width:
            214px;
    }


    .home-hero-image {
        object-position:
            59% 30%;
    }

}



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

@media (max-width: 900px) {

    .home-hero {
        min-height:
            620px;
    }


    .home-hero-container {
        width:
            calc(100% - 36px);

        min-height:
            620px;
    }


    /*
       We soften the artwork on tablet
       so the text remains easy to scan.
    */

    .home-hero-image {
        object-position:
            66% 29%;

        opacity:
            .66;
    }


    .home-hero::before {
        background:
            linear-gradient(
                90deg,

                rgba(255,255,255,.995) 0%,

                rgba(255,255,255,.98) 44%,

                rgba(255,255,255,.84) 68%,

                rgba(255,255,255,.34) 100%
            );
    }


    .home-hero-content {
        width:
            72%;

        max-width:
            545px;

        padding:
            45px 0 80px;
    }


    .home-hero-title {
        font-size:
            clamp(58px, 9vw, 71px);

        letter-spacing:
            -3.7px;
    }


    .home-hero-tagline {
        max-width:
            470px;

        font-size:
            clamp(25px, 4.2vw, 29px);
    }


    .home-hero-description {
        max-width:
            490px;
    }

}



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

@media (max-width: 620px) {

    .home-hero {
        min-height:
            600px;
    }


    .home-hero-container {
        width:
            calc(100% - 28px);

        min-height:
            600px;
    }


    /*
       Keep the artwork visible,
       but prioritize readability.
    */

    .home-hero-image {
        object-position:
            75% 28%;

        opacity:
            .23;
    }


    .home-hero::before {
        background:
            linear-gradient(
                90deg,

                rgba(255,255,255,.995) 0%,

                rgba(255,255,255,.985) 72%,

                rgba(255,255,255,.82) 100%
            );
    }


    .home-hero-content {
        width:
            100%;

        max-width:
            none;

        padding:
            30px 0 68px;
    }


    .home-hero-label {
        min-height:
            28px;

        margin-bottom:
            17px;

        padding:
            0 10px;

        border-radius:
            6px;

        font-size:
            9px;

        letter-spacing:
            .65px;
    }


    .home-hero-label-dot {
        width:
            6px;

        height:
            6px;

        box-shadow:
            0 0 0 3px
            rgba(34, 168, 199, .10);
    }


    .home-hero-title {
        font-size:
            clamp(49px, 16vw, 63px);

        line-height:
            .91;

        letter-spacing:
            -3px;
    }


    .home-hero-tagline {
        max-width:
            430px;

        margin-top:
            15px;

        font-size:
            clamp(22px, 6.8vw, 28px);

        line-height:
            1.18;

        letter-spacing:
            -.7px;
    }


    .home-hero-description {
        max-width:
            440px;

        margin-top:
            16px;

        font-size:
            14.5px;

        line-height:
            1.62;
    }


    .home-hero-actions {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-top:
            22px;
    }


    .home-btn,
    .home-btn-primary,
    .home-btn-secondary {
        width:
            100%;

        min-width:
            0;

        min-height:
            49px;

        padding:
            0 16px;

        font-size:
            13.5px;

        border-radius:
            8px;
    }


    .home-hero-secondary-path {
        justify-content:
            center;

        flex-wrap:
            wrap;

        margin-top:
            15px;

        font-size:
            11.5px;
    }


    .home-hero-fade {
        height:
            58px;
    }

}



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

@media (max-width: 390px) {

    .home-hero {
        min-height:
            580px;
    }


    .home-hero-container {
        min-height:
            580px;
    }


    .home-hero-content {
        padding-top:
            27px;
    }


    .home-hero-title {
        font-size:
            47px;

        letter-spacing:
            -2.5px;
    }


    .home-hero-tagline {
        font-size:
            21.5px;
    }


    .home-hero-description {
        font-size:
            14px;
    }


    .home-hero-secondary-path {
        gap:
            5px;
    }

}










/* ==========================================================
   SECTION 2
   PENUMBRA JOURNEY
   FINAL CLEAN + CLEAR ARTWORK VERSION
   ========================================================== */


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

.journey-section {
    position: relative;

    width: 100%;

    padding:
        72px 0 70px;

    background:
        #ffffff;

    overflow:
        hidden;

    scroll-margin-top:
        90px;
}



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

.journey-container {
    width:
        min(1280px, calc(100% - 64px));

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(440px, 44%)
        minmax(0, 56%);

    gap:
        34px;

    align-items:
        start;
}



/* ==========================================================
   LEFT COLUMN
   ========================================================== */

.journey-intro {
    position:
        relative;

    min-width:
        0;

    padding-top:
        5px;

    z-index:
        2;
}



/* ==========================================================
   EYEBROW
   ========================================================== */

.journey-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        22px;

    color:
        #1377c9;

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

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        2.4px;

    text-transform:
        uppercase;
}


.journey-eyebrow i {
    display:
        block;

    width:
        70px;

    height:
        1px;

    flex:
        0 0 auto;

    background:
        linear-gradient(
            90deg,
            #1377c9,
            rgba(19,119,201,0)
        );
}



/* ==========================================================
   HEADING
   ========================================================== */

.journey-heading {
    width:
        100%;

    max-width:
        540px;

    margin:
        0;

    color:
        #071a36;

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

    font-size:
        clamp(47px, 3.9vw, 58px);

    line-height:
        1.04;

    font-weight:
        800;

    letter-spacing:
        -2.3px;

    text-wrap:
        balance;
}


.journey-heading span {
    color:
        #1377c9;
}



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

.journey-description {
    max-width:
        505px;

    margin:
        20px 0 0;

    color:
        #52647c;

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

    font-size:
        15.5px;

    line-height:
        1.65;

    font-weight:
        400;
}



/* ==========================================================
   FANTASY ARTWORK AREA
   ========================================================== */

.journey-visual {
    position:
        relative;

    /*
       Larger than previous version.
    */
    width:
        calc(100% + 66px);

    max-width:
        600px;

    aspect-ratio:
        3 / 2;

    margin-top:
        8px;

    margin-left:
        -28px;

    overflow:
        visible;

    background:
        transparent;

    isolation:
        isolate;
}



/* ==========================================================
   LIGHT BLUE CONNECTION AREA
   ONLY ABOVE THE ARTWORK
   ========================================================== */

.journey-visual::before {
    content: "";

    position:
        absolute;

    z-index:
        0;

    /*
       This sits BEHIND the image.
       It never covers the castle.
    */
    left:
        7%;

    right:
        6%;

    top:
        -29px;

    height:
        94px;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,

            rgba(241,248,255,0) 0%,

            rgba(241,248,255,.24) 20%,

            rgba(241,248,255,.68) 44%,

            #f1f8ff 61%,

            rgba(241,248,255,.68) 76%,

            rgba(241,248,255,0) 100%
        );

    filter:
        blur(11px);

    border-radius:
        50%;
}



/* ==========================================================
   ARTWORK
   KEEP IMAGE CLEAR
   ========================================================== */

.journey-visual img {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    opacity:
        1;

    /*
       Very small contrast/saturation boost.
       No blur or transparency.
    */
    filter:
        contrast(1.045)
        saturate(1.035);

    image-rendering:
        auto;

    backface-visibility:
        hidden;

    transform:
        translateZ(0);

    user-select:
        none;

    -webkit-user-drag:
        none;

    transition:
        transform 400ms ease;
}


.journey-visual:hover img {
    transform:
        translateZ(0)
        scale(1.008);
}



/*
   IMPORTANT:
   Do not place any fog overlay over the actual artwork.
*/

.journey-visual::after {
    display:
        none;
}



/* ==========================================================
   RIGHT JOURNEY AREA
   ========================================================== */

.journey-path {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    padding-left:
        28px;
}



/* Old independent line */

.journey-line {
    display:
        none;
}



/* ==========================================================
   EACH STEP
   ========================================================== */

.journey-step {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    margin:
        0 0 15px;
}


.journey-step:last-of-type {
    margin-bottom:
        0;
}



/* ==========================================================
   TIMELINE CONNECTOR
   ========================================================== */

.journey-step:has(+ .journey-step)::before {
    content: "";

    position:
        absolute;

    left:
        0;

    top:
        50%;

    z-index:
        1;

    width:
        2px;

    height:
        calc(100% + 15px);

    background:
        #2788e2;

    transform:
        translateX(-50%);

    pointer-events:
        none;
}



/* ==========================================================
   SMALL DIAMOND
   ========================================================== */

.journey-step:has(+ .journey-step)::after {
    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        -11px;

    z-index:
        7;

    width:
        8px;

    height:
        8px;

    background:
        #2788e2;

    border:
        2px solid #ffffff;

    box-shadow:
        0 0 0 1px
        rgba(39,136,226,.11);

    transform:
        translate(-50%, 50%)
        rotate(45deg);

    pointer-events:
        none;
}



/* ==========================================================
   NUMBER MARKER
   ========================================================== */

.journey-step-marker {
    position:
        absolute;

    left:
        -28px;

    top:
        50%;

    z-index:
        8;

    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #c8dded;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 3px 12px
        rgba(15,69,111,.035);

    transform:
        translateY(-50%);

    pointer-events:
        none;
}


.journey-step-marker span {
    color:
        #0a3268;

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

    font-size:
        18px;

    line-height:
        1;

    font-weight:
        700;
}



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

.journey-card {
    position:
        relative;

    z-index:
        3;

    width:
        100%;

    min-height:
        100px;

    display:
        grid;

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

    gap:
        15px;

    align-items:
        center;

    padding:
        13px 17px
        13px 34px;

    border:
        1px solid #d7e6f1;

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        inherit;

    text-decoration:
        none;

    box-shadow:
        none;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.journey-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #a4cae7;

    box-shadow:
        0 9px 22px
        rgba(24,83,131,.065);
}


.journey-card:focus-visible {
    outline:
        3px solid
        rgba(19,119,201,.18);

    outline-offset:
        3px;
}



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

.journey-card-icon {
    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 54px;

    border-radius:
        50%;
}


.journey-card-icon svg {
    display:
        block;

    width:
        28px;

    height:
        28px;
}



/* Install */

.journey-card-install
.journey-card-icon {
    color:
        #ffffff;

    background:
        #155db8;
}



/* Setup */

.journey-card-setup
.journey-card-icon {
    color:
        #3c2eb5;

    background:
        #efeafb;
}



/* Mods */

.journey-card-mods
.journey-card-icon {
    color:
        #087c61;

    background:
        #def7ef;
}



/* Fix */

.journey-card-fix
.journey-card-icon {
    color:
        #c92832;

    background:
        #fde8eb;
}



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

.journey-card-content {
    min-width:
        0;
}


.journey-card-label {
    display:
        block;

    margin:
        0 0 4px;

    color:
        #1377c9;

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

    font-size:
        8.5px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        1.55px;

    text-transform:
        uppercase;
}


.journey-card h3 {
    margin:
        0;

    color:
        #071a36;

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

    font-size:
        18px;

    line-height:
        1.12;

    font-weight:
        700;

    letter-spacing:
        -.35px;
}


.journey-card p {
    max-width:
        445px;

    margin:
        5px 0 0;

    color:
        #59708e;

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

    font-size:
        12px;

    line-height:
        1.42;

    font-weight:
        400;
}



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

.journey-card-arrow {
    width:
        33px;

    height:
        33px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    justify-self:
        end;

    flex:
        0 0 33px;

    border-radius:
        50%;

    color:
        #0c559d;

    background:
        #f1f8ff;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}


.journey-card:hover
.journey-card-arrow {
    transform:
        translateX(2px);

    background:
        #e2f1fc;
}


.journey-card-arrow svg {
    width:
        16px;

    height:
        16px;
}



/* ==========================================================
   BOTTOM QUOTE
   ========================================================== */

.journey-quote {
    width:
        100%;

    margin:
        24px 0 0;

    text-align:
        center;
}


.journey-quote-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;
}


.journey-quote-line span {
    width:
        115px;

    max-width:
        29%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(19,119,201,0),
            #5fa7dc
        );
}


.journey-quote-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #5fa7dc,
            rgba(19,119,201,0)
        );
}


.journey-quote-line i {
    color:
        #1688da;

    font-style:
        normal;

    font-size:
        12px;
}


.journey-quote p {
    margin:
        10px 0 0;

    color:
        #59759b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    line-height:
        1.45;

    font-style:
        italic;
}


.journey-quote small {
    display:
        block;

    margin-top:
        6px;

    color:
        #7891ae;

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

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        2.2px;
}



/* ==========================================================
   NORMAL DESKTOP
   901px — 1400px
   ========================================================== */

@media (min-width: 901px) and (max-width: 1400px) {

    .journey-section {
        padding:
            66px 0 64px;
    }


    .journey-container {
        width:
            calc(100% - 64px);

        grid-template-columns:
            minmax(405px, 43%)
            minmax(0, 57%);

        gap:
            29px;
    }


    .journey-heading {
        max-width:
            505px;

        font-size:
            46px;

        line-height:
            1.04;

        letter-spacing:
            -2px;
    }


    .journey-description {
        max-width:
            470px;

        font-size:
            14.5px;
    }



    /* Image */

    .journey-visual {
        width:
            calc(100% + 72px);

        max-width:
            575px;

        margin-top:
            6px;

        margin-left:
            -29px;
    }


    .journey-visual::before {
        left:
            7%;

        right:
            6%;

        top:
            -26px;

        height:
            88px;
    }



    /* Timeline */

    .journey-path {
        padding-left:
            26px;
    }


    .journey-step {
        margin-bottom:
            14px;
    }


    .journey-step:has(+ .journey-step)::before {
        height:
            calc(100% + 14px);
    }


    .journey-step:has(+ .journey-step)::after {
        bottom:
            -10px;
    }


    .journey-step-marker {
        left:
            -26px;

        width:
            52px;

        height:
            52px;
    }


    .journey-step-marker span {
        font-size:
            17px;
    }



    /* Card */

    .journey-card {
        min-height:
            94px;

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

        gap:
            13px;

        padding:
            12px 15px
            12px 31px;
    }


    .journey-card-icon {
        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }


    .journey-card-icon svg {
        width:
            26px;

        height:
            26px;
    }


    .journey-card-label {
        font-size:
            8px;
    }


    .journey-card h3 {
        font-size:
            17px;
    }


    .journey-card p {
        max-width:
            430px;

        font-size:
            11.5px;

        line-height:
            1.4;
    }


    .journey-card-arrow {
        width:
            31px;

        height:
            31px;
    }


    .journey-card-arrow svg {
        width:
            15px;

        height:
            15px;
    }


    .journey-quote {
        margin-top:
            20px;
    }

}



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

@media (min-width: 1500px) {

    .journey-container {
        max-width:
            1320px;

        grid-template-columns:
            44% 56%;

        gap:
            48px;
    }


    .journey-heading {
        max-width:
            570px;

        font-size:
            58px;
    }


    .journey-description {
        max-width:
            525px;

        font-size:
            16px;
    }


    .journey-visual {
        width:
            calc(100% + 82px);

        max-width:
            640px;

        margin-left:
            -34px;
    }


    .journey-card {
        min-height:
            104px;
    }

}



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

@media (max-width: 900px) {

    .journey-section {
        padding:
            64px 0;
    }


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

        grid-template-columns:
            1fr;

        gap:
            44px;
    }


    .journey-intro {
        width:
            100%;

        max-width:
            680px;
    }


    .journey-heading {
        max-width:
            620px;

        font-size:
            clamp(40px, 7vw, 52px);
    }


    .journey-description {
        max-width:
            560px;
    }



    /* Image */

    .journey-visual {
        width:
            calc(100% + 38px);

        max-width:
            680px;

        margin-top:
            8px;

        margin-left:
            -19px;
    }


    .journey-visual::before {
        top:
            -24px;

        height:
            82px;
    }



    /* Timeline */

    .journey-path {
        width:
            100%;

        max-width:
            720px;

        margin:
            0 auto;

        padding-left:
            26px;
    }


    .journey-step-marker {
        left:
            -26px;

        width:
            52px;

        height:
            52px;
    }


    .journey-step-marker span {
        font-size:
            17px;
    }


    .journey-card {
        min-height:
            96px;

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

        gap:
            13px;

        padding:
            12px 15px
            12px 31px;
    }


    .journey-card-icon {
        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }


    .journey-card-icon svg {
        width:
            26px;

        height:
            26px;
    }


    .journey-card h3 {
        font-size:
            17px;
    }


    .journey-card p {
        font-size:
            11.8px;
    }

}



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

@media (max-width: 620px) {

    .journey-section {
        padding:
            52px 0 56px;
    }


    .journey-container {
        width:
            calc(100% - 24px);

        gap:
            36px;
    }



    /* Left */

    .journey-eyebrow {
        gap:
            10px;

        margin-bottom:
            18px;

        font-size:
            8.5px;

        letter-spacing:
            1.9px;
    }


    .journey-eyebrow i {
        width:
            42px;
    }


    .journey-heading {
        max-width:
            100%;

        font-size:
            clamp(34px, 10.5vw, 44px);

        line-height:
            1.06;

        letter-spacing:
            -1.5px;
    }


    .journey-description {
        max-width:
            100%;

        margin-top:
            16px;

        font-size:
            14px;

        line-height:
            1.6;
    }



    /* Image */

    .journey-visual {
        width:
            calc(100% + 32px);

        max-width:
            none;

        margin-top:
            7px;

        margin-left:
            -16px;
    }


    .journey-visual::before {
        left:
            5%;

        right:
            5%;

        top:
            -21px;

        height:
            72px;

        filter:
            blur(9px);
    }



    /* Timeline */

    .journey-path {
        max-width:
            100%;

        padding-left:
            22px;
    }


    .journey-step {
        margin-bottom:
            12px;
    }


    .journey-step:has(+ .journey-step)::before {
        height:
            calc(100% + 12px);
    }


    .journey-step:has(+ .journey-step)::after {
        bottom:
            -8px;

        width:
            7px;

        height:
            7px;
    }


    .journey-step-marker {
        left:
            -22px;

        width:
            44px;

        height:
            44px;
    }


    .journey-step-marker span {
        font-size:
            15px;
    }



    /* Card */

    .journey-card {
        min-height:
            0;

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

        gap:
            10px;

        padding:
            12px 11px
            12px 27px;

        border-radius:
            10px;
    }


    .journey-card-icon {
        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    .journey-card-icon svg {
        width:
            23px;

        height:
            23px;
    }


    .journey-card-label {
        margin-bottom:
            4px;

        font-size:
            7.5px;

        letter-spacing:
            1.15px;
    }


    .journey-card h3 {
        font-size:
            16px;
    }


    .journey-card p {
        margin-top:
            4px;

        font-size:
            11px;

        line-height:
            1.4;
    }


    .journey-card-arrow {
        width:
            28px;

        height:
            28px;
    }


    .journey-card-arrow svg {
        width:
            14px;

        height:
            14px;
    }



    /* Quote */

    .journey-quote {
        margin-top:
            21px;
    }


    .journey-quote p {
        font-size:
            11.5px;
    }


    .journey-quote small {
        font-size:
            7px;

        letter-spacing:
            1.8px;
    }

}



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

@media (max-width: 390px) {

    .journey-container {
        width:
            calc(100% - 20px);
    }


    .journey-heading {
        font-size:
            32px;
    }



    /* Image */

    .journey-visual {
        width:
            calc(100% + 24px);

        margin-left:
            -12px;
    }



    /* Timeline */

    .journey-path {
        padding-left:
            20px;
    }


    .journey-step-marker {
        left:
            -20px;

        width:
            40px;

        height:
            40px;
    }


    .journey-step-marker span {
        font-size:
            14px;
    }



    /* Card */

    .journey-card {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap:
            9px;

        padding:
            11px 10px
            11px 24px;
    }


    .journey-card-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }


    .journey-card-icon svg {
        width:
            21px;

        height:
            21px;
    }


    .journey-card-arrow {
        display:
            none;
    }


    .journey-card h3 {
        font-size:
            15px;
    }


    .journey-card p {
        font-size:
            10.5px;
    }

}







/* =========================================================
   SECTION 03 — PENUMBRA JOURNEY
   REFINED DESKTOP VERSION
========================================================= */

.penumbra-journey {
    position: relative;
    width: 100%;

    min-height: 545px;

    padding:
        29px 0
        35px;

    overflow: hidden;
    isolation: isolate;

    background: #f8fbff;

    scroll-margin-top: 80px;
}


/* =========================================================
   BACKGROUND
========================================================= */

.penumbra-journey-bg {
    position: absolute;

    inset: 0;

    z-index: -6;

    background-image:
        url("/assets/images/penumbra-journey-bg.webp");

    background-repeat: no-repeat;
    background-size: cover;

    background-position:
        center 48%;

    opacity: 1;
}


/* =========================================================
   CENTRAL READABILITY MIST

   Keep middle readable without hiding artwork.
========================================================= */

.penumbra-journey::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 49% 82% at 50% 48%,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.52) 36%,
            rgba(255,255,255,.24) 62%,
            rgba(255,255,255,.07) 78%,
            rgba(255,255,255,0) 100%
        );
}


/* =========================================================
   TOP + BOTTOM FOG
   Makes section boundaries disappear naturally
========================================================= */

.penumbra-journey-inner::before,
.penumbra-journey-inner::after {
    content: "";

    position: fixed;

    pointer-events: none;
}


/*
Actual fog uses section pseudo wrapper through box-shadow-free
absolute overlays below.
*/

.penumbra-journey {
    --journey-fog-height: 55px;
}


.penumbra-journey-bg::before,
.penumbra-journey-bg::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    z-index: 3;

    height: var(--journey-fog-height);

    pointer-events: none;
}


/* TOP FOG */

.penumbra-journey-bg::before {
    top: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.78) 28%,
            rgba(255,255,255,.37) 58%,
            rgba(255,255,255,.08) 82%,
            rgba(255,255,255,0) 100%
        );
}


/* BOTTOM FOG */

.penumbra-journey-bg::after {
    bottom: 0;

    background:
        linear-gradient(
            0deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.78) 28%,
            rgba(255,255,255,.36) 59%,
            rgba(255,255,255,.07) 82%,
            rgba(255,255,255,0) 100%
        );
}


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

.penumbra-journey-inner {
    position: relative;

    z-index: 5;

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

    margin:
        0 auto;
}


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

.penumbra-journey-intro {
    width: 100%;

    max-width: 720px;

    margin:
        0 auto;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.penumbra-journey-eyebrow {
    display: flex;

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

    gap: 8px;

    color: #a57827;
}


.penumbra-journey-eyebrow > span {
    width: 30px;

    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a57827
        );
}


.penumbra-journey-eyebrow > span:last-child {
    background:
        linear-gradient(
            90deg,
            #a57827,
            transparent
        );
}


.penumbra-journey-intro > small {
    display: block;

    margin-top: 5px;

    color: #806329;

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2.6px;

    text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.penumbra-journey-intro h2 {
    margin:
        12px 0 0;

    color: #07182f;

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

    font-size:
        clamp(
            36px,
            3.45vw,
            48px
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


.penumbra-journey-intro h2 span {
    color: #147fd6;
}


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

.penumbra-journey-intro p {
    max-width: 580px;

    margin:
        10px auto 0;

    color: #365876;

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

    font-size: 12px;

    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   MAIN JOURNEY PANEL
========================================================= */

.penumbra-journey-panel {
    width: 100%;

    max-width: 860px;

    margin:
        20px auto 0;

    padding: 12px;

    border:
        1px solid
        rgba(174,130,51,.42);

    border-radius: 18px;

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

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    box-shadow:
        0 15px 36px
        rgba(25,70,108,.10),
        inset 0 0 0 1px
        rgba(255,255,255,.68);
}


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

.penumbra-journey-panel-top {
    min-height: 27px;

    padding:
        0 9px
        9px;

    display: flex;

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

    border-bottom:
        1px solid
        rgba(20,83,135,.11);
}


.penumbra-journey-panel-top > span {
    color: #2f5477;

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


.penumbra-journey-panel-top small {
    color: #927239;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .9px;
}


/* =========================================================
   ROUTE BASE
========================================================= */

.penumbra-route {
    position: relative;

    z-index: 1;

    width: 100%;

    min-height: 72px;

    margin-top: 8px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(51,106,157,.14);

    border-radius: 12px;

    overflow: hidden;

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


.penumbra-route::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: .35;

    pointer-events: none;
}


.penumbra-route:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(23,93,151,.11);
}


/* =========================================================
   INSTALL ROUTE
========================================================= */

.penumbra-route-install {
    color: #0774ca;

    border-color:
        rgba(8,126,220,.29);

    background:
        rgba(241,249,255,.88);
}


.penumbra-route-install::after {
    background:
        linear-gradient(
            90deg,
            rgba(85,192,255,.16),
            transparent 40%
        );
}


/* =========================================================
   SETUP ROUTE
========================================================= */

.penumbra-route-setup {
    color: #9d701f;

    border-color:
        rgba(184,137,58,.28);

    background:
        rgba(255,251,242,.89);
}


.penumbra-route-setup::after {
    background:
        linear-gradient(
            90deg,
            rgba(226,185,102,.16),
            transparent 40%
        );
}


/* =========================================================
   FIX ROUTE
========================================================= */

.penumbra-route-fix {
    color: #6441a4;

    border-color:
        rgba(110,72,171,.25);

    background:
        rgba(249,246,255,.90);
}


.penumbra-route-fix::after {
    background:
        linear-gradient(
            90deg,
            rgba(146,102,210,.15),
            transparent 40%
        );
}


/* =========================================================
   ROUTE MARK
========================================================= */

.penumbra-route-mark {
    position: relative;

    display: flex;

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


.penumbra-route-number {
    position: absolute;

    left: -1px;
    top: -2px;

    z-index: 3;

    color: currentColor;

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

    font-size: 9px;

    font-weight: 800;
}


/* =========================================================
   FONT AWESOME ICON CIRCLE
========================================================= */

.penumbra-route-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    border:
        1.5px solid
        currentColor;

    border-radius: 50%;

    color: currentColor;

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

    box-shadow:
        inset 0 0 0 3px
        rgba(255,255,255,.60);
}


.penumbra-route-icon i {
    font-size: 18px;

    line-height: 1;

    color: currentColor;
}


/* =========================================================
   ROUTE COPY
========================================================= */

.penumbra-route-copy {
    min-width: 0;
}


.penumbra-route-best {
    display: block;

    margin-bottom: 3px;

    color: currentColor;

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

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.penumbra-route-copy h3 {
    margin: 0;

    color: #091a32;

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

    font-size: 17px;

    line-height: 1.1;

    font-weight: 750;

    letter-spacing: -.35px;
}


.penumbra-route-copy p {
    max-width: 485px;

    margin:
        4px 0 0;

    color: #5e7388;

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

    font-size: 9.7px;

    line-height: 1.4;

    font-weight: 500;
}


/* =========================================================
   CTA BUTTON BASE
========================================================= */

.penumbra-route-action {
    min-height: 34px;

    padding:
        0 13px;

    display: inline-flex;

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

    gap: 9px;

    justify-self: stretch;

    border-radius: 8px;

    color: #ffffff !important;

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

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    box-shadow:
        0 7px 17px
        rgba(8,45,83,.16);

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


.penumbra-route-action *,
.penumbra-route-action strong,
.penumbra-route-action i {
    color: #ffffff !important;

    font-weight: 800;
}


.penumbra-route:hover
.penumbra-route-action {
    transform:
        translateX(2px);

    filter:
        brightness(1.07);
}


/* =========================================================
   DARK BLUE INSTALL BUTTON
========================================================= */

.penumbra-route-install
.penumbra-route-action {
    background:
        linear-gradient(
            135deg,
            #075eac 0%,
            #004b94 100%
        );

    border:
        1px solid
        #003e7d;
}


/* =========================================================
   DARK GOLD SETUP BUTTON
========================================================= */

.penumbra-route-setup
.penumbra-route-action {
    background:
        linear-gradient(
            135deg,
            #936512 0%,
            #775007 100%
        );

    border:
        1px solid
        #674300;
}


/* =========================================================
   DARK PURPLE FIX BUTTON
========================================================= */

.penumbra-route-fix
.penumbra-route-action {
    background:
        linear-gradient(
            135deg,
            #6138a4 0%,
            #472584 100%
        );

    border:
        1px solid
        #3c1c74;
}


/* Font Awesome arrow */

.penumbra-route-action > i {
    font-size: 11px;

    margin-left: auto;
}


/* =========================================================
   UNSURE HELPER
========================================================= */

.penumbra-journey-unsure {
    margin-top: 9px;

    padding:
        8px 9px
        1px;

    display: flex;

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

    gap: 7px;

    color: #587088;
}


.penumbra-unsure-icon {
    margin-top: 1px;

    color: #147ed6;
}


.penumbra-journey-unsure p {
    margin: 0;

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

    font-size: 9px;

    line-height: 1.45;
}


.penumbra-journey-unsure strong {
    color: #203e5d;

    font-weight: 700;
}


.penumbra-journey-unsure a {
    color: #0874cc;

    font-weight: 800;

    text-decoration: underline;

    text-underline-offset: 2px;
}


/* =========================================================
   NORMAL DESKTOP — 1366PX
========================================================= */

@media
(min-width: 1001px)
and
(max-width: 1450px) {

    .penumbra-journey {
        min-height: 515px;

        padding:
            26px 0
            31px;
    }


    .penumbra-journey-inner {
        width:
            min(
                1030px,
                calc(100% - 36px)
            );
    }


    .penumbra-journey-intro {
        max-width: 690px;
    }


    .penumbra-journey-intro h2 {
        font-size: 37px;
    }


    .penumbra-journey-intro p {
        font-size: 11px;
    }


    .penumbra-journey-panel {
        max-width: 820px;

        margin-top: 17px;

        padding: 10px;
    }


    .penumbra-route {
        min-height: 68px;

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

        gap: 11px;

        padding:
            7px 10px;
    }


    .penumbra-route-icon {
        width: 42px;
        height: 42px;
    }


    .penumbra-route-icon i {
        font-size: 16px;
    }


    .penumbra-route-copy h3 {
        font-size: 16px;
    }


    .penumbra-route-copy p {
        font-size: 9px;
    }


    .penumbra-route-action {
        min-height: 32px;

        font-size: 9.2px;
    }
}


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

@media (max-width: 1000px) {

    .penumbra-journey {
        min-height: 0;

        padding:
            45px 0
            44px;
    }


    .penumbra-journey-inner {
        width:
            calc(100% - 30px);
    }


    .penumbra-journey-intro {
        max-width: 700px;
    }


    .penumbra-journey-panel {
        max-width: 850px;
    }


    .penumbra-route {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            160px;
    }
}


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

@media (max-width: 680px) {

    .penumbra-journey {
        padding:
            40px 0
            40px;
    }


    .penumbra-journey-bg {
        opacity: .42;

        background-position:
            25% center;
    }


    .penumbra-journey::before {
        background:
            rgba(255,255,255,.71);
    }


    .penumbra-journey-inner {
        width:
            calc(100% - 22px);
    }


    .penumbra-journey-intro h2 {
        font-size:
            clamp(
                31px,
                10vw,
                39px
            );

        letter-spacing: -1.4px;
    }


    .penumbra-journey-intro p {
        font-size: 12px;
    }


    .penumbra-journey-panel {
        margin-top: 20px;

        padding: 9px;

        border-radius: 15px;
    }


    .penumbra-journey-panel-top {
        display: block;

        padding:
            3px 3px
            8px;
    }


    .penumbra-journey-panel-top small {
        display: block;

        margin-top: 3px;
    }


    .penumbra-route {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap: 9px;

        padding:
            11px 9px;
    }


    .penumbra-route-icon {
        width: 42px;
        height: 42px;
    }


    .penumbra-route-icon i {
        font-size: 16px;
    }


    .penumbra-route-copy h3 {
        font-size: 16px;
    }


    .penumbra-route-copy p {
        font-size: 9.8px;
    }


    .penumbra-route-action {
        grid-column:
            1 / -1;

        width: 100%;

        min-height: 37px;

        margin-top: 3px;

        font-size: 10px;
    }


    .penumbra-journey-unsure {
        padding:
            10px 2px
            2px;
    }


    .penumbra-journey-unsure p {
        font-size: 9.5px;
    }
}










/* =========================================================
   SECTION 04 — PENUMBRA MOD SHOWCASE
========================================================= */

.mod-showcase {
    position: relative;

    width: 100%;

    padding:
        44px 0
        45px;

    overflow: hidden;

    isolation: isolate;

    background:
        #fbfdff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.mod-showcase-bg {
    position: absolute;

    inset: 0;

    z-index: -5;

    background:

        radial-gradient(
            circle at -3% 74%,
            rgba(30,139,238,.10) 0%,
            rgba(30,139,238,.035) 21%,
            transparent 39%
        ),

        radial-gradient(
            circle at 103% 8%,
            rgba(42,145,239,.09) 0%,
            rgba(42,145,239,.03) 21%,
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 52%,
            #ffffff 100%
        );
}


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

.mod-showcase-inner {
    position: relative;

    z-index: 5;

    width:
        min(
            1020px,
            calc(100% - 42px)
        );

    margin:
        0 auto;

    text-align:
        center;
}


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

.mod-showcase-intro {
    max-width:
        800px;

    margin:
        0 auto;
}


.mod-showcase-eyebrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        #c18c34;
}


.mod-showcase-eyebrow span {
    width:
        54px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c18c34
        );
}


.mod-showcase-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            #c18c34,
            transparent
        );
}


.mod-eyebrow-diamond {
    width:
        9px;

    height:
        13px;

    fill:
        #c18c34;
}


.mod-showcase-intro > small {
    display:
        block;

    margin-top:
        7px;

    color:
        #315d8b;

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

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


.mod-showcase-intro h2 {
    margin:
        14px 0 0;

    color:
        #07172e;

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

    font-size:
        clamp(
            39px,
            4vw,
            55px
        );

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -2.4px;
}


.mod-showcase-intro h2 span {
    color:
        #1181df;
}


.mod-showcase-intro p {
    max-width:
        620px;

    margin:
        12px auto 0;

    color:
        #536d87;

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

    font-size:
        13px;

    line-height:
        1.55;

    font-weight:
        500;
}


/* =========================================================
   CATEGORY TABS
========================================================= */

.mod-showcase-tabs {
    width:
        min(
            810px,
            100%
        );

    margin:
        26px auto 0;

    padding:
        5px;

    display:
        grid;

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

    gap:
        4px;

    border:
        1px solid
        rgba(36,101,162,.14);

    border-radius:
        14px;

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

    box-shadow:
        0 8px 24px
        rgba(20,74,123,.08);
}


.mod-showcase-tab {
    min-width:
        0;

    min-height:
        45px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        0;

    outline:
        none;

    border-radius:
        10px;

    color:
        #0b1b34;

    background:
        transparent;

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

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

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


.mod-tab-icon {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mod-showcase-tab:hover:not(.is-active) {
    color:
        #0877d8;

    background:
        #eef7ff;
}


.mod-showcase-tab.is-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0870db,
            #1596ef
        );

    box-shadow:
        0 8px 20px
        rgba(5,104,209,.22);
}


.mod-showcase-tab:focus-visible {
    outline:
        2px solid
        #1596ef;

    outline-offset:
        3px;
}


/* =========================================================
   COMPARISON
========================================================= */

.mod-comparison {
    position:
        relative;

    width:
        100%;

    max-width:
        920px;

    height:
        430px;

    margin:
        11px auto 0;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    border:
        8px solid
        #ffffff;

    border-radius:
        16px;

    background:
        #e5eef6;

    box-shadow:
        0 15px 38px
        rgba(18,65,108,.14),
        0 0 0 1px
        rgba(21,85,145,.08);
}


/* =========================================================
   COMPARISON SIDES
========================================================= */

.mod-comparison-side {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


.mod-comparison-side img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    opacity:
        1;

    transition:
        opacity .14s ease,
        transform .35s ease;
}


.mod-comparison-side img.is-switching {
    opacity:
        .16;
}


/* CHARACTER */

.mod-showcase[data-active-category="character"]
.mod-comparison-side img {
    object-position:
        center 20%;
}


/* GEAR */

.mod-showcase[data-active-category="gear"]
.mod-comparison-side img {
    object-position:
        center 30%;
}


/* WEAPONS */

.mod-showcase[data-active-category="weapons"]
.mod-comparison-side img {
    object-position:
        center center;
}


/* ENVIRONMENT */

.mod-showcase[data-active-category="environment"]
.mod-comparison-side img {
    object-position:
        center center;
}


/* =========================================================
   LABELS
========================================================= */

.mod-comparison-label {
    position:
        absolute;

    top:
        14px;

    z-index:
        8;

    min-width:
        120px;

    padding:
        9px 11px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        9px;

    color:
        #ffffff;

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

    text-align:
        left;
}


.label-before {
    left:
        14px;

    background:
        rgba(13,39,69,.84);
}


.label-after {
    right:
        14px;

    background:
        linear-gradient(
            135deg,
            #0755bb,
            #0789eb
        );
}


.mod-comparison-label strong {
    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;
}


.mod-comparison-label small {
    margin-top:
        3px;

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

    font-size:
        8px;
}


/* =========================================================
   CENTER SEPARATION LINE
========================================================= */

.mod-comparison-divider {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    z-index:
        20;

    width:
        2px;

    transform:
        translateX(-50%);

    pointer-events:
        none;
}


.mod-divider-line {
    position:
        absolute;

    inset:
        0;

    width:
        2px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(184,206,225,.97),
            rgba(255,255,255,.98)
        );

    box-shadow:
        0 0 0 1px
        rgba(95,141,183,.10);
}


/* =========================================================
   CENTER HANDLE
========================================================= */

.mod-divider-handle {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    color:
        #0968cf;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4f9fe
        );

    border:
        1px solid
        rgba(99,148,193,.26);

    border-radius:
        50%;

    box-shadow:
        0 9px 26px
        rgba(13,54,96,.18),
        0 0 0 6px
        rgba(255,255,255,.40);
}


.mod-divider-handle svg {
    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        #0968cf;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   DOTS
========================================================= */

.mod-showcase-dots {
    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;
}


.mod-showcase-dots span {
    width:
        7px;

    height:
        7px;

    display:
        block;

    border-radius:
        50%;

    background:
        #cadbea;

    transition:
        width .2s ease,
        background .2s ease,
        border-radius .2s ease;
}


.mod-showcase-dots span.is-active {
    width:
        20px;

    border-radius:
        20px;

    background:
        #087bea;
}


/* =========================================================
   LOWER FEATURE POINTS
========================================================= */

.mod-showcase-points {
    width:
        min(
            890px,
            100%
        );

    margin:
        20px auto 0;

    display:
        grid;

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


.mod-showcase-point {
    min-width:
        0;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    text-align:
        left;
}


.mod-showcase-point:not(:last-child) {
    border-right:
        1px solid
        rgba(45,95,140,.16);
}


/* =========================================================
   FEATURE ICON CIRCLES
========================================================= */

.mod-point-icon {
    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1.5px solid
        currentColor;

    border-radius:
        50%;

    box-sizing:
        border-box;

    box-shadow:
        inset 0 0 0 4px
        rgba(255,255,255,.70);
}


.mod-point-icon svg {
    width:
        18px;

    height:
        18px;

    display:
        block;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mod-point-icon svg .svg-fill {
    fill:
        currentColor;

    stroke:
        none;
}


/* BLUE */

.mod-point-blue {
    color:
        #087ce5;

    background:
        #edf7ff;
}


/* GREEN */

.mod-point-green {
    color:
        #069672;

    background:
        #ecfbf6;
}


/* PURPLE */

.mod-point-purple {
    color:
        #7946d5;

    background:
        #f6f0ff;
}


/* GOLD */

.mod-point-gold {
    color:
        #b77916;

    background:
        #fff8e8;
}


.mod-showcase-point strong {
    display:
        block;

    color:
        #091a33;

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

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        800;
}


.mod-showcase-point small {
    display:
        block;

    margin-top:
        3px;

    color:
        #63798f;

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

    font-size:
        8.3px;

    line-height:
        1.35;
}


/* =========================================================
   CTA
========================================================= */

.mod-showcase-actions {
    margin-top:
        22px;
}


.mod-showcase-cta {
    min-width:
        300px;

    min-height:
        46px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0750aa,
            #0788eb
        );

    border:
        1px solid
        #064b9e;

    border-radius:
        9px;

    box-shadow:
        0 10px 25px
        rgba(3,83,171,.20);

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

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

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


.mod-showcase-cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(3,83,171,.27);
}


.mod-cta-icon,
.mod-cta-arrow {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        #ffffff;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mod-cta-arrow {
    margin-left:
        4px;
}


/* =========================================================
   1366PX DESKTOP
========================================================= */

@media
(min-width: 1001px)
and
(max-width: 1450px) {

    .mod-showcase {
        padding:
            35px 0;
    }


    .mod-showcase-inner {
        width:
            min(
                900px,
                calc(100% - 36px)
            );
    }


    .mod-showcase-intro h2 {
        font-size:
            40px;
    }


    .mod-showcase-intro p {
        font-size:
            11px;
    }


    .mod-showcase-tabs {
        width:
            720px;

        margin-top:
            20px;
    }


    .mod-showcase-tab {
        min-height:
            38px;

        font-size:
            10px;
    }


    .mod-tab-icon {
        width:
            14px;

        height:
            14px;
    }


    .mod-comparison {
        max-width:
            840px;

        height:
            390px;

        border-width:
            7px;
    }


    .mod-divider-handle {
        width:
            46px;

        height:
            46px;
    }


    .mod-divider-handle svg {
        width:
            18px;

        height:
            18px;
    }


    .mod-showcase-points {
        width:
            820px;

        margin-top:
            16px;
    }


    .mod-showcase-point {
        padding:
            0 12px;
    }


    .mod-point-icon {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .mod-point-icon svg {
        width:
            16px;

        height:
            16px;
    }


    .mod-showcase-point strong {
        font-size:
            9px;
    }


    .mod-showcase-point small {
        font-size:
            7.4px;
    }


    .mod-showcase-actions {
        margin-top:
            17px;
    }


    .mod-showcase-cta {
        min-height:
            41px;

        font-size:
            10.8px;
    }

}


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

@media (max-width: 1000px) {

    .mod-showcase-inner {
        width:
            calc(100% - 30px);
    }


    .mod-comparison {
        height:
            380px;
    }


    .mod-showcase-points {
        grid-template-columns:
            repeat(2,1fr);

        gap:
            18px 0;
    }


    .mod-showcase-point:nth-child(2) {
        border-right:
            0;
    }

}


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

@media (max-width: 680px) {

    .mod-showcase {
        padding:
            40px 0;
    }


    .mod-showcase-inner {
        width:
            calc(100% - 22px);
    }


    .mod-showcase-intro h2 {
        font-size:
            clamp(
                30px,
                9.8vw,
                39px
            );

        letter-spacing:
            -1.4px;
    }


    .mod-showcase-intro p {
        font-size:
            12px;
    }


    /* TABS */

    .mod-showcase-tabs {
        width:
            100%;

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

        margin-top:
            19px;
    }


    .mod-showcase-tab {
        min-height:
            42px;

        font-size:
            10px;
    }


    /* COMPARISON STACK */

    .mod-comparison {
        height:
            auto;

        grid-template-columns:
            1fr;

        border-width:
            6px;
    }


    .mod-comparison-side {
        height:
            360px;
    }


    .mod-comparison-before {
        border-bottom:
            2px solid
            #ffffff;
    }


    .mod-comparison-divider {
        display:
            none;
    }


    .label-before,
    .label-after {
        left:
            10px;

        right:
            auto;
    }


    /* FEATURES */

    .mod-showcase-points {
        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            18px;
    }


    .mod-showcase-point {
        padding:
            0;

        border:
            0 !important;
    }


    .mod-point-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }


    /* CTA */

    .mod-showcase-cta {
        width:
            100%;

        min-width:
            0;
    }
    
}








/* =========================================================
   FFXIV PENUMBRA — SECTION 05
   TROUBLESHOOTING / QUICK FIXES
========================================================= */

.pf5-troubleshoot {
    --navy: #071b42;
    --blue: #0877f9;
    --body: #59708e;

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        105px
        24px
        108px;

    /*
     * Layer 1:
     * Bottom fade into pure white.
     *
     * Layer 2:
     * Background artwork.
     */

    background:

        linear-gradient(
            to bottom,

            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 65%,

            rgba(255,255,255,.08) 70%,
            rgba(255,255,255,.20) 75%,
            rgba(255,255,255,.40) 81%,
            rgba(255,255,255,.64) 87%,
            rgba(255,255,255,.84) 93%,
            rgba(255,255,255,.96) 97%,
            #ffffff 100%
        ),

        url("/assets/images/troubleshooting-bg.webp")
        center top / cover
        no-repeat;
}


/* =========================================================
   TOP FOG
   Previous white section → Section 05
========================================================= */

.pf5-troubleshoot::before {
    content: "";

    position: absolute;

    z-index: 1;

    top: -1px;
    left: -3%;

    width: 106%;
    height: 125px;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 330px 68px at 7% 28%,
            #ffffff 0%,
            rgba(255,255,255,.98) 42%,
            rgba(255,255,255,.58) 67%,
            transparent 90%
        ),

        radial-gradient(
            ellipse 420px 82px at 28% 22%,
            #ffffff 0%,
            rgba(255,255,255,.98) 44%,
            rgba(255,255,255,.52) 70%,
            transparent 91%
        ),

        radial-gradient(
            ellipse 500px 90px at 52% 24%,
            #ffffff 0%,
            rgba(255,255,255,.98) 44%,
            rgba(255,255,255,.48) 69%,
            transparent 91%
        ),

        radial-gradient(
            ellipse 420px 78px at 77% 26%,
            #ffffff 0%,
            rgba(255,255,255,.98) 43%,
            rgba(255,255,255,.50) 68%,
            transparent 90%
        ),

        radial-gradient(
            ellipse 300px 70px at 97% 28%,
            #ffffff 0%,
            rgba(255,255,255,.96) 43%,
            rgba(255,255,255,.48) 67%,
            transparent 89%
        ),

        linear-gradient(
            to bottom,

            #ffffff 0%,

            rgba(255,255,255,1) 20%,

            rgba(255,255,255,.95) 40%,

            rgba(255,255,255,.67) 62%,

            rgba(255,255,255,.24) 82%,

            transparent 100%
        );
}


/* =========================================================
   TOP CENTER GLOW
========================================================= */

.pf5-troubleshoot::after {
    content: "";

    position: absolute;

    z-index: 1;

    top: 69px;
    left: 50%;

    width: 760px;
    height: 120px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,

            rgba(255,255,255,.76),

            rgba(255,255,255,.28) 50%,

            transparent 76%
        );

    filter:
        blur(14px);
}


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

.pf5-inner {
    position: relative;

    z-index: 3;

    width:
        min(
            1160px,
            100%
        );

    margin:
        0 auto;
}


/* =========================================================
   BOTTOM NATURAL FOG
========================================================= */

.pf5-inner::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    bottom: -120px;

    width: 128%;
    height: 230px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 380px 95px at 5% 61%,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.74) 45%,
            rgba(255,255,255,.25) 72%,
            transparent 92%
        ),

        radial-gradient(
            ellipse 480px 110px at 29% 65%,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.76) 45%,
            rgba(255,255,255,.25) 73%,
            transparent 92%
        ),

        radial-gradient(
            ellipse 540px 120px at 52% 63%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.78) 45%,
            rgba(255,255,255,.27) 73%,
            transparent 93%
        ),

        radial-gradient(
            ellipse 470px 108px at 76% 64%,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.74) 44%,
            rgba(255,255,255,.24) 72%,
            transparent 92%
        ),

        radial-gradient(
            ellipse 340px 92px at 97% 60%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.70) 43%,
            rgba(255,255,255,.21) 71%,
            transparent 91%
        );

    filter:
        blur(12px);

    opacity:
        .97;
}


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

.pf5-head {
    max-width:
        720px;

    margin:
        0 auto
        24px;

    text-align:
        center;
}


/* =========================================================
   KICKER
========================================================= */

.pf5-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-bottom:
        11px;

    padding:
        7px
        15px;

    border:
        1px solid
        rgba(28,108,219,.13);

    border-radius:
        999px;

    color:
        #41628f;

    background:
        rgba(241,248,255,.87);

    box-shadow:
        0 5px 16px
        rgba(27,82,147,.05);

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.pf5-kicker span {
    color:
        var(--blue);
}


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

.pf5-head h2 {
    margin:
        0;

    color:
        var(--navy);

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

    font-size:
        clamp(
            35px,
            3vw,
            42px
        );

    font-weight:
        770;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


.pf5-head h2 span {
    color:
        var(--blue);
}


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

.pf5-head p {
    max-width:
        600px;

    margin:
        11px auto
        0;

    color:
        #506986;

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

    font-size:
        13.5px;

    line-height:
        1.55;
}


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

.pf5-grid {
    display:
        grid;

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

    gap:
        12px;
}


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

.pf5-card {
    --accent: #0877f9;
    --soft: rgba(8,119,249,.10);

    position:
        relative;

    display:
        grid;

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

    align-items:
        start;

    gap:
        12px;

    min-height:
        124px;

    padding:
        16px
        17px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(71,126,197,.15);

    border-radius:
        18px;

    color:
        inherit;

    text-decoration:
        none;

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

    box-shadow:
        0 9px 24px
        rgba(33,73,128,.08);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

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


/* subtle decorative circle */

.pf5-card::before {
    content: "";

    position:
        absolute;

    right:
        -50px;

    bottom:
        -65px;

    width:
        120px;

    height:
        120px;

    border-radius:
        50%;

    background:
        var(--soft);

    opacity:
        .60;

    pointer-events:
        none;
}


/* hover */

.pf5-card:hover {
    transform:
        translateY(-3px);

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

    border-color:
        rgba(30,126,241,.38);

    box-shadow:
        0 16px 34px
        rgba(19,81,157,.14);
}


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

.pf5-icon {
    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    color:
        var(--accent);

    background:
        var(--soft);

    transition:
        transform .22s ease;
}


.pf5-icon svg {
    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.pf5-card:hover
.pf5-icon {
    transform:
        translateY(-2px);
}


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

.pf5-copy {
    position:
        relative;

    z-index:
        2;

    min-width:
        0;
}


.pf5-copy h3 {
    margin:
        0
        0
        5px;

    color:
        var(--navy);

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

    font-size:
        15px;

    font-weight:
        760;

    line-height:
        1.18;

    transition:
        color .22s ease;
}


.pf5-copy p {
    margin:
        0
        0
        8px;

    color:
        var(--body);

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

    font-size:
        11.8px;

    line-height:
        1.45;
}


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

.pf5-action {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--accent);

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

    font-size:
        11.3px;

    font-weight:
        800;

    transition:
        color .22s ease;
}


.pf5-action b {
    font-size:
        14px;

    font-weight:
        500;

    transition:
        transform .22s ease;
}


.pf5-card:hover
.pf5-copy h3 {
    color:
        #0868d6;
}


.pf5-card:hover
.pf5-action {
    color:
        #086ee8;
}


.pf5-card:hover
.pf5-action b {
    transform:
        translateX(4px);
}


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

.pf5-red {
    --accent: #e63c5a;
    --soft: rgba(230,60,90,.10);
}


.pf5-blue {
    --accent: #1475ee;
    --soft: rgba(20,117,238,.10);
}


.pf5-green {
    --accent: #00a878;
    --soft: rgba(0,168,120,.10);
}


.pf5-purple {
    --accent: #7239db;
    --soft: rgba(114,57,219,.10);
}


.pf5-orange {
    --accent: #dc7512;
    --soft: rgba(220,117,18,.10);
}


.pf5-teal {
    --accent: #00a29a;
    --soft: rgba(0,162,154,.10);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.pf5-more {
    position:
        relative;

    z-index:
        4;

    margin-top:
        12px;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    padding:
        13px
        18px;

    border:
        1px solid
        rgba(57,121,205,.13);

    border-radius:
        17px;

    background:
        rgba(242,249,255,.91);

    box-shadow:
        0 8px 22px
        rgba(35,75,130,.06);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.pf5-more > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.pf5-more strong {
    color:
        var(--navy);

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

    font-size:
        16px;

    font-weight:
        760;
}


.pf5-more > div span {
    color:
        #627490;

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

    font-size:
        11.8px;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.pf5-more > a {
    min-height:
        42px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0
        19px;

    border-radius:
        999px;

    color:
        #ffffff;

    text-decoration:
        none;

    background:
        linear-gradient(
            135deg,
            #0877f9,
            #1261da
        );

    box-shadow:
        0 8px 20px
        rgba(1,96,229,.20);

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

    font-size:
        11.8px;

    font-weight:
        800;

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


.pf5-more > a:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #056ce9,
            #084fb8
        );

    box-shadow:
        0 12px 25px
        rgba(1,89,211,.28);
}


/* =========================================================
   1366 × 768 DESKTOP
========================================================= */

@media
(min-width: 981px)
and
(max-width: 1400px) {

    .pf5-troubleshoot {
        padding:
            92px
            20px
            96px;
    }


    .pf5-troubleshoot::before {
        height:
            110px;
    }


    .pf5-troubleshoot::after {
        top:
            62px;

        width:
            650px;

        height:
            105px;
    }


    .pf5-inner {
        width:
            min(
                1120px,
                100%
            );
    }


    .pf5-inner::after {
        bottom:
            -112px;

        height:
            215px;
    }


    .pf5-head {
        margin-bottom:
            20px;
    }


    .pf5-head h2 {
        font-size:
            37px;
    }


    .pf5-head p {
        font-size:
            12.8px;
    }


    .pf5-grid {
        gap:
            10px;
    }


    .pf5-card {
        min-height:
            116px;

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

        gap:
            11px;

        padding:
            14px
            15px;
    }


    .pf5-icon {
        width:
            45px;

        height:
            45px;

        border-radius:
            14px;
    }


    .pf5-icon svg {
        width:
            22px;

        height:
            22px;
    }


    .pf5-copy h3 {
        font-size:
            14.5px;
    }


    .pf5-copy p {
        font-size:
            11.2px;
    }


    .pf5-action {
        font-size:
            11px;
    }


    .pf5-more {
        min-height:
            56px;

        padding:
            11px
            16px;
    }

}


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

@media (min-width: 1500px) {

    .pf5-inner {
        width:
            min(
                1240px,
                100%
            );
    }

}


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

@media (max-width: 980px) {

    .pf5-troubleshoot {
        padding:
            94px
            18px
            92px;
    }


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


    .pf5-inner::after {
        height:
            210px;

        bottom:
            -110px;
    }

}


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

@media (max-width: 640px) {

    .pf5-troubleshoot {
        padding:
            88px
            14px
            86px;
    }


    .pf5-troubleshoot::before {
        height:
            105px;
    }


    .pf5-troubleshoot::after {
        top:
            60px;

        width:
            90%;

        height:
            90px;
    }


    .pf5-head h2 {
        font-size:
            clamp(
                31px,
                9vw,
                40px
            );
    }


    .pf5-head p {
        font-size:
            12px;
    }


    .pf5-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .pf5-card {
        min-height:
            auto;

        padding:
            16px;
    }


    .pf5-more {
        flex-direction:
            column;

        align-items:
            stretch;

        text-align:
            center;
    }


    .pf5-more > a {
        width:
            100%;
    }


    .pf5-inner::after {
        width:
            145%;

        height:
            190px;

        bottom:
            -100px;
    }

}


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

@media (max-width: 390px) {

    .pf5-troubleshoot {
        padding-left:
            12px;

        padding-right:
            12px;
    }


    .pf5-card {
        grid-template-columns:
            42px
            minmax(0,1fr);

        gap:
            10px;
    }


    .pf5-icon {
        width:
            42px;

        height:
            42px;
    }


    .pf5-icon svg {
        width:
            20px;

        height:
            20px;
    }


    .pf5-copy h3 {
        font-size:
            14px;
    }


    .pf5-copy p {
        font-size:
            11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .pf5-card,
    .pf5-icon,
    .pf5-action b,
    .pf5-more > a {
        transition:
            none !important;
    }

}
/* =========================================================
   SECTION 05 — STATIC PROBLEM CARDS
   Cards are informational only.
========================================================= */

.pf5-card {
    cursor: default;
}


/* Remove link-style card interaction */

.pf5-card:hover {
    transform: none;

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

    border-color:
        rgba(71,126,197,.15);

    box-shadow:
        0 9px 24px
        rgba(33,73,128,.08);
}


/* Keep icon completely static */

.pf5-card:hover .pf5-icon {
    transform: none;
}


/* Keep heading color unchanged */

.pf5-card:hover .pf5-copy h3 {
    color: var(--navy);
}
/* =========================================================
   SECTION 05 — COMPACT STATIC CARDS
   Better balance after removing "View Fixes"
========================================================= */

.pf5-card {
    min-height: 102px;

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

    align-items: center;

    gap: 12px;

    padding:
        14px
        16px;
}


/* Icon fits the new compact card */

.pf5-icon {
    width: 44px;
    height: 44px;

    border-radius: 13px;

    align-self: center;
}


.pf5-icon svg {
    width: 21px;
    height: 21px;
}


/* Vertically balance the text */

.pf5-copy {
    align-self: center;
}


/* Heading */

.pf5-copy h3 {
    margin:
        0 0
        4px;

    font-size: 15px;

    line-height: 1.2;
}


/* Description */

.pf5-copy p {
    margin: 0;

    font-size: 11.8px;

    line-height: 1.42;
}


/* Static cards — no clickable feeling */

.pf5-card {
    cursor: default;
}


.pf5-card:hover {
    transform: none;

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

    border-color:
        rgba(71,126,197,.15);

    box-shadow:
        0 9px 24px
        rgba(33,73,128,.08);
}


.pf5-card:hover .pf5-icon {
    transform: none;
}


.pf5-card:hover .pf5-copy h3 {
    color: var(--navy);
}


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

@media (max-width: 980px) {

    .pf5-card {
        min-height: 100px;

        padding:
            14px
            15px;
    }

}


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

@media (max-width: 640px) {

    .pf5-card {
        min-height: auto;

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

        padding:
            14px;

        gap: 11px;
    }


    .pf5-icon {
        width: 42px;
        height: 42px;
    }


    .pf5-icon svg {
        width: 20px;
        height: 20px;
    }


    .pf5-copy h3 {
        font-size: 14.5px;
    }


    .pf5-copy p {
        font-size: 11.2px;
    }

}









/* =========================================================
   HOMEPAGE CONTENT — FFXIV PENUMBRA
========================================================= */

.pen-content-section {
    --pc-navy: #071a40;
    --pc-blue: #0877ef;
    --pc-copy: #536984;
    --pc-border: rgba(48,113,188,.15);

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        68px
        22px
        72px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcff 46%,
            #ffffff 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.pen-content-bg {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at -5% 24%,
            rgba(29,132,230,.075),
            transparent 28%
        ),

        radial-gradient(
            circle at 105% 68%,
            rgba(35,139,236,.07),
            transparent 29%
        );
}


/* =========================================================
   WRAPPER
========================================================= */

.pen-content-wrap {
    width:
        min(
            1180px,
            100%
        );

    margin:
        0 auto;
}


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

.pen-content-header {
    max-width:
        830px;

    margin:
        0 auto
        46px;

    text-align:
        center;
}


.pen-content-kicker {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        14px;
}


.pen-content-kicker > span {
    width:
        45px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #258be9
        );
}


.pen-content-kicker > span:last-child {
    background:
        linear-gradient(
            90deg,
            #258be9,
            transparent
        );
}


.pen-content-kicker strong {
    color:
        #3971a7;

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .19em;
}


.pen-content-main-title {
    margin:
        0;

    color:
        var(--pc-navy);

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

    font-size:
        clamp(
            43px,
            4vw,
            58px
        );

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -.04em;
}


.pen-content-lead {
    max-width:
        760px;

    margin:
        17px auto
        0;

    color:
        var(--pc-copy);

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

    font-size:
        15px;

    line-height:
        1.72;

    font-weight:
        500;
}


/* =========================================================
   ARTICLE + SIDEBAR LAYOUT
========================================================= */

.pen-content-layout {
    display:
        grid;

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

    align-items:
        start;

    gap:
        54px;
}


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

.pen-content-article {
    min-width:
        0;
}


/* =========================================================
   DOCUMENT BLOCK
========================================================= */

.pen-doc-block {
    padding:
        0
        0
        38px;

    margin:
        0
        0
        38px;

    border-bottom:
        1px solid
        rgba(38,106,180,.12);

    scroll-margin-top:
        120px;
}


.pen-doc-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        16px;
}


.pen-doc-number {
    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        #0877e9;

    background:
        #ecf6ff;

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

    font-size:
        9px;

    font-weight:
        800;
}


.pen-doc-heading h2 {
    margin:
        0;

    color:
        var(--pc-navy);

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

    font-size:
        27px;

    line-height:
        1.18;

    font-weight:
        760;

    letter-spacing:
        -.025em;
}


.pen-doc-block > p,
.pen-doc-subsection > p {
    margin:
        0
        0
        15px;

    color:
        var(--pc-copy);

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

    font-size:
        14px;

    line-height:
        1.78;
}


.pen-doc-block strong,
.pen-doc-subsection strong {
    color:
        #122b51;
}


.pen-doc-block p a,
.pen-doc-subsection p a {
    color:
        #0877e9;

    font-weight:
        700;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(8,119,233,.24);
}


.pen-doc-block p a:hover,
.pen-doc-subsection p a:hover {
    border-color:
        #0877e9;
}


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

.pen-doc-subsection {
    margin-top:
        27px;

    padding-left:
        20px;

    border-left:
        2px solid
        rgba(24,130,228,.16);

    scroll-margin-top:
        120px;
}


.pen-doc-subsection h3 {
    margin:
        0
        0
        10px;

    color:
        #0a214a;

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

    font-size:
        19px;

    line-height:
        1.25;

    font-weight:
        750;
}


/* =========================================================
   INFO NOTE
========================================================= */

.pen-doc-note {
    margin-top:
        21px;

    padding:
        15px
        17px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    border:
        1px solid
        rgba(34,132,221,.15);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #f1f8ff,
            #fbfdff
        );
}


.pen-doc-note-icon {
    width:
        33px;

    height:
        33px;

    flex:
        0 0 33px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #087be7;

    background:
        #e1f1ff;
}


.pen-doc-note-icon svg {
    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.pen-doc-note p {
    margin:
        4px 0
        0;

    color:
        #45617d;

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

    font-size:
        12.5px;

    line-height:
        1.6;
}


/* =========================================================
   USEFUL CHECKS
========================================================= */

.pen-content-checks {
    display:
        grid;

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

    gap:
        9px
        12px;

    margin:
        22px
        0;
}


.pen-content-checks > div {
    min-height:
        44px;

    padding:
        10px
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        rgba(46,113,185,.12);

    border-radius:
        10px;

    color:
        #405a76;

    background:
        rgba(249,252,255,.85);

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

    font-size:
        12px;

    font-weight:
        600;
}


.pen-content-checks span {
    color:
        #0b8bde;

    font-weight:
        900;
}


/* =========================================================
   SIDEBAR
========================================================= */

.pen-content-sidebar {
    min-width:
        0;
}


.pen-content-sticky {
    position:
        sticky;

    top:
        105px;
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.pen-toc {
    padding:
        18px;

    border:
        1px solid
        var(--pc-border);

    border-radius:
        16px;

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

    box-shadow:
        0 9px 28px
        rgba(28,76,128,.065);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.pen-toc-title {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        13px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        rgba(50,111,177,.12);
}


.pen-toc-title-icon {
    width:
        30px;

    height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #0879e6;

    background:
        #eaf5ff;

    border-radius:
        9px;
}


.pen-toc-title-icon svg {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;
}


.pen-toc-title strong {
    color:
        #0b2349;

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

    font-size:
        14px;

    font-weight:
        760;
}


.pen-toc > a {
    position:
        relative;

    display:
        block;

    padding:
        7px
        7px
        7px
        14px;

    border-radius:
        7px;

    color:
        #60718a;

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

    font-size:
        11.3px;

    line-height:
        1.35;

    font-weight:
        600;

    text-decoration:
        none;

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


.pen-toc > a::before {
    content: "";

    position:
        absolute;

    left:
        3px;

    top:
        50%;

    width:
        3px;

    height:
        0;

    transform:
        translateY(-50%);

    border-radius:
        5px;

    background:
        #087bea;

    transition:
        height .18s ease;
}


.pen-toc > a:hover,
.pen-toc > a.is-active {
    color:
        #0875df;

    background:
        #f2f8ff;
}


.pen-toc > a.is-active::before {
    height:
        18px;
}


.pen-toc > .pen-toc-child {
    padding-left:
        25px;

    font-size:
        10.3px;

    color:
        #7b899d;
}


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

.pen-quick-links {
    margin-top:
        12px;

    padding:
        17px;

    border:
        1px solid
        rgba(48,113,188,.13);

    border-radius:
        15px;

    background:
        #f5faff;
}


.pen-quick-links > small {
    display:
        block;

    margin-bottom:
        9px;

    color:
        #7890a9;

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

    font-size:
        8.5px;

    font-weight:
        800;

    letter-spacing:
        .17em;
}


.pen-quick-links > a {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #173358;

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

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(50,110,174,.09);
}


.pen-quick-links > a:last-child {
    border-bottom:
        0;
}


.pen-quick-links > a b {
    color:
        #0b7be6;

    transition:
        transform .18s ease;
}


.pen-quick-links > a:hover b {
    transform:
        translateX(3px);
}


/* =========================================================
   BOTTOM NEXT STEPS
========================================================= */

.pen-content-next {
    padding:
        20px;

    display:
        grid;

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

    gap:
        20px;

    align-items:
        center;

    border:
        1px solid
        rgba(32,121,204,.14);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #eff8ff,
            #fbfdff
        );
}


.pen-content-next-copy small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #2783d9;

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

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .17em;
}


.pen-content-next-copy strong {
    display:
        block;

    color:
        #09234c;

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

    font-size:
        18px;

    font-weight:
        760;
}


.pen-content-next-copy p {
    margin:
        4px 0
        0;

    color:
        #657990;

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

    font-size:
        10.5px;

    line-height:
        1.45;
}


.pen-content-next-links {
    display:
        grid;

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

    gap:
        8px;
}


.pen-content-next-links a {
    min-height:
        39px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #14508c;

    background:
        #ffffff;

    border:
        1px solid
        rgba(35,118,197,.13);

    border-radius:
        9px;

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

    font-size:
        10.5px;

    font-weight:
        800;

    text-decoration:
        none;

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


.pen-content-next-links a span {
    color:
        #0877e9;
}


.pen-content-next-links a:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(8,119,233,.35);
}


/* =========================================================
   1366 DESKTOP
========================================================= */

@media
(min-width: 981px)
and
(max-width: 1400px) {

    .pen-content-section {
        padding:
            54px
            20px
            60px;
    }


    .pen-content-wrap {
        width:
            min(
                1080px,
                100%
            );
    }


    .pen-content-header {
        margin-bottom:
            38px;
    }


    .pen-content-main-title {
        font-size:
            44px;
    }


    .pen-content-lead {
        font-size:
            13px;
    }


    .pen-content-layout {
        grid-template-columns:
            minmax(0,1fr)
            255px;

        gap:
            38px;
    }


    .pen-doc-heading h2 {
        font-size:
            24px;
    }


    .pen-doc-block > p,
    .pen-doc-subsection > p {
        font-size:
            12.7px;
    }


    .pen-doc-subsection h3 {
        font-size:
            17px;
    }


    .pen-content-sticky {
        top:
            90px;
    }

}


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

@media (max-width: 980px) {

    .pen-content-layout {
        grid-template-columns:
            1fr;
    }


    .pen-content-sidebar {
        order:
            -1;
    }


    .pen-content-sticky {
        position:
            static;
    }


    .pen-toc {
        padding:
            15px;
    }


    .pen-quick-links {
        display:
            none;
    }


    .pen-content-next {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 680px) {

    .pen-content-section {
        padding:
            44px
            14px
            50px;
    }


    .pen-content-header {
        margin-bottom:
            28px;
    }


    .pen-content-main-title {
        font-size:
            clamp(
                35px,
                11vw,
                45px
            );
    }


    .pen-content-lead {
        font-size:
            12px;

        line-height:
            1.65;
    }


    .pen-content-kicker > span {
        width:
            25px;
    }


    .pen-doc-block {
        padding-bottom:
            28px;

        margin-bottom:
            28px;
    }


    .pen-doc-heading {
        align-items:
            flex-start;
    }


    .pen-doc-heading h2 {
        font-size:
            21px;
    }


    .pen-doc-block > p,
    .pen-doc-subsection > p {
        font-size:
            12px;

        line-height:
            1.72;
    }


    .pen-doc-subsection {
        padding-left:
            14px;
    }


    .pen-doc-subsection h3 {
        font-size:
            16.5px;
    }


    .pen-content-checks {
        grid-template-columns:
            1fr;
    }


    .pen-toc > a {
        font-size:
            10.5px;
    }


    .pen-content-next-links {
        grid-template-columns:
            1fr;
    }

}
/* =========================================================
   FFXIV PENUMBRA CONTENT
   FINAL DARK TOC + CONTENT BOX + SAFE SCROLL ANIMATION
   ---------------------------------------------------------
   - Keeps full left article inside one premium box
   - Slightly darker content-card background
   - Dark sticky TOC remains separate
   - Scroll reveal applies ONLY to article content
   - Content stays visible if animation is unsupported
========================================================= */


/* =========================================================
   MAIN LEFT CONTENT BOX
========================================================= */

.pen-content-article {
    position: relative;
    overflow: hidden;

    min-width: 0;

    padding:
        38px
        40px
        40px;

    border:
        1px solid
        rgba(37, 119, 198, .22);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #e6f1fb 0%,
            #dcecf8 48%,
            #edf6fd 100%
        );

    box-shadow:
        0 18px 48px
        rgba(13, 55, 100, .10);
}


/* Top-right soft blue glow */

.pen-content-article::before {
    content: "";

    position: absolute;

    width:
        440px;

    height:
        440px;

    top:
        -235px;

    right:
        -215px;

    z-index:
        0;

    border-radius:
        50%;

    background:
        rgba(31, 145, 242, .12);

    filter:
        blur(44px);

    pointer-events:
        none;
}


/* Lower-left ambient glow */

.pen-content-article::after {
    content: "";

    position: absolute;

    width:
        300px;

    height:
        300px;

    left:
        -180px;

    bottom:
        15%;

    z-index:
        0;

    border-radius:
        50%;

    background:
        rgba(54, 157, 239, .07);

    filter:
        blur(45px);

    pointer-events:
        none;
}


/* Keep article material above decorative layers */

.pen-content-article > * {
    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   CONTENT BLOCKS INSIDE MAIN BOX
========================================================= */

.pen-doc-block {
    padding-bottom:
        36px;

    margin-bottom:
        36px;

    border-bottom:
        1px solid
        rgba(33, 105, 178, .16);

    scroll-margin-top:
        110px;
}


.pen-doc-block:last-of-type {
    margin-bottom:
        28px;
}


/* =========================================================
   NUMBER BADGES
========================================================= */

.pen-doc-number {
    background:
        #d6e9fb;

    color:
        #0678e8;

    border:
        1px solid
        rgba(26, 126, 220, .10);

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


/* Works with either current-section class if JS already adds one */

.pen-doc-block.pen-reading-now
.pen-doc-number,

.pen-doc-block.pen-current-section
.pen-doc-number {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0877ef,
            #1ba2ff
        );

    box-shadow:
        0 7px 18px
        rgba(8, 119, 239, .18);

    transform:
        scale(1.05);
}


/* =========================================================
   TEXT INSIDE CONTENT BOX
========================================================= */

.pen-doc-block > p,
.pen-doc-subsection > p {
    color:
        #405c78;
}


.pen-doc-block strong,
.pen-doc-subsection strong {
    color:
        #102c54;
}


/* =========================================================
   H3 SUBSECTION ACCENT
========================================================= */

.pen-doc-subsection {
    border-left-color:
        rgba(21, 127, 226, .22);

    scroll-margin-top:
        110px;
}


/* =========================================================
   INFO CALLOUT
========================================================= */

.pen-doc-note {
    background:
        rgba(255, 255, 255, .62);

    border:
        1px solid
        rgba(31, 124, 214, .19);

    box-shadow:
        0 6px 20px
        rgba(31, 91, 146, .04);
}


.pen-doc-note-icon {
    background:
        #d9edff;
}


/* =========================================================
   SMALL CHECK ITEMS
========================================================= */

.pen-content-checks > div {
    background:
        rgba(255, 255, 255, .60);

    border:
        1px solid
        rgba(37, 112, 188, .15);
}


/* =========================================================
   BOTTOM NEXT-STEP BOX
========================================================= */

.pen-content-next {
    background:
        rgba(255, 255, 255, .62);

    border-color:
        rgba(30, 118, 205, .16);

    box-shadow:
        0 7px 22px
        rgba(21, 72, 121, .04);
}


/* =========================================================
   DARK PREMIUM TABLE OF CONTENTS
========================================================= */

.pen-content-sidebar,
.pen-content-sticky,
.pen-toc,
.pen-quick-links {
    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    animation:
        none !important;
}


.pen-content-sticky {
    position:
        sticky;

    top:
        92px;
}


.pen-toc {
    position:
        relative;

    overflow:
        hidden;

    padding:
        20px
        18px
        18px;

    border:
        1px solid
        rgba(90, 169, 255, .17);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #0a1f3e 0%,
            #102c53 56%,
            #0d2446 100%
        );

    box-shadow:
        0 17px 40px
        rgba(6, 28, 61, .17);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* TOC ambient highlight */

.pen-toc::before {
    content: "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    top:
        -115px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        rgba(38, 148, 255, .15);

    filter:
        blur(28px);

    pointer-events:
        none;
}


/* Optional progress line.
   Existing JS can control --pen-reading-progress if present. */

.pen-toc::after {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        var(
            --pen-reading-progress,
            0%
        );

    height:
        3px;

    border-radius:
        0 10px 10px 0;

    background:
        linear-gradient(
            90deg,
            #54bcff,
            #1489f5
        );

    transition:
        width .12s linear;
}


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

.pen-toc-title {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        13px;

    padding-bottom:
        13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .09);
}


.pen-toc-title-icon {
    color:
        #6bc2ff;

    background:
        rgba(55, 155, 255, .12);

    border:
        1px solid
        rgba(87, 177, 255, .12);
}


.pen-toc-title strong {
    color:
        #ffffff;
}


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

.pen-toc > a {
    position:
        relative;

    z-index:
        2;

    padding:
        8px
        9px
        8px
        15px;

    margin-bottom:
        2px;

    color:
        #adbed3;

    border-radius:
        8px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.pen-toc > a::before {
    left:
        3px;

    background:
        linear-gradient(
            180deg,
            #6ac8ff,
            #1788f2
        );
}


.pen-toc > a:hover {
    color:
        #ffffff;

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

    transform:
        translateX(2px);
}


.pen-toc > a.is-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(26, 139, 244, .19),
            rgba(26, 139, 244, .045)
        );
}


.pen-toc > a.is-active::before {
    height:
        20px;
}


.pen-toc > .pen-toc-child {
    color:
        #8198b4;
}


.pen-toc > .pen-toc-child.is-active {
    color:
        #83ceff;
}


/* =========================================================
   QUICK LINKS BELOW TOC
========================================================= */

.pen-quick-links {
    margin-top:
        13px;

    background:
        linear-gradient(
            145deg,
            #eef7ff,
            #f9fcff
        );

    border:
        1px solid
        rgba(38, 117, 197, .14);

    box-shadow:
        0 8px 24px
        rgba(18, 63, 110, .05);
}



/* =========================================================
   CONTENT VISIBILITY SAFETY
   Keep text fully visible during scroll animation
========================================================= */

.pen-content-article .pen-doc-block,
.pen-content-article .pen-content-next,
.pen-content-article .pen-doc-block.pen-content-visible,
.pen-content-article .pen-doc-block.pen-is-visible,
.pen-content-article .pen-content-next.pen-content-visible,
.pen-content-article .pen-content-next.pen-is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   SAFE SCROLL REVEAL
   ONLY THE LEFT ARTICLE CONTENT ANIMATES
========================================================= */

/*
   Default state remains fully visible.
   This means the article NEVER becomes a blank box
   if a browser does not support scroll-driven animation.
*/

.pen-content-article .pen-doc-block,
.pen-content-article .pen-content-next {
    opacity:
        1;

    visibility:
        visible;

    transform:
        none;
}


/* Fade + rise animation */

@keyframes pen-content-scroll-reveal {

    from {
        transform:
            translateY(18px);
    }


    to {
        transform:
            translateY(0);
    }

}


/*
   Modern Chrome/Edge/Safari browsers that support
   view timelines animate each LEFT content block as
   it enters the viewport.

   The sidebar is never included in this selector.
*/

@supports (animation-timeline: view()) {

    .pen-content-article .pen-doc-block,
    .pen-content-article .pen-content-next {

        animation-name:
            pen-content-scroll-reveal;

        animation-duration:
            1ms;

        animation-timing-function:
            linear;

        animation-fill-mode:
            both;

        animation-timeline:
            view();

        animation-range:
            entry 0%
            cover 18%;
    }

}


/*
   Compatibility with any older reveal JS classes
   already present on the page.
*/

.pen-content-article
.pen-doc-block.pen-content-visible,

.pen-content-article
.pen-doc-block.pen-is-visible,

.pen-content-article
.pen-content-next.pen-content-visible,

.pen-content-article
.pen-content-next.pen-is-visible {
    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        translateY(0) !important;
}


/* =========================================================
   SMOOTH ANCHOR SCROLL
========================================================= */

html {
    scroll-behavior:
        smooth;
}


.pen-doc-block,
.pen-doc-subsection {
    scroll-margin-top:
        110px;
}


/* =========================================================
   1366PX DESKTOP
========================================================= */

@media
(min-width: 981px)
and
(max-width: 1400px) {

    .pen-content-article {
        padding:
            32px
            34px
            35px;

        border-radius:
            20px;
    }


    .pen-content-sticky {
        top:
            86px;
    }

}


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

@media (max-width: 980px) {

    .pen-content-sticky {
        position:
            static;
    }


    .pen-content-article {
        padding:
            30px
            27px
            33px;

        border-radius:
            18px;
    }


    .pen-toc {
        padding:
            16px;

        background:
            linear-gradient(
                145deg,
                #0b2040,
                #102d55
            );
    }

}


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

@media (max-width: 680px) {

    .pen-content-article {
        padding:
            23px
            17px
            27px;

        border-radius:
            17px;
    }


    .pen-doc-block {
        padding-bottom:
            27px;

        margin-bottom:
            27px;
    }

}


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

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

    html {
        scroll-behavior:
            auto;
    }


    .pen-content-article
    .pen-doc-block,

    .pen-content-article
    .pen-content-next {
        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            none !important;

        animation:
            none !important;

        transition:
            none !important;
    }


    .pen-toc > a {
        transition:
            none;
    }

}


/* =========================================================
   SECTION 06 — PENUMBRA FAQ
========================================================= */

.penumbra-faq {
    position: relative;

    width: 100%;

    padding:
        58px 0
        62px;

    overflow: hidden;
    isolation: isolate;

    background:
        #fbfdff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.penumbra-faq-bg {
    position: absolute;
    inset: 0;

    z-index: -4;

    background:

        radial-gradient(
            circle at -4% 38%,
            rgba(27,126,225,.085) 0%,
            rgba(27,126,225,.035) 20%,
            transparent 36%
        ),

        radial-gradient(
            circle at 101% 70%,
            rgba(49,140,230,.08) 0%,
            rgba(49,140,230,.028) 21%,
            transparent 37%
        ),

        radial-gradient(
            circle at 84% -12%,
            rgba(74,162,241,.07) 0%,
            transparent 29%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcff 50%,
            #ffffff 100%
        );
}


/* large edge rings */

.penumbra-faq::before,
.penumbra-faq::after {
    content: "";

    position: absolute;

    z-index: -3;

    border-radius: 50%;

    border:
        38px solid
        rgba(35,134,226,.045);

    pointer-events: none;
}


.penumbra-faq::before {
    width: 390px;
    height: 390px;

    left: -300px;
    top: 115px;
}


.penumbra-faq::after {
    width: 330px;
    height: 330px;

    right: -235px;
    top: -205px;
}


/* =========================================================
   INNER
========================================================= */

.penumbra-faq-inner {
    width:
        min(
            1020px,
            calc(100% - 42px)
        );

    margin:
        0 auto;
}


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

.penumbra-faq-intro {
    max-width:
        780px;

    margin:
        0 auto 30px;

    text-align:
        center;
}


/* eyebrow */

.penumbra-faq-eyebrow {
    display: flex;

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

    gap:
        12px;
}


.penumbra-faq-eyebrow-line {
    width:
        43px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1685ed
        );
}


.penumbra-faq-eyebrow-line:last-child {
    background:
        linear-gradient(
            90deg,
            #1685ed,
            transparent
        );
}


.penumbra-faq-eyebrow-pill {
    min-height:
        34px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #0874dc;

    background:
        rgba(232,244,255,.94);

    border:
        1px solid
        rgba(16,127,226,.07);

    border-radius:
        999px;

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2.4px;
}


.penumbra-faq-eyebrow-pill svg {
    width:
        14px;

    height:
        14px;

    fill:
        #1185ed;
}


/* heading */

.penumbra-faq-intro h2 {
    margin:
        17px 0 0;

    color:
        #071d4d;

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

    font-size:
        clamp(
            42px,
            4.1vw,
            58px
        );

    line-height:
        .98;

    font-weight:
        800;

    letter-spacing:
        -2.4px;
}


.penumbra-faq-intro h2 span {
    display:
        block;

    color:
        #1281ed;
}


/* subtitle */

.penumbra-faq-intro p {
    max-width:
        650px;

    margin:
        15px auto 0;

    color:
        #60718f;

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

    font-size:
        14px;

    line-height:
        1.6;

    font-weight:
        500;
}


/* little line */

.penumbra-faq-heading-line {
    width:
        55px;

    height:
        4px;

    display:
        block;

    margin:
        16px auto 0;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #0877de,
            #1aa0ff
        );
}


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

.penumbra-faq-list {
    width:
        min(
            1000px,
            100%
        );

    margin:
        0 auto;
}


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

.penumbra-faq-item {
    position: relative;

    margin-bottom:
        9px;

    overflow: hidden;

    border:
        1px solid
        rgba(54,139,218,.20);

    border-radius:
        14px;

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

    box-shadow:
        0 4px 16px
        rgba(31,80,124,.035);

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


/* open */

.penumbra-faq-item.is-open {
    border-color:
        rgba(34,134,226,.24);

    background:
        linear-gradient(
            135deg,
            rgba(241,248,255,.98),
            rgba(255,255,255,.98)
        );

    box-shadow:
        0 9px 25px
        rgba(21,90,150,.07);
}


/* =========================================================
   QUESTION BUTTON
========================================================= */

.penumbra-faq-question {
    position: relative;

    width:
        100%;

    min-height:
        61px;

    padding:
        9px 17px;

    display:
        grid;

    grid-template-columns:
        46px 1fr 44px;

    align-items:
        center;

    gap:
        14px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    cursor:
        pointer;

    text-align:
        left;
}


/* =========================================================
   LEFT ICON
========================================================= */

.penumbra-faq-icon {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;
}


.penumbra-faq-icon svg {
    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.9;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.faq-icon-blue {
    color:
        #087ded;

    background:
        #e8f4ff;
}


/* =========================================================
   QUESTION TEXT
========================================================= */

.penumbra-faq-question-text {
    color:
        #071b47;

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

    font-size:
        16px;

    line-height:
        1.25;

    font-weight:
        700;
}


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

.penumbra-faq-toggle {
    position: relative;

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    justify-self:
        end;

    border-radius:
        50%;

    background:
        #edf6ff;

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


/* horizontal */

.penumbra-faq-toggle::before {
    content: "";

    position: absolute;

    width:
        14px;

    height:
        2px;

    border-radius:
        99px;

    background:
        #082c65;

    transition:
        background .22s ease;
}


/* vertical */

.penumbra-faq-toggle::after {
    content: "";

    position: absolute;

    width:
        2px;

    height:
        14px;

    border-radius:
        99px;

    background:
        #082c65;

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


/* OPEN BUTTON */

.penumbra-faq-item.is-open
.penumbra-faq-toggle {
    background:
        linear-gradient(
            135deg,
            #076bdc,
            #1598ff
        );

    box-shadow:
        0 7px 17px
        rgba(8,108,216,.20);
}


.penumbra-faq-item.is-open
.penumbra-faq-toggle::before,
.penumbra-faq-item.is-open
.penumbra-faq-toggle::after {
    background:
        #ffffff;
}


.penumbra-faq-item.is-open
.penumbra-faq-toggle::after {
    transform:
        rotate(90deg);

    opacity:
        0;
}


/* hover */

.penumbra-faq-question:hover
.penumbra-faq-toggle {
    transform:
        scale(1.05);
}


/* keyboard */

.penumbra-faq-question:focus-visible {
    outline:
        2px solid
        #1688ed;

    outline-offset:
        -3px;

    border-radius:
        12px;
}


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

.penumbra-faq-answer {
    display:
        grid;

    grid-template-rows:
        0fr;

    opacity:
        0;

    transition:
        grid-template-rows .26s ease,
        opacity .22s ease;
}


.penumbra-faq-item.is-open
.penumbra-faq-answer {
    grid-template-rows:
        1fr;

    opacity:
        1;
}


.penumbra-faq-answer-inner {
    min-height:
        0;

    overflow:
        hidden;
}


/* answer content */

.penumbra-faq-answer-inner > p,
.penumbra-faq-answer-inner > a {
    margin-left:
        77px;

    margin-right:
        78px;
}


.penumbra-faq-answer-inner > p {
    max-width:
        790px;

    margin-top:
        0;

    margin-bottom:
        11px;

    padding-top:
        0;

    color:
        #536a86;

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

    font-size:
        13px;

    line-height:
        1.65;

    font-weight:
        500;
}


/* answer link */

.penumbra-faq-answer-link {
    width:
        max-content;

    margin-bottom:
        17px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #0878df;

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

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;
}


.penumbra-faq-answer-link span {
    transition:
        transform .18s ease;
}


.penumbra-faq-answer-link:hover span {
    transform:
        translateX(3px);
}


/* =========================================================
   1366PX DESKTOP
========================================================= */

@media
(min-width: 1001px)
and
(max-width: 1450px) {

    .penumbra-faq {
        padding:
            43px 0
            46px;
    }


    .penumbra-faq-inner {
        width:
            min(
                900px,
                calc(100% - 36px)
            );
    }


    .penumbra-faq-intro {
        margin-bottom:
            24px;
    }


    .penumbra-faq-eyebrow-pill {
        min-height:
            29px;

        font-size:
            8px;
    }


    .penumbra-faq-intro h2 {
        font-size:
            43px;
    }


    .penumbra-faq-intro p {
        margin-top:
            11px;

        font-size:
            11.5px;
    }


    .penumbra-faq-heading-line {
        width:
            48px;

        height:
            3px;

        margin-top:
            12px;
    }


    .penumbra-faq-item {
        margin-bottom:
            7px;

        border-radius:
            12px;
    }


    .penumbra-faq-question {
        min-height:
            54px;

        padding:
            7px 14px;

        grid-template-columns:
            40px 1fr 38px;

        gap:
            11px;
    }


    .penumbra-faq-icon {
        width:
            35px;

        height:
            35px;
    }


    .penumbra-faq-icon svg {
        width:
            17px;

        height:
            17px;
    }


    .penumbra-faq-question-text {
        font-size:
            13.5px;
    }


    .penumbra-faq-toggle {
        width:
            34px;

        height:
            34px;
    }


    .penumbra-faq-answer-inner > p,
    .penumbra-faq-answer-inner > a {
        margin-left:
            65px;

        margin-right:
            65px;
    }


    .penumbra-faq-answer-inner > p {
        font-size:
            11px;
    }


    .penumbra-faq-answer-link {
        font-size:
            9.5px;

        margin-bottom:
            14px;
    }

}


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

@media (max-width: 1000px) {

    .penumbra-faq-inner {
        width:
            calc(100% - 30px);
    }

}


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

@media (max-width: 680px) {

    .penumbra-faq {
        padding:
            42px 0;
    }


    .penumbra-faq-inner {
        width:
            calc(100% - 22px);
    }


    .penumbra-faq-intro {
        margin-bottom:
            23px;
    }


    .penumbra-faq-eyebrow-line {
        width:
            25px;
    }


    .penumbra-faq-eyebrow-pill {
        min-height:
            29px;

        padding:
            0 11px;

        font-size:
            7px;

        letter-spacing:
            1.6px;
    }


    .penumbra-faq-intro h2 {
        font-size:
            clamp(
                33px,
                10.5vw,
                42px
            );

        letter-spacing:
            -1.5px;
    }


    .penumbra-faq-intro p {
        font-size:
            12px;

        line-height:
            1.55;
    }


    /* question */

    .penumbra-faq-question {
        min-height:
            61px;

        padding:
            9px 10px;

        grid-template-columns:
            36px 1fr 35px;

        gap:
            9px;
    }


    .penumbra-faq-icon {
        width:
            34px;

        height:
            34px;
    }


    .penumbra-faq-icon svg {
        width:
            16px;

        height:
            16px;
    }


    .penumbra-faq-question-text {
        font-size:
            12.5px;

        line-height:
            1.3;
    }


    .penumbra-faq-toggle {
        width:
            33px;

        height:
            33px;
    }


    .penumbra-faq-toggle::before {
        width:
            12px;
    }


    .penumbra-faq-toggle::after {
        height:
            12px;
    }


    /* answer */

    .penumbra-faq-answer-inner > p,
    .penumbra-faq-answer-inner > a {
        margin-left:
            55px;

        margin-right:
            15px;
    }


    .penumbra-faq-answer-inner > p {
        font-size:
            11px;

        line-height:
            1.6;
    }


    .penumbra-faq-answer-link {
        margin-bottom:
            14px;

        font-size:
            9.5px;
    }

}


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

@media (max-width: 390px) {

    .penumbra-faq-inner {
        width:
            calc(100% - 18px);
    }


    .penumbra-faq-eyebrow-line {
        display:
            none;
    }


    .penumbra-faq-question-text {
        font-size:
            12px;
    }

}
/* =========================================================
   FAQ ACCORDION — FINAL FUNCTION FIX
========================================================= */

.penumbra-faq-question {
    cursor: pointer !important;
    pointer-events: auto !important;
}


/* CLOSED */

.penumbra-faq-item
.penumbra-faq-answer {
    display: grid !important;

    grid-template-rows: 0fr !important;

    opacity: 0;

    visibility: hidden;

    transition:
        grid-template-rows .26s ease,
        opacity .20s ease,
        visibility .20s ease;
}


.penumbra-faq-item
.penumbra-faq-answer-inner {
    min-height: 0;

    overflow: hidden;
}


/* OPEN */

.penumbra-faq-item.is-open
.penumbra-faq-answer {
    grid-template-rows: 1fr !important;

    opacity: 1;

    visibility: visible;
}


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

.penumbra-faq-item
.penumbra-faq-toggle::after {
    transform: rotate(0deg);

    opacity: 1;
}


.penumbra-faq-item.is-open
.penumbra-faq-toggle::after {
    transform: rotate(90deg);

    opacity: 0;
}


/* OPEN CIRCLE */

.penumbra-faq-item.is-open
.penumbra-faq-toggle {
    background:
        linear-gradient(
            135deg,
            #076bdc,
            #1598ff
        );
}


.penumbra-faq-item.is-open
.penumbra-faq-toggle::before,
.penumbra-faq-item.is-open
.penumbra-faq-toggle::after {
    background: #ffffff;
}