/* What this page adds to the site's stylesheet (vendor/anecdotes.webflow.css): the card that
   stands where the form stands on the site's landing pages, and the three icons. Everything
   else — page, header, hero, columns, gradient box, buttons, footer — is the site's own CSS on
   the site's own class names, untouched. */

/* The site puts this border on the gradient box from an embed on the page, not from the
   stylesheet; the same rule, so the box looks the same here. */
.container-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* The card: the site's .landing-form (white at 90%, 9px radius, 40px padding), with words in it
   instead of fields. The button is the site's own, as the form's button on the site. */
.cta-card { display: flex; flex-direction: column; align-items: flex-start; color: var(--dark-blue); }
.cta-card-title {
  font-family: Mulish, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 14px;
}
.cta-card-text { font-family: Mulish, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 150%; margin-bottom: 28px; }
.cta-card-note { font-family: Mulish, Arial, sans-serif; font-size: 14px; line-height: 150%; color: #053956; margin-top: 18px; }

/* The icons in the white section, in the colour the text beside them has: dark blue on the
   desktop's white band, white once the site turns that band dark (its 991px breakpoint). */
.cta-icon { height: 23px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--dark-blue); }
@media screen and (max-width: 991px) {
  .cta-icon { color: var(--white); height: 20px; }
}