.page-id-347 img.site-background {
    display: none;
}
.page-id-347 .header-img {
    display: none;
}
.page-id-347 {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible !important;
    background: linear-gradient(to bottom, #dfc9ad 0%, /* start */ #dfc9ad 50%, /* midpoint */ #1c9aa6 50%, /* same midpoint → sharp switch */ #1c9aa6 100% /* end   */);
}

.all-channels {
    width: 100%;
    max-width: 95%;
}
.all-channels__row {
    display: flex;
    justify-content: center;

    align-items: center;
}

/*hide autofill button*/
.all-channels #controls-wrapper button.autofill {
    display: none;
}

/*wave bckgr in yusa css*/

/*forms*/
.all-channels .all-channels__form {
    position: relative;
    max-width: 1400px;
    margin: 20px 40px;
    color: #fff;
    padding: 30px 40px;
    font-family: system-ui, sans-serif;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / 8%);
}

.all-channels__title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.all-channels .all-channels__title {
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 0;
}
.all-channels__title__decoration {
    margin-left: 20px;
    height: 60px;
    width: auto;
}
.all-channels__title__decoration img {
    height: 100%;
    width: auto;
}

.all-channels .all-channels__form__row {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-around;
    align-items: start;
}

.all-channels input {
    font-family: "canada-type-gibson";
    font-size: 18px;
    font-weight: 500;
    color: #000000dd;
}

/*core inputs*/
.all-channels #core-inputs-wrapper {
    flex: 0 0 100%;
    width: 100%;
}

.all-channels #core-inputs-wrapper .core-inputs {
    display: flex;
    row-gap: 10px;
    column-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.all-channels #core-inputs-wrapper .core-inputs__field {
    flex: 1 0 15%;
    max-width: 19.15%;

    padding: 5px 15px 10px;
    background: #ffffff22;
    border: 1px solid #fff;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    justify-content: end;
}

.all-channels #core-inputs-wrapper .core-inputs__field label {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.all-channels #core-inputs-wrapper .core-inputs__field input {
    margin-top: 10px;
    width: 100%;
    height: 35px;

    border-radius: 10px;
    border: 1px solid var(--teal);
}

/*(variable) channel inputs*/
.all-channels #variable-input-wrapper {
    flex: 0 0 100%;
    width: 100%;
    min-height: 150px;

    padding-bottom: 20px;
    border-bottom: 1px solid #fff;

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

.all-channels .variable-inputs__title {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
}

.all-channels .all-channels__channels {
    min-width: 100%;
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: center;
}
.all-channels .channels__channel {
    flex: 1 0 40%;
    max-width: 45%;

    padding: 20px;
    background: #ffffff44;
    border: 1px solid #fff;
    border-radius: 15px;
}

/*toggle*/
.all-channels #variable-input-wrapper .channel__toggle {
    display: flex;
    gap: 10px;
    justify-content: start;
    align-items: center;
}
.all-channels #variable-input-wrapper .channel__toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    outline: 1px solid var(--teal);
    border-radius: 20px;
    background-color: #fff;
    cursor: pointer;

    transition: all 0.15s ease;
}
.all-channels #variable-input-wrapper .channel__toggle input[type="checkbox"]:hover {
    background-color: var(--light-teal);

    transition: all 0.15s ease;
}
.all-channels #variable-input-wrapper .channel__toggle input[type="checkbox"]:checked {
    background-color: #00000066;

    transition: all 0.15s ease;
}
.all-channels #variable-input-wrapper .channel__toggle label {
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

/*fields*/
.all-channels #variable-input-wrapper .channel__fields {
    margin-top: 10px;

    display: flex;
    gap: 20px;
    justify-content: start;

    max-height: 2000px;
    opacity: 1;
    visibility: visible;

    transition: all 0.4s ease;
}
.all-channels #variable-input-wrapper .channel__fields.greyed-out {
    margin-top: 0px;

    max-height: 0;
    opacity: 0;
    visibility: hidden;

    transition: all 0.4s ease;
}
.all-channels #variable-input-wrapper .channel__field {
    flex: 1 0 45%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: start;
}
.all-channels #variable-input-wrapper .channel__field label {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;

    transition: all 0.2s ease;
}
.all-channels #variable-input-wrapper .channel__fields.greyed-out .channel__field label {
    opacity: 0.5;

    transition: all 0.2s ease;
}

.all-channels #variable-input-wrapper .channel__field input {
    height: 35px;
    border-radius: 10px;
    border: 1px solid var(--teal);

    transition: all 0.2s ease;
}
.all-channels #variable-input-wrapper .channel__fields.greyed-out .channel__field input {
    opacity: 0.5;

    transition: all 0.2s ease;
}

/*debug*/
.all-channels .equation-abbrv {
    display: none;
}

/*results*/

.all-channels #results-wrapper {
    flex: 0 0 100%;
    width: 100%;

    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.all-channels #results-wrapper button.submit {
    display: none;

    width: 100%;
    padding: 15px 35px;

    background: #00000055;
    border: 1px solid white;
    border-radius: 15px;

    font-size: 25px;
    font-weight: 600;
    color: white;

    transition: 0.2s ease;
}
.all-channels #results-wrapper button.submit:hover {
    background: #ffffffbb;
    color: var(--teal);

    transition: 0.2s ease;
}

.all-channels #results-wrapper .results {
    display: flex;
    gap: 35px;
    flex-direction: column;
}

.all-channels #results-wrapper input {
    background: #00000077;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

/* show & hide */
.all-channels #results-wrapper {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;

    transition: all 1s ease;
}
.all-channels #results-wrapper.show {
    max-height: 2000px;
    opacity: 1;
    visibility: visible;

    transition: all 1s ease;
}

/*channel outputs*/

.all-channels #results-wrapper .results__channels {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: start;
}

.results__channel-wrapper {
    flex: 1 0 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.all-channels #results-wrapper .results__channel {
    padding: 20px;

    background: #ffffff44;
    border: 1px solid #fff;
    border-radius: 15px;

    transition: all 0.3s ease;
}
.all-channels #results-wrapper .results__channel.no-show {
    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
}

.all-channels #results-wrapper .results__channel__label {
    margin-bottom: 15px;
    width: 100%;

    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.all-channels #results-wrapper .channel__outputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
}

.all-channels #results-wrapper .channel__output {
    flex: 1 0 30%;
    max-width: 32%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.all-channels #results-wrapper .channel__output label {
    text-align: center;
    font-size: 18px;
    font-weight: 500;

    transition: all 0.2s ease;
}
.all-channels #results-wrapper .greyed-out .channel__output label {
    opacity: 0.5;

    transition: all 0.2s ease;
}
.all-channels #results-wrapper .channel__output input {
    height: 55px;
    border-radius: 10px;
    border: 1px solid var(--teal);

    color: transparent;

    transition: all 0.5s 1s ease;
}
.all-channels #results-wrapper.show .channel__output input {
    color: #ffffff;

    transition: all 0.2s 1s ease;
}

/*extra channel outputs*/
.all-channels #results-wrapper .channel__output--extra {
    font-size: 25px;
    font-weight: 700;
    flex: 0 0 100%;
    text-align: center;
}
.channel__output--extra h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}
.channel__output--extra__content {
    margin: 0 auto;
    width: fit-content;
    padding: 12px 18px;
    background: #00000066;
    border-radius: 15px;
}

/*hiding or showing correct package for ppc*/
.channel__output--extra--mini-wahoo,
.channel__output--extra--wahoo {
    display: none;
}
.channel__output--extra--mini-wahoo.show,
.channel__output--extra--wahoo.show {
    display: block;
}

/*channel sums results*/
.all-channels #results-wrapper .results__channel.results__channel--sums {
    background: #ffffffcc;
}
.all-channels #results-wrapper .results__channel.results__channel--sums .results__channel__label {
    color: var(--teal);
}

/*overall outputs*/
.all-channels .results__main__overall {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.all-channels .overall__output {
    flex: 1 0 40%;
    max-width: 45%;

    padding: 25px;
    background: #ffffff44;
    border: 1px solid #fff;
    border-radius: 15px;

    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/*second laytout*/
.all-channels .overall__output:nth-child(2) {
    flex-direction: row;
    justify-content: space-evenly;
    gap: unset;
}
.all-channels .overall__output:nth-child(2) > * {
    flex: 0 0 45%;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

.all-channels .overall__output label {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
}
.all-channels .overall__output input {
    height: 55px;
    border-radius: 10px;
    border: 1px solid var(--teal);
}

/*odometer results*/
.all-channels #results-wrapper input {
    display: none; /*replaced by odometeres*/
}

.all-channels span.odometer {
    height: 55px;
    background: #00000077;
    border-radius: 10px;

    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}
.all-channels .odometer-inside {
    margin: 16px auto 0;
    width: fit-content;
}

.all-channels .overall__output span.odometer {
    height: 70px;
    font-size: 30px;
}
.all-channels .overall__output:first-child {
    background: #ffffffdd;

    transform-origin: center center;
    animation: floating 5s infinite;
    transition: all 5s ease;
}
.all-channels .overall__output:first-child label {
    color: var(--teal);
}
.all-channels .overall__output:first-child span.odometer {
    background-color: #000000aa;
}

/* Add $ for only the money fields: gp, bms, and all ms_* */
.all-channels span.odometer-digit:first-child::before {
    content: "$";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-54%);
    line-height: 1;
    pointer-events: none;
}
.all-channels .channel__outputs span.odometer-digit:first-child {
    margin-left: 10px;
}
.all-channels .channel__outputs span.odometer-digit:first-child::before {
    left: -15px;
}

/*no dollar signs for monthly jobs & leads*/
.all-channels #results-wrapper .results__channel--exports .channel__output:first-child span.odometer-digit:first-child,
.all-channels #results-wrapper .results__channel--exports .channel__output:nth-child(2) span.odometer-digit:first-child {
    margin-left: 0px;
}
.all-channels #results-wrapper .results__channel--exports .channel__output:first-child span.odometer-digit:first-child::before,
.all-channels #results-wrapper .results__channel--exports .channel__output:nth-child(2) span.odometer-digit:first-child::before {
    display: none;
}

@keyframes floating {
    0% {
        box-shadow: 2px 2px 6px #00000044;
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        box-shadow: 8px 8px 12px #00000055;
        /* transform: translate(-2px, -2px) scale(1.02); */
        transform: scale(1.1);
    }
    100% {
        box-shadow: 2px 2px 6px #00000044;
        transform: translate(0px, 0px) scale(1);
    }
}

/* CONTROLS */
.all-channels #controls-wrapper {
    display: flex;
    flex-direction: column;
}

.all-channels #controls-wrapper button {
    margin-top: 20px;
    background: #ffffffdd;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 12px 15px;
    font-family: "canada-type-gibson";
    font-size: 16px;
    color: #000000dd;
}
.all-channels #controls-wrapper button.reset {
    position: relative;
    top: unset;
    left: unset;
    margin-top: 140px;
}

/*lever*/

:root {
    /* tweak these two and everything stays aligned */
    --lever-module-width: 90px;
    --lever-height: 355px;

    /* optional spacing between base and lever */
    --lever-gap: 0px;

    /* derived: 91.5 / 355 = socket% of viewBox height */
    --lever-socket-ratio: 0.257746;
    --lever-pull-distance: calc(var(--lever-height) * var(--lever-socket-ratio));
    --lever-overshoot: 10px; /* small aesthetic extra push */
}

/* keep this component isolated */
.all-channels .lever-module,
.all-channels .lever-module * {
    box-sizing: border-box;
}

.all-channels .lever-module {
    position: relative;
    margin: 300px 20px 0;
    width: var(--lever-module-width);
    height: calc(var(--lever-module-width) * 1.8); /* base aspect from the pen */
}

/* the little housing */
.all-channels .lever-base {
    position: absolute;
    right: 0;
    top: 90%;
    transform: translateY(-50%);
    width: var(--lever-module-width);
    height: calc(var(--lever-module-width) * 1.8);
    background: #000000aa;
    border: 1px solid #fff;
    border-radius: 15px;
}

/* the lever is now centered vertically next to the base */
.all-channels .lever {
    position: absolute;
    right: 0;
    top: -69%;
    transform: translate(calc(10% + var(--lever-gap)), -50%);
    height: var(--lever-height);
    width: auto;
    overflow: visible;
    cursor: pointer;
    outline: none;
}

.all-channels .lever {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

/* animation hooks */
.all-channels .lever #rod {
    transform-origin: bottom center;
}
.all-channels .lever.animate #rod {
    animation: 0.5s shift_lever_rod ease-in-out 2;
}
.all-channels .lever.animate #top {
    animation: 0.5s shift_lever_top ease-in-out 2;
}
.all-channels .lever.animate.reverse #rod,
.all-channels .lever.animate.reverse #top {
    animation-direction: reverse;
}

/*MONEY CONFETTI*/

.all-channels .confetti-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.all-channels .confetti-wrap #canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* keyframes scaled to current lever size */
@keyframes shift_lever_rod {
    0% {
        transform: translateY(0) scaleY(1);
    }
    100% {
        transform: translateY(var(--lever-pull-distance)) scaleY(0.05);
    }
}
@keyframes shift_lever_top {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(var(--lever-height) + var(--lever-overshoot)));
    }
}

/* HALF SCREEN */
@media (max-width: 992px) {
    .all-channels .all-channels__form {
        margin: 30px 20px;
    }

    /*core inputs*/
    .all-channels .core-inputs {
        flex-wrap: wrap;
    }
    .all-channels #core-inputs-wrapper .core-inputs__field {
        flex: 1 0 45%;
        max-width: 50%;
    }

    /*channels*/
    .all-channels #variable-input-wrapper .channel__fields {
        flex-direction: column;
        gap: 5px;
    }
    .all-channels #variable-input-wrapper .channel__field {
        flex: 0 0 100%;
        max-width: 100%;
        width: 98%;

        flex-direction: row;
        justify-content: space-between;
    }
    .all-channels #variable-input-wrapper .channel__field input {
        flex: 0 0 35%;
        max-width: 35%;
    }

    /*resutls*/
    .all-channels #results-wrapper .channel__outputs {
        flex-direction: column;
        align-items: center;
    }
    .all-channels #results-wrapper .channel__output {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;

        gap: 15px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .all-channels #results-wrapper .channel__output label {
        flex: 0 1 34%;
    }
    .all-channels span.odometer {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .all-channels .results__main__overall span.odometer {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .all-channels .results__main__overall .odometer-inside {
        margin: 8px auto;
    }

    .all-channels .overall__output:nth-child(2) {
        flex-direction: column;
    }

    /*lever*/
    .all-channels #controls-wrapper {
        margin-top: 300px;
    }
    .all-channels .lever-module {
        flex: 0 0 10%;
    }
    .all-channels .lever {
        transform: translate(calc(10% + var(--lever-gap)), -122%);
    }

    .all-channels #controls-wrapper button.reset {
        margin-top: 100px;
    }
}