/* About page: a photo band and a white page with a section menu, like
   Google's 2015 product pages. Top bar, fonts and footer come from login.css. */
body.va { margin: 0; background: #fff; color: #333; font: 400 15px Roboto, Arial, sans-serif; }
.va a { color: #2b65d9; }

.va-band { background: #2d4a5a url(../login/moraine-lake.jpg) no-repeat 50% 78% / cover; color: #fff; }
.va-hero { max-width: 1040px; margin: 0 auto; padding: 72px 24px 56px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.va-hero h1 { margin: 0 0 10px; font: 300 41px/49px Roboto, Arial, sans-serif; }
.va-hero p { margin: 0; font-size: 18px; font-weight: 300; }
.va-signin { padding: 7px 16px; border-radius: 2px; background: #4a85e8; color: #fff !important; font-weight: 700; font-size: 14px; }
.va-signin:hover { background: #3f78d8; }

.va-page { display: flex; gap: 48px; max-width: 1040px; margin: 0 auto; padding: 40px 24px 56px; }
.va-nav { flex: none; width: 200px; position: sticky; top: 24px; align-self: flex-start; display: flex; flex-direction: column; border-left: 1px solid #e5e5e5; }
.va-nav a { padding: 8px 0 8px 16px; margin-left: -1px; border-left: 3px solid transparent; color: #555; font-size: 14px; }
.va-nav a:hover { color: #222; border-left-color: #c4513f; }
.va-content { flex: 1; min-width: 0; max-width: 660px; }
.va-content section { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid #ebebeb; scroll-margin-top: 16px; }
.va-content section:last-of-type { border-bottom: 0; }
.va-content h2 { margin: 0 0 12px; font: 300 26px/32px Roboto, Arial, sans-serif; color: #222; }
.va-content p { margin: 0 0 12px; color: #555; line-height: 24px; }
.va-content strong { color: #333; font-weight: 700; }
.va-content a:hover { text-decoration: underline; }

.va-features { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 0; padding: 0; }
.va-features li { padding: 18px 16px; background: #f5f5f5; border-radius: 2px; }
.va-features img { display: block; width: 48px; height: 48px; margin: 0 0 10px; }
.va-features b { display: block; font: 400 17px Roboto, Arial, sans-serif; color: #222; margin: 0 0 4px; }
.va-features span { font-size: 13px; color: #666; line-height: 19px; }

.va-join { margin: 8px 0 0; }
.va-join-btn { display: inline-block; padding: 10px 22px; border-radius: 2px; background: #be5741; color: #fff !important; font-weight: 700; }
.va-join-btn:hover { background: #b14f3a; text-decoration: none !important; }

@media (max-width: 760px) {
  .va-page { flex-direction: column; gap: 20px; padding-top: 24px; }
  .va-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 4px 14px; }
  .va-nav a { padding: 4px 0; margin: 0; border: 0; }
  .va-features { grid-template-columns: 1fr; }
  .va-hero { padding: 40px 16px 32px; }
  .va-hero h1 { font-size: 32px; line-height: 38px; }
}