/* Shell for pages that kept their copy and moved onto the new header, type, and color. */

html {
  /* main.css sets 62.5% so 1rem is 10px. The new header is sized in rem at 16px. */
  font-size: 100%;
  overflow-x: clip;
}

.pv-learn-page {
  overflow-x: clip;
  background: #edf3f8;
  color: #0b1f33;
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
}

.pv-learn-page .pv-header,
.pv-learn-page .pv-footer {
  grid-area: auto;
  max-width: none;
}

.pv-learn-page .pv-footer {
  margin-top: 0;
}

.pv-learn.page {
  margin: 0;
  max-width: none;
  width: 100%;
  padding: 0 0 56px;
  background: transparent;
  color: #0b1f33;
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.pv-learn.markdown-body > *:not(style):not(script) {
  width: min(1120px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.pv-learn.markdown-body h1,
.pv-learn.markdown-body h2,
.pv-learn.markdown-body h3,
.pv-learn.markdown-body h4 {
  color: #0b1f33;
  letter-spacing: -0.03em;
  font-weight: 600;
  border: 0;
  padding-bottom: 0;
}

.pv-learn.markdown-body a {
  color: #2563eb;
}

.pv-learn.markdown-body a:hover {
  color: #1d4ed8;
}

.pv-learn img,
.pv-learn video,
.pv-learn iframe {
  max-width: 100%;
  height: auto;
}

.pv-learn table,
.pv-learn pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.pv-learn [class$="hero"] {
  background: #0b1f33 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin: 0 0 40px !important;
}

.pv-learn.markdown-body > [class$="hero"] {
  width: 100%;
  max-width: none;
  padding: 64px 24px 56px !important;
}

.pv-learn [class$="hero"] h1,
.pv-learn [class$="hero"] h2,
.pv-learn [class$="hero"] p,
.pv-learn [class$="hero"] .ess-eyebrow,
.pv-learn [class$="hero"] .liq-kicker,
.pv-learn [class$="hero"] .hero-sub {
  color: #ffffff !important;
  text-shadow: none !important;
}

.pv-learn [class$="hero"] h1 {
  font-size: clamp(2rem, 6vw, 3.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.pv-learn [class$="hero"] p,
.pv-learn [class$="hero"] .hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  opacity: 0.92;
}

.pv-learn .ess-eyebrow,
.pv-learn .liq-kicker {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  letter-spacing: 0.08em !important;
}

.pv-learn .final-cta,
.pv-learn .ess-mid-cta,
.pv-learn .cta-box,
.pv-learn .cta-faq,
.pv-learn .cta-contact,
.pv-learn .post-cta {
  background: #0b1f33 !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.pv-learn .final-cta h2,
.pv-learn .final-cta h3,
.pv-learn .final-cta p,
.pv-learn .ess-mid-cta h2,
.pv-learn .ess-mid-cta h3,
.pv-learn .ess-mid-cta p,
.pv-learn .cta-box h2,
.pv-learn .cta-box h3,
.pv-learn .cta-box p,
.pv-learn .cta-faq h2,
.pv-learn .cta-faq p,
.pv-learn .cta-contact h2,
.pv-learn .cta-contact p,
.pv-learn .post-cta h2,
.pv-learn .post-cta h3,
.pv-learn .post-cta p {
  color: #ffffff !important;
}

.pv-learn.markdown-body a.ess-btn-primary,
.pv-learn.markdown-body a.ess-btn-secondary,
.pv-learn.markdown-body a.forai-btn-primary,
.pv-learn.markdown-body a.forai-btn-secondary,
.pv-learn.markdown-body a.hero-btn,
.pv-learn.markdown-body a.cta-btn,
.pv-learn.markdown-body a.faq-btn,
.pv-learn.markdown-body a.contact-btn,
.pv-learn.markdown-body a.newsletter-btn,
.pv-learn.markdown-body a.contactButton,
.pv-learn.markdown-body a.error-btn,
.pv-learn.markdown-body .ess-mid-cta a,
.pv-learn.markdown-body .post-cta a {
  background: #2563eb !important;
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
  font-weight: 700 !important;
}

.pv-learn.markdown-body a.ess-btn-primary:hover,
.pv-learn.markdown-body a.forai-btn-primary:hover,
.pv-learn.markdown-body a.hero-btn:hover,
.pv-learn.markdown-body a.cta-btn:hover,
.pv-learn.markdown-body a.faq-btn:hover,
.pv-learn.markdown-body a.contact-btn:hover,
.pv-learn.markdown-body a.newsletter-btn:hover,
.pv-learn.markdown-body a.contactButton:hover,
.pv-learn.markdown-body a.error-btn:hover,
.pv-learn.markdown-body .ess-mid-cta a:hover,
.pv-learn.markdown-body .post-cta a:hover,
.pv-learn.markdown-body a.ess-btn-secondary:hover,
.pv-learn.markdown-body a.forai-btn-secondary:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.pv-learn .final-cta a:not([class]),
.pv-learn .final-cta .final-cta-small a {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.pv-learn .blog-card,
.pv-learn .news-card,
.pv-learn .contact-card,
.pv-learn .liq-card,
.pv-learn .forai-card {
  background: #ffffff !important;
  color: #0b1f33 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(11, 31, 51, 0.08) !important;
  border-top-color: #2563eb !important;
}

.pv-learn.markdown-body a.blog-card,
.pv-learn.markdown-body a.news-card,
.pv-learn.markdown-body a.blog-card:hover,
.pv-learn.markdown-body a.news-card:hover {
  background: #ffffff !important;
  color: #0b1f33 !important;
  text-decoration: none !important;
  box-shadow: 0 24px 60px rgba(11, 31, 51, 0.08) !important;
}

.pv-learn .blog-card h2,
.pv-learn .news-card h2,
.pv-learn .contact-card h3,
.pv-learn .liq-card h3 {
  color: #0b1f33 !important;
}

.pv-learn .contact-icon,
.pv-learn .about-icon,
.pv-learn .feature-icon {
  background: #2563eb !important;
}

.pv-learn .blog-post-header {
  border-bottom-color: rgba(11, 31, 51, 0.12);
}

.pv-learn .blog-post-header h1 {
  color: #0b1f33 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
}

.pv-learn .blog-post-date {
  color: #314356;
}

.pv-learn .blog-post-back a {
  background: transparent !important;
  color: #2563eb !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.pv-learn .blog-post-content,
.pv-learn .page-content {
  color: #0b1f33;
}

.pv-learn .page-title h1,
.pv-learn .page-content h2,
.pv-learn .page-content h3 {
  color: #0b1f33 !important;
}

.pv-learn .error-code {
  background: none !important;
  -webkit-text-fill-color: #0b1f33 !important;
  color: #0b1f33 !important;
}

.pv-learn .error-title,
.pv-learn .helpful-links h3 {
  color: #0b1f33 !important;
}

.pv-learn .link-item {
  background: #ffffff !important;
  color: #2563eb !important;
}

.pv-learn .liq-hero {
  border-radius: 18px !important;
  padding: 36px 28px !important;
}

.pv-learn .liq-crumbs,
.pv-learn .liq-crumbs a {
  color: #314356;
}

.pv-learn .ess-hero-buttons,
.pv-learn .forai-hero-buttons,
.pv-learn .hero-buttons,
.pv-learn .final-cta-buttons,
.pv-learn .faq-buttons,
.pv-learn .contact-buttons,
.pv-learn .cta-buttons,
.pv-learn .error-actions,
.pv-learn .liq-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .pv-learn.markdown-body > *:not(style):not(script) {
    width: min(1120px, calc(100% - 24px));
  }

  .pv-learn [class$="hero"] h1 {
    font-size: 2rem !important;
  }
}

/* Old site link rules (a:link and nav > ul li a:link) beat the new header
   and paint blue labels on the blue buttons, and a dim wordmark. */
.pv-learn-page .pv-header a.pv-brand:link,
.pv-learn-page .pv-header a.pv-brand:visited,
.pv-learn-page .pv-header a.pv-brand:hover,
.pv-learn-page .pv-header a.pv-brand:active,
.pv-learn-page .pv-footer a.pv-brand:link,
.pv-learn-page .pv-footer a.pv-brand:visited,
.pv-learn-page .pv-footer a.pv-brand:hover,
.pv-learn-page .pv-footer a.pv-brand:active {
  color: #ffffff;
}

.pv-learn-page .pv-header nav > ul li a:link,
.pv-learn-page .pv-header nav > ul li a:visited {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.pv-learn-page .pv-header nav > ul li a:hover,
.pv-learn-page .pv-header nav > ul li a:active,
.pv-learn-page .pv-header nav > ul li a[aria-current="page"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.pv-learn-page .pv-header a.pv-btn-primary:link,
.pv-learn-page .pv-header a.pv-btn-primary:visited,
.pv-learn-page .pv-header a.pv-btn-primary:hover,
.pv-learn-page .pv-header a.pv-btn-primary:active {
  color: #ffffff;
  background: #2563eb;
  text-decoration: none;
}

.pv-learn-page .pv-header a.pv-btn-primary:hover,
.pv-learn-page .pv-header a.pv-btn-primary:active {
  background: #1d4ed8;
  color: #ffffff;
}

/* main.css still styles every header and nav. Those rules squeeze the
   wordmark, add 15 to 30px of padding on each item, and push Get the app
   past the right edge. Put the new header back to the live rules. */
.pv-learn-page header.pv-header {
  display: block;
  margin: 0;
  max-width: none;
  min-width: 0;
  height: var(--header);
  overflow: visible;
}

.pv-learn-page .pv-header .pv-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: min(1120px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  height: var(--header);
}

.pv-learn-page .pv-header .pv-brand {
  flex-shrink: 0;
}

.pv-learn-page .pv-header nav > ul,
.pv-learn-page .pv-header nav > ul li,
.pv-learn-page .pv-header nav > ul li:first-child,
.pv-learn-page .pv-header nav > ul li:last-child {
  margin: 0;
  padding: 0;
}

/* The skip link is taller than its -40px offset, so a white pill peeks
   into the top of the viewport. Hide it until it is focused. */
.pv-learn-page a.pv-skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pv-learn-page a.pv-skip:focus {
  position: absolute;
  left: 16px;
  top: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #ffffff;
  color: #0b1f33;
  border-radius: 8px;
  z-index: 80;
}