html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

body {
    background-color: #ececec;
    color: #484848;
    font-family: "SF Compact", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    cursor: default;
}

h1 {
    font-size: 24px;
    color: #393939;
    margin-top: 25px;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

h1.welcome {
    margin-top: 30px;
    margin-bottom: 20px;
}

h1.welcome::before {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url(../images/dropzone.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
    margin-top: 1px;
}

h1.adding {
    margin-top: 34px;
    margin-bottom: 30px;
}

h1.adding::before {
    content: "";
    width: 27px;
    height: 27px;
    background-image: url(../images/plus.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
}

h1.keyboard {
    margin-top: 34px;
    margin-bottom: 28px;
}

h1.keyboard::before {
    content: "";
    width: 29px;
    height: 29px;
    background-image: url(../images/keyboard.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
}

h1.organize {
    margin-top: 30px;
    margin-bottom: 26px;
}

h1.organize::before {
    content: "";
    width: 35px;
    height: 35px;
    background-image: url(../images/grid.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
}

h1.dropbar {
    margin-top: 30px;
    margin-bottom: 26px;
}

h1.dropbar::before {
    content: "";
    width: 35px;
    height: 35px;
    background-image: url(../images/dropbar.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
}

h1.thankyou {
    margin-top: 30px;
    margin-bottom: 26px;
}

h1.thankyou::before {
    content: "";
    width: 30px;
    height: 34px;
    background-image: url(../images/aptonic.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 12px;
}

#content {
    text-align: center;
    width: 490px;
    height: 550px;
    background-color: #ececec;
}

.flexslider {
    background-color: #ececec;
    height: 560px;
    border-style: none;
    border-width: 0 !important;
}

.description {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5em;
    width: 380px;
    text-align: left;
    font-size: 15px;
}

p {
    padding-top: 15px;
}

p.update {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
}

.intro-image1 {
    width: 490px;
    height: 292px;
    background: url(../images/intro1.png) no-repeat;
}

.intro-image2 {
    width: 490px;
    height: 292px;
    background: url(../images/intro2.png) no-repeat;
}

.intro-image3 {
    width: 490px;
    height: 292px;
    background: url(../images/intro3.png) no-repeat;
}

.intro-image4 {
    width: 490px;
    height: 260px;
    background: url(../images/intro4.png) no-repeat;
}

.intro5 {
    width: 380px;
    height: 160px;
    line-height: 1.5em;
    width: 490px;
    padding-left: 55px;
    padding-right: 55px;
    padding-top: 10px;
    text-align: left;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    background: #FAFAFA;
}

.intro5-heading {
    padding-left: 55px;
    padding-right: 55px;
    text-align: left;
    font-size: 15px;
    width: 380px;
    height: 50px;
    line-height: 1.5em;
}

.textbox {
    background: #FDFDFD;
    font-size: 0.8rem;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(27, 31, 35, 0.15);
    padding: 8px 10px;
    width: 200px;
    margin-top: 20px;
    margin-left: 48px;
    margin-right: 7px !important;
    clear: both;
}

#email-error {
    color: #E64162;
    margin-left: 51px;
    font-size: 12px;
}

#email-error img {
    width: 15px;
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

#subscribe-success {
    display: none;
    padding-top: 10px;
    margin-left: 10px;
}

#subscribe-success div {
    display: inline-block;
}

#subscribe-success img {
    width: 45px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 5px;
}

#email-error-container {
    display: none;
    margin-bottom: -23px;
    margin-top: 1px;
}
    
.follow-text {
    text-align: center;
}

.follow-button {
    margin-top: 40px;
    width: 140px;
    height: 29px;
    display: block;
    clear: both;
    margin-left: 120px;
    background-image: url(../images/follow.png);
}

.follow-button:active {
    background-image: url(../images/follow-p.png);
}

#vid-retina {
    display: none;
    width: 490px;
    height: 292px;
}

#vid-standard {
    width: 490px;
    height: 292px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .intro-image1 {
        background-image: url(../images/intro1@2x.png);
        background-size: 100%;
    }
    
    .intro-image2 {
        background-image: url(../images/intro2@2x.png);
        background-size: 100%;
    }
  
    .intro-image3 {
        background-image: url(../images/intro3@2x.png);
        background-size: 100%;
    }

    .intro-image4 {
        background-image: url(../images/intro4@2x.png);
        background-size: 100%;
    }
  
    h1.adding::before {
        background-image: url(../images/plus@2x.png);
    }
    h1.keyboard::before {
        background-image: url(../images/keyboard@2x.png);
    }
    h1.organize::before {
        background-image: url(../images/grid@2x.png);
    }
    h1.dropbar::before {
        background-image: url(../images/dropbar@2x.png);
    }
    h1.thankyou::before {
        background-image: url(../images/aptonic@2x.png);
    }
    
    .follow-button {
        background-image: url(../images/follow@2x.png);
        background-size: 100%;
    }
    
    .follow-button:active {
        background-image: url(../images/follow-p@2x.png);
        background-size: 100%;
    }
    
    #vid-retina {
        display: block !important;
    }
    
    #vid-standard {
        display: none;
    }
}

.button-container {
    margin-top: 15px;
    text-align: center;
}

.button-container-update {
    margin-top: 18px;
    text-align: center;
    height: 40px;
}

.finish-button-update {
    padding:10px 14px !important;
    font-size:15px !important;
}

.finish-button {
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #444444;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    padding: 6px 16px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    text-decoration: none;
}

.finish-button:active {
    background-color: #EDEFF2;
        box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
        transition: none 0s;
}

* {-webkit-user-drag: none;}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1C1C1E; /* iOS HIG Dark Gray 6 */
        color: #D1D1D6; /* iOS HIG Gray (light text) */
    }

    h1 {
        color: #FFFFFF; /* White text */
    }

    h1.welcome::before,
    h1.adding::before,
    h1.keyboard::before,
    h1.organize::before,
    h1.dropbar::before,
    h1.thankyou::before {
    }

    #content {
        background-color: #1C1C1E; /* Match body background */
    }

    .flexslider {
        background-color: #1C1C1E !important; /* Match body background */
        -webkit-box-shadow: 0 0px 1px rgba(255,255,255,.2) !important; /* Adjusted box-shadow for dark mode */
        /* Note: The original flexslider.css also had 'border: 4px solid #fff;'. This might need adjustment too. */
        /* border: 4px solid #1C1C1E !important; /* Or a slightly lighter gray if a border is desired */
        border-style: none !important; /* Assuming you want to keep the border removed as per your earlier .flexslider style */
    }

    .description {
        color: #D1D1D6; /* Light text for descriptions */
    }

    .intro5 {
        background-color: #2C2C2E; /* iOS HIG Dark Gray 5 */
    }

    .textbox {
        background-color: #2C2C2E; /* iOS HIG Dark Gray 5 */
        color: #FFFFFF; /* White text */
        border: 1px solid #48484A; /* iOS HIG Gray 3 / Darker gray border */
    }
    
    .finish-button {
        background-color: #38383A; /* iOS HIG Gray 4/5 - for button fill */
        border: 1px solid #505052; /* Slightly lighter border */
        color: #FFFFFF; /* White text */
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.08) 0 1px 0 inset; /* Adjusted shadow for depth */
    }

    .finish-button:active {
        background-color: #48484A; /* iOS HIG Gray 3/4 - darker active state */
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.05) 0 1px 0 inset; /* Adjusted active shadow */
    }

    .flex-control-paging li a {
        background: rgba(255, 255, 255, 0.3) !important; /* Lighter dots for dark background, slightly increased opacity */
        -webkit-box-shadow: none !important; /* Remove shadow */
        box-shadow: none !important; /* Remove shadow */
    }

    .flex-control-paging li a:hover {
        background: rgba(255, 255, 255, 0.6) !important; /* Lighter hover for dark background, adjusted opacity */
    }

    .flex-control-paging li a.flex-active {
        background: rgba(255, 255, 255, 0.8) !important; /* Even lighter for active dot, adjusted opacity */
    }
    
    h1.adding::before {
        filter: brightness(0.1) invert(1);
    }

    h1.dropbar::before {
        filter: brightness(0.1) invert(1);
    }
    
    h1.organize::before {
        filter: brightness(0.1) invert(1);
    }
}
