/* Components added on top of base.css for the static pages. */

.copyright { padding: 0 0 25px; text-align: center; letter-spacing: 0.2px; font-size: 15px; }

.section .lead { font-size: 20px; line-height: 1.6; opacity: 0.8; max-width: 760px; margin-left: auto; margin-right: auto; }

a.button, a.button:visited { display: inline-block; background: #227EF7; color: white; font-weight: 600; letter-spacing: 0.5px; line-height: 50px; padding: 0 30px; margin: 15px 0 0; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 -2px 0 rgba(0,0,0,0.1) inset; opacity: 0.9; transition: opacity 0.3s ease; }
a.button:hover { opacity: 1; text-decoration: none; }

/* Long-form text */
.prose .text { max-width: 800px; margin: 0 auto; text-align: left; }
.prose h2 { font-size: 32px; margin: 0 0 20px; }
.prose .lead { margin: 0 0 40px; }
.prose ul { margin: 0 0 20px 22px; }
.prose li { margin: 0 0 8px; }
.prose .beliefs { margin: 0; }
.prose .beliefs dt { font-weight: 600; margin: 20px 0 5px; }
.prose .beliefs dd { opacity: 0.9; }

/* Partner logos: nine logos read better centred than in the base five-column grid offset */
@media screen and (min-width: 1024px) {
  .press ul { margin-right: 0; margin-left: 0; }
  .press li { padding: 0 25px 50px; }
}

/* Testimonials */
.testimonials { text-align: center; }
.testimonials h2 { margin-left: auto; margin-right: auto; }
.testimonials .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 60px 0 0; text-align: left; }
.quote { display: flex; flex-direction: column; background: white; border-radius: 5px; padding: 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.025); }
.quote blockquote { flex: 1; font-size: 16px; line-height: 1.7; margin: 0 0 20px; }
.quote blockquote:before { content: "\F756"; display: block; font-family: "Material Design Icons"; font-size: 28px; line-height: 1; color: #227EF7; opacity: 0.5; margin: 0 0 10px -3px; }
.quote figcaption { font-size: 15px; line-height: 1.5; }
.quote .name { display: block; font-weight: 600; }
.quote .role { display: block; opacity: 0.6; }

/* Case studies */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; text-align: left; }
.case { display: flex; flex-direction: column; background: white; border-radius: 5px; padding: 35px; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.025); }
.case h3 { font-size: 22px; font-weight: 600; opacity: 1; margin: 0 0 15px; }
.case .result { font-size: 26px; font-weight: 600; line-height: 1.3; color: #227EF7; margin: 0 0 15px; }
.case .result span { display: block; font-size: 15px; font-weight: normal; color: #3C4858; opacity: 0.7; }
.case p { margin: 0 0 20px; }
.case blockquote { flex: 1; border-left: 3px solid rgba(34,126,247,0.3); padding: 0 0 0 20px; margin: 0 0 20px; font-style: italic; }
.case .attribution { font-size: 15px; opacity: 0.7; margin: 0; }
.case .download { margin: 20px 0 0; font-weight: 500; }
.case .download:before { content: "\F1DA"; font-family: "Material Design Icons"; font-weight: normal; margin-right: 8px; }

.downloads { text-align: center; }
.downloads h2 { margin-left: auto; margin-right: auto; }
.downloads .download-links a { display: inline-block; margin: 10px 20px 0; font-weight: 500; }
.downloads .download-links a:before { content: "\F1DA"; font-family: "Material Design Icons"; font-weight: normal; margin-right: 8px; }

@media screen and (max-width: 1100px) {
  .testimonials .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 760px) {
  .testimonials .quotes, .cases { grid-template-columns: 1fr; gap: 20px; }
  .testimonials .quotes { margin-top: 40px; }
  .quote, .case { padding: 25px; }
  .prose h2 { font-size: 26px; }
  .section .lead { font-size: 18px; }
}

/* base.css hides the logo until the old builder script revealed it */
.header .logo img { display: inline; }

/* Home product card */
.product-card h2 { margin: 0 auto 5px; }
.product-card h3 { margin: 0 auto 25px; }
.product-card .trust { font-weight: 600; margin: 20px 0 0; }

/* Products: live demo and labs cards */
.demo { text-align: center; }
.demo h2 { margin-left: auto; margin-right: auto; }
.demo-frame { position: relative; height: 720px; margin: 50px 0 25px; border-radius: 5px; overflow: hidden; background: #F6F9FC; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.025); }
.demo-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 none; }
.demo-links a { display: inline-block; margin: 0 15px; font-weight: 500; }
.demo-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 50px 0 0; text-align: left; }
a.demo-card, a.demo-card:visited { display: block; color: inherit; background: white; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.025); transition: box-shadow 0.3s ease; }
a.demo-card:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.025); }
.demo-card img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: #F8F9FA; }
.demo-card-body { display: block; padding: 25px 30px 30px; }
.demo-card-title { display: block; font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.demo-card-text { display: block; opacity: 0.8; }

@media screen and (max-width: 760px) {
  .demo-frame { height: 640px; margin-top: 30px; }
  .demo-cards { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .demo-links a { display: block; margin: 0 0 10px; }
}

/* Privacy and Terms */
.legal .text { max-width: 700px; margin: 0 auto; text-align: left; }
.legal h1 { margin: 0 0 20px; line-height: 1; padding: 0 0 20px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.legal p { margin: 0 0 20px; }
.legal ol, .legal ul { margin: 0 0 0 20px; padding: 0 0 5px; pointer-events: auto; }
.legal li { margin: 0 0 15px; }