.template-mobile-makeover {
    padding: 3.2rem 0;

    --phone-height: 70vh;
    --phone-width: 35vh;
    & kemo-mobile-makeover-phone {
        font-size: calc(0.021 * var(--phone-height));
    }

    & .comparison {
        grid-column: 1 / center-end 3;

        min-height: var(--phone-height);
        padding: 4.8rem 0;

        display: grid;
        grid-template-rows: min-content;
        grid-template-columns: var(--main-left-grid-padding) 1fr;
        justify-content: center;

        position: relative;

        overflow: clip; /* we don't want this blowing up horizontal scroll if it's a bit too big to fit on mobile displays */

        & > * {
            /* the elements are overlaid on top of each other */
            grid-row: 1;
            grid-column: 2;

            width: max-content;
            height: max-content;

            display: flex;
            justify-self: center;

            &.old {
                transform: scale(85%) translateX(-16vw);
                filter: brightness(90%);

                & .phone {
                    box-shadow:
                        0 0.2em 0.8em var(--border-1),
                        0 1.2em 1.2em -0.4em rgba(from var(--border-1) r g b / 0.15);
                }
            }

            &.new {
                transform: translateX(15%);
            }
        }

        & > .fade {
            grid-column: 1;
            justify-self: start;
            width: 100%;
            height: 100%;

            position: relative;

            background: linear-gradient(
                to right,
                rgb(from var(--background-color) r g b / 100%),
                rgb(from var(--background-color) r g b / 61%),
                rgb(from var(--background-color) r g b / 29%),
                rgb(from var(--background-color) r g b / 7%),
                rgb(from var(--background-color) r g b / 0%)
            );
        }
    }

    & .blurb {
        grid-column: center-start 4 / center-end 6;
        padding: 2.4rem;
        align-self: center;
        max-width: 70ch;

        & h3 {
            font-size: 150%;
            font-weight: 700;
            padding-bottom: 0.5lh;
        }
    }

    @media (max-width: 960px) {
        & .comparison {
            grid-column: 1 / -1;

            & > .old {
                transform: scale(85%) translateX(-21vw);
            }
            & > .new {
                transform: translateX(8vw);
            }

            & > .fade {
                display: none;
            }
        }

        & .blurb {
            grid-column: center-start 1 / center-end 6;
            padding: 0;
            justify-self: center;
        }
    }
}

kemo-mobile-makeover-phone {
    /* knobs to tweak from outside:
      --phone-width  --phone-height  font-size */

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

    /* Phone model */

    & .phone {
        width: var(--phone-width);
        height: var(--phone-height);

        color: black;

        border-radius: 2.2em;
        box-shadow:
            0 0.2em 0.8em var(--border-1),
            0 1.6em 1.6em -0.4em var(--border-1);
    }

    & .phone-frame {
        width: 100%;
        height: 100%;

        background-image: linear-gradient(to bottom, #b5b5b5, #696c6f);
        background-color: #aaaaaa;
        padding: 0.35em;
        padding-bottom: 0.4em;
        border-radius: 2.2em;

        box-shadow:
            inset 0 -0.05em 0.1em -0em rgb(0 0 0 / 0.4),
            inset 0 0.2em 0.1em -0.1em rgb(100% 100% 100% / 0.7);
    }

    --bezel-color: #222;
    & .phone-bezel {
        width: 100%;
        height: 100%;

        background-color: var(--bezel-color);
        padding: 0.6em;
        padding-bottom: 2em;
        border-radius: 1.8em;

        box-shadow:
            0 0.1em 0.2em 0.1em rgb(100% 100% 100% / 0.3),
            0 0.2em 0.2em rgb(100% 100% 100% / 0.5),
            0 -0.2em 0.2em -0.1em rgb(0 0 0 / 0.5);
    }

    & .phone-screen {
        width: 100%;
        height: 100%;
        overflow: clip;

        display: flex;
        flex-direction: column;

        background-color: white;
        border-radius: 1.2em;

        position: relative;

        & .icon {
            width: 1.33lh;
            height: 1.33lh;
        }
    }

    /* Phone UI -- all sizing units have to be text size-relative */

    & .phone-screen-status {
        flex-shrink: 0;

        display: flex;
        flex-direction: row;
        position: relative;

        padding: 0.5lh 1.5ch;

        font-weight: 600;
        font-variant-numeric: tabular-nums;

        & .camera {
            width: 1lh;
            height: 1lh;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            background-color: var(--bezel-color);
            border-radius: 1000rem;
        }

        & .left {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        & .right {
            margin-left: auto;

            display: flex;
            flex-direction: row;
            align-items: center;
        }

        & .battery {
            position: relative;

            & .percentage {
                position: absolute;
                left: calc(1.33lh * 2 / 24);
                top: calc(1.33lh * 7 / 24);
                width: calc(1.33lh * 17 / 24);
                height: calc(1.33lh * 10 / 24);

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

                & > span {
                    color: white;
                    font-size: 75%;
                    font-weight: 900;
                    font-variant-numeric: tabular-nums;
                    line-height: 1;
                }
            }
        }
    }

    & .phone-screen-website {
        flex-grow: 1;
        overflow: hidden;

        position: relative;

        /* general provisions */

        & .website {
            width: 100%;
            height: 100%;
            overflow-y: clip;

            position: absolute;
            left: 0;
            top: 0;
        }

        /* the websites themselves */

        & .website-old-overflow {
            width: 110%;
            font-family: "Times New Roman", "Times", "Liberation Serif", serif;
        }

        & .website-old {
            font-size: 50%;
            background-image: url("/-/image/fujikayak-pattern.png");

            & .logo {
                width: 30%;
                height: auto;
            }

            & .logo-row {
                display: flex;
                flex-direction: row;
                background-size: 2em;
                background-repeat: repeat;
            }

            & .search {
                margin-left: auto;
                padding-right: 2ch;

                & input {
                    border-radius: 0.2ch;
                    padding: 0.1lh 0.6ch;
                    box-shadow: none;
                    border: 0.1em solid #777;
                    background-color: #fff;
                }

                & button {
                    border-radius: 0.2ch;
                    padding: 0.1lh 0.6ch;
                    box-shadow: none;
                    border: 0.1em solid #777;
                    background-color: #eee;
                }
            }

            & .navigation {
                display: flex;
                flex-direction: row;

                border-bottom: 0.1em solid white;
                text-transform: uppercase;

                & li {
                    flex-grow: 1;
                    flex-basis: 0;
                    display: block;
                    text-align: center;

                    background-color: #02816c;
                    background-image: url("/-/image/fujikayak-button.png");
                    background-size: 100% 100%;
                    color: white;
                    border-right: 0.1em solid white;
                }
            }

            & .hero-image {
                width: 100%;
                height: auto;
            }

            & .site-text {
                padding: 2ch;

                & .fake-h1 {
                    font-size: 200%;
                    font-weight: 800;
                    text-wrap: balance;
                }

                & p:not(.fake-h1),
                & ul {
                    max-width: 80%;
                }

                & .legalese-stuff-probably-written-to-scam-you {
                    font-size: 50%;
                }

                & table.news {
                    float: right;
                    max-width: 20ch;

                    border-collapse: collapse;
                    & td,
                    & th {
                        border: 0.1em solid black;
                        padding: 0.1lh 0.7ch;
                    }

                    & p {
                        padding: 0;

                        &.title {
                            font-weight: 700;
                        }
                    }
                }

                & a,
                & .fake-a {
                    color: blue;
                    text-decoration: underline;
                }
            }

            & .cookies {
                position: absolute;
                bottom: 1ch;
                left: 1ch;
                padding: 0.4lh 1ch;
                max-width: 40ch;

                background-color: black;
                color: white;
                font-family: "Roboto", "Liberation Sans", "Arial", "Helvetica", sans-serif;
                border-radius: 0.4em;

                & p {
                    padding: 0.1lh 0;
                }

                & .title {
                    font-weight: 900;
                }

                & button {
                    color: white;
                    background-color: black;
                    border: 0.1em solid white;
                    border-radius: 0.1em;
                    padding: 0.1lh 0.8ch;
                }

                & .sell-your-soul {
                    display: flex;
                    flex-direction: row;
                    gap: 1ch;
                    align-items: center;
                }

                & .fake-a {
                    text-decoration: underline;
                }
            }

            & .scrollbar {
                --scrollbar-size: 0.3rem;
                position: absolute;
                background-color: #aaa6;
                border: 0.1rem solid #aaa1;
                border-radius: 9999em;
                background-clip: padding-box;

                margin: 0.1rem;
            }

            & .scrollbar-horizontal {
                height: var(--scrollbar-size);
                width: 80%;
                left: 0;
                bottom: 0.2rem;
            }

            & .scrollbar-vertical {
                width: var(--scrollbar-size);
                height: 30%;
                right: 0;
                top: 0;
            }
        }

        & .website-new {
            --accent-color: #365963;
            --scrim:
                rgb(0 0 0 / 50%), rgb(0 0 0 / 30%), rgb(0 0 0 / 14%), rgb(0 0 0 / 3%),
                rgb(0 0 0 / 0%);

            & .landing {
                width: 100%;
                height: 100%;

                position: relative;

                & .hero-image {
                    position: absolute;
                    left: 0;
                    top: -13%;

                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    background-size: cover;
                }

                & .top {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 2.5lh;

                    display: flex;
                    flex-direction: row;

                    background: linear-gradient(
                        to bottom,
                        rgb(0 0 0 / 50%),
                        rgb(0 0 0 / 30%),
                        rgb(0 0 0 / 14%),
                        rgb(0 0 0 / 3%),
                        rgb(0 0 0 / 0%)
                    );

                    & .logo {
                        width: auto;
                        height: 100%;
                    }

                    & .menu-button {
                        margin: 0.3lh;
                        margin-left: auto;
                        background-color: white;
                    }
                }

                & .bottom {
                    position: absolute;
                    bottom: 0;
                    width: 100%;

                    display: flex;
                    flex-direction: column;
                }

                & .site-heading {
                    font-size: 175%;
                    font-weight: 900;
                    color: white;
                    padding: 0.4em;
                    text-wrap: balance;

                    text-shadow: 0 0.1em 0.1em #000a;

                    & span {
                        background-image: linear-gradient(
                            to bottom,
                            transparent 0%,
                            transparent 50%,
                            var(--accent-color) 50%
                        );
                    }
                }

                & .waves {
                    height: 0.6em;
                    background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg"> \
                            <path d="M8 0C4 0 4 4 0 4V8H16V4C12 4 12 0 8 0Z" fill="white"/> \
                            </svg>');
                    background-size: contain;
                }

                & .site-blurb {
                    padding: 0.3em 0.7em;
                    background-color: white;
                }

                & .book-now {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    padding-top: 0.2lh;
                    padding-bottom: 0.5lh;
                }

                & .button {
                    --button-color: white;
                    --border-color: #6e7584;
                    color: black;

                    &.button-primary {
                        --button-color: var(--accent-color);
                        --border-color: #0d313a;
                        color: white;
                        text-shadow: 0 0.1em 0 var(--border-color);
                        font-weight: 600;
                    }

                    &:not(.icon) {
                        line-height: 1;
                        padding: 1lh 2ch;
                    }
                    &.icon {
                        width: 2.75em;
                        height: 2.75em;
                    }

                    background-color: var(--button-color);
                    border: 0.1em solid var(--border-color);
                    border-radius: 0.6em;
                    background-clip: padding-box;

                    box-shadow: inset 0 -0.2em 0 var(--border-color);
                }

                & .scrim-to-bottom {
                    background: linear-gradient(to top, var(--scrim));
                }
            }
        }
    }

    & .phone-screen-browser {
        position: relative; /* to stack on top of new website */

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

        padding: 0.25lh;

        background-color: #f3f3f3;
        border-top: 0.1em solid #fafafa;
        box-shadow: 0 0 0.4em var(--border-1);

        & .address-bar {
            flex-grow: 1;

            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.2em;

            border-radius: 1000rem;
            padding: 0.4em;
            margin-right: 0.25lh;
        }

        & .browser-button {
            padding: 0.4rem;
        }

        & .tab-count-button {
            width: 1.33lh;
            height: 1.33lh;

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

            & .counter {
                border: 0.15em solid var(--text-color);
                border-radius: 0.4em;
                line-height: 1;
                padding: 0.2lh 0.8ch;
                font-weight: 600;
                font-size: 90%;
                font-variant-numeric: tabular-nums;
            }
        }
    }

    & .phone-screen-navigation {
        position: relative; /* to stack on top of browser */

        height: 0.9lh;

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

        background-color: #f3f3f3;

        & .navigation-pill {
            width: 30%;
            height: 25%;
            background-color: #000;
            opacity: 60%;
            border-radius: 99999rem;
        }
    }
}

@property --template-mobile-makeover-comparison-auto {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@keyframes template-mobile-makeover-comparison-auto {
    0% {
        --template-mobile-makeover-comparison-auto: 102%;
    }
    20% {
        --template-mobile-makeover-comparison-auto: 102%;
    }
    80% {
        --template-mobile-makeover-comparison-auto: -2%;
    }
    100% {
        --template-mobile-makeover-comparison-auto: -2%;
    }
}

@property --template-mobile-makeover-comparison-mix {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}