/* site v2: the app's new look - navy, chrome logo, silver frames, gold accents, glass cards */
@font-face{font-family:Manrope;src:url(manrope.ttf);font-weight:200 800}
:root{--void:#071a4b;--white:#f2f6fb;--dim:#a9bad3;--body:#c8d6ea;--teal:#ffd76a;--line:rgba(200,220,245,.22);--gold:#f2c55c;--silver:#dfe5ee}
body{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:500;
 background-color:#071a4b;
 background-image:radial-gradient(60% 28% at 50% 0%,rgba(64,118,176,.55),rgba(64,118,176,0) 100%),
  linear-gradient(180deg,#1b3d76 0%,#1d4279 10%,#183a6f 25%,#112f62 45%,#0c2556 65%,#081d4d 85%,#071a4b 100%)}
h1,h2,h3,summary,.guides a b{font-weight:800}
a{color:#ffd76a}
.bar nav a{color:#c8d6ea;font-weight:700}
.bar nav a[aria-current]{color:#ffd76a}
.slog{color:#f2f6fb;font-weight:500}
.lede{color:var(--body)}
/* the try-it frame and the screenshots: the app's silver frame */
.rvplay,iframe.rvplay{border:4px solid var(--silver)!important;border-radius:26px!important;background:#0c2556!important;box-shadow:0 10px 30px rgba(0,8,40,.55)!important}
.mode img{border:4px solid var(--silver);border-radius:30px;box-shadow:0 14px 34px rgba(0,8,40,.6)}
.t img{border-radius:18px;box-shadow:0 8px 20px rgba(0,8,40,.45)}
.t figcaption{color:var(--body)}
/* glass cards, as in the app */
.guides a{border:0;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.09) 55%,rgba(255,255,255,.06));
 box-shadow:inset 0 0 0 1.5px rgba(200,220,245,.55),0 4px 10px rgba(0,10,50,.35)}
.guides a span{color:var(--body)}
details{border-top:1px solid var(--line)} details:last-of-type{border-bottom:1px solid var(--line)}
summary::before{color:var(--gold)}
.note{border-left-color:var(--gold)}
/* the app box: navy glass, gold rim, the icon */
.cta-box{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:0;
 box-shadow:inset 0 0 0 2px var(--gold),0 0 24px rgba(242,197,92,.35),0 18px 50px rgba(0,8,40,.55)}
.cta-box h2{color:#fff;font-weight:800}
.cta-box p{color:var(--body)}
footer{border-top-color:var(--line);color:#8ea2c0} footer a{color:#b9c8dd}
.bar .home img{content:url(/assets/logo_chrome.png)}