/* Natsukashi UI - late 2000s Aero web aesthetic */
*{
    box-sizing:border-box
}
html,body{
    margin:0;
    padding:0
}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:#21485b;
    background: #226A9A;
background: linear-gradient(180deg, rgba(34, 106, 154, 1) 15%, rgba(193, 211, 221, 1) 40%, rgba(191, 209, 221, 1) 70%, rgba(61, 121, 157, 1) 100%);
    min-height:100vh;
    font-size:13px
}
 a{
    color:#0d5b91;
    text-decoration:none
}
a:hover{
    text-decoration:underline
}
 .shell{
    width:930px;
    margin:0 auto;
    position:relative;
}
 .topbar{
    height:108px;
    padding-top:12px;
    position:relative;
    color:#fff;
    text-shadow:0 1px 2px #16455a
}
 .brand{
    display:flex;
    align-items:center;
    gap:10px;
    position:absolute;
    left:10px;
    bottom:18px
}
.brand-mark{
    width:42px;
    height:42px;
    border-radius:10px;
    transform:skew(-7deg) rotate(-2deg);
    background:conic-gradient(from 20deg,#fb3f27 0 25%,#ffd633 25% 50%,#4fc35a 50% 75%,#3c83ec 75%);
    box-shadow:0 1px 4px #16506d, inset 0 0 0 3px rgba(255,255,255,.24)
}
.brand span{
    font-size:32px;
    letter-spacing:-1.8px
}
.brand small{
    font-size:12px;
    opacity:.85;
    letter-spacing:0
}
 .utility{
    position:absolute;
    right:9px;
    top:9px;
    font-size:11px
}
.utility a{
    color:#fff;
    margin-left:13px
}
.search{
    position:absolute;
    right:9px;
    bottom:13px;
    display:flex;
    gap:5px
}
.search input{
    width:232px;
    height:23px;
    border:1px solid #7b8e98;
    padding:2px 6px
}
.search button{
    height:23px;
    padding:0 10px;
    border:1px solid #687982;
    border-radius:2px;
    background:linear-gradient(#fff,#d6e1e5);
    color:#203a49;
    font-weight:bold
}
.live{
    position:absolute;
    right:12px;
    bottom:-7px;
    font-size:10px
}
 .chrome{
    border:1px solid #244956;
    border-radius:7px 7px 0 0;
    box-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(0,0,0,.18);
    background: #B2D3D7;
background: linear-gradient(180deg, rgba(178, 211, 215, 1) 0%, rgba(226, 237, 241, 1) 23%, rgba(253, 255, 254, 1) 49%, rgba(190, 208, 220, 1) 75%, rgba(61, 121, 157, 0) 100%);
    overflow:hidden;
    padding: 7px;
}
.tabs{
    height:32px;
    background-image:url("navBg.png");
	background-repeat: repeat, no-repeat;
	background-size: contain;
    display:flex;
    border:1px solid #244956;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
}
.tabs a,.tabs button{
    color:#fff;
    padding:8px 22px;
    border-right:1px solid #272f33;
    font-size:12px;
    text-shadow:0 -1px #000;
    background:transparent;
    border-top:0;
    border-bottom:0;
    border-left:0;
    font-family:inherit;
    cursor:pointer
}
.tabs a.active,.tabs a:hover,.tabs button.active,.tabs button:hover,.tabs button:focus-visible{
    background-image:url("navBgSelected.png");
	background-size: contain;
    text-decoration:none
}
.subbar{
    height:23px;
    background-image: url("bottomBg.png");
    background-size: contain;
    border-left:1px solid #8B919D;
    border-right:1px solid #8B919D;
    border-bottom:1px solid #8B919D
}
 .content{
    display:grid;
    grid-template-columns:195px 1fr 190px;
    gap:11px;
    padding:12px 12px 40px;
    /* background:linear-gradient(90deg,rgba(255,255,255,.54),rgba(255,255,255,.16) 23%,rgba(255,255,255,.2) 78%,rgba(255,255,255,.55)); */
    min-height:760px
}
.left h3,.right h3{
    color:#0d5c8d;
    font-size:18px;
    font-weight:normal;
    margin:7px 0 8px
}
.left ul,.right ul{
    margin:0 0 18px;
    padding-left:18px
}
.left li,.right li{
    margin:5px 0
}
.sidebox{
    margin-bottom:16px
}
.mini{
    font-size:11px;
    line-height:1.35
}
.action{
    display:flex;
    gap:9px;
    align-items:center;
    margin:8px 0;
    padding:7px;
    border-top:1px solid #fff;
    border-bottom:1px solid #c1d3da;
    background:linear-gradient(#eff9fc,#d7e9ef);
    border-radius:5px
}
.orb{
    width:30px;
    height:30px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff 0 12%,#7bc9f4 13% 28%,#2e8cd5 29% 58%,#134d95 59%);
    box-shadow:0 1px 4px #487080;
    flex:0 0 auto
}
 .hero{
    min-height:218px;
    border:1px solid #dae7e9;
    border-radius:7px;
    background:linear-gradient(90deg,#fbfff3,#e9f7ef);
    box-shadow:inset 0 1px #fff,0 1px 2px rgba(0,0,0,.12);
    display:grid;
    grid-template-columns:1fr 42%;
    overflow:hidden
}
.hero-copy{
    padding:18px 16px
}
.eyebrow{
    color:#4f914c;
    font-size:12px;
    font-weight:bold
}
.hero h1{
    font-size:31px;
    font-weight:normal;
    line-height:1;
    margin:4px 0 10px;
    color:#1a2c35
}
.hero p{
    font-size:16px;
    color:#4d9951;
    margin:0 0 21px
}
.arrow{
    font-size:19px;
    color:#3b973e;
    font-weight:bold
}
.hero-art{
    background:radial-gradient(circle at 55% 45%,#c8f2cd 0,#f2f8ea 45%,#eaf4ea 100%);
    display:flex;
    align-items:center;
    justify-content:center
}
.phone-placeholder{
    width:145px;
    height:116px;
    border:5px solid #6a777d;
    border-radius:13px 13px 8px 8px;
    background:linear-gradient(#183340 0 12px,#94c9d1 13px 16px,#4f9c7e 17px 100%);
    box-shadow:0 7px 9px rgba(0,0,0,.25);
    position:relative
}
.phone-placeholder:after{
    content:'Natsukashi';
    position:absolute;
    left:13px;
    right:13px;
    top:27px;
    height:57px;
    border-radius:4px;
    background:linear-gradient(#bff0ff,#79cbdf);
    border:2px solid #d8f8ff;
    color:#3b6f7a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:13px;
    text-shadow:0 1px #fff
}
.phone-placeholder:before{
    content:'';
    position:absolute;
    left:15px;
    right:15px;
    bottom:-25px;
    height:17px;
    background:linear-gradient(#fafafa,#91999d);
    border-radius:0 0 8px 8px;
    box-shadow:0 2px 4px rgba(0,0,0,.18)
}
 .panel{
    background:linear-gradient(#f4fbfd,#e6f1f5);
    border:1px solid #cadbe1;
    border-radius:7px;
    box-shadow:inset 0 1px #fff;
    margin-top:12px;
    overflow:hidden
}

.panelMain {
    background:linear-gradient(#f4fbfd,#e6f1f5);
    border:1px solid #cadbe1;
    border-radius:7px;
    box-shadow:inset 0 1px #fff;
    overflow:hidden
}

.panel-title{
    height:31px;
    background:linear-gradient(#eff8fb,#d7e9ef);
    border-bottom:1px solid #c7d9df;
    padding:7px 10px;
    color:#10628f;
    font-size:13px;
    font-weight:bold
}
.panel-body{
    padding:11px 12px
}
.feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}
.feature{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:9px;
    align-items:start
}
.feature-thumb{
    width:56px;
    height:55px;
    border:1px solid #c1d4dc;
    border-radius:4px;
    background:linear-gradient(145deg,#d6f1f4,#8ec2ce 55%,#f8ffff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#3f7d8d;
    font-size:9px;
    text-align:center;
    box-shadow:inset 0 1px #fff
}
.feature h4{
    margin:0 0 4px;
    color:#1e6085;
    font-size:12px
}
.feature p{
    margin:0;
    font-size:11px;
    line-height:1.35;
    color:#356071
}
 .tabs2{
    display:flex;
    background:linear-gradient(#e7f3f7,#d3e7ed);
    border:1px solid #c3d5db;
    border-bottom:0;
    border-radius:6px 6px 0 0
}
.tabs2 a,.tabs2 button{
    flex:1;
    text-align:center;
    padding:8px 5px;
    font-size:11px;
    background: linear-gradient(#e7f3f7,#d3e7ed);
    border-right:1px solid #c6d9df;
    border-top:0;
    border-bottom:0;
    border-left:0;
    color:inherit;
    font-family:inherit;
    cursor:pointer
}
.tabs2 a:last-child,.tabs2 button:last-child{
    border-right:0
}
.tabs2 a.active,.tabs2 button.active,.tabs2 button:focus-visible{
    font-weight:bold;
    background: #daecf5;
background: linear-gradient(180deg, rgba(218, 236, 245, 1) 0%, rgba(195, 220, 227, 1) 100%);
}
 .news{
    padding:12px
}
.news img,.placeholder-large{
    width:100%;
    height:136px;
    border:1px solid #c1d4dc;
    border-radius:4px;
    background:radial-gradient(circle at 25% 30%,#e4fbff,#9ac8d4 48%,#477f96 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-shadow:0 1px 2px #335562;
    font-weight:bold
}
.news p{
    font-size:11px;
    line-height:1.45
}
 .featured{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}
.card{
    background:linear-gradient(#f5fbfd,#dfedf2);
    border:1px solid #cbdde3;
    border-radius:7px;
    padding:9px;
    min-height:150px;
    box-shadow:inset 0 1px #fff
}
.device-strip{
    display:flex;
    gap:13px;
    overflow:hidden;
    padding:9px
}
.device{
    min-width:70px;
    text-align:center;
    font-size:10px;
    color:#5c818c
}
.device-box{
    height:66px;
    border-radius:6px;
    background:linear-gradient(#e9f8fb,#a9cbd4);
    border:1px solid #c5d8df;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#6c8d97
}
.device-label{
    margin-top:5px
}
.big-device{
    height:165px;
    display:flex;
    align-items:center;
    justify-content:center
}
.big-device .phone-placeholder{
    transform:scale(1.18)
}
 .right .box{
    margin-bottom:12px;
    background:linear-gradient(#f0f7fa,#ddecef);
    border:1px solid #c6d8de;
    border-radius:7px;
    overflow:hidden
}
.right .box .head{
    padding:7px 9px;
    color:#17628b;
    font-weight:bold;
    background:linear-gradient(#eaf5f8,#d2e5ea);
    border-bottom:1px solid #c4d8df
}
.right .box .body{
    padding:9px;
    font-size:11px
}
.badge{
    display:inline-block;
    padding:2px 5px;
    border-radius:8px;
    background:#d8efbd;
    border:1px solid #9fc67e;
    color:#4f7c3b;
    font-size:9px;
    font-weight:bold
}
 .footer{
    margin-top:0;
    color:#fff;
    padding:26px 13px 20px;
    min-height:280px;
    text-shadow:0 1px 1px #1f5870
}
.footer-title{
    font-weight:bold;
    margin-bottom:12px
}
.footer-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px
}
.footer h4{
    margin:0 0 5px;
    font-size:12px
}
.footer a{
    color:#fff
}
.footer ul{
    list-style:none;
    padding:0;
    margin:0;
    font-size:10px;
    line-height:1.55
}
.legal{
    text-align:right;
    font-size:10px;
    margin-top:22px;
    opacity:.95
}
.page-title{
    font-size:28px;
    font-weight:normal;
    color:#344d58;
    margin:0 0 6px
}
.page-intro{
    font-size:14px;
    margin:0 0 12px;
    color:#496b78
}
.article{
    padding:14px 15px
}
.article h2{
    font-size:19px;
    font-weight:normal;
    color:#17618d;
    margin:4px 0 9px
}
.article h3{
    font-size:14px;
    color:#2f718c
}
.article p,.article li{
    line-height:1.5
}
.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
 .form-row{
    margin-bottom:9px
}
.form-row label{
    display:block;
    font-size:11px;
    font-weight:bold;
    color:#356272;
    margin-bottom:4px
}
.form-row input,.form-row textarea,.form-row select{
    width:100%;
    border:1px solid #afc3cb;
    background:#fff;
    height:29px;
    padding:5px
}
.form-row textarea{
    height:98px
}
.button{
    border:1px solid #6f8792;
    border-radius:3px;
    background:linear-gradient(#fff,#dae8ec);
    padding:6px 13px;
    color:#174b62;
    font-weight:bold;
    box-shadow:inset 0 1px rgba(255,255,255,.9)
}

.homeImage {
	background-image: url("homeImage.png");
	background-size:cover;
	background-repeat: no-repeat;
	width:100%;
    border:1px solid #c1d4dc;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-shadow:0 1px 2px #335562;
    font-weight:bold
}

 @media(max-width:960px){
    .shell{
        width:96%
    }
}
@media(max-width:760px){
    body{
        font-size:12px
    }
    .content{
        grid-template-columns:1fr
    }
    .hero{
        grid-template-columns:1fr
    }
    .hero-art{
        min-height:160px
    }
    .feature-grid,.featured,.two-col{
        grid-template-columns:1fr
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
    .right{
        order:3
    }
    .left{
        order:2
    }
    .center{
        order:1
    }
    .tabs{
        overflow:auto
    }
    .tabs a,.tabs button{
        white-space:nowrap
    }
    .brand span{
        font-size:26px
    }
    .search{
        display:none
    }
}