/* Media conditions keep their original values and cascade order:
 * (max-width: 768px)
 * print
 */
/* Resets, default element typography and accessibility utilities. */
h1:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h2:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h3:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-family: var(--serif);
  font-weight: var(--lp-font-weight-bold);
  font-feature-settings: "palt";
  text-wrap: pretty;
}
*:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--header) + var(--lp-space-24));
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--line-height);
  color: var(--body);
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
)::selection {
  background: var(--blue);
  color: var(--white);
}
a:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  color: var(--blue);
  text-underline-offset: var(--lp-focus-offset);
}
button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
input:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
select:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font: inherit;
}
button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
a:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
input:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
select:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
summary:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
summary:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: relative;
}
a:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
button:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
summary:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
input:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
select:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  outline: 3px solid var(--blue);
  outline-offset: var(--lp-focus-offset);
}
button {
  color: inherit;
}
img:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: block;
  max-width: var(--lp-full-size);
  height: auto;
}
p:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h1:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h2:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h3:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h4:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
ul:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
ol:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
dl:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  margin: 0;
}
h1:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h2:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h3:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-family: var(--serif);
  font-weight: var(--lp-font-weight-bold);
  color: var(--ink);
  font-feature-settings: "palt";
  letter-spacing: 0;
  line-height: var(--lp-line-height-heading);
  text-wrap: pretty;
}
h1 {
  font-size: var(--hero-size);
  line-height: 1.3;
}
h2:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-size: var(--h2-size);
}
h3:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-size: var(--h3-size);
}
h4 {
  font-size: var(--body-size);
  color: var(--ink);
}
p:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  max-inline-size: var(--lp-text-width-desktop);
}
small:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-size: var(--caption);
}
@media (max-width: 768px) {
  p:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    max-inline-size: var(--lp-text-width-mobile);
  }
  h2:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    line-height: var(--lp-line-height-compact);
  }
  h3:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    line-height: var(--lp-line-height-compact);
  }
  body {
    padding-bottom: var(--lp-size-80);
  }
}
@media print {
  h2:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
  h3:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    break-after: avoid;
  }
}
h1:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h2:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
h3:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  text-wrap: balance;
}
main {
  display: flow-root;
}
@media print {
  main
    > section:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    content-visibility: visible;
    contain-intrinsic-height: none;
  }
}
body.handwritten-preview
  main
  > section:is(#prompt-demo, #features, #learning-map, #usecases, #platform)
  .hw-phrase {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}
.hw-phrase:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 768px) {
  body.handwritten-preview
    :is(#problem, #fit, #prompt-demo)
    h2.mobile-two-line-heading
    :is(.phrase, .hw-phrase-text, .hw-phrase) {
    display: contents;
    white-space: inherit;
  }
}