* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        linear-gradient(
            180deg,
            #f7f4ee,
            #ece7df
        );

    color: #101828;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.page {
    width: min(
        100%,
        1100px
    );

    margin: 0 auto;

    padding:
        42px 20px
        64px;
}

.intro {
    max-width: 620px;

    margin:
        0 auto
        24px;

    text-align: center;
}

.intro span {
    color: #7a5836;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;
}

.intro h1 {
    margin:
        8px 0
        10px;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.05;
}

.intro p {
    margin: 0;

    color: #6b6259;
    line-height: 1.5;
}

.phone {
    position: relative;

    width:
        min(
            100%,
            430px
        );

    height:
        min(
            850px,
            84vh
        );

    min-height: 680px;

    margin: 0 auto;

    padding: 10px;

    border-radius: 42px;

    background: #111;

    box-shadow:
        0 28px 70px
        rgba(
            20,
            20,
            20,
            .22
        );
}

.speaker {
    position: absolute;

    z-index: 5;

    top: 15px;
    left: 50%;

    width: 82px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background: #333;
}

.screen {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 33px;

    background: #fff;
}

.simbar {
    height: 54px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 8px;

    padding:
        8px 12px
        6px;

    border-bottom:
        1px solid #e5e7eb;

    background: #fff;
}

.simbar strong {
    font-size: 13px;
    text-align: center;
}

.simbar button {
    border: 0;

    background: transparent;

    color: #204b82;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}

#back {
    justify-self: start;
}

#reset {
    justify-self: end;
}

.viewport {
    height:
        calc(
            100% - 54px
        );
}

.viewport iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #fff;
}

.viewport iframe[hidden] {
    display: none;
}

@media(max-width:520px) {

    .page {
        padding: 0;
    }

    .intro {
        display: none;
    }

    .phone {
        width: 100%;
        height: 100vh;
        min-height: 100vh;

        padding: 0;

        border-radius: 0;

        box-shadow: none;
    }

    .speaker {
        display: none;
    }

    .screen {
        border-radius: 0;
    }
}


/* DRAGON_CARTA_V6_EMBED_MODE_V3 */

html.dragon-carta-v6-embed,
html.dragon-carta-v6-embed body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    background: transparent;
}

html.dragon-carta-v6-embed .page {
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

html.dragon-carta-v6-embed .intro {
    display: none;
}

html.dragon-carta-v6-embed .phone {
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html.dragon-carta-v6-embed .speaker {
    display: none;
}

html.dragon-carta-v6-embed .screen {
    width: 100%;
    height: 100%;
    border-radius: 0;
}