/* WA Classic website in old browsers (Safari on iOS 4, 5 and 6): they know no CSS variables, calc(), grid or the new
   flexbox, so style.css only half works there. A script in each page's head adds the class "legacy" to <html> when the
   browser can't use var(); then these rules lay the pages out with old techniques. Modern browsers never get the class. */

.legacy body { background: #f2f2f2; color: #333; }
.legacy a { color: #0088cc; }
.legacy .page { background: #fff; }
.legacy .soonbar { background: -webkit-linear-gradient(#5fc35a, #3f9f3a); }

/* the dark bar: the old flexbox */
.legacy .globalnav { display: -webkit-box; background: -webkit-linear-gradient(#636363, #3d3d3d); }
.legacy .globalnav a { display: block; -webkit-box-flex: 1; width: 0; line-height: 36px; text-align: center; }
.legacy .globalnav a.active { background: -webkit-linear-gradient(#2b2b2b, #1d1d1d); }
.legacy .globalnav img { vertical-align: middle; }

.legacy .productheader { display: block; border-bottom-color: #e3e3e3; }
.legacy .productheader .name { display: block; color: #333; }
.legacy .productheader nav { display: block; margin-top: 10px; }
.legacy .productheader nav a { color: #333; margin-right: 14px; }
.legacy .productheader nav a.active { color: #888; }
.legacy .pill { background: -webkit-linear-gradient(#4ea5ec, #1f74d1); }

.legacy h1.thin, .legacy h2.thin { color: #333; }
.legacy .lede { color: #888; }
.legacy .copy, .legacy .soonline { color: #666; }
.legacy .soonline b { color: #333; }

/* one column, like on a phone */
.legacy .hero, .legacy .feature { display: block; text-align: center; padding: 26px 12px; }
.legacy .feature { border-top: 1px solid #e3e3e3; }
.legacy .hero .devices, .legacy .feature .art { display: block; text-align: center; margin: 0 0 22px; }
.legacy .feature .art { margin: 22px 0 0; }
.legacy .hero .devices .iphone { margin: 0 -6px; vertical-align: bottom; }
.legacy .hero .devices .iphone.front { position: relative; z-index: 2; }
.legacy .pagehero { padding: 30px 12px 20px; text-align: center; }

.legacy .tiles { display: block; border-top: 1px solid #e3e3e3; }
.legacy .tile { display: block; color: #333; border-right: 0; border-bottom: 1px solid #e3e3e3; padding: 22px 12px; text-align: center; }
.legacy .tile .art { display: block; height: auto; margin-bottom: 12px; }
.legacy .tile p { color: #666; }
.legacy .tile .more { color: #0088cc; }

.legacy .boxes { display: block; border-top: 1px solid #e3e3e3; }
.legacy .boxes:after, .legacy .footer .cols:after { content: ""; display: block; clear: both; }
.legacy .boxes > div { float: left; width: 50%; min-height: 150px; padding: 18px 8px; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
.legacy .boxes > div:nth-child(2n) { border-right: 0; }
.legacy .boxes h3 { font-size: 18px; }
.legacy .boxes p { color: #666; }

.legacy .compat { display: block; border-top: 1px solid #e3e3e3; }
.legacy .compat > div { display: block; margin-bottom: 28px; }
.legacy .compat p, .legacy .compat ul { color: #666; }

.legacy .smallprint { color: #888; border-top-color: #e3e3e3; }
.legacy .madewith { border-color: #e3e3e3; color: #666; background: #fff; }
.legacy .madewith b { color: #333; }
.legacy .footer { border-color: #e3e3e3; }
.legacy .footer .crumbs { display: block; color: #666; border-bottom-color: #e3e3e3; }
.legacy .footer .crumbs img, .legacy .footer .crumbs span { vertical-align: middle; margin-right: 6px; }
.legacy .footer .cols { display: block; padding: 12px; }
.legacy .footer .cols > div { float: left; width: 50%; margin-bottom: 10px; }
.legacy .footer h4 { color: #333; }
.legacy .footer li, .legacy .footer li a { color: #666; }
.legacy .legal { display: block; color: #888; border-top-color: #e3e3e3; }
.legacy .legal span { display: block; }

/* features page: the stages become text, then the iPhones side by side */
.legacy .stage { background: #fff; }
.legacy .stage.dark { background: #000; }
.legacy .stage .phones { position: static; height: auto; text-align: center; padding: 16px 0 22px; }
.legacy .stage .iphone { position: relative; left: auto; top: auto; margin: 6px; vertical-align: bottom; }
.legacy .stage .iphone .body { margin: 0; }
.legacy .stage .copyblock { position: static; width: auto; padding: 22px 16px 0; }
.legacy .stage .copyblock h2 { font-size: 28px; color: #111; }
.legacy .stage .copyblock p { color: #666; }
.legacy .stage.dark .copyblock h2 { color: #fff; }
.legacy .stage.dark .copyblock p { color: #bbb; }
.legacy .cols3, .legacy .more9 { display: block; padding: 22px 16px; border-bottom: 1px solid #e3e3e3; }
.legacy .cols3 { background: -webkit-linear-gradient(#f7f7f7, #fff 60%); }
.legacy .cols3 > div, .legacy .more9 .grid > div { margin-bottom: 18px; }
.legacy .more9 .grid { display: block; }
.legacy .cols3 h4, .legacy .more9 h4, .legacy .more9 > h2 { color: #333; }
.legacy .cols3 p, .legacy .more9 p { color: #666; }
.legacy .next { border-top-color: #e3e3e3; }

/* the drawn iPhones: fixed sizes instead of calc(var(--w)) */
.legacy .iphone { display: inline-block; }
.legacy .iphone .body { position: relative; background: #111; background: -webkit-linear-gradient(-70deg, #3a3a3c, #0b0b0c 45%, #1c1c1e); border: 0; }
.legacy .iphone.white .body { background: #f4f4f4; }
.legacy .iphone .body:after { display: none; }
.legacy .iphone .screen { position: relative; overflow: hidden; background: #fff; }
.legacy .iphone .screen img { display: block; width: 100%; height: 100%; }
.legacy .iphone .speaker { position: absolute; left: 50%; -webkit-transform: none; border-radius: 9px; background: #333; }
.legacy .iphone .home { position: absolute; left: 50%; -webkit-transform: none; border-radius: 50%; background: #1a1a1a;
  -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,0.15); }
.legacy .iphone .home:after { top: 31%; left: 31%; right: 31%; bottom: 31%; border: 1px solid #8a8a8a; }
.legacy .iphone .camera { display: none; }
.legacy .hero .devices .iphone.g3s .body { width: 83px; padding: 24px 7px 28px; border-radius: 12px; -webkit-box-shadow: 0 0 0 2px #c9cacd, 0 0 0 3px #8d8f93, 0 4px 7px rgba(0,0,0,0.3); }
.legacy .hero .devices .iphone.g3s .screen { width: 70px; height: 105px; }
.legacy .hero .devices .iphone.g3s .speaker { top: 11px; width: 18px; margin-left: -9px; height: 2px; }
.legacy .hero .devices .iphone.g3s .home { bottom: 6px; width: 15px; height: 15px; margin-left: -7px; }
.legacy .hero .devices .iphone.g4s .body { width: 104px; padding: 32px 7px 34px; border-radius: 14px; -webkit-box-shadow: 0 0 0 2px #bfc1c4, 0 0 0 3px #8d8f93, 0 5px 9px rgba(0,0,0,0.3); }
.legacy .hero .devices .iphone.g4s .screen { width: 90px; height: 135px; }
.legacy .hero .devices .iphone.g4s .speaker { top: 14px; width: 22px; margin-left: -11px; height: 3px; }
.legacy .hero .devices .iphone.g4s .home { bottom: 7px; width: 19px; height: 19px; margin-left: -9px; }
.legacy .hero .devices .iphone.g5 .body { width: 83px; padding: 26px 6px 27px; border-radius: 11px; -webkit-box-shadow: 0 0 0 2px #c9cbce, 0 0 0 3px #8d8f93, 0 4px 7px rgba(0,0,0,0.3); }
.legacy .hero .devices .iphone.g5 .screen { width: 72px; height: 128px; }
.legacy .hero .devices .iphone.g5 .speaker { top: 12px; width: 18px; margin-left: -9px; height: 3px; }
.legacy .hero .devices .iphone.g5 .home { bottom: 6px; width: 15px; height: 15px; margin-left: -8px; }
.legacy .feature .art .iphone.g4s .body { width: 139px; padding: 43px 9px 46px; border-radius: 18px; -webkit-box-shadow: 0 0 0 2px #bfc1c4, 0 0 0 3px #8d8f93, 0 7px 12px rgba(0,0,0,0.3); }
.legacy .feature .art .iphone.g4s .screen { width: 120px; height: 180px; }
.legacy .feature .art .iphone.g4s .speaker { top: 19px; width: 30px; margin-left: -15px; height: 4px; }
.legacy .feature .art .iphone.g4s .home { bottom: 10px; width: 25px; height: 25px; margin-left: -13px; }
.legacy .feature .art .iphone.g5 .body { width: 139px; padding: 43px 9px 44px; border-radius: 18px; -webkit-box-shadow: 0 0 0 2px #c9cbce, 0 0 0 3px #8d8f93, 0 7px 12px rgba(0,0,0,0.3); }
.legacy .feature .art .iphone.g5 .screen { width: 120px; height: 213px; }
.legacy .feature .art .iphone.g5 .speaker { top: 19px; width: 30px; margin-left: -15px; height: 4px; }
.legacy .feature .art .iphone.g5 .home { bottom: 10px; width: 25px; height: 25px; margin-left: -13px; }
.legacy .tile .art .iphone.g3s .body { width: 71px; padding: 20px 6px 24px; border-radius: 10px; -webkit-box-shadow: 0 0 0 2px #c9cacd, 0 0 0 3px #8d8f93, 0 4px 6px rgba(0,0,0,0.3); }
.legacy .tile .art .iphone.g3s .screen { width: 60px; height: 90px; }
.legacy .tile .art .iphone.g3s .speaker { top: 10px; width: 15px; margin-left: -8px; height: 2px; }
.legacy .tile .art .iphone.g3s .home { bottom: 5px; width: 13px; height: 13px; margin-left: -6px; }
.legacy .tile .art .iphone.g4s .body { width: 69px; padding: 22px 5px 23px; border-radius: 9px; -webkit-box-shadow: 0 0 0 2px #bfc1c4, 0 0 0 3px #8d8f93, 0 4px 6px rgba(0,0,0,0.3); }
.legacy .tile .art .iphone.g4s .screen { width: 60px; height: 90px; }
.legacy .tile .art .iphone.g4s .speaker { top: 10px; width: 15px; margin-left: -8px; height: 2px; }
.legacy .tile .art .iphone.g4s .home { bottom: 5px; width: 13px; height: 13px; margin-left: -6px; }
.legacy .tile .art .iphone.g5 .body { width: 69px; padding: 22px 5px 22px; border-radius: 9px; -webkit-box-shadow: 0 0 0 2px #c9cbce, 0 0 0 3px #8d8f93, 0 4px 6px rgba(0,0,0,0.3); }
.legacy .tile .art .iphone.g5 .screen { width: 60px; height: 106px; }
.legacy .tile .art .iphone.g5 .speaker { top: 10px; width: 15px; margin-left: -8px; height: 2px; }
.legacy .tile .art .iphone.g5 .home { bottom: 5px; width: 13px; height: 13px; margin-left: -6px; }
.legacy .compat .iphone.g3s .body { width: 119px; padding: 34px 10px 40px; border-radius: 17px; -webkit-box-shadow: 0 0 0 2px #c9cacd, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .compat .iphone.g3s .screen { width: 100px; height: 150px; }
.legacy .compat .iphone.g3s .speaker { top: 16px; width: 25px; margin-left: -12px; height: 4px; }
.legacy .compat .iphone.g3s .home { bottom: 8px; width: 21px; height: 21px; margin-left: -10px; }
.legacy .compat .iphone.g4s .body { width: 116px; padding: 36px 8px 38px; border-radius: 15px; -webkit-box-shadow: 0 0 0 2px #bfc1c4, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .compat .iphone.g4s .screen { width: 100px; height: 150px; }
.legacy .compat .iphone.g4s .speaker { top: 16px; width: 25px; margin-left: -12px; height: 4px; }
.legacy .compat .iphone.g4s .home { bottom: 8px; width: 21px; height: 21px; margin-left: -10px; }
.legacy .compat .iphone.g5 .body { width: 116px; padding: 36px 8px 37px; border-radius: 15px; -webkit-box-shadow: 0 0 0 2px #c9cbce, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .compat .iphone.g5 .screen { width: 100px; height: 178px; }
.legacy .compat .iphone.g5 .speaker { top: 16px; width: 25px; margin-left: -12px; height: 4px; }
.legacy .compat .iphone.g5 .home { bottom: 8px; width: 21px; height: 21px; margin-left: -10px; }
.legacy .stage .iphone.g3s .body { width: 114px; padding: 33px 9px 38px; border-radius: 16px; -webkit-box-shadow: 0 0 0 2px #c9cacd, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .stage .iphone.g3s .screen { width: 96px; height: 144px; }
.legacy .stage .iphone.g3s .speaker { top: 15px; width: 24px; margin-left: -12px; height: 3px; }
.legacy .stage .iphone.g3s .home { bottom: 8px; width: 20px; height: 20px; margin-left: -10px; }
.legacy .stage .iphone.g4s .body { width: 111px; padding: 35px 7px 36px; border-radius: 14px; -webkit-box-shadow: 0 0 0 2px #bfc1c4, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .stage .iphone.g4s .screen { width: 96px; height: 144px; }
.legacy .stage .iphone.g4s .speaker { top: 15px; width: 24px; margin-left: -12px; height: 3px; }
.legacy .stage .iphone.g4s .home { bottom: 8px; width: 20px; height: 20px; margin-left: -10px; }
.legacy .stage .iphone.g5 .body { width: 111px; padding: 35px 7px 36px; border-radius: 14px; -webkit-box-shadow: 0 0 0 2px #c9cbce, 0 0 0 3px #8d8f93, 0 6px 10px rgba(0,0,0,0.3); }
.legacy .stage .iphone.g5 .screen { width: 96px; height: 170px; }
.legacy .stage .iphone.g5 .speaker { top: 15px; width: 24px; margin-left: -12px; height: 3px; }
.legacy .stage .iphone.g5 .home { bottom: 8px; width: 20px; height: 20px; margin-left: -10px; }