/* Colorway: deep turquoise accents on a light page, with top and bottom banners in the app's own blue. Loaded after site.css. */
:root{
  --bg:#F3F8FA; --bg2:#E4EFF2; --card:#FFFFFF; --ink:#0A0C10; --ink2:#12161C; --muted:#475159; --line:rgba(10,12,16,.12);
  --accent:#07707A; --accent-d:#055960; --btn:#07707A; --btn-d:#055960; --btn-ink:#FFFFFF;
  --gold:#07707A; --soft:#CFE9EC; --frame:#14172E; --shadow:0 30px 60px -28px rgba(7,60,66,.42);
  --app:#3E4FDA; --app-d:#2B33A6; --app-grad:linear-gradient(165deg,#3B4CD6 0%,#3542C2 48%,#2B33A6 100%);
  --onapp:#FFFFFF; --onapp-m:#DDE2FF; --sun:#FFDB82;
}
.nav{background:rgba(43,51,166,.94);border-bottom:1px solid rgba(255,255,255,.14)}
.brand{color:#fff}.nav-links a{color:var(--onapp-m)}.nav-links a:hover{color:#fff}
.nav .btn.sm{background:#fff;color:var(--app-d)!important;box-shadow:none}.nav .btn.sm:hover{background:#EEF1FF}
.hero{background:var(--app-grad);color:var(--onapp)}
.hero::before{background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.16),transparent 66%)}
.hero h1{color:#fff}.hero .eyebrow{color:var(--sun)}.hero .lede,.hero .micro{color:var(--onapp-m)}
.hero .btn{background:#fff;color:var(--app-d)!important;box-shadow:0 12px 30px -14px rgba(5,10,80,.6)}.hero .btn:hover{background:#EEF1FF}
.hero .soonpill{border-color:rgba(255,255,255,.45);color:var(--onapp-m)}.hero .soonpill b{color:#fff}.hero .soonpill em{color:var(--sun)}
.hero .phone{box-shadow:0 34px 70px -24px rgba(5,10,80,.65)}
.trust{background:var(--app-d);border-color:rgba(255,255,255,.14)}.trust ul{color:var(--onapp-m)}.trust li::before{background:var(--sun)}
.final{background:var(--app-grad);color:var(--onapp)}.final h2{color:#fff}.final .lede{color:var(--onapp-m)}
.final .btn{background:#fff;color:var(--app-d)!important;box-shadow:0 12px 30px -14px rgba(5,10,80,.6)}.final .btn:hover{background:#EEF1FF}
.final .soonpill{border-color:rgba(255,255,255,.45);color:var(--onapp-m)}.final .soonpill b{color:#fff}.final .soonpill em{color:var(--sun)}
.final .icon{box-shadow:0 22px 50px -20px rgba(5,10,80,.7)}
footer{background:#222987;border-top:1px solid rgba(255,255,255,.12);color:var(--onapp-m)}
footer strong{color:#fff!important}footer a{color:#fff}footer a:hover{color:var(--sun)}
.pillar .n,.step::before{color:var(--accent)}
.plan.hi{border-color:var(--accent);box-shadow:0 30px 60px -34px var(--accent)}

/* hero device cluster: iPad, iPhone Duo and iPhone */
.cluster{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:1/1.02}
.dev{position:absolute}
.dev.ipad{right:0;top:0;width:68%;background:var(--frame);padding:2.2%;border-radius:4.2% / 3.2%;box-shadow:0 34px 70px -24px rgba(5,10,80,.65)}
.dev.ipad img{border-radius:2.6% / 2%;width:100%;height:auto;display:block}
.dev.duo{left:25%;bottom:0;width:32%;background:var(--frame);padding:2.4%;border-radius:8% / 5.6%;box-shadow:0 30px 60px -22px rgba(5,10,80,.7);z-index:2}
.dev.duo img{border-radius:6% / 4.2%;width:100%;height:auto;display:block}
.dev.iph{left:0;bottom:4%;width:30%;transform:rotate(-4deg);z-index:3;box-shadow:0 34px 70px -24px rgba(5,10,80,.7)}
@media(max-width:900px){.cluster{max-width:520px;aspect-ratio:1/1}}