/* CSS for rooms4.html (the Rooms 4.0 launch announcement). */
/* This is applied IN ADDITION to common.css and boring.css, so the page
   reads as a document (like terms/privacy), not as a second home page. */

/* Slightly wider document than the legal pages, to fit the screenshots */
#container {
  max-width: 860px;
}

/* Make the back link to the home page more prominent than on the legal pages */
.rooms-back-link {
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  padding-top: 6px;
  padding-bottom: 6px;
}

.rooms-back-link:hover {
  text-decoration: underline;
}

/* Document header: wordmark + kicker line above the title.
   The wordmark PNG is white, so we invert it to black for the document. */
.doc-wordmark {
  height: 22px;
  filter: invert(1);
  margin-bottom: 24px;
}

.press-kicker {
  font: 13px HelveticaNeue, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #888;
  margin-bottom: 8px;
}

/* Body text of the press release, a bit larger than the legal pages */
.press-release p {
  font-size: 16px;
  line-height: 1.55;
}

/* Lead paragraph right under the title */
.press-lead {
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: #555;
}

/* Figures: centered screenshots with a caption, sized like a document
   illustration rather than a marketing hero */
figure {
  margin: 28px auto;
  text-align: center;
}

figure img {
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  max-width: 100%;
}

figure.portrait img {
  width: min(300px, 80%);
}

figure.landscape img {
  width: min(460px, 100%);
}

figcaption {
  font: 13px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: #999;
  margin-top: 10px;
}

/* CTA buttons in the Availability section, same assets as the home page */
.cta-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.app-store-button,
.try-it-now-button {
  display: inline-block;
  height: 50px;
  width: 150px;
  background: url(/app-store-download-button.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 16px;
}

.try-it-now-button {
  position: relative;
  margin-right: 16px;
}

.try-it-now-button-inner {
  background: black;
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  border-radius: 8px;
  overflow: hidden;
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: white;
  line-height: 44px;
  text-align: center;
}

/* Footer area below the document card */
.doc-footer {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 56px;
}

.doc-footer a {
  font: 15px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: white;
  text-decoration: underline;
}

.doc-trademark {
  font: 12px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
}

@media (max-width: 700px) {
  .boring-bla-bla {
    padding: 24px;
  }
}