@font-face {
    font-family: 'RobotoMedium';
    src: url("/fonts/Roboto-Medium-webfont.eot");
    src: url("/fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Medium-webfont.woff") format("woff"), url("/fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("/fonts/Roboto-Medium-webfont.svg#RobotoMedium") format("svg");
    font-weight: normal;
    font-style: normal
}

body {
    background-color: #fff;
    background-image: url("../images/background.jpg");
    background-size: cover;
    margin-top: 20px;
    font-family: 'RobotoMedium';
    margin: 0;
    padding: 0
}

fieldset {
    border: none
}

label {
    float: left;
    text-indent: -99999px
}

input {
    width: 85%;
    margin-right: 1%;
    height: 2em;
    font-size: 1.6em;
    float: left
}

h3, dl, dd, dt {
    margin: 1em 2em
}

h2 {
    margin: 1em
}

dt {
    font-weight: bold
}

p {
    line-height: 1.6;
    margin: 1em 2em
}

p.intro {
    clear: both
}

a {
    color: #101010;
    text-decoration: none;
    transition: all 1s ease-in-out;
}

a:hover {
    color: #cc4e46;
    background-color: #ede6dc
}

.button {
    background-color: #ede6dc;
    color: #cc4e46;
    width: 8%;
    line-height: 1.7em;
    margin: 0;
    font-size: 2em;
    text-align: center;
    float: left;
    border: solid 1px #8e352e;
    box-shadow: 0 0 3px #333
}

.button:hover {
    background-color: #cc4e46;
    color: #ede6dc
}

.promos {
    background: #fff;
    width: 100%;
    position: relative;
    border-top: 5px solid;
    border-bottom: 5px solid;
    margin: 2em auto;
    padding: 2em 0
}

.promos h2 {
    text-align: center;
    margin-top: 0
}

.ebook {
    border-right: 3px solid
}

.promos .button {
    width: 100%;
    font-size: 1.5em;
    background-color: #cc4e46;
    color: #ede6dc
}

.ebook, .bookmarklet {
    width: 49%;
    float: left
}

h1 {
    text-transform: uppercase;
    text-align: center
}

.wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto
}

.netawards {
    position: absolute;
    top: 0;
    right: 0;
    width: 125px;
    height: 125px;
    background-image: url(/images/NETawards_ribbon.png)
}

.netawards a {
    display: block;
    width: 125px;
    height: 125px;
    text-indent: -999999px
}

.netawards a:hover {
    background-color: transparent
}

.display {
    position: relative;
    left: 0px;
    height: 600px
}

.url {
    float: left;
    width: 100%;
    margin: 0 auto;
}

form {
    width: 85%;
    margin: 1em auto
}

div {
    background-repeat: no-repeat;
    background-size: 100%;
    /* overflow: hidden */ /* Removed global overflow hidden to allow parts of devices to stick out if needed */
}

iframe, .display img {
    transform: scale(0.219);
    -webkit-transform: scale(0.219);
    -o-transform: scale(0.219);
    -ms-transform: scale(0.219);
    -moz-transform: scale(0.219);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    -moz-transform-origin: top left;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #fff;
    border-color: #000
}

/* Mobile - iPhone Style */
.mobile {
    /* 274 + 12 border, scaled to 1.5 in mobile_view.php = about 429px.
       This matches the slimmer, taller phone shape used by the reference. */
    width: 274px;
    height: 521px;
    background: #282828;
    border-radius: 28px;
    border: 6px solid #282828;
    top: 450px; 
    left: 280px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    background-image: none;
    position: absolute;
    z-index: 5;
    /* Scale down the container itself instead of the content */
    transform: scale(0.28);
    transform-origin: top left;
    overflow: visible; 
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Mobile - iPhone Style */
.mobile:hover {
    transform: scale(0.28) translateY(-20px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
    z-index: 10;
}
.mobile::after {
    /* The reference frame has a clear top edge instead of a notch. */
    content: none;
}
.mobile .screen-content {
    width: 274px;
    height: 521px;
    border-radius: 22px;
    overflow: hidden;
    background: white;
    position: relative;
}
.mobile iframe,
.mobile img {
    width: 100%;
    height: 100%;
    transform: none;
    top: 0;
    left: 0;
    border: none;
    display: block;
}

.mobile img {
    /* Preserve the screenshot ratio. Fill from the top and crop only the
       overflow at the bottom instead of stretching the image horizontally. */
    object-fit: cover;
    object-position: top center;
}

.mobile video {
    width: 100%;
    height: 100%;
    transform: none;
    position: absolute;
    inset: 0;
    border: none;
    display: block;
}

.mobile .mobile-video-main {
    /* The phone width is fitted to the source ratio after metadata loads. */
    object-fit: contain;
    object-position: top center;
    background: #fff;
    z-index: 1;
}

/* Tablet - iPad Style */
.tablet {
    width: 788px;
    height: 1044px;
    background: #111;
    border-radius: 30px;
    border: 10px solid #222;
    top: 240px;
    left: 100px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    background-image: none;
    position: absolute;
    z-index: 3;
    transform: scale(0.27);
    transform-origin: top left;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Tablet - iPad Style */
.tablet:hover {
    transform: scale(0.27) translateY(-20px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
    z-index: 10;
}
.tablet .screen-content {
    width: 768px;
    height: 1024px;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}
.tablet iframe, .tablet img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: none; /* Reset scale */
    top: 0;
    left: 0;
    border: none;
    display: block;
}

/* Laptop - MacBook Style */
.laptop {
    width: 1320px;
    height: 840px; /* Increased height to include base */
    background: transparent;
    border-radius: 0;
    border: none;
    top: 303px;
    left: 550px;
    box-shadow: none;
    transition: all 0.3s ease;
    background-image: none;
    position: absolute;
    z-index: 2;
    transform: scale(0.33);
    transform-origin: top left;
    overflow: visible; /* Ensure base is visible */
}
/* ... */
.laptop .screen-bezel {
    width: 1320px;
    height: 840px;
    background: #111;
    border-radius: 20px 20px 0 0;
    border: 20px solid #222;
    border-bottom: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Laptop - MacBook Style */
.laptop:hover {
    transform: scale(0.33) translateY(-20px);
    z-index: 10;
}
.laptop .base {
    position: absolute;
    bottom: -30px;
    left: -60px;
    width: 1440px;
    height: 30px;
    background: linear-gradient(to bottom, #e0e0e0, #bcbcbc);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #aaa;
}
.laptop .base::before { /* Thumb notch */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 10px;
    background: #ccc;
    border-radius: 0 0 10px 10px;
}
.laptop .screen-content {
    width: 1280px;
    height: 802px;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}
.laptop iframe, .laptop img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: none; /* Reset scale */
    top: 0;
    left: 0;
    border: none;
    display: block;
}

/* Desktop - iMac Style - Ultra Wide */
.desktop {
    width: 2580px;
    height: 1050px; 
    background: transparent;
    border-radius: 0;
    border: none;
    top: 20px;
    left: 50%; 
    /* The element is 2580px wide. We want its center at 50% of parent. */
    /* So we offset it by half its width to the left. */
    margin-left: -1290px;
    
    /* Now we scale it down. Transform origin top center means it shrinks towards the top center point. */
    transform: scale(0.35);
    transform-origin: top center;
    
    box-shadow: none;
    transition: all 0.3s ease;
    background-image: none;
    position: absolute;
    z-index: 1;
    overflow: visible;
}
/* ... */
.desktop .screen-frame {
    width: 2580px; /* Matching width */
    height: 1032px; /* Adjusted height since chin is gone */
    background: #111;
    border-radius: 20px;
    border: 20px solid #222;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Desktop - iMac Style - Ultra Wide */
.desktop:hover {
    transform: scale(0.35) translateY(-20px);
    z-index: 10;
}
.desktop .chin {
    display: none;
}
.desktop .stand {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px; /* Wider stand for stability look */
    height: 180px;
    background: linear-gradient(to bottom, #ccc, #aaa);
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%);
    z-index: -1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.desktop .screen-content {
    width: 2540px; /* Matching inner width */
    height: 992px; 
    background: white;
    position: relative;
    z-index: 1;
}
.desktop iframe, .desktop img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: none; 
    top: 0;
    left: 0;
    border: none;
    display: block;
}

.about-tool {
    font-size: 1.2em;
    max-width: 64em;
    width: 80%;
    margin: 1em auto
}

.about-tool li {
    margin-bottom: 0.5em;
    line-height: 1.2
}

@media (max-width: 1160px) {
    .display {
        width: 95%;
        height: 550px;
        transform: scale(0.81);
        -webkit-transform: scale(0.81);
        -o-transform: scale(0.81);
        -ms-transform: scale(0.81);
        -moz-transform: scale(0.81)
    }

    .desktop {
        left: 180px
    }

    .laptop {
        left: 520px
    }

    .tablet {
        left: 80px
    }

    .mobile {
        left: 260px
    }

    input {
        width: 88%
    }
}

@media (max-width: 1070px) {
    .display {
        left: -50px
    }
}

@media (max-width: 1000px) {
    .display {
        height: 500px;
        transform: scale(0.71);
        -webkit-transform: scale(0.71);
        -o-transform: scale(0.71);
        -ms-transform: scale(0.71);
        -moz-transform: scale(0.71);
        top: -40px
    }

    .desktop {
        left: 140px
    }

    .laptop {
        left: 480px
    }

    .tablet {
        left: 40px
    }

    .mobile {
        left: 220px
    }
}

@media (max-width: 850px) {
    .display {
        height: 500px;
        transform: scale(0.65);
        -webkit-transform: scale(0.65);
        -o-transform: scale(0.65);
        -ms-transform: scale(0.65);
        -moz-transform: scale(0.65)
    }

    .desktop {
        left: 100px
    }

    .laptop {
        left: 440px
    }

    .tablet {
        left: 0px
    }

    .mobile {
        left: 180px
    }
}

@media (max-width: 768px) {
    .display {
        height: 450px;
        transform: scale(0.55);
        -webkit-transform: scale(0.55);
        -o-transform: scale(0.55);
        -ms-transform: scale(0.55);
        -moz-transform: scale(0.55)
    }

    .button {
        font-size: 1.6em;
        line-height: 1.75em;
        margin-top: 0.5em;
        width: 100%
    }

    input {
        height: 1.2em;
        width: 100%
    }
}

@media (max-width: 670px) {
    .display {
        height: 400px;
        left: -70px;
        transform: scale(0.45);
        -webkit-transform: scale(0.45);
        -o-transform: scale(0.45);
        -ms-transform: scale(0.45);
        -moz-transform: scale(0.45)
    }
}

@media (max-width: 580px) {
    input {
        font-size: 1.4em;
        height: 1.4em;
        width: 100%
    }

    .button {
        width: 100%;
        float: left;
        font-size: 1.4em;
        margin-top: 0.5em
    }
}

@media (max-width: 560px) {
    .display {
        height: 270px;
        top: -65px;
        transform: scale(0.37);
        -webkit-transform: scale(0.37);
        -o-transform: scale(0.37);
        -ms-transform: scale(0.37);
        -moz-transform: scale(0.37)
    }
}

@media (max-width: 440px) {
    .display {
        left: -17px;
        top: -65px;
        width: 70px;
        transform: scale(0.35);
        -webkit-transform: scale(0.35);
        -o-transform: scale(0.35);
        -ms-transform: scale(0.35);
        -moz-transform: scale(0.35)
    }
}

@media (max-width: 380px) {
    .display {
        height: 235px;
        left: -17px;
        top: -65px;
        width: 70px;
        transform: scale(0.27);
        -webkit-transform: scale(0.27);
        -o-transform: scale(0.27);
        -ms-transform: scale(0.27);
        -moz-transform: scale(0.27)
    }

    .desktop {
        left: 100px
    }

    .laptop {
        left: 515px
    }

    .tablet {
        left: 0px
    }

    .mobile {
        left: 180px
    }

    h1 {
        font-size: 1.2em
    }

    p {
        margin: 1em
    }
}

.button1 {
    background-color: #ede6dc;
    border: 1px solid #8e352e;
    box-shadow: 0 0 3px #333;
    color: #cc4e46;
    float: left;
    font-size: 2em;
    line-height: 1.7em;
    margin: 0;
    text-align: center;
    width: 80%;
}

#carbonads {
    max-width: 400px;
    margin: 1em auto;
}

.carbon-img {
    float: left;
    margin-right: 8px;
}

.carbon-text {
    display: block;
}

.carbon-poweredby {
    float: right;
}

.carbon-text {
    padding: 8px;
}

#carbonads {
    padding: 15px;
    border: 1px solid #ccc;
}

.carbon-text {
    font-size: 12px;
    color: orange;
}

.carbon-poweredby {
    font-size: 75%;
}

.ad {
    text-align: center;
    padding: 1em;
}

/* Mobile View Mode */
.display.mobile-view .tablet,
.display.mobile-view .laptop,
.display.mobile-view .desktop {
    display: none !important;
}

.display.mobile-view .mobile {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.5) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    position: absolute !important;
}

.display.mobile-view .mobile:hover {
    transform: translate(-50%, -50%) scale(1.5) translateY(-10px) !important;
}