/*
 * Afterburner 2025 — FLEX/pathway timeline styles (fl_* / fe-* vocabulary)
 * Consolidated in v1.0.76 from the byte-identical inline <style> block carried
 * in the homepage (page 14) and /flawless/ (page 124) body content, so the
 * pages can drop their inline copies in the Phase 2 content pass.
 * Verbatim lift with ONE change: the legacy stratum-1-web font on .fl_heading
 * is replaced with the display font preset (Space Grotesk), per Boo 2026-07-07.
 * Known follow-up (not changed here): vw-based sizing bypasses the chassis
 * type scale; refactor is a design decision, out of cleanup scope.
 * Conditionally enqueued on is_front_page() and is_page('flawless').
 */
.fl_heading {
        font-size: 2.188vw;
        margin: 0 auto;
        font-family: var(--wp--preset--font-family--display, "Space Grotesk", sans-serif);
        width: 100%;
        max-width: 34.115vw;
        font-weight: 700;
        line-height: 1.3em;
        text-align: center;
        margin-bottom: 1.406vw;
        text-transform: uppercase;
    }

    .color-orange {
        color: #F03C17 !important;
    }

    .fl-wrapper {
        width: 75.677vw;
        margin: 0 auto;
    }

    .fl-timeline-content,
    .fl-timeline-row {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .fl-timeline-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 1.042vw;
    }

    .fl-timeline-card {
        background: #FFFFFF;
        width: 18.281vw;
        padding: 1.875vw;
        box-shadow: 0px 4px 50px 0px #7D7D7D40;
        border-radius: 1.563vw;
        scale: 0;
    }

    .step4 .fl-timeline-card {
        padding: 1.875vw 0.6vw;
    }

    .fl-timeline-card h3,
    .fl-timeline-card .fl-p {
        font-family: 'Inter', sans-serif;
        margin: 0;
        line-height: 150%;
        text-align: center;
    }

    .fl-timeline-card h3 {
        font-size: 1.302vw;
        font-weight: 700;
    }

    .fl-timeline-card .fl-p {
        font-size: 1.042vw;
        font-weight: 500;
        color: #262626;
    }

    .fl-timeline-item .fl-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8.646vw;
        height: 8.646vw;
        border-radius: 9999px;
        box-shadow: inset 0 0 0 0.833vw #FFFFFF00;
        overflow: hidden;
    }

    .fl-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #fff;
        border: .833vw solid #FF4B22;
        border-radius: 50%;
        opacity: var(--overlay-opacity, 0);
    }

    .fl-timeline-item.step1 .fl-image {
        background: url('https://www.afterburner.com/wp-content/uploads/2025/05/fl-img-step-1.png') center center / cover no-repeat;
    }

    .fl-timeline-item.step2 .fl-image {
        background: url('https://www.afterburner.com/wp-content/uploads/2025/05/fl-img-step-2.png') center center / cover no-repeat;
    }

    .fl-timeline-item.step3 .fl-image {
        background: url('https://www.afterburner.com/wp-content/uploads/2025/05/fl-img-step-3.png') center center / cover no-repeat;
    }

    .fl-timeline-item.step4 .fl-image {
        background: url('https://www.afterburner.com/wp-content/uploads/2025/05/fl-img-step-4-1.png') center center / cover no-repeat;
    }


    .fl-timeline-item .fl-image svg {
        width: 2.708vw;
    }

    .fl-timeline-item .fl-timeline-badge {
        display: flex;
        flex-wrap: wrap;
        gap: 0.781vw;
        justify-content: center;
        scale: 0;

    }

    .fl-timeline-item .fl-timeline-badge .fl-p {
        display: block;
        margin: 0;
        width: 100%;
        padding: 0.521vw;
        font-size: 0.729vw;
        background: #EE3D19;
        color: #FFFFFF;
        font-weight: 700;
        border-radius: 0.625vw;
    }

    .fl-timeline-item.step3 .fl-timeline-badge .fl-p {
        max-width: 8.479vw;
    }

    .fl-timeline-item.step4 .fl-timeline-badge .fl-p {
        max-width: 12.812vw;
    }

    .fl-timeline-badge .fl-p {
        font-family: 'Inter', sans-serif;
        text-align: center;
    }

    .fl-timeline-item::after {
        content: "";
        border-left: 1px dashed #B8B8B8;
        position: absolute;
        bottom: -1.5vw;
        right: 0;
        height: 3.889vw;
        width: 0.104vw;
    }

    .fl-timeline-item.step4::after {
        content: none;
    }

    .fl-timeline-content .fl-arrow {
        position: absolute;
        top: 19vw;
        left: 0;
        width: 2.344vw;
        animation: arrow_animation 1.5s linear infinite;
    }

    .fl-timeline-content .fl-arrow.arr1 {
        left: 17.8vw;
    }

    .fl-timeline-content .fl-arrow.arr2 {
        left: 36.7vw;
    }

    .fl-timeline-content .fl-arrow.arr3 {
        left: 55.6vw;
    }

    .fl-timeline-row {
        background-image: url('https://www.afterburner.com/wp-content/uploads/2025/05/Rectangle-182.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        margin-top: 1.5vw;
    }



    .fl-timeline-row div {
        padding: 1.458vw 0;
        font-family: "Inter", sans-serif;
        color: #FFFFFF;
        font-size: 1.302vw;
        font-weight: 700;
        line-height: 150%;
        text-align: center;
    }

    .fl-timeline-row .fl-do {
        grid-column: 3 / span 2;
    }

    .fl-timeline-row .fr-arrow {
        position: absolute;
        top: 1.8vw;
        left: 0;
        width: 2.344vw;
        animation: arrow_animation 1.5s linear infinite;
        filter: brightness(0) invert(1);
    }

    .fl-timeline-row .fr-arrow.arr1 {
        left: 17.8vw;
    }

    .fl-timeline-row .fr-arrow.arr2 {
        left: 36.7vw;
    }

    .fl-timeline-row .fr-arrow.arr3 {
        left: 71.5vw;
    }

    .fe-wrapper .fl_heading {
        margin: 0 auto;
    }

    .fe-wrapper {
        margin-top: 0;
        margin-bottom: 0;
    }

    .fe-wrapper .fe-timeline-wrapper {
        position: relative;
        padding-top: 0;
    }

    .fe-wrapper .fe-timeline-wrapper .fe-timeline-cards {
        position: relative;
    }

    .fe-wrapper .fe-timeline-wrapper svg {
        display: flex;
        margin: 0 auto;
        width: 56.458vw;
        max-width: 100%;
        height: 26.354vw;
    }

    /* @keyframes arrow_animation {
        0% {
            content: url("https://afterburner.com/wp-content/uploads/2025/04/PDefault.svg");
        }

        33% {
            content: url("https://afterburner.com/wp-content/uploads/2025/04/PVariant2.svg");
        }

        66% {
            content: url("https://afterburner.com/wp-content/uploads/2025/04/PVariant3.svg");
        }

        100% {
            content: url("https://afterburner.com/wp-content/uploads/2025/04/PDefault.svg");
        }
    } */

    .fl-arrow path {
  opacity: 0;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* First child */
.fl-arrow path:nth-child(1) {
  animation-name: fade1;
  animation-delay: 0s;
}

/* Second child */
.fl-arrow path:nth-child(2) {
  animation-name: fade2;
  animation-delay: 1s;
}

/* Third child */
.fl-arrow path:nth-child(3) {
  animation-name: fade3;
  animation-delay: 2s;
}

@keyframes fade1 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 1; }
}

@keyframes fade2 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 0.4; }
}

@keyframes fade3 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 0.3; }
}

.fl-timeline-row .fr-arrow path {
  opacity: 0;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* First child */
.fl-timeline-row .fr-arrow path:nth-child(1) {
  animation-name: fade1;
  animation-delay: 0s;
}

/* Second child */
.fl-timeline-row .fr-arrow path:nth-child(2) {
  animation-name: fade2;
  animation-delay: 1s;
}

/* Third child */
.fl-timeline-row .fr-arrow path:nth-child(3) {
  animation-name: fade3;
  animation-delay: 2s;
}

@keyframes fade1 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 1; }
}

@keyframes fade2 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 0.5; }
}

@keyframes fade3 {
  0%, 100% { opacity: 0; }
  10%, 40% { opacity: 0.3; }
}

    .fe-timeline-wrapper path {
        transition: none;
    }

    .fe-timeline-wrapper path:hover {
        transition: fill 300ms ease-in-out;
    }

    .fe-timeline-wrapper .objective-path:hover,
    .fe-timeline-wrapper .result-path:hover,
    .fe-timeline-wrapper .cause-path:hover,
    .fe-timeline-wrapper .action-path.hovered,
    .fe-timeline-wrapper .plan-path:hover,
    .fe-timeline-wrapper .brief-path:hover,
    .fe-timeline-wrapper .execute-path:hover,
    .fe-timeline-wrapper .debrief-path:hover {
        fill: #FF4B22 !important;
    }

    .fe-timeline-content {
        width: 18.073vw;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .fe-timeline-content .fl-p {
        font-family: 'Inter', sans-serif;
        font-size: 0.729vw;
        color: rgba(38, 38, 38, 0.7);
        box-shadow: 0px 4px 50px 0px #7D7D7D40;
        border-radius: 1.563vw;
        padding: 2.76vw 1.302vw;
        line-height: 1.094vw;
        background: #FFFFFF;
        margin: 0;
        text-align: center;
    }

    .fe-timeline-content .fl-p span {
        font-weight: 700;
    }

    .fe-timeline-wrapper .objective .fl-p,
    .fe-timeline-wrapper .result .fl-p,
    .fe-timeline-wrapper .plan .fl-p {
        padding-top: 2.24vw;
        padding-bottom: 2.24vw;
    }

    .fe-timeline-wrapper .cause .fl-p,
    .fe-timeline-wrapper .brief .fl-p,
    .fe-timeline-wrapper .debrief .fl-p {
        padding-top: 1.719vw;
        padding-bottom: 1.719vw;
    }

    .fe-timeline-wrapper .action .fl-p {
        padding-top: 1.198vw;
        padding-bottom: 1.198vw;
    }


    .fe-timeline-content {
        position: absolute;
        z-index: 1;
        scale: 1;
        transition: scale 300ms ease-in-out;
    }

    .fe-timeline-content.cause {
      top: 20vw;
      left: 14vw;
    }
    .fe-timeline-content.execute {
      top: 21vw;
      left: 13vw;
    }
    .fe-timeline-content.objective {
      top: -1vw;
      left: 13vw;
    }
    .fe-timeline-content.plan {
      top: -2vw;
      left: 12vw;
    }
    .fe-timeline-content.brief {
      top: 16vw;
      left: 24vw;
    }
    .fe-timeline-content.brief {
      top: 16vw;
      left: 24vw;
    }
    /*
    .fe-timeline-content.action,
    .fe-timeline-content.debrief {
        top: 6.5vw;
        left: 35vw;
    }

    .fe-timeline-content.objective,
    .fe-timeline-content.plan {
        top: -9.5vw;
        left: 20vw;
    }

  
    .fe-timeline-content.cause,
    .fe-timeline-content.execute {
        top: 28vw;
        left: 20vw;
    }

    .fe-timeline-content.plan,
    .fe-timeline-content.execute {
        left: 49.7vw;
    }

    .fe-timeline-content.brief,
    .fe-timeline-content.result {
        top: 9vw;
        left: 65.5vw;
        pointer-events: none;
    }*/

    .fe-timeline-content.result {
        left: 2vw;
        pointer-events: none;
    }

    .fe-timeline-content {
        transition: .6s ease;
    }

    .fe-wrapper:not(:has(.objective-path:hover)) .fe-timeline-content.objective,
    .fe-wrapper:not(:has(.result-path:hover)) .fe-timeline-content.result,
    .fe-wrapper:not(:has(.cause-path:hover)) .fe-timeline-content.cause,
    .fe-wrapper:not(:has(.action-path:hover)) .fe-timeline-content.action,
    .fe-wrapper:not(:has(.plan-path:hover)) .fe-timeline-content.plan,
    .fe-wrapper:not(:has(.brief-path:hover)) .fe-timeline-content.brief,
    .fe-wrapper:not(:has(.execute-path:hover)) .fe-timeline-content.execute,
    .fe-wrapper:not(:has(.debrief-path:hover)) .fe-timeline-content.debrief {
        transform: scale(0);
    }

    .fe-wrapper .fe-timeline-content.action:hover,
    .fe-wrapper .fe-timeline-content.debrief:hover {
        transform: scale(1) !important;
    }

    .fe-wrapper:has(.fe-timeline-content.debrief:hover) .debrief-path,
    .fe-wrapper:has(.fe-timeline-content.action:hover) .action-path {
        fill: #FF4B22 !important;
    }

    .mobile.fl-wrapper {
        display: none;
    }


    @media screen and (max-width: 768px) {
        .fl-wrapper {
            display: none;
        }

        .mobile.fl-wrapper {
            display: block;

        }

        .mobile .fl_heading {
            font-size: 35px;
            max-width: 100%;
            padding: 0 4%;
            margin-bottom: 30px;
        }

        .mobile.fl-wrapper .fl-timeline-item {
            gap: 20px;
        }

        .mobile.fl-wrapper .fl-timeline-item::after {
            content: none;
        }

        .mobile.fl-wrapper .fl-timeline-content {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .mobile.fl-wrapper .fl-timeline-card {
            width: 100%;
            max-width: 350px;
            padding: 36px;
        }

        .mobile.fl-wrapper .fl-timeline-card h3 {
            font-size: 20px;
            font-weight: 700;
        }

        .mobile.fl-wrapper .fl-timeline-card .fl-p {
            font-size: 16px;
            font-weight: 700;
        }

        .mobile.fl-wrapper .fl-timeline-item .fl-image {
            width: 100px;
            height: 100px;
        }

        .mobile.fl-wrapper .fl-timeline-badge .fl-p {
            width: calc(350px - 20%);
            max-width: unset;
            font-size: 14px;
            margin: 0;
        }

        .mobile.fl-wrapper .fl-do {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .mobile.fl-wrapper .fl-timeline-card,
        .mobile.fl-wrapper .fl-timeline-badge {
            display: none;
        }


        .mobile.fl-wrapper .fl-teach .fl-label-card,
        .mobile.fl-wrapper .fl-demo .fl-label-card,
        .mobile.fl-wrapper .fl-do .fl-label-card {
            font-size: 20px;
            font-family: "Inter", sans-serif;
            text-align: center;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .mobile.fl-wrapper .fl-do .fl-label-card {
            margin-bottom: 0;
        }

        .mobile.fl-wrapper .fl-teach,
        .mobile.fl-wrapper .fl-demo,
        .mobile.fl-wrapper .fl-do {
            border: 2px solid #F03C17;
            padding: 30px;
            border-radius: 30px;
        }

        .mobile.fl-wrapper .fl-timeline-item .fl-image svg {
            width: 100%;
            max-width: 40px;
        }

        /* Infinity */

        .mobile.fe-wrapper {
            margin-top: 80px;
            margin-bottom: 80px;
        }

        .mobile.fe-wrapper .fe-timeline-wrapper svg {
            width: 100%;
            max-width: 130.208vw;
            height: unset;
        }

        .mobile.fe-wrapper .fe-timeline-wrapper {
            padding: 0 2%;
        }


        .mobile.fe-wrapper .fe-timeline-wrapper .fe-timeline-content {
            width: 100%;
            max-width: 300px;
        }

        .mobile.fe-wrapper .fe-timeline-wrapper .fl-p {
            padding: 20px;
            font-size: 14px;
            line-height: 1.3em;
        }

        .fe-timeline-content.action,
        .fe-timeline-content.debrief,
        .fe-timeline-content.objective,
        .fe-timeline-content.plan,
        .fe-timeline-content.cause,
        .fe-timeline-content.execute,
        .fe-timeline-content.brief,
        .fe-timeline-content.result {
            /* top: 10vw;
        left: 28vw; */
            top: 50%;
            left: 50%;
        }

        .fe-timeline-content.action {
            transform: translate(-50%, 180%);
        }

        .fe-timeline-content.plan {
            transform: translate(-50%, 230%);
        }

        .fe-timeline-content.brief {
            transform: translate(-50%, 230%);
        }

        .fe-timeline-content.execute {
            transform: translate(-50%, 270%);
        }

        .fe-timeline-content.debrief {
            transform: translate(-50%, 200%);
        }

        .fe-timeline-content.objective {
            transform: translate(-50%, 230%);
        }


        .fe-timeline-content.result {
            transform: translate(-50%, 210%);
        }

        .fe-timeline-content.cause {
            transform: translate(-50%, 230%);
        }

    }

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

    @media screen and (max-width: 425px) {
        .mobile.fl-wrapper .fl-timeline-card {
            padding: 20px;
        }

        .mobile.fl-wrapper .fl-timeline-badge .fl-p {
            font-size: 12px;
            padding-inline: 10px;
            width: 100%;
            max-width: 150px;
        }

        .mobile.fe-wrapper .fe-timeline-wrapper .fl-p {
            padding: 10px 20px;
            font-size: 12px;
            line-height: 1.3em;
        }

        .fe-timeline-content.action,
        .fe-timeline-content.debrief,
        .fe-timeline-content.objective,
        .fe-timeline-content.plan,
        .fe-timeline-content.cause,
        .fe-timeline-content.execute,
        .fe-timeline-content.brief,
        .fe-timeline-content.result {
            /* top: 10vw;
        left: 28vw; */
            top: 50%;
            left: 50%;
        }

        .fe-timeline-content.action {
            transform: translate(-50%, 90%);
        }

        .fe-timeline-content.plan {
            transform: translate(-50%, 115%);
        }

        .fe-timeline-content.brief {
            transform: translate(-50%, 100%);
        }

        .fe-timeline-content.execute {
            transform: translate(-50%, 150%);
        }

        .fe-timeline-content.debrief {
            transform: translate(-50%, 100%);
        }

        .fe-timeline-content.objective {
            transform: translate(-50%, 115%);
        }

        .fe-timeline-content.result {
            transform: translate(-50%, 110%);
        }

        .fe-timeline-content.cause {
            transform: translate(-50%, 100%);
        }

    }