@charset "UTF-8";
/**
 * Do not edit directly
 * Generated on Wed, 02 Nov 2022 19:02:46 GMT
 */
 .ca-reimagine-tiles {
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius-pill: 999px;
  --border-radius-rounded: 50%;
  --breakpoints-xsmall: 480px;
  --breakpoints-small: 768px;
  --breakpoints-medium: 1024px;
  --breakpoints-large: 1200px;
  --breakpoints-xlarge: 1440px;
  --color-blue-00: #09222a;
  --color-blue-01: #055393;
  --color-blue-02: #0077c5;
  --color-blue-03: #0097e6;
  --color-blue-04: #21abf6;
  --color-blue-05: #0d333f;
  --color-blue-06: #dbedee;
  --color-blue-07: #34bfff;
  --color-green-00: #0d7300;
  --color-green-01: #0a8543;
  --color-green-02: #2ca01c;
  --color-green-03: #53b700;
  --color-green-04: #0fd46c;
  --color-green-05: #a9e838;
  --color-green-06: #086d37;
  --color-red-01: #b80000;
  --color-red-02: #d52b1e;
  --color-red-03: #e43834;
  --color-red-04: #f25a52;
  --color-red-05: #ff8979;
  --color-orange-01: #f95700;
  --color-orange-02: #ff6a00;
  --color-orange-03: #ff8000;
  --color-orange-04: #ff9331;
  --color-orange-05: #ffac61;
  --color-orange-06: #ff8540;
  --color-yellow-01: #ffad00;
  --color-yellow-02: #ffbb00;
  --color-yellow-03: #ffca00;
  --color-yellow-04: #ffdc00;
  --color-yellow-05: #ffee00;
  --color-pink-01: #9c005e;
  --color-pink-02: #c9007a;
  --color-pink-03: #e31c9e;
  --color-pink-04: #ff59cc;
  --color-pink-05: #ff88ec;
  --color-hotpink: #dd2366;
  --color-purple-01: #4e2b8f;
  --color-purple-02: #6436af;
  --color-purple-03: #7a3dd8;
  --color-purple-04: #9457fa;
  --color-purple-05: #a898ff;
  --color-teal-01: #008481;
  --color-teal-02: #00a6a4;
  --color-teal-03: #00c1bf;
  --color-teal-04: #00d7d7;
  --color-teal-05: #07c4d9;
  --color-gold-01: #a98343;
  --color-gold-02: #c4974d;
  --color-gold-03: #d2aa64;
  --color-gold-04: #e0bd7b;
  --color-gold-05: #eed092;
  --color-beige-01: #e2e0db;
  --color-beige-02: #f3f2ef;
  --color-grey-01: #393a3d;
  --color-grey-02: #6b6c72;
  --color-grey-03: #8d9096;
  --color-grey-04: #babec5;
  --color-grey-05: #d4d7dc;
  --color-grey-06: #e3e5e8;
  --color-grey-07: #eceef1;
  --color-grey-08: #f4f5f8;
  --color-blue-tint: #ebf9ff;
  --color-white: #ffffff;
  --color-black: #000000;
  --easing-slow: cubic-bezier(0.35, 0, 0.5, 1); /* Slow easing creates a subtle movement that works well for passive animations, when the user is viewing but not interacting with the interface. This includes visual feedback or cases where the UI is hinting at the next action. Slow is our default ease applied to opacity and color animations. */
  --easing-quick: cubic-bezier(0.35, 0, 0.25, 1); /* Quick easing creates a responsive animation that instantly moves based off the user’s interaction. This curve is used with objects that have a dynamic position, scale, or rotation and appear and stay within the screen. */
  --easing-exit: cubic-bezier(0.35, 0, 0.8, 1); /* Exit easing is how it leaves view. This type of movement combined with an opacity animation creates smooth transitions between scenes generally applied to position or scale. */
  --easing-entrance: cubic-bezier(0, 0, 0.1, 1); /* Entrance easing is used to bring an element into view. This type of movement combined with an opacity animation creates smooth transitions between scenes generally applied to position or scale. */
  --easing-spirited: cubic-bezier(0.35, 1.35, 0.3, 1); /* Spirited ease is similar to quick easing, except with a subtle spring overshoot. It’s used when animating objects that have dynamic position, scale, or rotation appear and stay within the confines of the screen. */
  --timing-10: 2s;
  --timing-11: 3s;
  --timing-12: 4s;
  --timing-01: 50ms;
  --timing-02: 100ms;
  --timing-03: 150ms;
  --timing-04: 250ms;
  --timing-05: 350ms;
  --timing-06: 500ms;
  --timing-07: 750s;
  --timing-08: 1s;
  --timing-09: 1.5s;
  --elevation-skim: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  --elevation-lifted: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
  --elevation-raised: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
  --elevation-floating: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
  --font-family-avenir: "AvenirNext forINTUIT", "Avenir", "Helvetica", "Arial", sans-serif;
  --font-size-10: 60px;
  --font-size-11: 72px;
  --font-size-12: 84px;
  --font-size-13: 96px;
  --font-size-14: 108px;
  --font-size-15: 120px;
  --font-size-16: 132px;
  --font-size-09: 48px;
  --font-size-08: 40px;
  --font-size-07: 34px;
  --font-size-06: 28px;
  --font-size-05: 24px;
  --font-size-04: 20px;
  --font-size-03: 16px;
  --font-size-02: 14px;
  --font-size-01: 12px;
  --font-size-00: 10px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-demi: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-lineheight-heading: 1.3;
  --font-lineheight-body: 1.5;
  --font-lineheight-heading01: 1.4;
  --font-lineheight-body01: 1.42857143;
  --font-lineheight-heading02: 1.28571429;
  --font-lineheight-size-10: 76px;
  --font-lineheight-size-11: 92px;
  --font-lineheight-size-12: 108px;
  --font-lineheight-size-13: 108px;
  --font-lineheight-size-14: 116px;
  --font-lineheight-size-15: 128px;
  --font-lineheight-size-16: 140px;
  --font-lineheight-size-09: 60px;
  --font-lineheight-size-08: 52px;
  --font-lineheight-size-07: 44px;
  --font-lineheight-size-06: 36px;
  --font-lineheight-size-05: 32px;
  --font-lineheight-size-04: 28px;
  --font-lineheight-size-03: 24px;
  --font-lineheight-size-02: 20px;
  --font-lineheight-size-01: 16px;
  --grid-gutter: 20px;
  --grid-margin-small: 16px;
  --grid-margin-base: 20px;
  --grid-column-10: 83.333%;
  --grid-column-11: 91.667%;
  --grid-column-12: 100%;
  --grid-column-01: 8.333%;
  --grid-column-02: 16.667%;
  --grid-column-03: 25%;
  --grid-column-04: 33.333%;
  --grid-column-05: 41.667%;
  --grid-column-06: 50%;
  --grid-column-07: 58.333%;
  --grid-column-08: 66.667%;
  --grid-column-09: 75%;
  --motion-easing-slow: cubic-bezier(0.35, 0, 0.5, 1); /* Slow easing creates a subtle movement that works well for passive animations, when the user is viewing but not interacting with the interface. This includes visual feedback or cases where the UI is hinting at the next action. Slow is our default ease applied to opacity and color animations. */
  --motion-easing-quick: cubic-bezier(0.35, 0, 0.25, 1); /* Quick easing creates a responsive animation that instantly moves based off the user’s interaction. This curve is used with objects that have a dynamic position, scale, or rotation and appear and stay within the screen. */
  --motion-easing-exit: cubic-bezier(0.35, 0, 0.8, 1); /* Exit easing is how it leaves view. This type of movement combined with an opacity animation creates smooth transitions between scenes generally applied to position or scale. */
  --motion-easing-entrance: cubic-bezier(0, 0, 0.1, 1); /* Entrance easing is used to bring an element into view. This type of movement combined with an opacity animation creates smooth transitions between scenes generally applied to position or scale. */
  --motion-easing-spirited: cubic-bezier(0.35, 1.35, 0.3, 1); /* Spirited ease is similar to quick easing, except with a subtle spring overshoot. It’s used when animating objects that have dynamic position, scale, or rotation appear and stay within the confines of the screen. */
  --motion-timing-10: 2s;
  --motion-timing-11: 3s;
  --motion-timing-12: 4s;
  --motion-timing-01: 50ms;
  --motion-timing-02: 100ms;
  --motion-timing-03: 150ms;
  --motion-timing-04: 250ms;
  --motion-timing-05: 350ms;
  --motion-timing-06: 500ms;
  --motion-timing-07: 750s;
  --motion-timing-08: 1s;
  --motion-timing-09: 1.5s;
  --spacing-xxxsmall: 4px;
  --spacing-xxsmall: 8px;
  --spacing-xsmall: 16px;
  --spacing-small: 20px;
  --spacing-large: 40px;
  --spacing-xlarge: 60px;
  --spacing-xxlarge: 80px;
  --spacing-xxxlarge: 120px;
  --zindex-dropdown: 1000;
  --zindex-sticky: 1100;
  --zindex-fixed: 1200;
  --zindex-overlay: 1300;
  --zindex-overlay-close: 1305;
  --zindex-modal: 1400;
  --zindex-tooltip: 1500;
}

.ca-reimagine-button {
  border: solid 2px transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s linear;
  isolation: isolate;
  line-height: 1;
  outline: none;
  white-space: nowrap;
  position: relative;
  gap: var(--spacing-xxsmall);
  border-radius: var(--border-radius-small);
  padding-inline: 28px;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-03);
  color: var(--color-white);
  height: 52px;
  min-width: 120px;
  font-weight: var(--font-weight-bold);
  background: var(--color-green-01);
  display: inline-flex;
}
.ca-reimagine-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  right: 100%;
  z-index: -1;
  transition: right 0.2s ease-out, opacity 0.2s linear;
  border-radius: var(--border-radius-small);
  opacity: 0;
  background: var(--color-green-00);
}
.ca-reimagine-button::after {
  display: block;
  content: "";
  border-style: solid;
  border-width: 3px;
  border-color: var(--color-blue-02);
  background: transparent;
  border-radius: 8px;
  position: absolute;
  inset: -6px;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.ca-reimagine-button:disabled::before, .ca-reimagine-button.disbled::before {
  display: none;
}
.ca-reimagine-button:disabled, .ca-reimagine-button.disabled {
  opacity: 0.3;
  cursor: default;
}
.ca-reimagine-button:hover:not(:disabled)::before, .ca-reimagine-button.hover:not(:disabled)::before {
  right: -2px;
  opacity: 1;
}
.ca-reimagine-button:focus-visible:not(:disabled)::after, .ca-reimagine-button.focus:not(:disabled)::after {
  opacity: 1;
}

.ca-reimagine-button--blue {
  background-color: var(--color-blue-05);
}
.ca-reimagine-button--blue::before {
  background-color: var(--color-blue-00);
}

.ca-reimagine-button--white {
  background-color: transparent;
  color: var(--color-black);
  border: 0.125rem solid var(--color-white);
}
.ca-reimagine-button--white::before {
  background-color: var(--color-grey-07);
}

.ca-reimagine-button--blue-secondary {
  color: var(--color-blue-05);
  transition: color 0.1s linear, border-color 0.1s linear;
  border-color: currentcolor;
  background: transparent;
}
.ca-reimagine-button--blue-secondary::before {
  background-color: var(--color-blue-05);
}
.ca-reimagine-button--blue-secondary:hover:not(:disabled), .ca-reimagine-button--blue-secondary.hover:not(:disabled) {
  color: var(--color-white);
}

.ca-reimagine-button--white-secondary {
  color: var(--color-white);
  transition: color 0.1s linear, border-color 0.1s linear;
  border-color: currentcolor;
  background: transparent;
}
.ca-reimagine-button--white-secondary::before {
  background: var(--color-white);
}
.ca-reimagine-button--white-secondary:hover:not(:disabled), .ca-reimagine-button--white-secondary.hover:not(:disabled) {
  color: var(--color-white);
}

.ca-reimagine-button--small {
  height: 48px;
  padding: 0 20px;
  min-width: 100px;
  font-weight: var(--font-weight-demi);
}

.ca-reimagine-button--large {
  height: 56px;
  padding: 0 36px;
  min-width: 140px;
  font-weight: var(--font-weight-bold);
}

.ca-reimagine-tiles {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--spacing-small);
  max-width: 1200px;
  padding: 0 20px;
  text-align: center;
  margin: 0 auto;
}

.ca-reimagine-tile {
  border-radius: var(--border-radius-medium);
  box-shadow: var(--elevation-lifted);
  padding: var(--spacing-large) var(--spacing-small);
  align-items: center;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease-in;
}
.ca-reimagine-tile:hover {
  box-shadow: var(--elevation-floating);
}

.ca-reimagine-tile__icon {
  height: 72px;
  width: 72px;
  display: grid;
  place-items: center;
  margin-block-end: var(--spacing-small);
}

.ca-reimagine-tile__heading {
  font-size: var(--font-size-05);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineheight-size-05);
  margin-block: 0 var(--spacing-small);
}

.ca-reimagine-tile__text {
  margin-block: 0 var(--spacing-small);
  font-size: var(--font-size-03);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-lineheight-size-03);
  text-align: center;
}

.ca-reimagine-tile__cta {
  margin-top: auto;
}

@media screen and (min-width: 768px) {
  .ca-reimagine-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-large) var(--spacing-small);
  }
}
@media screen and (min-width: 1024px) {
  .ca-reimagine-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--spacing-xxlarge);
  }
  .ca-reimagine-tile {
    padding: var(--spacing-large);
  }
}