/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/
@font-face {
  font-family: "AvenirNext";
  font-stye: normal;
  font-weight: 300;
  src: url("/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"), url("/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"); }

@font-face {
  font-family: "AvenirNext";
  font-stye: normal;
  font-weight: 400;
  src: url("/fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2") format("woff2"), url("/fonts/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff"); }

@font-face {
  font-family: "AvenirNext";
  font-stye: normal;
  font-weight: 600;
  src: url("/fonts/14c73713-e4df-4dba-933b-057feeac8dd1.woff2") format("woff2"), url("/fonts/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") format("woff"); }

@font-face {
  font-family: "AvenirNext";
  font-stye: bold;
  font-weight: 800;
  src: url("/fonts/5c57b2e2-f641-421e-a95f-65fcb47e409a.woff2") format("woff2"), url("/fonts/181c847e-cdbc-43d5-ae14-03a81c8953b4.woff") format("woff"); }

.m--wide {
  margin-right: -1rem;
  margin-left: -1rem;
  padding-right: 1rem;
  padding-left: 1rem; }

.m--bleed {
  margin-right: -1rem;
  margin-left: -1rem; }

.bg--brand {
  background-color: #FA507B; }

.relative {
  position: relative; }

@media (max-width: 480px) {
  .hide--small {
    display: none !important; } }

@media (min-width: 480px) {
  .hide--large {
    display: none !important; } }

.p--all {
  padding: 2rem 2rem; }

.p--top {
  padding-top: 2rem; }

.p--bottom {
  padding-bottom: 2rem; }

.p--ver {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.p--verLarge {
  padding-top: 4rem;
  padding-bottom: 4rem; }

.p--hor {
  padding-left: 2rem;
  padding-right: 2rem; }

@media (min-width: 480px) {
  .p--horNoSmall {
    padding-left: 2rem;
    padding-right: 2rem; } }

.p--left {
  padding-left: 2rem; }

.p--right {
  padding-right: 2rem; }

.m--top {
  margin-top: 2rem; }

.m--bottom {
  margin-bottom: 2rem; }

.m--ver {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.m--hor {
  margin-left: 2rem;
  margin-right: 2rem; }

.m--none {
  margin: 0; }

.flex--center {
  display: flex;
  justify-content: center;
  align-items: center; }

.m--max {
  max-width: 80rem;
  margin-right: auto;
  margin-left: auto; }

.m--maxSmall {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto; }

.w100 {
  width: 100%; }

.split {
  display: flex; }
  .split-pane {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    transition: flex .25s ease-in-out; }
    .split-pane:nth-child(1) {
      z-index: 1;
      box-shadow: 3px 0 50px 0 rgba(0, 0, 0, 0.15); }
    .split-pane:nth-child(1) {
      flex: 1 0 95%; }
      @media (max-width: 1020px) {
        .split-pane:nth-child(1) {
          flex: 1 0 95%; } }
      @media (max-width: 640px) {
        .split-pane:nth-child(1) {
          width: 100%; } }
    .split-pane:nth-child(2) {
      flex: 1 0 5%;
      overflow: visible;
      position: relative; }
      @media (max-width: 1020px) {
        .split-pane:nth-child(2) {
          flex: 1 0 5%; } }
      @media (max-width: 640px) {
        .split-pane:nth-child(2) {
          display: none; } }
      .split-pane:nth-child(2) img {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 43.25rem;
        height: 22.1875rem;
        max-width: none;
        z-index: 2;
        transform: translate(-10%, -400%);
        transition: transform .7s ease-in-out; }
    .split-paneSmall {
      flex: 1 0 30% !important; }
      .split-paneSmall img {
        transform: translate(-10%, -50%) !important; }
    .split-paneLarge {
      flex: 1 0 70% !important; }
  .split-content {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center; }
    .split-contentWrapper {
      padding: 0 2rem;
      min-width: 80%; }

.w--normal {
  font-weight: 300; }

.w--medium {
  font-weight: 400; }

.w--bold {
  font-weight: 600;
  letter-spacing: 0.24px; }

.w--heavy {
  font-weight: 800;
  letter-spacing: 0.5px; }

.align--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center; }

@media (max-width: 480px) {
  .align--centerSmall {
    text-align: center; } }

.align--right {
  text-align: right; }

.align--left {
  text-align: left; }

.measure {
  margin: auto;
  max-width: 30rem; }

.c--brand {
  color: #FA507B; }

.c--tertiary {
  color: #958BE3; }

.c--dark {
  color: #3F4044; }

.c--light {
  color: #e8e9ec; }

.c--white {
  color: #FFF; }

.c--warning {
  color: #E65963; }

.dimed {
  opacity: .6; }

.ellipsis {
  text-overflow: ellipsis; }

/*!
 * Flexgrid.css by axiomzen.co - github.com/axiomzen/flexgrid.css
 * License - MIT
 */
/**
 * Grid
 *
 * This is the root element of a grid object. In it, we exhibit a few main
 * behaviours. The modifiers also help with certain behaviours.
 *
 * [0]  Safety net box sizing reset
 * [1]  All Grids are flex containers
 * [2]  By default, they wrap cells to a new line for responsiveness
 * [3]  Grids can be applied to lists as well, thus the list resets
 * [4]  Changes the layout direction to columnar
 * [5]  Aligns flex items to the start of the flex line
 * [6]  Aligns flex items to the end of the flex line
 * [7]  Aligns flex items to the center of the flex line
 * [8]  Packs flex items around the center of the main axis
 * [9]  Packs flex items towards the end of the main axis
 * [10] Distributes space evenly on the main axis between flex items
 * [11] Distributes space evenly on the main axis around flex items
 *
 * Example HTML:
 *
 * <div class="Grid"></div>
 * <ul class="Grid"></ul>
 * <ol class="Grid"></ol>
 */
.Grid {
  box-sizing: border-box;
  /* 0 */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* 1 */
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  /* 2 */
  list-style: none;
  /* 3 */
  margin: 0;
  /* 3 */
  padding: 0;
  /* 3 */ }

.Grid--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /* 4 */ }

.Grid--alignStart {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
  /* 5 */ }

.Grid--alignEnd {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
  /*  6 */ }

.Grid--alignCenter {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  /* 7 */ }

.Grid--justifyCenter {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* 8 */ }

.Grid--justifyEnd {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  /* 9 */ }

.Grid--spaceBetween {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /* 10 */ }

.Grid--spaceAround {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  /* 11 */ }

/**
 * Grid-cell
 *
 * Grid cells are the content containers that live inside of grids. By default,
 * they just fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell">...</div>
 *   <div class="Grid-cell">...</div>
 *   ...
 * </div>
 */
.Grid-cell {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.Grid-cell--auto {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto; }

/**
 * Grid-cell--[size]
 * Grid-cell--[size]-[span]
 * Grid-cell--[size]-offset-[span]
 *
 * For the sake of the following documentation, let's assume that the breakpoint
 * sizes in the gridconfig remain:
 *
 * [xs, sm, md, lg, xl, xx]
 *
 * In this sequence of modifiers, there's a bit going on. We're iterating over
 * the breakpoints in the grid configuration, and applying modifiers to the
 * grid cells. We're also iterating over the number of columns in the grid
 * configuration, and appending more modifiers to grid cells. Let's look at
 * the two main modifier types:
 *
 * Grid-cell--[size]
 *
 * These modifiers cause grid cells to break at a certain size, denoted above
 * by [size]. By default, they occupy 100% width, and then at a certain
 * breakpoint, they transform to fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   ...
 * </div>
 *
 * Grid-cell--[size]-[span]
 *
 * These modifiers are meant to be used declaratively, and chaining them
 * together in the markup determines how they behave at certain screen widths.
 * When building a grid system using these modifiers, the most important part
 * is the declarations at the smallest screen size. If these are left out, grid
 * cells will just auto fill whatever space they take up.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-8"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 * </div>
 *
 * Grid-cell--[size]-offset-[span]
 *
 * These modifiers can also be used declaratively, and chaining them together
 * will add offsets to grid cells at various breakpoints. For example, at the
 * smallest breakpoint, you can have an offset of 0 columns, at a medium
 * breakpoint, an offset of 4 columns, and at a large breakpoint, an offset of
 * 2 columns. Offsets are from the left, as that's where the horizontal stacking
 * of columns begins. If at any point, you want the offset to go back to 0, you
 * can use the offset-0 modifier.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell--xs-12 Grid-cell--md-6 Grid-cell--md-offset-6"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--md-8"></div>
 * </div>
 *
 * It's important to be careful that your offsets + cell spans don't overflow
 * outside the rows...a little bit of very basic math is required!
 */
.Grid-cell--xs {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 320px) {
  .Grid-cell--xs {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

.Grid-cell--xs-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8.33333%;
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.Grid-cell--xs-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16.66667%;
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.Grid-cell--xs-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.Grid-cell--xs-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33333%;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.Grid-cell--xs-5 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 41.66667%;
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.Grid-cell--xs-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.Grid-cell--xs-7 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 58.33333%;
  -ms-flex: 0 0 58.33333%;
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.Grid-cell--xs-8 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 66.66667%;
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.Grid-cell--xs-9 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.Grid-cell--xs-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 83.33333%;
  -ms-flex: 0 0 83.33333%;
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.Grid-cell--xs-11 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 91.66667%;
  -ms-flex: 0 0 91.66667%;
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.Grid-cell--xs-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 320px) {
  .Grid-cell--xs-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--xs-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--xs-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--xs-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--xs-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--xs-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--xs-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--xs-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--xs-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--xs-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--xs-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--xs-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 320px) {
  .Grid-cell--xs-offset-0 {
    margin-left: 0%; }
  .Grid-cell--xs-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--xs-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--xs-offset-3 {
    margin-left: 25%; }
  .Grid-cell--xs-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--xs-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--xs-offset-6 {
    margin-left: 50%; }
  .Grid-cell--xs-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--xs-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--xs-offset-9 {
    margin-left: 75%; }
  .Grid-cell--xs-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--xs-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--xs-offset-12 {
    margin-left: 100%; } }

.Grid-cell--sm {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 480px) {
  .Grid-cell--sm {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 480px) {
  .Grid-cell--sm-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--sm-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--sm-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--sm-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--sm-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--sm-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--sm-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--sm-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--sm-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--sm-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--sm-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 480px) {
  .Grid-cell--sm-offset-0 {
    margin-left: 0%; }
  .Grid-cell--sm-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--sm-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--sm-offset-3 {
    margin-left: 25%; }
  .Grid-cell--sm-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--sm-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--sm-offset-6 {
    margin-left: 50%; }
  .Grid-cell--sm-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--sm-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--sm-offset-9 {
    margin-left: 75%; }
  .Grid-cell--sm-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--sm-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--sm-offset-12 {
    margin-left: 100%; } }

.Grid-cell--md {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 640px) {
  .Grid-cell--md {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 640px) {
  .Grid-cell--md-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--md-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--md-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--md-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--md-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--md-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--md-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--md-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--md-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--md-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 640px) {
  .Grid-cell--md-offset-0 {
    margin-left: 0%; }
  .Grid-cell--md-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--md-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--md-offset-3 {
    margin-left: 25%; }
  .Grid-cell--md-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--md-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--md-offset-6 {
    margin-left: 50%; }
  .Grid-cell--md-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--md-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--md-offset-9 {
    margin-left: 75%; }
  .Grid-cell--md-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--md-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--md-offset-12 {
    margin-left: 100%; } }

.Grid-cell--lg {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 760px) {
  .Grid-cell--lg {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 760px) {
  .Grid-cell--lg-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--lg-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--lg-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--lg-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--lg-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--lg-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--lg-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--lg-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--lg-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--lg-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--lg-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--lg-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 760px) {
  .Grid-cell--lg-offset-0 {
    margin-left: 0%; }
  .Grid-cell--lg-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--lg-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--lg-offset-3 {
    margin-left: 25%; }
  .Grid-cell--lg-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--lg-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--lg-offset-6 {
    margin-left: 50%; }
  .Grid-cell--lg-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--lg-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--lg-offset-9 {
    margin-left: 75%; }
  .Grid-cell--lg-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--lg-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--lg-offset-12 {
    margin-left: 100%; } }

.Grid-cell--xl {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 1020px) {
  .Grid-cell--xl {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 1020px) {
  .Grid-cell--xl-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--xl-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--xl-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--xl-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--xl-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--xl-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--xl-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--xl-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--xl-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--xl-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--xl-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 1020px) {
  .Grid-cell--xl-offset-0 {
    margin-left: 0%; }
  .Grid-cell--xl-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--xl-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--xl-offset-3 {
    margin-left: 25%; }
  .Grid-cell--xl-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--xl-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--xl-offset-6 {
    margin-left: 50%; }
  .Grid-cell--xl-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--xl-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--xl-offset-9 {
    margin-left: 75%; }
  .Grid-cell--xl-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--xl-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--xl-offset-12 {
    margin-left: 100%; } }

.Grid-cell--xx {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 1200px) {
  .Grid-cell--xx {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@media (min-width: 1200px) {
  .Grid-cell--xx-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .Grid-cell--xx-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .Grid-cell--xx-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--xx-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .Grid-cell--xx-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .Grid-cell--xx-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--xx-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .Grid-cell--xx-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .Grid-cell--xx-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .Grid-cell--xx-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .Grid-cell--xx-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .Grid-cell--xx-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 1200px) {
  .Grid-cell--xx-offset-0 {
    margin-left: 0%; }
  .Grid-cell--xx-offset-1 {
    margin-left: 8.33333%; }
  .Grid-cell--xx-offset-2 {
    margin-left: 16.66667%; }
  .Grid-cell--xx-offset-3 {
    margin-left: 25%; }
  .Grid-cell--xx-offset-4 {
    margin-left: 33.33333%; }
  .Grid-cell--xx-offset-5 {
    margin-left: 41.66667%; }
  .Grid-cell--xx-offset-6 {
    margin-left: 50%; }
  .Grid-cell--xx-offset-7 {
    margin-left: 58.33333%; }
  .Grid-cell--xx-offset-8 {
    margin-left: 66.66667%; }
  .Grid-cell--xx-offset-9 {
    margin-left: 75%; }
  .Grid-cell--xx-offset-10 {
    margin-left: 83.33333%; }
  .Grid-cell--xx-offset-11 {
    margin-left: 91.66667%; }
  .Grid-cell--xx-offset-12 {
    margin-left: 100%; } }

/**
 * Grid--gutter-[size]
 *
 * Grid gutters are used to give grid cells spacing between each other. They are
 * optional modifiers to the grid, and come in various sizes based on the
 * $flexgrid-gutters configuration.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell"></div>
 *   <div class="Grid-cell"></div>
 *   ...
 * </div>
 */
.Grid--gutter-xs {
  margin-top: -0.2rem;
  margin-left: -0.2rem; }

.Grid--gutter-xs > [class^="Grid-cell"] {
  padding-top: 0.2rem;
  padding-left: 0.2rem; }

.Grid--gutter-sm {
  margin-top: -0.32rem;
  margin-left: -0.32rem; }

.Grid--gutter-sm > [class^="Grid-cell"] {
  padding-top: 0.32rem;
  padding-left: 0.32rem; }

.Grid--gutter-md {
  margin-top: -0.52rem;
  margin-left: -0.52rem; }

.Grid--gutter-md > [class^="Grid-cell"] {
  padding-top: 0.52rem;
  padding-left: 0.52rem; }

.Grid--gutter-lg {
  margin-top: -0.84rem;
  margin-left: -0.84rem; }

.Grid--gutter-lg > [class^="Grid-cell"] {
  padding-top: 0.84rem;
  padding-left: 0.84rem; }

.Grid--gutter-xl {
  margin-top: -1.36rem;
  margin-left: -1.36rem; }

.Grid--gutter-xl > [class^="Grid-cell"] {
  padding-top: 1.36rem;
  padding-left: 1.36rem; }

.Grid--gutter-xx {
  margin-top: -2.2rem;
  margin-left: -2.2rem; }

.Grid--gutter-xx > [class^="Grid-cell"] {
  padding-top: 2.2rem;
  padding-left: 2.2rem; }

*,
*::before,
*::after {
  box-sizing: border-box; }

a {
  cursor: pointer; }
  a.nounder {
    text-decoration: none; }

input,
textarea,
button,
select {
  box-shadow: none;
  border-radius: 0;
  appearance: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "AvenirNext", Open Sans, Lucida Grande, sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px; }

hr {
  margin: 3rem 0;
  border: 0;
  border-bottom: 1px solid #b6b6b6; }
  hr.dark {
    border-bottom: 1px solid #6F6064; }
  hr.small {
    margin-right: auto;
    margin-left: auto;
    width: 40%; }

img {
  max-width: 100%;
  height: auto; }

.img--bleed {
  margin-right: -1rem;
  margin-left: -1rem;
  max-width: calc(100% + 2rem);
  text-align: center; }

html {
  font-size: 16px; }

body {
  margin-bottom: 0;
  margin-left: 1rem;
  margin-right: 1rem;
  color: #7B7B9F;
  background-color: #FFF;
  font-family: "AvenirNext", Open Sans, Lucida Grande, sans-serif;
  font-size: 16px;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  body.Body--installing, body.Body--installingFail {
    overflow: hidden; }
    @media (min-width: 640px) {
      body.Body--installing::after, body.Body--installingFail::after {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        background: linear-gradient(150deg, rgba(250, 80, 123, 0.5) 0%, rgba(253, 179, 198, 0.5) 100%);
        content: ''; } }
  body.Body--installing .Popup--installing {
    display: block;
    opacity: 1;
    transform: translate(-50%, 0); }

::selection {
  background: #839fe2;
  /* WebKit/Blink Browsers */ }

::-moz-selection {
  background: #839fe2;
  /* Gecko Browsers */ }

.Browser {
  position: relative;
  display: block;
  padding-bottom: calc(56.25% + 1rem);
  height: 0; }
  @media (min-width: 1280px) {
    .Browser {
      padding: 0;
      height: auto; } }
  .Browser iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    @media (min-width: 1280px) {
      .Browser iframe {
        position: static;
        display: block;
        margin: auto;
        width: calc(1280px);
        height: 720px;
        justify-content: center; } }

.Button {
  display: inline-block;
  margin: 0 .125rem;
  padding: .4rem 2.2rem;
  color: #FFF;
  background-color: #FA507B;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 1px;
  text-decoration: none;
  border: none;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all .1s ease-out; }
  .Button:active, .Button:focus {
    text-decoration: none; }
  .Button:hover:not(.Button--invalid) {
    color: #FFF;
    background-color: #FA507B;
    text-decoration: none;
    box-shadow: 0 5px 10px rgba(12, 12, 129, 0.05);
    transform: scale(1.05, 1.05); }
  .Button:active {
    background-color: #f2f2f2;
    transform: scale(1.01, 1.01); }
  .Button--noHoverChange:hover {
    color: #FFF;
    background-color: #FA507B; }
  .Button--noHoverChangeLight:hover {
    color: #958BE3;
    background-color: #FFF; }
  .Button--large {
    padding: .8rem 2.2rem; }
  .Button--primary {
    box-shadow: 0 15px 45px rgba(250, 80, 123, 0.41); }
    .Button--primary:hover:not(.Button--invalid) {
      box-shadow: 0 10px 36px rgba(250, 80, 123, 0.3); }
  .Button--tertiary {
    color: #FFF;
    background-color: #958BE3; }
    .Button--tertiary:hover:not(.Button--invalid) {
      color: #FFF;
      background-color: #958BE3; }
  .Button--hero {
    color: #FFF;
    background-color: #A3A3C0; }
  .Button--light {
    color: #958BE3;
    background-color: #FFF; }
    .Button--light:hover:not(.Button--invalid) {
      color: #958BE3;
      background-color: #FFF; }
  .Button--pinkLight {
    color: #FA507B;
    background-color: #FFF; }
    .Button--pinkLight:hover:not(.Button--invalid) {
      color: #FFF;
      background-color: #FA507B; }
  .Button--white {
    color: #FA507B;
    background-color: #FFF; }
  .Button--dark {
    color: #FFF;
    background-color: #7B7B9F; }
  .Button--grey {
    color: #e8e9ec;
    background-color: #979797; }
  @media (max-width: 480px) {
    .Button--fullSmall {
      width: 100%; } }
  .Button--chrome {
    position: relative;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    display: inline-block;
    padding: 1rem 2rem;
    padding-left: 1rem;
    color: #6E5FBF;
    font-size: 1.2rem; }
    .Button--chromeIcon {
      display: inline-block;
      margin-right: 1rem;
      max-width: 2rem; }
    .Button--chromeWrapper {
      display: flex;
      align-items: center; }
  .Button--invalid {
    color: #FFF;
    background-color: #b6b6b6;
    cursor: default; }
    .Button--invalid:hover, .Button--invalid:active {
      color: #FFF;
      background-color: #b6b6b6;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.Card {
  position: relative;
  display: inline-block;
  overflow: visible;
  margin: 0.4rem 0.6rem;
  margin-left: 0;
  width: 13rem;
  height: 6.2rem;
  background-color: #FFF;
  box-shadow: 0 2px 24px rgba(57, 57, 82, 0.09);
  border-radius: .3rem;
  outline: none;
  cursor: pointer;
  transition: transform .1s ease; }
  @media (max-width: 480px) {
    .Card {
      width: 100%; } }
  @media (min-width: 640px) {
    .Card:hover {
      box-shadow: 1px 1px 0 0 rgba(151, 151, 151, 0.08), 2px 5px 10px 0 rgba(151, 151, 151, 0.2);
      transform: translate3d(0, -0.3rem, 0); } }
  .Card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .Card-header {
    position: relative;
    display: flex;
    padding: 0 0.8rem;
    width: 100%;
    flex: 0 0 62%;
    justify-content: space-between; }
  .Card-icon {
    display: block;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 1rem;
    margin-right: .5rem;
    background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDQzOC41MzMgNDM4LjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUzMyA0MzguNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM5Ni4yODMsMTMwLjE4OGMtMy44MDYtOS4xMzUtOC4zNzEtMTYuMzY1LTEzLjcwMy0yMS42OTVsLTg5LjA3OC04OS4wODFjLTUuMzMyLTUuMzI1LTEyLjU2LTkuODk1LTIxLjY5Ny0xMy43MDQgICBDMjYyLjY3MiwxLjkwMywyNTQuMjk3LDAsMjQ2LjY4NywwSDYzLjk1M0M1Ni4zNDEsMCw0OS44NjksMi42NjMsNDQuNTQsNy45OTNjLTUuMzMsNS4zMjctNy45OTQsMTEuNzk5LTcuOTk0LDE5LjQxNHYzODMuNzE5ICAgYzAsNy42MTcsMi42NjQsMTQuMDg5LDcuOTk0LDE5LjQxN2M1LjMzLDUuMzI1LDExLjgwMSw3Ljk5MSwxOS40MTQsNy45OTFoMzEwLjYzM2M3LjYxMSwwLDE0LjA3OS0yLjY2NiwxOS40MDctNy45OTEgICBjNS4zMjgtNS4zMzIsNy45OTQtMTEuOCw3Ljk5NC0xOS40MTdWMTU1LjMxM0M0MDEuOTkxLDE0Ny42OTksNDAwLjA4OCwxMzkuMzIzLDM5Ni4yODMsMTMwLjE4OHogTTI1NS44MTYsMzguODI2ICAgYzUuNTE3LDEuOTAzLDkuNDE4LDMuOTk5LDExLjcwNCw2LjI4bDg5LjM2Niw4OS4zNjZjMi4yNzksMi4yODYsNC4zNzQsNi4xODYsNi4yNzYsMTEuNzA2SDI1NS44MTZWMzguODI2eiBNMzY1LjQ0OSw0MDEuOTkxICAgSDczLjA4OVYzNi41NDVoMTQ2LjE3OHYxMTguNzcxYzAsNy42MTQsMi42NjIsMTQuMDg0LDcuOTkyLDE5LjQxNGM1LjMzMiw1LjMyNywxMS44LDcuOTk0LDE5LjQxNyw3Ljk5NGgxMTguNzczVjQwMS45OTF6IiBmaWxsPSIjZTRlYWVkIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1.5rem; }
  .Card-title {
    display: -webkit-box;
    flex: 1 1;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-self: center;
    max-height: 2.5rem;
    margin-top: .75rem;
    color: #7B7B9F;
    font-size: .875rem;
    text-overflow: ellipsis;
    overflow: hidden; }
  .Card-description {
    position: relative;
    width: 100%;
    height: 100%;
    padding: .6rem;
    font-size: 0.8rem;
    line-height: 1.28;
    overflow: hidden;
    background-color: #FCFDFF;
    color: #7A7A9E;
    border-radius: 0 0 .3rem .3rem;
    white-space: nowrap; }
    .Card-description::before, .Card-description::after {
      position: absolute;
      display: block;
      content: ""; }
    .Card-description::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 0.8rem;
      background: linear-gradient(to bottom, rgba(183, 183, 206, 0.12), rgba(251, 252, 255, 0)); }
    .Card-description::after {
      top: 0;
      right: -0.1rem;
      width: 3rem;
      height: 100%;
      background: linear-gradient(to left, #fcfdff, rgba(252, 253, 255, 0));
      filter: blur(0.1rem); }

.Create {
  margin: -.5rem -1rem 0 -1rem; }
  .Create .Logo {
    position: absolute;
    top: 1rem;
    left: 2rem; }
  .Create-link {
    color: #7B7B9F;
    text-decoration: none; }
    .Create-link:hover {
      text-decoration: underline; }
  .Create-graphics {
    background-color: #7B7B9F; }
  .Create-title {
    margin-bottom: 2rem;
    font-weight: 600; }
  .Create-flowBlocks {
    display: flex; }
  .Create-flowBlock {
    flex: 1 0 100%;
    margin-right: 100vw;
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); }
  .Create-maxWidth {
    max-width: 30rem;
    margin: auto; }
  .Create-errorLabel {
    display: none;
    color: #E65963;
    font-size: 0.9rem;
    margin-bottom: .25rem; }
  .Create-error input {
    border-color: rgba(230, 89, 99, 0.2); }
    .Create-error input:focus {
      border-color: rgba(230, 89, 99, 0.8); }
  .Create-error .Create-errorLabel {
    display: block; }
  .Create-nextButton {
    display: flex;
    text-align: right;
    padding-top: 1rem;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center; }
    .Create-nextButton .Button {
      padding-right: 2.9rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      background-position: right 1.8rem center;
      background-repeat: no-repeat;
      background-size: auto 30%;
      background-image: url("data:image/svg+xml, %3Csvg%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke-width%3D%221.5%22%20stroke%3D%22%23FFF%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%209l3.364-3.99M4.364%205.01L1%201.02%22/%3E%3C/g%3E%3C/svg%3E"); }
  .Create-inviteMore, .Create-noInviteBtn {
    cursor: pointer; }
    .Create-inviteMore:hover, .Create-noInviteBtn:hover {
      text-decoration: underline; }
  .Create-inviteMore {
    display: none; }
  .Create-inviteBtn {
    opacity: .5; }
  .Create-invite--invited .Create-noInviteBtn {
    display: none; }
  .Create-invite--invited .Create-inviteMore {
    display: block; }
  .Create-invite--invited .Create-inviteBtn {
    opacity: 1; }
  .Create-inputLabel {
    margin: .25rem 0;
    font-size: 0.8rem;
    font-weight: 600; }
  .Create-install {
    text-align: center; }
    .Create-install .Button {
      padding: 1rem 2rem;
      padding-left: 1rem;
      color: #6e5fbf;
      font-size: 1.2rem;
      box-shadow: 0 14px 42px rgba(76, 0, 112, 0.14);
      cursor: pointer; }
      .Create-install .Button:hover {
        color: #6e5fbf;
        background-color: white;
        transform: none; }
  .Create-addChrome, .Create-addChromeBtn {
    margin-bottom: 3rem; }
  .Create-addChromeBtn {
    display: none; }
  .Create-install.Create-install--error .Create-addChrome {
    display: none; }
  .Create-install.Create-install--error .Create-addChromeBtn {
    display: block; }
  .Create-passwordPolicy {
    margin: .5rem; }
  @media (max-width: 640px) {
    .Create-inviteSection {
      margin-bottom: 1rem; } }
  .Create-inviteEmail {
    padding-right: .5rem; }
    @media (max-width: 480px) {
      .Create-inviteEmail {
        margin-bottom: 0;
        padding-right: 0; }
        .Create-inviteEmail input {
          margin-bottom: .25rem; } }
  .Create-inviteFirst {
    padding-right: .5rem; }
  .Create-invite ul {
    list-style: none;
    padding-left: 0; }
  .Create-invite input {
    max-width: 100%;
    padding-right: 1rem; }

.EmailUpdates {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #F6F9FB; }
  .EmailUpdates-content {
    align-items: center;
    font-size: 1.3rem; }
    @media (max-width: 760px) {
      .EmailUpdates-content {
        flex-direction: column-reverse; } }
  .EmailUpdates-header {
    margin-top: 0;
    max-width: 38rem; }
    @media (max-width: 480px) {
      .EmailUpdates-header {
        font-size: 1.4rem; } }
  .EmailUpdates-copy {
    max-width: 38rem;
    color: #C6C3F4;
    line-height: 1.5; }
    @media (max-width: 480px) {
      .EmailUpdates-copy {
        max-width: 18rem;
        margin-right: auto;
        margin-left: auto;
        font-size: 1.2rem; } }
  .EmailUpdates .Form {
    max-width: 28rem; }
    @media (max-width: 480px) {
      .EmailUpdates .Form {
        margin-top: 0; } }
    .EmailUpdates .Form input {
      font-size: 1.1rem; }
  .EmailUpdates .Form-btn {
    margin-top: 2rem; }
  .EmailUpdates-icon {
    display: flex;
    margin-top: 2rem;
    max-width: 20rem;
    align-items: center; }
    @media (max-width: 760px) {
      .EmailUpdates-icon {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem; } }
    @media (max-width: 480px) {
      .EmailUpdates-icon {
        max-width: 13rem;
        margin-top: 0; } }

.Embed {
  margin: -.5rem -1rem;
  height: 100%;
  background-color: #f3f6f7; }
  .Embed-title {
    margin: 1rem 1rem 0 1rem;
    font-size: 1rem; }
  .Embed .Logo--noText {
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 1; }
  .Embed .Sharing-collectionCards {
    padding: .5rem 2rem; }
    .Embed .Sharing-collectionCards::before {
      display: none; }
  .Embed-inValid {
    padding: 2rem;
    text-align: center; }

.FeaturedSwitcher {
  position: relative;
  margin-top: 4rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: #7A7A9E;
  background-color: #444462; }
  .FeaturedSwitcher .Shadow {
    margin-bottom: 4rem; }
  .FeaturedSwitcher-features--image {
    position: absolute;
    top: 20%;
    right: 0;
    bottom: 0;
    left: -55%;
    background-repeat: no-repeat;
    background-size: contain; }
    .FeaturedSwitcher-features--image-1 {
      background-image: url("/img/product/Feature__S_01.svg"); }
    .FeaturedSwitcher-features--image-2 {
      background-image: url("/img/product/Feature__S_02.svg"); }
    .FeaturedSwitcher-features--image-3 {
      background-image: url("/img/product/Feature__S_03.svg"); }
    @media (max-width: 640px) {
      .FeaturedSwitcher-features--image {
        position: static;
        width: 100%;
        height: 350px; } }
    @media (min-width: 640px) {
      .FeaturedSwitcher-features--image {
        top: 28%;
        left: -29rem; } }
    @media (min-width: 760px) {
      .FeaturedSwitcher-features--image {
        top: 24%;
        left: -18rem; } }
    @media (min-width: 1020px) {
      .FeaturedSwitcher-features--image {
        top: 20%;
        left: -13rem; } }
  .FeaturedSwitcher-switches {
    display: flex;
    width: 100%;
    align-items: center; }
    @media (min-width: 760px) {
      .FeaturedSwitcher-switches {
        height: 30rem; } }
    @media (min-width: 1020px) {
      .FeaturedSwitcher-switches {
        height: 35rem; } }
    @media (min-width: 1200px) {
      .FeaturedSwitcher-switches {
        height: 40rem; } }
    @media (min-width: 90rem) {
      .FeaturedSwitcher-switches {
        height: 48rem; } }
  .FeaturedSwitcher-switchesContainer {
    z-index: 1000;
    width: 100%; }
  .FeaturedSwitcher-switch {
    padding: 2rem 1rem;
    white-space: pre-line;
    border-radius: 0;
    cursor: pointer;
    transition: all .75s ease-out; }
    @media (min-width: 480px) {
      .FeaturedSwitcher-switch {
        padding: 2rem; }
        .FeaturedSwitcher-switch p {
          margin-bottom: 0; } }
    @media (min-width: 640px) {
      .FeaturedSwitcher-switch {
        border-radius: 1rem 0 0 1rem; } }
    .FeaturedSwitcher-switch--active {
      color: #F5F4FA;
      background-color: rgba(123, 123, 159, 0.14); }
      .FeaturedSwitcher-switch--active .Heading {
        color: #F76C8E; }
    .FeaturedSwitcher-switch .Heading {
      margin-bottom: 1rem; }

.ProductFeatures {
  max-width: 53rem;
  margin-right: auto;
  margin-left: auto; }

.Feature--container {
  padding: 3rem 0; }
  @media (max-width: 640px) {
    .Feature--container {
      text-align: center; } }

.Feature--heading, .Feature--text {
  max-width: 24rem; }
  @media (min-width: 480px) {
    .Feature--heading, .Feature--text {
      margin-left: auto;
      margin-right: auto; } }

.Feature--text {
  white-space: pre-line; }

.Feature--image {
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 320px) {
    .Feature--image {
      margin-top: 2rem; } }

.Feature:nth-child(even) .Grid {
  flex-direction: row-reverse; }

@media (min-width: 1020px) {
  .Feature:nth-child(even) img {
    transform: scale(1.1); } }

@media (min-width: 760px) {
  .Feature:nth-child(odd) .Feature--copy {
    margin-top: 1rem; } }

.Feature:nth-child(2) img {
  padding-right: 1rem; }

.Footer {
  position: relative;
  background-color: #444462;
  padding-top: 4rem;
  padding-bottom: 4rem; }
  @media (max-width: 480px) {
    .Footer {
      padding-top: 1rem;
      padding-bottom: 1rem; } }
  @media (max-width: 480px) {
    .Footer .Footer-logo {
      margin: auto;
      padding: 1rem 0; } }
  .Footer .Footer-logo img {
    height: 4rem; }
    @media (max-width: 480px) {
      .Footer .Footer-logo img {
        height: 4rem; } }
  @media (max-width: 480px) {
    .Footer .Footer-iconUp {
      position: absolute;
      top: -1rem;
      right: 1rem; } }
  .Footer .Footer-iconUp img {
    height: 2rem; }
  .Footer .Shadow {
    padding: 3rem 0;
    opacity: .5; }
  .Footer-getToby {
    display: flex;
    justify-content: flex-end; }
    @media (max-width: 480px) {
      .Footer-getToby {
        display: none; } }
    .Footer-getToby button {
      padding-bottom: .5rem;
      font-size: 1.1rem; }
  @media (min-width: 480px) {
    .Footer-socialWrapper {
      margin-left: -.8rem; } }
  @media (max-width: 480px) {
    .Footer-socialWrapper {
      margin: auto; } }
  .Footer-social {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    color: white;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40%;
    cursor: pointer;
    transition: background-size .1s ease-in-out;
    filter: brightness(100%); }
    @media (max-width: 480px) {
      .Footer-social {
        width: 5rem; } }
    .Footer-social:hover {
      opacity: .8;
      background-size: 45%;
      filter: grayscale(0%); }
    .Footer-social--facebook {
      background-image: url("/img/social/facebook-white.svg"); }
    .Footer-social--twitter {
      background-image: url("/img/social/twitter-white.svg"); }
  .Footer-links--hideSmall {
    font-size: 1.1rem; }
    @media (max-width: 480px) {
      .Footer-links--hideSmall {
        display: none; } }
  .Footer-links--hideLarge {
    font-size: 1.3rem; }
    .Footer-links--hideLarge a {
      padding: 2rem 0; }
  .Footer ul {
    padding-left: 0;
    list-style: none; }
    .Footer ul li {
      padding: .6rem 0; }
    .Footer ul a {
      color: #7A7A9E;
      text-decoration: none;
      font-size: 1.5rem;
      transition: color .5s ease; }
      .Footer ul a:hover {
        color: #FA507B; }

.Form {
  margin-top: 3rem; }
  .Form-input {
    margin-bottom: .5rem;
    padding: .8rem .8rem;
    width: 100%;
    opacity: .9;
    color: #968BE3;
    background-color: #FFF;
    font-size: 1rem;
    border: solid 2px #FFF;
    border-radius: .4rem;
    outline: none;
    transition: opacity .5s ease;
    transition: border .5s ease; }
    .Form-input::-webkit-input-placeholder {
      color: rgba(150, 139, 227, 0.5); }
    .Form-input:focus {
      opacity: 1;
      border: solid 2px #C6C3F4; }
    .Form-input--dark {
      border: solid 2px rgba(198, 195, 244, 0.2); }
      .Form-input--dark::-webkit-input-placeholder {
        color: #7A7A9E; }
      .Form-input--dark:focus {
        border: solid 2px #C6C3F4; }
    .Form-input--textarea {
      width: 100%;
      margin-bottom: 0;
      resize: none;
      margin-bottom: 0;
      resize: none;
      border: solid 1px #fdb3c6;
      transition: border .5s ease; }
  .Form-selectWrapper {
    position: relative; }
    .Form-selectWrapper::after {
      content: '\25BE';
      position: absolute;
      top: .5rem;
      right: 1.5rem;
      font-size: 1.5rem;
      color: #C6C3F4; }

.Happy {
  padding-top: 10rem;
  padding-bottom: 10rem; }
  .Happy .Button {
    color: #FA507B; }

.Header {
  max-width: 80rem;
  margin: auto;
  padding: 2rem .5rem;
  padding-top: 0;
  background-color: #FFF; }
  .Header-container {
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (max-width: 760px) {
      .Header-container {
        display: block; } }
  .Header .Button {
    padding: .8rem 2rem;
    font-size: .8rem; }
  .Header-logo, .Header-button {
    padding: .5rem; }
  @media (max-width: 760px) {
    .Header-button {
      padding-top: 1rem; } }
  .Header-menu {
    flex: 1 1 auto; }
  @media (min-width: 320px) {
    .Header {
      padding: 1rem 0;
      padding-top: 0; } }
  .Header ul {
    padding-left: 0; }
    @media (max-width: 480px) {
      .Header ul {
        margin-bottom: 0; } }
  .Header > div {
    margin: auto;
    padding: .25rem 0;
    text-align: center; }

.Header--noShadow .Shadow {
  display: none; }

.Heading {
  margin: 0;
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 1.5; }
  .Heading--sm {
    font-size: 1rem; }
  .Heading--lg {
    font-size: 3.6rem; }
    @media (max-width: 480px) {
      .Heading--lg {
        font-size: 2.8rem; } }
  .Heading--noMargin {
    margin: 0; }

.Heart {
  display: inline-block;
  width: 1.2rem;
  height: 1rem;
  background-image: url("/img/product/heart.svg");
  background-repeat: no-repeat;
  background-size: contain; }

.Hero {
  color: #A3A3C0; }
  .Hero-subtitle {
    font-size: 1.8rem;
    max-width: 42rem; }
    @media (max-width: 760px) {
      .Hero-subtitle {
        font-size: 1.4rem; } }
    @media (max-width: 480px) {
      .Hero-subtitle {
        font-size: 1.2rem; } }
  @media (min-width: 320px) {
    .Hero .Heading--lg {
      margin-top: 0; } }

@media (max-width: 480px) {
  .Home .Header-button {
    display: none; } }

@media (max-width: 81rem) {
  .Home .Hero-title {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto; } }

@media (max-width: 480px) {
  .Home .Hero div {
    padding-top: 0;
    padding-bottom: 0; } }

@media (max-width: 480px) {
  .Home .Button--addToby {
    margin-bottom: 2rem; } }

.Logo {
  display: inline-block;
  margin: 0 auto;
  padding-left: 4.5rem;
  min-width: 8rem;
  min-height: 4rem;
  color: rgba(250, 80, 123, 0);
  background-image: url("/img/logos/logo-toby-pink-nobg.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  font-family: "Montserrat", "AvenirNext", Open Sans, Lucida Grande, sans-serif;
  font-size: 1.5rem;
  line-height: 4rem;
  text-decoration: none; }
  .Logo:hover, .Logo:active, .Logo:focus {
    color: rgba(250, 80, 123, 0);
    text-decoration: none; }
  .Logo--noText {
    min-width: 1.2rem;
    min-height: 1.2rem;
    padding: 0;
    background-image: url("/img/logos/logo-symbol-pink.svg"); }

.Menu {
  padding: 0;
  list-style: none; }
  .Menu-item {
    display: inline-block;
    padding: 0 .4rem; }
    @media (max-width: 480px) {
      .Menu-item {
        padding: .5rem 0; } }
  @media (max-width: 480px) {
    .Menu ul {
      flex-wrap: wrap;
      max-width: 20rem; } }
  .Menu a {
    padding: .5rem 1rem;
    color: #7A7A9E;
    font-size: 1rem;
    letter-spacing: 0.24px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 1rem; }
    .Menu a:hover {
      background-color: #F6F9FB; }
    @media (max-width: 760px) {
      .Menu a {
        font-size: 0.9rem; } }
    @media (max-width: 480px) {
      .Menu a {
        font-size: 0.8rem; } }

.Popup {
  display: none;
  position: fixed;
  top: 17rem;
  left: 50%;
  width: 440px;
  padding: 2rem;
  background: #FFF;
  box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  transform: translate(-50%, 3rem);
  opacity: 0;
  transition: all .3s ease-in-out;
  z-index: 1001; }
  .Popup hr {
    margin: 1rem 0; }
  .Popup h2 {
    font-family: sans-serif;
    font-size: 1rem;
    margin: 0;
    margin-bottom: 1rem; }
  .Popup p {
    font-size: .825rem; }
  .Popup-name {
    font-weight: bold; }
  .Popup--installing::before {
    display: block;
    top: -2rem;
    right: 3rem;
    position: absolute;
    width: 42px;
    height: 26px;
    content: '';
    background: url("/img/arrow.svg"); }
  .Popup .note {
    float: right;
    font-style: italic;
    font-size: .625rem;
    color: #b6b6b6; }

.Pricing .Hero {
  padding-bottom: 2rem; }

.Pricing .Hero-title {
  color: #7B7B9F;
  font-size: 2.25rem; }

.Pricing .Hero-subtitle {
  color: #7A7A9E;
  font-size: 1.4rem; }
  @media (max-width: 480px) {
    .Pricing .Hero-subtitle {
      font-size: 1.2rem; } }

.Prices-grid {
  position: relative; }
  .Prices-gridContainer {
    display: flex;
    flex-wrap: wrap; }
  @media (min-width: 760px) {
    .Prices-grid::after {
      position: absolute;
      content: '';
      left: -1rem;
      right: -1rem;
      bottom: 0;
      height: 50%;
      z-index: -1;
      background-color: #444462; } }

.Prices-cell {
  flex: 1 1 33%;
  padding: 0 1rem; }
  @media (max-width: 840px) {
    .Prices-cell {
      flex: 1 1 100%;
      margin: 1rem 0; } }
  .Prices-cellFloat {
    padding: 2rem;
    background-color: #FFF;
    border-radius: .625rem;
    box-shadow: 0 1px 25px rgba(58, 58, 82, 0.07); }
    @media (max-width: 840px) {
      .Prices-cellFloat {
        max-width: 20rem; } }
    .Prices-cellFloat--dark {
      background-color: #7B7B9F; }
  .Prices-cellSubHeader {
    margin-top: 0;
    margin-bottom: 0; }
  .Prices-cellHeader {
    margin-bottom: 0;
    font-size: 3rem; }
  .Prices-cellEnterprise {
    color: white; }

.Prices-copy {
  background-color: #444462;
  height: 20rem; }
  .Prices-copyContainer {
    max-width: 24rem; }

.Product .Hero-title {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto; }

.ProductBanner {
  margin-bottom: 2rem;
  background-color: #FFB6C9;
  height: 25rem; }
  @media (max-width: 1200px) {
    .ProductBanner {
      height: 20rem; } }
  @media (max-width: 1020px) {
    .ProductBanner {
      height: 18rem; } }
  @media (max-width: 640px) {
    .ProductBanner {
      height: 14rem; } }
  @media (max-width: 480px) {
    .ProductBanner {
      height: 10rem; } }
  .ProductBanner-image {
    margin: auto;
    max-width: 87rem;
    width: 100%;
    height: 100%;
    background-image: url("/img/product/product_header.svg");
    background-repeat: no-repeat;
    background-size: cover; }

.Rating {
  padding: 3rem;
  background-color: #958BE3; }
  @media (max-width: 640px) {
    .Rating {
      padding: 1rem 1rem; } }
  .Rating-heading {
    margin-bottom: 0;
    font-size: 2.25rem; }
    @media (max-width: 480px) {
      .Rating-heading {
        font-size: 1.3rem; } }
  .Rating-heading-2 {
    margin-top: 1rem;
    margin-bottom: 2.3rem;
    font-size: 1.6875rem; }
    @media (max-width: 480px) {
      .Rating-heading-2 {
        font-size: 1rem; } }
  .Rating-smallText {
    margin-top: 1.8rem;
    font-size: 1.3rem;
    opacity: .5; }
    @media (max-width: 480px) {
      .Rating-smallText {
        font-size: 1rem; } }
  .Rating .Button {
    display: inline-block;
    padding: 1rem 2rem;
    padding-left: 1rem;
    color: #6E5FBF;
    font-size: 1.2rem;
    box-shadow: 0 14px 42px rgba(76, 0, 112, 0.14); }
    .Rating .Button:hover {
      box-shadow: 0 19px 56px rgba(77, 0, 113, 0.1); }
  .Rating .Button--container {
    position: relative; }
    .Rating .Button--container .Shadow {
      position: absolute;
      top: 1.8rem;
      opacity: 0.2; }
  .Rating hr {
    margin: 1rem auto; }

.Shadow {
  width: 100%;
  height: 20px;
  background-image: url("/img/shadow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; }
  .Shadow--dimed {
    opacity: .5; }
  .Shadow--faint {
    opacity: .1; }
  .Shadow--dark {
    background-image: url("/img/shadow_dark.png"); }

.Sharing {
  display: flex;
  margin-top: -.5rem;
  background-color: #f3f6f7;
  flex-direction: column;
  min-height: 100vh; }
  .Sharing-header {
    position: relative;
    padding: 1rem 0;
    padding-bottom: 2rem;
    background-color: white;
    text-align: center; }
    .Sharing-headerTitle {
      margin: 0;
      padding: 1rem; }
    .Sharing-headerCopy {
      margin: auto;
      max-width: 32rem; }
    .Sharing-header .Logo {
      width: 100%;
      min-width: 7rem;
      max-width: 8rem;
      line-height: 2.5rem;
      top: 0; }
      @media (min-width: 640px) {
        .Sharing-header .Logo {
          position: absolute;
          left: 2rem;
          width: 2rem; } }
  .Sharing-headerSubtitle {
    font-size: 1.2rem; }
  .Sharing-inValid {
    padding: 4rem; }
  .Sharing-collection {
    position: relative;
    background-color: #f3f6f7; }
    .Sharing-collectionOpenTabs {
      position: absolute;
      top: -1rem;
      right: 1rem;
      z-index: 1; }
      @media (max-width: 480px) {
        .Sharing-collectionOpenTabs {
          display: none; } }
    .Sharing-collectionTitle {
      padding: .5rem 1rem; }
    .Sharing-collectionBar {
      padding: 1rem; }
    .Sharing-collectionCards {
      position: relative;
      overflow: hidden;
      padding: 2rem;
      background-color: #f3f6f7; }
      .Sharing-collectionCards::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 1.1rem;
        background: linear-gradient(#e4eaed, #f3f6f7);
        content: '';
        filter: blur(0.8rem); }
    .Sharing-collection hr {
      margin-top: 0;
      padding-top: 0;
      opacity: .15;
      color: #7A7A9E; }
  .Sharing-footer {
    display: flex;
    position: relative;
    padding: 3rem 2rem 2rem 2rem;
    background-color: #444462;
    flex: 1 1 100%;
    align-items: flex-end; }
    .Sharing-footerButton {
      position: absolute;
      top: -1.5rem;
      left: 0;
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around; }
      .Sharing-footerButton button {
        font-size: .8rem; }
    .Sharing-footerLinks {
      width: 100%; }
      @media (min-width: 320px) {
        .Sharing-footerLinks {
          padding-top: 1rem; } }
      .Sharing-footerLinksContainer {
        display: flex;
        width: 100%;
        justify-content: space-between; }
        @media (max-width: 640px) {
          .Sharing-footerLinksContainer {
            display: block; } }
        @media (max-width: 760px) {
          .Sharing-footerLinksContainer:nth-child(1) {
            display: none; } }
        @media (min-width: 760px) {
          .Sharing-footerLinksContainer:nth-child(2) {
            display: none; } }
      .Sharing-footerLinks .Social-icon {
        max-width: 1rem;
        max-height: 1rem;
        margin: .5rem 1rem 0 0; }
    @media (min-width: 320px) {
      .Sharing-footerLink {
        padding: .5rem 0; } }
    .Sharing-footer a,
    .Sharing-footer a:visited {
      color: #e8e9ec;
      text-decoration: none; }
    .Sharing-footer a:hover {
      color: #FA507B; }
  .Sharing-CTA {
    display: flex; }
  .Sharing-modal {
    position: fixed;
    top: 5rem;
    left: 50%;
    display: none;
    width: 35rem;
    padding: 2rem;
    transform: translate(-50%, 0);
    background: white;
    border-radius: .25rem;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2), 0 0 0 9999rem rgba(68, 68, 98, 0.3);
    z-index: 5000; }
    .Sharing-modal h3, .Sharing-modal p {
      text-align: center; }
    .Sharing-modal h3 {
      margin: 0;
      margin-bottom: 1rem; }
    .Sharing-modal--visible {
      display: block; }
  .Sharing-snippet {
    width: 100%;
    padding: 1rem;
    border: none;
    resize: none;
    background-color: rgba(68, 68, 98, 0.2);
    color: #444462;
    border-radius: .25rem;
    font-size: 1rem;
    height: 9rem; }

.m--maxSmall {
  width: 100%;
  max-width: 57rem;
  margin-right: auto;
  margin-left: auto; }

.Social {
  display: flex;
  position: absolute;
  top: 0;
  right: 2rem;
  font-size: 0.87rem;
  align-items: center;
  letter-spacing: 1px; }
  @media (max-width: 760px) {
    .Social {
      display: none; } }
  .Social-link {
    margin-left: .5rem; }
  .Social-container {
    display: flex;
    margin: 0;
    padding: .6rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center; }
    .Social-container:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
  .Social-icon {
    max-width: 1rem;
    max-height: 1rem;
    flex-basis: 1.2rem;
    opacity: .8; }
  .Social a,
  .Social a:visited {
    color: #7B7B9F;
    text-decoration: none; }

.Unsubscribe {
  min-height: 100vh; }
  .Unsubscribe .Button--addToby {
    display: none; }
  .Unsubscribe-img {
    max-width: 20rem; }
  .Unsubscribe-unsubLink {
    font-size: 0.9rem; }
  .Unsubscribe-buttonKeep {
    max-width: 30rem;
    margin: auto; }
  .Unsubscribe-actions {
    padding-bottom: 2rem; }
    .Unsubscribe-actionsError {
      display: none;
      padding: 0.5rem 1rem;
      margin-top: 1rem;
      background-color: rgba(230, 89, 99, 0.4);
      border-radius: 4px;
      color: #FFF; }
      .Unsubscribe-actionsError--show {
        display: block; }
    @media (max-width: 480px) {
      .Unsubscribe-actions .Button {
        margin: 0; } }
    .Unsubscribe-actions button,
    .Unsubscribe-actions textarea {
      display: block;
      margin: 1rem auto;
      width: 100%; }

.UsedBy {
  padding: 1rem 0; }
  .UsedBy-title {
    color: #7A7A9E; }
    @media (max-width: 480px) {
      .UsedBy-title {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 1.2rem;
        line-height: 1.8; } }
  .UsedBy .c--dark {
    color: #A3A3C0; }
  .UsedBy-companies {
    display: flex;
    max-width: 70rem;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
  .UsedBy-companyImage {
    padding: 2rem 1rem;
    flex: 1 0 20%; }
    @media (max-width: 640px) {
      .UsedBy-companyImage {
        flex: 1 0 33%; } }