/* Media conditions keep their original values and cascade order:
 * (max-width: 768px)
 * (max-height: 700px) and (max-width: 768px)
 * (min-width: 769px) and (max-height: 740px)
 * print
 * (max-width: 360px)
 * (min-width: 769px) and (max-width: 1100px)
 * (hover: hover) and (pointer: fine)
 * (min-width: 769px)
 * (min-width: 1600px)
 */
/* Shared buttons, cards, markers and cross-section components. */
.hero-label:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-size: var(--caption);
  font-weight: var(--lp-font-weight-bold);
  color: var(--blue);
  margin-inline: auto;
  margin-bottom: var(--lp-space-16);
  max-inline-size: none;
}
@media (max-width: 768px) {
  .hero-label:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    max-inline-size: var(--lp-text-width-mobile);
    line-height: var(--lp-line-height-note);
    margin-bottom: var(--lp-space-16);
  }
}
@media (max-height: 700px) and (max-width: 768px) {
  .hero-label:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    margin-bottom: var(--lp-space-8);
  }
  .hero .cover-band {
    overflow: hidden;
  }
}
@media (min-width: 769px) and (max-height: 740px) {
  .hero-label:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    margin-bottom: var(--lp-space-8);
  }
}
main
  > section:not(#hero):not(#prompt-demo):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  content-visibility: auto;
  contain-intrinsic-height: auto var(--intrinsic);
}
h2
  .phrase:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
h1
  .phrase:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: inline-block;
}
.note:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-size: var(--caption);
}
.note:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  line-height: var(--lp-line-height-note);
}
.sr-only:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  width: var(--lp-border-width);
  height: var(--lp-border-width);
  padding: 0;
  margin: var(--lp-sr-only-margin);
  overflow: hidden;
  clip-path: inset(var(--lp-half-size));
  white-space: nowrap;
  border: 0;
}
[hidden]:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: none !important;
}
.pale:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  background: var(--pale);
}
.center {
  text-align: center;
}
.center p {
  margin-inline: auto;
}
.actions:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-16);
  align-items: center;
  margin-top: var(--lp-size-40);
}
.center .actions {
  justify-content: center;
}
.button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--lp-space-24);
  min-height: var(--button);
  padding: var(--lp-space-8) var(--lp-space-32);
  border: var(--lp-border-width) solid var(--blue);
  border-radius: var(--lp-radius-pill);
  font-size: var(--body-size);
  font-weight: var(--lp-font-weight-bold);
  line-height: var(--lp-line-height-heading);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue);
  color: var(--white);
}
.button.secondary:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: var(--white);
  color: var(--blue);
}
.button
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
.text-link
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: inline-block;
  flex-shrink: 0;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-16);
  min-height: var(--lp-control-min-size);
  font-weight: var(--lp-font-weight-bold);
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
}
.text-link:hover {
  text-decoration: underline;
}
.is-pressed:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  scale: 0.97;
}
.check:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  color: var(--blue);
  font-weight: var(--lp-font-weight-bold);
}
.num:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font-family: var(--digits);
  font-weight: var(--lp-font-weight-heavy);
  color: var(--blue);
  line-height: var(--lp-line-height-number);
}
.slide:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  padding: var(--lp-space-24);
  border: var(--lp-border-width) solid var(--border);
  min-height: 192px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide
  h3:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  margin-bottom: var(--lp-space-16);
}
.slide
  p:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: var(--caption);
  line-height: var(--lp-line-height-note);
}
.chat-question:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
),
.chat-answer:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  padding: var(--lp-space-16);
  border-radius: var(--radius);
  background: var(--pale);
  line-height: var(--lp-line-height-note);
  margin-top: var(--lp-space-16);
}
.chat-question:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  background: var(--gray);
}
.chat-question strong,
.chat-answer strong {
  color: var(--blue);
  margin-right: var(--lp-space-8);
}
.shared-benefits:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  list-style: none;
  margin-top: var(--lp-space-32);
  border-top: var(--lp-border-width) solid var(--border);
  padding: var(--lp-space-32) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-24);
}
.shared-benefits
  li:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: flex;
  gap: var(--lp-space-8);
  align-items: center;
  font-weight: var(--lp-font-weight-bold);
  color: var(--ink);
}
.shared-benefits
  li:first-child:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  color: var(--blue);
}
.nojs-note {
  font-size: var(--caption);
  padding: var(--lp-space-16) var(--lp-space-24);
}
.button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--white) var(--lp-shine-white-tint), transparent),
    transparent
  );
  translate: -120% 0;
}
.button:hover:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  animation: gleam 760ms;
}
.button
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  transition: translate var(--lp-duration-fast);
}
.button:hover
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ),
.text-link:hover
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  translate: var(--lp-focus-offset) 0;
}
.button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  transition:
    scale 100ms,
    translate var(--lp-duration-base);
}
.text-link {
  transition: color var(--lp-duration-fast);
}
.button
  [data-ripple]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  position: absolute;
  border-radius: var(--lp-half-size);
  background: color-mix(
    in srgb,
    var(--white) var(--lp-shine-white-tint),
    transparent
  );
  width: var(--lp-size-160);
  height: var(--lp-size-160);
  translate: var(--lp-translate-center) var(--lp-translate-center);
  pointer-events: none;
  animation: ripple 560ms forwards;
}
@media (max-width: 768px) {
  .actions:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    display: grid;
    gap: var(--lp-space-16);
    margin-top: var(--lp-size-40);
  }
  .actions
    .button:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    width: var(--lp-full-size);
    padding-inline: var(--lp-space-16);
    gap: var(--lp-space-8);
  }
  .slide:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    padding: var(--lp-space-24) var(--lp-space-16);
    min-height: var(--lp-size-208);
  }
  .shared-benefits:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    display: grid;
    gap: var(--lp-space-16);
    padding-block: var(--lp-space-32);
    margin-top: var(--lp-size-40);
  }
}
@media print {
  .hero
    .cover-band: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 *
    )
  ) {
    display: none !important;
  }
  details:not([open])
    > *:not(summary):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    display: block !important;
  }
  [data-reveal]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 360px) {
  #demo-toggle:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    min-height: var(--lp-size-72);
  }
}
h3
  .phrase:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: inline-block;
}
html:has(body.handwritten-preview) {
  overflow-x: clip;
  --header: 80px;
}
body.handwritten-preview {
  overflow-x: clip;
  background: var(--hw-white);
  --body: var(--hw-body);
  --ink: var(--hw-navy);
  --radius: var(--hw-radius);
  --body-size: var(--hw-body-pc);
  --caption: var(--hw-note);
  --h2-size: var(--hw-h2-pc);
  --h3-size: var(--hw-h3-pc);
  color: var(--hw-body);
}
body.handwritten-preview :is(#hero, #problem, #cost, #fit) {
  content-visibility: visible !important;
  contain: none !important;
  --body: var(--hw-body);
  --ink: var(--hw-navy);
  --radius: var(--hw-radius);
  font-family: var(--hw-sans);
  font-size: var(--hw-body-pc);
  line-height: 1.9;
  color: var(--hw-body);
  position: relative;
}
body.handwritten-preview :is(#problem, #cost, #fit) h2 {
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview :is(#problem, #cost, #fit) h3 {
  font: 700 var(--hw-h3-pc)/1.6 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview :is(#hero, #problem, #cost, #fit) .num {
  font-family: var(--hw-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.handwritten-preview :is(#problem, #cost, #fit) p {
  max-inline-size: none;
}
body.handwritten-preview :is(#problem, #cost, #fit) :is(.note, .cost-note) {
  font-size: var(--hw-note);
  line-height: 1.9;
}
body.handwritten-preview
  main
  > section:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  --body: var(--hw-body);
  --ink: var(--hw-navy);
  --radius: var(--hw-radius);
  font-family: var(--hw-sans);
  font-size: var(--hw-body-pc);
  line-height: 1.9;
  color: var(--hw-body);
  position: relative;
  scroll-margin-top: calc(var(--header) + 24px);
}
body.handwritten-preview
  main
  > section
  h2:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview
  main
  > section
  h3:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font: 700 var(--hw-h3-pc)/1.6 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview
  main
  > section
  .num:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-family: var(--hw-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.handwritten-preview
  main
  > section
  p:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  max-inline-size: none;
}
body.handwritten-preview
  main
  > section
  :is(.note, small):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: var(--hw-note);
  line-height: 1.9;
}
.handwritten-preview
  main
  > section
  .button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  min-height: var(--hw-button-pc);
  font: 700 18px/1.5 var(--hw-sans);
  border-radius: 999px;
  box-shadow: 8px 8px 0 var(--hw-cyan);
  border: 2px solid var(--hw-blue);
}
.handwritten-preview
  main
  > section
  .button.primary:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: linear-gradient(110deg, var(--hw-blue) 65%, var(--hw-cyan));
  color: var(--hw-white);
  border: 0;
}
.handwritten-preview
  main
  > section
  .button.secondary:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: var(--hw-white);
  color: var(--hw-blue);
}
.handwritten-preview
  main
  > section
  .button.primary
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--hw-blue);
  width: 44px;
  height: 44px;
  font-size: 24px;
  transition: translate 0.2s;
}
.handwritten-preview
  main
  > section
  .button:hover
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  translate: 4px 0;
}
.handwritten-preview
  main
  > section
  .button:active:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  translate: 8px 8px;
  box-shadow: 0 0 0 var(--hw-cyan);
}
.handwritten-preview
  main
  > section
  .button:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
.hw-brush:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.hw-note:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  font: 600 30px/1.6 var(--hw-hand);
  color: var(--hw-navy);
  rotate: -5deg;
  position: relative;
}
.hw-marker:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  background: linear-gradient(
    transparent 53%,
    var(--hw-marker) 53% 92%,
    transparent 92%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hw-ink:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: inherit;
}
.hw-ink
  svg:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hw-ink
  path:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  stroke-width: var(--hw-stroke, 4.8);
  filter: url(#hw-pen-grain);
}
.hw-button:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  border-radius: 999px;
  box-shadow: var(--hw-button-shadow) var(--hw-button-shadow) 0 var(--hw-cyan);
  font: 700 18px/1.5 var(--hw-sans);
  min-height: var(--hw-button-pc);
  border: 2px solid var(--hw-blue);
  background: var(--hw-white);
  color: var(--hw-blue);
}
.hw-button.primary:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: linear-gradient(
    110deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 65%,
    var(--hw-cyan) 100%
  );
  color: var(--hw-white);
  border: 0;
}
.hw-button:active:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  translate: var(--hw-button-shadow) var(--hw-button-shadow);
  box-shadow: 0 0 0 var(--hw-cyan);
}
.hw-button:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
.hw-review-link:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: block;
  padding: var(--lp-space-10) var(--lp-space-16);
  color: var(--hw-blue);
  background: var(--hw-white);
  border: 1px solid var(--hw-blue);
  border-radius: 999px;
  font: 700 14px/1.5 var(--hw-sans);
  text-decoration: none;
}
html:is(.hw-capture, .hw-embedded) {
  scrollbar-width: none;
}
html:is(.hw-capture, .hw-embedded)::-webkit-scrollbar {
  display: none;
}
.hw-capture :is(#hero, #problem, #cost, #fit) [data-reveal] {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  clip-path: none !important;
}
.hw-capture :is(#hero, #problem, #cost, #fit) [data-m-el="wipe"] {
  display: none !important;
}
.hw-capture
  main
  > section:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  content-visibility: visible !important;
  contain: none !important;
}
.hw-capture
  main
  > section
  [data-reveal]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  clip-path: none !important;
}
.hw-capture
  main
  > section
  [data-m-el="wipe"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: none !important;
}
@media (max-width: 768px) {
  html:has(body.handwritten-preview) {
    --header: 64px;
  }
  body.handwritten-preview :is(#hero, #problem, #cost, #fit) {
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview :is(#problem, #cost, #fit) h2 {
    font-size: var(--hw-h2-sp);
  }
  body.handwritten-preview :is(#problem, #cost, #fit) h3 {
    font-size: var(--hw-h3-sp);
  }
  body.handwritten-preview {
    --body-size: var(--hw-body-sp);
    --h2-size: var(--hw-h2-sp);
    --h3-size: var(--hw-h3-sp);
  }
  body.handwritten-preview
    main
    > section:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview
    main
    > section
    h2:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-h2-sp);
  }
  body.handwritten-preview
    main
    > section
    h3:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-h3-sp);
  }
  .handwritten-preview
    main
    > section
    .button:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    min-height: var(--hw-button-sp);
    font-size: 16px;
  }
  .handwritten-preview
    main
    > section
    .button.primary
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .hw-note:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    font-size: 20px;
  }
  .hw-review-link:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    bottom: 12px;
    left: 12px;
    padding: var(--lp-space-9) var(--lp-space-12);
    font-size: 14px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  html:has(body.handwritten-preview) {
    --header: 144px;
  }
}
body.handwritten-preview
  main
  .button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  content: none;
  display: none;
}
.hw-note-phrase:where(
  :not(
    #compare,
    #compare *,
    #pricing,
    #pricing *,
    #flow,
    #flow *,
    #faq,
    #faq *,
    #contact,
    #contact *
  )
) {
  display: inline-block;
  white-space: nowrap;
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases) {
  position: relative;
  content-visibility: visible;
  contain: none;
  isolation: isolate;
  --hw-middle-ink: var(--hw-navy);
  --hw-middle-gradient: linear-gradient(
    105deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 68%,
    var(--hw-cyan) 100%
  );
  --hw-middle-pale: linear-gradient(
    110deg,
    var(--hw-pale-blue),
    var(--hw-pale-cyan)
  );
  --hw-middle-brush-height: 270px;
  --hw-middle-heading-gap: 40px;
  --hw-middle-track: color-mix(in srgb, var(--hw-blue) 14%, var(--hw-white));
  --hw-middle-card-padding: 32px;
  --hw-middle-card-offset: 12px;
  --hw-middle-screen-note: 14px;
  font: 400 var(--hw-body-pc)/1.9 var(--hw-sans);
  color: var(--hw-body);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  h2 {
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  h3 {
  font: 700 var(--hw-h3-pc)/1.6 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  p {
  max-inline-size: none;
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  :is(.note, .course-lessons, .screen-note, .demo-status) {
  font-size: var(--hw-note);
  line-height: 1.85;
  color: var(--hw-body);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  :is(h2, h3)
  .phrase {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  .hw-middle-brush {
  position: absolute;
  object-fit: contain;
  max-width: none;
  pointer-events: none;
  z-index: 2;
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  .button {
  min-height: var(--hw-button-pc);
  padding: var(--lp-space-12) var(--lp-space-24);
  border-radius: 999px;
  font: 700 var(--hw-body-pc)/1.55 var(--hw-sans);
  text-decoration: none;
  box-shadow: var(--hw-button-shadow) var(--hw-button-shadow) 0 var(--hw-cyan);
  background: var(--hw-white);
  color: var(--hw-blue);
  border: 2px solid var(--hw-blue);
  gap: var(--lp-space-14);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  .button.primary {
  background: var(--hw-middle-gradient);
  border: 0;
  color: var(--hw-white);
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  .button.primary
  .arrow {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--hw-blue);
  background: var(--hw-white);
  flex: 0 0 34px;
  margin-left: auto;
}
body.handwritten-preview
  :is(#prompt-demo, #features, #learning-map, #usecases)
  .button:active {
  translate: var(--hw-button-shadow) var(--hw-button-shadow);
  box-shadow: none;
}
@media (max-width: 768px) {
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases) {
    --hw-middle-brush-height: 110px;
    --hw-middle-card-padding: 24px;
    --hw-middle-card-offset: 8px;
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases)
    h2 {
    font-size: var(--hw-h2-sp);
    line-height: 1.6;
  }
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases)
    h3 {
    font-size: var(--hw-h3-sp);
    line-height: 1.6;
  }
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases)
    .button {
    min-height: var(--hw-button-sp);
    font-size: var(--hw-body-sp);
    width: 100%;
    padding: var(--lp-space-12) var(--lp-space-20);
  }
  body.handwritten-preview
    :is(#prompt-demo, #features, #learning-map, #usecases)
    .actions {
    gap: var(--lp-space-24);
  }
}
body.handwritten-preview
  main
  > section:is(#prompt-demo, #features, #learning-map, #usecases, #platform)
  :is(p, dd, li) {
  text-wrap: pretty;
  word-break: auto-phrase;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  position: relative;
  isolation: isolate;
  content-visibility: visible !important;
  contain: none !important;
  color: var(--hw-body);
  font-family: var(--hw-sans);
  font-size: var(--hw-body-pc);
  line-height: 1.9;
  --ink: var(--hw-navy);
  --body: var(--hw-body);
  --radius: var(--hw-radius);
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  h2:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  color: var(--hw-navy);
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  h3:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font: 700 var(--hw-h3-pc)/1.6 var(--hw-serif);
  color: var(--hw-navy);
  word-break: normal;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  .num:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-family: var(--hw-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  p:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  max-inline-size: none;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  .note:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: var(--hw-note);
  line-height: 1.9;
}
body.handwritten-preview
  :is(#compare, #faq)
  .hw-lower-brush:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: block;
  width: auto;
  height: var(--hw-lower-brush-height);
  max-width: 86%;
  object-fit: contain;
  object-position: left center;
  rotate: -5deg;
  margin: 0 0 var(--lp-space-8) var(--lp-space-16);
  position: relative;
  z-index: 2;
  pointer-events: none;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  .hw-ink:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  z-index: 2;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  min-height: var(--hw-button-pc);
  border-radius: 999px;
  box-shadow: var(--hw-button-shadow) var(--hw-button-shadow) 0 var(--hw-cyan);
  font: 700 18px/1.5 var(--hw-sans);
  padding: var(--lp-space-14) var(--lp-space-28);
  border: 2px solid var(--hw-blue);
  background: var(--hw-white);
  color: var(--hw-blue);
  overflow: visible;
  position: relative;
  translate: none;
  white-space: normal;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button.primary:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  background: linear-gradient(
    110deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 65%,
    var(--hw-cyan) 100%
  );
  color: var(--hw-white);
  border: 0;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button.primary
  .arrow:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--hw-blue);
  background: var(--hw-white);
  font: 700 25px/1 var(--hw-sans);
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:active:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  translate: var(--hw-button-shadow) var(--hw-button-shadow);
  box-shadow: 0 0 0 var(--hw-cyan);
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:focus-visible:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  )::before {
  content: none;
  display: none;
}
body.handwritten-preview
  :is(#pricing, #contact)
  [data-m-el="attention"]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  body.handwritten-preview
    :is(#pricing, #contact)
    .button
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    transition: translate 0.16s ease;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button:hover
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    translate: 3px 0;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq, #contact):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    padding: var(--hw-space-section-sp) 0;
  }
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq, #contact)
    h2:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-h2-sp);
    line-height: 1.5;
  }
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq, #contact)
    h3:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: var(--hw-h3-sp);
    line-height: 1.6;
  }
  body.handwritten-preview
    :is(#compare, #faq)
    .hw-lower-brush:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    width: 100%;
    max-width: none;
    height: var(--hw-lower-brush-height);
    margin: 0 0 var(--lp-space-18);
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    min-height: var(--hw-button-sp);
    padding: var(--lp-space-12) var(--lp-space-20);
    font-size: 16px;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button.primary
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
}
.hw-capture
  [data-hw-draw]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  stroke-dashoffset: 0 !important;
}
@media print {
  [data-hw-draw]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
    stroke-dashoffset: 0 !important;
  }
}
body.handwritten-preview
  :is(.course-cover, .cover-button, .cover-rail)
  img[data-source-width]:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  max-width: calc(var(--hw-source-width) / 1.08);
  height: auto;
  object-fit: contain;
}
body.handwritten-preview
  :is(p, dd, li):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  text-wrap: pretty;
}
@supports (word-break: auto-phrase) {
  body.handwritten-preview
    :is(h1, h2, h3, h4, p, dd, li, button, summary, a, th, td):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    word-break: auto-phrase;
  }
}
@media (min-width: 769px) {
  body.handwritten-preview
    :is(#hero, #pricing, #contact)
    .button.primary
    .arrow:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: 24px;
  }
}
.mobile-heading-break {
  display: none;
}
@media (max-width: 768px) {
  body.handwritten-preview
    :is(#problem, #fit, #prompt-demo)
    h2.mobile-two-line-heading
    .mobile-heading-break {
    display: block;
  }
  html:has(body.fv-wall-layout) {
    --header: 48px;
    scrollbar-width: none;
  }
}
body.handwritten-preview {
  --hw-body-sp: 17px;
  --hw-note: 16px;
  --caption: 16px;
}
body.handwritten-preview
  main
  > section:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: 17px;
  content-visibility: visible !important;
  contain: none !important;
}
body.handwritten-preview
  main
  > section
  :is(.note, small):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: 16px;
}
body.handwritten-preview
  main
  > section
  :is(.screen-note, .demo-note, .hw-learning-date, .comparison-note):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: 14px;
}
body.handwritten-preview
  :is(#fit, #features, #usecases)
  :is(.fit-card, .feature-copy, .course-step)
  > p:not(.hw-feature-note) {
  font-size: 17px;
}
body.handwritten-preview
  :is(#faq, #compare, #pricing)
  :is(
    .faq-answer,
    .price-features,
    .included-grid,
    .calc-result,
    .comparison-table
  ):where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  font-size: 17px;
}
body.handwritten-preview :is(#hero, #problem, #fit) .hw-note {
  font-size: max(16px, var(--hw-note-size, 20px));
}
@media (min-width: 1600px) {
  body.handwritten-preview {
    --hw-body-pc: 18px;
    --body-size: 18px;
  }
  body.handwritten-preview
    main
    > section:where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: 18px;
  }
  body.handwritten-preview
    :is(#fit, #features, #usecases)
    :is(.fit-card, .feature-copy, .course-step)
    > p:not(.hw-feature-note):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ),
  body.handwritten-preview
    :is(#faq, #compare, #pricing)
    :is(
      .faq-answer,
      .price-features,
      .included-grid,
      .calc-result,
      .comparison-table
    ):where(
      :not(
        #compare,
        #compare *,
        #pricing,
        #pricing *,
        #flow,
        #flow *,
        #faq,
        #faq *,
        #contact,
        #contact *
      )
    ) {
    font-size: 18px;
  }
}
.trust-band {
  height: 72px;
  display: flex;
  align-items: center;
  color: var(--hw-body);
  background: var(--hw-white);
  border-block: 1px solid var(--border, #d6e4f0);
  position: relative;
  z-index: 3;
}
.trust-band-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--lp-space-18);
  max-width: 1400px;
  margin-inline: auto;
}
.trust-band :is(p, a) {
  margin: 0;
  font: 400 16px/1.45 var(--hw-sans);
  max-inline-size: none;
}
.trust-band .trust-total {
  white-space: nowrap;
  font-weight: 700;
}
.trust-band .trust-number {
  display: inline-block;
  font: 800 32px/1.1 var(--hw-num);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg, var(--hw-blue) 14%, var(--hw-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  vertical-align: -0.05em;
}
.trust-band .trust-developer {
  border-left: 1px solid var(--border, #d6e4f0);
  padding-left: var(--lp-space-18);
}
.trust-band .trust-developer > span {
  display: inline-block;
}
@media (min-width: 769px) and (max-width: 1100px) {
  .trust-band {
    height: auto;
    min-height: 72px;
    padding-block: var(--lp-space-12);
  }
  .trust-band-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    gap: var(--lp-space-14);
  }
  .trust-band .trust-developer {
    padding-left: var(--lp-space-14);
  }
}
@media (max-width: 768px) {
  .trust-band {
    height: auto;
    min-height: 0;
    padding-block: var(--lp-space-20);
  }
  .trust-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-16);
  }
  .trust-band .trust-total {
    white-space: normal;
  }
  .trust-band .trust-number {
    font-size: 28px;
  }
  .trust-band .trust-developer {
    border-left: 0;
    padding-left: 0;
  }
  .trust-band .trust-developer > span {
    display: inline;
  }
}
.trust-band-inner {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: var(--lp-space-24);
  max-width: 1440px;
  width: calc(100% - 64px);
}
.trust-band .trust-total,
.trust-band .trust-developer {
  text-align: center;
}
.trust-band .trust-developer {
  padding-left: var(--lp-space-24);
}
@media (min-width: 769px) and (max-width: 1100px) {
  .trust-band-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
  .trust-band .trust-total {
    white-space: normal;
  }
}
@media (max-width: 768px) {
  .trust-band-inner {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 48px);
    gap: var(--lp-space-16);
  }
  .trust-band .trust-developer {
    padding-left: 0;
  }
}
body.handwritten-preview
  :is(#features, #pricing)
  .audit-check-icon:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: inline-flex;
  width: 28px;
  height: 22px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  vertical-align: -4px;
}
body.handwritten-preview
  :is(#features, #pricing)
  .audit-check-icon
  svg:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  display: block;
  width: 28px;
  height: 22px;
  overflow: visible;
}
body.handwritten-preview
  :is(#features, #pricing)
  .audit-check-icon
  svg
  path:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  fill: none;
  stroke: var(--hw-blue);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body.handwritten-preview
  main#main
  :is(#hero, #learning-map, #usecases, #contact)
  img.course-cover-image:where(
    :not(
      #compare,
      #compare *,
      #pricing,
      #pricing *,
      #flow,
      #flow *,
      #faq,
      #faq *,
      #contact,
      #contact *
    )
  ) {
  aspect-ratio: 768/1092;
  object-fit: contain;
}
.pen-filter-definitions {
  position: absolute;
  pointer-events: none;
}